diff --git a/bun.lockb b/bun.lockb
index b4c7e43..7e51828 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index ca53754..b5d1f97 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-context-menu": "^2.2.2",
     "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-portal": "^1.1.2",
diff --git a/src/components/databrowser/components/add-key-modal.tsx b/src/components/databrowser/components/add-key-modal.tsx
index a3658cd..d08ebbb 100644
--- a/src/components/databrowser/components/add-key-modal.tsx
+++ b/src/components/databrowser/components/add-key-modal.tsx
@@ -1,5 +1,4 @@
 import { useState } from "react"
-import { useDatabrowserStore } from "@/store"
 import { DATA_TYPES, type DataType } from "@/types"
 import { DialogDescription } from "@radix-ui/react-dialog"
 import { PlusIcon } from "@radix-ui/react-icons"
@@ -25,9 +24,10 @@ import {
 import { Spinner } from "@/components/ui/spinner"
 import { TypeTag } from "@/components/databrowser/components/type-tag"
 import { useAddKey } from "@/components/databrowser/hooks/use-add-key"
+import { useTab } from "@/tab-provider"
 
 export function AddKeyModal() {
-  const { setSelectedKey } = useDatabrowserStore()
+  const { setSelectedKey } = useTab()
   const [open, setOpen] = useState(false)
 
   const { mutateAsync: addKey, isPending } = useAddKey()
diff --git a/src/components/databrowser/components/databrowser-instance.tsx b/src/components/databrowser/components/databrowser-instance.tsx
new file mode 100644
index 0000000..a59e61e
--- /dev/null
+++ b/src/components/databrowser/components/databrowser-instance.tsx
@@ -0,0 +1,32 @@
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+import { Toaster } from "@/components/ui/toaster"
+import { DataDisplay } from "./display"
+import { Sidebar } from "./sidebar"
+import { KeysProvider } from "../hooks/use-keys"
+
+export const DatabrowserInstance = ({ hidden }: { hidden?: boolean }) => {
+  return (
+    <KeysProvider>
+      <div className={cn("min-h-0 grow rounded-md bg-zinc-100", hidden && "hidden")}>
+        <PanelGroup
+          autoSaveId="persistence"
+          direction="horizontal"
+          className="h-full w-full gap-0.5 text-sm antialiased"
+        >
+          <Panel defaultSize={30} minSize={30}>
+            <Sidebar />
+          </Panel>
+          <PanelResizeHandle className="group flex h-full w-1.5 justify-center">
+            <div className="h-full border-r border-dashed border-zinc-200 transition-colors group-hover:border-zinc-300" />
+          </PanelResizeHandle>
+          <Panel minSize={40}>
+            <DataDisplay />
+          </Panel>
+        </PanelGroup>
+        <Toaster />
+      </div>
+    </KeysProvider>
+  )
+}
diff --git a/src/components/databrowser/components/databrowser-tabs.tsx b/src/components/databrowser/components/databrowser-tabs.tsx
new file mode 100644
index 0000000..0b4df70
--- /dev/null
+++ b/src/components/databrowser/components/databrowser-tabs.tsx
@@ -0,0 +1,69 @@
+import { IconPlus, IconX } from "@tabler/icons-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import type { TabId } from "@/store"
+import { useDatabrowserStore } from "@/store"
+import { TabTypeIcon } from "./tab-type-icon"
+
+const Tab = ({ id }: { id: TabId }) => {
+  const { selectTab, selectedTab, tabs, removeTab } = useDatabrowserStore()
+
+  return (
+    <div
+      onClick={() => selectTab(id)}
+      className={cn(
+        "flex h-9 cursor-pointer items-center gap-2 rounded-t-lg border border-zinc-200 px-3 text-[13px] transition-colors",
+        id === selectedTab
+          ? "border-b-white bg-white text-zinc-900"
+          : "bg-zinc-100 hover:bg-zinc-50"
+      )}
+    >
+      {tabs[id].selectedKey ? (
+        <>
+          <TabTypeIcon selectedKey={tabs[id].selectedKey} />
+          <span className="max-w-32 truncate whitespace-nowrap">{tabs[id].selectedKey}</span>
+        </>
+      ) : (
+        <span className="whitespace-nowrap">New Tab</span>
+      )}
+      {/* Only show close button if there's more than one tab */}
+      {Object.keys(tabs).length > 1 && (
+        <button
+          onClick={(e) => {
+            e.stopPropagation()
+            removeTab(id)
+          }}
+          className="p-1 text-zinc-300 transition-colors hover:text-zinc-500"
+        >
+          <IconX size={16} />
+        </button>
+      )}
+    </div>
+  )
+}
+
+export const DatabrowserTabs = () => {
+  const { tabs, addTab } = useDatabrowserStore()
+
+  return (
+    <div className="relative mb-2 shrink-0">
+      <div className="absolute bottom-0 left-0 right-0 -z-10 h-[1px] w-full bg-zinc-200" />
+
+      <div className="scrollbar-hide flex translate-y-[1px] items-center gap-1 overflow-x-scroll pb-[1px] [&::-webkit-scrollbar]:hidden">
+        {Object.keys(tabs).map((id) => (
+          <Tab id={id as TabId} key={id} />
+        ))}
+        <Button
+          variant="secondary"
+          size="icon-sm"
+          onClick={addTab}
+          className="mr-1 flex-shrink-0"
+          title="Add new tab"
+        >
+          <IconPlus className="text-zinc-500" size={16} />
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/databrowser/components/display/display-header.tsx b/src/components/databrowser/components/display/display-header.tsx
index fc7f20b..edcc025 100644
--- a/src/components/databrowser/components/display/display-header.tsx
+++ b/src/components/databrowser/components/display/display-header.tsx
@@ -1,4 +1,3 @@
-import { useDatabrowserStore } from "@/store"
 import { type DataType } from "@/types"
 import { IconPlus } from "@tabler/icons-react"
 
@@ -7,6 +6,7 @@ import { Button } from "@/components/ui/button"
 import { TypeTag } from "../type-tag"
 import { HeaderTTLBadge, LengthBadge, SizeBadge } from "./header-badges"
 import { KeyActions } from "./key-actions"
+import { useTab } from "@/tab-provider"
 
 export const DisplayHeader = ({
   dataKey,
@@ -17,14 +17,14 @@ export const DisplayHeader = ({
   dataKey: string
   type: DataType
 }) => {
-  const { setSelectedListItem } = useDatabrowserStore()
+  const { setSelectedListItem } = useTab()
 
   const handleAddItem = () => {
     setSelectedListItem({ key: type === "stream" ? "*" : "", isNew: true })
   }
 
   return (
-    <div className="rounded-lg bg-zinc-100 px-3 py-2">
+    <div className="rounded-lg bg-zinc-100">
       <div className="flex min-h-10 items-center justify-between gap-4">
         <h2 className="grow truncate text-base">
           {dataKey.trim() === "" ? (
diff --git a/src/components/databrowser/components/display/display-list-edit.tsx b/src/components/databrowser/components/display/display-list-edit.tsx
index d9fc046..d94ce4a 100644
--- a/src/components/databrowser/components/display/display-list-edit.tsx
+++ b/src/components/databrowser/components/display/display-list-edit.tsx
@@ -1,5 +1,4 @@
 import type { SelectedItem } from "@/store"
-import { useDatabrowserStore } from "@/store"
 import type { ListDataType } from "@/types"
 import { Controller, FormProvider, useForm, useFormContext } from "react-hook-form"
 
@@ -13,6 +12,7 @@ import { useEditListItem } from "../../hooks/use-edit-list-item"
 import { headerLabels } from "./display-list"
 import { HashFieldTTLBadge } from "./hash/hash-field-ttl-badge"
 import { useField } from "./input/use-field"
+import { useTab } from "@/tab-provider"
 
 export const ListEditDisplay = ({
   dataKey,
@@ -24,7 +24,7 @@ export const ListEditDisplay = ({
   item: SelectedItem
 }) => {
   return (
-    <div className="grow rounded-md bg-zinc-100 p-3">
+    <div className="grow rounded-md bg-zinc-100">
       <ListEditForm key={item.key} item={item} type={type} dataKey={dataKey} />
     </div>
   )
@@ -62,7 +62,7 @@ const ListEditForm = ({
   })
 
   const { mutateAsync: editItem, isPending } = useEditListItem()
-  const { setSelectedListItem } = useDatabrowserStore()
+  const { setSelectedListItem } = useTab()
 
   const [keyLabel, valueLabel] = headerLabels[type]
 
diff --git a/src/components/databrowser/components/display/display-list.tsx b/src/components/databrowser/components/display/display-list.tsx
index 39071fc..58e611a 100644
--- a/src/components/databrowser/components/display/display-list.tsx
+++ b/src/components/databrowser/components/display/display-list.tsx
@@ -1,5 +1,4 @@
 import { useMemo } from "react"
-import { useDatabrowserStore } from "@/store"
 import type { ListDataType } from "@/types"
 import { IconTrash } from "@tabler/icons-react"
 import type { InfiniteData, UseInfiniteQueryResult } from "@tanstack/react-query"
@@ -15,6 +14,7 @@ import { DeleteAlertDialog } from "./delete-alert-dialog"
 import { DisplayHeader } from "./display-header"
 import { ListEditDisplay } from "./display-list-edit"
 import { HashFieldTTLInfo } from "./hash/hash-field-ttl-info"
+import { useTab } from "@/tab-provider"
 
 export const headerLabels = {
   list: ["Index", "Content"],
@@ -25,7 +25,7 @@ export const headerLabels = {
 } as const
 
 export const ListDisplay = ({ dataKey, type }: { dataKey: string; type: ListDataType }) => {
-  const { selectedListItem } = useDatabrowserStore()
+  const { selectedListItem } = useTab()
   const query = useFetchListItems({ dataKey, type })
 
   return (
@@ -38,15 +38,13 @@ export const ListDisplay = ({ dataKey, type }: { dataKey: string; type: ListData
 
       <div className={cn("min-h-0 grow", selectedListItem && "hidden")}>
         <InfiniteScroll query={query}>
-          <div className="pr-3">
-            <table className="w-full">
-              <ItemContextMenu dataKey={dataKey} type={type}>
-                <tbody>
-                  <ListItems dataKey={dataKey} type={type} query={query} />
-                </tbody>
-              </ItemContextMenu>
-            </table>
-          </div>
+          <table className="w-full">
+            <ItemContextMenu dataKey={dataKey} type={type}>
+              <tbody>
+                <ListItems dataKey={dataKey} type={type} query={query} />
+              </tbody>
+            </ItemContextMenu>
+          </table>
         </InfiniteScroll>
       </div>
     </div>
@@ -71,7 +69,7 @@ export const ListItems = ({
   type: ListDataType
   dataKey: string
 }) => {
-  const { setSelectedListItem } = useDatabrowserStore()
+  const { setSelectedListItem } = useTab()
   const keys = useMemo(() => query.data?.pages.flatMap((page) => page.keys) ?? [], [query.data])
   const fields = useMemo(() => keys.map((key) => key.key), [keys])
   const { mutate: editItem } = useEditListItem()
@@ -86,7 +84,7 @@ export const ListItems = ({
           onClick={() => {
             setSelectedListItem({ key })
           }}
-          className={cn("h-10 border-b border-b-zinc-100 hover:bg-zinc-100 ")}
+          className={cn("h-10 border-b border-b-zinc-100 transition-colors hover:bg-zinc-100")}
         >
           <td
             className={cn(
diff --git a/src/components/databrowser/components/display/display-simple.tsx b/src/components/databrowser/components/display/display-simple.tsx
index 722ef5e..9bbaff6 100644
--- a/src/components/databrowser/components/display/display-simple.tsx
+++ b/src/components/databrowser/components/display/display-simple.tsx
@@ -17,10 +17,7 @@ export const EditorDisplay = ({ dataKey, type }: { dataKey: string; type: Simple
     <div className="flex h-full w-full flex-col gap-2">
       <DisplayHeader dataKey={dataKey} type={type} content={data ?? undefined} />
 
-      <div
-        className="flex h-full grow flex-col gap-2
-      rounded-md bg-zinc-100 p-3"
-      >
+      <div className="flex h-full grow flex-col gap-2 rounded-md bg-zinc-100">
         {data === undefined ? (
           <Spinner isLoadingText={""} isLoading={true} />
         ) : data === null ? (
diff --git a/src/components/databrowser/components/display/header-badges.tsx b/src/components/databrowser/components/display/header-badges.tsx
index 6d304e6..6769036 100644
--- a/src/components/databrowser/components/display/header-badges.tsx
+++ b/src/components/databrowser/components/display/header-badges.tsx
@@ -3,7 +3,7 @@ import bytes from "bytes"
 
 import { Skeleton } from "@/components/ui/skeleton"
 
-import { useFetchKeyExpire, useSetTTL } from "../../hooks"
+import { useFetchTTL, useSetTTL } from "../../hooks"
 import { useFetchKeyLength } from "../../hooks/use-fetch-key-length"
 import { useFetchKeySize } from "../../hooks/use-fetch-key-size"
 import { TTLBadge } from "./ttl-badge"
@@ -46,7 +46,7 @@ export const SizeBadge = ({ dataKey }: { dataKey: string }) => {
 }
 
 export const HeaderTTLBadge = ({ dataKey }: { dataKey: string }) => {
-  const { data: expireAt } = useFetchKeyExpire(dataKey)
+  const { data: expireAt } = useFetchTTL(dataKey)
   const { mutate: setTTL, isPending } = useSetTTL()
 
   return (
diff --git a/src/components/databrowser/components/display/index.tsx b/src/components/databrowser/components/display/index.tsx
index 06920f4..7d4ef90 100644
--- a/src/components/databrowser/components/display/index.tsx
+++ b/src/components/databrowser/components/display/index.tsx
@@ -1,17 +1,18 @@
 /* eslint-disable unicorn/no-negated-condition */
-import { useDatabrowserStore } from "@/store"
 
 import { useKeys, useKeyType } from "../../hooks/use-keys"
 import { ListDisplay } from "./display-list"
 import { EditorDisplay } from "./display-simple"
+import { useTab } from "@/tab-provider"
 
 export const DataDisplay = () => {
-  const { selectedKey } = useDatabrowserStore()
+  const { selectedKey } = useTab()
+
   const { query } = useKeys()
   const type = useKeyType(selectedKey)
 
   return (
-    <div className="h-full rounded-xl border bg-white p-1">
+    <div className="h-full p-4">
       {!selectedKey ? (
         <div />
       ) : !type ? (
diff --git a/src/components/databrowser/components/sidebar/db-size.tsx b/src/components/databrowser/components/sidebar/db-size.tsx
index c0375e2..77f2657 100644
--- a/src/components/databrowser/components/sidebar/db-size.tsx
+++ b/src/components/databrowser/components/sidebar/db-size.tsx
@@ -1,4 +1,4 @@
-import { useDatabrowser } from "@/store"
+import { useRedis } from "@/redis-context"
 import { useQuery } from "@tanstack/react-query"
 
 import { formatNumber } from "@/lib/utils"
@@ -7,7 +7,8 @@ import { Skeleton } from "@/components/ui/skeleton"
 export const FETCH_DB_SIZE_QUERY_KEY = "fetch-db-size"
 
 export const DisplayDbSize = () => {
-  const { redis } = useDatabrowser()
+  const { redis } = useRedis()
+
   const { data: keyCount } = useQuery({
     queryKey: [FETCH_DB_SIZE_QUERY_KEY],
     queryFn: async () => {
diff --git a/src/components/databrowser/components/sidebar/index.tsx b/src/components/databrowser/components/sidebar/index.tsx
index 4bf3918..44a63b3 100644
--- a/src/components/databrowser/components/sidebar/index.tsx
+++ b/src/components/databrowser/components/sidebar/index.tsx
@@ -20,8 +20,8 @@ export function Sidebar() {
   const { keys, query } = useKeys()
 
   return (
-    <div className="flex h-full flex-col gap-2 rounded-xl border bg-white p-1">
-      <div className="rounded-lg bg-zinc-100 px-3 py-2">
+    <div className="flex h-full flex-col gap-2 p-4">
+      <div className="rounded-lg bg-zinc-100">
         {/* Meta */}
         <div className="flex h-10 items-center justify-between pl-1">
           <DisplayDbSize />
@@ -68,7 +68,7 @@ export function Sidebar() {
         <LoadingSkeleton />
       ) : keys.length > 0 ? (
         // Infinite scroll already has a loader at the bottom
-        <InfiniteScroll query={query}>
+        <InfiniteScroll query={query} disableRoundedInherit className="min-h-0">
           <KeysList />
         </InfiniteScroll>
       ) : (
diff --git a/src/components/databrowser/components/sidebar/infinite-scroll.tsx b/src/components/databrowser/components/sidebar/infinite-scroll.tsx
index 36fd17e..1bc2b45 100644
--- a/src/components/databrowser/components/sidebar/infinite-scroll.tsx
+++ b/src/components/databrowser/components/sidebar/infinite-scroll.tsx
@@ -3,13 +3,16 @@ import { IconLoader2 } from "@tabler/icons-react"
 import type { UseInfiniteQueryResult } from "@tanstack/react-query"
 
 import { ScrollArea } from "@/components/ui/scroll-area"
+import { cn } from "@/lib/utils"
 
 export const InfiniteScroll = ({
   query,
   children,
+  ...props
 }: PropsWithChildren<{
   query: UseInfiniteQueryResult
-}>) => {
+}> &
+  React.ComponentProps<typeof ScrollArea>) => {
   const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
     const { scrollTop, clientHeight, scrollHeight } = e.currentTarget
     if (scrollTop + clientHeight > scrollHeight - 100) {
@@ -23,8 +26,12 @@ export const InfiniteScroll = ({
   return (
     <ScrollArea
       type="always"
-      className="block h-full w-full transition-all"
       onScroll={handleScroll}
+      {...props}
+      className={cn(
+        "block h-full w-full overflow-visible rounded-lg border border-zinc-200 bg-white p-1 pr-3 transition-all",
+        props.className
+      )}
     >
       {children}
 
diff --git a/src/components/databrowser/components/sidebar/keys-list.tsx b/src/components/databrowser/components/sidebar/keys-list.tsx
index 9d0d3dc..2f2faf0 100644
--- a/src/components/databrowser/components/sidebar/keys-list.tsx
+++ b/src/components/databrowser/components/sidebar/keys-list.tsx
@@ -1,4 +1,3 @@
-import { useDatabrowserStore } from "@/store"
 import type { DataType, RedisKey } from "@/types"
 
 import { cn } from "@/lib/utils"
@@ -7,20 +6,19 @@ import { TypeTag } from "@/components/databrowser/components/type-tag"
 
 import { useKeys } from "../../hooks/use-keys"
 import { SidebarContextMenu } from "../sidebar-context-menu"
+import { useTab } from "@/tab-provider"
 
 export const KeysList = () => {
   const { keys } = useKeys()
 
   return (
-    <div className="pr-3">
-      <SidebarContextMenu>
-        <>
-          {keys.map((data, i) => (
-            <KeyItem key={data[0]} nextKey={keys.at(i + 1)?.[0] ?? ""} data={data} />
-          ))}
-        </>
-      </SidebarContextMenu>
-    </div>
+    <SidebarContextMenu>
+      <>
+        {keys.map((data, i) => (
+          <KeyItem key={data[0]} nextKey={keys.at(i + 1)?.[0] ?? ""} data={data} />
+        ))}
+      </>
+    </SidebarContextMenu>
   )
 }
 
@@ -35,7 +33,7 @@ const keyStyles = {
 } as Record<DataType, string>
 
 const KeyItem = ({ data, nextKey }: { data: RedisKey; nextKey: string }) => {
-  const { selectedKey, setSelectedKey } = useDatabrowserStore()
+  const { selectedKey, setSelectedKey } = useTab()
 
   const [dataKey, dataType] = data
   const isKeySelected = selectedKey === dataKey
@@ -46,7 +44,7 @@ const KeyItem = ({ data, nextKey }: { data: RedisKey; nextKey: string }) => {
       data-key={dataKey}
       variant={isKeySelected ? "default" : "ghost"}
       className={cn(
-        "relative flex h-10 w-full items-center justify-start gap-2 px-3 py-0 ",
+        "relative flex h-10 w-full items-center justify-start gap-2 px-3 py-0 !ring-0 focus-visible:bg-zinc-50",
         "select-none border border-transparent text-left",
         isKeySelected && "shadow-sm",
         isKeySelected && keyStyles[dataType]
diff --git a/src/components/databrowser/components/sidebar/search-input.tsx b/src/components/databrowser/components/sidebar/search-input.tsx
index 79d82e0..bd4e2b1 100644
--- a/src/components/databrowser/components/sidebar/search-input.tsx
+++ b/src/components/databrowser/components/sidebar/search-input.tsx
@@ -1,34 +1,132 @@
-import { useState } from "react"
-import { useDatabrowserStore } from "@/store"
+import { useState, useRef, useEffect, type KeyboardEvent } from "react"
 import { IconX } from "@tabler/icons-react"
 
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
+import { useTab } from "@/tab-provider"
+import { useDatabrowserStore } from "@/store"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+
+const dedupeSearchHistory = (history: string[]) => {
+  const seen = new Set()
+  return history.filter((item) => {
+    if (!item || seen.has(item)) return false
+    seen.add(item)
+    return true
+  })
+}
 
 export const SearchInput = () => {
-  const { setSearchKey, search } = useDatabrowserStore()
+  const { setSearchKey, search } = useTab()
+  const { searchHistory, addSearchHistory } = useDatabrowserStore()
   const [state, setState] = useState(search.key)
 
-  const submit = (value: string) => {
+  const [isFocus, setIsFocus] = useState(false)
+  const [focusedIndex, setFocusedIndex] = useState(-1)
+
+  const inputRef = useRef<HTMLInputElement>(null)
+  const historyItemRefs = useRef<(HTMLButtonElement | null)[]>([])
+
+  const handleSubmit = (value: string) => {
     if (value.trim() !== "" && !value.includes("*")) value = `${value}*`
+    addSearchHistory(value)
     setSearchKey(value)
     setState(value)
   }
 
+  const filteredHistory = dedupeSearchHistory(
+    searchHistory.filter((item) => item.includes(state) && item !== state)
+  )
+    .slice(0, 5)
+    // If it has a * in the end, remove it
+    .map((item) => (item.endsWith("*") ? item.slice(0, -1) : item))
+
+  // Reset focused index when filtered history changes
+  useEffect(() => {
+    setFocusedIndex(-1)
+  }, [filteredHistory.length])
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      const text =
+        focusedIndex >= 0 && focusedIndex < filteredHistory.length
+          ? filteredHistory[focusedIndex]
+          : e.currentTarget.value
+      handleSubmit(text)
+    } else if (e.key === "Escape") {
+      setState("")
+      setFocusedIndex(-1)
+      inputRef.current?.blur()
+    } else if (e.key === "ArrowDown" || (e.key === "Tab" && !e.shiftKey)) {
+      e.preventDefault()
+      if (focusedIndex < filteredHistory.length - 1) {
+        setFocusedIndex(focusedIndex + 1)
+      } else if (filteredHistory.length > 0) {
+        setFocusedIndex(0)
+      }
+    } else if (e.key === "ArrowUp" || (e.key === "Tab" && e.shiftKey)) {
+      e.preventDefault()
+      if (focusedIndex > 0) {
+        setFocusedIndex(focusedIndex - 1)
+      } else if (filteredHistory.length > 0 && focusedIndex === 0) {
+        setFocusedIndex(-1)
+        inputRef.current?.focus()
+      } else if (filteredHistory.length > 0) {
+        setFocusedIndex(filteredHistory.length - 1)
+      }
+    }
+  }
+
   return (
     <div className="relative grow">
-      <Input
-        placeholder="Search"
-        className={"rounded-l-none border-zinc-300 font-normal"}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") submit(e.currentTarget.value)
-        }}
-        onChange={(e) => {
-          setState(e.currentTarget.value)
-          if (e.currentTarget.value.trim() === "") submit("")
-        }}
-        value={state}
-      />
+      <Popover open={isFocus && filteredHistory.length > 0}>
+        <PopoverTrigger asChild>
+          <div>
+            <Input
+              ref={inputRef}
+              placeholder="Search"
+              className={"rounded-l-none border-zinc-300 font-normal"}
+              onKeyDown={handleKeyDown}
+              onChange={(e) => {
+                setState(e.currentTarget.value)
+                if (e.currentTarget.value.trim() === "") handleSubmit("")
+              }}
+              value={state}
+              onFocus={() => {
+                setIsFocus(true)
+                setFocusedIndex(-1)
+              }}
+              onBlur={() => setIsFocus(false)}
+            />
+          </div>
+        </PopoverTrigger>
+
+        <PopoverContent
+          className="w-[--radix-popover-trigger-width] divide-y px-3 py-2 text-[13px] text-zinc-900"
+          autoFocus={false}
+          onOpenAutoFocus={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+          }}
+        >
+          {filteredHistory.map((item, index) => (
+            <div key={item} className="w-full py-[3px]">
+              <button
+                ref={(el) => {
+                  historyItemRefs.current[index] = el
+                }}
+                onClick={() => handleSubmit(item)}
+                onMouseEnter={() => setFocusedIndex(index)}
+                className={`block w-full rounded-sm p-1 text-left transition-colors ${
+                  focusedIndex === index ? "bg-zinc-100" : "hover:bg-zinc-100"
+                }`}
+              >
+                {item}
+              </button>
+            </div>
+          ))}
+        </PopoverContent>
+      </Popover>
       {state && (
         <Button
           type="button"
@@ -43,7 +141,7 @@ export const SearchInput = () => {
           <IconX size={16} />
           <span className="sr-only">Clear</span>
         </Button>
-      )}
+      )}{" "}
     </div>
   )
 }
diff --git a/src/components/databrowser/components/sidebar/type-selector.tsx b/src/components/databrowser/components/sidebar/type-selector.tsx
index 1b4018a..0452e67 100644
--- a/src/components/databrowser/components/sidebar/type-selector.tsx
+++ b/src/components/databrowser/components/sidebar/type-selector.tsx
@@ -1,4 +1,3 @@
-import { useDatabrowserStore } from "@/store"
 import { DATA_TYPE_NAMES, type DataType } from "@/types"
 
 import {
@@ -9,11 +8,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
+import { useTab } from "@/tab-provider"
 
 const ALL_TYPES_KEY = "all"
 
 export function DataTypeSelector() {
-  const { search, setSearchType } = useDatabrowserStore()
+  const { search, setSearchType } = useTab()
 
   return (
     <Select
diff --git a/src/components/databrowser/components/tab-type-icon.tsx b/src/components/databrowser/components/tab-type-icon.tsx
new file mode 100644
index 0000000..d3a0686
--- /dev/null
+++ b/src/components/databrowser/components/tab-type-icon.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { useFetchKeyType } from "../hooks/use-fetch-key-type"
+import { TypeTag } from "./type-tag"
+
+export function TabTypeIcon({ selectedKey }: { selectedKey: string | undefined }) {
+  const { data: keyType, isLoading } = useFetchKeyType(selectedKey)
+
+  if (isLoading) return <Skeleton className="h-5 w-5 rounded" />
+
+  if (!keyType || keyType === "none") return
+
+  return <TypeTag variant={keyType} type="icon" />
+}
diff --git a/src/components/databrowser/hooks/use-add-key.ts b/src/components/databrowser/hooks/use-add-key.ts
index 466e04b..9a011f1 100644
--- a/src/components/databrowser/hooks/use-add-key.ts
+++ b/src/components/databrowser/hooks/use-add-key.ts
@@ -1,4 +1,4 @@
-import { useDatabrowser } from "@/store"
+import { useRedis } from "@/redis-context"
 import type { DataType, RedisKey } from "@/types"
 import { useMutation, type InfiniteData } from "@tanstack/react-query"
 
@@ -8,7 +8,7 @@ import { FETCH_DB_SIZE_QUERY_KEY } from "../components/sidebar/db-size"
 import { FETCH_KEYS_QUERY_KEY } from "./use-keys"
 
 export const useAddKey = () => {
-  const { redis } = useDatabrowser()
+  const { redis } = useRedis()
 
   const mutation = useMutation({
     mutationFn: async ({ key, type }: { key: string; type: DataType }) => {
diff --git a/src/components/databrowser/hooks/use-delete-key-cache.ts b/src/components/databrowser/hooks/use-delete-key-cache.ts
index 3bdea1b..5fd99e8 100644
--- a/src/components/databrowser/hooks/use-delete-key-cache.ts
+++ b/src/components/databrowser/hooks/use-delete-key-cache.ts
@@ -1,5 +1,4 @@
 import { useCallback } from "react"
-import { useDatabrowserStore } from "@/store"
 
 import { queryClient } from "@/lib/clients"
 
@@ -7,9 +6,10 @@ import { FETCH_KEY_TYPE_QUERY_KEY } from "./use-fetch-key-type"
 import { FETCH_LIST_ITEMS_QUERY_KEY } from "./use-fetch-list-items"
 import { FETCH_SIMPLE_KEY_QUERY_KEY } from "./use-fetch-simple-key"
 import { FETCH_KEYS_QUERY_KEY } from "./use-keys"
+import { useTab } from "@/tab-provider"
 
 export const useDeleteKeyCache = () => {
-  const { setSelectedKey } = useDatabrowserStore()
+  const { setSelectedKey } = useTab()
 
   const deleteKeyCache = useCallback(
     (key: string) => {
diff --git a/src/components/databrowser/hooks/use-delete-key.ts b/src/components/databrowser/hooks/use-delete-key.ts
index 6fec7d1..b76461e 100644
--- a/src/components/databrowser/hooks/use-delete-key.ts
+++ b/src/components/databrowser/hooks/use-delete-key.ts
@@ -1,4 +1,4 @@
-import { useDatabrowser } from "@/store"
+import { useRedis } from "@/redis-context"
 import { useMutation } from "@tanstack/react-query"
 
 import { queryClient } from "@/lib/clients"
@@ -7,7 +7,7 @@ import { FETCH_DB_SIZE_QUERY_KEY } from "../components/sidebar/db-size"
 import { useDeleteKeyCache } from "./use-delete-key-cache"
 
 export const useDeleteKey = () => {
-  const { redis } = useDatabrowser()
+  const { redis } = useRedis()
   const { deleteKeyCache } = useDeleteKeyCache()
 
   const deleteKey = useMutation({
diff --git a/src/components/databrowser/hooks/use-edit-list-item.tsx b/src/components/databrowser/hooks/use-edit-list-item.tsx
index b9365dd..1a3e077 100644
--- a/src/components/databrowser/hooks/use-edit-list-item.tsx
+++ b/src/components/databrowser/hooks/use-edit-list-item.tsx
@@ -1,4 +1,4 @@
-import { useDatabrowser } from "@/store"
+import { useRedis } from "@/redis-context"
 import type { ListDataType } from "@/types"
 import { useMutation } from "@tanstack/react-query"
 
@@ -7,7 +7,7 @@ import { queryClient } from "@/lib/clients"
 import { FETCH_LIST_ITEMS_QUERY_KEY, transformArray } from "./use-fetch-list-items"
 
 export const useEditListItem = () => {
-  const { redis } = useDatabrowser()
+  const { redis } = useRedis()
 
   return useMutation({
     mutationFn: async ({
diff --git a/src/components/databrowser/hooks/use-fetch-hash-ttl.ts b/src/components/databrowser/hooks/use-fetch-hash-ttl.ts
index 8e01448..e05655a 100644
--- a/src/components/databrowser/hooks/use-fetch-hash-ttl.ts
+++ b/src/components/databrowser/hooks/use-fetch-hash-ttl.ts
@@ -1,4 +1,4 @@
-import { useDatabrowser } from "@/store"
+import { useRedis } from "@/redis-context"
 import { useQuery } from "@tanstack/react-query"
 
 import { queryClient } from "@/lib/clients"
@@ -15,7 +15,7 @@ export const useFetchHashFieldExpires = ({
   dataKey: string
   fields: string[]
 }) => {
-  const { redis } = useDatabrowser()
+  const { redis } = useRedis()
 
   return useQuery({
     queryKey: [FETCH_HASH_FIELD_TTLS_QUERY_KEY, dataKey, fields],
diff --git a/src/components/databrowser/hooks/use-fetch-key-length.ts b/src/components/databrowser/hooks/use-fetch-key-length.ts
index 3a208ce..9f6d94c 100644
--- a/src/components/databrowser/hooks/use-fetch-key-length.ts
+++ b/src/components/databrowser/hooks/use-fetch-key-length.ts
@@ -1,11 +1,11 @@
-import { useDatabrowser } from "@/store"
+import { useRedis } from "@/redis-context"
 import type { DataType } from "@/types"
 import { useQuery } from "@tanstack/react-query"
 
 export const FETCH_KEY_LENGTH_QUERY_KEY = "fetch-key-length"
 
 export const useFetchKeyLength = ({ dataKey, type }: { dataKey: string; type: DataType }) => {
-  const { redis } = useDatabrowser()
+  const { redis } = useRedis()
 
   return useQuery({
     queryKey: [FETCH_KEY_LENGTH_QUERY_KEY, dataKey],
diff --git a/src/components/databrowser/hooks/use-fetch-key-size.ts b/src/components/databrowser/hooks/use-fetch-key-size.ts
index eb95a91..c902d37 100644
--- a/src/components/databrowser/hooks/use-fetch-key-size.ts
+++ b/src/components/databrowser/hooks/use-fetch-key-size.ts
@@ -1,10 +1,10 @@
-import { useDatabrowser } from "@/store"
+import { useRedis } from "@/redis-context"
 import { useQuery } from "@tanstack/react-query"
 
 const FETCH_KEY_SIZE_QUERY_KEY = "fetch-key-size"
 
 export const useFetchKeySize = (dataKey: string) => {
-  const { redis } = useDatabrowser()
+  const { redis } = useRedis()
 
   return useQuery({
     queryKey: [FETCH_KEY_SIZE_QUERY_KEY, dataKey],
diff --git a/src/components/databrowser/hooks/use-fetch-key-type.tsx b/src/components/databrowser/hooks/use-fetch-key-type.ts
similarity index 78%
rename from src/components/databrowser/hooks/use-fetch-key-type.tsx
rename to src/components/databrowser/hooks/use-fetch-key-type.ts
index 499cd27..4919a7a 100644
--- a/src/components/databrowser/hooks/use-fetch-key-type.tsx
+++ b/src/components/databrowser/hooks/use-fetch-key-type.ts
@@ -1,10 +1,10 @@
-import { useDatabrowser } from "@/store"
+import { useRedis } from "@/redis-context"
 import { useQuery } from "@tanstack/react-query"
 
 export const FETCH_KEY_TYPE_QUERY_KEY = "fetch-key-type"
 
 export const useFetchKeyType = (key: string | undefined) => {
-  const { redisNoPipeline: redis } = useDatabrowser()
+  const { redis } = useRedis()
 
   return useQuery({
     queryKey: [FETCH_KEY_TYPE_QUERY_KEY, key],
diff --git a/src/components/databrowser/hooks/use-fetch-list-items.tsx b/src/components/databrowser/hooks/use-fetch-list-items.tsx
index 576d08b..3260d7e 100644
--- a/src/components/databrowser/hooks/use-fetch-list-items.tsx
+++ b/src/components/databrowser/hooks/use-fetch-list-items.tsx
@@ -1,4 +1,4 @@
-import { useDatabrowser } from "@/store"
+import { useRedis } from "@/redis-context"
 import type { ListDataType } from "@/types"
 import { useInfiniteQuery } from "@tanstack/react-query"
 
@@ -7,7 +7,7 @@ export const LIST_DISPLAY_PAGE_SIZE = 50
 export const FETCH_LIST_ITEMS_QUERY_KEY = "use-fetch-list-items"
 
 export const useFetchListItems = ({ dataKey, type }: { dataKey: string; type: ListDataType }) => {
-  const { redisNoPipeline: redis } = useDatabrowser()
+  const { redisNoPipeline: redis } = useRedis()
 
   const setQuery = useInfiniteQuery({
     enabled: type === "set",
diff --git a/src/components/databrowser/hooks/use-fetch-simple-key.tsx b/src/components/databrowser/hooks/use-fetch-simple-key.tsx
index 5d7f47c..2f09ced 100644
--- a/src/components/databrowser/hooks/use-fetch-simple-key.tsx
+++ b/src/components/databrowser/hooks/use-fetch-simple-key.tsx
@@ -1,4 +1,4 @@
-import { useDatabrowser } from "@/store"
+import { useRedis } from "@/redis-context"
 import type { DataType } from "@/types"
 import { useQuery } from "@tanstack/react-query"
 
@@ -8,7 +8,7 @@ export const FETCH_SIMPLE_KEY_QUERY_KEY = "fetch-simple-key"
 
 /** Simple key standing for string or json */
 export const useFetchSimpleKey = (dataKey: string, type: DataType) => {
-  const { redisNoPipeline: redis } = useDatabrowser()
+  const { redisNoPipeline: redis } = useRedis()
   const { deleteKeyCache } = useDeleteKeyCache()
 
   return useQuery({
diff --git a/src/components/databrowser/hooks/use-fetch-ttl.ts b/src/components/databrowser/hooks/use-fetch-ttl.ts
index f936b02..66662ea 100644
--- a/src/components/databrowser/hooks/use-fetch-ttl.ts
+++ b/src/components/databrowser/hooks/use-fetch-ttl.ts
@@ -1,5 +1,5 @@
 import { useEffect } from "react"
-import { useDatabrowser } from "@/store"
+import { useRedis } from "@/redis-context"
 import { useQuery } from "@tanstack/react-query"
 
 import { queryClient } from "@/lib/clients"
@@ -9,9 +9,8 @@ import { FETCH_SIMPLE_KEY_QUERY_KEY } from "./use-fetch-simple-key"
 
 export const FETCH_TTL_QUERY_KEY = "fetch-ttl"
 
-// Returns the expireAt instead of ttl seconds, its more useful for the UI
-export const useFetchKeyExpire = (dataKey: string) => {
-  const { redis } = useDatabrowser()
+export const useFetchTTL = (dataKey: string) => {
+  const { redis } = useRedis()
 
   const { isLoading, error, data } = useQuery({
     queryKey: [FETCH_TTL_QUERY_KEY, dataKey],
diff --git a/src/components/databrowser/hooks/use-keys.tsx b/src/components/databrowser/hooks/use-keys.tsx
index 88ccd13..b5fad4d 100644
--- a/src/components/databrowser/hooks/use-keys.tsx
+++ b/src/components/databrowser/hooks/use-keys.tsx
@@ -1,7 +1,10 @@
 import { createContext, useContext, useMemo, type PropsWithChildren } from "react"
-import { useDatabrowser, useDatabrowserStore } from "@/store"
+import { useRedis } from "@/redis-context"
 import type { DataType, RedisKey } from "@/types"
 import { useInfiniteQuery, type UseInfiniteQueryResult } from "@tanstack/react-query"
+import { useTab } from "@/tab-provider"
+import { queryClient } from "@/lib/clients"
+import { FETCH_KEY_TYPE_QUERY_KEY } from "./use-fetch-key-type"
 
 const KeysContext = createContext<
   | {
@@ -16,9 +19,9 @@ export const FETCH_KEYS_QUERY_KEY = "use-fetch-keys"
 const SCAN_COUNT = 100
 
 export const KeysProvider = ({ children }: PropsWithChildren) => {
-  const { search } = useDatabrowserStore()
+  const { search } = useTab()
 
-  const { redisNoPipeline: redis } = useDatabrowser()
+  const { redisNoPipeline: redis } = useRedis()
 
   const query = useInfiniteQuery({
     queryKey: [FETCH_KEYS_QUERY_KEY, search],
@@ -57,6 +60,10 @@ export const KeysProvider = ({ children }: PropsWithChildren) => {
         }
       }
 
+      for (const [key, type] of keys) {
+        queryClient.setQueryData([FETCH_KEY_TYPE_QUERY_KEY, key], type)
+      }
+
       return {
         cursor: cursor === "0" ? undefined : cursor,
         keys,
diff --git a/src/components/databrowser/hooks/use-set-hash-ttl.ts b/src/components/databrowser/hooks/use-set-hash-ttl.ts
index 82778b6..fc478c2 100644
--- a/src/components/databrowser/hooks/use-set-hash-ttl.ts
+++ b/src/components/databrowser/hooks/use-set-hash-ttl.ts
@@ -1,4 +1,4 @@
-import { useDatabrowser } from "@/store"
+import { useRedis } from "@/redis-context"
 import { useMutation } from "@tanstack/react-query"
 
 import { queryClient } from "@/lib/clients"
@@ -7,7 +7,7 @@ import { TTL_INFINITE } from "../components/display/ttl-badge"
 import { FETCH_HASH_FIELD_TTLS_QUERY_KEY } from "./use-fetch-hash-ttl"
 
 export const useSetHashTTL = () => {
-  const { redis } = useDatabrowser()
+  const { redis } = useRedis()
 
   return useMutation({
     mutationFn: async ({
diff --git a/src/components/databrowser/hooks/use-set-simple-key.tsx b/src/components/databrowser/hooks/use-set-simple-key.tsx
index 7035501..1bcd5a4 100644
--- a/src/components/databrowser/hooks/use-set-simple-key.tsx
+++ b/src/components/databrowser/hooks/use-set-simple-key.tsx
@@ -1,4 +1,4 @@
-import { useDatabrowser } from "@/store"
+import { useRedis } from "@/redis-context"
 import type { SimpleDataType } from "@/types"
 import { useMutation } from "@tanstack/react-query"
 
@@ -7,7 +7,7 @@ import { queryClient } from "@/lib/clients"
 import { FETCH_SIMPLE_KEY_QUERY_KEY } from "./use-fetch-simple-key"
 
 export const useSetSimpleKey = (dataKey: string, type: SimpleDataType) => {
-  const { redis } = useDatabrowser()
+  const { redis } = useRedis()
   return useMutation({
     mutationFn: async (value: string) => {
       if (type === "string") {
diff --git a/src/components/databrowser/hooks/use-set-ttl.ts b/src/components/databrowser/hooks/use-set-ttl.ts
index e4414a8..faaaef8 100644
--- a/src/components/databrowser/hooks/use-set-ttl.ts
+++ b/src/components/databrowser/hooks/use-set-ttl.ts
@@ -1,4 +1,4 @@
-import { useDatabrowser } from "@/store"
+import { useRedis } from "@/redis-context"
 import { useMutation } from "@tanstack/react-query"
 
 import { queryClient } from "@/lib/clients"
@@ -8,7 +8,7 @@ import { FETCH_SIMPLE_KEY_QUERY_KEY } from "./use-fetch-simple-key"
 import { FETCH_TTL_QUERY_KEY } from "./use-fetch-ttl"
 
 export const useSetTTL = () => {
-  const { redis } = useDatabrowser()
+  const { redis } = useRedis()
 
   const updateTTL = useMutation({
     mutationFn: async ({ dataKey, ttl }: { dataKey: string; ttl?: number }) => {
diff --git a/src/components/databrowser/index.tsx b/src/components/databrowser/index.tsx
index c48e0c6..00636bb 100644
--- a/src/components/databrowser/index.tsx
+++ b/src/components/databrowser/index.tsx
@@ -1,20 +1,23 @@
 import "@/globals.css"
 
 import { useEffect, useMemo } from "react"
-import { DatabrowserProvider, type RedisCredentials } from "@/store"
+import type { TabId } from "@/store"
+import { DatabrowserProvider, useDatabrowserStore } from "@/store"
 import { TooltipProvider } from "@radix-ui/react-tooltip"
-import { IconDotsVertical } from "@tabler/icons-react"
 import { QueryClientProvider } from "@tanstack/react-query"
-import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"
 
 import { queryClient } from "@/lib/clients"
+import { RedisProvider, type RedisCredentials } from "@/redis-context"
 
-import { Toaster } from "../ui/toaster"
-import { DataDisplay } from "./components/display"
-import { Sidebar } from "./components/sidebar"
-import { KeysProvider } from "./hooks/use-keys"
+import { DatabrowserInstance } from "./components/databrowser-instance"
+import { DatabrowserTabs } from "./components/databrowser-tabs"
+import { TabIdProvider } from "@/tab-provider"
 
-export const RedisBrowser = ({ token, url }: RedisCredentials) => {
+export const RedisBrowser = ({
+  token,
+  url,
+  hideTabs,
+}: RedisCredentials & { hideTabs?: boolean }) => {
   const credentials = useMemo(() => ({ token, url }), [token, url])
 
   useEffect(() => {
@@ -23,35 +26,34 @@ export const RedisBrowser = ({ token, url }: RedisCredentials) => {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <TooltipProvider>
-        <DatabrowserProvider redisCredentials={credentials}>
-          <KeysProvider>
+      <RedisProvider redisCredentials={credentials}>
+        <DatabrowserProvider>
+          <TooltipProvider>
             {/* ups-db is the custom class used to prefix every style in the css bundle */}
-            <div className="ups-db" style={{ height: "100%" }}>
-              <PanelGroup
-                autoSaveId="persistence"
-                direction="horizontal"
-                className="h-full w-full gap-0.5 text-sm antialiased"
-              >
-                <Panel defaultSize={30} minSize={30}>
-                  <Sidebar />
-                </Panel>
-                <PanelResizeHandle className="h-fullm flex w-1.5 items-center justify-center rounded-full hover:bg-zinc-300/20">
-                  <IconDotsVertical
-                    size={16}
-                    stroke={1}
-                    className="pointer-events-none shrink-0 opacity-20"
-                  />
-                </PanelResizeHandle>
-                <Panel minSize={40}>
-                  <DataDisplay />
-                </Panel>
-              </PanelGroup>
-              <Toaster />
+            <div
+              className="ups-db"
+              style={{ height: "100%", display: "flex", flexDirection: "column" }}
+            >
+              {!hideTabs && <DatabrowserTabs />}
+              <DatabrowserInstances />
             </div>
-          </KeysProvider>
+          </TooltipProvider>
         </DatabrowserProvider>
-      </TooltipProvider>
+      </RedisProvider>
     </QueryClientProvider>
   )
 }
+
+const DatabrowserInstances = () => {
+  const { tabs, selectedTab, addTab } = useDatabrowserStore()
+
+  useEffect(() => {
+    if (Object.keys(tabs).length === 0) addTab()
+  }, [tabs])
+
+  return Object.entries(tabs).map(([id]) => (
+    <TabIdProvider key={id} value={id as TabId}>
+      <DatabrowserInstance hidden={id !== selectedTab} />
+    </TabIdProvider>
+  ))
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index e680acf..ee75346 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -7,7 +7,8 @@ import { cn } from "@/lib/utils"
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm " +
     "ring-offset-white transition-colors " +
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 " +
+    // Disabled ring
+    "focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 " +
     "disabled:pointer-events-none disabled:opacity-50 " +
     "dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300",
   {
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 75d418d..545a151 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,9 +1,8 @@
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { cn } from "@/lib/utils"
 import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
-
 import { portalRoot } from "@/lib/portal-root"
-import { cn } from "@/lib/utils"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -26,14 +25,14 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-zinc-100 data-[state=open]:bg-zinc-100 dark:focus:bg-zinc-800 dark:data-[state=open]:bg-zinc-800",
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 data-[state=open]:bg-neutral-100 dark:focus:bg-neutral-800 dark:data-[state=open]:bg-neutral-800 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     )}
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto size-4" />
+    <ChevronRightIcon className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
@@ -45,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      "z-50 min-w-[8rem] origin-[--radix-dropdown-menu-content-transform-origin] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
       className
     )}
     {...props}
@@ -62,8 +61,8 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+        "origin-[--radix-dropdown-menu-content-transform-origin] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
@@ -105,7 +104,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="size-4" />
+        <CheckIcon className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -127,7 +126,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="size-4 fill-current" />
+        <DotFilledIcon className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index 954abba..bd76e0c 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -3,10 +3,14 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
 import { cn } from "@/lib/utils"
 
+type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+  disableRoundedInherit?: boolean
+}
+
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, onScroll, ...props }, ref) => (
+  ScrollAreaProps
+>(({ className, children, onScroll, disableRoundedInherit = false, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn("relative overflow-hidden", className)}
@@ -14,7 +18,7 @@ const ScrollArea = React.forwardRef<
   >
     <ScrollAreaPrimitive.Viewport
       onScroll={onScroll}
-      className="h-full w-full rounded-[inherit] [&>div]:!block"
+      className={cn("h-full w-full [&>div]:!block", !disableRoundedInherit && "rounded-[inherit]")}
     >
       {children}
     </ScrollAreaPrimitive.Viewport>
diff --git a/src/playground.tsx b/src/playground.tsx
index 71eca3f..c1b27cf 100644
--- a/src/playground.tsx
+++ b/src/playground.tsx
@@ -7,7 +7,7 @@ ReactDOM.createRoot(document.querySelector("#root")!).render(
     style={{
       position: "fixed",
       inset: 0,
-      backgroundColor: "#eee",
+      backgroundColor: "white",
       padding: "20px",
     }}
   >
@@ -17,6 +17,8 @@ ReactDOM.createRoot(document.querySelector("#root")!).render(
         width: "100%",
         maxWidth: "900px",
         margin: "0 auto",
+        border: "1px solid red",
+        boxSizing: "border-box",
       }}
     >
       <RedisBrowser
diff --git a/src/redis-context.tsx b/src/redis-context.tsx
new file mode 100644
index 0000000..54d947e
--- /dev/null
+++ b/src/redis-context.tsx
@@ -0,0 +1,50 @@
+import { createContext, useContext, useMemo, type PropsWithChildren } from "react"
+import type { Redis } from "@upstash/redis"
+
+import { redisClient } from "./lib/clients"
+
+export type RedisCredentials = {
+  url?: string
+  token?: string
+}
+
+type RedisContextProps = {
+  redis: Redis
+  redisNoPipeline: Redis
+}
+
+const RedisContext = createContext<RedisContextProps | undefined>(undefined)
+
+type RedisProviderProps = {
+  redisCredentials: RedisCredentials
+}
+
+export const RedisProvider = ({
+  children,
+  redisCredentials,
+}: PropsWithChildren<RedisProviderProps>) => {
+  const redisInstance = useMemo(
+    () => redisClient({ credentials: redisCredentials, pipelining: true }),
+    [redisCredentials]
+  )
+  const redisInstanceNoPipeline = useMemo(
+    () => redisClient({ credentials: redisCredentials, pipelining: false }),
+    [redisCredentials]
+  )
+
+  return (
+    <RedisContext.Provider
+      value={{ redis: redisInstance, redisNoPipeline: redisInstanceNoPipeline }}
+    >
+      {children}
+    </RedisContext.Provider>
+  )
+}
+
+export const useRedis = (): RedisContextProps => {
+  const context = useContext(RedisContext)
+  if (!context) {
+    throw new Error("useRedis must be used within a RedisProvider")
+  }
+  return context
+}
diff --git a/src/store.tsx b/src/store.tsx
index 973fdb2..3c26379 100644
--- a/src/store.tsx
+++ b/src/store.tsx
@@ -1,46 +1,24 @@
-import { createContext, useContext, useMemo, useState, type PropsWithChildren } from "react"
-import type { Redis } from "@upstash/redis"
+import { createContext, useContext, useMemo, type PropsWithChildren } from "react"
 import { create, useStore } from "zustand"
 
-import { redisClient } from "./lib/clients"
 import type { DataType } from "./types"
 
-export type RedisCredentials = {
-  url?: string
-  token?: string
-}
+// Re-export for backward compatibility
+export type { RedisCredentials } from "./redis-context"
 
 type DatabrowserContextProps = {
-  redis: Redis
-  redisNoPipeline: Redis
-  store: ReturnType<typeof createDatabrowserStore>
+  store: DatabrowserStoreObject
 }
 
 const DatabrowserContext = createContext<DatabrowserContextProps | undefined>(undefined)
 
-interface DatabrowserProviderProps {
-  redisCredentials: RedisCredentials
-}
+export const DatabrowserProvider = ({ children }: PropsWithChildren) => {
+  const store = useMemo(() => createDatabrowserStore(), [])
 
-export const DatabrowserProvider = ({
-  children,
-  redisCredentials,
-}: PropsWithChildren<DatabrowserProviderProps>) => {
-  const redisInstance = useMemo(() => redisClient({credentials: redisCredentials, pipelining: true}), [redisCredentials])
-  const redisInstanceNoPipeline = useMemo(() => redisClient({credentials: redisCredentials, pipelining: false}), [redisCredentials])
-
-  const [store] = useState(() => {
-    return createDatabrowserStore()
-  })
-
-  return (
-    <DatabrowserContext.Provider value={{ redis: redisInstance, redisNoPipeline: redisInstanceNoPipeline, store }}>
-      {children}
-    </DatabrowserContext.Provider>
-  )
+  return <DatabrowserContext.Provider value={{ store }}>{children}</DatabrowserContext.Provider>
 }
 
-export const useDatabrowser = (): DatabrowserContextProps => {
+const useDatabrowser = (): DatabrowserContextProps => {
   const context = useContext(DatabrowserContext)
   if (!context) {
     throw new Error("useDatabrowser must be used within a DatabrowserProvider")
@@ -64,33 +42,118 @@ export type SelectedItem = {
   isNew?: boolean
 }
 
-type DatabrowserStore = {
+type TabData = {
   selectedKey: string | undefined
-  setSelectedKey: (key: string | undefined) => void
-
   selectedListItem?: SelectedItem
-  setSelectedListItem: (item?: { key: string; isNew?: boolean }) => void
 
   search: SearchFilter
-  setSearch: (search: SearchFilter) => void
-  setSearchKey: (key: string) => void
-  setSearchType: (type: DataType | undefined) => void
 }
 
-const createDatabrowserStore = () =>
-  create<DatabrowserStore>((set) => ({
-    selectedKey: undefined,
-    setSelectedKey: (key) => {
-      set((old) => ({ ...old, selectedKey: key, selectedListItem: undefined }))
+export type TabId = string & { __tabId: true }
+
+type DatabrowserStore = {
+  selectedTab: TabId | undefined
+  tabs: Record<TabId, TabData>
+
+  addTab: () => void
+  removeTab: (id: TabId) => void
+  selectTab: (id: TabId) => void
+
+  // Tab actions
+  getSelectedKey: (tabId: TabId) => string | undefined
+  setSelectedKey: (tabId: TabId, key: string | undefined) => void
+  setSelectedListItem: (tabId: TabId, item?: { key: string; isNew?: boolean }) => void
+  setSearch: (tabId: TabId, search: SearchFilter) => void
+  setSearchKey: (tabId: TabId, key: string) => void
+  setSearchType: (tabId: TabId, type: DataType | undefined) => void
+
+  searchHistory: string[]
+  addSearchHistory: (key: string) => void
+}
+
+export type DatabrowserStoreObject = ReturnType<typeof createDatabrowserStore>
+
+export const createDatabrowserStore = () =>
+  create<DatabrowserStore>((set, get) => ({
+    selectedTab: undefined,
+    tabs: {},
+
+    addTab: () => {
+      const id = crypto.randomUUID() as TabId
+
+      const newTabData: TabData = {
+        selectedKey: undefined,
+        search: { key: "", type: undefined },
+      }
+
+      set((old) => ({
+        tabs: { ...old.tabs, [id]: newTabData },
+        selectedTab: old.selectedTab === undefined ? id : old.selectedTab,
+      }))
     },
 
-    selectedListItem: undefined,
-    setSelectedListItem: (item) => {
-      set((old) => ({ ...old, selectedListItem: item }))
+    removeTab: (id) => {
+      set((old) => {
+        const newTabs = { ...old.tabs }
+        delete newTabs[id]
+
+        // If we're removing the selected tab, select another tab if available
+        let selectedTab = old.selectedTab
+        if (selectedTab === id) {
+          const tabIds = Object.keys(newTabs) as TabId[]
+          selectedTab = tabIds.length > 0 ? tabIds[0] : undefined
+        }
+
+        return { tabs: newTabs, selectedTab }
+      })
+    },
+
+    selectTab: (id) => {
+      set({ selectedTab: id })
+    },
+
+    getSelectedKey: (tabId) => {
+      return get().tabs[tabId]?.selectedKey
     },
 
-    search: { key: "", type: undefined },
-    setSearch: (search) => set({ search }),
-    setSearchKey: (key) => set((state) => ({ search: { ...state.search, key } })),
-    setSearchType: (type) => set((state) => ({ search: { ...state.search, type } })),
+    setSelectedKey: (tabId, key) => {
+      set((old) => ({
+        ...old,
+        tabs: {
+          ...old.tabs,
+          [tabId]: { ...old.tabs[tabId], selectedKey: key, selectedListItem: undefined },
+        },
+      }))
+    },
+
+    setSelectedListItem: (tabId, item) => {
+      set((old) => ({
+        ...old,
+        tabs: { ...old.tabs, [tabId]: { ...old.tabs[tabId], selectedListItem: item } },
+      }))
+    },
+
+    setSearch: (tabId, search) =>
+      set((old) => ({ ...old, tabs: { ...old.tabs, [tabId]: { ...old.tabs[tabId], search } } })),
+    setSearchKey: (tabId, key) =>
+      set((old) => ({
+        ...old,
+        tabs: {
+          ...old.tabs,
+          [tabId]: { ...old.tabs[tabId], search: { ...old.tabs[tabId].search, key } },
+        },
+      })),
+    setSearchType: (tabId, type) =>
+      set((old) => ({
+        ...old,
+        tabs: {
+          ...old.tabs,
+          [tabId]: { ...old.tabs[tabId], search: { ...old.tabs[tabId].search, type } },
+        },
+      })),
+
+    searchHistory: [],
+    addSearchHistory: (key) => {
+      set((old) => ({ ...old, searchHistory: [key, ...old.searchHistory] }))
+    },
   }))
diff --git a/src/tab-provider.tsx b/src/tab-provider.tsx
new file mode 100644
index 0000000..f36ff20
--- /dev/null
+++ b/src/tab-provider.tsx
@@ -0,0 +1,48 @@
+import { createContext, useContext, useMemo } from "react"
+import type { SearchFilter, SelectedItem } from "./store"
+import { useDatabrowserStore, type TabId } from "./store"
+import type { DataType } from "./types"
+
+const TabIdContext = createContext<TabId | undefined>(undefined)
+
+export const TabIdProvider = ({ children, value }: { children: React.ReactNode; value: TabId }) => {
+  return <TabIdContext.Provider value={value}>{children}</TabIdContext.Provider>
+}
+
+export const useTabId = () => {
+  const tabId = useContext(TabIdContext)
+  if (!tabId) {
+    throw new Error("useTabId must be used within a TabProvider")
+  }
+  return tabId
+}
+
+export const useTab = () => {
+  const {
+    selectedTab,
+    tabs,
+    setSelectedKey,
+    setSelectedListItem,
+    setSearch,
+    setSearchKey,
+    setSearchType,
+  } = useDatabrowserStore()
+
+  if (!selectedTab) throw new Error("selectedTab is undefined when using useTab()")
+
+  return useMemo(
+    () => ({
+      selectedKey: tabs[selectedTab]?.selectedKey,
+      selectedListItem: tabs[selectedTab]?.selectedListItem,
+      search: tabs[selectedTab]?.search,
+
+      setSelectedKey: (key: string | undefined) => setSelectedKey(selectedTab, key),
+      setSelectedListItem: (item: SelectedItem | undefined) =>
+        setSelectedListItem(selectedTab, item),
+      setSearch: (search: SearchFilter) => setSearch(selectedTab, search),
+      setSearchKey: (key: string) => setSearchKey(selectedTab, key),
+      setSearchType: (type: DataType | undefined) => setSearchType(selectedTab, type),
+    }),
+    [selectedTab, tabs]
+  )
+}