diff --git a/CC BY-NC 4.0.docx b/CC BY-NC 4.0.docx
new file mode 100644
index 00000000..0d8f7d55
Binary files /dev/null and b/CC BY-NC 4.0.docx differ
diff --git a/LICENSE b/LICENSE
index 8a29bc5a..3d85d05f 100644
--- a/LICENSE
+++ b/LICENSE
@@ -186,7 +186,7 @@ APPENDIX: How to apply the Apache License to your work.
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-Copyright 2024 Yoshiki Miura
+Copyright 2025 Eric Ngoiya
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
diff --git a/app/actions.tsx b/app/actions.tsx
index 9e0ee20a..fd19373d 100644
--- a/app/actions.tsx
+++ b/app/actions.tsx
@@ -93,7 +93,14 @@ async function submit(formData?: FormData, skip?: boolean) {
     // Create a streamable value for the summary.
     const summaryStream = createStreamableValue<string>('');
 
-    async function processResolutionSearch() {
+    // Immediately append the BotMessage component to the UI stream.
+    uiStream.append(
+      <Section title="response">
+        <BotMessage content={summaryStream.value} />
+      </Section>
+    );
+
+    (async () => {
       try {
         // Call the simplified agent, which now returns a stream.
         const streamResult = await resolutionSearch(messages, timezone, drawnFeatures);
@@ -109,7 +116,7 @@ async function submit(formData?: FormData, skip?: boolean) {
         const analysisResult = await streamResult.object;
 
         // Mark the summary stream as done with the result.
-        summaryStream.done(analysisResult.summary || 'Analysis complete.');
+        summaryStream.done(analysisResult.summary || fullSummary || 'Analysis complete.');
 
         messages.push({ role: 'assistant', content: analysisResult.summary || 'Analysis complete.' });
 
@@ -171,17 +178,7 @@ async function submit(formData?: FormData, skip?: boolean) {
         isGenerating.done(false);
         uiStream.done();
       }
-    }
-
-    // Start the background process without awaiting it.
-    processResolutionSearch();
-
-    // Immediately update the UI stream with the BotMessage component.
-    uiStream.update(
-      <Section title="response">
-        <BotMessage content={summaryStream.value} />
-      </Section>
-    );
+    })();
 
     return {
       id: nanoid(),
diff --git a/app/globals.css b/app/globals.css
index 22f95cba..4fcbde34 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -189,7 +189,7 @@
 
   .mobile-chat-input-area {
     height: auto;
-    padding: 10px;
+    padding: 4px 10px;
     background-color: hsl(var(--background));
     /* border-top: 1px solid hsl(var(--border)); */ /* Removed for cleaner separation */
     border-bottom: 1px solid hsl(var(--border)); /* Added for separation from messages area below */
@@ -198,62 +198,6 @@
     display: flex;
     align-items: center;
   }
-
-  .mobile-chat-input {
-    /* position: relative; */ /* No longer fixed to bottom */
-    /* bottom: 0; */
-    /* left: 0; */ /* Handled by parent flex */
-    /* right: 0; */ /* Handled by parent flex */
-    width: 100%; /* Ensure it takes full width of its container */
-    padding: 10px;
-    background-color: hsl(var(--background));
-    /* border-top: 1px solid hsl(var(--border)); */ /* Removed to avoid double border */
-    /* z-index: 30; */ /* No longer needed */
-  }
-
-  .mobile-chat-input input {
-    width: 100%;
-    padding: 8px;
-    border: 1px solid hsl(var(--input));
-    border-radius: var(--radius);
-    background-color: hsl(var(--input));
-    color: hsl(var(--foreground));
-    box-sizing: border-box;
-  }
-
-  .mobile-icons-bar-content .icon-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: hsl(var(--secondary));
-    color: hsl(var(--secondary-foreground));
-    cursor: pointer;
-  }
-
-  .mobile-icons-bar-content .icon-button:hover {
-    background-color: hsl(var(--secondary-foreground));
-    color: hsl(var(--secondary));
-  }
-
-  .mobile-chat-input .icon-button {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-  }
-
-  .mobile-chat-input .icon-button.paperclip {
-    right: 40px;
-  }
-
-  .mobile-chat-input .icon-button.arrow-right {
-    right: 10px;
-  }
 }
 
 /* Added for MapboxDraw controls */
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-panel.tsx b/components/chat-panel.tsx
index c45844d3..bc87c0de 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -153,7 +153,7 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
         }
       }, 500) // 500ms debounce delay
     },
-    [mapData]
+    [mapData, setSuggestions]
   )
 
   useEffect(() => {
@@ -199,13 +199,12 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
         onSubmit={handleSubmit}
         className={cn(
           'max-w-full w-full',
-          isMobile ? 'px-2 pb-2 pt-1 h-full flex flex-col justify-center' : ''
+          isMobile ? 'px-2 pb-1 pt-0 h-full flex flex-col justify-center' : ''
         )}
       >
         <div
           className={cn(
-            'relative flex items-start w-full',
-            isMobile && 'mobile-chat-input' // Apply mobile chat input styling
+            'relative flex items-start w-full'
           )}
         >
           <input type="hidden" name="mapProvider" value={mapProvider} />
@@ -241,10 +240,10 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
             value={input}
             data-testid="chat-input"
             className={cn(
-              'resize-none w-full min-h-12 rounded-fill border border-input pl-14 pr-12 pt-3 pb-1 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+              'resize-none w-full rounded-fill border border-input pr-12 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
               isMobile
-                ? 'mobile-chat-input input bg-background'
-                : 'bg-muted'
+                ? 'bg-background min-h-10 pl-4 pt-2 pb-1'
+                : 'bg-muted min-h-12 pl-14 pt-3 pb-1'
             )}
             onChange={e => {
               setInput(e.target.value)
@@ -293,11 +292,11 @@ export const ChatPanel = forwardRef<ChatPanelRef, ChatPanelProps>(({ messages, i
       </form>
       {selectedFile && (
         <div className="w-full px-4 pb-2 mb-2">
-          <div className="flex items-center justify-between p-2 bg-muted rounded-lg">
-            <span className="text-sm text-muted-foreground truncate max-w-xs">
+          <div className="flex items-start justify-between p-2 bg-muted rounded-lg">
+            <span className="text-sm text-muted-foreground break-all mr-2">
               {selectedFile.name}
             </span>
-            <Button variant="ghost" size="icon" onClick={clearAttachment} data-testid="clear-attachment-button">
+            <Button variant="ghost" size="icon" className="shrink-0" onClick={clearAttachment} data-testid="clear-attachment-button">
               <X size={16} />
             </Button>
           </div>
diff --git a/components/chat.tsx b/components/chat.tsx
index 04e27ac6..ef47a124 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 />}
+          {activeView ? <SettingsView /> : isUsageOpen ? <UsageView /> : <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 />}
+          {activeView ? <SettingsView /> : isUsageOpen ? <UsageView /> : <MapProvider />}
         </div>
       </div>
     </MapDataProvider>
diff --git a/components/conditional-lottie.tsx b/components/conditional-lottie.tsx
index 55ca35d5..cdcd655e 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} />;
+  return <LottiePlayer isVisible={!isMapLoaded && activeView === null && !isUsageOpen} />;
 };
 
 export default ConditionalLottie;
diff --git a/components/empty-screen.tsx b/components/empty-screen.tsx
index 2c0f63e4..ad36d7d3 100644
--- a/components/empty-screen.tsx
+++ b/components/empty-screen.tsx
@@ -41,14 +41,14 @@ export function EmptyScreen({
               <Button
                 key={item.message} // Use a unique property as the key.
                 variant="link"
-                className="h-auto p-0 text-base flex items-center"
+                className="h-auto p-0 text-base flex items-start whitespace-normal text-left"
                 name={item.message}
                 onClick={async () => {
                   submitMessage(item.message);
                 }}
               >
-                <Icon size={16} className="mr-2 text-muted-foreground" />
-                {item.heading}
+                <Icon size={16} className="mr-2 mt-1 text-muted-foreground shrink-0" />
+                <span className="flex-1">{item.heading}</span>
               </Button>
             );
           })}
diff --git a/components/header-search-button.tsx b/components/header-search-button.tsx
index 92cb1c65..f03a405c 100644
--- a/components/header-search-button.tsx
+++ b/components/header-search-button.tsx
@@ -9,7 +9,7 @@ import { useActions, useUIState } from 'ai/rsc'
 import { AI } from '@/app/actions'
 import { nanoid } from 'nanoid'
 import { UserMessage } from './user-message'
-import { toast } from 'react-toastify'
+import { toast } from 'sonner'
 import { useSettingsStore } from '@/lib/store/settings'
 import { useMapData } from './map/map-data-context'
 
@@ -37,7 +37,11 @@ export function HeaderSearchButton() {
 
   const handleResolutionSearch = async () => {
     if (mapProvider === 'mapbox' && !map) {
-      toast.error('Map is not available yet. Please wait for it to load.')
+      toast.error('Mapbox is not available yet. Please wait for it to load.')
+      return
+    }
+    if (mapProvider === 'google' && !mapData.cameraState) {
+      toast.error('Google Maps state is not available yet.')
       return
     }
     if (!actions) {
@@ -73,7 +77,7 @@ export function HeaderSearchButton() {
         const { center, range } = mapData.cameraState
         const zoom = Math.round(Math.log2(40000000 / (range || 1)));
 
-        let staticMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${center.lat},${center.lng}&zoom=${zoom}&size=640x480&maptype=satellite&key=${apiKey}`;
+        let staticMapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${center.lat},${center.lng}&zoom=${zoom}&size=640x480&scale=2&maptype=satellite&key=${apiKey}`;
 
         const response = await fetch(staticMapUrl);
         if (!response.ok) {
@@ -107,7 +111,7 @@ export function HeaderSearchButton() {
       variant="ghost"
       size="icon"
       onClick={handleResolutionSearch}
-      disabled={isAnalyzing || !map || !actions}
+      disabled={isAnalyzing || !actions || (mapProvider === 'mapbox' && !map) || (mapProvider === 'google' && !mapData.cameraState)}
       title="Analyze current map view"
     >
       {isAnalyzing ? (
@@ -119,9 +123,8 @@ export function HeaderSearchButton() {
   )
 
   const mobileButton = (
-    <Button variant="ghost" size="sm" onClick={handleResolutionSearch} disabled={isAnalyzing || !map || !actions}>
-      <Search className="h-4 w-4 mr-2" />
-      Search
+    <Button variant="ghost" size="icon" onClick={handleResolutionSearch} disabled={isAnalyzing || !actions || (mapProvider === 'mapbox' && !map) || (mapProvider === 'google' && !mapData.cameraState)}>
+      <Search className="h-[1.2rem] w-[1.2rem]" />
     </Button>
   )
 
diff --git a/components/header.tsx b/components/header.tsx
index 644ba8c0..fd80bc44 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -15,11 +15,36 @@ import {
 } from 'lucide-react'
 import { MapToggle } from './map-toggle'
 import { ProfileToggle } from './profile-toggle'
+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 [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 (
-    <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>
@@ -27,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"
@@ -41,9 +66,8 @@ export const Header = () => {
         </h1>
       </div>
       
-      <div className="w-1/2 gap-20 hidden md:flex justify-between px-10 items-center z-10">
-        
-          <ProfileToggle/>
+      <div className="flex-1 hidden md:flex justify-center gap-10 items-center z-10">
+        <ProfileToggle/>
         
         <MapToggle />
         
@@ -51,13 +75,11 @@ export const Header = () => {
           <CalendarDays className="h-[1.2rem] w-[1.2rem]" />
         </Button>
         
-        <div id="header-search-portal" />
+        <div id="header-search-portal" className="contents" />
         
-        <a href="https://buy.stripe.com/3cIaEX3tRcur9EM7tbasg00" target="_blank" rel="noopener noreferrer">
-          <Button variant="ghost" size="icon">
-            <TentTree className="h-[1.2rem] w-[1.2rem]" />
-          </Button>
-        </a>
+        <Button variant="ghost" size="icon" onClick={handleUsageToggle}>
+          <TentTree className="h-[1.2rem] w-[1.2rem]" />
+        </Button>
         
         <ModeToggle />
         
@@ -67,15 +89,14 @@ export const Header = () => {
       {/* Mobile menu buttons */}
       <div className="flex md:hidden gap-2">
         
-        <a href="https://buy.stripe.com/3cIaEX3tRcur9EM7tbasg00" target="_blank" rel="noopener noreferrer">
-          <Button variant="ghost" size="icon">
-            <TentTree className="h-[1.2rem] w-[1.2rem]" />
-          </Button>
-        </a>
+        <Button variant="ghost" size="icon" onClick={handleUsageToggle}>
+          <TentTree className="h-[1.2rem] w-[1.2rem]" />
+        </Button>
         <ProfileToggle/>
       </div>
     </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..5bae1a39 100644
--- a/components/history.tsx
+++ b/components/history.tsx
@@ -1,50 +1,26 @@
-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/message.tsx b/components/message.tsx
index 264aa1f6..d3a084b7 100644
--- a/components/message.tsx
+++ b/components/message.tsx
@@ -18,7 +18,7 @@ export function BotMessage({ content }: { content: StreamableValue<string> }) {
   const processedData = preprocessLaTeX(data || '')
 
   return (
-    <div className="overflow-x-auto">
+    <div className="overflow-x-auto whitespace-normal break-words">
       <MemoizedReactMarkdown
         rehypePlugins={[[rehypeExternalLinks, { target: '_blank' }], rehypeKatex]}
         remarkPlugins={[remarkGfm, remarkMath]}
diff --git a/components/mobile-icons-bar.tsx b/components/mobile-icons-bar.tsx
index bde08487..28ec908b 100644
--- a/components/mobile-icons-bar.tsx
+++ b/components/mobile-icons-bar.tsx
@@ -45,10 +45,8 @@ export const MobileIconsBar: React.FC<MobileIconsBarProps> = ({ onAttachmentClic
       <Button variant="ghost" size="icon" onClick={toggleCalendar} title="Open Calendar" data-testid="mobile-calendar-button">
         <CalendarDays className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
       </Button>
-      <Button variant="ghost" size="icon" data-testid="mobile-search-button">
-        <Search className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
-      </Button>
-      <a href="https://buy.stripe.com/3cIaEX3tRcur9EM7tbasg00" target="_blank" rel="noopener noreferrer">
+      <div id="mobile-header-search-portal" />
+      <a href="https://buy.stripe.com/14A3cv7K72TR3go14Nasg02" target="_blank" rel="noopener noreferrer">
         <Button variant="ghost" size="icon">
           <TentTree className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
         </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..b3fcd8f2
--- /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/14A3cv7K72TR3go14Nasg02', '_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/search-related.tsx b/components/search-related.tsx
index d4a58b08..a9c8c69b 100644
--- a/components/search-related.tsx
+++ b/components/search-related.tsx
@@ -64,7 +64,7 @@ export const SearchRelated: React.FC<SearchRelatedProps> = ({
             <ArrowRight className="h-4 w-4 mr-2 mt-1 flex-shrink-0 text-accent-foreground/50" />
             <Button
               variant="link"
-              className="flex-1 justify-start px-0 py-1 h-fit font-semibold text-accent-foreground/50 whitespace-normal text-left"
+              className="flex-1 justify-start px-0 py-1 h-fit font-semibold text-accent-foreground/50 whitespace-normal text-left break-words"
               type="submit"
               name={'related_query'}
               value={item?.query}
diff --git a/components/sidebar/chat-history-client.tsx b/components/sidebar/chat-history-client.tsx
index 9190dea7..22a951cc 100644
--- a/components/sidebar/chat-history-client.tsx
+++ b/components/sidebar/chat-history-client.tsx
@@ -18,6 +18,8 @@ import {
 } from '@/components/ui/alert-dialog';
 import { toast } from 'sonner';
 import { Spinner } from '@/components/ui/spinner';
+import { Zap, ChevronDown, ChevronUp } from 'lucide-react';
+import { useHistoryToggle } from '../history-toggle-context';
 import HistoryItem from '@/components/history-item'; // Adjust path if HistoryItem is moved or renamed
 import type { Chat as DrizzleChat } from '@/lib/actions/chat-db'; // Use the Drizzle-based Chat type
 
@@ -31,6 +33,8 @@ export function ChatHistoryClient({}: ChatHistoryClientProps) {
   const [error, setError] = useState<string | null>(null);
   const [isClearPending, startClearTransition] = useTransition();
   const [isAlertDialogOpen, setIsAlertDialogOpen] = useState(false);
+  const [isCreditsVisible, setIsCreditsVisible] = useState(false);
+  const { isHistoryOpen } = useHistoryToggle();
   const router = useRouter();
 
   useEffect(() => {
@@ -58,8 +62,11 @@ export function ChatHistoryClient({}: ChatHistoryClientProps) {
         setIsLoading(false);
       }
     }
-    fetchChats();
-  }, []);
+
+    if (isHistoryOpen) {
+      fetchChats();
+    }
+  }, [isHistoryOpen]);
 
   const handleClearHistory = async () => {
     startClearTransition(async () => {
@@ -113,6 +120,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/suggestions-dropdown.tsx b/components/suggestions-dropdown.tsx
index 33be6e48..642911bb 100644
--- a/components/suggestions-dropdown.tsx
+++ b/components/suggestions-dropdown.tsx
@@ -99,14 +99,14 @@ export const SuggestionsDropdown: React.FC<SuggestionsDropdownProps> = ({
               key={index}
               variant="ghost"
               className={cn(
-                'w-full justify-start px-2 py-1 h-fit font-normal text-accent-foreground whitespace-normal text-left',
+                'w-full justify-start px-2 py-1 h-fit font-normal text-accent-foreground whitespace-normal text-left break-words items-start',
                 selectedIndex === index && 'bg-accent'
               )}
               onClick={() => onSelect(item.query!)}
               onMouseEnter={() => setSelectedIndex(index)}
             >
-              <ArrowRight className="h-4 w-4 mr-2 flex-shrink-0" />
-              {item.query}
+              <ArrowRight className="h-4 w-4 mr-2 mt-1 flex-shrink-0" />
+              <span>{item.query}</span>
             </Button>
           )
         })}
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..e36a6fe1
--- /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/14A3cv7K72TR3go14Nasg02', '_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>
+  )
+}
diff --git a/lib/agents/resolution-search.tsx b/lib/agents/resolution-search.tsx
index 1acd0e01..44ac6c38 100644
--- a/lib/agents/resolution-search.tsx
+++ b/lib/agents/resolution-search.tsx
@@ -59,6 +59,8 @@ Your analysis should be comprehensive and include the following components:
 Your analysis should be based solely on the visual information in the image and your general knowledge. Do not attempt to access external websites or perform web searches.
 
 Analyze the user's prompt and the image to provide a holistic understanding of the location.
+
+IMPORTANT: Your response must be a single JSON object matching the requested schema. Ensure the 'summary' field is populated with a comprehensive analysis.
 `;
 
   const filteredMessages = messages.filter(msg => msg.role !== 'system');
diff --git a/lib/utils/index.ts b/lib/utils/index.ts
index 64e8a305..6ff0056b 100644
--- a/lib/utils/index.ts
+++ b/lib/utils/index.ts
@@ -18,8 +18,7 @@ export function generateUUID(): string {
 }
 
 export async function getModel(requireVision: boolean = false) {
-  const selectedModel = await getSelectedModel();
-
+  const specificModel = process.env.SPECIFIC_API_MODEL;
   const xaiApiKey = process.env.XAI_API_KEY;
   const gemini3ProApiKey = process.env.GEMINI_3_PRO_API_KEY;
   const awsAccessKeyId = process.env.AWS_ACCESS_KEY_ID;
@@ -28,6 +27,28 @@ export async function getModel(requireVision: boolean = false) {
   const bedrockModelId = process.env.BEDROCK_MODEL_ID || 'anthropic.claude-3-5-sonnet-20241022-v2:0';
   const openaiApiKey = process.env.OPENAI_API_KEY;
 
+  if (specificModel) {
+    if (specificModel.includes('grok')) {
+      const xai = createXai({
+        apiKey: xaiApiKey,
+        baseURL: 'https://api.x.ai/v1',
+      });
+      return xai(specificModel);
+    }
+    if (specificModel.includes('gemini')) {
+      const google = createGoogleGenerativeAI({
+        apiKey: gemini3ProApiKey,
+      });
+      return google(specificModel);
+    }
+    const openai = createOpenAI({
+      apiKey: openaiApiKey,
+    });
+    return openai(specificModel);
+  }
+
+  const selectedModel = await getSelectedModel();
+
   if (selectedModel) {
     switch (selectedModel) {
       case 'Grok 4.2':
@@ -37,7 +58,7 @@ export async function getModel(requireVision: boolean = false) {
             baseURL: 'https://api.x.ai/v1',
           });
           try {
-            return xai('grok-4-fast-non-reasoning');
+            return xai(requireVision ? 'grok-vision-beta' : 'grok-4-fast-non-reasoning');
           } catch (error) {
             console.error('Selected model "Grok 4.2" is configured but failed to initialize.', error);
             throw new Error('Failed to initialize selected model.');
@@ -52,7 +73,7 @@ export async function getModel(requireVision: boolean = false) {
             apiKey: gemini3ProApiKey,
           });
           try {
-            return google('gemini-3-pro-preview');
+            return google(requireVision ? 'gemini-1.5-pro' : 'gemini-3-pro-preview');
           } catch (error) {
             console.error('Selected model "Gemini 3" is configured but failed to initialize.', error);
             throw new Error('Failed to initialize selected model.');
@@ -81,7 +102,7 @@ export async function getModel(requireVision: boolean = false) {
       baseURL: 'https://api.x.ai/v1',
     });
     try {
-      return xai('grok-4-fast-non-reasoning');
+      return xai(requireVision ? 'grok-vision-beta' : 'grok-4-fast-non-reasoning');
     } catch (error) {
       console.warn('xAI API unavailable, falling back to next provider:');
     }
@@ -92,7 +113,7 @@ export async function getModel(requireVision: boolean = false) {
       apiKey: gemini3ProApiKey,
     });
     try {
-      return google('gemini-3-pro-preview');
+      return google(requireVision ? 'gemini-1.5-pro' : 'gemini-3-pro-preview');
     } catch (error) {
       console.warn('Gemini 3 Pro API unavailable, falling back to next provider:', error);
     }