diff --git a/apps/ui/src/Route.tsx b/apps/ui/src/Route.tsx
index 80282fd7d..26d092068 100644
--- a/apps/ui/src/Route.tsx
+++ b/apps/ui/src/Route.tsx
@@ -30,7 +30,7 @@ import { PublicRoute } from 'routes'
 import UpdatePassword from 'pages/UpdatePassword'
 
 import { ThemeProvider } from 'styled-components'
-import { defaultTheme } from 'styles/theme'
+import { defaultTheme, lightTheme } from 'styles/theme'
 import { WelcomeLoader } from 'components/Loader/WelcomeLoader'
 import { CheatCode } from 'pages/Auth/Register/CheatCode'
 
@@ -79,7 +79,7 @@ import ToolkitModal from 'modals/ToolkitModal'
 
 const Route = () => {
   const { user, loading } = useContext(AuthContext)
-  const [theme] = useState(defaultTheme)
+  const [theme, setTheme] = useState<any>(defaultTheme)
   const [cmdkOpen, setCmdkOpen] = useState(false)
 
   useHotkeys('ctrl+enter, meta+k', event => {
@@ -88,10 +88,18 @@ const Route = () => {
     return false
   })
 
+  // const handleChangeTheme = (theme: any) => {
+  //   setTheme(theme)
+  // }
+
   if (loading) return <WelcomeLoader />
 
   return (
     <ThemeProvider theme={theme}>
+      {/* <div>
+        <button onClick={() => handleChangeTheme(defaultTheme)}>default Theme</button>
+        <button onClick={() => handleChangeTheme(lightTheme)}>light Theme</button>
+      </div> */}
       <Routes>
         <>
           <Router element={<RootLayout />}>
diff --git a/apps/ui/src/components/Layout/LayoutStyle.ts b/apps/ui/src/components/Layout/LayoutStyle.ts
index 75c8ab296..6696ed9e2 100644
--- a/apps/ui/src/components/Layout/LayoutStyle.ts
+++ b/apps/ui/src/components/Layout/LayoutStyle.ts
@@ -2,6 +2,7 @@ import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 
 const StyledAppContainer = styled.div`
+  /* background: ${({ theme }) => theme.body.testVariableColor}; */
   background: linear-gradient(265.15deg, rgba(76, 166, 248, 1) -32.37%, rgba(33, 82, 243, 1) 100%);
   height: 100vh;
   display: flex;
diff --git a/apps/ui/src/styled.d.ts b/apps/ui/src/styled.d.ts
index 6ccf29930..a3b0e3238 100644
--- a/apps/ui/src/styled.d.ts
+++ b/apps/ui/src/styled.d.ts
@@ -11,6 +11,7 @@ declare module 'styled-components' {
       textColor: string
       backgroundImage: string
       backgroundImageSecondary: string
+      testVariableColor: string
     }
   }
 }
diff --git a/apps/ui/src/styles/theme.ts b/apps/ui/src/styles/theme.ts
index 94897963a..df892ad5f 100644
--- a/apps/ui/src/styles/theme.ts
+++ b/apps/ui/src/styles/theme.ts
@@ -11,6 +11,7 @@ const defaultTheme: DefaultTheme = {
     backdropFilter: 'blur(50px)',
     textColor: 'rgba(255, 255, 255)',
     backgroundImageSecondary: defaultBgImageSecondary,
+    testVariableColor: 'var(--color-brand-blue)',
   },
 }
 
@@ -22,6 +23,7 @@ const lightTheme: DefaultTheme = {
     backdropFilter: 'blur(50px);',
     textColor: 'rgba(255, 255, 255)',
     backgroundImageSecondary: defaultBgImageSecondary,
+    testVariableColor: 'var(--color-highlight_blue)',
   },
 }