diff --git a/text2sql-backend/.gitignore b/text2sql-backend/.gitignore
index 7895cd44..c9ba56d7 100644
--- a/text2sql-backend/.gitignore
+++ b/text2sql-backend/.gitignore
@@ -64,9 +64,9 @@ cover/
 local_settings.py
 
 # Test dbs
-*.sqlite3
-*.sqlite3-journal
-*.db
+db.sqlite3
+db.sqlite3-journal
+test.sqlite3
 
 # Flask stuff:
 instance/
diff --git a/text2sql-backend/app.py b/text2sql-backend/app.py
index 2754e60a..417680ff 100644
--- a/text2sql-backend/app.py
+++ b/text2sql-backend/app.py
@@ -7,7 +7,7 @@
 
 from dataline.api.connection.router import router as connection_router
 from dataline.api.settings.router import router as settings_router
-from dataline.repositories.base import NotFoundError
+from dataline.repositories.base import NotFoundError, NotUniqueError
 
 logger = logging.getLogger(__name__)
 
@@ -15,6 +15,8 @@
 def handle_exceptions(request: Request, e: Exception) -> JSONResponse:
     if isinstance(e, NotFoundError):
         return JSONResponse(status_code=status.HTTP_404_NOT_FOUND, content={"message": e.message})
+    elif isinstance(e, NotUniqueError):
+        return JSONResponse(status_code=status.HTTP_409_CONFLICT, content={"message": e.message})
 
     logger.exception(e)
     return JSONResponse(status_code=status.HTTP_500_INTERNAL_SERVER_ERROR, content={"message": str(e)})
@@ -35,4 +37,6 @@ def __init__(self) -> None:
         self.include_router(connection_router)
 
         # Handle 500s separately to play well with TestClient and allow re-raising in tests
+        self.add_exception_handler(NotFoundError, handle_exceptions)
+        self.add_exception_handler(NotUniqueError, handle_exceptions)
         self.add_exception_handler(Exception, handle_exceptions)
diff --git a/text2sql-backend/dataline/api/connection/router.py b/text2sql-backend/dataline/api/connection/router.py
index 5734509f..f67564e0 100644
--- a/text2sql-backend/dataline/api/connection/router.py
+++ b/text2sql-backend/dataline/api/connection/router.py
@@ -15,7 +15,7 @@
     GetConnectionOut,
     TableSchemasOut,
 )
-from dataline.repositories.base import NotFoundError
+from dataline.repositories.base import NotFoundError, NotUniqueError
 from dataline.utils import get_sqlite_dsn
 from models import StatusType, SuccessResponse, UpdateConnectionRequest
 from services import SchemaService
@@ -49,7 +49,7 @@ def create_db_connection(dsn: str, name: str, is_sample: bool = False) -> Succes
     try:
         existing_connection = db.get_connection_from_dsn(dsn)
         if existing_connection:
-            return SuccessResponse(status=StatusType.ok, data=existing_connection)
+            raise NotUniqueError("Connection already exists.")
     except NotFoundError:
         pass
 
@@ -92,9 +92,12 @@ def validate_dsn_format(cls, value: str) -> str:
         dsn_regex = r"^[\w\+]+:\/\/[\/\w-]+.*$"
 
         if not re.match(dsn_regex, value):
-            raise ValueError(
-                'Invalid DSN format. The expected format is "driver://username:password@host:port/database".'
-            )
+            raise ValueError("Invalid DSN format.")
+
+        # Simpler way to connect to postgres even though officially deprecated
+        # This mirrors psql which is a very common way to connect to postgres
+        if "postgres://" in value:
+            value = value.replace("postgres://", "postgresql://")
 
         return value
 
@@ -102,7 +105,7 @@ def validate_dsn_format(cls, value: str) -> str:
 @router.post("/create-sample-db")
 async def create_sample_db() -> SuccessResponse[ConnectionOut]:
     name = "DVD Rental (Sample)"
-    dsn = get_sqlite_dsn(config.sample_postgres_path)
+    dsn = get_sqlite_dsn(config.sample_dvdrental_path)
     return create_db_connection(dsn, name, is_sample=True)
 
 
diff --git a/text2sql-backend/dataline/config.py b/text2sql-backend/dataline/config.py
index ccd37735..15264f5b 100644
--- a/text2sql-backend/dataline/config.py
+++ b/text2sql-backend/dataline/config.py
@@ -10,7 +10,9 @@ class Config(BaseSettings):
     sqlite_path: str = str(Path(__file__).parent / "db.sqlite3")
     sqlite_echo: bool = False
 
-    sample_postgres_path: str = str(Path(__file__).parent / "samples" / "postgres" / "dvd_rental.sqlite3")
+    sample_dvdrental_path: str = str(Path(__file__).parent / "samples" / "dvd_rental.sqlite3")
+    sample_netflix_path: str = str(Path(__file__).parent / "samples" / "netflix.sqlite3")
+    sample_titanic_path: str = str(Path(__file__).parent / "samples" / "titanic.sqlite3")
 
 
 config = Config()
diff --git a/text2sql-backend/dataline/models/conversation/model.py b/text2sql-backend/dataline/models/conversation/model.py
index 533d9fc0..d9c8de81 100644
--- a/text2sql-backend/dataline/models/conversation/model.py
+++ b/text2sql-backend/dataline/models/conversation/model.py
@@ -1,7 +1,7 @@
 from uuid import UUID
 
 from sqlalchemy import ForeignKey, Integer, String
-from sqlalchemy.orm import mapped_column, Mapped
+from sqlalchemy.orm import Mapped, mapped_column
 
 from dataline.models.base import DBModel
 from dataline.models.connection import ConnectionModel
diff --git a/text2sql-backend/dataline/samples/postgres/dvd_rental.sqlite3 b/text2sql-backend/dataline/samples/dvd_rental.sqlite3
similarity index 100%
rename from text2sql-backend/dataline/samples/postgres/dvd_rental.sqlite3
rename to text2sql-backend/dataline/samples/dvd_rental.sqlite3
diff --git a/text2sql-backend/dataline/samples/netflix.sqlite3 b/text2sql-backend/dataline/samples/netflix.sqlite3
new file mode 100644
index 00000000..559c8609
Binary files /dev/null and b/text2sql-backend/dataline/samples/netflix.sqlite3 differ
diff --git a/text2sql-backend/dataline/samples/titanic.sqlite3 b/text2sql-backend/dataline/samples/titanic.sqlite3
new file mode 100644
index 00000000..5278cf0f
Binary files /dev/null and b/text2sql-backend/dataline/samples/titanic.sqlite3 differ
diff --git a/text2sql-backend/db.py b/text2sql-backend/db.py
index 10767e17..b072bd0b 100644
--- a/text2sql-backend/db.py
+++ b/text2sql-backend/db.py
@@ -26,9 +26,10 @@
 
 @event.listens_for(Engine, "connect")
 def set_sqlite_pragma(dbapi_connection: Any, connection_record: Any) -> None:  # type: ignore[misc]
-    cursor = dbapi_connection.cursor()
-    cursor.execute("PRAGMA foreign_keys=ON")
-    cursor.close()
+    if type(dbapi_connection) is sqlite3.Connection:  # play well with other DB backends
+        cursor = dbapi_connection.cursor()
+        cursor.execute("PRAGMA foreign_keys=ON")
+        cursor.close()
 
 
 # Old way of using database - this is a single connection, hard to manage transactions
diff --git a/text2sql-backend/main.py b/text2sql-backend/main.py
index 55c54ed0..9f643d2a 100644
--- a/text2sql-backend/main.py
+++ b/text2sql-backend/main.py
@@ -15,6 +15,7 @@
 from dataline.services.settings import SettingsService
 from models import (
     ConversationWithMessagesWithResults,
+    Conversation,
     DataResult,
     MessageWithResults,
     Result,
@@ -88,6 +89,11 @@ async def delete_conversation(conversation_id: str) -> dict[str, str]:
     return {"status": "ok"}
 
 
+@app.get("/conversation/{conversation_id}")
+async def get_conversation(conversation_id: str) -> SuccessResponse[Conversation]:
+    return SuccessResponse(status=StatusType.ok, data=db.get_conversation(conversation_id))
+
+
 class ListMessageOut(BaseModel):
     messages: list[MessageWithResults]
 
diff --git a/text2sql-backend/tests/api/test_connection.py b/text2sql-backend/tests/api/test_connection.py
index 8d30349a..520a0c42 100644
--- a/text2sql-backend/tests/api/test_connection.py
+++ b/text2sql-backend/tests/api/test_connection.py
@@ -1,5 +1,6 @@
 import logging
 import pathlib
+from typing import AsyncGenerator
 
 import pytest
 import pytest_asyncio
@@ -22,11 +23,35 @@ async def test_create_sample_db_connection(client: TestClient) -> None:
     assert data["is_sample"] is True
     assert data["id"]
 
+    # TODO: Remove after sqlalchemy migration
+    # Manual rollback
+    client.delete(f"/connection/{data['id']}")
+
 
 @pytest_asyncio.fixture
-async def sample_db(client: TestClient) -> Connection:
+async def sample_db(client: TestClient) -> AsyncGenerator[Connection, None]:
+    response = client.post("/create-sample-db")
+    assert response.status_code == 200
+    connection = Connection(**response.json()["data"])
+
+    # TODO: Remove after sqlalchemy migration
+    # Manual rollback
+    yield connection
+    client.delete(f"/connection/{str(connection.id)}")
+
+
+@pytest.mark.asyncio
+async def test_create_sample_db_connection_twice_409(client: TestClient) -> None:
+    response = client.post("/create-sample-db")
+    assert response.status_code == 200
+    connection = Connection(**response.json()["data"])
+
     response = client.post("/create-sample-db")
-    return Connection(**response.json()["data"])
+    assert response.status_code == 409
+
+    # TODO: Remove after sqlalchemy migration
+    # Manual rollback
+    client.delete(f"/connection/{str(connection.id)}")
 
 
 @pytest.mark.asyncio
@@ -74,6 +99,10 @@ async def test_connect_db(client: TestClient) -> None:
     # Delete database after tests
     pathlib.Path("test.db").unlink(missing_ok=True)
 
+    # TODO: Remove after sqlalchemy migration
+    # Manual rollback
+    client.delete(f"/connection/{data['id']}")
+
 
 @pytest.mark.asyncio
 async def test_get_table_schemas(client: TestClient, sample_db: Connection) -> None:
@@ -140,19 +169,6 @@ async def test_update_table_schema_field_description(client: TestClient, example
     assert field.description == update_in["description"]
 
 
-@pytest.mark.asyncio
-@pytest.mark.skip(reason="Do not want to deal with this now")
-async def test_delete_connection(client: TestClient, sample_db: Connection) -> None:
-    response = client.delete(f"/connection/{str(sample_db.id)}")
-
-    assert response.status_code == 200
-
-    # Check if the connection was deleted
-    response = client.get("/connections")
-    data = response.json()["data"]
-    assert len(data["connections"]) == 0
-
-
 @pytest.mark.asyncio
 async def test_update_connection(client: TestClient, sample_db: Connection) -> None:
     update_in = {
@@ -169,3 +185,15 @@ async def test_update_connection(client: TestClient, sample_db: Connection) -> N
 
     # Delete database after tests
     pathlib.Path("new.db").unlink(missing_ok=True)
+
+
+@pytest.mark.asyncio
+async def test_delete_connection(client: TestClient, sample_db: Connection) -> None:
+    response = client.delete(f"/connection/{str(sample_db.id)}")
+
+    assert response.status_code == 200
+
+    # Check if the connection was deleted
+    response = client.get("/connections")
+    data = response.json()["data"]
+    assert len(data["connections"]) == 0
diff --git a/text2sql-backend/tests/api/test_settings.py b/text2sql-backend/tests/api/test_settings.py
index 8b32a607..c843173f 100644
--- a/text2sql-backend/tests/api/test_settings.py
+++ b/text2sql-backend/tests/api/test_settings.py
@@ -6,7 +6,6 @@
 import pytest_asyncio
 from fastapi.testclient import TestClient
 
-from dataline.repositories.base import NotFoundError
 
 logger = logging.getLogger(__name__)
 
@@ -97,9 +96,8 @@ async def test_get_info(client: TestClient, user_info: dict[str, str]) -> None:
 
 @pytest.mark.asyncio
 async def test_get_info_not_found(client: TestClient) -> None:
-    with pytest.raises(NotFoundError):
-        response = client.get("/settings/info")
-        assert response.status_code == 404
+    response = client.get("/settings/info")
+    assert response.status_code == 404
 
 
 FileTuple = tuple[str, tuple[str, BytesIO, str]]
diff --git a/text2sql-backend/tests/conftest.py b/text2sql-backend/tests/conftest.py
index 1954fd9c..e0e870c7 100644
--- a/text2sql-backend/tests/conftest.py
+++ b/text2sql-backend/tests/conftest.py
@@ -32,7 +32,7 @@ async def engine() -> AsyncGenerator[AsyncEngine, None]:
     pathlib.Path("test.sqlite3").unlink(missing_ok=True)
 
 
-@pytest_asyncio.fixture
+@pytest_asyncio.fixture(scope="function")
 async def session(engine: AsyncEngine, monkeypatch: pytest.MonkeyPatch) -> AsyncGenerator[AsyncSession, None]:
     async with AsyncSession(engine) as session, session.begin():
         # prevent test from committing anything, only flush
diff --git a/text2sql-frontend/src/api.ts b/text2sql-frontend/src/api.ts
index d13c9792..c7c75756 100644
--- a/text2sql-frontend/src/api.ts
+++ b/text2sql-frontend/src/api.ts
@@ -57,6 +57,7 @@ export type ConnectionResult = {
   database: string;
   name: string;
   dialect: string;
+  is_sample: boolean;
 };
 type ConnectResult = ApiResponse<ConnectionResult>;
 const createConnection = async (
diff --git a/text2sql-frontend/src/components/Catalyst/alert.tsx b/text2sql-frontend/src/components/Catalyst/alert.tsx
index 0fe11f1a..3a3d4e3c 100644
--- a/text2sql-frontend/src/components/Catalyst/alert.tsx
+++ b/text2sql-frontend/src/components/Catalyst/alert.tsx
@@ -6,32 +6,35 @@ import {
   Transition as HeadlessTransition,
   TransitionChild as HeadlessTransitionChild,
   type DialogProps as HeadlessDialogProps,
-} from '@headlessui/react'
-import clsx from 'clsx'
-import type React from 'react'
-import { Fragment } from 'react'
-import { Text } from './text'
+} from "@headlessui/react";
+import clsx from "clsx";
+import type React from "react";
+import { Fragment } from "react";
+import { Text } from "./text";
 
 const sizes = {
-  xs: 'sm:max-w-xs',
-  sm: 'sm:max-w-sm',
-  md: 'sm:max-w-md',
-  lg: 'sm:max-w-lg',
-  xl: 'sm:max-w-xl',
-  '2xl': 'sm:max-w-2xl',
-  '3xl': 'sm:max-w-3xl',
-  '4xl': 'sm:max-w-4xl',
-  '5xl': 'sm:max-w-5xl',
-}
+  xs: "sm:max-w-xs",
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg",
+  xl: "sm:max-w-xl",
+  "2xl": "sm:max-w-2xl",
+  "3xl": "sm:max-w-3xl",
+  "4xl": "sm:max-w-4xl",
+  "5xl": "sm:max-w-5xl",
+};
 
 export function Alert({
   open,
   onClose,
-  size = 'md',
+  size = "md",
   className,
   children,
   ...props
-}: { size?: keyof typeof sizes; children: React.ReactNode } & HeadlessDialogProps) {
+}: {
+  size?: keyof typeof sizes;
+  children: React.ReactNode;
+} & HeadlessDialogProps) {
   return (
     <HeadlessTransition appear as={Fragment} show={open} {...props}>
       <HeadlessDialog onClose={onClose}>
@@ -44,7 +47,7 @@ export function Alert({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/15 px-2 py-2 focus:outline-0 sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50" />
+          <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto bg-gray-950/15 px-2 py-2 focus:outline-0 sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-gray-950/50" />
         </HeadlessTransitionChild>
 
         <HeadlessTransitionChild
@@ -62,7 +65,7 @@ export function Alert({
               className={clsx(
                 className,
                 sizes[size],
-                'row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 sm:rounded-2xl sm:p-6 dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline'
+                "row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-gray-950/10 sm:rounded-2xl sm:p-6 dark:bg-gray-900 dark:ring-white/10 forced-colors:outline"
               )}
               enter="ease-out duration-100"
               enterFrom="scale-95"
@@ -77,43 +80,55 @@ export function Alert({
         </HeadlessTransitionChild>
       </HeadlessDialog>
     </HeadlessTransition>
-  )
+  );
 }
 
-export function AlertTitle({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+export function AlertTitle({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
   return (
     <HeadlessDialogTitle
       {...props}
       className={clsx(
         className,
-        'text-balance text-center text-base/6 font-semibold text-zinc-950 sm:text-wrap sm:text-left sm:text-sm/6 dark:text-white'
+        "text-balance text-center text-base/6 font-semibold text-gray-950 sm:text-wrap sm:text-left sm:text-sm/6 dark:text-white"
       )}
     />
-  )
+  );
 }
 
-export function AlertDescription({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+export function AlertDescription({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
   return (
     <HeadlessDescription
       as={Text}
       {...props}
-      className={clsx(className, 'mt-2 text-pretty text-center sm:text-left')}
+      className={clsx(className, "mt-2 text-pretty text-center sm:text-left")}
     />
-  )
+  );
 }
 
-export function AlertBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
-  return <div {...props} className={clsx(className, 'mt-4')} />
+export function AlertBody({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return <div {...props} className={clsx(className, "mt-4")} />;
 }
 
-export function AlertActions({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+export function AlertActions({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
   return (
     <div
       {...props}
       className={clsx(
         className,
-        'mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto'
+        "mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto"
       )}
     />
-  )
+  );
 }
diff --git a/text2sql-frontend/src/components/Catalyst/badge.tsx b/text2sql-frontend/src/components/Catalyst/badge.tsx
index fc26845b..21bc7cf1 100644
--- a/text2sql-frontend/src/components/Catalyst/badge.tsx
+++ b/text2sql-frontend/src/components/Catalyst/badge.tsx
@@ -1,70 +1,84 @@
-import { Button as HeadlessButton, type ButtonProps as HeadlessButtonProps } from '@headlessui/react'
-import clsx from 'clsx'
-import React from 'react'
-import { TouchTarget } from './button'
-import { Link } from './link'
+import {
+  Button as HeadlessButton,
+  type ButtonProps as HeadlessButtonProps,
+} from "@headlessui/react";
+import clsx from "clsx";
+import React from "react";
+import { TouchTarget } from "./button";
+import { Link } from "./link";
 
 const colors = {
-  red: 'bg-red-500/15 text-red-700 group-data-[hover]:bg-red-500/25 dark:bg-red-500/10 dark:text-red-400 dark:group-data-[hover]:bg-red-500/20',
+  red: "bg-red-500/15 text-red-700 group-data-[hover]:bg-red-500/25 dark:bg-red-500/10 dark:text-red-400 dark:group-data-[hover]:bg-red-500/20",
   orange:
-    'bg-orange-500/15 text-orange-700 group-data-[hover]:bg-orange-500/25 dark:bg-orange-500/10 dark:text-orange-400 dark:group-data-[hover]:bg-orange-500/20',
+    "bg-orange-500/15 text-orange-700 group-data-[hover]:bg-orange-500/25 dark:bg-orange-500/10 dark:text-orange-400 dark:group-data-[hover]:bg-orange-500/20",
   amber:
-    'bg-amber-400/20 text-amber-700 group-data-[hover]:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400 dark:group-data-[hover]:bg-amber-400/15',
+    "bg-amber-400/20 text-amber-700 group-data-[hover]:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400 dark:group-data-[hover]:bg-amber-400/15",
   yellow:
-    'bg-yellow-400/20 text-yellow-700 group-data-[hover]:bg-yellow-400/30 dark:bg-yellow-400/10 dark:text-yellow-300 dark:group-data-[hover]:bg-yellow-400/15',
-  lime: 'bg-lime-400/20 text-lime-700 group-data-[hover]:bg-lime-400/30 dark:bg-lime-400/10 dark:text-lime-300 dark:group-data-[hover]:bg-lime-400/15',
+    "bg-yellow-400/20 text-yellow-700 group-data-[hover]:bg-yellow-400/30 dark:bg-yellow-400/10 dark:text-yellow-300 dark:group-data-[hover]:bg-yellow-400/15",
+  lime: "bg-lime-400/20 text-lime-700 group-data-[hover]:bg-lime-400/30 dark:bg-lime-400/10 dark:text-lime-300 dark:group-data-[hover]:bg-lime-400/15",
   green:
-    'bg-green-500/15 text-green-700 group-data-[hover]:bg-green-500/25 dark:bg-green-500/10 dark:text-green-400 dark:group-data-[hover]:bg-green-500/20',
+    "bg-green-500/15 text-green-700 group-data-[hover]:bg-green-500/25 dark:bg-green-500/10 dark:text-green-400 dark:group-data-[hover]:bg-green-500/20",
   emerald:
-    'bg-emerald-500/15 text-emerald-700 group-data-[hover]:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-data-[hover]:bg-emerald-500/20',
-  teal: 'bg-teal-500/15 text-teal-700 group-data-[hover]:bg-teal-500/25 dark:bg-teal-500/10 dark:text-teal-300 dark:group-data-[hover]:bg-teal-500/20',
-  cyan: 'bg-cyan-400/20 text-cyan-700 group-data-[hover]:bg-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-300 dark:group-data-[hover]:bg-cyan-400/15',
-  sky: 'bg-sky-500/15 text-sky-700 group-data-[hover]:bg-sky-500/25 dark:bg-sky-500/10 dark:text-sky-300 dark:group-data-[hover]:bg-sky-500/20',
-  blue: 'bg-blue-500/15 text-blue-700 group-data-[hover]:bg-blue-500/25 dark:text-blue-400 dark:group-data-[hover]:bg-blue-500/25',
+    "bg-emerald-500/15 text-emerald-700 group-data-[hover]:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-data-[hover]:bg-emerald-500/20",
+  teal: "bg-teal-500/15 text-teal-700 group-data-[hover]:bg-teal-500/25 dark:bg-teal-500/10 dark:text-teal-300 dark:group-data-[hover]:bg-teal-500/20",
+  cyan: "bg-cyan-400/20 text-cyan-700 group-data-[hover]:bg-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-300 dark:group-data-[hover]:bg-cyan-400/15",
+  sky: "bg-sky-500/15 text-sky-700 group-data-[hover]:bg-sky-500/25 dark:bg-sky-500/10 dark:text-sky-300 dark:group-data-[hover]:bg-sky-500/20",
+  blue: "bg-blue-500/15 text-blue-700 group-data-[hover]:bg-blue-500/25 dark:text-blue-400 dark:group-data-[hover]:bg-blue-500/25",
   indigo:
-    'bg-indigo-500/15 text-indigo-700 group-data-[hover]:bg-indigo-500/25 dark:text-indigo-400 dark:group-data-[hover]:bg-indigo-500/20',
+    "bg-indigo-500/15 text-indigo-700 group-data-[hover]:bg-indigo-500/25 dark:text-indigo-400 dark:group-data-[hover]:bg-indigo-500/20",
   violet:
-    'bg-violet-500/15 text-violet-700 group-data-[hover]:bg-violet-500/25 dark:text-violet-400 dark:group-data-[hover]:bg-violet-500/20',
+    "bg-violet-500/15 text-violet-700 group-data-[hover]:bg-violet-500/25 dark:text-violet-400 dark:group-data-[hover]:bg-violet-500/20",
   purple:
-    'bg-purple-500/15 text-purple-700 group-data-[hover]:bg-purple-500/25 dark:text-purple-400 dark:group-data-[hover]:bg-purple-500/20',
+    "bg-purple-500/15 text-purple-700 group-data-[hover]:bg-purple-500/25 dark:text-purple-400 dark:group-data-[hover]:bg-purple-500/20",
   fuchsia:
-    'bg-fuchsia-400/15 text-fuchsia-700 group-data-[hover]:bg-fuchsia-400/25 dark:bg-fuchsia-400/10 dark:text-fuchsia-400 dark:group-data-[hover]:bg-fuchsia-400/20',
-  pink: 'bg-pink-400/15 text-pink-700 group-data-[hover]:bg-pink-400/25 dark:bg-pink-400/10 dark:text-pink-400 dark:group-data-[hover]:bg-pink-400/20',
-  rose: 'bg-rose-400/15 text-rose-700 group-data-[hover]:bg-rose-400/25 dark:bg-rose-400/10 dark:text-rose-400 dark:group-data-[hover]:bg-rose-400/20',
-  zinc: 'bg-zinc-600/10 text-zinc-700 group-data-[hover]:bg-zinc-600/20 dark:bg-white/5 dark:text-zinc-400 dark:group-data-[hover]:bg-white/10',
-}
+    "bg-fuchsia-400/15 text-fuchsia-700 group-data-[hover]:bg-fuchsia-400/25 dark:bg-fuchsia-400/10 dark:text-fuchsia-400 dark:group-data-[hover]:bg-fuchsia-400/20",
+  pink: "bg-pink-400/15 text-pink-700 group-data-[hover]:bg-pink-400/25 dark:bg-pink-400/10 dark:text-pink-400 dark:group-data-[hover]:bg-pink-400/20",
+  rose: "bg-rose-400/15 text-rose-700 group-data-[hover]:bg-rose-400/25 dark:bg-rose-400/10 dark:text-rose-400 dark:group-data-[hover]:bg-rose-400/20",
+  zinc: "bg-gray-600/10 text-gray-700 group-data-[hover]:bg-gray-600/20 dark:bg-white/5 dark:text-gray-400 dark:group-data-[hover]:bg-white/10",
+};
 
-type BadgeProps = { color?: keyof typeof colors }
+type BadgeProps = { color?: keyof typeof colors };
 
-export function Badge({ color = 'zinc', className, ...props }: BadgeProps & React.ComponentPropsWithoutRef<'span'>) {
+export function Badge({
+  color = "zinc",
+  className,
+  ...props
+}: BadgeProps & React.ComponentPropsWithoutRef<"span">) {
   return (
     <span
       {...props}
       className={clsx(
         className,
-        'inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline',
+        "inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline",
         colors[color]
       )}
     />
-  )
+  );
 }
 
 export const BadgeButton = React.forwardRef(function BadgeButton(
   {
-    color = 'zinc',
+    color = "zinc",
     className,
     children,
     ...props
-  }: BadgeProps & { children: React.ReactNode } & (HeadlessButtonProps | React.ComponentPropsWithoutRef<typeof Link>),
+  }: BadgeProps & { children: React.ReactNode } & (
+      | HeadlessButtonProps
+      | React.ComponentPropsWithoutRef<typeof Link>
+    ),
   ref: React.ForwardedRef<HTMLElement>
 ) {
   let classes = clsx(
     className,
-    'group relative inline-flex rounded-md focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500'
-  )
+    "group relative inline-flex rounded-md focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500"
+  );
 
-  return 'href' in props ? (
-    <Link {...props} className={classes} ref={ref as React.ForwardedRef<HTMLAnchorElement>}>
+  return "href" in props ? (
+    <Link
+      {...props}
+      className={classes}
+      ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+    >
       <TouchTarget>
         <Badge color={color}>{children}</Badge>
       </TouchTarget>
@@ -75,5 +89,5 @@ export const BadgeButton = React.forwardRef(function BadgeButton(
         <Badge color={color}>{children}</Badge>
       </TouchTarget>
     </HeadlessButton>
-  )
-})
+  );
+});
diff --git a/text2sql-frontend/src/components/Catalyst/button.tsx b/text2sql-frontend/src/components/Catalyst/button.tsx
index ed7874f0..636635a5 100644
--- a/text2sql-frontend/src/components/Catalyst/button.tsx
+++ b/text2sql-frontend/src/components/Catalyst/button.tsx
@@ -1,186 +1,192 @@
-import { Button as HeadlessButton, type ButtonProps as HeadlessButtonProps } from '@headlessui/react'
-import { clsx } from 'clsx'
-import React from 'react'
-import { Link } from './link'
+import {
+  Button as HeadlessButton,
+  type ButtonProps as HeadlessButtonProps,
+} from "@headlessui/react";
+import { clsx } from "clsx";
+import React from "react";
+import { Link } from "./link";
 
 const styles = {
   base: [
     // Base
-    'relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold',
+    "relative isolate inline-flex items-center justify-center gap-x-2 rounded-lg border text-base/6 font-semibold",
 
     // Sizing
-    'px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6',
+    "px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6",
 
     // Focus
-    'focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500',
+    "focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500",
 
     // Disabled
-    'data-[disabled]:opacity-50',
+    "data-[disabled]:opacity-50",
 
     // Icon
-    '[&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText]',
+    "[&>[data-slot=icon]]:-mx-0.5 [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:data-[hover]:[--btn-icon:ButtonText]",
   ],
   solid: [
     // Optical border, implemented as the button background to avoid corner artifacts
-    'border-transparent bg-[--btn-border]',
+    "border-transparent bg-[--btn-border]",
 
     // Dark mode: border is rendered on `after` so background is set to button background
-    'dark:bg-[--btn-bg]',
+    "dark:bg-[--btn-bg]",
 
     // Button background, implemented as foreground layer to stack on top of pseudo-border layer
-    'before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-[--btn-bg]',
+    "before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-[--btn-bg]",
 
     // Drop shadow, applied to the inset `before` layer so it blends with the border
-    'before:shadow',
+    "before:shadow",
 
     // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
-    'dark:before:hidden',
+    "dark:before:hidden",
 
     // Dark mode: Subtle white outline is applied using a border
-    'dark:border-white/5',
+    "dark:border-white/5",
 
     // Shim/overlay, inset to match button foreground and used for hover state + highlight shadow
-    'after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.lg)-1px)]',
+    "after:absolute after:inset-0 after:-z-10 after:rounded-[calc(theme(borderRadius.lg)-1px)]",
 
     // Inner highlight shadow
-    'after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)]',
+    "after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)]",
 
     // White overlay on hover
-    'after:data-[active]:bg-[--btn-hover-overlay] after:data-[hover]:bg-[--btn-hover-overlay]',
+    "after:data-[active]:bg-[--btn-hover-overlay] after:data-[hover]:bg-[--btn-hover-overlay]",
 
     // Dark mode: `after` layer expands to cover entire button
-    'dark:after:-inset-px dark:after:rounded-lg',
+    "dark:after:-inset-px dark:after:rounded-lg",
 
     // Disabled
-    'before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none',
+    "before:data-[disabled]:shadow-none after:data-[disabled]:shadow-none",
   ],
   outline: [
     // Base
-    'border-zinc-950/10 text-zinc-950 data-[active]:bg-zinc-950/[2.5%] data-[hover]:bg-zinc-950/[2.5%]',
+    "border-gray-950/10 text-gray-950 data-[active]:bg-gray-950/[2.5%] data-[hover]:bg-gray-950/[2.5%]",
 
     // Dark mode
-    'dark:border-white/15 dark:text-white dark:[--btn-bg:transparent] dark:data-[active]:bg-white/5 dark:data-[hover]:bg-white/5',
+    "dark:border-white/15 dark:text-white dark:[--btn-bg:transparent] dark:data-[active]:bg-white/5 dark:data-[hover]:bg-white/5",
 
     // Icon
-    '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]',
+    "[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
   ],
   plain: [
     // Base
-    'border-transparent text-zinc-950 data-[active]:bg-zinc-950/5 data-[hover]:bg-zinc-950/5',
+    "border-transparent text-gray-950 data-[active]:bg-gray-950/5 data-[hover]:bg-gray-950/5",
 
     // Dark mode
-    'dark:text-white dark:data-[active]:bg-white/10 dark:data-[hover]:bg-white/10',
+    "dark:text-white dark:data-[active]:bg-white/10 dark:data-[hover]:bg-white/10",
 
     // Icon
-    '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]',
+    "[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
   ],
   colors: {
-    'dark/zinc': [
-      'text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
-      'dark:text-white dark:[--btn-bg:theme(colors.zinc.600)] dark:[--btn-hover-overlay:theme(colors.white/5%)]',
-      '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]',
+    "dark/zinc": [
+      "text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
+      "dark:text-white dark:[--btn-bg:theme(colors.zinc.600)] dark:[--btn-hover-overlay:theme(colors.white/5%)]",
+      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]",
     ],
     light: [
-      'text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]',
-      'dark:text-white dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]',
-      '[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]',
+      "text-gray-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]",
+      "dark:text-white dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]",
+      "[--btn-icon:theme(colors.zinc.500)] data-[active]:[--btn-icon:theme(colors.zinc.700)] data-[hover]:[--btn-icon:theme(colors.zinc.700)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
     ],
-    'dark/white': [
-      'text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
-      'dark:text-zinc-950 dark:[--btn-bg:white] dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]',
-      '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]',
+    "dark/white": [
+      "text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
+      "dark:text-gray-950 dark:[--btn-bg:white] dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]",
+      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)] dark:[--btn-icon:theme(colors.zinc.500)] dark:data-[active]:[--btn-icon:theme(colors.zinc.400)] dark:data-[hover]:[--btn-icon:theme(colors.zinc.400)]",
     ],
     dark: [
-      'text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]',
-      'dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]',
-      '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]',
+      "text-white [--btn-bg:theme(colors.zinc.900)] [--btn-border:theme(colors.zinc.950/90%)] [--btn-hover-overlay:theme(colors.white/10%)]",
+      "dark:[--btn-hover-overlay:theme(colors.white/5%)] dark:[--btn-bg:theme(colors.zinc.800)]",
+      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]",
     ],
     white: [
-      'text-zinc-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]',
-      'dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]',
-      '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.500)] data-[hover]:[--btn-icon:theme(colors.zinc.500)]',
+      "text-gray-950 [--btn-bg:white] [--btn-border:theme(colors.zinc.950/10%)] [--btn-hover-overlay:theme(colors.zinc.950/2.5%)] data-[active]:[--btn-border:theme(colors.zinc.950/15%)] data-[hover]:[--btn-border:theme(colors.zinc.950/15%)]",
+      "dark:[--btn-hover-overlay:theme(colors.zinc.950/5%)]",
+      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.500)] data-[hover]:[--btn-icon:theme(colors.zinc.500)]",
     ],
     zinc: [
-      'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.zinc.600)] [--btn-border:theme(colors.zinc.700/90%)]',
-      'dark:[--btn-hover-overlay:theme(colors.white/5%)]',
-      '[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]',
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.zinc.600)] [--btn-border:theme(colors.zinc.700/90%)]",
+      "dark:[--btn-hover-overlay:theme(colors.white/5%)]",
+      "[--btn-icon:theme(colors.zinc.400)] data-[active]:[--btn-icon:theme(colors.zinc.300)] data-[hover]:[--btn-icon:theme(colors.zinc.300)]",
     ],
     indigo: [
-      'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.indigo.500)] [--btn-border:theme(colors.indigo.600/90%)]',
-      '[--btn-icon:theme(colors.indigo.300)] data-[active]:[--btn-icon:theme(colors.indigo.200)] data-[hover]:[--btn-icon:theme(colors.indigo.200)]',
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.indigo.500)] [--btn-border:theme(colors.indigo.600/90%)]",
+      "[--btn-icon:theme(colors.indigo.300)] data-[active]:[--btn-icon:theme(colors.indigo.200)] data-[hover]:[--btn-icon:theme(colors.indigo.200)]",
     ],
     cyan: [
-      'text-cyan-950 [--btn-bg:theme(colors.cyan.300)] [--btn-border:theme(colors.cyan.400/80%)] [--btn-hover-overlay:theme(colors.white/25%)]',
-      '[--btn-icon:theme(colors.cyan.500)]',
+      "text-cyan-950 [--btn-bg:theme(colors.cyan.300)] [--btn-border:theme(colors.cyan.400/80%)] [--btn-hover-overlay:theme(colors.white/25%)]",
+      "[--btn-icon:theme(colors.cyan.500)]",
     ],
     red: [
-      'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.red.600)] [--btn-border:theme(colors.red.700/90%)]',
-      '[--btn-icon:theme(colors.red.300)] data-[active]:[--btn-icon:theme(colors.red.200)] data-[hover]:[--btn-icon:theme(colors.red.200)]',
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.red.600)] [--btn-border:theme(colors.red.700/90%)]",
+      "[--btn-icon:theme(colors.red.300)] data-[active]:[--btn-icon:theme(colors.red.200)] data-[hover]:[--btn-icon:theme(colors.red.200)]",
     ],
     orange: [
-      'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.orange.500)] [--btn-border:theme(colors.orange.600/90%)]',
-      '[--btn-icon:theme(colors.orange.300)] data-[active]:[--btn-icon:theme(colors.orange.200)] data-[hover]:[--btn-icon:theme(colors.orange.200)]',
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.orange.500)] [--btn-border:theme(colors.orange.600/90%)]",
+      "[--btn-icon:theme(colors.orange.300)] data-[active]:[--btn-icon:theme(colors.orange.200)] data-[hover]:[--btn-icon:theme(colors.orange.200)]",
     ],
     amber: [
-      'text-amber-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.amber.400)] [--btn-border:theme(colors.amber.500/80%)]',
-      '[--btn-icon:theme(colors.amber.600)]',
+      "text-amber-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.amber.400)] [--btn-border:theme(colors.amber.500/80%)]",
+      "[--btn-icon:theme(colors.amber.600)]",
     ],
     yellow: [
-      'text-yellow-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.yellow.300)] [--btn-border:theme(colors.yellow.400/80%)]',
-      '[--btn-icon:theme(colors.yellow.600)] data-[active]:[--btn-icon:theme(colors.yellow.700)] data-[hover]:[--btn-icon:theme(colors.yellow.700)]',
+      "text-yellow-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.yellow.300)] [--btn-border:theme(colors.yellow.400/80%)]",
+      "[--btn-icon:theme(colors.yellow.600)] data-[active]:[--btn-icon:theme(colors.yellow.700)] data-[hover]:[--btn-icon:theme(colors.yellow.700)]",
     ],
     lime: [
-      'text-lime-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.lime.300)] [--btn-border:theme(colors.lime.400/80%)]',
-      '[--btn-icon:theme(colors.lime.600)] data-[active]:[--btn-icon:theme(colors.lime.700)] data-[hover]:[--btn-icon:theme(colors.lime.700)]',
+      "text-lime-950 [--btn-hover-overlay:theme(colors.white/25%)] [--btn-bg:theme(colors.lime.300)] [--btn-border:theme(colors.lime.400/80%)]",
+      "[--btn-icon:theme(colors.lime.600)] data-[active]:[--btn-icon:theme(colors.lime.700)] data-[hover]:[--btn-icon:theme(colors.lime.700)]",
     ],
     green: [
-      'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.green.600)] [--btn-border:theme(colors.green.700/90%)]',
-      '[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]',
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.green.600)] [--btn-border:theme(colors.green.700/90%)]",
+      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
     ],
     emerald: [
-      'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.emerald.600)] [--btn-border:theme(colors.emerald.700/90%)]',
-      '[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]',
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.emerald.600)] [--btn-border:theme(colors.emerald.700/90%)]",
+      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
     ],
     teal: [
-      'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.teal.600)] [--btn-border:theme(colors.teal.700/90%)]',
-      '[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]',
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.teal.600)] [--btn-border:theme(colors.teal.700/90%)]",
+      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
     ],
     sky: [
-      'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.sky.500)] [--btn-border:theme(colors.sky.600/80%)]',
-      '[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]',
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.sky.500)] [--btn-border:theme(colors.sky.600/80%)]",
+      "[--btn-icon:theme(colors.white/60%)] data-[active]:[--btn-icon:theme(colors.white/80%)] data-[hover]:[--btn-icon:theme(colors.white/80%)]",
     ],
     blue: [
-      'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.blue.600)] [--btn-border:theme(colors.blue.700/90%)]',
-      '[--btn-icon:theme(colors.blue.400)] data-[active]:[--btn-icon:theme(colors.blue.300)] data-[hover]:[--btn-icon:theme(colors.blue.300)]',
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.blue.600)] [--btn-border:theme(colors.blue.700/90%)]",
+      "[--btn-icon:theme(colors.blue.400)] data-[active]:[--btn-icon:theme(colors.blue.300)] data-[hover]:[--btn-icon:theme(colors.blue.300)]",
     ],
     violet: [
-      'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.violet.500)] [--btn-border:theme(colors.violet.600/90%)]',
-      '[--btn-icon:theme(colors.violet.300)] data-[active]:[--btn-icon:theme(colors.violet.200)] data-[hover]:[--btn-icon:theme(colors.violet.200)]',
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.violet.500)] [--btn-border:theme(colors.violet.600/90%)]",
+      "[--btn-icon:theme(colors.violet.300)] data-[active]:[--btn-icon:theme(colors.violet.200)] data-[hover]:[--btn-icon:theme(colors.violet.200)]",
     ],
     purple: [
-      'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.purple.500)] [--btn-border:theme(colors.purple.600/90%)]',
-      '[--btn-icon:theme(colors.purple.300)] data-[active]:[--btn-icon:theme(colors.purple.200)] data-[hover]:[--btn-icon:theme(colors.purple.200)]',
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.purple.500)] [--btn-border:theme(colors.purple.600/90%)]",
+      "[--btn-icon:theme(colors.purple.300)] data-[active]:[--btn-icon:theme(colors.purple.200)] data-[hover]:[--btn-icon:theme(colors.purple.200)]",
     ],
     fuchsia: [
-      'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.fuchsia.500)] [--btn-border:theme(colors.fuchsia.600/90%)]',
-      '[--btn-icon:theme(colors.fuchsia.300)] data-[active]:[--btn-icon:theme(colors.fuchsia.200)] data-[hover]:[--btn-icon:theme(colors.fuchsia.200)]',
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.fuchsia.500)] [--btn-border:theme(colors.fuchsia.600/90%)]",
+      "[--btn-icon:theme(colors.fuchsia.300)] data-[active]:[--btn-icon:theme(colors.fuchsia.200)] data-[hover]:[--btn-icon:theme(colors.fuchsia.200)]",
     ],
     pink: [
-      'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.pink.500)] [--btn-border:theme(colors.pink.600/90%)]',
-      '[--btn-icon:theme(colors.pink.300)] data-[active]:[--btn-icon:theme(colors.pink.200)] data-[hover]:[--btn-icon:theme(colors.pink.200)]',
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.pink.500)] [--btn-border:theme(colors.pink.600/90%)]",
+      "[--btn-icon:theme(colors.pink.300)] data-[active]:[--btn-icon:theme(colors.pink.200)] data-[hover]:[--btn-icon:theme(colors.pink.200)]",
     ],
     rose: [
-      'text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.rose.500)] [--btn-border:theme(colors.rose.600/90%)]',
-      '[--btn-icon:theme(colors.rose.300)] data-[active]:[--btn-icon:theme(colors.rose.200)] data-[hover]:[--btn-icon:theme(colors.rose.200)]',
+      "text-white [--btn-hover-overlay:theme(colors.white/10%)] [--btn-bg:theme(colors.rose.500)] [--btn-border:theme(colors.rose.600/90%)]",
+      "[--btn-icon:theme(colors.rose.300)] data-[active]:[--btn-icon:theme(colors.rose.200)] data-[hover]:[--btn-icon:theme(colors.rose.200)]",
     ],
   },
-}
+};
 
 type ButtonProps = (
   | { color?: keyof typeof styles.colors; outline?: never; plain?: never }
   | { color?: never; outline: true; plain?: never }
   | { color?: never; outline?: never; plain: true }
-) & { children: React.ReactNode } & (HeadlessButtonProps | React.ComponentPropsWithoutRef<typeof Link>)
+) & { children: React.ReactNode } & (
+    | HeadlessButtonProps
+    | React.ComponentPropsWithoutRef<typeof Link>
+  );
 
 export const Button = React.forwardRef(function Button(
   { color, outline, plain, className, children, ...props }: ButtonProps,
@@ -189,19 +195,31 @@ export const Button = React.forwardRef(function Button(
   let classes = clsx(
     className,
     styles.base,
-    outline ? styles.outline : plain ? styles.plain : clsx(styles.solid, styles.colors[color ?? 'dark/zinc'])
-  )
-
-  return 'href' in props ? (
-    <Link {...props} className={classes} ref={ref as React.ForwardedRef<HTMLAnchorElement>}>
+    outline
+      ? styles.outline
+      : plain
+      ? styles.plain
+      : clsx(styles.solid, styles.colors[color ?? "dark/zinc"])
+  );
+
+  return "href" in props ? (
+    <Link
+      {...props}
+      className={classes}
+      ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+    >
       <TouchTarget>{children}</TouchTarget>
     </Link>
   ) : (
-    <HeadlessButton {...props} className={clsx(classes, 'cursor-default')} ref={ref}>
+    <HeadlessButton
+      {...props}
+      className={clsx(classes, "cursor-default")}
+      ref={ref}
+    >
       <TouchTarget>{children}</TouchTarget>
     </HeadlessButton>
-  )
-})
+  );
+});
 
 /* Expand the hit area to at least 44×44px on touch devices */
 export function TouchTarget({ children }: { children: React.ReactNode }) {
@@ -213,5 +231,5 @@ export function TouchTarget({ children }: { children: React.ReactNode }) {
         aria-hidden="true"
       />
     </>
-  )
+  );
 }
diff --git a/text2sql-frontend/src/components/Catalyst/checkbox.tsx b/text2sql-frontend/src/components/Catalyst/checkbox.tsx
index 71122608..720f2f02 100644
--- a/text2sql-frontend/src/components/Catalyst/checkbox.tsx
+++ b/text2sql-frontend/src/components/Catalyst/checkbox.tsx
@@ -3,11 +3,14 @@ import {
   Field as HeadlessField,
   type CheckboxProps as HeadlessCheckboxProps,
   type FieldProps as HeadlessFieldProps,
-} from '@headlessui/react'
-import { clsx } from 'clsx'
-import type React from 'react'
+} from "@headlessui/react";
+import { clsx } from "clsx";
+import type React from "react";
 
-export function CheckboxGroup({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+export function CheckboxGroup({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
   return (
     <div
       data-slot="control"
@@ -16,13 +19,13 @@ export function CheckboxGroup({ className, ...props }: React.ComponentPropsWitho
         className,
 
         // Basic groups
-        'space-y-3',
+        "space-y-3",
 
         // With descriptions
-        'has-[[data-slot=description]]:space-y-6 [&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
+        "has-[[data-slot=description]]:space-y-6 [&_[data-slot=label]]:has-[[data-slot=description]]:font-medium"
       )}
     />
-  )
+  );
 }
 
 export function CheckboxField({ className, ...props }: HeadlessFieldProps) {
@@ -34,116 +37,116 @@ export function CheckboxField({ className, ...props }: HeadlessFieldProps) {
         className,
 
         // Base layout
-        'grid grid-cols-[1.125rem_1fr] items-center gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]',
+        "grid grid-cols-[1.125rem_1fr] items-center gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]",
 
         // Control layout
-        '[&>[data-slot=control]]:col-start-1 [&>[data-slot=control]]:row-start-1 [&>[data-slot=control]]:justify-self-center',
+        "[&>[data-slot=control]]:col-start-1 [&>[data-slot=control]]:row-start-1 [&>[data-slot=control]]:justify-self-center",
 
         // Label layout
-        '[&>[data-slot=label]]:col-start-2 [&>[data-slot=label]]:row-start-1 [&>[data-slot=label]]:justify-self-start',
+        "[&>[data-slot=label]]:col-start-2 [&>[data-slot=label]]:row-start-1 [&>[data-slot=label]]:justify-self-start",
 
         // Description layout
-        '[&>[data-slot=description]]:col-start-2 [&>[data-slot=description]]:row-start-2',
+        "[&>[data-slot=description]]:col-start-2 [&>[data-slot=description]]:row-start-2",
 
         // With description
-        '[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
+        "[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium"
       )}
     />
-  )
+  );
 }
 
 const base = [
   // Basic layout
-  'relative isolate flex size-[1.125rem] items-center justify-center rounded-[0.3125rem] sm:size-4',
+  "relative isolate flex size-[1.125rem] items-center justify-center rounded-[0.3125rem] sm:size-4",
 
   // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
-  'before:absolute before:inset-0 before:-z-10 before:rounded-[calc(0.3125rem-1px)] before:bg-white before:shadow',
+  "before:absolute before:inset-0 before:-z-10 before:rounded-[calc(0.3125rem-1px)] before:bg-white before:shadow",
 
   // Background color when checked
-  'before:group-data-[checked]:bg-[--checkbox-checked-bg]',
+  "before:group-data-[checked]:bg-[--checkbox-checked-bg]",
 
   // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
-  'dark:before:hidden',
+  "dark:before:hidden",
 
   // Background color applied to control in dark mode
-  'dark:bg-white/5 dark:group-data-[checked]:bg-[--checkbox-checked-bg]',
+  "dark:bg-white/5 dark:group-data-[checked]:bg-[--checkbox-checked-bg]",
 
   // Border
-  'border border-zinc-950/15 group-data-[checked]:border-transparent group-data-[checked]:group-data-[hover]:border-transparent group-data-[hover]:border-zinc-950/30 group-data-[checked]:bg-[--checkbox-checked-border]',
-  'dark:border-white/15 dark:group-data-[checked]:border-white/5 dark:group-data-[checked]:group-data-[hover]:border-white/5 dark:group-data-[hover]:border-white/30',
+  "border border-gray-950/15 group-data-[checked]:border-transparent group-data-[checked]:group-data-[hover]:border-transparent group-data-[hover]:border-gray-950/30 group-data-[checked]:bg-[--checkbox-checked-border]",
+  "dark:border-white/15 dark:group-data-[checked]:border-white/5 dark:group-data-[checked]:group-data-[hover]:border-white/5 dark:group-data-[hover]:border-white/30",
 
   // Inner highlight shadow
-  'after:absolute after:inset-0 after:rounded-[calc(0.3125rem-1px)] after:shadow-[inset_0_1px_theme(colors.white/15%)]',
-  'dark:after:-inset-px dark:after:hidden dark:after:rounded-[0.3125rem] dark:group-data-[checked]:after:block',
+  "after:absolute after:inset-0 after:rounded-[calc(0.3125rem-1px)] after:shadow-[inset_0_1px_theme(colors.white/15%)]",
+  "dark:after:-inset-px dark:after:hidden dark:after:rounded-[0.3125rem] dark:group-data-[checked]:after:block",
 
   // Focus ring
-  'group-data-[focus]:outline group-data-[focus]:outline-2 group-data-[focus]:outline-offset-2 group-data-[focus]:outline-blue-500',
+  "group-data-[focus]:outline group-data-[focus]:outline-2 group-data-[focus]:outline-offset-2 group-data-[focus]:outline-blue-500",
 
   // Disabled state
-  'group-data-[disabled]:opacity-50',
-  'group-data-[disabled]:border-zinc-950/25 group-data-[disabled]:bg-zinc-950/5 group-data-[disabled]:[--checkbox-check:theme(colors.zinc.950/50%)] group-data-[disabled]:before:bg-transparent',
-  'dark:group-data-[disabled]:border-white/20 dark:group-data-[disabled]:bg-white/[2.5%] dark:group-data-[disabled]:[--checkbox-check:theme(colors.white/50%)] dark:group-data-[disabled]:group-data-[checked]:after:hidden',
+  "group-data-[disabled]:opacity-50",
+  "group-data-[disabled]:border-gray-950/25 group-data-[disabled]:bg-gray-950/5 group-data-[disabled]:[--checkbox-check:theme(colors.zinc.950/50%)] group-data-[disabled]:before:bg-transparent",
+  "dark:group-data-[disabled]:border-white/20 dark:group-data-[disabled]:bg-white/[2.5%] dark:group-data-[disabled]:[--checkbox-check:theme(colors.white/50%)] dark:group-data-[disabled]:group-data-[checked]:after:hidden",
 
   // Forced colors mode
-  'forced-colors:[--checkbox-check:HighlightText] forced-colors:[--checkbox-checked-bg:Highlight] forced-colors:group-data-[disabled]:[--checkbox-check:Highlight]',
-  'dark:forced-colors:[--checkbox-check:HighlightText] dark:forced-colors:[--checkbox-checked-bg:Highlight] dark:forced-colors:group-data-[disabled]:[--checkbox-check:Highlight]',
-]
+  "forced-colors:[--checkbox-check:HighlightText] forced-colors:[--checkbox-checked-bg:Highlight] forced-colors:group-data-[disabled]:[--checkbox-check:Highlight]",
+  "dark:forced-colors:[--checkbox-check:HighlightText] dark:forced-colors:[--checkbox-checked-bg:Highlight] dark:forced-colors:group-data-[disabled]:[--checkbox-check:Highlight]",
+];
 
 const colors = {
-  'dark/zinc': [
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)]',
-    'dark:[--checkbox-checked-bg:theme(colors.zinc.600)]',
+  "dark/zinc": [
+    "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)]",
+    "dark:[--checkbox-checked-bg:theme(colors.zinc.600)]",
   ],
-  'dark/white': [
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)]',
-    'dark:[--checkbox-check:theme(colors.zinc.900)] dark:[--checkbox-checked-bg:theme(colors.white)] dark:[--checkbox-checked-border:theme(colors.zinc.950/15%)]',
+  "dark/white": [
+    "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)]",
+    "dark:[--checkbox-check:theme(colors.zinc.900)] dark:[--checkbox-checked-bg:theme(colors.white)] dark:[--checkbox-checked-border:theme(colors.zinc.950/15%)]",
   ],
   white:
-    '[--checkbox-check:theme(colors.zinc.900)] [--checkbox-checked-bg:theme(colors.white)] [--checkbox-checked-border:theme(colors.zinc.950/15%)]',
-  dark: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)]',
-  zinc: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.600)] [--checkbox-checked-border:theme(colors.zinc.700/90%)]',
-  red: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.red.600)] [--checkbox-checked-border:theme(colors.red.700/90%)]',
+    "[--checkbox-check:theme(colors.zinc.900)] [--checkbox-checked-bg:theme(colors.white)] [--checkbox-checked-border:theme(colors.zinc.950/15%)]",
+  dark: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.900)] [--checkbox-checked-border:theme(colors.zinc.950/90%)]",
+  zinc: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.zinc.600)] [--checkbox-checked-border:theme(colors.zinc.700/90%)]",
+  red: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.red.600)] [--checkbox-checked-border:theme(colors.red.700/90%)]",
   orange:
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.orange.500)] [--checkbox-checked-border:theme(colors.orange.600/90%)]',
+    "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.orange.500)] [--checkbox-checked-border:theme(colors.orange.600/90%)]",
   amber:
-    '[--checkbox-check:theme(colors.amber.950)] [--checkbox-checked-bg:theme(colors.amber.400)] [--checkbox-checked-border:theme(colors.amber.500/80%)]',
+    "[--checkbox-check:theme(colors.amber.950)] [--checkbox-checked-bg:theme(colors.amber.400)] [--checkbox-checked-border:theme(colors.amber.500/80%)]",
   yellow:
-    '[--checkbox-check:theme(colors.yellow.950)] [--checkbox-checked-bg:theme(colors.yellow.300)] [--checkbox-checked-border:theme(colors.yellow.400/80%)]',
-  lime: '[--checkbox-check:theme(colors.lime.950)] [--checkbox-checked-bg:theme(colors.lime.300)] [--checkbox-checked-border:theme(colors.lime.400/80%)]',
+    "[--checkbox-check:theme(colors.yellow.950)] [--checkbox-checked-bg:theme(colors.yellow.300)] [--checkbox-checked-border:theme(colors.yellow.400/80%)]",
+  lime: "[--checkbox-check:theme(colors.lime.950)] [--checkbox-checked-bg:theme(colors.lime.300)] [--checkbox-checked-border:theme(colors.lime.400/80%)]",
   green:
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.green.600)] [--checkbox-checked-border:theme(colors.green.700/90%)]',
+    "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.green.600)] [--checkbox-checked-border:theme(colors.green.700/90%)]",
   emerald:
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.emerald.600)] [--checkbox-checked-border:theme(colors.emerald.700/90%)]',
-  teal: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.teal.600)] [--checkbox-checked-border:theme(colors.teal.700/90%)]',
-  cyan: '[--checkbox-check:theme(colors.cyan.950)] [--checkbox-checked-bg:theme(colors.cyan.300)] [--checkbox-checked-border:theme(colors.cyan.400/80%)]',
-  sky: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.sky.500)] [--checkbox-checked-border:theme(colors.sky.600/80%)]',
-  blue: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.blue.600)] [--checkbox-checked-border:theme(colors.blue.700/90%)]',
+    "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.emerald.600)] [--checkbox-checked-border:theme(colors.emerald.700/90%)]",
+  teal: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.teal.600)] [--checkbox-checked-border:theme(colors.teal.700/90%)]",
+  cyan: "[--checkbox-check:theme(colors.cyan.950)] [--checkbox-checked-bg:theme(colors.cyan.300)] [--checkbox-checked-border:theme(colors.cyan.400/80%)]",
+  sky: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.sky.500)] [--checkbox-checked-border:theme(colors.sky.600/80%)]",
+  blue: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.blue.600)] [--checkbox-checked-border:theme(colors.blue.700/90%)]",
   indigo:
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.indigo.500)] [--checkbox-checked-border:theme(colors.indigo.600/90%)]',
+    "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.indigo.500)] [--checkbox-checked-border:theme(colors.indigo.600/90%)]",
   violet:
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.violet.500)] [--checkbox-checked-border:theme(colors.violet.600/90%)]',
+    "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.violet.500)] [--checkbox-checked-border:theme(colors.violet.600/90%)]",
   purple:
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.purple.500)] [--checkbox-checked-border:theme(colors.purple.600/90%)]',
+    "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.purple.500)] [--checkbox-checked-border:theme(colors.purple.600/90%)]",
   fuchsia:
-    '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.fuchsia.500)] [--checkbox-checked-border:theme(colors.fuchsia.600/90%)]',
-  pink: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.pink.500)] [--checkbox-checked-border:theme(colors.pink.600/90%)]',
-  rose: '[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.rose.500)] [--checkbox-checked-border:theme(colors.rose.600/90%)]',
-}
+    "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.fuchsia.500)] [--checkbox-checked-border:theme(colors.fuchsia.600/90%)]",
+  pink: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.pink.500)] [--checkbox-checked-border:theme(colors.pink.600/90%)]",
+  rose: "[--checkbox-check:theme(colors.white)] [--checkbox-checked-bg:theme(colors.rose.500)] [--checkbox-checked-border:theme(colors.rose.600/90%)]",
+};
 
-type Color = keyof typeof colors
+type Color = keyof typeof colors;
 
 export function Checkbox({
-  color = 'dark/zinc',
+  color = "dark/zinc",
   className,
   ...props
 }: {
-  color?: Color
-  className?: string
+  color?: Color;
+  className?: string;
 } & HeadlessCheckboxProps) {
   return (
     <HeadlessCheckbox
       data-slot="control"
-      className={clsx(className, 'group inline-flex focus:outline-none')}
+      className={clsx(className, "group inline-flex focus:outline-none")}
       {...props}
     >
       <span className={clsx([base, colors[color]])}>
@@ -171,5 +174,5 @@ export function Checkbox({
         </svg>
       </span>
     </HeadlessCheckbox>
-  )
+  );
 }
diff --git a/text2sql-frontend/src/components/Catalyst/dialog.tsx b/text2sql-frontend/src/components/Catalyst/dialog.tsx
index 2cb652d0..fec4c8dd 100644
--- a/text2sql-frontend/src/components/Catalyst/dialog.tsx
+++ b/text2sql-frontend/src/components/Catalyst/dialog.tsx
@@ -6,32 +6,35 @@ import {
   Transition as HeadlessTransition,
   TransitionChild as HeadlessTransitionChild,
   type DialogProps as HeadlessDialogProps,
-} from '@headlessui/react'
-import clsx from 'clsx'
-import type React from 'react'
-import { Fragment } from 'react'
-import { Text } from './text'
+} from "@headlessui/react";
+import clsx from "clsx";
+import type React from "react";
+import { Fragment } from "react";
+import { Text } from "./text";
 
 const sizes = {
-  xs: 'sm:max-w-xs',
-  sm: 'sm:max-w-sm',
-  md: 'sm:max-w-md',
-  lg: 'sm:max-w-lg',
-  xl: 'sm:max-w-xl',
-  '2xl': 'sm:max-w-2xl',
-  '3xl': 'sm:max-w-3xl',
-  '4xl': 'sm:max-w-4xl',
-  '5xl': 'sm:max-w-5xl',
-}
+  xs: "sm:max-w-xs",
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg",
+  xl: "sm:max-w-xl",
+  "2xl": "sm:max-w-2xl",
+  "3xl": "sm:max-w-3xl",
+  "4xl": "sm:max-w-4xl",
+  "5xl": "sm:max-w-5xl",
+};
 
 export function Dialog({
   open,
   onClose,
-  size = 'lg',
+  size = "lg",
   className,
   children,
   ...props
-}: { size?: keyof typeof sizes; children: React.ReactNode } & HeadlessDialogProps) {
+}: {
+  size?: keyof typeof sizes;
+  children: React.ReactNode;
+} & HeadlessDialogProps) {
   return (
     <HeadlessTransition appear as={Fragment} show={open} {...props}>
       <HeadlessDialog onClose={onClose}>
@@ -44,7 +47,7 @@ export function Dialog({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/25 px-2 py-2 focus:outline-0 sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50" />
+          <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto bg-gray-950/25 px-2 py-2 focus:outline-0 sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-gray-950/50" />
         </HeadlessTransitionChild>
 
         <HeadlessTransitionChild
@@ -62,7 +65,7 @@ export function Dialog({
               className={clsx(
                 className,
                 sizes[size],
-                'row-start-2 w-full min-w-0 rounded-t-3xl bg-white p-[--gutter] shadow-lg ring-1 ring-zinc-950/10 [--gutter:theme(spacing.8)] sm:mb-auto sm:rounded-2xl dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline'
+                "row-start-2 w-full min-w-0 rounded-t-3xl bg-white p-[--gutter] shadow-lg ring-1 ring-gray-950/10 [--gutter:theme(spacing.8)] sm:mb-auto sm:rounded-2xl dark:bg-gray-900 dark:ring-white/10 forced-colors:outline"
               )}
               enter="ease-out duration-100"
               enterFrom="sm:scale-95"
@@ -77,34 +80,55 @@ export function Dialog({
         </HeadlessTransitionChild>
       </HeadlessDialog>
     </HeadlessTransition>
-  )
+  );
 }
 
-export function DialogTitle({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+export function DialogTitle({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
   return (
     <HeadlessDialogTitle
       {...props}
-      className={clsx(className, 'text-balance text-lg/6 font-semibold text-zinc-950 sm:text-base/6 dark:text-white')}
+      className={clsx(
+        className,
+        "text-balance text-lg/6 font-semibold text-gray-950 sm:text-base/6 dark:text-white"
+      )}
     />
-  )
+  );
 }
 
-export function DialogDescription({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
-  return <HeadlessDescription as={Text} {...props} className={clsx(className, 'mt-2 text-pretty')} />
+export function DialogDescription({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <HeadlessDescription
+      as={Text}
+      {...props}
+      className={clsx(className, "mt-2 text-pretty")}
+    />
+  );
 }
 
-export function DialogBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
-  return <div {...props} className={clsx(className, 'mt-6')} />
+export function DialogBody({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return <div {...props} className={clsx(className, "mt-6")} />;
 }
 
-export function DialogActions({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+export function DialogActions({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
   return (
     <div
       {...props}
       className={clsx(
         className,
-        'mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto'
+        "mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto"
       )}
     />
-  )
+  );
 }
diff --git a/text2sql-frontend/src/components/Catalyst/dropdown.tsx b/text2sql-frontend/src/components/Catalyst/dropdown.tsx
index f6d74877..c279e076 100644
--- a/text2sql-frontend/src/components/Catalyst/dropdown.tsx
+++ b/text2sql-frontend/src/components/Catalyst/dropdown.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client";
 
 import {
   Description as HeadlessDescription,
@@ -19,185 +19,222 @@ import {
   type MenuProps as HeadlessMenuProps,
   type MenuSectionProps as HeadlessMenuSectionProps,
   type MenuSeparatorProps as HeadlessMenuSeparatorProps,
-} from '@headlessui/react'
-import clsx from 'clsx'
-import type React from 'react'
-import { Fragment } from 'react'
-import { Button } from './button'
-import { Link } from './link'
+} from "@headlessui/react";
+import clsx from "clsx";
+import type React from "react";
+import { Fragment } from "react";
+import { Button } from "./button";
+import { Link } from "./link";
 
 export function Dropdown(props: HeadlessMenuProps) {
-  return <HeadlessMenu {...props} />
+  return <HeadlessMenu {...props} />;
 }
 
 export function DropdownButton<T extends React.ElementType = typeof Button>(
   props: React.ComponentProps<typeof HeadlessMenuButton<T>>
 ) {
-  return <HeadlessMenuButton as={Button} {...props} />
+  return <HeadlessMenuButton as={Button} {...props} />;
 }
 
 export function DropdownMenu({
-  anchor = 'bottom',
+  anchor = "bottom",
   ...props
-}: { anchor?: NonNullable<HeadlessMenuItemsProps['anchor']>['to'] } & Omit<HeadlessMenuItemsProps, 'anchor'>) {
+}: { anchor?: NonNullable<HeadlessMenuItemsProps["anchor"]>["to"] } & Omit<
+  HeadlessMenuItemsProps,
+  "anchor"
+>) {
   return (
-    <HeadlessTransition as={Fragment} leave="duration-100 ease-in" leaveTo="opacity-0">
+    <HeadlessTransition
+      as={Fragment}
+      leave="duration-100 ease-in"
+      leaveTo="opacity-0"
+    >
       <HeadlessMenuItems
         {...props}
         anchor={{
           to: anchor,
-          gap: 'var(--anchor-gap)',
-          offset: 'var(--anchor-offset)',
-          padding: 'var(--anchor-padding)',
+          gap: "var(--anchor-gap)",
+          offset: "var(--anchor-offset)",
+          padding: "var(--anchor-padding)",
         }}
         className={clsx(
           props.className,
 
           // Anchor positioning
-          '[--anchor-gap:theme(spacing.2)] [--anchor-padding:theme(spacing.3)] data-[anchor~=end]:[--anchor-offset:4px] data-[anchor~=start]:[--anchor-offset:-4px]',
+          "[--anchor-gap:theme(spacing.2)] [--anchor-padding:theme(spacing.3)] data-[anchor~=end]:[--anchor-offset:4px] data-[anchor~=start]:[--anchor-offset:-4px]",
 
           // Base styles
-          'isolate w-max rounded-xl p-1',
+          "isolate w-max rounded-xl p-1",
 
           // Invisible border that is only visible in `forced-colors` mode for accessibility purposes
-          'outline outline-1 outline-transparent focus:outline-none',
+          "outline outline-1 outline-transparent focus:outline-none",
 
           // Handle scrolling when menu won't fit in viewport
-          'overflow-y-auto',
+          "overflow-y-auto",
 
           // Popover background
-          'bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75',
+          "bg-white/75 backdrop-blur-xl dark:bg-gray-800/75",
 
           // Shadows
-          'shadow-lg ring-1 ring-zinc-950/10 dark:ring-inset dark:ring-white/10',
+          "shadow-lg ring-1 ring-gray-950/10 dark:ring-inset dark:ring-white/10",
 
           // Define grid at the menu level if subgrid is supported
-          'supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]'
+          "supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]"
         )}
       />
     </HeadlessTransition>
-  )
+  );
 }
 
-export function DropdownItem(props: { href?: string } & HeadlessMenuItemProps<'button'>) {
+export function DropdownItem(
+  props: { href?: string } & HeadlessMenuItemProps<"button">
+) {
   return (
     <HeadlessMenuItem
-      as={props.href ? Link : 'button'}
-      type={props.href ? undefined : 'button'}
+      as={props.href ? Link : "button"}
+      type={props.href ? undefined : "button"}
       {...props}
       className={clsx(
         props.className,
 
         // Base styles
-        'group cursor-default rounded-lg px-3.5 py-2.5 focus:outline-none sm:px-3 sm:py-1.5',
+        "group cursor-default rounded-lg px-3.5 py-2.5 focus:outline-none sm:px-3 sm:py-1.5",
 
         // Text styles
-        'text-left text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]',
+        "text-left text-base/6 text-gray-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]",
 
         // Focus
-        'data-[focus]:bg-blue-500 data-[focus]:text-white',
+        "data-[focus]:bg-blue-500 data-[focus]:text-white",
 
         // Disabled state
-        'data-[disabled]:opacity-50',
+        "data-[disabled]:opacity-50",
 
         // Forced colors mode
-        'forced-color-adjust-none forced-colors:data-[focus]:bg-[Highlight] forced-colors:data-[focus]:text-[HighlightText] forced-colors:[&>[data-slot=icon]]:data-[focus]:text-[HighlightText]',
+        "forced-color-adjust-none forced-colors:data-[focus]:bg-[Highlight] forced-colors:data-[focus]:text-[HighlightText] forced-colors:[&>[data-slot=icon]]:data-[focus]:text-[HighlightText]",
 
         // Use subgrid when available but fallback to an explicit grid layout if not
-        'col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] items-center supports-[grid-template-columns:subgrid]:grid-cols-subgrid',
+        "col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] items-center supports-[grid-template-columns:subgrid]:grid-cols-subgrid",
 
         // Icon
-        '[&>[data-slot=icon]]:col-start-1 [&>[data-slot=icon]]:row-start-1 [&>[data-slot=icon]]:mr-2.5 [&>[data-slot=icon]]:size-5 sm:[&>[data-slot=icon]]:mr-2 [&>[data-slot=icon]]:sm:size-4',
-        '[&>[data-slot=icon]]:text-zinc-500 [&>[data-slot=icon]]:data-[focus]:text-white [&>[data-slot=icon]]:dark:text-zinc-500 [&>[data-slot=icon]]:data-[focus]:dark:text-white'
+        "[&>[data-slot=icon]]:col-start-1 [&>[data-slot=icon]]:row-start-1 [&>[data-slot=icon]]:mr-2.5 [&>[data-slot=icon]]:size-5 sm:[&>[data-slot=icon]]:mr-2 [&>[data-slot=icon]]:sm:size-4",
+        "[&>[data-slot=icon]]:text-gray-500 [&>[data-slot=icon]]:data-[focus]:text-white [&>[data-slot=icon]]:dark:text-gray-500 [&>[data-slot=icon]]:data-[focus]:dark:text-white"
       )}
     />
-  )
+  );
 }
 
-export function DropdownHeader({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
-  return <div {...props} className={clsx(className, 'col-span-5 px-3.5 pb-1 pt-2.5 sm:px-3')} />
+export function DropdownHeader({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      {...props}
+      className={clsx(className, "col-span-5 px-3.5 pb-1 pt-2.5 sm:px-3")}
+    />
+  );
 }
 
-export function DropdownSection({ className, ...props }: HeadlessMenuSectionProps) {
+export function DropdownSection({
+  className,
+  ...props
+}: HeadlessMenuSectionProps) {
   return (
     <HeadlessMenuSection
       {...props}
       className={clsx(
         className,
         // Define grid at the section level instead of the item level if subgrid is supported
-        'col-span-full supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]'
+        "col-span-full supports-[grid-template-columns:subgrid]:grid supports-[grid-template-columns:subgrid]:grid-cols-[auto_1fr_1.5rem_0.5rem_auto]"
       )}
     />
-  )
+  );
 }
 
-export function DropdownHeading({ className, ...props }: HeadlessMenuHeadingProps) {
+export function DropdownHeading({
+  className,
+  ...props
+}: HeadlessMenuHeadingProps) {
   return (
     <HeadlessMenuHeading
       {...props}
       className={clsx(
         className,
-        'col-span-full grid grid-cols-[1fr,auto] gap-x-12 px-3.5 pb-1 pt-2 text-sm/5 font-medium text-zinc-500 sm:px-3 sm:text-xs/5 dark:text-zinc-400'
+        "col-span-full grid grid-cols-[1fr,auto] gap-x-12 px-3.5 pb-1 pt-2 text-sm/5 font-medium text-gray-500 sm:px-3 sm:text-xs/5 dark:text-gray-400"
       )}
     />
-  )
+  );
 }
 
-export function DropdownSeparator({ className, ...props }: HeadlessMenuSeparatorProps) {
+export function DropdownSeparator({
+  className,
+  ...props
+}: HeadlessMenuSeparatorProps) {
   return (
     <HeadlessMenuSeparator
       {...props}
       className={clsx(
         className,
-        'col-span-full mx-3.5 my-1 h-px border-0 bg-zinc-950/5 sm:mx-3 dark:bg-white/10 forced-colors:bg-[CanvasText]'
+        "col-span-full mx-3.5 my-1 h-px border-0 bg-gray-950/5 sm:mx-3 dark:bg-white/10 forced-colors:bg-[CanvasText]"
       )}
     />
-  )
+  );
 }
 
 export function DropdownLabel({ className, ...props }: HeadlessLabelProps) {
   return (
-    <HeadlessLabel {...props} data-slot="label" className={clsx(className, 'col-start-2 row-start-1')} {...props} />
-  )
+    <HeadlessLabel
+      {...props}
+      data-slot="label"
+      className={clsx(className, "col-start-2 row-start-1")}
+      {...props}
+    />
+  );
 }
 
-export function DropdownDescription({ className, ...props }: HeadlessDescriptionProps) {
+export function DropdownDescription({
+  className,
+  ...props
+}: HeadlessDescriptionProps) {
   return (
     <HeadlessDescription
       data-slot="description"
       {...props}
       className={clsx(
         className,
-        'col-span-2 col-start-2 row-start-2 text-sm/5 text-zinc-500 group-data-[focus]:text-white sm:text-xs/5 dark:text-zinc-400 forced-colors:group-data-[focus]:text-[HighlightText]'
+        "col-span-2 col-start-2 row-start-2 text-sm/5 text-gray-500 group-data-[focus]:text-white sm:text-xs/5 dark:text-gray-400 forced-colors:group-data-[focus]:text-[HighlightText]"
       )}
     />
-  )
+  );
 }
 
 export function DropdownShortcut({
   className,
   keys,
   ...props
-}: { keys: string | string[] } & HeadlessDescriptionProps<'kbd'>) {
+}: { keys: string | string[] } & HeadlessDescriptionProps<"kbd">) {
   return (
     <HeadlessDescription
       as="kbd"
       {...props}
-      className={clsx(className, 'col-start-5 row-start-1 flex justify-self-end')}
+      className={clsx(
+        className,
+        "col-start-5 row-start-1 flex justify-self-end"
+      )}
     >
-      {(Array.isArray(keys) ? keys : keys.split('')).map((char, index) => (
+      {(Array.isArray(keys) ? keys : keys.split("")).map((char, index) => (
         <kbd
           key={index}
           className={clsx([
-            'min-w-[2ch] text-center font-sans capitalize text-zinc-400 group-data-[focus]:text-white forced-colors:group-data-[focus]:text-[HighlightText]',
+            "min-w-[2ch] text-center font-sans capitalize text-gray-400 group-data-[focus]:text-white forced-colors:group-data-[focus]:text-[HighlightText]",
 
             // Make sure key names that are longer than one character (like "Tab") have extra space
-            index > 0 && char.length > 1 && 'pl-1',
+            index > 0 && char.length > 1 && "pl-1",
           ])}
         >
           {char}
         </kbd>
       ))}
     </HeadlessDescription>
-  )
+  );
 }
diff --git a/text2sql-frontend/src/components/Catalyst/fieldset.tsx b/text2sql-frontend/src/components/Catalyst/fieldset.tsx
index 4cc07b50..dbcde517 100644
--- a/text2sql-frontend/src/components/Catalyst/fieldset.tsx
+++ b/text2sql-frontend/src/components/Catalyst/fieldset.tsx
@@ -9,17 +9,23 @@ import {
   type FieldsetProps as HeadlessFieldsetProps,
   type LabelProps as HeadlessLabelProps,
   type LegendProps as HeadlessLegendProps,
-} from '@headlessui/react'
-import clsx from 'clsx'
-import type React from 'react'
+} from "@headlessui/react";
+import clsx from "clsx";
+import type React from "react";
 
-export function Fieldset({ className, ...props }: { disabled?: boolean } & HeadlessFieldsetProps) {
+export function Fieldset({
+  className,
+  ...props
+}: { disabled?: boolean } & HeadlessFieldsetProps) {
   return (
     <HeadlessFieldset
       {...props}
-      className={clsx(className, '[&>*+[data-slot=control]]:mt-6 [&>[data-slot=text]]:mt-1')}
+      className={clsx(
+        className,
+        "[&>*+[data-slot=control]]:mt-6 [&>[data-slot=text]]:mt-1"
+      )}
     />
-  )
+  );
 }
 
 export function Legend({ ...props }: HeadlessLegendProps) {
@@ -29,14 +35,23 @@ export function Legend({ ...props }: HeadlessLegendProps) {
       data-slot="legend"
       className={clsx(
         props.className,
-        'text-base/6 font-semibold text-zinc-950 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-white'
+        "text-base/6 font-semibold text-gray-950 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-white"
       )}
     />
-  )
+  );
 }
 
-export function FieldGroup({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
-  return <div {...props} data-slot="control" className={clsx(className, 'space-y-8')} />
+export function FieldGroup({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      {...props}
+      data-slot="control"
+      className={clsx(className, "space-y-8")}
+    />
+  );
 }
 
 export function Field({ className, ...props }: HeadlessFieldProps) {
@@ -44,29 +59,32 @@ export function Field({ className, ...props }: HeadlessFieldProps) {
     <HeadlessField
       className={clsx(
         className,
-        '[&>[data-slot=label]+[data-slot=control]]:mt-3',
-        '[&>[data-slot=label]+[data-slot=description]]:mt-1',
-        '[&>[data-slot=description]+[data-slot=control]]:mt-3',
-        '[&>[data-slot=control]+[data-slot=description]]:mt-3',
-        '[&>[data-slot=control]+[data-slot=error]]:mt-3',
-        '[&>[data-slot=label]]:font-medium'
+        "[&>[data-slot=label]+[data-slot=control]]:mt-3",
+        "[&>[data-slot=label]+[data-slot=description]]:mt-1",
+        "[&>[data-slot=description]+[data-slot=control]]:mt-3",
+        "[&>[data-slot=control]+[data-slot=description]]:mt-3",
+        "[&>[data-slot=control]+[data-slot=error]]:mt-3",
+        "[&>[data-slot=label]]:font-medium"
       )}
       {...props}
     />
-  )
+  );
 }
 
-export function Label({ className, ...props }: { className?: string } & HeadlessLabelProps) {
+export function Label({
+  className,
+  ...props
+}: { className?: string } & HeadlessLabelProps) {
   return (
     <HeadlessLabel
       {...props}
       data-slot="label"
       className={clsx(
         className,
-        'select-none text-base/6 text-zinc-950 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-white'
+        "select-none text-base/6 text-gray-950 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-white"
       )}
     />
-  )
+  );
 }
 
 export function Description({
@@ -80,10 +98,10 @@ export function Description({
       data-slot="description"
       className={clsx(
         className,
-        'text-base/6 text-zinc-500 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-zinc-400'
+        "text-base/6 text-gray-500 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-gray-400"
       )}
     />
-  )
+  );
 }
 
 export function ErrorMessage({
@@ -95,7 +113,10 @@ export function ErrorMessage({
     <HeadlessDescription
       {...props}
       data-slot="error"
-      className={clsx(className, 'text-base/6 text-red-600 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-red-500')}
+      className={clsx(
+        className,
+        "text-base/6 text-red-600 data-[disabled]:opacity-50 sm:text-sm/6 dark:text-red-500"
+      )}
     />
-  )
+  );
 }
diff --git a/text2sql-frontend/src/components/Catalyst/input.tsx b/text2sql-frontend/src/components/Catalyst/input.tsx
index 2568dbd2..a86bf758 100644
--- a/text2sql-frontend/src/components/Catalyst/input.tsx
+++ b/text2sql-frontend/src/components/Catalyst/input.tsx
@@ -1,13 +1,26 @@
-import { Input as HeadlessInput, type InputProps as HeadlessInputProps } from '@headlessui/react'
-import { clsx } from 'clsx'
-import { forwardRef } from 'react'
+import {
+  Input as HeadlessInput,
+  type InputProps as HeadlessInputProps,
+} from "@headlessui/react";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
 
-const dateTypes = ['date', 'datetime-local', 'month', 'time', 'week']
-type DateType = (typeof dateTypes)[number]
+const dateTypes = ["date", "datetime-local", "month", "time", "week"];
+type DateType = (typeof dateTypes)[number];
 
 export const Input = forwardRef<
   HTMLInputElement,
-  { type?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | DateType } & HeadlessInputProps
+  {
+    type?:
+      | "email"
+      | "number"
+      | "password"
+      | "search"
+      | "tel"
+      | "text"
+      | "url"
+      | DateType;
+  } & HeadlessInputProps
 >(function Input({ className, ...props }, ref) {
   return (
     <span
@@ -16,22 +29,22 @@ export const Input = forwardRef<
         className,
 
         // Basic layout
-        'relative block w-full',
+        "relative block w-full",
 
         // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
-        'before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow',
+        "before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow",
 
         // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
-        'dark:before:hidden',
+        "dark:before:hidden",
 
         // Focus ring
-        'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:focus-within:ring-2 sm:after:focus-within:ring-blue-500',
+        "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:focus-within:ring-2 sm:after:focus-within:ring-blue-500",
 
         // Disabled state
-        'has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-zinc-950/5 before:has-[[data-disabled]]:shadow-none',
+        "has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-gray-950/5 before:has-[[data-disabled]]:shadow-none",
 
         // Invalid state
-        'before:has-[[data-invalid]]:shadow-red-500/10',
+        "before:has-[[data-invalid]]:shadow-red-500/10",
       ])}
     >
       <HeadlessInput
@@ -40,43 +53,43 @@ export const Input = forwardRef<
           // Date classes
           props.type &&
             dateTypes.includes(props.type) && [
-              '[&::-webkit-datetime-edit-fields-wrapper]:p-0',
-              '[&::-webkit-date-and-time-value]:min-h-[1.5em]',
-              '[&::-webkit-datetime-edit]:inline-flex',
-              '[&::-webkit-datetime-edit]:p-0',
-              '[&::-webkit-datetime-edit-year-field]:p-0',
-              '[&::-webkit-datetime-edit-month-field]:p-0',
-              '[&::-webkit-datetime-edit-day-field]:p-0',
-              '[&::-webkit-datetime-edit-hour-field]:p-0',
-              '[&::-webkit-datetime-edit-minute-field]:p-0',
-              '[&::-webkit-datetime-edit-second-field]:p-0',
-              '[&::-webkit-datetime-edit-millisecond-field]:p-0',
-              '[&::-webkit-datetime-edit-meridiem-field]:p-0',
+              "[&::-webkit-datetime-edit-fields-wrapper]:p-0",
+              "[&::-webkit-date-and-time-value]:min-h-[1.5em]",
+              "[&::-webkit-datetime-edit]:inline-flex",
+              "[&::-webkit-datetime-edit]:p-0",
+              "[&::-webkit-datetime-edit-year-field]:p-0",
+              "[&::-webkit-datetime-edit-month-field]:p-0",
+              "[&::-webkit-datetime-edit-day-field]:p-0",
+              "[&::-webkit-datetime-edit-hour-field]:p-0",
+              "[&::-webkit-datetime-edit-minute-field]:p-0",
+              "[&::-webkit-datetime-edit-second-field]:p-0",
+              "[&::-webkit-datetime-edit-millisecond-field]:p-0",
+              "[&::-webkit-datetime-edit-meridiem-field]:p-0",
             ],
 
           // Basic layout
-          'relative block w-full appearance-none rounded-lg px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing[3])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]',
+          "relative block w-full appearance-none rounded-lg px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing[3])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]",
 
           // Typography
-          'text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white',
+          "text-base/6 text-gray-950 placeholder:text-gray-500 sm:text-sm/6 dark:text-white",
 
           // Border
-          'border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20',
+          "border border-gray-950/10 data-[hover]:border-gray-950/20 dark:border-white/10 dark:data-[hover]:border-white/20",
 
           // Background color
-          'bg-transparent dark:bg-white/5',
+          "bg-transparent dark:bg-white/5",
 
           // Hide default focus styles
-          'focus:outline-none',
+          "focus:outline-none",
 
           // Invalid state
-          'data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500 data-[invalid]:dark:border-red-500 data-[invalid]:data-[hover]:dark:border-red-500',
+          "data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500 data-[invalid]:dark:border-red-500 data-[invalid]:data-[hover]:dark:border-red-500",
 
           // Disabled state
-          'data-[disabled]:border-zinc-950/20 dark:data-[hover]:data-[disabled]:border-white/15 data-[disabled]:dark:border-white/15 data-[disabled]:dark:bg-white/[2.5%]',
+          "data-[disabled]:border-gray-950/20 dark:data-[hover]:data-[disabled]:border-white/15 data-[disabled]:dark:border-white/15 data-[disabled]:dark:bg-white/[2.5%]",
         ])}
         {...props}
       />
     </span>
-  )
-})
+  );
+});
diff --git a/text2sql-frontend/src/components/Catalyst/listbox.tsx b/text2sql-frontend/src/components/Catalyst/listbox.tsx
index 6bc6006f..1f3b4bef 100644
--- a/text2sql-frontend/src/components/Catalyst/listbox.tsx
+++ b/text2sql-frontend/src/components/Catalyst/listbox.tsx
@@ -1,4 +1,4 @@
-'use client'
+"use client";
 
 import {
   Listbox as HeadlessListbox,
@@ -9,24 +9,24 @@ import {
   Transition as HeadlessTransition,
   type ListboxOptionProps as HeadlessListboxOptionProps,
   type ListboxProps as HeadlessListboxProps,
-} from '@headlessui/react'
-import clsx from 'clsx'
-import { Fragment } from 'react'
+} from "@headlessui/react";
+import clsx from "clsx";
+import { Fragment } from "react";
 
 export function Listbox<T>({
   className,
   placeholder,
   autoFocus,
-  'aria-label': ariaLabel,
+  "aria-label": ariaLabel,
   children: options,
   ...props
 }: {
-  className?: string
-  placeholder?: React.ReactNode
-  autoFocus?: boolean
-  'aria-label'?: string
-  children?: React.ReactNode
-} & Omit<HeadlessListboxProps<typeof Fragment, T>, 'multiple'>) {
+  className?: string;
+  placeholder?: React.ReactNode;
+  autoFocus?: boolean;
+  "aria-label"?: string;
+  children?: React.ReactNode;
+} & Omit<HeadlessListboxProps<typeof Fragment, T>, "multiple">) {
   return (
     <HeadlessListbox {...props} multiple={false}>
       <HeadlessListboxButton
@@ -37,63 +37,79 @@ export function Listbox<T>({
           className,
 
           // Basic layout
-          'group relative block w-full',
+          "group relative block w-full",
 
           // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
-          'before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow',
+          "before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow",
 
           // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
-          'dark:before:hidden',
+          "dark:before:hidden",
 
           // Hide default focus styles
-          'focus:outline-none',
+          "focus:outline-none",
 
           // Focus ring
-          'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:data-[focus]:ring-2 sm:after:data-[focus]:ring-blue-500',
+          "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:data-[focus]:ring-2 sm:after:data-[focus]:ring-blue-500",
 
           // Disabled state
-          'data-[disabled]:opacity-50 before:data-[disabled]:bg-zinc-950/5 before:data-[disabled]:shadow-none',
+          "data-[disabled]:opacity-50 before:data-[disabled]:bg-gray-950/5 before:data-[disabled]:shadow-none",
         ])}
       >
         <HeadlessListboxSelectedOption
           as="span"
           options={options}
-          placeholder={placeholder && <span className="block truncate text-zinc-500">{placeholder}</span>}
+          placeholder={
+            placeholder && (
+              <span className="block truncate text-gray-500">
+                {placeholder}
+              </span>
+            )
+          }
           className={clsx([
             // Basic layout
-            'relative block w-full appearance-none rounded-lg py-[calc(theme(spacing[2.5])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]',
+            "relative block w-full appearance-none rounded-lg py-[calc(theme(spacing[2.5])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]",
 
             // Set minimum height for when no value is selected
-            'min-h-11 sm:min-h-9',
+            "min-h-11 sm:min-h-9",
 
             // Horizontal padding
-            'pl-[calc(theme(spacing[3.5])-1px)] pr-[calc(theme(spacing.7)-1px)] sm:pl-[calc(theme(spacing.3)-1px)]',
+            "pl-[calc(theme(spacing[3.5])-1px)] pr-[calc(theme(spacing.7)-1px)] sm:pl-[calc(theme(spacing.3)-1px)]",
 
             // Typography
-            'text-left text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]',
+            "text-left text-base/6 text-gray-950 placeholder:text-gray-500 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]",
 
             // Border
-            'border border-zinc-950/10 group-data-[active]:border-zinc-950/20 group-data-[hover]:border-zinc-950/20 dark:border-white/10 dark:group-data-[active]:border-white/20 dark:group-data-[hover]:border-white/20',
+            "border border-gray-950/10 group-data-[active]:border-gray-950/20 group-data-[hover]:border-gray-950/20 dark:border-white/10 dark:group-data-[active]:border-white/20 dark:group-data-[hover]:border-white/20",
 
             // Background color
-            'bg-transparent dark:bg-white/5',
+            "bg-transparent dark:bg-white/5",
 
             // Invalid state
-            'group-data-[invalid]:border-red-500 group-data-[invalid]:group-data-[hover]:border-red-500 group-data-[invalid]:dark:border-red-600 group-data-[invalid]:data-[hover]:dark:border-red-600',
+            "group-data-[invalid]:border-red-500 group-data-[invalid]:group-data-[hover]:border-red-500 group-data-[invalid]:dark:border-red-600 group-data-[invalid]:data-[hover]:dark:border-red-600",
 
             // Disabled state
-            'group-data-[disabled]:border-zinc-950/20 group-data-[disabled]:opacity-100 group-data-[disabled]:dark:border-white/15 group-data-[disabled]:dark:bg-white/[2.5%] dark:data-[hover]:group-data-[disabled]:border-white/15',
+            "group-data-[disabled]:border-gray-950/20 group-data-[disabled]:opacity-100 group-data-[disabled]:dark:border-white/15 group-data-[disabled]:dark:bg-white/[2.5%] dark:data-[hover]:group-data-[disabled]:border-white/15",
           ])}
         />
         <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
           <svg
-            className="size-5 stroke-zinc-500 group-data-[disabled]:stroke-zinc-600 sm:size-4 dark:stroke-zinc-400 forced-colors:stroke-[CanvasText]"
+            className="size-5 stroke-gray-500 group-data-[disabled]:stroke-gray-600 sm:size-4 dark:stroke-gray-400 forced-colors:stroke-[CanvasText]"
             viewBox="0 0 16 16"
             aria-hidden="true"
             fill="none"
           >
-            <path d="M5.75 10.75L8 13L10.25 10.75" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M10.25 5.25L8 3L5.75 5.25" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+            <path
+              d="M5.75 10.75L8 13L10.25 10.75"
+              strokeWidth={1.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M10.25 5.25L8 3L5.75 5.25"
+              strokeWidth={1.5}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
           </svg>
         </span>
       </HeadlessListboxButton>
@@ -106,77 +122,79 @@ export function Listbox<T>({
         <HeadlessListboxOptions
           as="div"
           anchor={{
-            to: 'selection start',
-            offset: 'var(--anchor-offset)',
-            padding: 'var(--anchor-padding)',
+            to: "selection start",
+            offset: "var(--anchor-offset)",
+            padding: "var(--anchor-padding)",
           }}
           className={clsx(
             // Anchor positioning
-            '[--anchor-offset:-1.625rem] [--anchor-padding:theme(spacing.4)] sm:[--anchor-offset:-1.375rem]',
+            "[--anchor-offset:-1.625rem] [--anchor-padding:theme(spacing.4)] sm:[--anchor-offset:-1.375rem]",
 
             // Base styles
-            'isolate w-max min-w-[calc(var(--button-width)+1.75rem)] select-none scroll-py-1 rounded-xl p-1',
+            "isolate w-max min-w-[calc(var(--button-width)+1.75rem)] select-none scroll-py-1 rounded-xl p-1",
 
             // Invisible border that is only visible in `forced-colors` mode for accessibility purposes
-            'outline outline-1 outline-transparent focus:outline-none',
+            "outline outline-1 outline-transparent focus:outline-none",
 
             // Handle scrolling when menu won't fit in viewport
-            'overflow-y-scroll overscroll-contain',
+            "overflow-y-scroll overscroll-contain",
 
             // Popover background
-            'bg-white/75 backdrop-blur-xl dark:bg-zinc-800/75',
+            "bg-white/75 backdrop-blur-xl dark:bg-gray-800/75",
 
             // Shadows
-            'shadow-lg ring-1 ring-zinc-950/10 dark:ring-inset dark:ring-white/10'
+            "shadow-lg ring-1 ring-gray-950/10 dark:ring-inset dark:ring-white/10"
           )}
         >
           {options}
         </HeadlessListboxOptions>
       </HeadlessTransition>
     </HeadlessListbox>
-  )
+  );
 }
 
 export function ListboxOption<T>({
   children,
   className,
   ...props
-}: { children?: React.ReactNode } & HeadlessListboxOptionProps<'div', T>) {
+}: { children?: React.ReactNode } & HeadlessListboxOptionProps<"div", T>) {
   const sharedClasses = clsx(
     // Base
-    'flex min-w-0 items-center',
+    "flex min-w-0 items-center",
 
     // Icons
-    '[&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-zinc-500 [&>[data-slot=icon]]:group-data-[focus]/option:text-white sm:[&>[data-slot=icon]]:size-4 forced-colors:[&>[data-slot=icon]]:text-[CanvasText] forced-colors:[&>[data-slot=icon]]:group-data-[focus]/option:text-[Canvas]',
+    "[&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-gray-500 [&>[data-slot=icon]]:group-data-[focus]/option:text-white sm:[&>[data-slot=icon]]:size-4 forced-colors:[&>[data-slot=icon]]:text-[CanvasText] forced-colors:[&>[data-slot=icon]]:group-data-[focus]/option:text-[Canvas]",
 
     // Avatars
-    '[&>[data-slot=avatar]]:size-6 sm:[&>[data-slot=avatar]]:size-5'
-  )
+    "[&>[data-slot=avatar]]:size-6 sm:[&>[data-slot=avatar]]:size-5"
+  );
 
   return (
     <HeadlessListboxOption as={Fragment} {...props}>
       {({ selectedOption }) => {
         if (selectedOption) {
-          return <div className={clsx(className, sharedClasses)}>{children}</div>
+          return (
+            <div className={clsx(className, sharedClasses)}>{children}</div>
+          );
         }
 
         return (
           <div
             className={clsx(
               // Basic layout
-              'group/option grid cursor-default grid-cols-[theme(spacing.5),1fr] items-baseline gap-x-1.5 rounded-lg py-2.5 pl-2.5 pr-3.5 sm:grid-cols-[theme(spacing.4),1fr] sm:py-1.5 sm:pl-2 sm:pr-3',
+              "group/option grid cursor-default grid-cols-[theme(spacing.5),1fr] items-baseline gap-x-1.5 rounded-lg py-2.5 pl-2.5 pr-3.5 sm:grid-cols-[theme(spacing.4),1fr] sm:py-1.5 sm:pl-2 sm:pr-3",
 
               // Typography
-              'text-base/6 text-zinc-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]',
+              "text-base/6 text-gray-950 sm:text-sm/6 dark:text-white forced-colors:text-[CanvasText]",
 
               // Focus
-              'outline-none data-[focus]:bg-blue-500 data-[focus]:text-white',
+              "outline-none data-[focus]:bg-blue-500 data-[focus]:text-white",
 
               // Forced colors mode
-              'forced-color-adjust-none forced-colors:data-[focus]:bg-[Highlight] forced-colors:data-[focus]:text-[HighlightText]',
+              "forced-color-adjust-none forced-colors:data-[focus]:bg-[Highlight] forced-colors:data-[focus]:text-[HighlightText]",
 
               // Disabled
-              'data-[disabled]:opacity-50'
+              "data-[disabled]:opacity-50"
             )}
           >
             <svg
@@ -185,30 +203,52 @@ export function ListboxOption<T>({
               fill="none"
               aria-hidden="true"
             >
-              <path d="M4 8.5l3 3L12 4" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+              <path
+                d="M4 8.5l3 3L12 4"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
             </svg>
-            <span className={clsx(className, sharedClasses, 'col-start-2')}>{children}</span>
+            <span className={clsx(className, sharedClasses, "col-start-2")}>
+              {children}
+            </span>
           </div>
-        )
+        );
       }}
     </HeadlessListboxOption>
-  )
+  );
 }
 
-export function ListboxLabel({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) {
-  return <span className={clsx(className, 'ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0')} {...props} />
+export function ListboxLabel({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"span">) {
+  return (
+    <span
+      className={clsx(
+        className,
+        "ml-2.5 truncate first:ml-0 sm:ml-2 sm:first:ml-0"
+      )}
+      {...props}
+    />
+  );
 }
 
-export function ListboxDescription({ className, children, ...props }: React.ComponentPropsWithoutRef<'span'>) {
+export function ListboxDescription({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"span">) {
   return (
     <span
       className={clsx(
         className,
-        'flex flex-1 overflow-hidden text-zinc-500 before:w-2 before:min-w-0 before:shrink group-data-[focus]/option:text-white dark:text-zinc-400'
+        "flex flex-1 overflow-hidden text-gray-500 before:w-2 before:min-w-0 before:shrink group-data-[focus]/option:text-white dark:text-gray-400"
       )}
       {...props}
     >
       <span className="flex-1 truncate">{children}</span>
     </span>
-  )
+  );
 }
diff --git a/text2sql-frontend/src/components/Catalyst/pagination.tsx b/text2sql-frontend/src/components/Catalyst/pagination.tsx
index 6a1b649d..e9440d19 100644
--- a/text2sql-frontend/src/components/Catalyst/pagination.tsx
+++ b/text2sql-frontend/src/components/Catalyst/pagination.tsx
@@ -1,26 +1,42 @@
-import clsx from 'clsx'
-import type React from 'react'
-import { Button } from './button'
+import clsx from "clsx";
+import type React from "react";
+import { Button } from "./button";
 
 export function Pagination({
-  'aria-label': ariaLabel = 'Page navigation',
+  "aria-label": ariaLabel = "Page navigation",
   className,
   ...props
-}: React.ComponentPropsWithoutRef<'nav'>) {
-  return <nav aria-label={ariaLabel} {...props} className={clsx(className, 'flex gap-x-2')} />
+}: React.ComponentPropsWithoutRef<"nav">) {
+  return (
+    <nav
+      aria-label={ariaLabel}
+      {...props}
+      className={clsx(className, "flex gap-x-2")}
+    />
+  );
 }
 
 export function PaginationPrevious({
   href = null,
-  children = 'Previous',
+  children = "Previous",
 }: {
-  href?: string | null
-  children?: React.ReactNode
+  href?: string | null;
+  children?: React.ReactNode;
 }) {
   return (
     <span className="grow basis-0">
-      <Button {...(href === null ? { disabled: true } : { href })} plain aria-label="Previous page">
-        <svg className="stroke-current" data-slot="icon" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <Button
+        {...(href === null ? { disabled: true } : { href })}
+        plain
+        aria-label="Previous page"
+      >
+        <svg
+          className="stroke-current"
+          data-slot="icon"
+          viewBox="0 0 16 16"
+          fill="none"
+          aria-hidden="true"
+        >
           <path
             d="M2.75 8H13.25M2.75 8L5.25 5.5M2.75 8L5.25 10.5"
             strokeWidth={1.5}
@@ -31,21 +47,31 @@ export function PaginationPrevious({
         {children}
       </Button>
     </span>
-  )
+  );
 }
 
 export function PaginationNext({
   href = null,
-  children = 'Next',
+  children = "Next",
 }: {
-  href?: string | null
-  children?: React.ReactNode
+  href?: string | null;
+  children?: React.ReactNode;
 }) {
   return (
     <span className="flex grow basis-0 justify-end">
-      <Button {...(href === null ? { disabled: true } : { href })} plain aria-label="Next page">
+      <Button
+        {...(href === null ? { disabled: true } : { href })}
+        plain
+        aria-label="Next page"
+      >
         {children}
-        <svg className="stroke-current" data-slot="icon" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+        <svg
+          className="stroke-current"
+          data-slot="icon"
+          viewBox="0 0 16 16"
+          fill="none"
+          aria-hidden="true"
+        >
           <path
             d="M13.25 8L2.75 8M13.25 8L10.75 10.5M13.25 8L10.75 5.5"
             strokeWidth={1.5}
@@ -55,11 +81,13 @@ export function PaginationNext({
         </svg>
       </Button>
     </span>
-  )
+  );
 }
 
 export function PaginationList({ children }: { children: React.ReactNode }) {
-  return <span className="hidden items-baseline gap-x-2 sm:flex">{children}</span>
+  return (
+    <span className="hidden items-baseline gap-x-2 sm:flex">{children}</span>
+  );
 }
 
 export function PaginationPage({
@@ -67,33 +95,33 @@ export function PaginationPage({
   children,
   current = false,
 }: {
-  href: string
-  children: string
-  current?: boolean
+  href: string;
+  children: string;
+  current?: boolean;
 }) {
   return (
     <Button
       href={href}
       plain
       aria-label={`Page ${children}`}
-      aria-current={current ? 'page' : undefined}
+      aria-current={current ? "page" : undefined}
       className={clsx(
-        'min-w-[2.25rem] before:absolute before:-inset-px before:rounded-lg',
-        current && 'before:bg-zinc-950/5 dark:before:bg-white/10'
+        "min-w-[2.25rem] before:absolute before:-inset-px before:rounded-lg",
+        current && "before:bg-gray-950/5 dark:before:bg-white/10"
       )}
     >
       <span className="-mx-0.5">{children}</span>
     </Button>
-  )
+  );
 }
 
 export function PaginationGap() {
   return (
     <div
       aria-hidden="true"
-      className="w-[2.25rem] select-none text-center text-sm/6 font-semibold text-zinc-950 dark:text-white"
+      className="w-[2.25rem] select-none text-center text-sm/6 font-semibold text-gray-950 dark:text-white"
     >
       &hellip;
     </div>
-  )
+  );
 }
diff --git a/text2sql-frontend/src/components/Catalyst/radio.tsx b/text2sql-frontend/src/components/Catalyst/radio.tsx
index aa3b277f..b5716216 100644
--- a/text2sql-frontend/src/components/Catalyst/radio.tsx
+++ b/text2sql-frontend/src/components/Catalyst/radio.tsx
@@ -5,8 +5,8 @@ import {
   type FieldProps as HeadlessFieldProps,
   type RadioGroupProps as HeadlessRadioGroupProps,
   type RadioProps as HeadlessRadioProps,
-} from '@headlessui/react'
-import { clsx } from 'clsx'
+} from "@headlessui/react";
+import { clsx } from "clsx";
 
 export function RadioGroup({ className, ...props }: HeadlessRadioGroupProps) {
   return (
@@ -17,13 +17,13 @@ export function RadioGroup({ className, ...props }: HeadlessRadioGroupProps) {
         className,
 
         // Basic groups
-        'space-y-3 [&_[data-slot=label]]:font-normal',
+        "space-y-3 [&_[data-slot=label]]:font-normal",
 
         // With descriptions
-        'has-[[data-slot=description]]:space-y-6 [&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
+        "has-[[data-slot=description]]:space-y-6 [&_[data-slot=label]]:has-[[data-slot=description]]:font-medium"
       )}
     />
-  )
+  );
 }
 
 export function RadioField({ className, ...props }: HeadlessFieldProps) {
@@ -35,123 +35,127 @@ export function RadioField({ className, ...props }: HeadlessFieldProps) {
         className,
 
         // Base layout
-        'grid grid-cols-[1.125rem_1fr] items-center gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]',
+        "grid grid-cols-[1.125rem_1fr] items-center gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr]",
 
         // Control layout
-        '[&>[data-slot=control]]:col-start-1 [&>[data-slot=control]]:row-start-1 [&>[data-slot=control]]:justify-self-center',
+        "[&>[data-slot=control]]:col-start-1 [&>[data-slot=control]]:row-start-1 [&>[data-slot=control]]:justify-self-center",
 
         // Label layout
-        '[&>[data-slot=label]]:col-start-2 [&>[data-slot=label]]:row-start-1 [&>[data-slot=label]]:justify-self-start',
+        "[&>[data-slot=label]]:col-start-2 [&>[data-slot=label]]:row-start-1 [&>[data-slot=label]]:justify-self-start",
 
         // Description layout
-        '[&>[data-slot=description]]:col-start-2 [&>[data-slot=description]]:row-start-2',
+        "[&>[data-slot=description]]:col-start-2 [&>[data-slot=description]]:row-start-2",
 
         // With description
-        '[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
+        "[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium"
       )}
     />
-  )
+  );
 }
 
 const base = [
   // Basic layout
-  'relative isolate flex size-[1.1875rem] shrink-0 rounded-full sm:size-[1.0625rem]',
+  "relative isolate flex size-[1.1875rem] shrink-0 rounded-full sm:size-[1.0625rem]",
 
   // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
-  'before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-white before:shadow',
+  "before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-white before:shadow",
 
   // Background color when checked
-  'before:group-data-[checked]:bg-[--radio-checked-bg]',
+  "before:group-data-[checked]:bg-[--radio-checked-bg]",
 
   // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
-  'dark:before:hidden',
+  "dark:before:hidden",
 
   // Background color applied to control in dark mode
-  'dark:bg-white/5 dark:group-data-[checked]:bg-[--radio-checked-bg]',
+  "dark:bg-white/5 dark:group-data-[checked]:bg-[--radio-checked-bg]",
 
   // Border
-  'border border-zinc-950/15 group-data-[checked]:border-transparent group-data-[checked]:group-data-[hover]:border-transparent group-data-[hover]:border-zinc-950/30 group-data-[checked]:bg-[--radio-checked-border]',
-  'dark:border-white/15 dark:group-data-[checked]:border-white/5 dark:group-data-[checked]:group-data-[hover]:border-white/5 dark:group-data-[hover]:border-white/30',
+  "border border-gray-950/15 group-data-[checked]:border-transparent group-data-[checked]:group-data-[hover]:border-transparent group-data-[hover]:border-gray-950/30 group-data-[checked]:bg-[--radio-checked-border]",
+  "dark:border-white/15 dark:group-data-[checked]:border-white/5 dark:group-data-[checked]:group-data-[hover]:border-white/5 dark:group-data-[hover]:border-white/30",
 
   // Inner highlight shadow
-  'after:absolute after:inset-0 after:rounded-full after:shadow-[inset_0_1px_theme(colors.white/15%)]',
-  'dark:after:-inset-px dark:after:hidden dark:after:rounded-full dark:group-data-[checked]:after:block',
+  "after:absolute after:inset-0 after:rounded-full after:shadow-[inset_0_1px_theme(colors.white/15%)]",
+  "dark:after:-inset-px dark:after:hidden dark:after:rounded-full dark:group-data-[checked]:after:block",
 
   // Indicator color (light mode)
-  '[--radio-indicator:transparent] group-data-[checked]:[--radio-indicator:var(--radio-checked-indicator)] group-data-[checked]:group-data-[hover]:[--radio-indicator:var(--radio-checked-indicator)] group-data-[hover]:[--radio-indicator:theme(colors.zinc.900/10%)]',
+  "[--radio-indicator:transparent] group-data-[checked]:[--radio-indicator:var(--radio-checked-indicator)] group-data-[checked]:group-data-[hover]:[--radio-indicator:var(--radio-checked-indicator)] group-data-[hover]:[--radio-indicator:theme(colors.zinc.900/10%)]",
 
   // Indicator color (dark mode)
-  'dark:group-data-[checked]:group-data-[hover]:[--radio-indicator:var(--radio-checked-indicator)] dark:group-data-[hover]:[--radio-indicator:theme(colors.zinc.700)]',
+  "dark:group-data-[checked]:group-data-[hover]:[--radio-indicator:var(--radio-checked-indicator)] dark:group-data-[hover]:[--radio-indicator:theme(colors.zinc.700)]",
 
   // Focus ring
-  'group-data-[focus]:outline group-data-[focus]:outline-2 group-data-[focus]:outline-offset-2 group-data-[focus]:outline-blue-500',
+  "group-data-[focus]:outline group-data-[focus]:outline-2 group-data-[focus]:outline-offset-2 group-data-[focus]:outline-blue-500",
 
   // Disabled state
-  'group-data-[disabled]:opacity-50',
-  'group-data-[disabled]:border-zinc-950/25 group-data-[disabled]:bg-zinc-950/5 group-data-[disabled]:[--radio-checked-indicator:theme(colors.zinc.950/50%)] group-data-[disabled]:before:bg-transparent',
-  'dark:group-data-[disabled]:border-white/20 dark:group-data-[disabled]:bg-white/[2.5%] dark:group-data-[disabled]:[--radio-checked-indicator:theme(colors.white/50%)] dark:group-data-[disabled]:group-data-[checked]:after:hidden',
-]
+  "group-data-[disabled]:opacity-50",
+  "group-data-[disabled]:border-gray-950/25 group-data-[disabled]:bg-gray-950/5 group-data-[disabled]:[--radio-checked-indicator:theme(colors.zinc.950/50%)] group-data-[disabled]:before:bg-transparent",
+  "dark:group-data-[disabled]:border-white/20 dark:group-data-[disabled]:bg-white/[2.5%] dark:group-data-[disabled]:[--radio-checked-indicator:theme(colors.white/50%)] dark:group-data-[disabled]:group-data-[checked]:after:hidden",
+];
 
 const colors = {
-  'dark/zinc': [
-    '[--radio-checked-bg:theme(colors.zinc.900)] [--radio-checked-border:theme(colors.zinc.950/90%)] [--radio-checked-indicator:theme(colors.white)]',
-    'dark:[--radio-checked-bg:theme(colors.zinc.600)]',
+  "dark/zinc": [
+    "[--radio-checked-bg:theme(colors.zinc.900)] [--radio-checked-border:theme(colors.zinc.950/90%)] [--radio-checked-indicator:theme(colors.white)]",
+    "dark:[--radio-checked-bg:theme(colors.zinc.600)]",
   ],
-  'dark/white': [
-    '[--radio-checked-bg:theme(colors.zinc.900)] [--radio-checked-border:theme(colors.zinc.950/90%)] [--radio-checked-indicator:theme(colors.white)]',
-    'dark:[--radio-checked-bg:theme(colors.white)] dark:[--radio-checked-border:theme(colors.zinc.950/15%)] dark:[--radio-checked-indicator:theme(colors.zinc.900)]',
+  "dark/white": [
+    "[--radio-checked-bg:theme(colors.zinc.900)] [--radio-checked-border:theme(colors.zinc.950/90%)] [--radio-checked-indicator:theme(colors.white)]",
+    "dark:[--radio-checked-bg:theme(colors.white)] dark:[--radio-checked-border:theme(colors.zinc.950/15%)] dark:[--radio-checked-indicator:theme(colors.zinc.900)]",
   ],
   white:
-    '[--radio-checked-bg:theme(colors.white)] [--radio-checked-border:theme(colors.zinc.950/15%)] [--radio-checked-indicator:theme(colors.zinc.900)]',
-  dark: '[--radio-checked-bg:theme(colors.zinc.900)] [--radio-checked-border:theme(colors.zinc.950/90%)] [--radio-checked-indicator:theme(colors.white)]',
-  zinc: '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.zinc.600)] [--radio-checked-border:theme(colors.zinc.700/90%)]',
-  red: '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.red.600)] [--radio-checked-border:theme(colors.red.700/90%)]',
+    "[--radio-checked-bg:theme(colors.white)] [--radio-checked-border:theme(colors.zinc.950/15%)] [--radio-checked-indicator:theme(colors.zinc.900)]",
+  dark: "[--radio-checked-bg:theme(colors.zinc.900)] [--radio-checked-border:theme(colors.zinc.950/90%)] [--radio-checked-indicator:theme(colors.white)]",
+  zinc: "[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.zinc.600)] [--radio-checked-border:theme(colors.zinc.700/90%)]",
+  red: "[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.red.600)] [--radio-checked-border:theme(colors.red.700/90%)]",
   orange:
-    '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.orange.500)] [--radio-checked-border:theme(colors.orange.600/90%)]',
+    "[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.orange.500)] [--radio-checked-border:theme(colors.orange.600/90%)]",
   amber:
-    '[--radio-checked-bg:theme(colors.amber.400)] [--radio-checked-border:theme(colors.amber.500/80%)] [--radio-checked-indicator:theme(colors.amber.950)]',
+    "[--radio-checked-bg:theme(colors.amber.400)] [--radio-checked-border:theme(colors.amber.500/80%)] [--radio-checked-indicator:theme(colors.amber.950)]",
   yellow:
-    '[--radio-checked-bg:theme(colors.yellow.300)] [--radio-checked-border:theme(colors.yellow.400/80%)] [--radio-checked-indicator:theme(colors.yellow.950)]',
-  lime: '[--radio-checked-bg:theme(colors.lime.300)] [--radio-checked-border:theme(colors.lime.400/80%)] [--radio-checked-indicator:theme(colors.lime.950)]',
+    "[--radio-checked-bg:theme(colors.yellow.300)] [--radio-checked-border:theme(colors.yellow.400/80%)] [--radio-checked-indicator:theme(colors.yellow.950)]",
+  lime: "[--radio-checked-bg:theme(colors.lime.300)] [--radio-checked-border:theme(colors.lime.400/80%)] [--radio-checked-indicator:theme(colors.lime.950)]",
   green:
-    '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.green.600)] [--radio-checked-border:theme(colors.green.700/90%)]',
+    "[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.green.600)] [--radio-checked-border:theme(colors.green.700/90%)]",
   emerald:
-    '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.emerald.600)] [--radio-checked-border:theme(colors.emerald.700/90%)]',
-  teal: '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.teal.600)] [--radio-checked-border:theme(colors.teal.700/90%)]',
-  cyan: '[--radio-checked-bg:theme(colors.cyan.300)] [--radio-checked-border:theme(colors.cyan.400/80%)] [--radio-checked-indicator:theme(colors.cyan.950)]',
-  sky: '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.sky.500)] [--radio-checked-border:theme(colors.sky.600/80%)]',
-  blue: '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.blue.600)] [--radio-checked-border:theme(colors.blue.700/90%)]',
+    "[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.emerald.600)] [--radio-checked-border:theme(colors.emerald.700/90%)]",
+  teal: "[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.teal.600)] [--radio-checked-border:theme(colors.teal.700/90%)]",
+  cyan: "[--radio-checked-bg:theme(colors.cyan.300)] [--radio-checked-border:theme(colors.cyan.400/80%)] [--radio-checked-indicator:theme(colors.cyan.950)]",
+  sky: "[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.sky.500)] [--radio-checked-border:theme(colors.sky.600/80%)]",
+  blue: "[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.blue.600)] [--radio-checked-border:theme(colors.blue.700/90%)]",
   indigo:
-    '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.indigo.500)] [--radio-checked-border:theme(colors.indigo.600/90%)]',
+    "[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.indigo.500)] [--radio-checked-border:theme(colors.indigo.600/90%)]",
   violet:
-    '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.violet.500)] [--radio-checked-border:theme(colors.violet.600/90%)]',
+    "[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.violet.500)] [--radio-checked-border:theme(colors.violet.600/90%)]",
   purple:
-    '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.purple.500)] [--radio-checked-border:theme(colors.purple.600/90%)]',
+    "[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.purple.500)] [--radio-checked-border:theme(colors.purple.600/90%)]",
   fuchsia:
-    '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.fuchsia.500)] [--radio-checked-border:theme(colors.fuchsia.600/90%)]',
-  pink: '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.pink.500)] [--radio-checked-border:theme(colors.pink.600/90%)]',
-  rose: '[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.rose.500)] [--radio-checked-border:theme(colors.rose.600/90%)]',
-}
+    "[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.fuchsia.500)] [--radio-checked-border:theme(colors.fuchsia.600/90%)]",
+  pink: "[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.pink.500)] [--radio-checked-border:theme(colors.pink.600/90%)]",
+  rose: "[--radio-checked-indicator:theme(colors.white)] [--radio-checked-bg:theme(colors.rose.500)] [--radio-checked-border:theme(colors.rose.600/90%)]",
+};
 
-type Color = keyof typeof colors
+type Color = keyof typeof colors;
 
 export function Radio({
-  color = 'dark/zinc',
+  color = "dark/zinc",
   className,
   ...props
 }: { color?: Color; className?: string } & HeadlessRadioProps) {
   return (
-    <HeadlessRadio data-slot="control" {...props} className={clsx(className, 'group inline-flex focus:outline-none')}>
+    <HeadlessRadio
+      data-slot="control"
+      {...props}
+      className={clsx(className, "group inline-flex focus:outline-none")}
+    >
       <span className={clsx([base, colors[color]])}>
         <span
           className={clsx(
-            'size-full rounded-full border-[4.5px] border-transparent bg-[--radio-indicator] bg-clip-padding',
+            "size-full rounded-full border-[4.5px] border-transparent bg-[--radio-indicator] bg-clip-padding",
 
             // Forced colors mode
-            'forced-colors:border-[Canvas] forced-colors:group-data-[checked]:border-[Highlight]'
+            "forced-colors:border-[Canvas] forced-colors:group-data-[checked]:border-[Highlight]"
           )}
         />
       </span>
     </HeadlessRadio>
-  )
+  );
 }
diff --git a/text2sql-frontend/src/components/Catalyst/select.tsx b/text2sql-frontend/src/components/Catalyst/select.tsx
index 0932ec51..51cd7e15 100644
--- a/text2sql-frontend/src/components/Catalyst/select.tsx
+++ b/text2sql-frontend/src/components/Catalyst/select.tsx
@@ -1,81 +1,93 @@
-import { Select as HeadlessSelect, type SelectProps as HeadlessSelectProps } from '@headlessui/react'
-import { clsx } from 'clsx'
-import { forwardRef } from 'react'
+import {
+  Select as HeadlessSelect,
+  type SelectProps as HeadlessSelectProps,
+} from "@headlessui/react";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
 
-export const Select = forwardRef<HTMLSelectElement, HeadlessSelectProps>(function Select(
-  { className, multiple, ...props },
-  ref
-) {
-  return (
-    <span
-      data-slot="control"
-      className={clsx([
-        className,
+export const Select = forwardRef<HTMLSelectElement, HeadlessSelectProps>(
+  function Select({ className, multiple, ...props }, ref) {
+    return (
+      <span
+        data-slot="control"
+        className={clsx([
+          className,
 
-        // Basic layout
-        'group relative block w-full',
+          // Basic layout
+          "group relative block w-full",
 
-        // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
-        'before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow',
+          // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+          "before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow",
 
-        // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
-        'dark:before:hidden',
+          // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+          "dark:before:hidden",
 
-        // Focus ring
-        'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:has-[[data-focus]]:ring-2 sm:after:has-[[data-focus]]:ring-blue-500',
+          // Focus ring
+          "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:has-[[data-focus]]:ring-2 sm:after:has-[[data-focus]]:ring-blue-500",
 
-        // Disabled state
-        'has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-zinc-950/5 before:has-[[data-disabled]]:shadow-none',
-      ])}
-    >
-      <HeadlessSelect
-        ref={ref}
-        multiple={multiple}
-        {...props}
-        className={clsx([
-          // Basic layout
-          'relative block w-full appearance-none rounded-lg py-[calc(theme(spacing[2.5])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]',
+          // Disabled state
+          "has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-gray-950/5 before:has-[[data-disabled]]:shadow-none",
+        ])}
+      >
+        <HeadlessSelect
+          ref={ref}
+          multiple={multiple}
+          {...props}
+          className={clsx([
+            // Basic layout
+            "relative block w-full appearance-none rounded-lg py-[calc(theme(spacing[2.5])-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]",
 
-          // Horizontal padding
-          multiple
-            ? 'px-[calc(theme(spacing[3.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)]'
-            : 'pl-[calc(theme(spacing[3.5])-1px)] pr-[calc(theme(spacing.10)-1px)] sm:pl-[calc(theme(spacing.3)-1px)] sm:pr-[calc(theme(spacing.9)-1px)]',
+            // Horizontal padding
+            multiple
+              ? "px-[calc(theme(spacing[3.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)]"
+              : "pl-[calc(theme(spacing[3.5])-1px)] pr-[calc(theme(spacing.10)-1px)] sm:pl-[calc(theme(spacing.3)-1px)] sm:pr-[calc(theme(spacing.9)-1px)]",
 
-          // Options (multi-select)
-          '[&_optgroup]:font-semibold',
+            // Options (multi-select)
+            "[&_optgroup]:font-semibold",
 
-          // Typography
-          'text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white dark:*:text-white',
+            // Typography
+            "text-base/6 text-gray-950 placeholder:text-gray-500 sm:text-sm/6 dark:text-white dark:*:text-white",
 
-          // Border
-          'border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20',
+            // Border
+            "border border-gray-950/10 data-[hover]:border-gray-950/20 dark:border-white/10 dark:data-[hover]:border-white/20",
 
-          // Background color
-          'bg-transparent dark:bg-white/5 dark:*:bg-zinc-800',
+            // Background color
+            "bg-transparent dark:bg-white/5 dark:*:bg-gray-800",
 
-          // Hide default focus styles
-          'focus:outline-none',
+            // Hide default focus styles
+            "focus:outline-none",
 
-          // Invalid state
-          'data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500 data-[invalid]:dark:border-red-600 data-[invalid]:data-[hover]:dark:border-red-600',
+            // Invalid state
+            "data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500 data-[invalid]:dark:border-red-600 data-[invalid]:data-[hover]:dark:border-red-600",
 
-          // Disabled state
-          'data-[disabled]:border-zinc-950/20 data-[disabled]:opacity-100 dark:data-[hover]:data-[disabled]:border-white/15 data-[disabled]:dark:border-white/15 data-[disabled]:dark:bg-white/[2.5%]',
-        ])}
-      />
-      {!multiple && (
-        <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-          <svg
-            className="size-5 stroke-zinc-500 group-has-[[data-disabled]]:stroke-zinc-600 sm:size-4 dark:stroke-zinc-400 forced-colors:stroke-[CanvasText]"
-            viewBox="0 0 16 16"
-            aria-hidden="true"
-            fill="none"
-          >
-            <path d="M5.75 10.75L8 13L10.25 10.75" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
-            <path d="M10.25 5.25L8 3L5.75 5.25" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
-          </svg>
-        </span>
-      )}
-    </span>
-  )
-})
+            // Disabled state
+            "data-[disabled]:border-gray-950/20 data-[disabled]:opacity-100 dark:data-[hover]:data-[disabled]:border-white/15 data-[disabled]:dark:border-white/15 data-[disabled]:dark:bg-white/[2.5%]",
+          ])}
+        />
+        {!multiple && (
+          <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+            <svg
+              className="size-5 stroke-gray-500 group-has-[[data-disabled]]:stroke-gray-600 sm:size-4 dark:stroke-gray-400 forced-colors:stroke-[CanvasText]"
+              viewBox="0 0 16 16"
+              aria-hidden="true"
+              fill="none"
+            >
+              <path
+                d="M5.75 10.75L8 13L10.25 10.75"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M10.25 5.25L8 3L5.75 5.25"
+                strokeWidth={1.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </span>
+        )}
+      </span>
+    );
+  }
+);
diff --git a/text2sql-frontend/src/components/Catalyst/switch.tsx b/text2sql-frontend/src/components/Catalyst/switch.tsx
index 989ae198..e4e4b7f0 100644
--- a/text2sql-frontend/src/components/Catalyst/switch.tsx
+++ b/text2sql-frontend/src/components/Catalyst/switch.tsx
@@ -3,11 +3,14 @@ import {
   Switch as HeadlessSwitch,
   type FieldProps as HeadlessFieldProps,
   type SwitchProps as HeadlessSwitchProps,
-} from '@headlessui/react'
-import { clsx } from 'clsx'
-import type React from 'react'
+} from "@headlessui/react";
+import { clsx } from "clsx";
+import type React from "react";
 
-export function SwitchGroup({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
+export function SwitchGroup({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
   return (
     <div
       data-slot="control"
@@ -16,13 +19,13 @@ export function SwitchGroup({ className, ...props }: React.ComponentPropsWithout
         className,
 
         // Basic groups
-        'space-y-3 [&_[data-slot=label]]:font-normal',
+        "space-y-3 [&_[data-slot=label]]:font-normal",
 
         // With descriptions
-        'has-[[data-slot=description]]:space-y-6 [&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
+        "has-[[data-slot=description]]:space-y-6 [&_[data-slot=label]]:has-[[data-slot=description]]:font-medium"
       )}
     />
-  )
+  );
 }
 
 export function SwitchField({ className, ...props }: HeadlessFieldProps) {
@@ -34,127 +37,127 @@ export function SwitchField({ className, ...props }: HeadlessFieldProps) {
         className,
 
         // Base layout
-        'grid grid-cols-[1fr_auto] items-center gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto]',
+        "grid grid-cols-[1fr_auto] items-center gap-x-8 gap-y-1 sm:grid-cols-[1fr_auto]",
 
         // Control layout
-        '[&>[data-slot=control]]:col-start-2 [&>[data-slot=control]]:self-center',
+        "[&>[data-slot=control]]:col-start-2 [&>[data-slot=control]]:self-center",
 
         // Label layout
-        '[&>[data-slot=label]]:col-start-1 [&>[data-slot=label]]:row-start-1 [&>[data-slot=label]]:justify-self-start',
+        "[&>[data-slot=label]]:col-start-1 [&>[data-slot=label]]:row-start-1 [&>[data-slot=label]]:justify-self-start",
 
         // Description layout
-        '[&>[data-slot=description]]:col-start-1 [&>[data-slot=description]]:row-start-2',
+        "[&>[data-slot=description]]:col-start-1 [&>[data-slot=description]]:row-start-2",
 
         // With description
-        '[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium'
+        "[&_[data-slot=label]]:has-[[data-slot=description]]:font-medium"
       )}
     />
-  )
+  );
 }
 
 const colors = {
-  'dark/zinc': [
-    '[--switch-bg-ring:theme(colors.zinc.950/90%)] [--switch-bg:theme(colors.zinc.900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:theme(colors.white/25%)]',
-    '[--switch-ring:theme(colors.zinc.950/90%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white] dark:[--switch-ring:theme(colors.zinc.700/90%)]',
+  "dark/zinc": [
+    "[--switch-bg-ring:theme(colors.zinc.950/90%)] [--switch-bg:theme(colors.zinc.900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:theme(colors.white/25%)]",
+    "[--switch-ring:theme(colors.zinc.950/90%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white] dark:[--switch-ring:theme(colors.zinc.700/90%)]",
   ],
-  'dark/white': [
-    '[--switch-bg-ring:theme(colors.zinc.950/90%)] [--switch-bg:theme(colors.zinc.900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:theme(colors.white)]',
-    '[--switch-ring:theme(colors.zinc.950/90%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white] dark:[--switch-ring:transparent] dark:[--switch:theme(colors.zinc.900)]',
+  "dark/white": [
+    "[--switch-bg-ring:theme(colors.zinc.950/90%)] [--switch-bg:theme(colors.zinc.900)] dark:[--switch-bg-ring:transparent] dark:[--switch-bg:theme(colors.white)]",
+    "[--switch-ring:theme(colors.zinc.950/90%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white] dark:[--switch-ring:transparent] dark:[--switch:theme(colors.zinc.900)]",
   ],
   dark: [
-    '[--switch-bg-ring:theme(colors.zinc.950/90%)] [--switch-bg:theme(colors.zinc.900)] dark:[--switch-bg-ring:theme(colors.white/15%)]',
-    '[--switch-ring:theme(colors.zinc.950/90%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white]',
+    "[--switch-bg-ring:theme(colors.zinc.950/90%)] [--switch-bg:theme(colors.zinc.900)] dark:[--switch-bg-ring:theme(colors.white/15%)]",
+    "[--switch-ring:theme(colors.zinc.950/90%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white]",
   ],
   zinc: [
-    '[--switch-bg-ring:theme(colors.zinc.700/90%)] [--switch-bg:theme(colors.zinc.600)] dark:[--switch-bg-ring:transparent]',
-    '[--switch-shadow:theme(colors.black/10%)] [--switch:white] [--switch-ring:theme(colors.zinc.700/90%)]',
+    "[--switch-bg-ring:theme(colors.zinc.700/90%)] [--switch-bg:theme(colors.zinc.600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-shadow:theme(colors.black/10%)] [--switch:white] [--switch-ring:theme(colors.zinc.700/90%)]",
   ],
   white: [
-    '[--switch-bg-ring:theme(colors.black/15%)] [--switch-bg:white] dark:[--switch-bg-ring:transparent]',
-    '[--switch-shadow:theme(colors.black/10%)] [--switch-ring:transparent] [--switch:theme(colors.zinc.950)]',
+    "[--switch-bg-ring:theme(colors.black/15%)] [--switch-bg:white] dark:[--switch-bg-ring:transparent]",
+    "[--switch-shadow:theme(colors.black/10%)] [--switch-ring:transparent] [--switch:theme(colors.zinc.950)]",
   ],
   red: [
-    '[--switch-bg-ring:theme(colors.red.700/90%)] [--switch-bg:theme(colors.red.600)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.red.700/90%)] [--switch-shadow:theme(colors.red.900/20%)]',
+    "[--switch-bg-ring:theme(colors.red.700/90%)] [--switch-bg:theme(colors.red.600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:theme(colors.red.700/90%)] [--switch-shadow:theme(colors.red.900/20%)]",
   ],
   orange: [
-    '[--switch-bg-ring:theme(colors.orange.600/90%)] [--switch-bg:theme(colors.orange.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.orange.600/90%)] [--switch-shadow:theme(colors.orange.900/20%)]',
+    "[--switch-bg-ring:theme(colors.orange.600/90%)] [--switch-bg:theme(colors.orange.500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:theme(colors.orange.600/90%)] [--switch-shadow:theme(colors.orange.900/20%)]",
   ],
   amber: [
-    '[--switch-bg-ring:theme(colors.amber.500/80%)] [--switch-bg:theme(colors.amber.400)] dark:[--switch-bg-ring:transparent]',
-    '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.amber.950)]',
+    "[--switch-bg-ring:theme(colors.amber.500/80%)] [--switch-bg:theme(colors.amber.400)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.amber.950)]",
   ],
   yellow: [
-    '[--switch-bg-ring:theme(colors.yellow.400/80%)] [--switch-bg:theme(colors.yellow.300)] dark:[--switch-bg-ring:transparent]',
-    '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.yellow.950)]',
+    "[--switch-bg-ring:theme(colors.yellow.400/80%)] [--switch-bg:theme(colors.yellow.300)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.yellow.950)]",
   ],
   lime: [
-    '[--switch-bg-ring:theme(colors.lime.400/80%)] [--switch-bg:theme(colors.lime.300)] dark:[--switch-bg-ring:transparent]',
-    '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.lime.950)]',
+    "[--switch-bg-ring:theme(colors.lime.400/80%)] [--switch-bg:theme(colors.lime.300)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.lime.950)]",
   ],
   green: [
-    '[--switch-bg-ring:theme(colors.green.700/90%)] [--switch-bg:theme(colors.green.600)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.green.700/90%)] [--switch-shadow:theme(colors.green.900/20%)]',
+    "[--switch-bg-ring:theme(colors.green.700/90%)] [--switch-bg:theme(colors.green.600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:theme(colors.green.700/90%)] [--switch-shadow:theme(colors.green.900/20%)]",
   ],
   emerald: [
-    '[--switch-bg-ring:theme(colors.emerald.600/90%)] [--switch-bg:theme(colors.emerald.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.emerald.600/90%)] [--switch-shadow:theme(colors.emerald.900/20%)]',
+    "[--switch-bg-ring:theme(colors.emerald.600/90%)] [--switch-bg:theme(colors.emerald.500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:theme(colors.emerald.600/90%)] [--switch-shadow:theme(colors.emerald.900/20%)]",
   ],
   teal: [
-    '[--switch-bg-ring:theme(colors.teal.700/90%)] [--switch-bg:theme(colors.teal.600)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.teal.700/90%)] [--switch-shadow:theme(colors.teal.900/20%)]',
+    "[--switch-bg-ring:theme(colors.teal.700/90%)] [--switch-bg:theme(colors.teal.600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:theme(colors.teal.700/90%)] [--switch-shadow:theme(colors.teal.900/20%)]",
   ],
   cyan: [
-    '[--switch-bg-ring:theme(colors.cyan.400/80%)] [--switch-bg:theme(colors.cyan.300)] dark:[--switch-bg-ring:transparent]',
-    '[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.cyan.950)]',
+    "[--switch-bg-ring:theme(colors.cyan.400/80%)] [--switch-bg:theme(colors.cyan.300)] dark:[--switch-bg-ring:transparent]",
+    "[--switch-ring:transparent] [--switch-shadow:transparent] [--switch:theme(colors.cyan.950)]",
   ],
   sky: [
-    '[--switch-bg-ring:theme(colors.sky.600/80%)] [--switch-bg:theme(colors.sky.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.sky.600/80%)] [--switch-shadow:theme(colors.sky.900/20%)]',
+    "[--switch-bg-ring:theme(colors.sky.600/80%)] [--switch-bg:theme(colors.sky.500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:theme(colors.sky.600/80%)] [--switch-shadow:theme(colors.sky.900/20%)]",
   ],
   blue: [
-    '[--switch-bg-ring:theme(colors.blue.700/90%)] [--switch-bg:theme(colors.blue.600)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.blue.700/90%)] [--switch-shadow:theme(colors.blue.900/20%)]',
+    "[--switch-bg-ring:theme(colors.blue.700/90%)] [--switch-bg:theme(colors.blue.600)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:theme(colors.blue.700/90%)] [--switch-shadow:theme(colors.blue.900/20%)]",
   ],
   indigo: [
-    '[--switch-bg-ring:theme(colors.indigo.600/90%)] [--switch-bg:theme(colors.indigo.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.indigo.600/90%)] [--switch-shadow:theme(colors.indigo.900/20%)]',
+    "[--switch-bg-ring:theme(colors.indigo.600/90%)] [--switch-bg:theme(colors.indigo.500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:theme(colors.indigo.600/90%)] [--switch-shadow:theme(colors.indigo.900/20%)]",
   ],
   violet: [
-    '[--switch-bg-ring:theme(colors.violet.600/90%)] [--switch-bg:theme(colors.violet.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.violet.600/90%)] [--switch-shadow:theme(colors.violet.900/20%)]',
+    "[--switch-bg-ring:theme(colors.violet.600/90%)] [--switch-bg:theme(colors.violet.500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:theme(colors.violet.600/90%)] [--switch-shadow:theme(colors.violet.900/20%)]",
   ],
   purple: [
-    '[--switch-bg-ring:theme(colors.purple.600/90%)] [--switch-bg:theme(colors.purple.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.purple.600/90%)] [--switch-shadow:theme(colors.purple.900/20%)]',
+    "[--switch-bg-ring:theme(colors.purple.600/90%)] [--switch-bg:theme(colors.purple.500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:theme(colors.purple.600/90%)] [--switch-shadow:theme(colors.purple.900/20%)]",
   ],
   fuchsia: [
-    '[--switch-bg-ring:theme(colors.fuchsia.600/90%)] [--switch-bg:theme(colors.fuchsia.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.fuchsia.600/90%)] [--switch-shadow:theme(colors.fuchsia.900/20%)]',
+    "[--switch-bg-ring:theme(colors.fuchsia.600/90%)] [--switch-bg:theme(colors.fuchsia.500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:theme(colors.fuchsia.600/90%)] [--switch-shadow:theme(colors.fuchsia.900/20%)]",
   ],
   pink: [
-    '[--switch-bg-ring:theme(colors.pink.600/90%)] [--switch-bg:theme(colors.pink.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.pink.600/90%)] [--switch-shadow:theme(colors.pink.900/20%)]',
+    "[--switch-bg-ring:theme(colors.pink.600/90%)] [--switch-bg:theme(colors.pink.500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:theme(colors.pink.600/90%)] [--switch-shadow:theme(colors.pink.900/20%)]",
   ],
   rose: [
-    '[--switch-bg-ring:theme(colors.rose.600/90%)] [--switch-bg:theme(colors.rose.500)] dark:[--switch-bg-ring:transparent]',
-    '[--switch:white] [--switch-ring:theme(colors.rose.600/90%)] [--switch-shadow:theme(colors.rose.900/20%)]',
+    "[--switch-bg-ring:theme(colors.rose.600/90%)] [--switch-bg:theme(colors.rose.500)] dark:[--switch-bg-ring:transparent]",
+    "[--switch:white] [--switch-ring:theme(colors.rose.600/90%)] [--switch-shadow:theme(colors.rose.900/20%)]",
   ],
-}
+};
 
-type Color = keyof typeof colors
+type Color = keyof typeof colors;
 
 export function Switch({
-  color = 'dark/zinc',
+  color = "dark/zinc",
   className,
   children,
   ...props
 }: {
-  color?: Color
-  className?: string
-  children?: React.ReactNode
-} & Omit<HeadlessSwitchProps, 'children'>) {
+  color?: Color;
+  className?: string;
+  children?: React.ReactNode;
+} & Omit<HeadlessSwitchProps, "children">) {
   return (
     <HeadlessSwitch
       data-slot="control"
@@ -162,30 +165,30 @@ export function Switch({
         className,
 
         // Base styles
-        'group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8',
+        "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8",
 
         // Transitions
-        'transition duration-0 ease-in-out data-[changing]:duration-200',
+        "transition duration-0 ease-in-out data-[changing]:duration-200",
 
         // Outline and background color in forced-colors mode so switch is still visible
-        'forced-colors:outline forced-colors:[--switch-bg:Highlight] dark:forced-colors:[--switch-bg:Highlight]',
+        "forced-colors:outline forced-colors:[--switch-bg:Highlight] dark:forced-colors:[--switch-bg:Highlight]",
 
         // Unchecked
-        'bg-zinc-200 ring-1 ring-inset ring-black/5 dark:bg-white/5 dark:ring-white/15',
+        "bg-gray-200 ring-1 ring-inset ring-black/5 dark:bg-white/5 dark:ring-white/15",
 
         // Checked
-        'data-[checked]:bg-[--switch-bg] data-[checked]:ring-[--switch-bg-ring] dark:data-[checked]:bg-[--switch-bg] dark:data-[checked]:ring-[--switch-bg-ring]',
+        "data-[checked]:bg-[--switch-bg] data-[checked]:ring-[--switch-bg-ring] dark:data-[checked]:bg-[--switch-bg] dark:data-[checked]:ring-[--switch-bg-ring]",
 
         // Focus
-        'focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500',
+        "focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500",
 
         // Hover
-        'data-[hover]:data-[checked]:ring-[--switch-bg-ring] data-[hover]:ring-black/15',
-        'dark:data-[hover]:data-[checked]:ring-[--switch-bg-ring] dark:data-[hover]:ring-white/25',
+        "data-[hover]:data-[checked]:ring-[--switch-bg-ring] data-[hover]:ring-black/15",
+        "dark:data-[hover]:data-[checked]:ring-[--switch-bg-ring] dark:data-[hover]:ring-white/25",
 
         // Disabled
-        'data-[disabled]:bg-zinc-200 data-[disabled]:data-[checked]:bg-zinc-200 data-[disabled]:opacity-50 data-[disabled]:data-[checked]:ring-black/5',
-        'dark:data-[disabled]:bg-white/15 dark:data-[disabled]:data-[checked]:bg-white/15 dark:data-[disabled]:data-[checked]:ring-white/15',
+        "data-[disabled]:bg-gray-200 data-[disabled]:data-[checked]:bg-gray-200 data-[disabled]:opacity-50 data-[disabled]:data-[checked]:ring-black/5",
+        "dark:data-[disabled]:bg-white/15 dark:data-[disabled]:data-[checked]:bg-white/15 dark:data-[disabled]:data-[checked]:ring-white/15",
 
         // Color specific styles
         colors[color]
@@ -196,25 +199,25 @@ export function Switch({
         aria-hidden="true"
         className={clsx(
           // Basic layout
-          'pointer-events-none relative inline-block size-[1.125rem] rounded-full sm:size-3.5',
+          "pointer-events-none relative inline-block size-[1.125rem] rounded-full sm:size-3.5",
 
           // Transition
-          'translate-x-0 transition duration-200 ease-in-out',
+          "translate-x-0 transition duration-200 ease-in-out",
 
           // Invisible border so the switch is still visible in forced-colors mode
-          'border border-transparent',
+          "border border-transparent",
 
           // Unchecked
-          'bg-white shadow ring-1 ring-black/5',
+          "bg-white shadow ring-1 ring-black/5",
 
           // Checked
-          'group-data-[checked]:bg-[--switch] group-data-[checked]:shadow-[--switch-shadow] group-data-[checked]:ring-[--switch-ring]',
-          'group-data-[checked]:translate-x-4 sm:group-data-[checked]:translate-x-3',
+          "group-data-[checked]:bg-[--switch] group-data-[checked]:shadow-[--switch-shadow] group-data-[checked]:ring-[--switch-ring]",
+          "group-data-[checked]:translate-x-4 sm:group-data-[checked]:translate-x-3",
 
           // Disabled
-          'group-data-[disabled]:group-data-[checked]:bg-white group-data-[disabled]:group-data-[checked]:shadow group-data-[disabled]:group-data-[checked]:ring-black/5'
+          "group-data-[disabled]:group-data-[checked]:bg-white group-data-[disabled]:group-data-[checked]:shadow group-data-[disabled]:group-data-[checked]:ring-black/5"
         )}
       />
     </HeadlessSwitch>
-  )
+  );
 }
diff --git a/text2sql-frontend/src/components/Catalyst/table.tsx b/text2sql-frontend/src/components/Catalyst/table.tsx
index 67d30a5e..3a9c9cfc 100644
--- a/text2sql-frontend/src/components/Catalyst/table.tsx
+++ b/text2sql-frontend/src/components/Catalyst/table.tsx
@@ -1,16 +1,21 @@
-'use client'
+"use client";
 
-import { clsx } from 'clsx'
-import type React from 'react'
-import { createContext, useContext, useState } from 'react'
-import { Link } from './link'
+import { clsx } from "clsx";
+import type React from "react";
+import { createContext, useContext, useState } from "react";
+import { Link } from "./link";
 
-const TableContext = createContext<{ bleed: boolean; dense: boolean; grid: boolean; striped: boolean }>({
+const TableContext = createContext<{
+  bleed: boolean;
+  dense: boolean;
+  grid: boolean;
+  striped: boolean;
+}>({
   bleed: false,
   dense: false,
   grid: false,
   striped: false,
-})
+});
 
 export function Table({
   bleed = false,
@@ -20,33 +25,67 @@ export function Table({
   className,
   children,
   ...props
-}: { bleed?: boolean; dense?: boolean; grid?: boolean; striped?: boolean } & React.ComponentPropsWithoutRef<'div'>) {
+}: {
+  bleed?: boolean;
+  dense?: boolean;
+  grid?: boolean;
+  striped?: boolean;
+} & React.ComponentPropsWithoutRef<"div">) {
   return (
-    <TableContext.Provider value={{ bleed, dense, grid, striped } as React.ContextType<typeof TableContext>}>
+    <TableContext.Provider
+      value={
+        { bleed, dense, grid, striped } as React.ContextType<
+          typeof TableContext
+        >
+      }
+    >
       <div className="flow-root">
-        <div {...props} className={clsx(className, '-mx-[--gutter] overflow-x-auto whitespace-nowrap')}>
-          <div className={clsx('inline-block min-w-full align-middle', !bleed && 'sm:px-[--gutter]')}>
+        <div
+          {...props}
+          className={clsx(
+            className,
+            "-mx-[--gutter] overflow-x-auto whitespace-nowrap"
+          )}
+        >
+          <div
+            className={clsx(
+              "inline-block min-w-full align-middle",
+              !bleed && "sm:px-[--gutter]"
+            )}
+          >
             <table className="min-w-full text-left text-sm/6">{children}</table>
           </div>
         </div>
       </div>
     </TableContext.Provider>
-  )
+  );
 }
 
-export function TableHead({ className, ...props }: React.ComponentPropsWithoutRef<'thead'>) {
-  return <thead className={clsx(className, 'text-zinc-500 dark:text-zinc-400')} {...props} />
+export function TableHead({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"thead">) {
+  return (
+    <thead
+      className={clsx(className, "text-gray-500 dark:text-gray-400")}
+      {...props}
+    />
+  );
 }
 
-export function TableBody(props: React.ComponentPropsWithoutRef<'tbody'>) {
-  return <tbody {...props} />
+export function TableBody(props: React.ComponentPropsWithoutRef<"tbody">) {
+  return <tbody {...props} />;
 }
 
-const TableRowContext = createContext<{ href?: string; target?: string; title?: string }>({
+const TableRowContext = createContext<{
+  href?: string;
+  target?: string;
+  title?: string;
+}>({
   href: undefined,
   target: undefined,
   title: undefined,
-})
+});
 
 export function TableRow({
   href,
@@ -55,48 +94,66 @@ export function TableRow({
   className,
   children,
   ...props
-}: { href?: string; target?: string; title?: string } & React.ComponentPropsWithoutRef<'tr'>) {
-  let { striped } = useContext(TableContext)
+}: {
+  href?: string;
+  target?: string;
+  title?: string;
+} & React.ComponentPropsWithoutRef<"tr">) {
+  let { striped } = useContext(TableContext);
 
   return (
-    <TableRowContext.Provider value={{ href, target, title } as React.ContextType<typeof TableRowContext>}>
+    <TableRowContext.Provider
+      value={
+        { href, target, title } as React.ContextType<typeof TableRowContext>
+      }
+    >
       <tr
         {...props}
         className={clsx(
           className,
           href &&
-            'has-[[data-row-link][data-focus]]:outline has-[[data-row-link][data-focus]]:outline-2 has-[[data-row-link][data-focus]]:-outline-offset-2 has-[[data-row-link][data-focus]]:outline-blue-500 dark:focus-within:bg-white/[2.5%]',
-          striped && 'even:bg-zinc-950/[2.5%] dark:even:bg-white/[2.5%]',
-          href && striped && 'hover:bg-zinc-950/5 dark:hover:bg-white/5',
-          href && !striped && 'hover:bg-zinc-950/[2.5%] dark:hover:bg-white/[2.5%]'
+            "has-[[data-row-link][data-focus]]:outline has-[[data-row-link][data-focus]]:outline-2 has-[[data-row-link][data-focus]]:-outline-offset-2 has-[[data-row-link][data-focus]]:outline-blue-500 dark:focus-within:bg-white/[2.5%]",
+          striped && "even:bg-gray-950/[2.5%] dark:even:bg-white/[2.5%]",
+          href && striped && "hover:bg-gray-950/5 dark:hover:bg-white/5",
+          href &&
+            !striped &&
+            "hover:bg-gray-950/[2.5%] dark:hover:bg-white/[2.5%]"
         )}
       >
         {children}
       </tr>
     </TableRowContext.Provider>
-  )
+  );
 }
 
-export function TableHeader({ className, ...props }: React.ComponentPropsWithoutRef<'th'>) {
-  let { bleed, grid } = useContext(TableContext)
+export function TableHeader({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"th">) {
+  let { bleed, grid } = useContext(TableContext);
 
   return (
     <th
       {...props}
       className={clsx(
         className,
-        'border-b border-b-zinc-950/10 px-4 py-2 font-medium first:pl-[var(--gutter,theme(spacing.2))] last:pr-[var(--gutter,theme(spacing.2))] dark:border-b-white/10',
-        grid && 'border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5',
-        !bleed && 'sm:first:pl-2 sm:last:pr-2'
+        "border-b border-b-gray-950/10 px-4 py-2 font-medium first:pl-[var(--gutter,theme(spacing.2))] last:pr-[var(--gutter,theme(spacing.2))] dark:border-b-white/10",
+        grid &&
+          "border-l border-l-gray-950/5 first:border-l-0 dark:border-l-white/5",
+        !bleed && "sm:first:pl-2 sm:last:pr-2"
       )}
     />
-  )
+  );
 }
 
-export function TableCell({ className, children, ...props }: React.ComponentPropsWithoutRef<'td'>) {
-  let { bleed, dense, grid, striped } = useContext(TableContext)
-  let { href, target, title } = useContext(TableRowContext)
-  let [cellRef, setCellRef] = useState<HTMLElement | null>(null)
+export function TableCell({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<"td">) {
+  let { bleed, dense, grid, striped } = useContext(TableContext);
+  let { href, target, title } = useContext(TableRowContext);
+  let [cellRef, setCellRef] = useState<HTMLElement | null>(null);
 
   return (
     <td
@@ -104,11 +161,12 @@ export function TableCell({ className, children, ...props }: React.ComponentProp
       {...props}
       className={clsx(
         className,
-        'relative px-4 first:pl-[var(--gutter,theme(spacing.2))] last:pr-[var(--gutter,theme(spacing.2))]',
-        !striped && 'border-b border-zinc-950/5 dark:border-white/5',
-        grid && 'border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5',
-        dense ? 'py-2.5' : 'py-4',
-        !bleed && 'sm:first:pl-2 sm:last:pr-2'
+        "relative px-4 first:pl-[var(--gutter,theme(spacing.2))] last:pr-[var(--gutter,theme(spacing.2))]",
+        !striped && "border-b border-gray-950/5 dark:border-white/5",
+        grid &&
+          "border-l border-l-gray-950/5 first:border-l-0 dark:border-l-white/5",
+        dense ? "py-2.5" : "py-4",
+        !bleed && "sm:first:pl-2 sm:last:pr-2"
       )}
     >
       {href && (
@@ -123,5 +181,5 @@ export function TableCell({ className, children, ...props }: React.ComponentProp
       )}
       {children}
     </td>
-  )
+  );
 }
diff --git a/text2sql-frontend/src/components/Catalyst/text.tsx b/text2sql-frontend/src/components/Catalyst/text.tsx
index 099919c3..22ae55f8 100644
--- a/text2sql-frontend/src/components/Catalyst/text.tsx
+++ b/text2sql-frontend/src/components/Catalyst/text.tsx
@@ -1,40 +1,60 @@
-import { clsx } from 'clsx'
-import { Link } from './link'
+import { clsx } from "clsx";
+import { Link } from "./link";
 
-export function Text({ className, ...props }: React.ComponentPropsWithoutRef<'p'>) {
+export function Text({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"p">) {
   return (
     <p
       {...props}
       data-slot="text"
-      className={clsx(className, 'text-base/6 text-zinc-500 sm:text-sm/6 dark:text-zinc-400')}
+      className={clsx(
+        className,
+        "text-base/6 text-gray-500 sm:text-sm/6 dark:text-gray-400"
+      )}
     />
-  )
+  );
 }
 
-export function TextLink({ className, ...props }: React.ComponentPropsWithoutRef<typeof Link>) {
+export function TextLink({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Link>) {
   return (
     <Link
       {...props}
       className={clsx(
         className,
-        'text-zinc-950 underline decoration-zinc-950/50 data-[hover]:decoration-zinc-950 dark:text-white dark:decoration-white/50 dark:data-[hover]:decoration-white'
+        "text-gray-950 underline decoration-gray-950/50 data-[hover]:decoration-gray-950 dark:text-white dark:decoration-white/50 dark:data-[hover]:decoration-white"
       )}
     />
-  )
+  );
 }
 
-export function Strong({ className, ...props }: React.ComponentPropsWithoutRef<'strong'>) {
-  return <strong {...props} className={clsx(className, 'font-medium text-zinc-950 dark:text-white')} />
+export function Strong({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"strong">) {
+  return (
+    <strong
+      {...props}
+      className={clsx(className, "font-medium text-gray-950 dark:text-white")}
+    />
+  );
 }
 
-export function Code({ className, ...props }: React.ComponentPropsWithoutRef<'code'>) {
+export function Code({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"code">) {
   return (
     <code
       {...props}
       className={clsx(
         className,
-        'rounded border border-zinc-950/10 bg-zinc-950/[2.5%] px-0.5 text-sm font-medium text-zinc-950 sm:text-[0.8125rem] dark:border-white/20 dark:bg-white/5 dark:text-white'
+        "rounded border border-gray-950/10 bg-gray-950/[2.5%] px-0.5 text-sm font-medium text-gray-950 sm:text-[0.8125rem] dark:border-white/20 dark:bg-white/5 dark:text-white"
       )}
     />
-  )
+  );
 }
diff --git a/text2sql-frontend/src/components/Catalyst/textarea.tsx b/text2sql-frontend/src/components/Catalyst/textarea.tsx
index df05b4a6..2173c560 100644
--- a/text2sql-frontend/src/components/Catalyst/textarea.tsx
+++ b/text2sql-frontend/src/components/Catalyst/textarea.tsx
@@ -1,61 +1,65 @@
-import { Textarea as HeadlessTextarea, type TextareaProps as HeadlessTextareaProps } from '@headlessui/react'
-import { clsx } from 'clsx'
-import { forwardRef } from 'react'
-
-export const Textarea = forwardRef<HTMLTextAreaElement, { resizable?: boolean } & HeadlessTextareaProps>(
-  function Textarea({ className, resizable = true, ...props }, ref) {
-    return (
-      <span
-        data-slot="control"
-        className={clsx([
-          className,
+import {
+  Textarea as HeadlessTextarea,
+  type TextareaProps as HeadlessTextareaProps,
+} from "@headlessui/react";
+import { clsx } from "clsx";
+import { forwardRef } from "react";
+
+export const Textarea = forwardRef<
+  HTMLTextAreaElement,
+  { resizable?: boolean } & HeadlessTextareaProps
+>(function Textarea({ className, resizable = true, ...props }, ref) {
+  return (
+    <span
+      data-slot="control"
+      className={clsx([
+        className,
+
+        // Basic layout
+        "relative block w-full",
+
+        // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
+        "before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow",
+
+        // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
+        "dark:before:hidden",
 
+        // Focus ring
+        "after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:focus-within:ring-2 sm:after:focus-within:ring-blue-500",
+
+        // Disabled state
+        "has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-gray-950/5 before:has-[[data-disabled]]:shadow-none",
+      ])}
+    >
+      <HeadlessTextarea
+        ref={ref}
+        className={clsx([
           // Basic layout
-          'relative block w-full',
+          "relative block h-full w-full appearance-none rounded-lg px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]",
+
+          // Typography
+          "text-base/6 text-gray-950 placeholder:text-gray-500 sm:text-sm/6 dark:text-white",
 
-          // Background color + shadow applied to inset pseudo element, so shadow blends with border in light mode
-          'before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow',
+          // Border
+          "border border-gray-950/10 data-[hover]:border-gray-950/20 dark:border-white/10 dark:data-[hover]:border-white/20",
 
-          // Background color is moved to control and shadow is removed in dark mode so hide `before` pseudo
-          'dark:before:hidden',
+          // Background color
+          "bg-transparent dark:bg-white/5",
 
-          // Focus ring
-          'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:focus-within:ring-2 sm:after:focus-within:ring-blue-500',
+          // Hide default focus styles
+          "focus:outline-none",
+
+          // Invalid state
+          "data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500 data-[invalid]:dark:border-red-600 data-[invalid]:data-[hover]:dark:border-red-600",
 
           // Disabled state
-          'has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-zinc-950/5 before:has-[[data-disabled]]:shadow-none',
+          "disabled:border-gray-950/20 disabled:dark:border-white/15 disabled:dark:bg-white/[2.5%] dark:data-[hover]:disabled:border-white/15",
+
+          // Resizable
+          resizable ? "resize-y" : "resize-none",
         ])}
-      >
-        <HeadlessTextarea
-          ref={ref}
-          className={clsx([
-            // Basic layout
-            'relative block h-full w-full appearance-none rounded-lg px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)]',
-
-            // Typography
-            'text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 dark:text-white',
-
-            // Border
-            'border border-zinc-950/10 data-[hover]:border-zinc-950/20 dark:border-white/10 dark:data-[hover]:border-white/20',
-
-            // Background color
-            'bg-transparent dark:bg-white/5',
-
-            // Hide default focus styles
-            'focus:outline-none',
-
-            // Invalid state
-            'data-[invalid]:border-red-500 data-[invalid]:data-[hover]:border-red-500 data-[invalid]:dark:border-red-600 data-[invalid]:data-[hover]:dark:border-red-600',
-
-            // Disabled state
-            'disabled:border-zinc-950/20 disabled:dark:border-white/15 disabled:dark:bg-white/[2.5%] dark:data-[hover]:disabled:border-white/15',
-
-            // Resizable
-            resizable ? 'resize-y' : 'resize-none',
-          ])}
-          {...props}
-        />
-      </span>
-    )
-  }
-)
+        {...props}
+      />
+    </span>
+  );
+});
diff --git a/text2sql-frontend/src/components/Connection/ConnectionEditor.tsx b/text2sql-frontend/src/components/Connection/ConnectionEditor.tsx
index 905cc1c4..d8d07adc 100644
--- a/text2sql-frontend/src/components/Connection/ConnectionEditor.tsx
+++ b/text2sql-frontend/src/components/Connection/ConnectionEditor.tsx
@@ -129,7 +129,7 @@ export const ConnectionEditor = () => {
   }
 
   return (
-    <div className="bg-gray-800 w-full h-full relative flex flex-col -mt-16 lg:mt-0">
+    <div className="dark:bg-gray-900 w-full h-full relative flex flex-col -mt-16 lg:mt-0">
       <AlertModal
         isOpen={showAlert}
         title="Discard Unsaved Changes?"
@@ -213,28 +213,26 @@ export const ConnectionEditor = () => {
           </div>
 
           <form className="sm:col-span-6 flex items-center justify-end gap-x-6">
+            <button
+              onClick={handleDelete}
+              className="rounded-md bg-gray-700 hover:bg-red-700 px-3 py-2 text-sm font-medium text-red-500 hover:text-white border border-gray-600 hover:border-red-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 transition-colors duration-150"
+            >
+              Delete this connection
+            </button>
             <button
               type="button"
-              className="rounded-md bg-gray-600 px-3 py-2 text-sm font-semibold text-white border border-gray-500 hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 transition-colors duration-150"
+              className="rounded-md bg-gray-600 px-3 py-2 text-sm font-medium text-white border border-gray-500 hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 transition-colors duration-150"
             >
               Cancel
             </button>
             <button
               type="submit"
               onClick={handleSubmit}
-              className="rounded-md px-4 py-2 text-sm font-semibold text-white shadow-sm border bg-green-600 border-green-500 hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600 transition-colors duration-150"
+              className="rounded-md px-4 py-2 text-sm font-medium text-white shadow-sm border bg-green-600 border-green-500 hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600 transition-colors duration-150"
             >
               Save
             </button>
           </form>
-          <div className="sm:col-span-6 flex items-center justify-end gap-x-6">
-            <button
-              onClick={handleDelete}
-              className="rounded-md px-4 py-2 text-sm font-semibold text-white shadow-sm border bg-red-600 border-red-500 hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 transition-colors duration-150"
-            >
-              Delete
-            </button>
-          </div>
 
           <div className="sm:col-span-6">
             <label
@@ -249,25 +247,24 @@ export const ConnectionEditor = () => {
               <br></br>
               <br></br>
               For example, consider a table called{" "}
-              <span className="font-mono text-lime-300 bg-slate-600 rounded-md px-2 py-1">
+              <span className="font-mono text-lime-300 bg-gray-600 rounded-md px-2">
                 users
               </span>{" "}
               with a vague column called{" "}
-              <span className="font-mono text-lime-300 bg-slate-600 rounded-md px-2 py-1">
+              <span className="font-mono text-lime-300 bg-gray-600 rounded-md px-2">
                 type
               </span>{" "}
               that contains one of{" "}
-              <span className="font-mono text-white bg-slate-600 rounded-md px-2 py-1">
+              <span className="font-mono text-white bg-gray-600 rounded-md px-2">
                 admin, basic, beta
               </span>
               . You could add a description to the{" "}
-              <span className="font-mono text-lime-300 bg-slate-600 rounded-md px-2 py-1">
+              <span className="font-mono text-lime-300 bg-gray-600 rounded-md px-2">
                 type
               </span>{" "}
-              column that says <br></br>
-              <br></br>
-              <span className="font-mono text-gray-300 rounded-md bg-slate-600 px-2 py-1">
-                Contains one of 'admin', 'basic', 'beta'.
+              column that says{" "}
+              <span className="font-semibold text-white">
+                "Contains one of 'admin', 'basic', 'beta'."
               </span>
               <br></br>
               <br></br>
diff --git a/text2sql-frontend/src/components/Connection/NewConnectionModal.tsx b/text2sql-frontend/src/components/Connection/NewConnectionModal.tsx
index 80c85136..5d00be33 100644
--- a/text2sql-frontend/src/components/Connection/NewConnectionModal.tsx
+++ b/text2sql-frontend/src/components/Connection/NewConnectionModal.tsx
@@ -3,6 +3,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { api } from "../../api";
 import { Spinner } from "../Spinner/Spinner";
 import { enqueueSnackbar } from "notistack";
+import { isAxiosError } from "axios";
 
 interface NewConnectionModalFormProps {
   isOpen: boolean;
@@ -27,6 +28,11 @@ function NewConnectionModal({ isOpen, onClose }: NewConnectionModalFormProps) {
   const [connectionName, setConnectionName] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
+  const clearInputs = () => {
+    setUnmaskedDsn("");
+    setConnectionName("");
+  };
+
   const handleDSNChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
     setUnmaskedDsn(value);
@@ -41,19 +47,37 @@ function NewConnectionModal({ isOpen, onClose }: NewConnectionModalFormProps) {
     if (isLoading) return;
     setIsLoading(true);
 
-    const res = await api.createTestConnection();
-    if (res.status !== "ok") {
-      enqueueSnackbar({
-        variant: "error",
-        message: "Error creating connection",
-      });
-      return;
+    try {
+      const res = await api.createTestConnection();
+      if (res.status !== "ok") {
+        enqueueSnackbar({
+          variant: "error",
+          message: "Error creating connection",
+        });
+        setIsLoading(false);
+        return;
+      }
+    } catch (exception) {
+      if (isAxiosError(exception) && exception.response?.status === 409) {
+        // Connection already exists, skip creation but don't close or clear modal
+        enqueueSnackbar({
+          variant: "info",
+          message: "Connection already exists, skipping creation",
+        });
+        setIsLoading(false);
+        return;
+      } else {
+        enqueueSnackbar({
+          variant: "error",
+          message: "Error creating connection",
+        });
+        setIsLoading(false);
+        return;
+      }
     }
 
-    // Fake loading
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-
     setIsLoading(false);
+    clearInputs();
     onClose();
   };
 
@@ -69,20 +93,30 @@ function NewConnectionModal({ isOpen, onClose }: NewConnectionModalFormProps) {
           variant: "error",
           message: "Error creating connection",
         });
+        setIsLoading(false);
+        return;
+      }
+    } catch (exception) {
+      if (isAxiosError(exception) && exception.response?.status === 409) {
+        // Connection already exists, skip creation but don't close or clear modal
+        enqueueSnackbar({
+          variant: "info",
+          message: "Connection already exists, skipping creation",
+        });
+        setIsLoading(false);
+        return;
+      } else {
+        enqueueSnackbar({
+          variant: "error",
+          message: "Error creating connection",
+        });
+        setIsLoading(false);
         return;
       }
-    } catch (error) {
-      enqueueSnackbar({
-        variant: "error",
-        message: "Error creating connection",
-      });
-      return;
     }
 
-    // Fake loading
-    await new Promise((resolve) => setTimeout(resolve, 4000));
-
     setIsLoading(false);
+    clearInputs();
     onClose();
   };
 
diff --git a/text2sql-frontend/src/components/Conversation/CodeBlock.tsx b/text2sql-frontend/src/components/Conversation/CodeBlock.tsx
index 3ee8676b..72c1b3d1 100644
--- a/text2sql-frontend/src/components/Conversation/CodeBlock.tsx
+++ b/text2sql-frontend/src/components/Conversation/CodeBlock.tsx
@@ -77,12 +77,13 @@ export const CodeBlock = ({
   const [lastChar, setLastChar] = useState<string>("");
   // let BookmarkIcon = isSaved ? BookmarkIconSolid : BookmarkIconOutline;
   const BookmarkIcon = BookmarkIconOutline;
+  const extraSpace = ""; // "\n\n\n";
 
   useEffect(() => {
     try {
       // Do not format if whitespace characters are being typed
       if (SPACES.includes(lastChar)) {
-        setFormattedCode(savedCode);
+        setFormattedCode(savedCode + extraSpace);
         return;
       }
 
@@ -97,7 +98,7 @@ export const CodeBlock = ({
       }
 
       const formatted = format(savedCode, { language: Dialect.Postgres });
-      setFormattedCode(formatted);
+      setFormattedCode(formatted + extraSpace);
 
       if (textareaRef.current !== null) {
         // Calculate old cursor position without considering spaces
@@ -154,7 +155,7 @@ export const CodeBlock = ({
     <div
       role="button"
       tabIndex={0}
-      className="max-w-7xl border-2 border-gray-500 rounded-md bg-gray-900 flex flex-col relative"
+      className="max-w-7xl border border-gray-500 rounded-xl bg-gray-900 flex flex-col relative"
       onKeyDown={() => textareaRef.current?.focus()}
       onClick={() => textareaRef.current?.focus()}
     >
@@ -162,7 +163,7 @@ export const CodeBlock = ({
       <textarea
         spellCheck={false}
         ref={textareaRef}
-        className="absolute h-full w-full inset-0 resize-none bg-transparent overflow-hidden text-transparent p-2 font-mono caret-white outline-none appearance-none focus:outline-none"
+        className="absolute h-full w-full border-0 inset-0 resize-none bg-transparent overflow-hidden text-transparent p-2 font-mono caret-white outline-none focus:outline-none focus:rounded-xl"
         onChange={handleTextUpdate}
         onKeyDown={handleKeyboardInput}
       />
diff --git a/text2sql-frontend/src/components/Conversation/Conversation.tsx b/text2sql-frontend/src/components/Conversation/Conversation.tsx
index de2e4b21..128432b0 100644
--- a/text2sql-frontend/src/components/Conversation/Conversation.tsx
+++ b/text2sql-frontend/src/components/Conversation/Conversation.tsx
@@ -9,8 +9,15 @@ import { Transition } from "@headlessui/react";
 import { generateUUID } from "../Library/utils";
 import { enqueueSnackbar } from "notistack";
 import { useConnectionList } from "../Providers/ConnectionListProvider";
+import { useConversationList } from "../Providers/ConversationListProvider";
 import { isAxiosError } from "axios";
 import { Routes } from "@/router";
+import MessageTemplate from "./MessageTemplate";
+
+const templateMessages = [
+  "What can you tell me about this database?",
+  "Show me some rows from one of the tables.",
+];
 
 export const Conversation = () => {
   const params = useParams<{ conversationId: string }>();
@@ -19,7 +26,14 @@ export const Conversation = () => {
   // Load messages from conversation via API on load
   const [messages, setMessages] = useState<IMessageWithResults[]>([]);
   const [connections] = useConnectionList();
+  const [conversations] = useConversationList();
   const messageListRef = useRef<HTMLDivElement | null>(null);
+  const currConversation = conversations.find(
+    (conv) => conv.conversation_id === params.conversationId
+  );
+  const currConnection = connections?.find(
+    (conn) => conn.id === currConversation?.connection_id
+  );
 
   function submitQuery(value: string) {
     // Add message to messages
@@ -69,7 +83,7 @@ export const Conversation = () => {
   useEffect(() => {
     const loadMessages = async () => {
       try {
-        const messages = await api.getMessages(params.conversationId as string);
+        const messages = await api.getMessages(params.conversationId!);
         setMessages(messages.data.messages);
       } catch (exception) {
         if (isAxiosError(exception) && exception.response?.status === 404) {
@@ -83,7 +97,7 @@ export const Conversation = () => {
       }
     };
     loadMessages();
-  }, [params]);
+  }, [params, navigate]);
 
   useEffect(() => {
     if (messageListRef.current !== null) {
@@ -124,8 +138,18 @@ export const Conversation = () => {
         </div>
       </Transition>
 
-      <div className="fixed bottom-0 left-0 lg:left-72 right-0 flex justify-center bg-gradient-to-t from-gray-900 from-30% to-transparent pt-2">
-        <div className="w-full md:max-w-3xl flex justify-center pt-6 pb-4 m-2">
+      <div className="fixed bottom-0 left-0 lg:left-72 right-0 flex flex-col items-center justify-center backdrop-blur-md pt-0">
+        {messages.length === 0 && currConnection?.is_sample && (
+          <div className="w-full md:max-w-3xl grid grid-cols-1 md:grid-cols-2 gap-2 justify-between px-2 sm:px-3 my-4">
+            {templateMessages.map((message) => (
+              <MessageTemplate
+                text={message}
+                onClick={() => submitQuery(message)}
+              />
+            ))}
+          </div>
+        )}
+        <div className="w-full md:max-w-3xl flex justify-center pb-4 ml-2 mr-2 mb-2 pl-2 pr-2">
           <ExpandingInput
             onSubmit={submitQuery}
             disabled={false}
diff --git a/text2sql-frontend/src/components/Conversation/ExpandingInput.tsx b/text2sql-frontend/src/components/Conversation/ExpandingInput.tsx
index 7e680b87..5b0decc7 100644
--- a/text2sql-frontend/src/components/Conversation/ExpandingInput.tsx
+++ b/text2sql-frontend/src/components/Conversation/ExpandingInput.tsx
@@ -46,18 +46,18 @@ const ExpandingInput: React.FC<ExpandingInputProps> = ({
   };
 
   return (
-    <div className="flex flex-col justify-center w-full relative">
+    <div className="flex flex-col justify-center w-full relative mb-7">
       <textarea
         disabled={disabled}
         name="email"
         id="email"
         className={classNames(
           disabled ? "placeholder:text-gray-600" : "placeholder:text-gray-400",
-          "block rounded-md border-2 p-3 text-gray-900 shadow-sm sm:text-md sm:leading-6 resize-none dark:text-gray-200 dark:bg-gray-700 dark:border-gray-800 pr-12 overflow-y-hidden"
+          "block rounded-xl border p-4 text-gray-900 shadow-sm sm:text-md sm:leading-6 resize-none dark:text-gray-200 dark:bg-gray-900 dark:border-gray-600 pr-12 overflow-y-hidden mr-1"
         )}
         style={{ height: "auto" }}
         rows={1}
-        placeholder="you@example.com"
+        placeholder="Enter your message here..."
         value={inputValue}
         onChange={handleChange}
         onKeyDown={handleKeyPress}
@@ -66,15 +66,15 @@ const ExpandingInput: React.FC<ExpandingInputProps> = ({
         onClick={handleSubmit}
         className={classNames(
           inputValue.length > 0
-            ? "dark:text-gray-200 dark:hover:bg-gray-800"
+            ? "dark:text-gray-800 dark:bg-gray-300 dark:hover:cursor-pointer"
             : "",
-          "group absolute right-0 mr-4 [&>path]:stroke-[2] dark:text-gray-500 p-1 rounded-md transition-all duration-150"
+          "group absolute right-0 mr-4 -rotate-90 dark:text-gray-400 p-1 rounded-md transition-all duration-150"
         )}
       >
         <PaperAirplaneIcon
           className={classNames(
             inputValue.length > 0 ? "group-hover:-rotate-6" : "",
-            "h-6 w-6"
+            "h-6 w-6 [&>path]:stroke-[2]"
           )}
         ></PaperAirplaneIcon>
       </div>
diff --git a/text2sql-frontend/src/components/Conversation/Message.stories.ts b/text2sql-frontend/src/components/Conversation/Message.stories.ts
index 6fa0ecd5..525ac730 100644
--- a/text2sql-frontend/src/components/Conversation/Message.stories.ts
+++ b/text2sql-frontend/src/components/Conversation/Message.stories.ts
@@ -34,7 +34,14 @@ export const Primary: Story = {
       },
       {
         type: "data",
-        content: [["count"], [105]],
+        content: [
+          ["count", "rental", "payment", "one more", "and another"],
+          ["1", "2", "3", "4", "5"],
+          ["6", "7", "8", "9", "10"],
+          ["11", "12", "13", "14", "15"],
+          ["16", "17", "18", "19", "20"],
+          ["21", "22", "23", "24", "25"],
+        ],
       },
     ],
   },
diff --git a/text2sql-frontend/src/components/Conversation/Message.tsx b/text2sql-frontend/src/components/Conversation/Message.tsx
index 7f75520c..45b9b6e4 100644
--- a/text2sql-frontend/src/components/Conversation/Message.tsx
+++ b/text2sql-frontend/src/components/Conversation/Message.tsx
@@ -109,7 +109,9 @@ export const Message = (initialMessage: IMessageWithResults) => {
   return (
     <div
       className={classNames(
-        message.role === "assistant" ? "dark:bg-gray-800" : "dark:bg-gray-900",
+        message.role === "assistant"
+          ? "dark:bg-gray-800/40"
+          : "dark:bg-gray-900",
         "w-full text-gray-800 dark:text-gray-100 bg-gray-50"
       )}
     >
diff --git a/text2sql-frontend/src/components/Conversation/MessageTemplate.stories.tsx b/text2sql-frontend/src/components/Conversation/MessageTemplate.stories.tsx
new file mode 100644
index 00000000..4b368471
--- /dev/null
+++ b/text2sql-frontend/src/components/Conversation/MessageTemplate.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import MessageTemplate from "./MessageTemplate";
+
+const meta: Meta<typeof MessageTemplate> = {
+  component: MessageTemplate,
+  decorators: [
+    (Story: React.ComponentType) => (
+      <div className="bg-gray-800 w-full flex flex-col max-w-screen-sm p-10">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof MessageTemplate>;
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/react/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  args: {
+    text: "What are the most rented movies?",
+  },
+};
diff --git a/text2sql-frontend/src/components/Conversation/MessageTemplate.tsx b/text2sql-frontend/src/components/Conversation/MessageTemplate.tsx
new file mode 100644
index 00000000..290099d2
--- /dev/null
+++ b/text2sql-frontend/src/components/Conversation/MessageTemplate.tsx
@@ -0,0 +1,31 @@
+type MessageTemplateProps = {
+  text: string;
+  onClick?: () => void;
+};
+
+function classNames(...classes: string[]) {
+  return classes.filter(Boolean).join(" ");
+}
+
+const MessageTemplate: React.FC<MessageTemplateProps> = ({ text, onClick }) => {
+  return (
+    <div
+      onClick={onClick}
+      className={classNames(
+        "flex items-center grow rounded-xl border p-6 min-h-[55px] transition-colors duration-100",
+        "text-gray-900 shadow-sm sm:text-md sm:leading-6",
+        "dark:text-gray-300 dark:border-gray-700",
+        "cursor-pointer dark:hover:bg-gray-750"
+      )}
+    >
+      <span
+        className="overflow-hidden text-ellipsis whitespace-nowrap"
+        style={{ height: "auto" }}
+      >
+        {text}
+      </span>
+    </div>
+  );
+};
+
+export default MessageTemplate;
diff --git a/text2sql-frontend/src/components/Home/Sidebar.tsx b/text2sql-frontend/src/components/Home/Sidebar.tsx
index b0f445bc..f50cab31 100644
--- a/text2sql-frontend/src/components/Home/Sidebar.tsx
+++ b/text2sql-frontend/src/components/Home/Sidebar.tsx
@@ -184,7 +184,7 @@ export const Sidebar = () => {
                         <ul role="list" className="-mx-2 space-y-1">
                           <Link
                             to="/"
-                            className="py-3 px-2 rounded-md flex justify-start items-center border-2 border-gray-600 text-gray-200 hover:bg-gray-800 transition-all duration-150 cursor-pointer"
+                            className="py-3 px-2 rounded-md flex justify-start items-center border border-gray-600 text-gray-200 hover:bg-gray-800 transition-all duration-150 cursor-pointer"
                           >
                             <PlusIcon className="h-5 w-5 shrink-0 mr-2 [&>path]:stroke-[1]"></PlusIcon>
                             <div>New chat</div>
@@ -253,7 +253,7 @@ export const Sidebar = () => {
       </Transition.Root>
 
       {/* Static sidebar for large screens */}
-      <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col border-r-2 border-gray-600">
+      <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col border-r border-gray-600">
         {/* Sidebar component, swap this element with another sidebar if you like */}
         <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6">
           <Link to="/" className="flex h-16 shrink-0 items-center">
@@ -263,7 +263,7 @@ export const Sidebar = () => {
             <ul role="list" className="flex flex-1 flex-col gap-y-4">
               <Link
                 to="/"
-                className="-mx-4 py-3 px-2 rounded-md flex justify-start items-center border-2 border-gray-600 text-gray-200 hover:bg-gray-800 transition-all duration-150 cursor-pointer"
+                className="-mx-4 py-3 px-2 rounded-md flex justify-start items-center border border-gray-600 text-gray-200 hover:bg-gray-800 transition-all duration-150 cursor-pointer"
               >
                 <PlusIcon className="h-5 w-5 shrink-0 mr-2 [&>path]:stroke-[1]"></PlusIcon>
                 <div>New chat</div>
@@ -338,7 +338,7 @@ export const Sidebar = () => {
                               onKeyDown={handleKeyPress}
                               onBlur={handleSaveClick}
                               autoFocus
-                              className="flex-none max-w-[70%] h-6 text-md font-medium leading-6 text-white bg-gray-800 focus:outline-none outline-none border-none ring-slate-300 pl-1"
+                              className="flex-none max-w-[70%] h-6 text-md font-medium leading-6 text-white bg-gray-800 focus:outline-none outline-none border-none ring-gray-300 pl-1"
                             />
                           ) : (
                             <span className="text-ellipsis overflow-hidden whitespace-nowrap">
diff --git a/text2sql-frontend/src/components/Inputs/Toggle.tsx b/text2sql-frontend/src/components/Inputs/Toggle.tsx
index b5d16ff9..00c2df2a 100644
--- a/text2sql-frontend/src/components/Inputs/Toggle.tsx
+++ b/text2sql-frontend/src/components/Inputs/Toggle.tsx
@@ -17,7 +17,7 @@ export default function Example({
       onChange={onChange}
       className={classNames(
         enabled ? "bg-green-500" : "bg-gray-200",
-        "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
+        "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
       )}
     >
       <span className="sr-only">Use setting</span>
diff --git a/text2sql-frontend/src/components/Library/AlertModal.tsx b/text2sql-frontend/src/components/Library/AlertModal.tsx
index 1ab60f7a..4655c52f 100644
--- a/text2sql-frontend/src/components/Library/AlertModal.tsx
+++ b/text2sql-frontend/src/components/Library/AlertModal.tsx
@@ -46,7 +46,7 @@ export function AlertModal({
         return <InformationCircleIcon className="h-6 w-6 text-blue-600" />;
       case AlertIcon.Error:
       default:
-        return <XCircleIcon className="h-6 w-6 text-slate-600" />;
+        return <XCircleIcon className="h-6 w-6 text-gray-600" />;
     }
   };
 
diff --git a/text2sql-frontend/src/components/Library/DynamicTable.tsx b/text2sql-frontend/src/components/Library/DynamicTable.tsx
index 4147b5db..83840c5f 100644
--- a/text2sql-frontend/src/components/Library/DynamicTable.tsx
+++ b/text2sql-frontend/src/components/Library/DynamicTable.tsx
@@ -1,5 +1,15 @@
 import { useEffect, useState } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@catalyst/table";
 
+// TODO: Remove after defining this better on backend
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const DynamicTable: React.FC<{ data: any }> = ({ data }) => {
   const page = 0;
   const rowsPerPage = 25;
@@ -12,46 +22,36 @@ export const DynamicTable: React.FC<{ data: any }> = ({ data }) => {
     );
   }, [page, rowsPerPage, data]);
   return (
-    <div className="max-w-7xl border-2 border-gray-500 rounded-md bg-gray-900 flex flex-col overflow-auto scrollbar-hide">
-      <div className="flow-root">
-        <div className="">
-          <div className="inline-block min-w-full py-2 align-middle">
-            <table className="min-w-full divide-y divide-gray-400">
-              <thead>
-                <tr className="divide-x divide-gray-400">
-                  {dataSubset[0].map((item: any, index: number) => (
-                    <th
-                      key={index}
-                      scope="col"
-                      className="py-3.5 pl-4 pr-4 text-left text-sm font-semibold"
-                    >
+    <div className="max-w-7xl border border-gray-500 overflow-hidden rounded-xl">
+      <Table
+        grid
+        bleed
+        striped
+        dense
+        className="ml-0 mr-0 [--gutter:theme(spacing.6)] sm:[--gutter:theme(spacing.8)]"
+      >
+        <TableHead>
+          <TableRow>
+            {dataSubset[0].map((header: string, index: number) => (
+              <TableHeader key={index}>{header}</TableHeader>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {dataSubset.map((row: string[] | number[], index: number) => {
+            if (index > 0)
+              return (
+                <TableRow key={index}>
+                  {row.map((item: string | number, cellIndex: number) => (
+                    <TableCell key={cellIndex} className="font-medium pl-8">
                       {item}
-                    </th>
+                    </TableCell>
                   ))}
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-gray-400">
-                {dataSubset.map((row: Array<any>, index: number) => {
-                  if (index > 0)
-                    return (
-                      <tr key={index} className="divide-x divide-gray-400">
-                        {row.map((item: any, cellIndex: number) => (
-                          <td
-                            key={cellIndex}
-                            className="whitespace-nowrap py-4 pl-4 pr-4 text-sm"
-                          >
-                            {item}
-                          </td>
-                        ))}
-                      </tr>
-                    );
-                  return null;
-                })}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
+                </TableRow>
+              );
+          })}
+        </TableBody>
+      </Table>
     </div>
   );
 };
diff --git a/text2sql-frontend/src/components/Library/types.ts b/text2sql-frontend/src/components/Library/types.ts
index 016effcd..ea7c3667 100644
--- a/text2sql-frontend/src/components/Library/types.ts
+++ b/text2sql-frontend/src/components/Library/types.ts
@@ -47,6 +47,7 @@ export interface IConnection {
   name: string;
   dsn: string;
   dialect: string;
+  is_sample: boolean;
 }
 
 export interface IEditConnection {
diff --git a/text2sql-frontend/src/components/Settings/MaskedInput.tsx b/text2sql-frontend/src/components/Settings/MaskedInput.tsx
index 661d26d8..0f063aa2 100644
--- a/text2sql-frontend/src/components/Settings/MaskedInput.tsx
+++ b/text2sql-frontend/src/components/Settings/MaskedInput.tsx
@@ -33,7 +33,6 @@ export default function MaskedInput({
       />
       <div className="rounded-full hover:bg-white hover:bg-opacity-10 p-1">
         <Icon
-          // className="h-6 w-6 text-slate-600 cursor-pointer"
           className="h-6 w-6 text-white opacity-25 cursor-pointer"
           onClick={() => setIsMasked((prev) => !prev)}
         />
diff --git a/text2sql-frontend/src/index.css b/text2sql-frontend/src/index.css
index ffa7743d..5c783b1d 100644
--- a/text2sql-frontend/src/index.css
+++ b/text2sql-frontend/src/index.css
@@ -41,5 +41,5 @@
 }
 
 :root {
-  scrollbar-color: rgba(255,255,255,0.1) rgb(31,41,55);
+  scrollbar-color: rgba(255,255,255,0.1) rgba(31,41,55, 0.0);
 }
\ No newline at end of file