diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 00efe3e..1b2ceb7 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -11,15 +11,33 @@ const emit = defineEmits<{
 </script>
 <template>
   <div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
-    <div class="mx-auto flex w-full max-w-app items-center gap-3 text-white">
-      <div class="flex w-sidebar items-center pl-3">
+    <div
+      class="w-in mx-auto flex w-full max-w-app items-center gap-3 text-white"
+    >
+      <div
+        class="flex w-sidebar items-center pl-3"
+        :class="sideBarCollapsed && 'w-fit'"
+      >
         <Hamburger
           :side-bar-collapsed="props.sideBarCollapsed"
           @toggle-side-bar="emit('toggleSideBar')"
         />
-        <Logo class="ml-auto text-2xl" />
+        <Logo class="ml-auto px-3 text-2xl" />
+      </div>
+      <div class="mr-3 flex h-full flex-1 items-center gap-3 py-2.5">
+        <input
+          type="text"
+          placeholder="Search for notes"
+          class="h-full flex-1 rounded border-0 bg-[#355fd3] px-2 text-white outline-none placeholder:text-white focus:bg-white focus:text-black"
+        />
+        <button>+</button>
+        <button>Sign in</button>
       </div>
-      <div class="mr-3 flex-1 bg-gray-800">hey</div>
     </div>
   </div>
 </template>
+<style lang="postcss">
+button {
+  @apply h-full flex items-center rounded-md border-[1px] border-solid  border-white bg-primary px-3 py-1 text-sm font-medium text-white hover:bg-white hover:text-black;
+}
+</style>