diff --git a/src/App.jsx b/src/App.jsx
index 12a0c51..49a63f6 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,29 +2,165 @@ import { QuestProvider } from '@questlabs/react-sdk';
 import './App.css'
 import AllRoutes from './Router/AllRoutes';
 import Loader from './assets/Misc/Loader';
-import { appConfig } from './assets/Config/appConfig';
+// import { appConfig } from './assets/Config/appConfig';
 import '@questlabs/react-sdk/dist/style.css'
-import { useEffect } from 'react';
+import { createContext, useEffect, useState } from 'react';
 import GeneralFunction from './assets/Functions/GeneralFunction';
 
+// function App() {
+
+//   useEffect(() => {
+//     GeneralFunction.shareInstance.getTheme()
+//   }, [])
+
+//   return (
+//     <>
+//       <div>
+//         <Loader/>
+//         <QuestProvider
+//           apiKey={appConfig?.QUEST_API_KEY}
+//           entityId={appConfig?.QUEST_ENTITY_ID}
+//           apiType='STAGING'
+//         >
+//           <AllRoutes/>
+//         </QuestProvider>
+//       </div>
+//     </>
+//   )
+// }
+
+
+export const ThemeContext = createContext();
+
+const appConfig = {
+  QUEST_ENTITY_ID: "e-5768fd26-d226-4ac1-81e6-3c99427f3fb3",
+  QUEST_ENTITY_NAME: "Quest Labs",
+  QUEST_API_KEY: "k-e6ec8094-6eef-4e80-a804-112a63607bf5",
+  QUEST_ONBOARDING_QUIZ_CAMPAIGN_ID: "q-a5ebda7b-decf-4d4c-8ae6-174807254f9c",
+  GOOGLE_REDIRECT_URI: "http://localhost:3000/login/",
+  GOOGLE_CLIENT_ID: "857590091173-lm2tl3nqfvp2thd4nrhqidjuq2hroco8.apps.googleusercontent.com",
+  QUEST_GET_STARTED_CAMPAIGN_ID: "q-6a23cba9-b2ac-403c-9425-d47165bd125e",
+  QUEST_SEARCH_BAR_CAMPAIGN_ID: '',
+}
+
+
+const contentConfig = {
+  login: {
+    heading: "Supercharge your User Experience",
+    description: "Start your journey to unlocking product-driven growth with Quest 💫"
+  }
+}
+
 function App() {
 
+
+  const lightColors = {
+    "light-color-premitive-grey-0": "#afafaf",
+    "light-color-premitive-grey-1": "#757575",
+    "light-color-premitive-grey-2": "#545454",
+    "light-color-premitive-grey-3": "#333333",
+    "light-color-premitive-grey-4": "#141414",
+    "light-color-premitive-grey-5": "#000000",
+  }
+
+  const lightBgColors = {
+    "light-primary-bg-color-0": "#7B68EE",
+    "light-primary-bg-color-1": "#edf3ff",
+    "light-primary-bg-color-2": "#ffffff",
+    "light-primary-bg-color-3": "#e4e9f7",
+    "light-primary-bg-color-4": "#ffffff",
+
+    "light-primary-tile-color-0": "#d7f1f",
+    "light-primary-tile-color": "#9a7ada",
+  }
+
+  const darkColors = {
+    "dark-color-premitive-grey-1": "#cbcbcb",
+    "dark-color-premitive-grey-0": "#afafaf",
+    "dark-color-premitive-grey-2": "#e2e2e2",
+    "dark-color-premitive-grey-3": "#eeeeee",
+    "dark-color-premitive-grey-4": "#f6f6f6",
+    "dark-color-premitive-grey-5": "#ffffff",
+  }
+
+  const darkBgColors = {
+    "dark-primary-bg-color-0": "#1c1a27",
+    "dark-primary-bg-color-1": "#fbfafe",
+    "dark-primary-bg-color-2": "#111018",
+    "dark-primary-bg-color-3": "#1c1a27",
+    "dark-primary-bg-color-4": "#3e3a58",
+
+    "dark-primary-tile-color-0": "#f0fcec",
+    "dark-primary-border-color": "#455a64"
+  }
+
+  const bgColors = {
+    "dark-color-premitive-grey-1": "#cbcbcb",
+    "dark-color-premitive-grey-0": "#afafaf",
+    "dark-color-premitive-grey-2": "#e2e2e2",
+    "dark-color-premitive-grey-3": "#eeeeee",
+    "dark-color-premitive-grey-4": "#f6f6f6",
+    "dark-color-premitive-grey-5": "#ffffff",
+
+    "dark-primary-bg-color-0": "#1c1a27",
+    "dark-primary-bg-color-1": "#fbfafe",
+    "dark-primary-bg-color-2": "#111018",
+    "dark-primary-bg-color-3": "#1c1a27",
+    "dark-primary-bg-color-4": "#3e3a58",
+
+    "dark-primary-tile-color-0": "#f0fcec",
+    "dark-primary-border-color": "#455a64",
+
+    "light-color-premitive-grey-0": "#afafaf",
+    "light-color-premitive-grey-1": "#757575",
+    "light-color-premitive-grey-2": "#545454",
+    "light-color-premitive-grey-3": "#333333",
+    "light-color-premitive-grey-4": "#141414",
+    "light-color-premitive-grey-5": "#000000",
+
+    "light-primary-bg-color-0": "#7B68EE",
+    "light-primary-bg-color-1": "#edf3ff",
+    "light-primary-bg-color-2": "#ffffff",
+    "light-primary-bg-color-3": "#e4e9f7",
+    "light-primary-bg-color-4": "#ffffff",
+
+    "light-primary-tile-color-0": "#d7f1f",
+    "light-primary-tile-color": "#9a7ada",
+  }
+
+  const [theme, setTheme] = useState('dark');
+
+
+
   useEffect(() => {
-    GeneralFunction.shareInstance.getTheme()
-  }, [])
+
+    const getTheme = () => {
+      let theme = localStorage.getItem("theme");
+
+      if (theme && theme == "dark") {
+        setTheme('dark');
+      } else {
+        setTheme('light');
+      }
+    }
+    getTheme();
+
+  }, [theme])
 
   return (
     <>
-      <div>
-        <Loader/>
-        <QuestProvider
-          apiKey={appConfig?.QUEST_API_KEY}
-          entityId={appConfig?.QUEST_ENTITY_ID}
-          apiType='STAGING'
-        >
-          <AllRoutes/>
-        </QuestProvider>
-      </div>
+      <ThemeContext.Provider value={{ theme, setTheme, bgColors, appConfig, contentConfig }} >
+        <div>
+          <Loader />
+          <QuestProvider
+            apiKey={appConfig?.QUEST_API_KEY}
+            entityId={appConfig?.QUEST_ENTITY_ID}
+            apiType='STAGING'
+          >
+            <AllRoutes />
+          </QuestProvider>
+        </div>
+      </ThemeContext.Provider>
     </>
   )
 }
diff --git a/src/Components/Common/CommonComponents/InputComponent.jsx b/src/Components/Common/CommonComponents/InputComponent.jsx
index 93e9f9d..8ce681d 100644
--- a/src/Components/Common/CommonComponents/InputComponent.jsx
+++ b/src/Components/Common/CommonComponents/InputComponent.jsx
@@ -14,12 +14,13 @@ export default function InputComponent({
     inputInlineStyle,
     onChange
 }) {
-    
+
 
     return (
-        <div className="w-100 mt-3" style={{...divInlineStyle}}>
-            <p className="text-primary-3 font-medium text-sm" style={{...textInlineStyle}}>{`${inputTitle} ${isMandatory == true ? "*" : ""}`}</p>
-            <input type={type} name={name} value={value} className="mt-1 rounded-md px-3 py-2 border-none outline-none focus:ring-1 text-sm bg-customShade-5 text-primary-3" style={{...{width: "100%"}, ...inputInlineStyle}} onChange={(e) => onChange(e)}/>
+        <div
+            className="w-100 mt-3" style={{ ...divInlineStyle }}>
+            <p className="text-primary-3 font-medium text-sm " style={{ ...textInlineStyle }}>{`${inputTitle} ${isMandatory == true ? "*" : ""}`}</p>
+            <input type={type} name={name} value={value} className="mt-1 rounded-md px-3 py-2 border-none outline-none focus:ring-1 text-sm bg-customShade-5 text-primary-3" style={{ ...{ width: "100%" }, ...inputInlineStyle }} onChange={(e) => onChange(e)} />
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/Components/Common/DashboardWrapper.jsx b/src/Components/Common/DashboardWrapper.jsx
index 6ed89bd..8ace31d 100644
--- a/src/Components/Common/DashboardWrapper.jsx
+++ b/src/Components/Common/DashboardWrapper.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import "./dashboardWrapper.css";
 import { Link, useNavigate } from "react-router-dom";
 import { routesConfig } from "../../assets/Config/routesConfig";
@@ -8,19 +8,160 @@ import GeneralFunction from "../../assets/Functions/GeneralFunction";
 import { FeedbackWorkflow, Search } from "@questlabs/react-sdk";
 import FeedbackButton from "./FeedbackButton";
 import { generalFunction } from "../../assets/Config/GeneralFunction";
+import { ThemeContext } from "../../App";
 
-export default function DashboardWrapper({children, selectdRoute}) {
+// export default function DashboardWrapper({children, selectdRoute}) {
+//     const [hover, sethover] = useState("close");
+//     const [sidebarOpen, setSidebarOpen] = useState(false);
+//     const navigate = useNavigate();
+
+
+//     return (
+//         <div className="flex relative w-screen h-screen bg-customShade-4 transition-all ease-in delay-[40]">
+//             <FeedbackButton/>
+//             <div className="z-20">
+//                 <Search
+//                     questId= {appConfig?.QUEST_SEARCH_BAR_CAMPAIGN_ID}
+//                     userId={generalFunction.getUserId()}
+//                     token={generalFunction.getUserToken()}
+//                     open="ON_CTRL_K_KEY"
+//                     onResultClick={e => navigate(e)}
+//                     icons={[importConfig.routesIcons.dashboardIcon, importConfig.routesIcons.userIcon, importConfig.routesIcons.adminIcon, importConfig.routesIcons.settingIcon]}
+//                 />
+//             </div>
+//             <div className={`min-h-screen h-full ${sidebarOpen == false ? "w-0" : "w-screen fixed"} md:w-[250px] z-10`} onClick={() => setSidebarOpen(false)}>
+//                 <nav className={`sidebar hover ${sidebarOpen == false ? "hidden" : ""} md:block fixed md:relative w-[250px]`}>
+//                     <header>
+//                         <div className="image-text">
+//                             <span className="image">
+//                                 <img src={importConfig.brandLogo} alt="" />
+//                             </span>
+//                             <div className="text logo-text">
+//                                 <span className="name">{appConfig?.QUEST_ENTITY_NAME}</span>
+//                             </div>
+//                         </div>
+//                     </header>
+
+//                     <div className="menu-bar">
+//                         <div className="menu">
+//                             <ul className="menu-links">
+//                                 {
+//                                     routesConfig.map((routes, index) => (
+//                                         !routes.hidden &&
+//                                         <li className={`nav-link ${window.location.href.includes(routes.path) && "selected-route"}`} key={index}>
+//                                             <Link to={routes.path}>
+//                                                 <div className="icon">
+//                                                     <img src={routes.logo} alt="" className="w-6 img-white" />
+//                                                 </div>
+//                                                 <span className="text nav-text">
+//                                                     {routes.name}
+//                                                 </span>
+//                                             </Link>
+//                                         </li>
+//                                     ))
+//                                 }
+//                             </ul>
+//                         </div>
+
+//                         <div className="bottom-content">
+//                             <li className="">
+//                                 <Link to="">
+//                                     <div className="icon">
+//                                         <img src={importConfig.routesIcons.upgradeIcon} alt="" className="w-6" />
+//                                     </div>
+//                                     <span className="text nav-text">Upgrade</span>
+//                                 </Link>
+//                             </li>
+
+//                             <li className="">
+//                                 <Link to="">
+//                                     <div className="icon">
+//                                         <img src={importConfig.routesIcons.bookIcon} alt="" className="w-6" />
+//                                     </div>
+//                                     <span className="text nav-text">Book A Call</span>
+//                                 </Link>
+//                             </li>
+
+//                             <li className="">
+//                                 <Link to="">
+//                                     <div className="icon">
+//                                         <img src={importConfig.routesIcons.helpIcon} alt="" className="w-6" />
+//                                     </div>
+//                                     <span className="text nav-text">Help Center</span>
+//                                 </Link>
+//                             </li>
+
+//                             <li className="">
+//                                 <Link onClick={() => generalFunction.logout()} to="/login">
+//                                     <div className="icon">
+//                                         <img src={importConfig.routesIcons.logoutIcon} alt="" className="w-6" />
+//                                     </div>
+//                                     <span className="text nav-text">Logout</span>
+//                                 </Link>
+//                             </li>
+
+//                             <li className="mode">
+//                                 <div className="sun-moon">
+//                                     <i className="bx bx-moon icon moon"></i>
+//                                     <i className="bx bx-sun icon sun"></i>
+//                                 </div>
+//                                 <span className="mode-text text" id="theme-text">Dark Theme</span>
+
+//                                 <div className="toggle-switch" onClick={() => GeneralFunction.shareInstance.toggleTheme()}>
+//                                     <span className="switch"></span>
+//                                 </div>
+//                             </li>
+//                         </div>
+//                     </div>
+//                 </nav>
+//             </div>
+//             <div className="w-full">
+//                 {/* <div className="py-4 px-4 border-b-[1px] border-[var(--color-premitive-grey-0)] text-primary-3 font-semibold flex justify-between items-center">
+//                     <div className="flex gap-2 items-center">
+//                         <img src={importConfig.routesIcons.menuIcon} alt="" className="w-4 flex md:hidden" onClick={() => setSidebarOpen(!sidebarOpen)}/>
+//                         <p>{selectdRoute}</p>
+//                     </div>
+//                     <div className="flex items-center gap-2">
+//                         <img src={importConfig.brandLogo} alt="" className="w-7 rounded-full border-[1px] border-[var(--color-premitive-grey-0)]"/>
+//                         <p>Soumitra</p>
+//                     </div>
+//                 </div> */}
+//                 <div className="p-4 w-full md:w-[calc(100vw-250px)] h-screen overflow-auto">
+//                     {children}
+//                 </div>
+//             </div>
+//         </div>
+//     );
+// }
+
+
+export default function DashboardWrapper({ children, selectdRoute }) {
     const [hover, sethover] = useState("close");
     const [sidebarOpen, setSidebarOpen] = useState(false);
     const navigate = useNavigate();
-    
+
+    const { theme, setTheme, bgColors, appConfig } = useContext(ThemeContext);
+
+
+    const toggleTheme = () => {
+        if (theme === 'dark') {
+            setTheme('light');
+            localStorage.setItem("theme", "light");
+        }
+        else {
+            setTheme('dark');
+            localStorage.setItem("theme", "dark");
+        }
+    }
 
     return (
-        <div className="flex relative w-screen h-screen bg-customShade-4 transition-all ease-in delay-[40]">
-            <FeedbackButton/>
+        // wrapper div 
+        <div className="flex relative w-screen h-screen bg-customShade-4 transition-all ease-in delay-[40]" style={{ backgroundColor: bgColors[`${theme}-primary-bg-color-3`] }}>
+            <FeedbackButton />
+
             <div className="z-20">
                 <Search
-                    questId= {appConfig?.QUEST_SEARCH_BAR_CAMPAIGN_ID}
+                    questId={appConfig?.QUEST_SEARCH_BAR_CAMPAIGN_ID}
                     userId={generalFunction.getUserId()}
                     token={generalFunction.getUserToken()}
                     open="ON_CTRL_K_KEY"
@@ -28,8 +169,14 @@ export default function DashboardWrapper({children, selectdRoute}) {
                     icons={[importConfig.routesIcons.dashboardIcon, importConfig.routesIcons.userIcon, importConfig.routesIcons.adminIcon, importConfig.routesIcons.settingIcon]}
                 />
             </div>
+
             <div className={`min-h-screen h-full ${sidebarOpen == false ? "w-0" : "w-screen fixed"} md:w-[250px] z-10`} onClick={() => setSidebarOpen(false)}>
-                <nav className={`sidebar hover ${sidebarOpen == false ? "hidden" : ""} md:block fixed md:relative w-[250px]`}>
+
+                {/* nav container */}
+                <nav
+                    className={`sidebar hover ${sidebarOpen == false ? "hidden" : ""} md:block fixed md:relative w-[250px]`}
+                    style={{ backgroundColor: bgColors[`${theme}-primary-bg-color-2`] }}
+                >
                     <header>
                         <div className="image-text">
                             <span className="image">
@@ -89,7 +236,7 @@ export default function DashboardWrapper({children, selectdRoute}) {
                                     <span className="text nav-text">Help Center</span>
                                 </Link>
                             </li>
-                            
+
                             <li className="">
                                 <Link onClick={() => generalFunction.logout()} to="/login">
                                     <div className="icon">
@@ -99,22 +246,60 @@ export default function DashboardWrapper({children, selectdRoute}) {
                                 </Link>
                             </li>
 
+                            {/* <li className="mode">
+                                <div className="sun-moon">
+
+                                </div>
+                                <span className="mode-text text" id="theme-text">
+                                    {
+                                        theme === 'dark' ? "Dark Mode" : "Light Mode"
+                                    }
+                                </span>
+
+                                <div className="toggle-switch"
+                                    onClick={toggleTheme}>
+                                    {
+                                        theme === 'dark' ? <span className="switch" style={{
+                                            border: '1px solid black',
+                                            backgroundColor: 'white'
+                                        }}></span> : <span className="switch" style={{
+                                            border: '1px solid black',
+                                            backgroundColor: 'black',
+
+                                        }}></span>
+                                    }
+                                </div>
+                            </li> */}
                             <li className="mode">
                                 <div className="sun-moon">
                                     <i className="bx bx-moon icon moon"></i>
                                     <i className="bx bx-sun icon sun"></i>
                                 </div>
-                                <span className="mode-text text" id="theme-text">Dark Theme</span>
+                                <span className="mode-text text" id="theme-text">
+                                    {
+                                        theme === 'dark' ? "Dark Theme" : "Light Theme"
+                                    }
+                                </span>
 
-                                <div className="toggle-switch" onClick={() => GeneralFunction.shareInstance.toggleTheme()}>
-                                    <span className="switch"></span>
+                                <div className="toggle-switch" onClick={toggleTheme}
+                                    >
+                                    <span className="switch"
+                                       
+                                    ></span>
                                 </div>
                             </li>
                         </div>
                     </div>
                 </nav>
+
             </div>
-            <div className="w-full">
+
+
+            {/* right div container */}
+            <div
+                className='w-full'
+                style={{ backgroundColor: bgColors[`${theme}-primary-bg-color-3`] }}
+            >
                 {/* <div className="py-4 px-4 border-b-[1px] border-[var(--color-premitive-grey-0)] text-primary-3 font-semibold flex justify-between items-center">
                     <div className="flex gap-2 items-center">
                         <img src={importConfig.routesIcons.menuIcon} alt="" className="w-4 flex md:hidden" onClick={() => setSidebarOpen(!sidebarOpen)}/>
@@ -131,4 +316,4 @@ export default function DashboardWrapper({children, selectdRoute}) {
             </div>
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/src/Components/Common/FeedbackButton.jsx b/src/Components/Common/FeedbackButton.jsx
index 93bf449..be9a9ec 100644
--- a/src/Components/Common/FeedbackButton.jsx
+++ b/src/Components/Common/FeedbackButton.jsx
@@ -1,19 +1,16 @@
-import { memo } from 'react';
+import { memo, useContext, useState } from 'react';
 import { FeedbackWorkflow } from "@questlabs/react-sdk";
-import { useState } from "react";
 import { generalFunction } from "../../assets/Config/GeneralFunction";
-
-
-
+import { ThemeContext } from '../../App';
 
 
 function FeedbackButton() {
     const [openFeedback, setOpenFeedback] = useState(false);
 
-
+    const { theme, bgColors, contentConfig } = useContext(ThemeContext)
     return (
         <div>
-            <div className="fixed -right-10 top-[50vh] -rotate-90 btn-gradient cursor-pointer" style={{borderRadius: "6px 6px 0px 0px", padding: "10px 30px"}} onClick={() => setOpenFeedback(true)}>
+            <div className="fixed -right-10 top-[50vh] -rotate-90 btn-gradient cursor-pointer" style={{ borderRadius: "6px 6px 0px 0px", padding: "10px 30px" }} onClick={() => setOpenFeedback(true)}>
                 <p>Feedback</p>
             </div>
             <FeedbackWorkflow
@@ -24,10 +21,31 @@ function FeedbackButton() {
                     'q-contact-us',
                 ]}
                 userId={generalFunction.getUserId()}
-                token={generalFunction.getUserToken()}              
+                token={generalFunction.getUserToken()}
                 isOpen={openFeedback}
                 onClose={() => setOpenFeedback(false)}
                 zIndex={11}
+
+                backgroundColor={bgColors[`${theme}-primary-bg-color-0`]}
+                textColor={bgColors[`${theme}-color-premitive-grey-5`]}
+                btnColor={bgColors[`${theme}-color-premitive-grey-5`]}
+                topbarColor={'white'}
+                btnTextColor={bgColors[`${theme}-color-premitive-grey-5`]}
+                starColor='blue'
+                styleConfig={{
+                    Form: {
+
+                    },
+                    Heading: bgColors[`${theme}-color-premitive-grey-5`],
+                    Description: {},
+                    Input: bgColors[`${theme}-color-premitive-grey-5`],
+                    Label: bgColors[`${theme}-color-premitive-grey-5`],
+                    TextArea: bgColors[`${theme}-color-premitive-grey-5`],
+                    PrimaryButton: bgColors[`${theme}-color-premitive-grey-5`],
+                    SecondaryButton: {},
+                    Modal: {},
+                    Footer: {},
+                }}
             />
         </div>
     )
diff --git a/src/Components/Common/LoginWrapper.jsx b/src/Components/Common/LoginWrapper.jsx
index d4fd4ea..7db799a 100644
--- a/src/Components/Common/LoginWrapper.jsx
+++ b/src/Components/Common/LoginWrapper.jsx
@@ -1,14 +1,22 @@
-import { contentConfig } from "../../assets/Config/appConfig";
+import { useContext } from "react";
+// import { contentConfig } from "../../assets/Config/appConfig";
 import { importConfig } from "../../assets/Config/importConfig";
+import { ThemeContext } from "../../App";
 
 
 
-export default function LoginWrapper({children}) {
+export default function LoginWrapper({ children }) {
+    const { theme, bgColors, contentConfig } = useContext(ThemeContext)
+
 
     return (
         <div className="flex h-screen">
-            <div className="bg-customShade-1 hidden md:flex flex-col justify-center items-center text-center md:w-1/2 py-7 px-4">
-                <img src={importConfig.brandLogo} alt="" className="w-12 mb-3"/>
+            <div
+                className={`hidden md:flex flex-col justify-center items-center text-center md:w-1/2 py-7 px-4`}
+                style={{
+                    backgroundColor: bgColors[`${theme}-primary-bg-color-0`]
+                }}>
+                <img src={importConfig.brandLogo} alt="" className="w-12 mb-3" />
                 <p className="text-customShade-200 font-semibold text-xl">
                     {contentConfig?.login?.heading}
                 </p>
@@ -16,6 +24,9 @@ export default function LoginWrapper({children}) {
                     {contentConfig?.login?.description}
                 </p>
             </div>
+
+
+            {/* right side */}
             <div className="w-full md:w-1/2 bg-customShade-2">
                 {children}
             </div>
diff --git a/src/Components/Dashboard/Dashboard.jsx b/src/Components/Dashboard/Dashboard.jsx
index fc3c131..daf707c 100644
--- a/src/Components/Dashboard/Dashboard.jsx
+++ b/src/Components/Dashboard/Dashboard.jsx
@@ -1,18 +1,20 @@
 import { GetStarted } from "@questlabs/react-sdk";
 import DashboardWrapper from "../Common/DashboardWrapper";
-import { appConfig } from "../../assets/Config/appConfig";
+// import { appConfig } from "../../assets/Config/appConfig";
 import { importConfig } from "../../assets/Config/importConfig";
 import { generalFunction } from "../../assets/Config/GeneralFunction";
+import { useContext } from "react";
+import { ThemeContext } from "../../App";
 
 
 
 export default function Dashboard() {
 
-
     const completeAllStatus = () => {
-        
     }
 
+    const { theme, bgColors, appConfig } = useContext(ThemeContext);
+
     return (
         <GetStarted
             questId={appConfig?.QUEST_GET_STARTED_CAMPAIGN_ID}
@@ -20,8 +22,13 @@ export default function Dashboard() {
             token={generalFunction.getUserToken()}
             completeAllStatus={completeAllStatus}
             buttonBg='linear-gradient(90deg, rgba(105,92,254,1) 0%, rgba(0,210,234,1) 50%, rgba(105,92,254,1) 100%)'
-            cardBG="var(--primary-bg-color-2)"
-            cardHeadingColor="var(--color-premitive-grey-5,#FFF)"
+
+            // cardBG="var(--primary-bg-color-2)"
+            cardBG={bgColors[`${theme}-primary-bg-color-2`]}
+
+            // cardHeadingColor="var(--color-premitive-grey-5,#FFF)"
+            cardHeadingColor={bgColors[`${theme}-color-premitive-grey-5`]}
+
             cardDescColor="var(--neutral-grey-200, #AFAFAF)"
             cardBorderColor="var(--primary-bg-color-2)"
             icons={[importConfig.routesIcons.userIcon, importConfig.routesIcons.adminIcon, importConfig.routesIcons.settingIcon]}
diff --git a/src/Components/Login/Login.jsx b/src/Components/Login/Login.jsx
index 8bd6f7e..d36a597 100644
--- a/src/Components/Login/Login.jsx
+++ b/src/Components/Login/Login.jsx
@@ -25,15 +25,15 @@ export default function Login() {
 
     return (
         <QuestLogin
-            googleClientId= {appConfig?.GOOGLE_CLIENT_ID}
-            textColor= ""
-            btnTextColor= ""
-            backgroundColor= "white"
-            btnColor= ""
-            redirectUri= {appConfig?.GOOGLE_REDIRECT_URI}
+            googleClientId={appConfig?.GOOGLE_CLIENT_ID}
+            textColor=""
+            btnTextColor=""
+            backgroundColor="white"
+            btnColor=""
+            redirectUri={appConfig?.GOOGLE_REDIRECT_URI}
             // redirectURL= "http://localhost:5173/login"
-            google= {true}
-            email= {true}
+            google={true}
+            email={true}
             onSubmit={(e) => completeLogin(e)}
         />
     );
diff --git a/src/Components/Onboarding/Onboarding.jsx b/src/Components/Onboarding/Onboarding.jsx
index ee2ec7a..5d00d42 100644
--- a/src/Components/Onboarding/Onboarding.jsx
+++ b/src/Components/Onboarding/Onboarding.jsx
@@ -1,9 +1,10 @@
 import { OnBoarding } from "@questlabs/react-sdk";
 import LoginWrapper from "../Common/LoginWrapper";
-import { useState } from "react";
-import { appConfig } from "../../assets/Config/appConfig";
+import { useContext, useState } from "react";
+// import { appConfig } from "../../assets/Config/appConfig";
 import { generalFunction } from "../../assets/Config/GeneralFunction";
 import { useNavigate } from "react-router-dom";
+import { ThemeContext } from "../../App";
 
 
 
@@ -11,6 +12,7 @@ export default function Onboarding() {
     const [answer, setAnswer] = useState({})
     const [loading, setLoading] = useState(true);
     const navigate = useNavigate()
+    const { appConfig } = useContext(ThemeContext);
 
     const completeAnswer = (e) => {
         navigate("/dashboard")
@@ -18,25 +20,25 @@ export default function Onboarding() {
 
     return (
         <div className="w-full flex h-full items-center justify-center m-auto">
-            <div className={`${!loading && "rounded-xl bg-white"} w-1/2`} style={{boxShadow: loading ? "" : "0 0 5px #00000060"}}>
+            <div className={`${!loading && "rounded-xl bg-white"} w-1/2`} style={{ boxShadow: loading ? "" : "0 0 5px #00000060" }}>
                 <OnBoarding
                     questId={appConfig?.QUEST_ONBOARDING_QUIZ_CAMPAIGN_ID}
                     userId={generalFunction.getUserId()}
-                    token= {generalFunction.getUserToken()}
-                    progress= {["Personal Details", "Personal Details"]}
-                    controlBtnType= "Buttons"
-                    headingScreen= {[{"name":"Identity Insights", "desc":"Revealing dimensions beyond words"}]}
-                    design= {[[1, 2, 3]]}
-                    singleChoose= "modal1"
-                    multiChoice= "modal2"
+                    token={generalFunction.getUserToken()}
+                    progress={["Personal Details", "Personal Details"]}
+                    controlBtnType="Buttons"
+                    headingScreen={[{ "name": "Identity Insights", "desc": "Revealing dimensions beyond words" }]}
+                    design={[[1, 2, 3]]}
+                    singleChoose="modal1"
+                    multiChoice="modal2"
                     answer={answer}
                     setAnswer={setAnswer}
                     inputBgColor=""
                     loadingTracker={true}
                     setLoading={setLoading}
                     getAnswers={completeAnswer}
-                    // template={1}
-                    // progressBarType="modal1"
+                // template={1}
+                // progressBarType="modal1"
                 />
             </div>
         </div>
diff --git a/src/Components/Settings/Settings.jsx b/src/Components/Settings/Settings.jsx
index 94deca2..3cb120b 100644
--- a/src/Components/Settings/Settings.jsx
+++ b/src/Components/Settings/Settings.jsx
@@ -2,8 +2,6 @@ import { useState } from "react";
 import InputComponent from "../Common/CommonComponents/InputComponent";
 import { importConfig } from "../../assets/Config/importConfig";
 
-
-
 export default function Settings() {
     const [userData, setUserData] = useState({
         name: "",
@@ -15,7 +13,7 @@ export default function Settings() {
     const handleChange = (event) => {
         setUserData({
             ...userData,
-            [event.target.name] : event.target.value
+            [event.target.name]: event.target.value
         })
     }
 
@@ -27,18 +25,19 @@ export default function Settings() {
                         <label htmlFor="bannerUrl" className="relative">
                             {
                                 userData.bannerUrl
-                                ? <img src={userData.bannerUrl} alt="" className="w-full h-32"/>
-                                : <div className="w-full h-32" style={{background: "linear-gradient(to right,#09080d,#190a21,#260d20)"}}></div>
+                                    ? <img src={userData.bannerUrl} alt="" className="w-full h-32" />
+                                    : <div className="w-full h-32" style={{ background: "linear-gradient(to right,#09080d,#190a21,#260d20)" }}></div>
                             }
                             <div className="absolute w-full h-32 flex items-center justify-center top-0 text-xs text-white cursor-pointer hover:underline opacity-0 hover:opacity-100 duration-300">Upload banner image</div>
                         </label>
                         <input type="file" className="hidden" name="bannerUrl" id="bannerUrl" />
                     </div>
                 </div>
+
                 <div className="">
                     <div className="w-20 h-20 m-auto -translate-y-10">
                         <label htmlFor="imageUrl" className="relative w-20 h-20">
-                            <img src={userData.imageUrl ? userData.imageUrl : importConfig.settings.userImage} alt="" className="w-20 h-20"/>
+                            <img src={userData.imageUrl ? userData.imageUrl : importConfig.settings.userImage} alt="" className="w-20 h-20" />
                             <div className="absolute w-20 h-20 flex items-center justify-center top-0 text-xs cursor-pointer hover:underline opacity-0 hover:opacity-100 duration-300">
                                 <img src={importConfig.settings.uploadIcon} className="w-10 h-10" alt="" />
                             </div>
@@ -46,6 +45,7 @@ export default function Settings() {
                         <input type="file" className="hidden" name="imageUrl" id="imageUrl" />
                     </div>
                 </div>
+
                 <div className="grid w-100 gap-x-5 grid-cols-1 md:grid-cols-2">
                     <InputComponent
                         inputTitle={"Name"}
diff --git a/src/assets/Config/appConfig.js b/src/assets/Config/appConfig.js
index ccf7068..af91a1d 100644
--- a/src/assets/Config/appConfig.js
+++ b/src/assets/Config/appConfig.js
@@ -1,12 +1,12 @@
 
 export const appConfig = {
-    QUEST_ENTITY_ID: "",
-    QUEST_ENTITY_NAME: "",
-    QUEST_API_KEY: "",
-    QUEST_ONBOARDING_QUIZ_CAMPAIGN_ID: "",
-    GOOGLE_REDIRECT_URI: "",
-    GOOGLE_CLIENT_ID: "",
-    QUEST_GET_STARTED_CAMPAIGN_ID: "",
+    QUEST_ENTITY_ID: "e-5768fd26-d226-4ac1-81e6-3c99427f3fb3",
+    QUEST_ENTITY_NAME: "Quest Labs",
+    QUEST_API_KEY: "k-e6ec8094-6eef-4e80-a804-112a63607bf5",
+    QUEST_ONBOARDING_QUIZ_CAMPAIGN_ID: "q-a5ebda7b-decf-4d4c-8ae6-174807254f9c",
+    GOOGLE_REDIRECT_URI: "http://localhost:3000/login/",
+    GOOGLE_CLIENT_ID: "857590091173-lm2tl3nqfvp2thd4nrhqidjuq2hroco8.apps.googleusercontent.com",
+    QUEST_GET_STARTED_CAMPAIGN_ID: "q-6a23cba9-b2ac-403c-9425-d47165bd125e",
     QUEST_SEARCH_BAR_CAMPAIGN_ID: '',
 }
 
diff --git a/src/assets/Config/generalFunction.js b/src/assets/Config/generalFunction.js
index 999f1f3..e16c5a2 100644
--- a/src/assets/Config/generalFunction.js
+++ b/src/assets/Config/generalFunction.js
@@ -1,7 +1,7 @@
 import Cookies from "universal-cookie";
 
 export const generalFunction = {
-    getUserId : () => {
+    getUserId: () => {
         let userId = localStorage.getItem("questUserId");
         return userId;
     },
diff --git a/src/assets/Config/routesConfig.jsx b/src/assets/Config/routesConfig.jsx
index 5518381..1020aee 100644
--- a/src/assets/Config/routesConfig.jsx
+++ b/src/assets/Config/routesConfig.jsx
@@ -10,29 +10,26 @@ import User from "../../Components/User/User";
 import { importConfig } from "./importConfig";
 
 
-
-
-
 export const routesConfig = [
     {
         path: "/",
         name: "Home",
         logo: "",
-        component: <Home/>,
+        component: <Home />,
         hidden: true,
     },
     {
         path: "/login",
         name: "Login",
         logo: "",
-        component: <LoginWrapper><Login/></LoginWrapper>,
+        component: <LoginWrapper><Login /></LoginWrapper>,
         hidden: true,
     },
     {
         path: "/onboarding",
         name: "Onboarding",
         logo: "",
-        component: <LoginWrapper><Onboarding/></LoginWrapper>,
+        component: <LoginWrapper><Onboarding /></LoginWrapper>,
         hidden: true,
     },
     {
diff --git a/src/assets/Functions/GeneralFunction.js b/src/assets/Functions/GeneralFunction.js
index 0d2cc79..82bc9e9 100644
--- a/src/assets/Functions/GeneralFunction.js
+++ b/src/assets/Functions/GeneralFunction.js
@@ -7,7 +7,7 @@ class GeneralFunction {
         document.getElementsByTagName("BODY")[0].classList.toggle("dark");
         let themeText = document.getElementById("theme-text");
         let theme = localStorage.getItem("theme");
-    
+
         if (theme && theme == "dark") {
             localStorage.removeItem("theme");
             themeText.innerText = "Light Theme";
diff --git a/src/index.css b/src/index.css
index eec57b8..5997717 100644
--- a/src/index.css
+++ b/src/index.css
@@ -93,6 +93,51 @@ button:focus-visible {
 
   --primary-tile-color: #9a7ada;
 
+  /* for light theme */
+  --light-color-premitive-grey-0: #afafaf;
+  --light-color-premitive-grey-1: #757575;
+  --light-color-premitive-grey-2: #545454;
+  --light-color-premitive-grey-3: #333333;
+  --light-color-premitive-grey-4: #141414;
+  --light-color-premitive-grey-5: #000000;
+
+  --light-color-premitive-grey-0: #afafaf;
+  --light-color-premitive-grey-1: #757575;
+  --light-color-premitive-grey-2: #545454;
+  --light-color-premitive-grey-3: #333333;
+  --light-color-premitive-grey-4: #141414;
+  --light-color-premitive-grey-5: #000000;
+
+  /* for background  */
+  --light-primary-bg-color-0: #7B68EE;
+  --light-primary-bg-color-1: #edf3ff;
+  --light-primary-bg-color-2: #ffffff;
+  --light-primary-bg-color-3: #e4e9f7;
+  --light-primary-bg-color-4: #ffffff;
+
+  --light-primary-tile-color-0: #d7f1ff;
+
+  --light-primary-tile-color: #9a7ada;
+  /* for dark theme */
+  --dark-color-premitive-grey-1: #cbcbcb;
+  --dark-color-premitive-grey-0: #afafaf;
+  --dark-color-premitive-grey-2: #e2e2e2;
+  --dark-color-premitive-grey-3: #eeeeee;
+  --dark-color-premitive-grey-4: #f6f6f6;
+  --dark-color-premitive-grey-5: #ffffff;
+
+  --dark-primary-bg-color-0: #1c1a27;
+  --dark-primary-bg-color-1: #fbfafe;
+  --dark-primary-bg-color-2: #111018;
+  --dark-primary-bg-color-3: #1c1a27;
+  --dark-primary-bg-color-4: #3e3a58;
+
+  --dark-primary-tile-color-0: #f0fcec;
+
+  --dark-primary-border-color: #455a64;
+
+
+
 
   /* ===== Colors ===== */
   --body-color: #e4e9f7;
@@ -129,15 +174,15 @@ button:focus-visible {
   --primary-border-color: #455a64;
 }
 
-         
+
 .btn-gradient {
-  background-image: linear-gradient(to right, #6190E8 0%, #A7BFE8  51%, #6190E8  100%);
+  background-image: linear-gradient(to right, #6190E8 0%, #A7BFE8 51%, #6190E8 100%);
   padding: 8px 10px;
   text-align: center;
   /* text-transform: uppercase; */
   transition: 0.5s;
   background-size: 200% auto;
-  color: white;            
+  color: white;
   /* box-shadow: 0 0 20px #eee; */
   border-radius: 6px;
   display: block;
@@ -155,20 +200,37 @@ button:focus-visible {
 }
 
 input:-webkit-autofill,
-input:-webkit-autofill:hover, 
-input:-webkit-autofill:focus, 
-input:-webkit-autofill:active{
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 30px var(--primary-bg-color-4) inset !important;
   -webkit-text-fill-color: var(--color-premitive-grey-5);
 }
 
 @keyframes slide {
-  0% { transform: translateX(0); }
-  20% { transform: translateX(-112%); }
-  40% { transform: translateX(-224%); }
-  60% { transform: translateX(-336%); }
-  80% { transform: translateX(-448%); }
-  100% { transform: translateX(-560%); }
+  0% {
+    transform: translateX(0);
+  }
+
+  20% {
+    transform: translateX(-112%);
+  }
+
+  40% {
+    transform: translateX(-224%);
+  }
+
+  60% {
+    transform: translateX(-336%);
+  }
+
+  80% {
+    transform: translateX(-448%);
+  }
+
+  100% {
+    transform: translateX(-560%);
+  }
 }
 
 .q_slider {
@@ -189,11 +251,11 @@ input:-webkit-autofill:active{
   margin-top: 32px;
 }
 
-.q_slider_card{
-  animation: slide 15s linear infinite; 
+.q_slider_card {
+  animation: slide 15s linear infinite;
 }
 
-img{
+img {
   max-width: unset;
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 3eeb1ed..83f3b28 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,63 @@
 /** @type {import('tailwindcss').Config} */
+
+// export default {
+//   content: [
+//     "./index.html",
+//     "./src/**/*.{js,ts,jsx,tsx}",
+//   ],
+//   theme: {
+//     extend: {
+//       colors: {
+//         "primary-0": "var(--color-premitive-grey-0)",
+//         "primary-1": "var(--color-premitive-grey-1)",
+//         "primary-2": "var(--color-premitive-grey-2)",
+//         "primary-3": "var(--color-premitive-grey-3)",
+//         "primary-4": "var(--color-premitive-grey-4)",
+//         "primary-5": "var(--color-premitive-grey-5)",
+//         customShade: {
+//           50: "#ffffff",
+//           100: "#f6f6f6",
+//           200: "#eeeeee",
+//           300: "#e2e2e2",
+//           400: "#cbcbcb",
+//           500: "#afafaf",
+//           600: "#757575",
+//           700: "#545454",
+//           800: "#333333",
+//           900: "#141414",
+//           950: "#000000"
+//         },
+//         home: {
+//           1: "#7A7A7A",
+//           2: "#CCCCCC",
+//           3: "#DDFF00",
+//         }
+//       },
+//       backgroundColor: {
+//         customShade: {
+//           1: "var(--primary-bg-color-0)",
+//           2: "var(--primary-bg-color-1)",
+//           3: "var(--primary-bg-color-2)",
+//           4: "var(--primary-bg-color-3)",
+//           5: "var(--primary-bg-color-4)",
+//         },
+//         home: {
+//           1: "#0d0d0d",
+//           2: "rgba(23, 23, 23, 0.6)",
+//           3: "#161616",
+//           "btn1": "rgb(221, 255, 0)",
+//         }
+//       },
+//       borderColor: {
+//         home: {
+//           1: "rgb(38, 38, 38)",
+//         }
+//       }
+//     },
+//   },
+//   plugins: [],
+// }
+
 export default {
   content: [
     "./index.html",
@@ -33,12 +92,39 @@ export default {
         }
       },
       backgroundColor: {
-        customShade: {
+        customShades: {
           1: "var(--primary-bg-color-0)",
           2: "var(--primary-bg-color-1)",
           3: "var(--primary-bg-color-2)",
           4: "var(--primary-bg-color-3)",
           5: "var(--primary-bg-color-4)",
+
+          light1: "var(--light-primary-bg-color-0)",
+          light2: "var(--light-primary-bg-color-1)",
+          light3: "var(--light-primary-bg-color-2)",
+          light4: "var(--light-primary-bg-color-3)",
+          light5: "var(--light-primary-bg-color-4)",
+
+          dark1: "var(--dark-primary-bg-color-0)",
+          dark2: "var(--dark-primary-bg-color-1)",
+          dark3: "var(--dark-primary-bg-color-2)",
+          dark4: "var(--dark-primary-bg-color-3)",
+          dark5: "var(--dark-primary-bg-color-4)",
+        },
+        light: {
+          1: "var(--light-primary-bg-color-0)",
+          2: "var(--light-primary-bg-color-1)",
+          3: "var(--light-primary-bg-color-2)",
+          4: "var(--light-primary-bg-color-3)",
+          5: "var(--light-primary-bg-color-4)",
+          lite: "var(--light-primary-tile-color)"
+        },
+        dark: {
+          1: "var(--dark-primary-bg-color-0)",
+          2: "var(--dark-primary-bg-color-1)",
+          3: "var(--dark-primary-bg-color-2)",
+          4: "var(--dark-primary-bg-color-3)",
+          5: "var(--dark-primary-bg-color-4)",
         },
         home: {
           1: "#0d0d0d",