diff --git a/web/components/Filtre.tsx b/web/components/Filtre.tsx
index 85aeea8..a711593 100644
--- a/web/components/Filtre.tsx
+++ b/web/components/Filtre.tsx
@@ -3,7 +3,16 @@ import { navigate, url } from '../lib/router.tsx'
 
 type FilterRow = { idx: number; key: string; op: string; value: string }
 
-const filterOperators = ['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'like'] as const
+const filterOperators = [
+  'eq',
+  'neq',
+  'gt',
+  'gte',
+  'lt',
+  'lte',
+  'like',
+  'ilike',
+] as const
 
 export function parseFilters(prefix: string): FilterRow[] {
   const data = url.getAll(`f${prefix}`)
@@ -28,7 +37,10 @@ function setFilters(prefix: string, rows: FilterRow[]) {
     const v = rows[i]
     next.push([v.key, v.op, v.value].join(','))
   }
-  navigate({ params: { [`f${prefix}`]: next }, replace: true })
+  navigate({
+    params: { [`f${prefix}`]: next, [`${prefix}page`]: null },
+    replace: true,
+  })
 }
 
 function addFilter(prefix: string) {
@@ -115,12 +127,17 @@ export const FilterMenu = (
   const rows = parseFilters(prefix)
 
   return (
-    <details class='dropdown dropdown-end'>
-      <summary class='btn btn-outline btn-sm'>
+    <div class='dropdown dropdown-end'>
+      <button
+        type='button'
+        class='btn btn-outline btn-sm'
+        popovertarget='popover-1'
+        style='anchor-name:--anchor-1'
+      >
         <Filter class='h-4 w-4' />
         Filters
-      </summary>
-      <div class='dropdown-content z-10 w-110 mt-2'>
+      </button>
+      <div class='dropdown-content w-110 mt-2'>
         <div class='bg-base-100 rounded-box shadow border border-base-300 p-3 space-y-3'>
           <div class='space-y-2 max-h-72 overflow-y-auto pr-1'>
             {rows.map((r) => (
@@ -185,7 +202,7 @@ export const FilterMenu = (
           </button>
         </div>
       </div>
-    </details>
+    </div>
   )
 }
 
@@ -196,12 +213,17 @@ export const SortMenu = ({ tag, sortKeyOptions }: {
   const prefix = tag === 'tables' ? 't' : 'l'
   const rows = parseSort(prefix)
   return (
-    <details class='dropdown dropdown-end'>
-      <summary class='btn btn-outline btn-sm'>
+    <div class='dropdown dropdown-end'>
+      <button
+        type='button'
+        class='btn btn-outline btn-sm'
+        popovertarget='popover-1'
+        style='anchor-name:--anchor-1'
+      >
         <ArrowUpDown class='h-4 w-4' />
         Sort
-      </summary>
-      <div class='dropdown-content z-10 w-80 mt-2'>
+      </button>
+      <div class='dropdown-content w-80 mt-2'>
         <div class='bg-base-100 rounded-box shadow border border-base-300 p-3 space-y-3'>
           <div class='space-y-2 max-h-60 overflow-y-auto pr-1'>
             {rows.map((r) => (
@@ -253,6 +275,6 @@ export const SortMenu = ({ tag, sortKeyOptions }: {
           </button>
         </div>
       </div>
-    </details>
+    </div>
   )
 }
diff --git a/web/components/QueryHistory.tsx b/web/components/QueryHistory.tsx
new file mode 100644
index 0000000..04e4f67
--- /dev/null
+++ b/web/components/QueryHistory.tsx
@@ -0,0 +1,112 @@
+import { ChevronRight, Clock, Play, Search, Trash2 } from 'lucide-preact'
+import { A, navigate, url } from '../lib/router.tsx'
+import { onRun, queriesHistory } from '../pages/DeploymentPage.tsx'
+
+export type QueryHistoryItem = {
+  query: string
+  timestamp: string
+  columns?: number
+  rows?: number
+}
+
+const deleteQuery = (hash: string) => {
+  const updatedHistory = { ...queriesHistory.value }
+  delete updatedHistory[hash]
+  queriesHistory.value = updatedHistory
+}
+
+export const QueryHistory = () => {
+  const filteredHistory = Object.entries(queriesHistory.value).sort((a, b) =>
+    new Date(b[1].timestamp).getTime() - new Date(a[1].timestamp).getTime()
+  ).filter(([_, item]) => {
+    const qh = url.params.qh?.toLowerCase() || ''
+    return item.query.toLowerCase().includes(qh)
+  })
+
+  return (
+    <div class='flex flex-col h-full'>
+      <div class='p-4 border-b border-base-300'>
+        <h2 class='text-lg font-semibold'>Query History</h2>
+        <div class='flex items-center justify-between mt-4 gap-2'>
+          <label class='input input-sm min-w-0 w-full sm:w-64'>
+            <Search class='opacity-50' />
+            <input
+              type='search'
+              class='grow'
+              placeholder='Search'
+              value={url.params.qh || ''}
+              onInput={(e) => {
+                const value = (e.target as HTMLInputElement).value
+                navigate({ params: { qh: value || null }, replace: true })
+              }}
+            />
+          </label>
+          <button
+            type='button'
+            class='btn btn-xs  btn-ghost text-error'
+            title='Delete All from history'
+            disabled={Object.keys(queriesHistory.value).length === 0}
+            onClick={() => queriesHistory.value = {}}
+          >
+            <Trash2 class='w-4 h-4' />
+            Clear All
+          </button>
+        </div>
+      </div>
+      <div class='flex-1  overflow-auto'>
+        {filteredHistory.map(([hash, item]) => (
+          <div
+            key={hash}
+            class='p-4 border-b border-base-300 hover:bg-base-200'
+          >
+            <div class='flex items-center justify-between'>
+              <div class='flex-1 min-w-0'>
+                <div class='text-xs text-base-content/60 flex items-center gap-2'>
+                  <Clock class='w-3 h-3' />
+                  {new Date(item.timestamp).toLocaleString()}
+                </div>
+                <p class='font-mono text-sm truncate mt-1' title={item.query}>
+                  {item.query}
+                </p>
+                <div class='text-xs text-base-content/60 mt-1'>
+                  {item.columns} columns, {item.rows} rows
+                </div>
+              </div>
+              <div class='flex items-center gap-2 shrink-0 ml-4'>
+                <A
+                  params={{ q: item.query, tab: 'queries' }}
+                  class='btn btn-xs btn-ghost'
+                  title='Run query'
+                  onClick={() => onRun(item.query)}
+                >
+                  <Play class='w-4 h-4' />
+                </A>
+                <A
+                  class='btn btn-xs btn-ghost'
+                  title='Insert into editor'
+                  params={{ q: item.query, tab: 'queries' }}
+                >
+                  <ChevronRight class='w-4 h-4' />
+                </A>
+                <button
+                  type='button'
+                  class='btn btn-xs btn-ghost text-error'
+                  title='Delete from history'
+                  disabled={!deleteQuery}
+                  onClick={() => deleteQuery(hash)}
+                >
+                  <Trash2 class='w-4 h-4' />
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+        {filteredHistory.length === 0 && (
+          <div class='p-4 text-center text-base-content/60'>
+            No queries found.
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/web/components/SideBar.tsx b/web/components/SideBar.tsx
index ed81c23..854949b 100644
--- a/web/components/SideBar.tsx
+++ b/web/components/SideBar.tsx
@@ -21,18 +21,17 @@ export function Sidebar(
     title?: string
   },
 ) {
-  const { sb } = url.params
+  const sb = url.params.sb
   return (
     <div class='drawer-side'>
-      <label htmlFor='drawer-toggle' class='drawer-overlay'></label>
       <div
         class={`${
-          sb ? 'w-16' : 'w-64'
+          sb ? 'w-64' : 'w-16'
         } min-h-94/100 bg-base-100 border-r border-base-300 flex flex-col transition-all duration-300`}
       >
         <div class='p-4 border-b border-base-300'>
           <div class='flex items-center justify-between'>
-            {!sb && (
+            {sb && (
               <span class='text-sm font-medium rounded bg-base-200 w-7/10 py-1 px-2 text-center text-base-content/60'>
                 {title || 'Project Name'}
               </span>
@@ -42,8 +41,8 @@ export function Sidebar(
               class='p-2 hover:bg-base-200 rounded'
             >
               {sb
-                ? <ChevronsRight class='h-4 w-4 text-base-content/60' />
-                : <ChevronsLeft class='h-4 w-4 text-base-content/60' />}
+                ? <ChevronsLeft class='h-4 w-4 text-base-content/60' />
+                : <ChevronsRight class='h-4 w-4 text-base-content/60' />}
             </A>
           </div>
         </div>
@@ -54,12 +53,12 @@ export function Sidebar(
               <li key={slug}>
                 <A
                   class={`${sbi === slug ? 'bg-base-200' : ''}`}
-                  data-tip={sb ? item.label : undefined}
+                  data-tip={sb ? undefined : item.label}
                   params={{ sbi: slug }}
                   replace
                 >
                   <item.icon class='h-4 w-4' />
-                  {!sb && item.label}
+                  {sb && item.label}
                 </A>
               </li>
             ))}
@@ -77,7 +76,7 @@ export function Sidebar(
             }`}
           >
             <Settings class='h-4 w-4' />
-            {!sb && 'Settings'}
+            {sb && 'Settings'}
           </A>
         </div>
       </div>
diff --git a/web/pages/DeploymentPage.tsx b/web/pages/DeploymentPage.tsx
index f681bf9..0286921 100644
--- a/web/pages/DeploymentPage.tsx
+++ b/web/pages/DeploymentPage.tsx
@@ -29,6 +29,8 @@ import {
 } from '../components/Filtre.tsx'
 import { effect, Signal } from '@preact/signals'
 import { api } from '../lib/api.ts'
+import { QueryHistory, QueryHistoryItem } from '../components/QueryHistory.tsx'
+import { JSX } from 'preact'
 
 type AnyRecord = Record<string, unknown>
 
@@ -48,13 +50,13 @@ const comparators = {
 
 const tableData = api['POST/api/deployment/table/data'].signal()
 const querier = api['GET/api/deployment/query'].signal()
-const queriesHistory = new Signal<AnyRecord>(
-  JSON.parse(localStorage.getItem('savedQueries') || '{}'),
+export const queriesHistory = new Signal<Record<string, QueryHistoryItem>>(
+  JSON.parse(localStorage.getItem('saved_queries') || '{}'),
 )
 type Order = 'ASC' | 'DESC'
 
 queriesHistory.subscribe((val) => {
-  localStorage.setItem('savedQueries', JSON.stringify(val))
+  localStorage.setItem('saved_queries', JSON.stringify(val))
 })
 
 // Effect to fetch schema when deployment URL changes
@@ -85,6 +87,7 @@ effect(() => {
         key: r.key,
         order: r.dir === 'asc' ? 'ASC' : 'DESC' as Order,
       }))
+
       tableData.fetch({
         deployment: dep,
         table: tableName,
@@ -110,11 +113,11 @@ effect(() => {
   }
 })
 
-const onRun = () => {
+export const onRun = (query: string) => {
   if (querier.pending) return
-  const { dep, tab, q } = url.params
-  if (dep && tab === 'queries' && q) {
-    querier.fetch({ deployment: dep, sql: q })
+  const { dep, tab } = url.params
+  if (dep && tab === 'queries' && query) {
+    querier.fetch({ deployment: dep, sql: query })
   }
 }
 
@@ -122,6 +125,7 @@ function sha(message: string) {
   const data = new TextEncoder().encode(message)
   return crypto.subtle.digest('SHA-1', data)
 }
+
 function hashQuery(query: string) {
   const hash = sha(query).then((hashBuffer) => {
     const hashArray = Array.from(new Uint8Array(hashBuffer))
@@ -136,10 +140,14 @@ function hashQuery(query: string) {
 const onSave = () => {
   const query = (url.params.q || '').trim()
   if (query) {
-    console.log('queryHash', queryHash.value)
-
     if (!queryHash.value) return
-    queriesHistory.value = { ...queriesHistory.value, [queryHash.value]: query }
+    queriesHistory.value = {
+      ...queriesHistory.value,
+      [queryHash.value]: {
+        query,
+        timestamp: new Date().toISOString(),
+      },
+    }
   }
 }
 
@@ -193,7 +201,10 @@ export function QueryEditor() {
             onKeyDown={(e) => {
               if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
                 e.preventDefault()
-                onRun()
+                const q = url.params.q
+                if (q) {
+                  onRun(q)
+                }
               }
             }}
             class='textarea w-full h-full font-mono text-sm leading-6 pl-12 pr-3 py-3 bg-base-100 border-base-300 focus:outline-none focus:ring-0 focus:shadow-none focus:border-primary resize-none'
@@ -431,10 +442,13 @@ export function Header() {
         </div>
       </div>
       <div class='flex-none'>
-        <button type='button' class='btn btn-outline btn-xs md:btn-sm'>
+        <A
+          params={{ drawer: 'history' }}
+          class='btn btn-outline btn-xs md:btn-sm drawer-button'
+        >
           <FileText class='h-4 w-4 mr-2' />
-          <span class='hidden sm:inline'>Queries</span>
-        </button>
+          <span class='hidden sm:inline'>Saved Queries</span>
+        </A>
       </div>
     </div>
   )
@@ -663,9 +677,11 @@ export function TabNavigation({
             </label>
           )}
           {activeTab !== 'logs' && (
-            <label
-              onClick={activeTab === 'queries' ? onRun : undefined}
-              htmlFor={activeTab === 'tables' ? 'my-drawer-4' : undefined}
+            <A
+              params={{ drawer: activeTab === 'tables' ? 'insert' : null }}
+              onClick={activeTab === 'queries'
+                ? () => onRun(url.params.q || '')
+                : undefined}
               class='btn btn-primary btn-sm'
             >
               {activeTab === 'queries'
@@ -674,7 +690,7 @@ export function TabNavigation({
               <span class='hidden sm:inline'>
                 {activeTab === 'queries' ? 'Run query' : 'Insert row'}
               </span>
-            </label>
+            </A>
           )}
           {activeTab !== 'queries' && (
             <>
@@ -746,7 +762,7 @@ export function LogsViewer() {
       <div class='flex-1 min-h-0 overflow-hidden'>
         <div class='w-full overflow-x-auto overflow-y-auto h-full'>
           <table class='table table-zebra w-full'>
-            <thead class='sticky top-0 z-20 bg-base-100 shadow-sm'>
+            <thead class='sticky top-0 bg-base-100 shadow-sm'>
               <tr class='border-b border-base-300'>
                 {logThreads.map((header) => (
                   <th
@@ -874,34 +890,61 @@ export function LogsViewer() {
   )
 }
 
-const TabViews = {
-  tables: <DataTable />,
-  queries: <QueryEditor />,
-  logs: <LogsViewer />,
-}
+const CommingSoon = ({ title }: { title: string }) => (
+  <div class='p-4'>
+    <h3 class='text-lg font-semibold mb-4'>{title}</h3>
+    <p>This feature is coming soon!</p>
+  </div>
+)
+
+type DrawerTab = 'history' | 'insert'
+const drawerViews: Record<DrawerTab, JSX.Element> = {
+  history: <QueryHistory />,
+  insert: <CommingSoon title='Insert Row' />,
+} as const
 
 const Drawer = () => (
   <div class='drawer drawer-end'>
-    <input id='my-drawer-4' type='checkbox' class='drawer-toggle' />
+    <input
+      id='drawer-right'
+      type='checkbox'
+      class='drawer-toggle'
+      checked={url.params.drawer !== null}
+      onChange={(e) => {
+        if (!e.currentTarget.checked) {
+          navigate({ params: { drawer: null }, replace: true })
+        }
+      }}
+    />
     <div class='drawer-side'>
       <label
-        htmlFor='my-drawer-4'
+        htmlFor='drawer-right'
         aria-label='close sidebar'
         class='drawer-overlay'
       >
       </label>
-      <ul class='menu bg-base-200 text-base-content min-h-full w-80 p-4'>
-        <li>
-          <a>Sidebar Item 1</a>
-        </li>
-        <li>
-          <a>Sidebar Item 2</a>
-        </li>
-      </ul>
+      <div class='bg-base-200 text-base-content min-h-full w-96 flex flex-col'>
+        <div class='flex-1 overflow-hidden'>
+          <div class='drawer-view' data-view='history'>
+            {drawerViews[url.params.drawer as DrawerTab] || (
+              <div class='p-4'>
+                <h3 class='text-lg font-semibold mb-4'>No view selected</h3>
+                <p>Please select a view from the sidebar.</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 )
 
+const TabViews = {
+  tables: <DataTable />,
+  queries: <QueryEditor />,
+  logs: <LogsViewer />,
+}
+
 export const DeploymentPage = () => {
   const tab = (url.params.tab as 'tables' | 'queries' | 'logs') || 'tables'
   const view = TabViews[tab]