diff --git a/app/layout.tsx b/app/layout.tsx
index 766cd265..fd4d4210 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata, Viewport } from 'next'
 import { Inter as FontSans, Poppins } from 'next/font/google'
 import './globals.css'
-import 'katex/dist/katex.min.css';
+import 'katex/dist/katex.min.css'
 import { cn } from '@/lib/utils'
 import { ThemeProvider } from '@/components/theme-provider'
 import Header from '@/components/header'
@@ -12,15 +12,18 @@ 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 { MapLoadingProvider } from '@/components/map-loading-context';
-import ConditionalLottie from '@/components/conditional-lottie';
-import { MapProvider } from '@/components/map/map-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 } from '@/components/map/map-context' // ← imported as MapProvider
 import { getSupabaseUserAndSessionOnServer } from '@/lib/auth/get-current-user'
-import { PurchaseCreditsPopup } from '@/components/credits/purchase-credits-popup';
-import { CreditsProvider } from '@/components/credits/credits-provider';
+import { PurchaseCreditsPopup } from '@/components/credits/purchase-credits-popup'
+import { CreditsProvider } from '@/components/credits/credits-provider'
 
-// Force dynamic rendering since we check auth with cookies
+// Force dynamic rendering because we read cookies for auth
 export const dynamic = 'force-dynamic'
 
 const fontSans = FontSans({
@@ -35,8 +38,7 @@ const fontPoppins = Poppins({
 })
 
 const title = ''
-const description =
-  'language to Maps'
+const description = 'language to Maps'
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://www.qcx.world'),
@@ -66,8 +68,7 @@ export default async function RootLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
-  // Check authentication and conditionally render the layout
-  const { user } = await getSupabaseUserAndSessionOnServer();
+  const { user } = await getSupabaseUserAndSessionOnServer()
 
   return (
     <html lang="en" suppressHydrationWarning>
@@ -78,37 +79,37 @@ export default async function RootLayout({
           fontPoppins.variable
         )}
       >
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="earth"
-          enableSystem
-          disableTransitionOnChange
-          themes={['light', 'dark', 'earth']}
-        >
-          {user ? (
-            <CalendarToggleProvider>
-              <MapToggleProvider>
-                <ProfileToggleProvider>
-                  <MapProvider>
-                    <MapLoadingProvider>
-                      <CreditsProvider>
-                      <Header />
-                      <ConditionalLottie />
-                      {children}
-                      <Sidebar />
-                      <PurchaseCreditsPopup />
-                      </CreditsProvider>
-                      <Footer />
-                      <Toaster />
-                    </MapLoadingProvider>
-                  </MapProvider>
-                </ProfileToggleProvider>
-              </MapToggleProvider>
-            </CalendarToggleProvider>
-          ) : (
-            children
-          )}
-        </ThemeProvider>
+        <CalendarToggleProvider>
+          <HistoryToggleProvider>
+            <MapToggleProvider>
+              <ProfileToggleProvider>
+                <UsageToggleProvider>
+                  <ThemeProvider
+                    attribute="class"
+                    defaultTheme="earth"
+                    enableSystem
+                    disableTransitionOnChange
+                    themes={['light', 'dark', 'earth']}
+                  >
+                    {/* Changed MapContextProvider → MapProvider */}
+                    <MapProvider>
+                      <MapLoadingProvider>
+                        <Header />
+                        <ConditionalLottie />
+                        {children}
+                        <Sidebar />
+                        <HistorySidebar />
+                        <Footer />
+                        <Toaster />
+                      </MapLoadingProvider>
+                    </MapProvider>
+                  </ThemeProvider>
+                </UsageToggleProvider>
+              </ProfileToggleProvider>
+            </MapToggleProvider>
+          </HistoryToggleProvider>
+        </CalendarToggleProvider>
+
         <Analytics />
         <SpeedInsights />
       </body>
diff --git a/components/chat.tsx b/components/chat.tsx
index 76fe8753..45c6877e 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -1,5 +1,4 @@
 'use client'
-
 import { useEffect, useState, useRef } from 'react'
 import { usePathname, useRouter } from 'next/navigation'
 import { ChatPanel, ChatPanelRef } from './chat-panel'
@@ -13,13 +12,14 @@ import { CalendarNotepad } from './calendar-notepad'
 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 SettingsView from "@/components/settings/settings-view";
-import { MapDataProvider, useMapData } from './map/map-data-context';
-import { updateDrawingContext, getChat } from '@/lib/actions/chat';
+import { useProfileToggle } 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'
+import { updateDrawingContext, getChat } from '@/lib/actions/chat'
 import { getSupabaseBrowserClient } from '@/lib/supabase/browser-client'
-import { type AIMessage, type Chat as ChatType } from '@/lib/types'
-import { nanoid } from 'nanoid'
+import { type AIMessage, type Chat as ChatType } from '@/lib/types'   // ← this fixes the error
 import { HeaderSearchButton } from './header-search-button'
 
 type ChatProps = {
@@ -32,33 +32,34 @@ export function Chat({ id }: ChatProps) {
   const [messages, setMessages] = useUIState()
   const [aiState] = useAIState()
   const [isMobile, setIsMobile] = useState(false)
-  const { activeView } = useProfileToggle();
+  const { activeView } = useProfileToggle()
+  const { isUsageOpen } = useUsageToggle()
   const { isCalendarOpen } = useCalendarToggle()
   const [input, setInput] = useState('')
   const [showEmptyScreen, setShowEmptyScreen] = useState(false)
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [suggestions, setSuggestions] = useState<PartialRelated | null>(null)
-  const chatPanelRef = useRef<ChatPanelRef>(null);
-  const [onlineUsers, setOnlineUsers] = useState<string[]>([]);
-  const [chatData, setChatData] = useState<ChatType | null>(null);
+  const chatPanelRef = useRef<ChatPanelRef>(null)
+  const [onlineUsers, setOnlineUsers] = useState<string[]>([])
+  const [chatData, setChatData] = useState<ChatType | null>(null)
 
   const handleAttachment = () => {
-    chatPanelRef.current?.handleAttachmentClick();
-  };
+    chatPanelRef.current?.handleAttachmentClick()
+  }
 
   const handleMobileSubmit = () => {
-    chatPanelRef.current?.submitForm();
-  };
-  
+    chatPanelRef.current?.submitForm()
+  }
+
   useEffect(() => {
     async function fetchChatData() {
-        if (id) {
-            const chat = await getChat(id);
-            setChatData(chat);
-        }
+      if (id) {
+        const chat = await getChat(id)
+        setChatData(chat)
+      }
     }
-    fetchChatData();
-  }, [id]);
+    fetchChatData()
+  }, [id])
 
   useEffect(() => {
     setShowEmptyScreen(messages.length === 0)
@@ -85,7 +86,7 @@ export function Chat({ id }: ChatProps) {
     }
   }, [aiState, router])
 
-  const { mapData } = useMapData();
+  const { mapData } = useMapData()
 
   useEffect(() => {
     if (isSubmitting) {
@@ -94,50 +95,49 @@ export function Chat({ id }: ChatProps) {
     }
   }, [isSubmitting])
 
-  // useEffect to call the server action when drawnFeatures changes
   useEffect(() => {
     if (id && mapData.drawnFeatures && mapData.drawnFeatures.length > 0) {
-      console.log('Chat.tsx: drawnFeatures changed, calling updateDrawingContext', mapData.drawnFeatures);
+      console.log('Chat.tsx: drawnFeatures changed, calling updateDrawingContext', mapData.drawnFeatures)
       updateDrawingContext(id, {
         drawnFeatures: mapData.drawnFeatures,
         cameraState: mapData.cameraState,
-      });
+      })
     }
-  }, [id, mapData.drawnFeatures, mapData.cameraState]);
+  }, [id, mapData.drawnFeatures, mapData.cameraState])
 
   useEffect(() => {
-    if (!id) return;
-
-    const supabase = getSupabaseBrowserClient();
-    const channel = supabase.channel(`chat-${id}`);
-
-    const subscription = channel
-      .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages', filter: `chat_id=eq.${id}` },
-      (payload) => {
-        const newMessage = payload.new as AIMessage;
-        setMessages((prevMessages: AIMessage[]) => {
-          if (prevMessages.some((m: AIMessage) => m.id === newMessage.id)) {
-            return prevMessages;
-          }
-          return [...prevMessages, newMessage];
-        });
-      })
+    if (!id) return
+    const supabase = getSupabaseBrowserClient()
+    const channel = supabase.channel(`chat-${id}`)
+    channel
+      .on(
+        'postgres_changes',
+        { event: 'INSERT', schema: 'public', table: 'messages', filter: `chat_id=eq.${id}` },
+        (payload) => {
+          const newMessage = payload.new as AIMessage
+          setMessages((prevMessages: AIMessage[]) => {
+            if (prevMessages.some((m: AIMessage) => m.id === newMessage.id)) {
+              return prevMessages
+            }
+            return [...prevMessages, newMessage]
+          })
+        }
+      )
       .on('presence', { event: 'sync' }, () => {
-        const newState = channel.presenceState();
-        const users = Object.keys(newState).map(key => (newState[key][0] as any).user_id);
-        setOnlineUsers(users);
+        const newState = channel.presenceState()
+        const users = Object.keys(newState).map(key => (newState[key][0] as any).user_id)
+        setOnlineUsers(users)
       })
       .subscribe(async (status) => {
         if (status === 'SUBSCRIBED') {
-          await channel.track({ user_id: 'user-placeholder', online_at: new Date().toISOString() });
+          await channel.track({ user_id: 'user-placeholder', online_at: new Date().toISOString() })
         }
-      });
+      })
 
     return () => {
-      supabase.removeChannel(channel);
-    };
-  }, [id, messages, setMessages]);
-
+      supabase.removeChannel(channel)
+    }
+  }, [id, setMessages]) // removed messages from deps to avoid resubscribe loop
 
   if (isMobile) {
     return (
@@ -145,124 +145,117 @@ export function Chat({ id }: ChatProps) {
         <HeaderSearchButton />
         <div className="mobile-layout-container">
           <div className="mobile-map-section">
-          {activeView ? <SettingsView chatId={id || ''} /> : <MapProvider />}
-        </div>
-        <div className="mobile-icons-bar">
-          <MobileIconsBar onAttachmentClick={handleAttachment} onSubmitClick={handleMobileSubmit} />
-        </div>
-        <div className="mobile-chat-input-area">
-          <ChatPanel 
-            ref={chatPanelRef} 
-            messages={messages} 
-            input={input} 
-            setInput={setInput} 
-            chatId={id || ''} 
-            shareableLink={chatData?.sharePath || ''} 
-            onSuggestionsChange={setSuggestions}
-          />
-        </div>
-        <div className="mobile-chat-messages-area relative">
-          {isCalendarOpen ? (
-            <CalendarNotepad chatId={id} />
-          ) : showEmptyScreen ? (
-            <div className="relative w-full h-full">
-              <div className={cn("transition-all duration-300", suggestions ? "blur-md pointer-events-none" : "")}>
-                <EmptyScreen
-                  submitMessage={message => {
-                    setInput(message)
-                    setIsSubmitting(true)
-                  }}
-                />
-              </div>
-              {suggestions && (
-                <div className="absolute inset-0 z-20 flex flex-col items-start p-4">
-                  <SuggestionsDropdown
-                    suggestions={suggestions}
-                    onSelect={query => {
-                      setInput(query)
-                      setSuggestions(null)
-                      // Use a small timeout to ensure state update before submission
-                      setTimeout(() => {
-                        setIsSubmitting(true)
-                      }, 0)
+            {isUsageOpen ? <UsageView /> : activeView ? <SettingsView /> : <MapProvider />}
+          </div>
+          <div className="mobile-icons-bar">
+            <MobileIconsBar onAttachmentClick={handleAttachment} onSubmitClick={handleMobileSubmit} />
+          </div>
+          <div className="mobile-chat-input-area">
+            <ChatPanel
+              ref={chatPanelRef}
+              messages={messages}
+              input={input}
+              setInput={setInput}
+              chatId={id || ''}
+              shareableLink={chatData?.sharePath || ''}
+              onSuggestionsChange={setSuggestions}
+            />
+          </div>
+          <div className="mobile-chat-messages-area relative">
+            {isCalendarOpen ? (
+              <CalendarNotepad chatId={id} />
+            ) : showEmptyScreen ? (
+              <div className="relative w-full h-full">
+                <div className={cn("transition-all duration-300", suggestions ? "blur-md pointer-events-none" : "")}>
+                  <EmptyScreen
+                    submitMessage={message => {
+                      setInput(message)
+                      setIsSubmitting(true)
                     }}
-                    onClose={() => setSuggestions(null)}
-                    className="relative bottom-auto mb-0 w-full shadow-none border-none bg-transparent"
                   />
                 </div>
-              )}
-            </div>
-          ) : (
-            <ChatMessages messages={messages} />
-          )}
-        </div>
+                {suggestions && (
+                  <div className="absolute inset-0 z-20 flex flex-col items-start p-4">
+                    <SuggestionsDropdown
+                      suggestions={suggestions}
+                      onSelect={query => {
+                        setInput(query)
+                        setSuggestions(null)
+                        setTimeout(() => setIsSubmitting(true), 0)
+                      }}
+                      onClose={() => setSuggestions(null)}
+                      className="relative bottom-auto mb-0 w-full shadow-none border-none bg-transparent"
+                    />
+                  </div>
+                )}
+              </div>
+            ) : (
+              <ChatMessages messages={messages} />
+            )}
+          </div>
         </div>
       </MapDataProvider>
-    );
+    )
   }
 
   return (
     <MapDataProvider>
       <HeaderSearchButton />
       <div className="flex justify-start items-start">
-        {/* This is the new div for scrolling */}
         <div className="w-1/2 flex flex-col space-y-3 md:space-y-4 px-8 sm:px-12 pt-16 md:pt-20 pb-4 h-[calc(100vh-0.5in)] overflow-y-auto">
-        {isCalendarOpen ? (
-          <CalendarNotepad chatId={id} />
-        ) : (
-          <>
-            <ChatPanel 
-              ref={chatPanelRef}
-              messages={messages} 
-              input={input} 
-              setInput={setInput} 
-              chatId={id || ''} 
-              shareableLink={chatData?.sharePath || ''} 
-              onSuggestionsChange={setSuggestions}
-            />
-            <div className="relative">
-              {showEmptyScreen ? (
-                <>
-                  <div className={cn("transition-all duration-300", suggestions ? "blur-md pointer-events-none" : "")}>
-                    <EmptyScreen
-                      submitMessage={message => {
-                        setInput(message)
-                        setIsSubmitting(true)
-                      }}
-                    />
-                  </div>
-                  {suggestions && (
-                    <div className="absolute inset-0 z-20 flex flex-col items-start p-4">
-                      <SuggestionsDropdown
-                        suggestions={suggestions}
-                        onSelect={query => {
-                          setInput(query)
-                          setSuggestions(null)
-                          // Use a small timeout to ensure state update before submission
-                          setTimeout(() => {
-                            setIsSubmitting(true)
-                          }, 0)
+          {isCalendarOpen ? (
+            <CalendarNotepad chatId={id} />
+          ) : (
+            <>
+              <ChatPanel
+                ref={chatPanelRef}
+                messages={messages}
+                input={input}
+                setInput={setInput}
+                chatId={id || ''}
+                shareableLink={chatData?.sharePath || ''}
+                onSuggestionsChange={setSuggestions}
+              />
+              <div className="relative">
+                {showEmptyScreen ? (
+                  <>
+                    <div className={cn("transition-all duration-300", suggestions ? "blur-md pointer-events-none" : "")}>
+                      <EmptyScreen
+                        submitMessage={message => {
+                          setInput(message)
+                          setIsSubmitting(true)
                         }}
-                        onClose={() => setSuggestions(null)}
-                        className="relative bottom-auto mb-0 w-full shadow-none border-none bg-transparent"
                       />
                     </div>
-                  )}
-                </>
-              ) : (
-                <ChatMessages messages={messages} />
-              )}
-            </div>
-          </>
-        )}
-      </div>
+                    {suggestions && (
+                      <div className="absolute inset-0 z-20 flex flex-col items-start p-4">
+                        <SuggestionsDropdown
+                          suggestions={suggestions}
+                          onSelect={query => {
+                            setInput(query)
+                            setSuggestions(null)
+                            setTimeout(() => setIsSubmitting(true), 0)
+                          }}
+                          onClose={() => setSuggestions(null)}
+                          className="relative bottom-auto mb-0 w-full shadow-none border-none bg-transparent"
+                        />
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <ChatMessages messages={messages} />
+                )}
+              </div>
+            </>
+          )}
+        </div>
         <div
           className="w-1/2 p-4 fixed h-[calc(100vh-0.5in)] top-0 right-0 mt-[0.5in]"
           style={{ zIndex: 10 }}
         >
-          {activeView ? <SettingsView chatId={id || ''} /> : <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 3561d17d..554e8264 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -15,17 +15,36 @@ import {
 } from 'lucide-react'
 import { MapToggle } from './map-toggle'
 import { ProfileToggle } from './profile-toggle'
-import { UsageSidebar } from './usage-sidebar'
-import { useState } from 'react'
+import { PurchaseCreditsPopup } from './purchase-credits-popup'
+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 [isUsageOpen, setIsUsageOpen] = useState(false)
+  const [isPurchaseOpen, setIsPurchaseOpen] = 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
+    setIsPurchaseOpen(true)
+  }, [])
 
   return (
     <>
-      <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">
+      <PurchaseCreditsPopup isOpen={isPurchaseOpen} onClose={() => setIsPurchaseOpen(false)} />
+    <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>
@@ -33,22 +52,18 @@ export const Header = () => {
       </div>
       
       <div className="absolute left-1 flex items-center">
-        <History location="header">
-          <button className="flex items-center cursor-pointer group outline-none">
-            <div className="p-2 group-hover:bg-accent rounded-md transition-colors">
-              <Image
-                src="/images/logo.svg"
-                alt="Logo"
-                width={20}
-                height={20}
-                className="h-5 w-auto"
-              />
-            </div>
-            <h1 className="text-2xl font-poppins font-semibold text-primary group-hover:text-primary/80 transition-colors ml-1">
-              QCX
-            </h1>
-          </button>
-        </History>
+        <Button variant="ghost" size="icon" onClick={toggleHistory} data-testid="logo-history-toggle">
+          <Image
+            src="/images/logo.svg"
+            alt="Logo"
+            width={20}
+            height={20}
+            className="h-5 w-auto"
+          />
+        </Button>
+        <h1 className="text-2xl font-poppins font-semibold text-primary">
+          QCX
+        </h1>
       </div>
       
       <div className="w-1/2 gap-20 hidden md:flex justify-between px-10 items-center z-10">
@@ -63,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>
         
@@ -73,7 +88,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/>
@@ -83,4 +98,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 855380f1..2240a824 100644
--- a/components/history.tsx
+++ b/components/history.tsx
@@ -1,57 +1,29 @@
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger
-} from '@/components/ui/sheet'
+'use client'
+
 import { Button } from '@/components/ui/button'
 import { Sprout, 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 { CreditsDisplay } from './credits/credits-display'
+import { useHistoryToggle } from './history-toggle-context'
 
 type HistoryProps = {
   location: 'sidebar' | 'header'
   children?: React.ReactNode
 }
 
-export function History({ location, children }: HistoryProps) {
+export function History({ location }: HistoryProps) {
+  const { toggleHistory } = useHistoryToggle()
+
   return (
-    <Sheet>
-      <SheetTrigger asChild>
-        {children ? (
-          children
-        ) : (
-          <Button
-            variant="ghost"
-            size="icon"
-            className={cn({
-              'rounded-full text-foreground/30': location === 'sidebar'
-            })}
-            data-testid="history-button"
-          >
-            {location === 'header' ? <Menu /> : <Sprout size={16} />}
-          </Button>
-        )}
-      </SheetTrigger>
-      <SheetContent side="left" className="w-64 rounded-tr-xl rounded-br-xl" data-testid="history-panel">
-        <CreditsDisplay className="mb-4 mt-4" />
-        <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
new file mode 100644
index 00000000..7c24e748
--- /dev/null
+++ b/components/purchase-credits-popup.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { CreditCard, Zap, Check } from 'lucide-react';
+
+interface PurchaseCreditsPopupProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function PurchaseCreditsPopup({ isOpen, onClose }: PurchaseCreditsPopupProps) {
+  const handlePurchase = () => {
+    window.open('https://buy.stripe.com/3cIaEX3tRcur9EM7tbasg00', '_blank');
+    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]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Zap className="text-yellow-500" />
+            Upgrade Your Plan
+          </DialogTitle>
+          <DialogDescription>
+            You&apos;ve reached your credit limit. Upgrade now to continue using all features seamlessly.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <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="font-bold">$500/year</p>
+            </div>
+            <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>
+          <Button variant="outline" onClick={onClose}>Later</Button>
+          <Button onClick={handlePurchase} className="gap-2">
+            <CreditCard size={16} />
+            Pay Now
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/components/sidebar/chat-history-client.tsx b/components/sidebar/chat-history-client.tsx
index e45a3ba9..381fe7d5 100644
--- a/components/sidebar/chat-history-client.tsx
+++ b/components/sidebar/chat-history-client.tsx
@@ -115,6 +115,34 @@ export function ChatHistoryClient({}: ChatHistoryClientProps) {
 
   return (
     <div className="flex flex-col flex-1 space-y-3 h-full">
+      <div className="px-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="w-full flex items-center justify-between text-muted-foreground hover:text-foreground"
+          onClick={() => setIsCreditsVisible(!isCreditsVisible)}
+        >
+          <div className="flex items-center gap-2">
+            <Zap size={14} className="text-yellow-500" />
+            <span className="text-xs font-medium">Credits Preview</span>
+          </div>
+          {isCreditsVisible ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+        </Button>
+        
+        {isCreditsVisible && (
+          <div className="mt-2 p-3 rounded-lg bg-muted/50 border border-border/50 space-y-2">
+            <div className="flex justify-between items-center text-xs">
+              <span>Available Credits</span>
+              <span className="font-bold">0</span>
+            </div>
+            <div className="w-full bg-secondary h-1.5 rounded-full overflow-hidden">
+              <div className="bg-yellow-500 h-full w-[0%]" />
+            </div>
+            <p className="text-[10px] text-muted-foreground">Upgrade to get more credits</p>
+          </div>
+        )}
+      </div>
+
       <div className="flex flex-col gap-2 flex-1 overflow-y-auto">
         {!chats?.length ? (
           <div className="text-foreground/30 text-sm text-center py-4">
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>
+  )
+}
