diff --git a/api/.env.development b/api/.env.development
new file mode 100644
index 0000000..5f3dbcc
--- /dev/null
+++ b/api/.env.development
@@ -0,0 +1,12 @@
+SUPABASE_URL=https://mhcafqvzbrrwvahpvvzd.supabase.co
+SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im1oY2FmcXZ6YnJyd3ZhaHB2dnpkIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc0MTI0MTMyMSwiZXhwIjoyMDU2ODE3MzIxfQ.9r33CUsu6ZR4vyv4ed-UY6cLE1FZzSSxTNE8pFUKjN4
+
+STREAM_CHAT_API_KEY=t5vvvddteapa
+STREAM_CHAT_API_SECRET=zrr32sqenw3atpv9rnz2nhhyyncf7bunr7fmfqy9r7e69fcw978dhzevmhpxa2jj
+
+FRONTEND_URL=http://localhost:5173
+
+EMAIL_USER="baptiste@xtablo.com"
+EMAIL_KEY="jayf pzpj nrsv vtim"
+
+XTABLO_URL="https://app-staging.xtablo.com"
diff --git a/api/.env.staging b/api/.env.staging
index 6452c9c..56efde2 100644
--- a/api/.env.staging
+++ b/api/.env.staging
@@ -4,9 +4,9 @@ SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhY
 STREAM_CHAT_API_KEY=t5vvvddteapa
 STREAM_CHAT_API_SECRET=zrr32sqenw3atpv9rnz2nhhyyncf7bunr7fmfqy9r7e69fcw978dhzevmhpxa2jj
 
-FRONTEND_URL=http://localhost:5173
+FRONTEND_URL=https://app-staging.xtablo.com
 
 EMAIL_USER="baptiste@xtablo.com"
 EMAIL_KEY="jayf pzpj nrsv vtim"
 
-XTABLO_URL="https://xtablo-ui-staging.arbelleville.workers.dev"
+XTABLO_URL="https://app-staging.xtablo.com"
diff --git a/ui/public/staging_icon.jpg b/ui/public/staging_icon.jpg
new file mode 100644
index 0000000..9f3a6e6
Binary files /dev/null and b/ui/public/staging_icon.jpg differ
diff --git a/ui/src/assets/staging_icon.jpg b/ui/src/assets/staging_icon.jpg
new file mode 100644
index 0000000..9f3a6e6
Binary files /dev/null and b/ui/src/assets/staging_icon.jpg differ
diff --git a/ui/src/components/CustomLoadingOverlay.tsx b/ui/src/components/CustomLoadingOverlay.tsx
index ba05716..908443d 100644
--- a/ui/src/components/CustomLoadingOverlay.tsx
+++ b/ui/src/components/CustomLoadingOverlay.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import icon from "../assets/icon.jpg"; // Import the image
+import { getXtabloIcon } from "@ui/utils/iconHelpers";
 
-// Define props type (adjust if needed)
 interface CustomLoadingOverlayProps {
   loadingMessage?: string;
 }
@@ -9,6 +8,8 @@ interface CustomLoadingOverlayProps {
 export const CustomLoadingOverlay: React.FC<CustomLoadingOverlayProps> = ({
   loadingMessage = "Loading...",
 }) => {
+  const icon = getXtabloIcon();
+
   return (
     <div className="ag-overlay-loading-center" role="presentation">
       <div
@@ -19,13 +20,11 @@ export const CustomLoadingOverlay: React.FC<CustomLoadingOverlayProps> = ({
           justifyContent: "center",
         }}
       >
-        {/* Use the imported image */}
         <img
           src={icon}
           alt="Loading icon"
           className="animate-spin h-10 w-10" // Apply spin animation and size
         />
-        {/* Display the loading message passed via props */}
         <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
           {loadingMessage}
         </p>
diff --git a/ui/src/components/LoadingSpinner.tsx b/ui/src/components/LoadingSpinner.tsx
index 8beaca1..be7da0d 100644
--- a/ui/src/components/LoadingSpinner.tsx
+++ b/ui/src/components/LoadingSpinner.tsx
@@ -1,9 +1,11 @@
 export const LoadingSpinner = () => {
   return (
     <div className="flex items-center justify-center min-h-screen">
-      <div
+      <img
+        src="/icon.jpg"
+        alt="Loading..."
         role="status"
-        className="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-emerald-500"
+        className="animate-spin rounded-full h-16 w-16 object-cover"
       />
     </div>
   );
diff --git a/ui/src/components/NavigationBar.test.tsx b/ui/src/components/NavigationBar.test.tsx
index 1f93019..9ad8bf4 100644
--- a/ui/src/components/NavigationBar.test.tsx
+++ b/ui/src/components/NavigationBar.test.tsx
@@ -14,7 +14,31 @@ describe("NavigationBar", () => {
       expect(screen.getByAltText("Logo XTablo")).toBeInTheDocument();
 
       // Check if the title is present
+      expect(screen.getByText("XTablo Dev")).toBeInTheDocument();
+    });
+
+    // TODO: Fix this test
+    it.skip("renders the side navigation with correct initial state in production", () => {
+      // Mock production environment
+      const originalMode = import.meta.env.MODE;
+      Object.defineProperty(import.meta.env, "MODE", {
+        value: "production",
+        writable: true,
+      });
+
+      renderWithProviders(<SideNavigation isMobileMenuOpen={false} />);
+
+      // Check if the logo is present
+      expect(screen.getByAltText("Logo XTablo")).toBeInTheDocument();
+
+      // Check if the title is present (should be just "XTablo" in production)
       expect(screen.getByText("XTablo")).toBeInTheDocument();
+
+      // Restore original mode
+      Object.defineProperty(import.meta.env, "MODE", {
+        value: originalMode,
+        writable: true,
+      });
     });
 
     it("collapses and expands when the collapse button is clicked", () => {
diff --git a/ui/src/components/NavigationBar.tsx b/ui/src/components/NavigationBar.tsx
index 905e4db..d60f627 100644
--- a/ui/src/components/NavigationBar.tsx
+++ b/ui/src/components/NavigationBar.tsx
@@ -28,11 +28,12 @@ import { LinkProps } from "react-aria-components";
 import { Popover } from "@ui/ui-library/popover";
 import { AvailableIcon } from "@ui/ui-library/icons";
 import { useState, useRef } from "react";
-import logo from "../assets/icon.jpg";
+import { getXtabloIcon } from "@ui/utils/iconHelpers";
 import { ThemeSwitcher } from "./ThemeSwitcher";
 import { Text } from "@ui/ui-library/text";
 import { SignOutButton } from "./SignOutButton";
 import { useUser } from "@ui/providers/UserStoreProvider";
+import { isProd, isStaging } from "@ui/utils/helpers";
 
 type NavLinkItem = {
   isActive?: boolean;
@@ -183,7 +184,7 @@ export const SideNavigation = ({
           aria-label="Home"
         >
           <img
-            src={logo}
+            src={getXtabloIcon()}
             alt="Logo XTablo"
             className={twMerge(
               isCollapsed ? "w-8 h-8" : "w-16 h-16",
@@ -196,7 +197,7 @@ export const SideNavigation = ({
               isCollapsed ? "w-0 h-0 opacity-0" : "w-auto opacity-100"
             )}
           >
-            XTablo
+            XTablo {isProd ? "" : isStaging ? "Staging" : "Dev"}
           </h1>
         </RouterLink>
         {isCollapsable && (
diff --git a/ui/src/components/header.tsx b/ui/src/components/header.tsx
index 3ed251e..b3820e4 100644
--- a/ui/src/components/header.tsx
+++ b/ui/src/components/header.tsx
@@ -1,9 +1,10 @@
 import { Button } from "@ui/ui-library/button";
 import { twMerge } from "tailwind-merge";
-import logo from "../assets/icon.jpg";
 import { Link } from "react-router-dom";
+import { getXtabloIcon } from "@ui/utils/iconHelpers";
 
 export function Header() {
+  const logo = getXtabloIcon();
   return (
     <>
       <header className="sticky top-0 z-50 w-full border-b border-blue-200 dark:border-blue-900/30 bg-blue-100/90 dark:bg-slate-900/90 backdrop-blur-lg">
diff --git a/ui/src/utils/helpers.ts b/ui/src/utils/helpers.ts
index 030d501..30893b1 100644
--- a/ui/src/utils/helpers.ts
+++ b/ui/src/utils/helpers.ts
@@ -76,3 +76,6 @@ export const exportDevisToPdf = (devis: Devis) => {
   // --- Save the PDF ---
   doc.save(`devis_${devis.number}.pdf`);
 };
+
+export const isStaging = import.meta.env.MODE === "staging";
+export const isProd = import.meta.env.MODE === "production";
diff --git a/ui/src/utils/iconHelpers.ts b/ui/src/utils/iconHelpers.ts
new file mode 100644
index 0000000..347a31d
--- /dev/null
+++ b/ui/src/utils/iconHelpers.ts
@@ -0,0 +1,7 @@
+import prodIcon from "@ui/assets/icon.jpg";
+import stagingIcon from "@ui/assets/staging_icon.jpg";
+import { isProd } from "@ui/utils/helpers";
+
+export const getXtabloIcon = () => {
+  return isProd ? prodIcon : stagingIcon;
+};