diff --git a/apps/desktop/src/components/toolbar/bars/main-toolbar.tsx b/apps/desktop/src/components/toolbar/bars/main-toolbar.tsx
index 4f1d682fb..b9bfae5dc 100644
--- a/apps/desktop/src/components/toolbar/bars/main-toolbar.tsx
+++ b/apps/desktop/src/components/toolbar/bars/main-toolbar.tsx
@@ -3,12 +3,11 @@ import { useMatch } from "@tanstack/react-router";
 import { DeleteNoteButton } from "@/components/toolbar/buttons/delete-note-button";
 import { NewNoteButton } from "@/components/toolbar/buttons/new-note-button";
 import { NewWindowButton } from "@/components/toolbar/buttons/new-window-button";
-// import { ShareButton } from "@/components/toolbar/buttons/share-button";
 import { getCurrentWebviewWindowLabel } from "@hypr/plugin-windows";
+import { ChatPanelButton } from "@hypr/ui/components/block/chat-panel-button";
 import { cn } from "@hypr/ui/lib/utils";
-import { useLeftSidebar } from "@hypr/utils/contexts";
+import { useLeftSidebar, useRightPanel } from "@hypr/utils/contexts";
 import { SearchBar } from "../../search-bar";
-import { ChatPanelButton } from "../buttons/chat-panel-button";
 import { LeftSidebarButton } from "../buttons/left-sidebar-button";
 import { ShareButton } from "../buttons/share-button";
 
@@ -24,6 +23,8 @@ export function MainToolbar() {
   const isNote = !!noteMatch;
   const isMain = getCurrentWebviewWindowLabel() === "main";
 
+  const { isExpanded: isChatPanelExpanded, togglePanel: toggleChatPanel } = useRightPanel();
+
   return (
     <header
       data-tauri-drag-region
@@ -58,7 +59,7 @@ export function MainToolbar() {
           <>
             {(organizationMatch || humanMatch) && <NewWindowButton />}
             {isNote && <ShareButton />}
-            <ChatPanelButton />
+            <ChatPanelButton isExpanded={isChatPanelExpanded} togglePanel={toggleChatPanel} />
           </>
         )}
       </div>
diff --git a/apps/desktop/src/components/toolbar/buttons/chat-panel-button.tsx b/apps/desktop/src/components/toolbar/buttons/chat-panel-button.tsx
deleted file mode 100644
index a8903bfbd..000000000
--- a/apps/desktop/src/components/toolbar/buttons/chat-panel-button.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { MessageCircleMore } from "lucide-react";
-import { memo, useEffect } from "react";
-
-import { Button } from "@hypr/ui/components/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@hypr/ui/components/ui/tooltip";
-import { cn } from "@hypr/ui/lib/utils";
-import { useRightPanel } from "@hypr/utils/contexts";
-import Shortcut from "../../shortcut";
-
-function ChatPanelButtonBase() {
-  const { isExpanded, togglePanel } = useRightPanel();
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "j" && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-        togglePanel();
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [togglePanel]);
-
-  const handleClick = () => {
-    togglePanel();
-  };
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={handleClick}
-          className={cn("hover:bg-neutral-200 text-xs size-7 p-0", isExpanded && "bg-neutral-200")}
-        >
-          <MessageCircleMore className="w-4 h-4" />
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>
-          Toggle chat panel <Shortcut macDisplay="⌘J" windowsDisplay="Ctrl+J" />
-        </p>
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
-export const ChatPanelButton = memo(ChatPanelButtonBase);
diff --git a/apps/desktop2/src/components/chat.tsx b/apps/desktop2/src/components/chat.tsx
index 8645302e1..b7f74902f 100644
--- a/apps/desktop2/src/components/chat.tsx
+++ b/apps/desktop2/src/components/chat.tsx
@@ -53,40 +53,64 @@ export function Chat() {
 
   if (!currentChatGroupId || !messageIds?.length) {
     return (
-      <div className="border border-gray-300 rounded p-2">
-        <div className="text-gray-500">Select or create a chat group</div>
-
-        <div className="flex flex-col gap-2">
-          {chatGroupIds?.map((chatGroupId) => (
-            <ChatGroup
-              key={chatGroupId}
-              id={chatGroupId}
-              handleClick={() => setCurrentChatGroupId(chatGroupId)}
+      <div className="h-full flex flex-col bg-gray-100">
+        <div className="flex-1 overflow-y-auto p-4">
+          <div className="flex flex-col gap-2">
+            {chatGroupIds?.map((chatGroupId) => (
+              <ChatGroup
+                key={chatGroupId}
+                id={chatGroupId}
+                handleClick={() => setCurrentChatGroupId(chatGroupId)}
+              />
+            ))}
+          </div>
+        </div>
+
+        <div className="border-t border-gray-300 p-4">
+          <form onSubmit={handleSubmitMessage}>
+            <textarea
+              name="message"
+              placeholder="Type a message..."
+              className="w-full border border-gray-300 rounded p-2 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
+              rows={3}
             />
-          ))}
+            <button className="mt-2 border border-gray-300 rounded px-4 py-2 hover:bg-gray-100">
+              Send
+            </button>
+          </form>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="border border-gray-300 rounded p-2">
-      <button onClick={() => setCurrentChatGroupId("")}>
-        reset
-      </button>
+    <div className="h-full flex flex-col border border-gray-300 rounded">
+      <div className="border-b border-gray-300 p-2">
+        <button
+          onClick={() => setCurrentChatGroupId("")}
+          className="border border-gray-300 rounded px-3 py-1 hover:bg-gray-100"
+        >
+          reset
+        </button>
+      </div>
 
-      <div className="space-y-2">
+      <div className="flex-1 overflow-y-auto p-4 space-y-2">
         {messageIds?.map((messageId) => <ChatMessage key={messageId} messageId={messageId} />)}
       </div>
 
-      <form onSubmit={handleSubmitMessage}>
-        <input
-          name="message"
-          type="text"
-          className="border border-gray-300 rounded p-2"
-        />
-        <button className="border border-gray-300 rounded p-2">Send</button>
-      </form>
+      <div className="border-t border-gray-300 p-4">
+        <form onSubmit={handleSubmitMessage} className="flex flex-col gap-2">
+          <textarea
+            name="message"
+            placeholder="Type a message..."
+            className="w-full border border-gray-300 rounded p-2 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
+            rows={3}
+          />
+          <button className="self-end border border-gray-300 rounded px-4 py-2 hover:bg-gray-100">
+            Send
+          </button>
+        </form>
+      </div>
     </div>
   );
 }
diff --git a/apps/desktop2/src/components/main/left-sidebar.tsx b/apps/desktop2/src/components/main/left-sidebar.tsx
index 89b5e5844..c046b46bf 100644
--- a/apps/desktop2/src/components/main/left-sidebar.tsx
+++ b/apps/desktop2/src/components/main/left-sidebar.tsx
@@ -1,6 +1,6 @@
 import { Link } from "@tanstack/react-router";
 import { clsx } from "clsx";
-import { ChartNoAxesGantt, FolderOpenIcon } from "lucide-react";
+import { ChartNoAxesGantt, FolderOpenIcon, PanelLeftCloseIcon, SearchIcon } from "lucide-react";
 import { useState } from "react";
 import { useCell, useRowIds, useSliceRowIds } from "tinybase/ui-react";
 
@@ -8,18 +8,21 @@ import * as persisted from "../../tinybase/store/persisted";
 
 import { ContextMenuItem } from "@hypr/ui/components/ui/context-menu";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@hypr/ui/components/ui/tabs";
+import { useLeftSidebar } from "@hypr/utils/contexts";
 import { useTabs } from "../../hooks/useTabs";
 import { Tab } from "../../types";
 import { InteractiveButton } from "../interactive-button";
 
 export function LeftSidebar() {
+  const { togglePanel: toggleLeftPanel } = useLeftSidebar();
+
   return (
-    <div className="h-screen border-r w-[300px]">
-      <Tabs defaultValue="timeline">
+    <div className="h-full border-r w-full flex flex-col overflow-hidden">
+      <Tabs defaultValue="timeline" className="flex flex-col flex-1 overflow-hidden">
         <TabsList
           data-tauri-drag-region
           className={clsx([
-            "h-full flex flex-row",
+            "flex flex-row shrink-0",
             "flex w-full items-center justify-between min-h-11 py-1 px-2 border-b",
             "border-border bg-neutral-50",
             "pl-[72px]",
@@ -31,14 +34,32 @@ export function LeftSidebar() {
           <TabsTrigger value="timeline" className="flex-1">
             <ChartNoAxesGantt />
           </TabsTrigger>
+          <TabsTrigger value="search" className="flex-1">
+            <SearchIcon />
+          </TabsTrigger>
+
+          <PanelLeftCloseIcon
+            onClick={toggleLeftPanel}
+            className="cursor-pointer h-5 w-5"
+          />
         </TabsList>
 
-        <TabsContent value="timeline" className="flex-1 overflow-auto p-2 mt-0">
-          <TimelineView />
+        <TabsContent value="timeline" className="flex-1 mt-0 h-0">
+          <div className="h-full overflow-y-auto p-2">
+            <TimelineView />
+          </div>
+        </TabsContent>
+
+        <TabsContent value="folder" className="flex-1 mt-0 h-0">
+          <div className="h-full overflow-y-auto p-2">
+            <FolderView />
+          </div>
         </TabsContent>
 
-        <TabsContent value="folder" className="flex-1 overflow-auto p-2 mt-0">
-          <FolderView />
+        <TabsContent value="search" className="flex-1 mt-0 h-0">
+          <div className="h-full flex flex-col overflow-hidden">
+            <SearchView />
+          </div>
         </TabsContent>
       </Tabs>
     </div>
@@ -47,29 +68,53 @@ export function LeftSidebar() {
 
 function TimelineView() {
   const allSessionIds = useRowIds("sessions", persisted.STORE_ID);
+  const { currentTab } = useTabs();
 
   return (
     <div className="flex flex-col">
-      {allSessionIds?.map((sessionId) => <SessionItem key={sessionId} sessionId={sessionId} />)}
+      {allSessionIds?.map((sessionId) => (
+        <SessionItem key={sessionId} sessionId={sessionId} active={currentTab?.id === sessionId} />
+      ))}
     </div>
   );
 }
 
+function SearchView() {
+  return (
+    <>
+      <div className="sticky top-0 bg-white z-10 p-2 border-b">
+        <input
+          type="text"
+          placeholder="Search..."
+          className="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+      <div className="flex-1 overflow-y-auto p-2">
+        {/* Search results will go here */}
+      </div>
+    </>
+  );
+}
+
 function FolderView() {
   const rootFolderIds = useSliceRowIds(persisted.INDEXES.foldersByParent, "", persisted.STORE_ID);
   const rootSessionIds = useSliceRowIds(persisted.INDEXES.sessionsByFolder, "", persisted.STORE_ID);
+  const { currentTab } = useTabs();
 
   return (
     <div className="flex flex-col">
       {rootFolderIds?.map((folderId) => <FolderTreeItem key={folderId} folderId={folderId} />)}
-
-      {rootSessionIds?.map((sessionId) => <SessionItemNested key={sessionId} sessionId={sessionId} depth={0} />)}
+      {rootSessionIds?.map((sessionId) => (
+        <SessionItemNested key={sessionId} sessionId={sessionId} depth={0} active={currentTab?.id === sessionId} />
+      ))}
     </div>
   );
 }
 
 function FolderTreeItem({ folderId, depth = 0 }: { folderId: string; depth?: number }) {
   const [isOpen, setIsOpen] = useState(true);
+  const { currentTab } = useTabs();
+
   const name = useCell("folders", folderId, "name", persisted.STORE_ID);
   const sessionIds = useSliceRowIds(persisted.INDEXES.sessionsByFolder, folderId, persisted.STORE_ID);
   const subFolderIds = useSliceRowIds(persisted.INDEXES.foldersByParent, folderId, persisted.STORE_ID);
@@ -92,7 +137,12 @@ function FolderTreeItem({ folderId, depth = 0 }: { folderId: string; depth?: num
       {isOpen && (
         <>
           {sessionIds?.map((sessionId) => (
-            <SessionItemNested key={sessionId} sessionId={sessionId} depth={depth + 1} />
+            <SessionItemNested
+              key={sessionId}
+              sessionId={sessionId}
+              depth={depth + 1}
+              active={currentTab?.id === sessionId}
+            />
           ))}
 
           {subFolderIds?.map((subId) => <FolderTreeItem key={subId} folderId={subId} depth={depth + 1} />)}
diff --git a/apps/desktop2/src/components/main/main-area.tsx b/apps/desktop2/src/components/main/main-area.tsx
index 87f49d3af..87d043c3b 100644
--- a/apps/desktop2/src/components/main/main-area.tsx
+++ b/apps/desktop2/src/components/main/main-area.tsx
@@ -1,9 +1,13 @@
 import { commands as windowsCommands } from "@hypr/plugin-windows";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 import { clsx } from "clsx";
+import { PanelLeftOpenIcon } from "lucide-react";
 
 import NoteEditor from "@hypr/tiptap/editor";
+import { ChatPanelButton } from "@hypr/ui/components/block/chat-panel-button";
 import TitleInput from "@hypr/ui/components/block/title-input";
+import { ScrollArea, ScrollBar } from "@hypr/ui/components/ui/scroll-area";
+import { useLeftSidebar, useRightPanel } from "@hypr/utils/contexts";
 import { useTabs } from "../../hooks/useTabs";
 import * as persisted from "../../tinybase/store/persisted";
 import { Tab } from "../../types";
@@ -12,8 +16,8 @@ export function MainContent({ tabs }: { tabs: Tab[] }) {
   const activeTab = tabs.find((t) => t.active)!;
 
   return (
-    <div className="flex flex-col gap-2">
-      <Tabs tabs={tabs} />
+    <div className="flex flex-col">
+      <TabsHeader tabs={tabs} />
       <TabContent tab={activeTab} />
     </div>
   );
@@ -22,6 +26,8 @@ export function MainContent({ tabs }: { tabs: Tab[] }) {
 export function MainHeader() {
   const search = useSearch({ strict: false });
   const navigate = useNavigate();
+  const { isExpanded: isRightPanelExpanded, togglePanel: toggleRightPanel } = useRightPanel();
+  const { isExpanded: isLeftPanelExpanded, togglePanel: toggleLeftPanel } = useLeftSidebar();
 
   const handleClickSettings = () => {
     windowsCommands.windowShow({ type: "settings" });
@@ -40,8 +46,17 @@ export function MainHeader() {
       className={clsx([
         "flex w-full items-center justify-between min-h-11 py-1 px-2 border-b",
         "border-border bg-neutral-50",
+        "pl-[82px]",
       ])}
     >
+      {!isLeftPanelExpanded
+        && (
+          <PanelLeftOpenIcon
+            onClick={toggleLeftPanel}
+            className="cursor-pointer h-5 w-5"
+          />
+        )}
+
       <div
         className="flex items-center justify-start"
         data-tauri-drag-region
@@ -57,29 +72,37 @@ export function MainHeader() {
           New note
         </button>
       </div>
+
+      <ChatPanelButton
+        isExpanded={isRightPanelExpanded}
+        togglePanel={toggleRightPanel}
+      />
     </header>
   );
 }
 
-function Tabs({ tabs }: { tabs: Tab[] }) {
+function TabsHeader({ tabs }: { tabs: Tab[] }) {
   const { select, close } = useTabs();
 
   return (
-    <div className="flex flex-row gap-2">
-      {tabs.map((tab) => (
-        <TabHeader
-          key={tab.id}
-          tab={tab}
-          active={tab.active}
-          handleSelect={select}
-          handleClose={close}
-        />
-      ))}
-    </div>
+    <ScrollArea className="w-full border-b whitespace-nowrap">
+      <div className="flex w-max gap-1">
+        {tabs.map((tab) => (
+          <TabItem
+            key={tab.id}
+            tab={tab}
+            active={tab.active}
+            handleSelect={select}
+            handleClose={close}
+          />
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
   );
 }
 
-function TabHeader(
+function TabItem(
   { tab, active, handleSelect, handleClose }: {
     tab: Tab;
     active: boolean;
@@ -92,21 +115,23 @@ function TabHeader(
   return (
     <div
       className={clsx([
-        "flex items-center gap-2",
-        "border border-gray-300 rounded py-0.5 px-2",
-        active && "bg-blue-100",
+        "flex items-center gap-2 shrink-0",
+        "border-x rounded px-3 py-1.5",
+        active
+          ? "border-border bg-background text-foreground"
+          : "border-transparent bg-muted/50 hover:bg-muted text-muted-foreground",
       ])}
     >
       <button
         onClick={() => handleSelect(tab)}
-        className="truncate max-w-[120px]"
+        className="text-sm truncate max-w-[120px]"
       >
         {title}
       </button>
       {active && (
         <button
           onClick={() => handleClose(tab)}
-          className="text-gray-500 hover:text-gray-700"
+          className="text-muted-foreground hover:text-foreground text-xs"
         >
           ✕
         </button>
@@ -135,7 +160,7 @@ function TabContent({ tab }: { tab: Tab }) {
   );
 
   return (
-    <div className="flex flex-col gap-2">
+    <div className="flex flex-col gap-2 px-2 pt-2">
       <TitleInput
         value={row.title ?? ""}
         editable={true}
diff --git a/apps/desktop2/src/hooks/useTabs.ts b/apps/desktop2/src/hooks/useTabs.ts
index 4b1fbf342..b73338d03 100644
--- a/apps/desktop2/src/hooks/useTabs.ts
+++ b/apps/desktop2/src/hooks/useTabs.ts
@@ -68,6 +68,7 @@ export function useTabs() {
   };
 
   return {
+    currentTab: search.tabs.find((t) => t.active),
     openCurrent,
     openNew,
     select,
diff --git a/apps/desktop2/src/routes/app/main/_layout.index.tsx b/apps/desktop2/src/routes/app/main/_layout.index.tsx
index 905f19469..9c697f970 100644
--- a/apps/desktop2/src/routes/app/main/_layout.index.tsx
+++ b/apps/desktop2/src/routes/app/main/_layout.index.tsx
@@ -2,7 +2,7 @@ import { createFileRoute, redirect } from "@tanstack/react-router";
 import { z } from "zod";
 
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@hypr/ui/components/ui/resizable";
-import { useRightPanel } from "@hypr/utils/contexts";
+import { useLeftSidebar, useRightPanel } from "@hypr/utils/contexts";
 import { Chat } from "../../../components/chat";
 import { LeftSidebar } from "../../../components/main/left-sidebar";
 import { MainContent, MainHeader } from "../../../components/main/main-area";
@@ -74,27 +74,37 @@ export const Route = createFileRoute("/app/main/_layout/")({
 
 function Component() {
   const { tabs } = Route.useLoaderData();
-  const { isExpanded } = useRightPanel();
+  const { isExpanded: isRightPanelExpanded } = useRightPanel();
+  const { isExpanded: isLeftPanelExpanded } = useLeftSidebar();
 
   return (
-    <div className="flex flex-row h-full">
-      <LeftSidebar />
-      <div className="flex flex-col gap-2 h-full flex-1">
-        <MainHeader />
-        {isExpanded
-          ? (
-            <ResizablePanelGroup direction="horizontal">
-              <ResizablePanel defaultSize={75} minSize={30}>
-                <MainContent tabs={tabs} />
-              </ResizablePanel>
-              <ResizableHandle withHandle />
-              <ResizablePanel defaultSize={25} minSize={20}>
-                <Chat />
-              </ResizablePanel>
-            </ResizablePanelGroup>
-          )
-          : <MainContent tabs={tabs} />}
-      </div>
-    </div>
+    <ResizablePanelGroup direction="horizontal" className="h-full">
+      {isLeftPanelExpanded && (
+        <>
+          <ResizablePanel defaultSize={20} minSize={15} maxSize={40}>
+            <LeftSidebar />
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+        </>
+      )}
+      <ResizablePanel>
+        <div className="flex flex-col h-full">
+          <MainHeader />
+          {isRightPanelExpanded
+            ? (
+              <ResizablePanelGroup direction="horizontal">
+                <ResizablePanel defaultSize={60} minSize={30}>
+                  <MainContent tabs={tabs} />
+                </ResizablePanel>
+                <ResizableHandle withHandle />
+                <ResizablePanel defaultSize={40} minSize={30}>
+                  <Chat />
+                </ResizablePanel>
+              </ResizablePanelGroup>
+            )
+            : <MainContent tabs={tabs} />}
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
   );
 }
diff --git a/apps/desktop2/src/styles/globals.css b/apps/desktop2/src/styles/globals.css
index 406de8a81..802298d8e 100644
--- a/apps/desktop2/src/styles/globals.css
+++ b/apps/desktop2/src/styles/globals.css
@@ -62,6 +62,7 @@ h6 {
 #root,
 #__next {
   isolation: isolate;
+  height: 100%;
 }
 
 /* https://github.com/gitbutlerapp/gitbutler/blob/master/apps/desktop/src/styles/styles.css */
diff --git a/packages/ui/src/components/block/chat-panel-button.tsx b/packages/ui/src/components/block/chat-panel-button.tsx
new file mode 100644
index 000000000..c8190585b
--- /dev/null
+++ b/packages/ui/src/components/block/chat-panel-button.tsx
@@ -0,0 +1,37 @@
+import { MessageCircleMore } from "lucide-react";
+import { useEffect } from "react";
+
+import { Button } from "@hypr/ui/components/ui/button";
+import { cn } from "@hypr/ui/lib/utils";
+
+export function ChatPanelButton({ isExpanded, togglePanel }: { isExpanded: boolean; togglePanel: () => void }) {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "j" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        togglePanel();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [togglePanel]);
+
+  const handleClick = () => {
+    togglePanel();
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={handleClick}
+      className={cn("hover:bg-neutral-200 text-xs size-7 p-0", isExpanded && "bg-neutral-200")}
+    >
+      <MessageCircleMore className="w-4 h-4" />
+    </Button>
+  );
+}
diff --git a/packages/ui/src/components/ui/scroll-area.tsx b/packages/ui/src/components/ui/scroll-area.tsx
new file mode 100644
index 000000000..561174261
--- /dev/null
+++ b/packages/ui/src/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+
+import { cn } from "@hypr/ui/lib/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical"
+        && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal"
+        && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };