diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index ad9dc97..eb6bb03 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -12,6 +12,7 @@ import IconSideNav from "./components/navigations/IconSideNav";
 import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
 import PrivateRoute from "./PrivateRoute";
 import ProfileUpdatePage from "./components/profilePage";
+import Dashboard from "./components/dashboard";
 
 
 const App = () => {
@@ -26,7 +27,7 @@ const App = () => {
         <NavBar />
         <div className={isLoginPageOrSignUpPage ? "" : "overflow-x-auto"}>
           <Routes>
-            <Route path="/" element={<Home />} />
+            <Route path="/" element={<Dashboard />} />
             <Route exact path="/tasks" element={<PrivateRoute />}>
               <Route exact path="/tasks" element={<KanbanPage />} />
             </Route>
diff --git a/frontend/src/components/dashboard.jsx b/frontend/src/components/dashboard.jsx
new file mode 100644
index 0000000..dea56a9
--- /dev/null
+++ b/frontend/src/components/dashboard.jsx
@@ -0,0 +1,59 @@
+"use client";
+
+      import {
+        Card,
+        Grid,
+        Tab,
+        TabGroup,
+        TabList,
+        TabPanel,
+        TabPanels,
+        Text,
+        Title,
+      } from "@tremor/react";
+      
+export default function DashboardExample() {
+  return (
+    <main className="p-12">
+      <Title>Dashboard</Title>
+      <Text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</Text>
+
+      <TabGroup className="mt-6">
+        <TabList>
+          <Tab>Overview</Tab>
+          <Tab>Detail</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
+              <Card>
+                {/* Placeholder to set height */}
+                <div className="h-28" />
+              </Card>
+              <Card>
+                {/* Placeholder to set height */}
+                <div className="h-28" />
+              </Card>
+              <Card>
+                {/* Placeholder to set height */}
+                <div className="h-28" />
+              </Card>
+            </Grid>
+            <div className="mt-6">
+              <Card>
+                <div className="h-80" />
+              </Card>
+            </div>
+          </TabPanel>
+          <TabPanel>
+            <div className="mt-6">
+              <Card>
+                <div className="h-96" />
+              </Card>
+            </div>
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 1e759ce..b388349 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -14,40 +14,40 @@ export default {
         sans: ['"Proxima Nova"', ...defaultTheme.fontFamily.sans],
       },
       colors:{
-        "dark-tremor": {
+        tremor: {
           brand: {
-            faint: "#0B1229", // custom
-            muted: "#172554", // blue-950
-            subtle: "#1e40af", // blue-800
+            faint: "#eff6ff", // blue-50
+            muted: "#bfdbfe", // blue-200
+            subtle: "#60a5fa", // blue-400
             DEFAULT: "#3b82f6", // blue-500
-            emphasis: "#60a5fa", // blue-400
-            inverted: "#030712", // gray-950
+            emphasis: "#1d4ed8", // blue-700
+            inverted: "#ffffff", // white
           },
           background: {
-            muted: "#131A2B", // custom
-            subtle: "#1f2937", // gray-800
-            DEFAULT: "#111827", // gray-900
-            emphasis: "#d1d5db", // gray-300
+            muted: "#f9fafb", // gray-50
+            subtle: "#f3f4f6", // gray-100
+            DEFAULT: "#ffffff", // white
+            emphasis: "#374151", // gray-700
           },
           border: {
-            DEFAULT: "#1f2937", // gray-800
+            DEFAULT: "#e5e7eb", // gray-200
           },
           ring: {
-            DEFAULT: "#1f2937", // gray-800
+            DEFAULT: "#e5e7eb", // gray-200
           },
           content: {
-            subtle: "#4b5563", // gray-600
+            subtle: "#9ca3af", // gray-400
             DEFAULT: "#6b7280", // gray-500
-            emphasis: "#e5e7eb", // gray-200
-            strong: "#f9fafb", // gray-50
-            inverted: "#000000", // black
+            emphasis: "#374151", // gray-700
+            strong: "#111827", // gray-900
+            inverted: "#ffffff", // white
           },
         },
       },
       boxShadow:{
-        "dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-        "dark-tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-        "dark-tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+        "tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        "tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+        "tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
       },
       borderRadius: {
         "tremor-small": "0.375rem",