diff --git a/package-lock.json b/package-lock.json
index c6bc7087..3ac24627 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,16 @@
 {
   "name": "libsql-studio",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "libsql-studio",
-      "version": "0.2.1",
+      "version": "0.2.2",
       "dependencies": {
         "@codemirror/lang-sql": "^6.5.5",
+        "@dnd-kit/core": "^6.1.0",
+        "@dnd-kit/sortable": "^8.0.0",
         "@lezer/common": "^1.2.1",
         "@lezer/lr": "^1.4.0",
         "@libsql/client": "^0.5.3",
@@ -927,6 +929,55 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz",
+      "integrity": "sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.1.0.tgz",
+      "integrity": "sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-8.0.0.tgz",
+      "integrity": "sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g==",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.1.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@drizzle-team/studio": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@drizzle-team/studio/-/studio-0.0.39.tgz",
diff --git a/package.json b/package.json
index bf2e4bfb..5d6570af 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,8 @@
   },
   "dependencies": {
     "@codemirror/lang-sql": "^6.5.5",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
     "@lezer/common": "^1.2.1",
     "@lezer/lr": "^1.4.0",
     "@libsql/client": "^0.5.3",
diff --git a/src/components/database-gui.tsx b/src/components/database-gui.tsx
index c890e7c7..a0add200 100644
--- a/src/components/database-gui.tsx
+++ b/src/components/database-gui.tsx
@@ -13,6 +13,7 @@ import { MessageChannelName } from "@/messages/const";
 import { OpenTabsProps } from "@/messages/openTabs";
 import QueryWindow from "@/components/tabs/query-tab";
 import SchemaEditorTab from "@/components/tabs/schema-editor-tab";
+import { LucideCode, LucideTable, LucideTableProperties } from "lucide-react";
 
 export default function DatabaseGui() {
   const DEFAULT_WIDTH = 300;
@@ -25,7 +26,12 @@ export default function DatabaseGui() {
 
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
   const [tabs, setTabs] = useState<WindowTabItemProps[]>(() => [
-    { title: "Query", key: "query", component: <QueryWindow /> },
+    {
+      title: "Query",
+      key: "query",
+      component: <QueryWindow />,
+      icon: LucideCode,
+    },
   ]);
 
   useMessageListener<OpenTabsProps>(
@@ -45,6 +51,7 @@ export default function DatabaseGui() {
               return [
                 ...prev,
                 {
+                  icon: LucideTable,
                   title: newTab.name,
                   key: newTab.key,
                   component: <TableDataContent tableName={newTab.tableName} />,
@@ -57,6 +64,7 @@ export default function DatabaseGui() {
             return [
               ...prev,
               {
+                icon: LucideCode,
                 title: newTab.name,
                 key: newTab.key,
                 component: <QueryWindow />,
@@ -74,6 +82,7 @@ export default function DatabaseGui() {
               return [
                 ...prev,
                 {
+                  icon: LucideTableProperties,
                   title: newTab.name,
                   key: newTab.key,
                   component: <SchemaEditorTab tableName={newTab.tableName} />,
diff --git a/src/components/sortable-tab.module.css b/src/components/sortable-tab.module.css
new file mode 100644
index 00000000..5623c96e
--- /dev/null
+++ b/src/components/sortable-tab.module.css
@@ -0,0 +1,7 @@
+.tab .close {
+  visibility: hidden;
+}
+
+.tab:hover .close {
+  visibility: visible;
+}
diff --git a/src/components/sortable-tab.tsx b/src/components/sortable-tab.tsx
new file mode 100644
index 00000000..962f4b36
--- /dev/null
+++ b/src/components/sortable-tab.tsx
@@ -0,0 +1,76 @@
+import { LucideIcon, LucideX } from "lucide-react";
+import { useSortable } from "@dnd-kit/sortable";
+import styles from "./sortable-tab.module.css";
+import { WindowTabItemProps } from "./windows-tab";
+import { cn } from "@/lib/utils";
+import { forwardRef } from "react";
+import { ButtonProps } from "./ui/button";
+
+interface SortableTabProps {
+  tab: WindowTabItemProps;
+  selected: boolean;
+  onSelectChange: () => void;
+  onClose: () => void;
+}
+
+type WindowTabItemButtonProps = ButtonProps & {
+  selected?: boolean;
+  title: string;
+  icon: LucideIcon;
+  onClose?: () => void;
+};
+
+export const WindowTabItemButton = forwardRef<
+  HTMLButtonElement,
+  WindowTabItemButtonProps
+>(function WindowTabItemButton(props: WindowTabItemButtonProps, ref) {
+  const { icon: Icon, selected, title, onClose, ...rest } = props;
+
+  const className = cn(
+    "h-9 flex items-center text-left text-xs font-semibold px-2 w-max-[150px]",
+    styles.tab,
+    selected
+      ? "border-x border-t bg-background border-b-background rounded-t"
+      : "border-b border-t border-t-secondary border-x-secondary opacity-65 hover:opacity-100"
+  );
+
+  return (
+    <button className={className} ref={ref} {...rest}>
+      <Icon className="w-4 h-4 ml-2 grow-0 shrink-0" />
+      <div className="line-clamp-1 grow px-2">{title}</div>
+      <div
+        className={cn(
+          "rounded-full hover:bg-red-600 hover:text-white w-4 h-4 ml-2 flex justify-center items-center",
+          styles.close
+        )}
+      >
+        <LucideX
+          className={cn("w-3 h-3 grow-0 shrink-0", styles.close)}
+          onClick={onClose}
+        />
+      </div>
+    </button>
+  );
+});
+
+export function SortableTab({
+  tab,
+  selected,
+  onSelectChange,
+  onClose,
+}: SortableTabProps) {
+  const { attributes, listeners, setNodeRef } = useSortable({ id: tab.key });
+
+  return (
+    <WindowTabItemButton
+      ref={setNodeRef}
+      icon={tab.icon}
+      title={tab.title}
+      onClick={onSelectChange}
+      selected={selected}
+      onClose={onClose}
+      {...attributes}
+      {...listeners}
+    />
+  );
+}
diff --git a/src/components/tabs/table-data-tab.tsx b/src/components/tabs/table-data-tab.tsx
index 132c1c50..77e65b0f 100644
--- a/src/components/tabs/table-data-tab.tsx
+++ b/src/components/tabs/table-data-tab.tsx
@@ -153,9 +153,9 @@ export default function TableDataWindow({ tableName }: TableDataContentProps) {
         </AlertDialog>
       )}
       <div className="flex-shrink-0 flex-grow-0">
-        <div className="flex p-1 gap-1">
+        <div className="flex p-1 gap-1 pb-2">
           <Button
-            variant={"outline"}
+            variant={"ghost"}
             size={"sm"}
             disabled={!changeNumber || isExecuting}
             onClick={onCommit}
@@ -177,7 +177,7 @@ export default function TableDataWindow({ tableName }: TableDataContentProps) {
           </Button>
 
           <Button
-            variant={"outline"}
+            variant={"ghost"}
             size={"sm"}
             disabled={!changeNumber}
             onClick={onDiscard}
@@ -189,16 +189,16 @@ export default function TableDataWindow({ tableName }: TableDataContentProps) {
             <Separator orientation="vertical" />
           </div>
 
-          <Button variant={"outline"} size={"sm"} onClick={onNewRow}>
+          <Button variant={"ghost"} size={"sm"} onClick={onNewRow}>
             <LucidePlus className="w-4 h-4 text-green-600" />
           </Button>
 
-          <Button variant={"outline"} size={"sm"} onClick={onRemoveRow}>
+          <Button variant={"ghost"} size={"sm"} onClick={onRemoveRow}>
             <LucideDelete className="w-4 h-4 text-red-600" />
           </Button>
 
           <Button
-            variant={"outline"}
+            variant={"ghost"}
             size={"sm"}
             onClick={() => setRevision((prev) => prev + 1)}
             disabled={loading}
diff --git a/src/components/windows-tab.tsx b/src/components/windows-tab.tsx
index 0914de1f..721c5f84 100644
--- a/src/components/windows-tab.tsx
+++ b/src/components/windows-tab.tsx
@@ -1,11 +1,32 @@
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 import openNewQuery from "@/messages/openNewQuery";
-import { LucidePlus, LucideX } from "lucide-react";
-import { createContext, useCallback, useContext, useMemo } from "react";
+import { LucideIcon, LucidePlus } from "lucide-react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+import {
+  DndContext,
+  closestCenter,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { SortableTab, WindowTabItemButton } from "./sortable-tab";
 
 export interface WindowTabItemProps {
   component: JSX.Element;
+  icon: LucideIcon;
   title: string;
   key: string;
 }
@@ -35,6 +56,16 @@ export default function WindowTabs({
   onSelectChange,
   onTabsChange,
 }: WindowTabsProps) {
+  const [dragTab, setDragTag] = useState<WindowTabItemProps | null>(null);
+
+  const pointerSensor = useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 8,
+    },
+  });
+
+  const sensors = useSensors(pointerSensor);
+
   const replaceCurrentTab = useCallback(
     (tab: WindowTabItemProps) => {
       if (tabs[selected]) {
@@ -50,46 +81,75 @@ export default function WindowTabs({
     [replaceCurrentTab]
   );
 
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      const { active } = event;
+      const activeIndex = tabs.findIndex((tab) => tab.key === active.id);
+      setDragTag(tabs[activeIndex]);
+    },
+    [tabs, setDragTag]
+  );
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (active.id !== over?.id) {
+        const selectedTab = tabs[selected];
+        const oldIndex = tabs.findIndex((tab) => tab.key === active.id);
+        const newIndex = tabs.findIndex((tab) => tab.key === over?.id);
+        const newTabs = arrayMove(tabs, oldIndex, newIndex);
+        onTabsChange(newTabs);
+
+        const selectedIndex = newTabs.findIndex(
+          (tab) => tab.key === selectedTab.key
+        );
+        onSelectChange(selectedIndex);
+      }
+      setDragTag(null);
+    },
+    [setDragTag, onTabsChange, tabs, onSelectChange, selected]
+  );
+
   return (
     <WindowTabsContext.Provider value={contextValue}>
-      <div className="flex flex-col w-full h-full">
-        <div className="flex-grow-0 flex-shrink-0">
-          <div className="flex p-2 gap-2">
-            <Button
-              size={"sm"}
-              variant={"outline"}
-              onClick={() => {
-                openNewQuery();
-              }}
-            >
-              <LucidePlus className="w-4 h-4" />
-            </Button>
-            {tabs.map((tab, idx) => {
-              return (
-                <Button
-                  size={"sm"}
-                  key={tab.key}
-                  variant={idx === selected ? "default" : "secondary"}
-                  onClick={() => onSelectChange(idx)}
-                >
-                  {tab.title}
-                  <LucideX
-                    className="w-4 h-4 ml-2"
-                    onClick={() => {
-                      onTabsChange(
-                        tabs.filter((nextTab) => nextTab.key !== tab.key)
-                      );
-                    }}
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        <div className="flex flex-col w-full h-full">
+          <div className="flex-grow-0 flex-shrink-0 pt-1 bg-secondary">
+            <div className="flex">
+              <button
+                className="px-3 py-2 border-b"
+                onClick={() => {
+                  openNewQuery();
+                }}
+              >
+                <LucidePlus className="w-4 h-4" />
+              </button>
+              <SortableContext
+                items={tabs.map((tab) => tab.key)}
+                strategy={verticalListSortingStrategy}
+              >
+                {tabs.map((tab, idx) => (
+                  <SortableTab
+                    key={tab.key}
+                    tab={tab}
+                    selected={idx === selected}
+                    onSelectChange={() => onSelectChange(idx)}
+                    onClose={() =>
+                      onTabsChange(tabs.filter((t) => t.key !== tab.key))
+                    }
                   />
-                </Button>
-              );
-            })}
+                ))}
+              </SortableContext>
+              <div className="border-b grow" />
+            </div>
           </div>
-          <Separator />
-        </div>
-        <div className="flex-grow relative">
-          {tabs.map((tab, tabIndex) => {
-            return (
+          <div className="flex-grow relative mt-1">
+            {tabs.map((tab, tabIndex) => (
               <div
                 className="absolute left-0 right-0 top-0 bottom-0"
                 style={{
@@ -99,10 +159,17 @@ export default function WindowTabs({
               >
                 {tab.component}
               </div>
-            );
-          })}
+            ))}
+          </div>
         </div>
-      </div>
+        <DragOverlay>
+          {dragTab ? (
+            <div className="fixed top-0 left-0 w-auto h-auto">
+              <WindowTabItemButton title={dragTab.title} icon={dragTab.icon} />
+            </div>
+          ) : null}
+        </DragOverlay>
+      </DndContext>
     </WindowTabsContext.Provider>
   );
 }