diff --git a/app/layout.tsx b/app/layout.tsx
index a092d4fe..bddadc19 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -12,7 +12,10 @@ import { SpeedInsights } from "@vercel/speed-insights/next"
 import { Toaster } from '@/components/ui/sonner'
 import { MapToggleProvider } from '@/components/map-toggle-context'
 import { ProfileToggleProvider } from '@/components/profile-toggle-context'
+import { UsageToggleProvider } from '@/components/usage-toggle-context'
 import { CalendarToggleProvider } from '@/components/calendar-toggle-context'
+import { HistoryToggleProvider } from '@/components/history-toggle-context'
+import { HistorySidebar } from '@/components/history-sidebar'
 import { MapLoadingProvider } from '@/components/map-loading-context';
 import ConditionalLottie from '@/components/conditional-lottie';
 import { MapProvider as MapContextProvider } from '@/components/map/map-context'
@@ -70,28 +73,33 @@ export default function RootLayout({
         )}
       >
         <CalendarToggleProvider>
-          <MapToggleProvider>
-            <ProfileToggleProvider>
-              <ThemeProvider
-                attribute="class"
-              defaultTheme="earth"
-              enableSystem
-              disableTransitionOnChange
-              themes={['light', 'dark', 'earth']}
-            >
-              <MapContextProvider>
-                <MapLoadingProvider>
-                  <Header />
-                  <ConditionalLottie />
-                  {children}
-                  <Sidebar />
-                  <Footer />
-                  <Toaster />
-                </MapLoadingProvider>
-              </MapContextProvider>
-            </ThemeProvider>
-          </ProfileToggleProvider>
-        </MapToggleProvider>
+          <HistoryToggleProvider>
+            <MapToggleProvider>
+              <ProfileToggleProvider>
+                <UsageToggleProvider>
+                  <ThemeProvider
+                    attribute="class"
+                    defaultTheme="earth"
+                    enableSystem
+                    disableTransitionOnChange
+                    themes={['light', 'dark', 'earth']}
+                  >
+                    <MapContextProvider>
+                      <MapLoadingProvider>
+                        <Header />
+                        <ConditionalLottie />
+                        {children}
+                        <Sidebar />
+                        <HistorySidebar />
+                        <Footer />
+                        <Toaster />
+                      </MapLoadingProvider>
+                    </MapContextProvider>
+                  </ThemeProvider>
+                </UsageToggleProvider>
+              </ProfileToggleProvider>
+            </MapToggleProvider>
+          </HistoryToggleProvider>
         </CalendarToggleProvider>
         <Analytics />
         <SpeedInsights />
diff --git a/components/chat.tsx b/components/chat.tsx
index 04e27ac6..2e0fd1e9 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -14,7 +14,9 @@ import { MapProvider } from './map/map-provider'
 import { useUIState, useAIState } from 'ai/rsc'
 import MobileIconsBar from './mobile-icons-bar'
 import { useProfileToggle, ProfileToggleEnum } from "@/components/profile-toggle-context";
+import { useUsageToggle } from "@/components/usage-toggle-context";
 import SettingsView from "@/components/settings/settings-view";
+import { UsageView } from "@/components/usage-view";
 import { MapDataProvider, useMapData } from './map/map-data-context'; // Add this and useMapData
 import { updateDrawingContext } from '@/lib/actions/chat'; // Import the server action
 import dynamic from 'next/dynamic'
@@ -31,6 +33,7 @@ export function Chat({ id }: ChatProps) {
   const [aiState] = useAIState()
   const [isMobile, setIsMobile] = useState(false)
   const { activeView } = useProfileToggle();
+  const { isUsageOpen } = useUsageToggle();
   const { isCalendarOpen } = useCalendarToggle()
   const [input, setInput] = useState('')
   const [showEmptyScreen, setShowEmptyScreen] = useState(false)
@@ -107,7 +110,7 @@ export function Chat({ id }: ChatProps) {
         <HeaderSearchButton />
         <div className="mobile-layout-container">
           <div className="mobile-map-section">
-          {activeView ? <SettingsView /> : <MapProvider />}
+          {isUsageOpen ? <UsageView /> : activeView ? <SettingsView /> : <MapProvider />}
         </div>
         <div className="mobile-icons-bar">
           <MobileIconsBar onAttachmentClick={handleAttachment} onSubmitClick={handleMobileSubmit} />
@@ -218,7 +221,7 @@ export function Chat({ id }: ChatProps) {
           className="w-1/2 p-4 fixed h-[calc(100vh-0.5in)] top-0 right-0 mt-[0.5in]"
           style={{ zIndex: 10 }} // Added z-index
         >
-          {activeView ? <SettingsView /> : <MapProvider />}
+          {isUsageOpen ? <UsageView /> : activeView ? <SettingsView /> : <MapProvider />}
         </div>
       </div>
     </MapDataProvider>
diff --git a/components/conditional-lottie.tsx b/components/conditional-lottie.tsx
index 55ca35d5..e29eda31 100644
--- a/components/conditional-lottie.tsx
+++ b/components/conditional-lottie.tsx
@@ -3,13 +3,15 @@
 import LottiePlayer from '@/components/ui/lottie-player';
 import { useMapLoading } from '@/components/map-loading-context';
 import { useProfileToggle } from '@/components/profile-toggle-context'; // Added import
+import { useUsageToggle } from '@/components/usage-toggle-context';
 
 const ConditionalLottie = () => {
   const { isMapLoaded } = useMapLoading();
   const { activeView } = useProfileToggle(); // Added this line
+  const { isUsageOpen } = useUsageToggle();
 
-  // Updated isVisible logic
-  return <LottiePlayer isVisible={!isMapLoaded && activeView === null} />;
+  // Updated isVisible logic to hide lottie when settings or usage is open
+  return <LottiePlayer isVisible={!isMapLoaded && activeView === null && !isUsageOpen} />;
 };
 
 export default ConditionalLottie;
diff --git a/components/header.tsx b/components/header.tsx
index 71c7556c..b675055c 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -16,13 +16,25 @@ import {
 import { MapToggle } from './map-toggle'
 import { ProfileToggle } from './profile-toggle'
 import { PurchaseCreditsPopup } from './purchase-credits-popup'
-import { UsageSidebar } from './usage-sidebar'
+import { useUsageToggle } from './usage-toggle-context'
+import { useProfileToggle } from './profile-toggle-context'
+import { useHistoryToggle } from './history-toggle-context'
 import { useState, useEffect } from 'react'
 
 export const Header = () => {
   const { toggleCalendar } = useCalendarToggle()
   const [isPurchaseOpen, setIsPurchaseOpen] = useState(false)
-  const [isUsageOpen, setIsUsageOpen] = useState(false)
+  const { toggleUsage, isUsageOpen } = useUsageToggle()
+  const { activeView, closeProfileView } = useProfileToggle()
+  const { toggleHistory } = useHistoryToggle()
+
+  const handleUsageToggle = () => {
+    // If we're about to open usage and profile is open, close profile first
+    if (!isUsageOpen && activeView) {
+      closeProfileView()
+    }
+    toggleUsage()
+  }
 
   useEffect(() => {
     // Open payment popup as soon as application opens
@@ -32,8 +44,7 @@ export const Header = () => {
   return (
     <>
       <PurchaseCreditsPopup isOpen={isPurchaseOpen} onClose={() => setIsPurchaseOpen(false)} />
-      <UsageSidebar isOpen={isUsageOpen} onClose={() => setIsUsageOpen(false)} />
-    <header className="fixed w-full p-1 md:p-2 flex justify-between items-center z-20 backdrop-blur bg-background/95 border-b border-border/40">
+    <header className="fixed w-full p-1 md:p-2 flex justify-between items-center z-[60] backdrop-blur bg-background/95 border-b border-border/40">
       <div>
         <a href="/">
           <span className="sr-only">Chat</span>
@@ -41,7 +52,7 @@ export const Header = () => {
       </div>
       
       <div className="absolute left-1 flex items-center">
-        <Button variant="ghost" size="icon">
+        <Button variant="ghost" size="icon" onClick={toggleHistory} data-testid="logo-history-toggle">
           <Image
             src="/images/logo.svg"
             alt="Logo"
@@ -67,7 +78,7 @@ export const Header = () => {
         
         <div id="header-search-portal" />
         
-        <Button variant="ghost" size="icon" onClick={() => setIsUsageOpen(true)}>
+        <Button variant="ghost" size="icon" onClick={handleUsageToggle}>
           <TentTree className="h-[1.2rem] w-[1.2rem]" />
         </Button>
         
@@ -79,7 +90,7 @@ export const Header = () => {
       {/* Mobile menu buttons */}
       <div className="flex md:hidden gap-2">
         
-        <Button variant="ghost" size="icon" onClick={() => setIsUsageOpen(true)}>
+        <Button variant="ghost" size="icon" onClick={handleUsageToggle}>
           <TentTree className="h-[1.2rem] w-[1.2rem]" />
         </Button>
         <ProfileToggle/>
@@ -89,4 +100,4 @@ export const Header = () => {
   )
 }
 
-export default Header
\ No newline at end of file
+export default Header
diff --git a/components/history-sidebar.tsx b/components/history-sidebar.tsx
new file mode 100644
index 00000000..1d604be0
--- /dev/null
+++ b/components/history-sidebar.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet'
+import { History as HistoryIcon } from 'lucide-react'
+import { ChatHistoryClient } from './sidebar/chat-history-client'
+import { Suspense } from 'react'
+import { HistorySkeleton } from './history-skelton'
+import { useHistoryToggle } from './history-toggle-context'
+
+export function HistorySidebar() {
+  const { isHistoryOpen, setHistoryOpen } = useHistoryToggle()
+
+  return (
+    <Sheet open={isHistoryOpen} onOpenChange={setHistoryOpen}>
+      <SheetContent className="w-64 rounded-tl-xl rounded-bl-xl" data-testid="history-panel">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-1 text-sm font-normal mb-2">
+            <HistoryIcon size={14} />
+            History
+          </SheetTitle>
+        </SheetHeader>
+        <div className="my-2 h-full pb-12 md:pb-10">
+          <Suspense fallback={<HistorySkeleton />}>
+            <ChatHistoryClient />
+          </Suspense>
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/components/history-toggle-context.tsx b/components/history-toggle-context.tsx
new file mode 100644
index 00000000..9e4d38e9
--- /dev/null
+++ b/components/history-toggle-context.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { createContext, useContext, useState, ReactNode } from "react"
+
+interface HistoryToggleContextType {
+  isHistoryOpen: boolean
+  toggleHistory: () => void
+  setHistoryOpen: (open: boolean) => void
+}
+
+const HistoryToggleContext = createContext<HistoryToggleContextType | undefined>(undefined)
+
+export const HistoryToggleProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [isHistoryOpen, setIsHistoryOpen] = useState(false)
+
+  const toggleHistory = () => setIsHistoryOpen(prev => !prev)
+  const setHistoryOpen = (open: boolean) => setIsHistoryOpen(open)
+
+  return (
+    <HistoryToggleContext.Provider value={{ isHistoryOpen, toggleHistory, setHistoryOpen }}>
+      {children}
+    </HistoryToggleContext.Provider>
+  )
+}
+
+export const useHistoryToggle = () => {
+  const context = useContext(HistoryToggleContext)
+  if (!context) throw new Error('useHistoryToggle must be used within HistoryToggleProvider')
+  return context
+}
diff --git a/components/history.tsx b/components/history.tsx
index 621c8f9e..7c5a5ed1 100644
--- a/components/history.tsx
+++ b/components/history.tsx
@@ -1,50 +1,28 @@
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger
-} from '@/components/ui/sheet'
+'use client'
+
 import { Button } from '@/components/ui/button'
 import { ChevronLeft, Menu } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { History as HistoryIcon } from 'lucide-react'
-import { ChatHistoryClient } from './sidebar/chat-history-client' // Updated import
-import { Suspense } from 'react'
-import { HistorySkeleton } from './history-skelton'
+import { useHistoryToggle } from './history-toggle-context'
 
 type HistoryProps = {
   location: 'sidebar' | 'header'
 }
 
 export function History({ location }: HistoryProps) {
+  const { toggleHistory } = useHistoryToggle()
+
   return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className={cn({
-            'rounded-full text-foreground/30': location === 'sidebar'
-          })}
-          data-testid="history-button"
-        >
-          {location === 'header' ? <Menu /> : <ChevronLeft size={16} />}
-        </Button>
-      </SheetTrigger>
-      <SheetContent className="w-64 rounded-tl-xl rounded-bl-xl" data-testid="history-panel">
-        <SheetHeader>
-          <SheetTitle className="flex items-center gap-1 text-sm font-normal mb-2">
-            <HistoryIcon size={14} />
-            History
-          </SheetTitle>
-        </SheetHeader>
-        <div className="my-2 h-full pb-12 md:pb-10">
-          <Suspense fallback={<HistorySkeleton />}>
-            <ChatHistoryClient />
-          </Suspense>
-        </div>
-      </SheetContent>
-    </Sheet>
+    <Button
+      variant="ghost"
+      size="icon"
+      className={cn({
+        'rounded-full text-foreground/30': location === 'sidebar'
+      })}
+      data-testid="history-button"
+      onClick={toggleHistory}
+    >
+      {location === 'header' ? <Menu /> : <ChevronLeft size={16} />}
+    </Button>
   )
 }
diff --git a/components/profile-toggle-context.tsx b/components/profile-toggle-context.tsx
index 7753d708..83685f15 100644
--- a/components/profile-toggle-context.tsx
+++ b/components/profile-toggle-context.tsx
@@ -13,6 +13,7 @@ export enum ProfileToggleEnum {
 interface ProfileToggleContextType {
   activeView: ProfileToggleEnum | null
   toggleProfileSection: (section: ProfileToggleEnum) => void
+  closeProfileView: () => void
 }
 
 const ProfileToggleContext = createContext<ProfileToggleContextType | undefined>(undefined)
@@ -28,8 +29,12 @@ export const ProfileToggleProvider: React.FC<ProfileToggleProviderProps> = ({ ch
     setActiveView(prevView => (prevView === section ? null : section))
   }
 
+  const closeProfileView = () => {
+    setActiveView(null)
+  }
+
   return (
-    <ProfileToggleContext.Provider value={{ activeView, toggleProfileSection }}>
+    <ProfileToggleContext.Provider value={{ activeView, toggleProfileSection, closeProfileView }}>
       {children}
     </ProfileToggleContext.Provider>
   )
diff --git a/components/profile-toggle.tsx b/components/profile-toggle.tsx
index e8c22cba..4a271b86 100644
--- a/components/profile-toggle.tsx
+++ b/components/profile-toggle.tsx
@@ -4,9 +4,11 @@ import { User, Settings, Paintbrush, Shield, CircleUserRound } from "lucide-reac
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { Button } from "@/components/ui/button"
 import { ProfileToggleEnum, useProfileToggle } from "./profile-toggle-context"
+import { useUsageToggle } from "./usage-toggle-context"
 
 export function ProfileToggle() {
-  const { toggleProfileSection } = useProfileToggle()
+  const { toggleProfileSection, activeView } = useProfileToggle()
+  const { isUsageOpen, closeUsage } = useUsageToggle()
   const [alignValue, setAlignValue] = useState<'start' | 'end'>("end")
   const [isMobile, setIsMobile] = useState(false)
   
@@ -32,7 +34,11 @@ export function ProfileToggle() {
     return () => window.removeEventListener("resize", debouncedResize)
   }, [])
   
-  const handleSectionChange = (section: ProfileToggleEnum) => {
+  const handleSectionToggle = (section: ProfileToggleEnum) => {
+    // If we're about to open a profile section and usage is open, close usage first
+    if (activeView !== section && isUsageOpen) {
+      closeUsage()
+    }
     toggleProfileSection(section)
   }
 
@@ -54,19 +60,19 @@ export function ProfileToggle() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56" align={alignValue} forceMount>
-        <DropdownMenuItem onClick={() => handleSectionChange(ProfileToggleEnum.Account)} data-testid="profile-account">
+        <DropdownMenuItem onClick={() => handleSectionToggle(ProfileToggleEnum.Account)} data-testid="profile-account">
           <User className="mr-2 h-4 w-4" />
           <span>Account</span>
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => handleSectionChange(ProfileToggleEnum.Settings)} data-testid="profile-settings">
+        <DropdownMenuItem onClick={() => handleSectionToggle(ProfileToggleEnum.Settings)} data-testid="profile-settings">
           <Settings className="mr-2 h-4 w-4" />
           <span>Settings</span>
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => handleSectionChange(ProfileToggleEnum.Appearance)} data-testid="profile-appearance">
+        <DropdownMenuItem onClick={() => handleSectionToggle(ProfileToggleEnum.Appearance)} data-testid="profile-appearance">
           <Paintbrush className="mr-2 h-4 w-4" />
           <span>Appearance</span>
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => handleSectionChange(ProfileToggleEnum.Security)} data-testid="profile-security">
+        <DropdownMenuItem onClick={() => handleSectionToggle(ProfileToggleEnum.Security)} data-testid="profile-security">
           <Shield className="mr-2 h-4 w-4" />
           <span>Security</span>
         </DropdownMenuItem>
diff --git a/components/purchase-credits-popup.tsx b/components/purchase-credits-popup.tsx
index 63a4b83c..7c24e748 100644
--- a/components/purchase-credits-popup.tsx
+++ b/components/purchase-credits-popup.tsx
@@ -10,7 +10,7 @@ import {
   DialogFooter,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
-import { CreditCard, Zap } from 'lucide-react';
+import { CreditCard, Zap, Check } from 'lucide-react';
 
 interface PurchaseCreditsPopupProps {
   isOpen: boolean;
@@ -23,6 +23,15 @@ export function PurchaseCreditsPopup({ isOpen, onClose }: PurchaseCreditsPopupPr
     onClose();
   };
 
+  const features = [
+    'Internet Search',
+    'Upload and analyze unlimited files',
+    'Mapping tools',
+    'Location Intelligence',
+    'Community Support',
+    'Exclusive Updates',
+  ];
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="sm:max-w-[425px]">
@@ -36,12 +45,19 @@ export function PurchaseCreditsPopup({ isOpen, onClose }: PurchaseCreditsPopupPr
           </DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">
-          <div className="flex items-center justify-between p-4 border rounded-lg bg-muted/50">
-            <div>
+          <div className="p-4 border rounded-lg bg-muted/50">
+            <div className="flex items-center justify-between mb-4">
               <p className="font-medium">Standard Tier</p>
-              <p className="text-sm text-muted-foreground">Unlimited searches & more</p>
+              <p className="font-bold">$500/year</p>
             </div>
-            <p className="font-bold">$20/mo</p>
+            <ul className="space-y-2">
+              {features.map((feature, index) => (
+                <li key={index} className="flex items-start gap-2 text-sm text-muted-foreground">
+                  <Check size={14} className="text-green-500 mt-1 shrink-0" />
+                  <span>{feature}</span>
+                </li>
+              ))}
+            </ul>
           </div>
         </div>
         <DialogFooter>
diff --git a/components/usage-sidebar.tsx b/components/usage-sidebar.tsx
deleted file mode 100644
index 4ce5ca8d..00000000
--- a/components/usage-sidebar.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { Button } from '@/components/ui/button';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { Zap, RefreshCw, LayoutPanelLeft, X } from 'lucide-react';
-
-interface UsageSidebarProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export function UsageSidebar({ isOpen, onClose }: UsageSidebarProps) {
-  const [usage, setUsage] = useState<any[]>([]);
-  const [credits, setCredits] = useState(0);
-
-  useEffect(() => {
-    if (isOpen) {
-      // Mock data for now as per the screenshot
-      setUsage([
-        { details: 'Efficiently Fix Pull Request ...', date: '2026-01-17 08:05', change: -418 },
-        { details: 'Fix Build and Add Parallel S...', date: '2026-01-16 06:10', change: -482 },
-        { details: 'How to Add a Feature to a ...', date: '2026-01-14 10:42', change: -300 },
-      ]);
-      setCredits(0);
-    }
-  }, [isOpen]);
-
-  return (
-    <Sheet open={isOpen} onOpenChange={onClose}>
-      <SheetContent className="w-full sm:max-w-[400px] p-0 overflow-y-auto">
-        <div className="p-6 space-y-6">
-          <div className="flex justify-between items-center">
-            <h2 className="text-xl font-semibold">Usage</h2>
-            <Button variant="ghost" size="icon" onClick={onClose}>
-              <X size={20} />
-            </Button>
-          </div>
-
-          <div className="p-4 border rounded-xl space-y-4">
-            <div className="flex justify-between items-center">
-              <span className="italic font-medium text-lg">Free</span>
-              <Button size="sm" className="rounded-full px-4" onClick={() => window.open('https://buy.stripe.com/3cIaEX3tRcur9EM7tbasg00', '_blank')}>Upgrade</Button>
-            </div>
-
-            <div className="space-y-2">
-              <div className="flex items-center justify-between text-sm">
-                <div className="flex items-center gap-2">
-                  <Zap size={16} className="text-muted-foreground" />
-                  <span>Credits</span>
-                </div>
-                <span className="font-bold">{credits}</span>
-              </div>
-              <div className="flex items-center justify-between text-xs text-muted-foreground pl-6">
-                <span>Free credits</span>
-                <span>0</span>
-              </div>
-            </div>
-
-            <div className="space-y-1">
-              <div className="flex items-center justify-between text-sm">
-                <div className="flex items-center gap-2">
-                  <RefreshCw size={16} className="text-muted-foreground" />
-                  <span>Daily refresh credits</span>
-                </div>
-                <span className="font-bold">300</span>
-              </div>
-              <p className="text-[10px] text-muted-foreground pl-6">Refresh to 300 at 00:00 every day</p>
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <LayoutPanelLeft size={18} />
-                <span className="font-medium">Website usage & billing</span>
-              </div>
-              <Button variant="ghost" size="icon" className="h-4 w-4">
-                <span className="sr-only">View more</span>
-                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" className="h-4 w-4"><path d="M6.1584 3.1356C6.35366 2.94034 6.67024 2.94034 6.8655 3.1356L10.8655 7.13561C11.0608 7.33087 11.0608 7.64745 10.8655 7.84271L6.8655 11.8427C6.67024 12.038 6.35366 12.038 6.1584 11.8427C5.96314 11.6474 5.96314 11.3309 6.1584 11.1356L9.80485 7.48916L6.1584 3.84271C5.96314 3.64745 5.96314 3.33087 6.1584 3.1356Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
-              </Button>
-            </div>
-
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="text-xs">Details</TableHead>
-                  <TableHead className="text-xs">Date</TableHead>
-                  <TableHead className="text-xs text-right">Credits change</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {usage.map((item, i) => (
-                  <TableRow key={i}>
-                    <TableCell className="text-xs font-medium">{item.details}</TableCell>
-                    <TableCell className="text-[10px] text-muted-foreground">{item.date}</TableCell>
-                    <TableCell className="text-xs text-right font-medium">{item.change}</TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
-}
diff --git a/components/usage-toggle-context.tsx b/components/usage-toggle-context.tsx
new file mode 100644
index 00000000..febe2680
--- /dev/null
+++ b/components/usage-toggle-context.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { createContext, useContext, useState, ReactNode } from "react"
+
+interface UsageToggleContextType {
+  isUsageOpen: boolean
+  toggleUsage: () => void
+  closeUsage: () => void
+}
+
+const UsageToggleContext = createContext<UsageToggleContextType | undefined>(undefined)
+
+export const UsageToggleProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [isUsageOpen, setIsUsageOpen] = useState(false)
+
+  const toggleUsage = () => setIsUsageOpen(prev => !prev)
+  const closeUsage = () => setIsUsageOpen(false)
+
+  return (
+    <UsageToggleContext.Provider value={{ isUsageOpen, toggleUsage, closeUsage }}>
+      {children}
+    </UsageToggleContext.Provider>
+  )
+}
+
+export const useUsageToggle = () => {
+  const context = useContext(UsageToggleContext)
+  if (!context) throw new Error('useUsageToggle must be used within UsageToggleProvider')
+  return context
+}
diff --git a/components/usage-view.tsx b/components/usage-view.tsx
new file mode 100644
index 00000000..26eac8f7
--- /dev/null
+++ b/components/usage-view.tsx
@@ -0,0 +1,96 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Zap, RefreshCw, LayoutPanelLeft, Minus } from 'lucide-react'
+import { useUsageToggle } from './usage-toggle-context'
+
+export function UsageView() {
+  const [usage] = useState([
+    { details: 'Efficiently Fix Pull Request ...', date: '2026-01-17 08:05', change: -418 },
+    { details: 'Fix Build and Add Parallel S...', date: '2026-01-16 06:10', change: -482 },
+    { details: 'How to Add a Feature to a ...', date: '2026-01-14 10:42', change: -300 },
+  ])
+  const [credits] = useState(0)
+  const { toggleUsage } = useUsageToggle()
+
+  return (
+    <div className="container py-8 h-full overflow-y-auto">
+      <div className="flex justify-between items-center mb-8">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Usage</h1>
+          <p className="text-muted-foreground">Track your credits and usage history</p>
+        </div>
+        <Button variant="ghost" size="icon" onClick={toggleUsage}>
+          <Minus className="h-6 w-6" />
+          <span className="sr-only">Close usage</span>
+        </Button>
+      </div>
+
+      <div className="space-y-6">
+        <div className="p-4 border rounded-xl space-y-4">
+          <div className="flex justify-between items-center">
+            <span className="italic font-medium text-lg">Free</span>
+            <Button size="sm" className="rounded-full px-4" onClick={() => window.open('https://buy.stripe.com/3cIaEX3tRcur9EM7tbasg00', '_blank')}>
+              Upgrade
+            </Button>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between text-sm">
+              <div className="flex items-center gap-2">
+                <Zap size={16} className="text-muted-foreground" />
+                <span>Credits</span>
+              </div>
+              <span className="font-bold">{credits}</span>
+            </div>
+            <div className="flex items-center justify-between text-xs text-muted-foreground pl-6">
+              <span>Free credits</span>
+              <span>0</span>
+            </div>
+          </div>
+
+          <div className="space-y-1">
+            <div className="flex items-center justify-between text-sm">
+              <div className="flex items-center gap-2">
+                <RefreshCw size={16} className="text-muted-foreground" />
+                <span>Daily refresh credits</span>
+              </div>
+              <span className="font-bold">300</span>
+            </div>
+            <p className="text-[10px] text-muted-foreground pl-6">Refresh to 300 at 00:00 every day</p>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <LayoutPanelLeft size={18} />
+              <span className="font-medium">Computer Usage</span>
+            </div>
+          </div>
+
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="text-xs">Details</TableHead>
+                <TableHead className="text-xs">Date</TableHead>
+                <TableHead className="text-xs text-right">Credits change</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {usage.map((item, i) => (
+                <TableRow key={i}>
+                  <TableCell className="text-xs font-medium">{item.details}</TableCell>
+                  <TableCell className="text-[10px] text-muted-foreground">{item.date}</TableCell>
+                  <TableCell className="text-xs text-right font-medium">{item.change}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </div>
+  )
+}