diff --git a/src/App.vue b/src/App.vue
index cff144e..55ba6cc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import LoginCard from './components/LoginCard.vue';
-
 </script>
 
 <template>
diff --git a/src/assets/left.svg b/src/assets/left.svg
new file mode 100644
index 0000000..5a3ec4d
--- /dev/null
+++ b/src/assets/left.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741694962521" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3587" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M684.29 799.276L393.929 513.019 684.29 226.762c37.685-37.153 38.003-97.625 0.707-134.384-37.297-36.758-98.646-36.435-136.331 0.718l-357.43 352.378c-0.155 0.153-0.297 0.314-0.451 0.468-0.084 0.082-0.172 0.157-0.256 0.239-18.357 18.092-27.581 41.929-27.743 65.902-0.004 0.311-0.017 0.623-0.018 0.934 0.001 0.316 0.014 0.632 0.018 0.948 0.165 23.97 9.389 47.803 27.743 65.892 0.083 0.082 0.171 0.157 0.255 0.239 0.154 0.154 0.296 0.315 0.452 0.468l357.43 352.378c37.685 37.153 99.034 37.476 136.331 0.718 37.297-36.758 36.979-97.231-0.707-134.384z" fill="#141414" p-id="3588"></path></svg>
\ No newline at end of file
diff --git a/src/assets/main.css b/src/assets/main.css
index 5ec8c15..b86faa6 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,5 +1,5 @@
 @import "tailwindcss";
 
 @plugin "daisyui" {
-  themes: light --default;
+  themes: winter --default, night;
 }
diff --git a/src/assets/menu.svg b/src/assets/menu.svg
new file mode 100644
index 0000000..758effb
--- /dev/null
+++ b/src/assets/menu.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741694797806" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2622" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M192 192m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2623"></path><path d="M192 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2624"></path><path d="M192 832m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" p-id="2625"></path><path d="M864 160H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h512c17.7 0 32-14.3 32-32s-14.3-32-32-32zM864 480H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h512c17.7 0 32-14.3 32-32s-14.3-32-32-32zM864 800H352c-17.7 0-32 14.3-32 32s14.3 32 32 32h512c17.7 0 32-14.3 32-32s-14.3-32-32-32z" p-id="2626"></path></svg>
\ No newline at end of file
diff --git a/src/assets/right.svg b/src/assets/right.svg
new file mode 100644
index 0000000..6e72035
--- /dev/null
+++ b/src/assets/right.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1741694970690" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4546" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M803.758 514.017c-0.001-0.311-0.013-0.622-0.018-0.933-0.162-23.974-9.386-47.811-27.743-65.903-0.084-0.082-0.172-0.157-0.256-0.239-0.154-0.154-0.296-0.315-0.451-0.468L417.861 94.096c-37.685-37.153-99.034-37.476-136.331-0.718-37.297 36.758-36.979 97.231 0.707 134.384l290.361 286.257-290.362 286.257c-37.685 37.153-38.004 97.625-0.707 134.383 37.297 36.758 98.646 36.435 136.331-0.718l357.43-352.378c0.155-0.153 0.297-0.314 0.451-0.468 0.084-0.082 0.172-0.157 0.256-0.239 18.354-18.089 27.578-41.922 27.743-65.892 0.004-0.315 0.017-0.631 0.018-0.947z" fill="#141414" p-id="4547"></path></svg>
\ No newline at end of file
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index e69de29..4fed8d1 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="card card-dash sidebar-base">
+    <div class="card-body flex">
+      <!-- Avatar and Name -->
+      <div class="flex items-center">
+        <div class="avatar h-10">
+          <div class="rounded-full">
+            <img src="../assets/user.svg" alt="User" />
+          </div>
+        </div>
+        <div class="mx-5 grow">
+          <label class="text-2xl">User Name</label>
+        </div>
+        <button class="btn btn-square rounded-lg p-2">
+          <img src="../assets/left.svg" alt="Menu Button" class="opacity-50">
+        </button>
+      </div>
+
+      <div class="divider"></div>
+
+      <ul class="menu h-full w-full">
+        <li v-for="item in items" class="text-lg my-1">
+          <a>
+            <img class="h-[1em] opacity-50 mx-1" :src="item.icon" alt="An icon" />
+            {{ item.msg }}
+          </a>
+        </li>
+
+      </ul>
+
+      <div class="divider"></div>
+
+      <div class="mb-5">
+        <label class="swap swap-rotate">
+          <!-- this hidden checkbox controls the state -->
+          <input type="checkbox" class="theme-controller" value="synthwave" />
+
+          <!-- sun icon -->
+          <svg class="swap-off h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path
+              d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
+          </svg>
+
+          <!-- moon icon -->
+          <svg class="swap-on h-10 w-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path
+              d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
+          </svg>
+        </label>
+
+        <label class="toggle text-base-content">
+          <input type="checkbox" value="synthwave" class="theme-controller">
+
+          <svg aria-label="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor">
+              <circle cx="12" cy="12" r="4"></circle>
+              <path d="M12 2v2"></path>
+              <path d="M12 20v2"></path>
+              <path d="m4.93 4.93 1.41 1.41"></path>
+              <path d="m17.66 17.66 1.41 1.41"></path>
+              <path d="M2 12h2"></path>
+              <path d="M20 12h2"></path>
+              <path d="m6.34 17.66-1.41 1.41"></path>
+              <path d="m19.07 4.93-1.41 1.41"></path>
+            </g>
+          </svg>
+
+          <svg aria-label="moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor">
+              <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
+            </g>
+          </svg>
+
+        </label>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import iconMenu from "../assets/menu.svg"
+
+const items = [
+  { id: 1, icon: iconMenu, msg: "btn1" },
+  { id: 2, icon: iconMenu, msg: "btn2" },
+  { id: 3, icon: iconMenu, msg: "btn3" },
+  { id: 4, icon: iconMenu, msg: "btn4" },
+]
+</script>
+
+<style scoped lang="postcss">
+@import "../assets/main.css";
+
+.sidebar-base {
+  @apply shadow-xl w-80 h-screen
+}
+
+.sidebar-open {}
+
+.sidebar-close {}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index f27274f..8d12d5a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,7 +3,7 @@ import LoginView from "@/views/LoginView.vue"
 import User from '@/views/UserView.vue'
 
 const routes = [
-  { path: "/", redirect: "/login" },
+  { path: "/", redirect: "/user" },
   { path: "/login", name: "Login", component: LoginView },
   { path: "/user", name: "User", component: User },
 ]
@@ -13,4 +13,4 @@ const router = createRouter({
   routes,
 })
 
-export default router
\ No newline at end of file
+export default router
diff --git a/src/views/UserView.vue b/src/views/UserView.vue
index a62b930..a80063b 100644
--- a/src/views/UserView.vue
+++ b/src/views/UserView.vue
@@ -1,10 +1,13 @@
 <template>
-  <div>
-
-  </div>
+  <main>
+    <div class="w-full h-full">
+      <Sidebar />
+    </div>
+  </main>
 </template>
 
 <script setup lang="ts">
+import Sidebar from '../components/Sidebar.vue'
 </script>
 
 <style scoped>