diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 0bfe4682..a09cb3a4 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -1,32 +1,35 @@
 <template>
-  <div class="flex flex-col h-full justify-between">
+  <div
+    class="flex flex-col h-full justify-between transition-all duration-300 ease-in-out"
+    :class="isSidebarCollapsed ? 'w-12' : 'w-56'"
+  >
     <div>
-      <div class="flex p-2">
-        <UserDropdown />
-      </div>
-      <div class="flex-1">
-        <nav class="space-y-0.5 px-2">
-          <NavLinks
-            :links="navigations"
-            class="flex items-center rounded px-2 py-1 text-gray-800 transition-all duration-300 ease-in-out"
-            active="bg-white shadow-sm"
-            inactive="hover:bg-gray-100"
-          >
-            <template v-slot="{ link }">
-              <div class="flex w-full items-center space-x-2">
-                <span class="grid h-5 w-6 place-items-center">
-                  <component
-                    :is="link.icon"
-                    class="h-4.5 w-4.5 text-gray-700"
-                  />
-                </span>
-                <span class="text-base">{{ link.name }}</span>
-              </div>
-            </template>
-          </NavLinks>
-        </nav>
+      <UserDropdown class="p-2" :isCollapsed="isSidebarCollapsed" />
+      <div v-for="link in links">
+        <SidebarLink
+          :icon="link.icon"
+          :label="link.label"
+          :to="link.to"
+          :isCollapsed="isSidebarCollapsed"
+          class="my-0.5 mx-2"
+        />
       </div>
     </div>
+    <SidebarLink
+      :label="isSidebarCollapsed ? 'Expand' : 'Collapse'"
+      :isCollapsed="isSidebarCollapsed"
+      @click="isSidebarCollapsed = !isSidebarCollapsed"
+      class="m-2"
+    >
+      <template #icon>
+        <span class="grid h-5 w-6 place-items-center flex-shrink-0">
+          <CollapseSidebar
+            class="h-4.5 w-4.5 text-gray-700 duration-300 ease-in-out"
+            :class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
+          />
+        </span>
+      </template>
+    </SidebarLink>
   </div>
 </template>
 
@@ -36,40 +39,38 @@ import LeadsIcon from '@/components/Icons/LeadsIcon.vue'
 import DealsIcon from '@/components/Icons/DealsIcon.vue'
 import ContactsIcon from '@/components/Icons/ContactsIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
-import DashboardIcon from '@/components/Icons/DashboardIcon.vue'
 import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
-import NavLinks from '@/components/NavLinks.vue'
+import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
+import SidebarLink from '@/components/SidebarLink.vue'
+import { ref } from 'vue'
 
-const navigations = [
+const links = [
   {
-    name: 'Leads',
+    label: 'Leads',
     icon: LeadsIcon,
-    route: { name: 'Leads' },
+    to: 'Leads',
   },
   {
-    name: 'Deals',
+    label: 'Deals',
     icon: DealsIcon,
-    route: { name: 'Deals' },
+    to: 'Deals',
   },
   {
-    name: 'Contacts',
+    label: 'Contacts',
     icon: ContactsIcon,
-    route: { name: 'Contacts' },
+    to: 'Contacts',
   },
   {
-    name: 'Notes',
+    label: 'Notes',
     icon: NoteIcon,
-    route: { name: 'Notes' },
+    to: 'Notes',
   },
   {
-    name: 'Call Logs',
+    label: 'Call Logs',
     icon: PhoneIcon,
-    route: { name: 'Call Logs' },
+    to: 'Call Logs',
   },
-  // {
-  //   name: 'Dashboard',
-  //   icon: DashboardIcon,
-  //   route: { name: 'Dashboard' },
-  // },
 ]
+
+const isSidebarCollapsed = ref(false)
 </script>
diff --git a/frontend/src/components/DesktopLayout.vue b/frontend/src/components/DesktopLayout.vue
index 2d81c21e..36f2a068 100644
--- a/frontend/src/components/DesktopLayout.vue
+++ b/frontend/src/components/DesktopLayout.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex h-screen w-screen">
-    <div class="h-full border-r bg-gray-50 w-[220px]">
+    <div class="h-full border-r bg-gray-50">
       <AppSidebar />
     </div>
     <div class="flex-1 flex flex-col h-full overflow-auto">
diff --git a/frontend/src/components/Icons/CRMLogo.vue b/frontend/src/components/Icons/CRMLogo.vue
index da9605e4..124a43c2 100644
--- a/frontend/src/components/Icons/CRMLogo.vue
+++ b/frontend/src/components/Icons/CRMLogo.vue
@@ -1,25 +1,31 @@
 <template>
   <svg
-    viewBox="0 0 60 17"
+    width="118"
+    height="118"
+    viewBox="0 0 118 118"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path d="M10.0776 1.04102H0V3.69184H10.0776V1.04102Z" fill="#0089FF" />
     <path
-      d="M0 7.80273V16.1116H3.21664V10.458H9.40933V7.80273H0Z"
-      fill="#0089FF"
+      d="M93.7101 0H23.8141C10.7986 0 0.247559 10.5511 0.247559 23.5665V93.4626C0.247559 106.478 10.7986 117.029 23.8141 117.029H93.7101C106.726 117.029 117.277 106.478 117.277 93.4626V23.5665C117.277 10.5511 106.726 0 93.7101 0Z"
+      fill="url(#paint0_angular_0_12)"
     />
     <path
-      d="M29.2321 6.22129H26.5094C26.4318 5.77479 26.2886 5.37926 26.0799 5.03468C25.8712 4.68524 25.6116 4.3892 25.301 4.14654C24.9904 3.90388 24.6361 3.72188 24.2381 3.60055C23.845 3.47437 23.4203 3.41127 22.9641 3.41127C22.1537 3.41127 21.4354 3.61511 20.8093 4.02278C20.1832 4.4256 19.6931 5.01769 19.3388 5.79906C18.9845 6.57557 18.8074 7.52438 18.8074 8.64547C18.8074 9.78598 18.9845 10.7469 19.3388 11.5283C19.6979 12.3048 20.1881 12.892 20.8093 13.29C21.4354 13.6831 22.1512 13.8797 22.9569 13.8797C23.4034 13.8797 23.8207 13.8214 24.209 13.705C24.6021 13.5836 24.954 13.4065 25.2646 13.1735C25.58 12.9406 25.8445 12.6542 26.0581 12.3145C26.2765 11.9748 26.4269 11.5865 26.5094 11.1497L29.2321 11.1643C29.1302 11.8729 28.9093 12.5378 28.5696 13.159C28.2347 13.7802 27.7955 14.3286 27.252 14.8042C26.7084 15.275 26.0726 15.6438 25.3446 15.9107C24.6167 16.1728 23.8086 16.3039 22.9205 16.3039C21.6101 16.3039 20.4405 16.0005 19.4116 15.3939C18.3827 14.7872 17.5722 13.9112 16.9801 12.7659C16.388 11.6205 16.092 10.247 16.092 8.64547C16.092 7.03906 16.3905 5.6656 16.9874 4.52509C17.5843 3.37973 18.3973 2.50372 19.4261 1.89707C20.455 1.29042 21.6198 0.987091 22.9205 0.987091C23.7504 0.987091 24.522 1.10357 25.2354 1.33652C25.9489 1.56948 26.5846 1.91163 27.1428 2.36298C27.7009 2.80948 28.1595 3.35789 28.5187 4.00822C28.8826 4.6537 29.1204 5.39139 29.2321 6.22129Z"
-      fill="black"
-    />
-    <path
-      d="M31.2954 16.1V1.19093H36.8863C38.0317 1.19093 38.9926 1.38991 39.7691 1.78787C40.5505 2.18584 41.1402 2.74396 41.5381 3.46223C41.9409 4.17566 42.1423 5.00798 42.1423 5.95921C42.1423 6.9153 41.9385 7.7452 41.5308 8.44892C41.128 9.14778 40.5335 9.68891 39.7473 10.0723C38.9611 10.4509 37.9953 10.6401 36.8499 10.6401H32.8678V8.39796H36.4859C37.1557 8.39796 37.7041 8.30575 38.1312 8.12132C38.5582 7.93205 38.8737 7.65784 39.0775 7.2987C39.2862 6.93471 39.3906 6.48822 39.3906 5.95921C39.3906 5.43021 39.2862 4.97886 39.0775 4.60517C38.8688 4.22662 38.551 3.94028 38.1239 3.74615C37.6968 3.54716 37.146 3.44767 36.4714 3.44767H33.9962V16.1H31.2954ZM38.9975 9.34434L42.6883 16.1H39.6745L36.0491 9.34434H38.9975Z"
-      fill="black"
-    />
-    <path
-      d="M44.2184 1.19093H47.5234L51.9496 11.9942H52.1243L56.5504 1.19093H59.8555V16.1H57.2639V5.8573H57.1255L53.0052 16.0563H51.0687L46.9483 5.83546H46.81V16.1H44.2184V1.19093Z"
-      fill="black"
+      d="M21.2487 27.5115V38.0121H85.7749V45.8876L62.5161 68.4638V80.7495L54.9556 83.3222V68.4638C54.9556 68.4638 41.1474 55.0756 36.3171 50.3503H21.3013L42.6174 71.089C43.825 72.2441 44.5076 73.8716 44.5076 75.5517V87.9424L73.0167 88.0474V75.5517C73.0167 73.8716 73.6992 72.2441 74.9068 71.089L96.2755 50.2978V27.5115H21.2487Z"
+      fill="#F1FCFF"
     />
+    <defs>
+      <radialGradient
+        id="paint0_angular_0_12"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(81.5001 -21.5) rotate(67.4893) scale(262.5 101.567)"
+      >
+        <stop offset="0.494792" stop-color="#E953E6" />
+        <stop offset="1" stop-color="#BA27D1" />
+      </radialGradient>
+    </defs>
   </svg>
 </template>
diff --git a/frontend/src/components/Icons/CollapseSidebar.vue b/frontend/src/components/Icons/CollapseSidebar.vue
new file mode 100644
index 00000000..2cfccee3
--- /dev/null
+++ b/frontend/src/components/Icons/CollapseSidebar.vue
@@ -0,0 +1,27 @@
+<template>
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.875 9.06223L3 9.06232"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6.74537 5.31699L3 9.06236L6.74527 12.8076"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14.1423 4L14.1423 14.125"
+      stroke="currentColor"
+      stroke-linecap="round"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/NavLink.vue b/frontend/src/components/NavLink.vue
deleted file mode 100644
index 732012d9..00000000
--- a/frontend/src/components/NavLink.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <router-link custom :to="link.route" v-slot="{ href, isActive, navigate }">
-    <a
-      :href="href"
-      @click="navigate"
-      :class="[isActive ? active : inactive, $attrs.class]"
-    >
-      <slot :link="link">
-        {{ link.name }}
-      </slot>
-    </a>
-  </router-link>
-</template>
-<script setup>
-const props = defineProps(['link', 'active', 'inactive'])
-</script>
diff --git a/frontend/src/components/NavLinks.vue b/frontend/src/components/NavLinks.vue
deleted file mode 100644
index 7950bbd3..00000000
--- a/frontend/src/components/NavLinks.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <NavLink
-    v-for="link in links"
-    :key="link.name"
-    :class="$attrs.class"
-    v-bind="{ link, active, inactive }"
-  >
-    <slot :link="link">
-      {{ link.name }}
-    </slot>
-  </NavLink>
-</template>
-<script setup>
-import NavLink from '@/components/NavLink.vue'
-
-const props = defineProps(['links', 'active', 'inactive'])
-</script>
diff --git a/frontend/src/components/SidebarLink.vue b/frontend/src/components/SidebarLink.vue
new file mode 100644
index 00000000..d7157286
--- /dev/null
+++ b/frontend/src/components/SidebarLink.vue
@@ -0,0 +1,59 @@
+<template>
+  <div
+    class="flex h-7 items-center rounded text-gray-800 cursor-pointer transition-all duration-300 ease-in-out"
+    :class="isActive ? 'bg-white shadow-sm' : 'hover:bg-gray-100'"
+    @click="handleClick"
+  >
+    <div class="flex items-center p-1">
+      <Tooltip :text="label" placement="right">
+        <slot name="icon">
+          <span class="grid h-5 w-6 place-items-center flex-shrink-0">
+            <component :is="icon" class="h-4.5 w-4.5 text-gray-700" />
+          </span>
+        </slot>
+      </Tooltip>
+      <span
+        class="flex-shrink-0 text-base duration-300 ease-in-out"
+        :class="
+          isCollapsed ? 'opacity-0 ml-0 w-0 overflow-hidden' : 'opacity-100 ml-2 w-auto'
+        "
+      >
+        {{ label }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Tooltip } from 'frappe-ui'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const props = defineProps({
+  icon: {
+    type: Object,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  to: {
+    type: String,
+    default: '',
+  },
+  isCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+function handleClick() {
+  router.push({ name: props.to })
+}
+
+let isActive = computed(() => {
+  return router.currentRoute.value.name === props.to
+})
+</script>
diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index 78c844d7..1e815bd9 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/frontend/src/components/UserDropdown.vue
@@ -2,17 +2,39 @@
   <Dropdown :options="userDropdownOptions">
     <template v-slot="{ open }">
       <button
-        class="flex w-full items-center space-x-2 rounded-md p-2 text-left"
-        :class="open ? 'bg-gray-300' : 'hover:bg-gray-200'"
-        v-if="user"
+        class="flex h-12 py-2 items-center rounded-md duration-300 ease-in-out"
+        :class="
+          isCollapsed
+            ? 'px-0 w-auto'
+            : open
+            ? 'bg-white shadow-sm px-2 w-52'
+            : 'hover:bg-gray-200 px-2 w-52'
+        "
       >
-        <UserAvatar :user="user.name" size="md" />
-        <span class="hidden text-base font-medium text-gray-900 sm:inline">
-          {{ user.full_name }}
-        </span>
+        <CRMLogo class="w-8 h-8 rounded flex-shrink-0" />
+        <div
+          class="flex flex-1 flex-col text-left duration-300 ease-in-out"
+          :class="
+            isCollapsed
+              ? 'opacity-0 ml-0 w-0 overflow-hidden'
+              : 'opacity-100 ml-2 w-auto'
+          "
+        >
+          <div class="text-base font-medium text-gray-900 leading-none">
+            CRM
+          </div>
+          <div class="mt-1 text-sm text-gray-700 leading-none">
+            {{ user.full_name }}
+          </div>
+        </div>
         <FeatherIcon
           name="chevron-down"
-          class="h-4 w-4 sm:inline"
+          class="h-4 w-4 duration-300 ease-in-out"
+          :class="
+            isCollapsed
+              ? 'opacity-0 ml-0 w-0 overflow-hidden'
+              : 'opacity-100 ml-2 w-auto'
+          "
           aria-hidden="true"
         />
       </button>
@@ -21,12 +43,19 @@
 </template>
 
 <script setup>
-import UserAvatar from '@/components/UserAvatar.vue'
+import CRMLogo from '@/components/Icons/CRMLogo.vue'
 import { sessionStore } from '@/stores/session'
 import { usersStore } from '@/stores/users'
 import { Dropdown, FeatherIcon } from 'frappe-ui'
 import { computed } from 'vue'
 
+const props = defineProps({
+  isCollapsed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
 const { logout } = sessionStore()
 const { getUser } = usersStore()
 
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 6f4955ab..05c39768 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="flex h-screen w-screen justify-center bg-gray-100">
     <div class="mt-32 w-full px-4">
-      <CRMLogo class="mx-auto h-6" />
+      <CRMLogo class="mx-auto h-10" />
       <div class="mt-6 flex items-center justify-center space-x-1.5">
-        <span class="text-3xl font-semibold text-gray-900">Login</span>
+        <span class="text-3xl font-semibold text-gray-900">Login to CRM</span>
       </div>
       <div class="mx-auto mt-6 w-full px-4 sm:w-96">
         <form