diff --git a/.github/.release-please-manifest.json b/.github/.release-please-manifest.json
index 85d60da21..d3fc4b83e 100644
--- a/.github/.release-please-manifest.json
+++ b/.github/.release-please-manifest.json
@@ -1,3 +1,3 @@
 {
-    ".": "0.9.2"
+    ".": "0.10.0"
 }
diff --git a/.github/actions/lfai-core/action.yaml b/.github/actions/lfai-core/action.yaml
new file mode 100644
index 000000000..40807f8c3
--- /dev/null
+++ b/.github/actions/lfai-core/action.yaml
@@ -0,0 +1,28 @@
+name: setup-lfai-core
+description: "Setup Supabase and LFAI-API"
+
+runs:
+  using: composite
+  steps:
+    - name: Deploy Supabase
+      shell: bash
+      run: |
+        make build-supabase LOCAL_VERSION=e2e-test
+        docker image prune -af
+        uds zarf tools kubectl create namespace leapfrogai
+        uds zarf package deploy packages/supabase/zarf-package-supabase-amd64-e2e-test.tar.zst --confirm
+        rm packages/supabase/zarf-package-supabase-amd64-e2e-test.tar.zst
+
+    - name: Set environment variable
+      shell: bash
+      id: set-env-var
+      run: |
+        echo "ANON_KEY=$(uds zarf tools kubectl get secret supabase-bootstrap-jwt -n leapfrogai -o jsonpath='{.data.anon-key}' | base64 -d)" >> "$GITHUB_ENV"
+
+    - name: Deploy LFAI-API
+      shell: bash
+      run: |
+        make build-api LOCAL_VERSION=e2e-test
+        docker image prune -af
+        uds zarf package deploy packages/api/zarf-package-leapfrogai-api-amd64-e2e-test.tar.zst --confirm
+        rm packages/api/zarf-package-leapfrogai-api-amd64-e2e-test.tar.zst
diff --git a/.github/actions/python/action.yaml b/.github/actions/python/action.yaml
new file mode 100644
index 000000000..12385af26
--- /dev/null
+++ b/.github/actions/python/action.yaml
@@ -0,0 +1,23 @@
+name: setup-python
+description: "Setup Python and library dependencies"
+
+inputs:
+  additionalOptionalDep:
+    description: "Additional optional dependencies to install"
+
+runs:
+  using: composite
+  steps:
+    - name: Setup Python
+      uses: actions/setup-python@0a5c61591373683505ea898e09a3ea4f39ef2b9c #v5.0.0
+      with:
+        python-version-file: 'pyproject.toml'
+
+    - name: Install Python Deps
+      shell: bash
+      run: python -m pip install ".[dev]"
+
+    - name: Install additionalDeps
+      if: ${{ inputs.additionalOptionalDep != '' }}
+      shell: bash
+      run: python -m pip install ".[${{ inputs.additionalOptionalDep }}]"
diff --git a/.github/actions/uds-cluster/action.yaml b/.github/actions/uds-cluster/action.yaml
new file mode 100644
index 000000000..19b23c61e
--- /dev/null
+++ b/.github/actions/uds-cluster/action.yaml
@@ -0,0 +1,22 @@
+name: setup-uds
+description: "Setup UDS Cluster"
+
+inputs:
+  registry1Username:
+    description: Registry1 Username
+  registry1Password:
+    description: Registry1 Password
+
+runs:
+  using: composite
+  steps:
+    - name: Setup UDS Environment
+      uses: defenseunicorns/uds-common/.github/actions/setup@05f42bb3117b66ebef8c72ae050b34bce19385f5
+      with:
+        username: ${{ inputs.registry1Username }}
+        password: ${{ inputs.registry1Password }}
+
+    - name: Create UDS Cluster
+      shell: bash
+      run: |
+        make create-uds-cpu-cluster
\ No newline at end of file
diff --git a/.github/workflows/e2e-llama-cpp-python.yaml b/.github/workflows/e2e-llama-cpp-python.yaml
new file mode 100644
index 000000000..66cd16bfb
--- /dev/null
+++ b/.github/workflows/e2e-llama-cpp-python.yaml
@@ -0,0 +1,87 @@
+# End-to-end testing that deploys Supabase and the API, and deploy/tests llama-cpp-python, text-embeddings, and whisper
+
+name: e2e-llama-cpp-python
+on:
+  pull_request:
+    types:
+      - opened            # default trigger
+      - reopened          # default trigger
+      - synchronize       # default trigger
+      - ready_for_review  # don't run on draft PRs
+      - milestoned        # allows us to trigger on bot PRs
+    paths:
+      # Catch-all
+      - "**"
+
+      # Ignore updates to the .github directory, unless it's this current file
+      - "!.github/**"
+      - ".github/workflows/e2e-llama-cpp-python.yaml"
+      - ".github/actions/uds-cluster/action.yaml"
+
+      # Ignore docs and website things
+      - "!**.md"
+      - "!docs/**"
+      - "!adr/**"
+      - "!website/**"
+      - "!netlify.toml"
+
+      # Ignore updates to generic github metadata files
+      - "!CODEOWNERS"
+      - "!.gitignore"
+      - "!LICENSE"
+
+      # Ignore local development files
+      - "!.pre-commit-config.yaml"
+
+      # Ignore non e2e tests changes
+      - "!tests/pytest/**"
+
+      # Ignore LFAI-UI source code changes
+      - "!src/leapfrogai_ui/**"
+
+      # Ignore changes to unrelated packages
+      - "!packages/k3d-gpu/**"
+      - "!packages/repeater/**"
+      - "!packages/text-embeddings/**"
+      - "!packages/ui/**"
+      - "!packages/vllm/**"
+      - "!packages/whisper/**"
+
+concurrency:
+  group: e2e-llama-cpp-python-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  e2e_llama:
+    runs-on: ai-ubuntu-big-boy-8-core
+    if: ${{ !github.event.pull_request.draft }}
+
+    steps:
+        - name: Checkout Repo
+          uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+
+        - name: Setup Python
+          uses: ./.github/actions/python
+
+        - name: Setup UDS Cluster
+          uses: ./.github/actions/uds-cluster
+          with:
+            registry1Username: ${{ secrets.IRON_BANK_ROBOT_USERNAME }}
+            registry1Password: ${{ secrets.IRON_BANK_ROBOT_PASSWORD }}
+
+        - name: Setup LFAI-API and Supabase
+          uses: ./.github/actions/lfai-core
+
+        ##########
+        # llama
+        ##########
+        - name: Deploy llama-cpp-python
+          run: |
+            make build-llama-cpp-python LOCAL_VERSION=e2e-test
+            docker image prune -af
+            uds zarf package deploy packages/llama-cpp-python/zarf-package-llama-cpp-python-amd64-e2e-test.tar.zst -l=trace --confirm
+            rm packages/llama-cpp-python/zarf-package-llama-cpp-python-amd64-e2e-test.tar.zst
+
+        - name: Test llama-cpp-python
+          run: |
+            python -m pytest ./tests/e2e/test_llama.py -v
diff --git a/.github/workflows/e2e-playwright.yaml b/.github/workflows/e2e-playwright.yaml
new file mode 100644
index 000000000..671e4d910
--- /dev/null
+++ b/.github/workflows/e2e-playwright.yaml
@@ -0,0 +1,122 @@
+# End-to-end testing that deploys and tests Supabase, API, UI, and VLLM
+
+name: e2e-playwright
+on:
+  pull_request:
+    types:
+      - opened            # default trigger
+      - reopened          # default trigger
+      - synchronize       # default trigger
+      - ready_for_review  # don't run on draft PRs
+      - milestoned        # allows us to trigger on bot PRs
+    paths:
+      # Catch-all
+      - "**"
+
+      # Ignore updates to the .github directory, unless it's this current file
+      - "!.github/**"
+      - ".github/workflows/e2e-playwright.yaml"
+      - ".github/actions/uds-cluster/action.yaml"
+
+      # Ignore docs and website things
+      - "!**.md"
+      - "!docs/**"
+      - "!adr/**"
+      - "!website/**"
+      - "!netlify.toml"
+
+      # Ignore updates to generic github metadata files
+      - "!CODEOWNERS"
+      - "!.gitignore"
+      - "!LICENSE"
+
+      # Ignore local development files
+      - "!.pre-commit-config.yaml"
+
+      # Ignore non e2e tests changes
+      - "!tests/pytest/**"
+
+      # Ignore changes to unrelated packages
+      - "!packages/k3d-gpu/**"
+      - "!packages/llama-cpp-python/**"
+      - "!packages/repeater/**"
+      - "!packages/text-embeddings/**"
+      - "!packages/vllm/**"
+      - "!packages/whisper/**"
+
+
+
+concurrency:
+  group: e2e-playwright-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  e2e_playwright:
+    runs-on: ai-ubuntu-big-boy-8-core
+    if: ${{ !github.event.pull_request.draft }}
+
+    steps:
+        - name: Checkout Repo
+          uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+
+        - name: Setup Node
+          uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
+          with:
+            node-version-file: 'src/leapfrogai_ui/package.json'
+
+        - name: Install UI/Playwright Dependencies
+          run: |
+            npm --prefix src/leapfrogai_ui ci
+            npx --prefix src/leapfrogai_ui playwright install
+
+        - name: Setup Python
+          uses: ./.github/actions/python
+
+        - name: Setup UDS Cluster
+          uses: ./.github/actions/uds-cluster
+          with:
+            registry1Username: ${{ secrets.IRON_BANK_ROBOT_USERNAME }}
+            registry1Password: ${{ secrets.IRON_BANK_ROBOT_PASSWORD }}
+
+        - name: Setup LFAI-API and Supabase
+          uses: ./.github/actions/lfai-core
+
+        - name: Test Supabase
+          run: |
+            python -m pip install requests
+            python -m pytest ./tests/e2e/test_supabase.py -v
+
+        - name: Test API
+          run: |
+            python -m pip install requests
+            python -m pytest ./tests/e2e/test_api.py -v
+
+        ##########
+        # UI
+        ##########
+        - name: Deploy LFAI-UI
+          run: |
+            make build-ui LOCAL_VERSION=e2e-test
+            docker image prune -af
+            uds zarf package deploy packages/ui/zarf-package-leapfrogai-ui-amd64-e2e-test.tar.zst --confirm
+            rm packages/ui/zarf-package-leapfrogai-ui-amd64-e2e-test.tar.zst
+
+        # Run the playwright UI tests using the deployed Supabase endpoint and upload report as an artifact
+        - name: UI/API/Supabase E2E Playwright Tests
+          run: |
+            cp src/leapfrogai_ui/.env.example src/leapfrogai_ui/.env
+            TEST_ENV=CI PUBLIC_DISABLE_KEYCLOAK=true PUBLIC_SUPABASE_ANON_KEY=$ANON_KEY npm --prefix src/leapfrogai_ui run test:integration:ci
+
+        # Upload the Playwright report as an artifact
+        - name: Archive Playwright Report
+          uses: actions/upload-artifact@v4
+          if: ${{ !cancelled() }}
+          with:
+            name: playwright-report
+            path: src/leapfrogai_ui/e2e-report/
+            retention-days: 30
+
+        # The UI can be removed after the Playwright tests are finished
+        - name: Cleanup UI
+          run: |
+            uds zarf package remove leapfrogai-ui --confirm
diff --git a/.github/workflows/e2e-shim.yaml b/.github/workflows/e2e-shim.yaml
index 83899dcce..c81f42ea1 100644
--- a/.github/workflows/e2e-shim.yaml
+++ b/.github/workflows/e2e-shim.yaml
@@ -1,34 +1,7 @@
 # Catch all the things we ignore in the e2e workflow
 name: e2e Skip Shim
 on:
-  pull_request:
-    paths:
-      # Catch updates to the .github directory, unless it is the e2e.yaml files
-      - ".github/**"
-      - "!.github/workflows/e2e.yaml"
-
-      # Catch docs and website things
-      - "**.md"
-      - "adr/**"
-      - "docs/**"
-      - "website/**"
-      - "netlify.toml"
-
-      # Catch generic github metadata files
-      - "CODEOWNERS"
-      - ".gitignore"
-      - "LICENSE"
-      - ".pre-commit-config.yaml"
-
-      # Catch pytests
-      - "tests/pytest/**"
-
-      # Catch LFAI-UI things
-      - "src/leapfrogai_ui/**"
-      - "packages/ui/**"
-
-      # Catch changes to the repeater model
-      - "packages/repeater/**"
+  pull_request
 
 
 permissions:
@@ -51,7 +24,31 @@ concurrency:
 
 
 jobs:
-  e2e:
+  e2e_llama:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Skipped
+        run: |
+          echo skipped
+  e2e_playwright:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Skipped
+        run: |
+          echo skipped
+  e2e_text_embeddings:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Skipped
+        run: |
+          echo skipped
+  e2e_vllm:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Skipped
+        run: |
+          echo skipped
+  e2e_whisper:
     runs-on: ubuntu-latest
     steps:
       - name: Skipped
diff --git a/.github/workflows/e2e-text-embeddings.yaml b/.github/workflows/e2e-text-embeddings.yaml
new file mode 100644
index 000000000..eba01378d
--- /dev/null
+++ b/.github/workflows/e2e-text-embeddings.yaml
@@ -0,0 +1,89 @@
+# End-to-end testing that deploys Supabase and the API, and deploy/tests llama-cpp-python, text-embeddings, and whisper
+
+name: e2e-text-embeddings
+on:
+  pull_request:
+    types:
+      - opened            # default trigger
+      - reopened          # default trigger
+      - synchronize       # default trigger
+      - ready_for_review  # don't run on draft PRs
+      - milestoned        # allows us to trigger on bot PRs
+    paths:
+      # Catch-all
+      - "**"
+
+      # Ignore updates to the .github directory, unless it's this current file
+      - "!.github/**"
+      - ".github/workflows/e2e-text-embeddings.yaml"
+      - ".github/actions/uds-cluster/action.yaml"
+
+      # Ignore docs and website things
+      - "!**.md"
+      - "!docs/**"
+      - "!adr/**"
+      - "!website/**"
+      - "!netlify.toml"
+
+      # Ignore updates to generic github metadata files
+      - "!CODEOWNERS"
+      - "!.gitignore"
+      - "!LICENSE"
+
+      # Ignore local development files
+      - "!.pre-commit-config.yaml"
+
+      # Ignore non e2e tests changes
+      - "!tests/pytest/**"
+
+      # Ignore LFAI-UI source code changes
+      - "!src/leapfrogai_ui/**"
+
+      # Ignore changes to unrelated packages
+      - "!packages/k3d-gpu/**"
+      - "!packages/llama-cpp-python/**"
+      - "!packages/repeater/**"
+      - "!packages/ui/**"
+      - "!packages/vllm/**"
+      - "!packages/whisper/**"
+
+
+
+concurrency:
+  group: e2e-text-embeddings-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  e2e_text_embeddings:
+    runs-on: ai-ubuntu-big-boy-8-core
+    if: ${{ !github.event.pull_request.draft }}
+
+    steps:
+        - name: Checkout Repo
+          uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+
+        - name: Setup Python
+          uses: ./.github/actions/python
+
+        - name: Setup UDS Cluster
+          uses: ./.github/actions/uds-cluster
+          with:
+            registry1Username: ${{ secrets.IRON_BANK_ROBOT_USERNAME }}
+            registry1Password: ${{ secrets.IRON_BANK_ROBOT_PASSWORD }}
+
+        - name: Setup LFAI-API and Supabase
+          uses: ./.github/actions/lfai-core
+
+        ##########
+        # text-embeddings
+        ##########
+        - name: Deploy text-embeddings
+          run: |
+            make build-text-embeddings LOCAL_VERSION=e2e-test
+            docker image prune -af
+            uds zarf package deploy packages/text-embeddings/zarf-package-text-embeddings-amd64-e2e-test.tar.zst -l=trace --confirm
+            rm packages/text-embeddings/zarf-package-text-embeddings-amd64-e2e-test.tar.zst
+
+        - name: Test text-embeddings
+          run: |
+            python -m pytest ./tests/e2e/test_text_embeddings.py -v
diff --git a/.github/workflows/e2e-vllm.yaml b/.github/workflows/e2e-vllm.yaml
new file mode 100644
index 000000000..cedfab53e
--- /dev/null
+++ b/.github/workflows/e2e-vllm.yaml
@@ -0,0 +1,83 @@
+# End-to-end testing that deploys and tests Supabase, API, UI, and VLLM
+
+name: e2e-vllm
+on:
+  pull_request:
+    types:
+      - opened            # default trigger
+      - reopened          # default trigger
+      - synchronize       # default trigger
+      - ready_for_review  # don't run on draft PRs
+      - milestoned        # allows us to trigger on bot PRs
+    paths:
+      # Catch-all
+      - "**"
+
+      # Ignore updates to the .github directory, unless it's this current file
+      - "!.github/**"
+      - ".github/workflows/e2e-vllm.yaml"
+      - ".github/actions/uds-cluster/action.yaml"
+
+      # Ignore docs and website things
+      - "!**.md"
+      - "!docs/**"
+      - "!adr/**"
+      - "!website/**"
+      - "!netlify.toml"
+
+      # Ignore updates to generic github metadata files
+      - "!CODEOWNERS"
+      - "!.gitignore"
+      - "!LICENSE"
+
+      # Ignore local development files
+      - "!.pre-commit-config.yaml"
+
+      # Ignore non e2e tests changes
+      - "!tests/pytest/**"
+
+      # Ignore LFAI-UI source code changes
+      - "!src/leapfrogai_ui/**"
+
+      # Ignore changes to unrelated packages
+      - "!packages/k3d-gpu/**"
+      - "!packages/llama-cpp-python/**"
+      - "!packages/repeater/**"
+      - "!packages/text-embeddings/**"
+      - "!packages/ui/**"
+      - "!packages/whisper/**"
+
+
+
+concurrency:
+  group: e2e-vllm-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  e2e_vllm:
+    runs-on: ai-ubuntu-big-boy-8-core
+    if: ${{ !github.event.pull_request.draft }}
+
+    steps:
+        - name: Checkout Repo
+          uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+
+        - name: Setup Python
+          uses: ./.github/actions/python
+          with:
+            additionalOptionalDep: dev-vllm
+
+        - name: Setup UDS Environment
+          uses: defenseunicorns/uds-common/.github/actions/setup@05f42bb3117b66ebef8c72ae050b34bce19385f5
+          with:
+            username: ${{ secrets.IRON_BANK_ROBOT_USERNAME }}
+            password: ${{ secrets.IRON_BANK_ROBOT_PASSWORD }}
+
+        ########## c
+        # vLLM
+        # NOTE: We are not deploying and testing vLLM in this workflow because it requires a GPU
+        #     : This workflow simply verifies that the vLLM package can be built
+        ##########
+        - name: Build vLLM
+          run: |
+            make build-vllm LOCAL_VERSION=e2e-test
diff --git a/.github/workflows/e2e-whisper.yaml b/.github/workflows/e2e-whisper.yaml
new file mode 100644
index 000000000..7c3908aa5
--- /dev/null
+++ b/.github/workflows/e2e-whisper.yaml
@@ -0,0 +1,89 @@
+# End-to-end testing that deploys Supabase and the API, and deploy/tests llama-cpp-python, text-embeddings, and whisper
+
+name: e2e-whisper
+on:
+  pull_request:
+    types:
+      - opened            # default trigger
+      - reopened          # default trigger
+      - synchronize       # default trigger
+      - ready_for_review  # don't run on draft PRs
+      - milestoned        # allows us to trigger on bot PRs
+    paths:
+      # Catch-all
+      - "**"
+
+      # Ignore updates to the .github directory, unless it's this current file
+      - "!.github/**"
+      - ".github/workflows/e2e-whisper.yaml"
+      - ".github/actions/uds-cluster/action.yaml"
+
+      # Ignore docs and website things
+      - "!**.md"
+      - "!docs/**"
+      - "!adr/**"
+      - "!website/**"
+      - "!netlify.toml"
+
+      # Ignore updates to generic github metadata files
+      - "!CODEOWNERS"
+      - "!.gitignore"
+      - "!LICENSE"
+
+      # Ignore local development files
+      - "!.pre-commit-config.yaml"
+
+      # Ignore non e2e tests changes
+      - "!tests/pytest/**"
+
+      # Ignore LFAI-UI source code changes
+      - "!src/leapfrogai_ui/**"
+
+      # Ignore changes to unrelated packages
+      - "!packages/k3d-gpu/**"
+      - "!packages/llama-cpp-python/**"
+      - "!packages/repeater/**"
+      - "!packages/text-embeddings/**"
+      - "!packages/ui/**"
+      - "!packages/vllm/**"
+
+concurrency:
+  group: e2e-whisper-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  e2e_whisper:
+    runs-on: ai-ubuntu-big-boy-8-core
+    if: ${{ !github.event.pull_request.draft }}
+
+    steps:
+        - name: Checkout Repo
+          uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
+
+        - name: Setup Python
+          uses: ./.github/actions/python
+          with:
+            additionalOptionalDep: dev-whisper
+
+        - name: Setup UDS Cluster
+          uses: ./.github/actions/uds-cluster
+          with:
+            registry1Username: ${{ secrets.IRON_BANK_ROBOT_USERNAME }}
+            registry1Password: ${{ secrets.IRON_BANK_ROBOT_PASSWORD }}
+
+        - name: Setup LFAI-API and Supabase
+          uses: ./.github/actions/lfai-core
+
+        ##########
+        # whisper
+        ##########
+        - name: Deploy whisper
+          run: |
+            make build-whisper LOCAL_VERSION=e2e-test
+            docker image prune -af
+            uds zarf package deploy packages/whisper/zarf-package-whisper-amd64-e2e-test.tar.zst -l=trace --confirm
+            rm packages/whisper/zarf-package-whisper-amd64-e2e-test.tar.zst
+
+        - name: Test whisper
+          run: |
+            python -m pytest ./tests/e2e/test_whisper.py -v
diff --git a/.github/workflows/e2e.yaml b/.github/workflows/e2e.yaml
deleted file mode 100644
index adae970fe..000000000
--- a/.github/workflows/e2e.yaml
+++ /dev/null
@@ -1,207 +0,0 @@
-name: e2e
-on:
-  pull_request:
-    types:
-      - ready_for_review
-      - review_requested
-      - synchronize
-      - milestoned
-    paths:
-      # Catch-all
-      - "**"
-
-      # Ignore updates to the .github directory, unless it's this current file
-      - "!.github/**"
-      - ".github/workflows/e2e.yaml"
-
-      # Ignore docs and website things
-      - "!**.md"
-      - "!docs/**"
-      - "!adr/**"
-      - "!website/**"
-      - "!netlify.toml"
-
-      # Ignore updates to generic github metadata files
-      - "!CODEOWNERS"
-      - "!.gitignore"
-      - "!LICENSE"
-
-      # Ignore local development files
-      - "!.pre-commit-config.yaml"
-
-      # Ignore non e2e tests
-      - "!tests/pytest/**"
-
-      # Ignore LFAI-UI things (for now?)
-      - "!src/leapfrogai_ui/**"
-      - "!packages/ui/**"
-
-      # Ignore changes to the repeater model
-      - "!packages/repeater/**"
-
-
-concurrency:
-  group: e2e-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  e2e:
-    runs-on: ai-ubuntu-big-boy-8-core
-    if: ${{ !github.event.pull_request.draft }}
-
-    steps:
-        - name: Checkout Repo
-          uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
-
-        - name: Setup Python
-          uses: actions/setup-python@0a5c61591373683505ea898e09a3ea4f39ef2b9c #v5.0.0
-          with:
-            python-version-file: 'pyproject.toml'
-
-        - name: Install Python Deps
-          run: python -m pip install "."
-
-        - name: Setup Node
-          uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
-          with:
-            node-version-file: 'src/leapfrogai_ui/package.json'
-
-        - name: Install UI/Playwright Dependencies
-          run: |
-            npm --prefix src/leapfrogai_ui ci
-            npx --prefix src/leapfrogai_ui playwright install
-
-        - name: Setup UDS Environment
-          uses: defenseunicorns/uds-common/.github/actions/setup@05f42bb3117b66ebef8c72ae050b34bce19385f5
-          with:
-            username: ${{ secrets.IRON_BANK_ROBOT_USERNAME }}
-            password: ${{ secrets.IRON_BANK_ROBOT_PASSWORD }}
-
-        - name: Create UDS Cluster
-          run: |
-            uds deploy k3d-core-slim-dev:0.23.0 --confirm
-
-        ##########
-        # Supabase
-        ##########
-        - name: Deploy Supabase
-          run: |
-            make build-supabase LOCAL_VERSION=e2e-test
-            docker image prune -af
-            uds zarf tools kubectl create namespace leapfrogai
-            uds zarf package deploy packages/supabase/zarf-package-supabase-amd64-e2e-test.tar.zst --confirm
-            rm packages/supabase/zarf-package-supabase-amd64-e2e-test.tar.zst
-
-        - name: Set environment variable
-          id: set-env-var
-          run: |
-            echo "ANON_KEY=$(uds zarf tools kubectl get secret supabase-bootstrap-jwt -n leapfrogai -o jsonpath='{.data.anon-key}' | base64 -d)" >> "$GITHUB_ENV"
-
-        - name: Test Supabase
-          run: |
-            python -m pip install requests
-            python -m pytest ./tests/e2e/test_supabase.py -v
-
-        ##########
-        # UI
-        ##########
-        - name: Deploy LFAI-UI
-          run: |
-            make build-ui LOCAL_VERSION=e2e-test
-            docker image prune -af
-            uds zarf package deploy packages/ui/zarf-package-leapfrogai-ui-amd64-e2e-test.tar.zst --confirm
-            rm packages/ui/zarf-package-leapfrogai-ui-amd64-e2e-test.tar.zst
-
-        ##########
-        # API
-        ##########
-        - name: Deploy LFAI-API
-          run: |
-            make build-api LOCAL_VERSION=e2e-test
-            docker image prune -af
-            uds zarf package deploy packages/api/zarf-package-leapfrogai-api-amd64-e2e-test.tar.zst --confirm
-            rm packages/api/zarf-package-leapfrogai-api-amd64-e2e-test.tar.zst
-
-        - name: Test API
-          run: |
-            python -m pip install requests
-            python -m pytest ./tests/e2e/test_api.py -v
-
-        # Run the playwright UI tests using the deployed Supabase endpoint
-        - name: UI/API/Supabase E2E Playwright Tests
-          run: |
-            cp src/leapfrogai_ui/.env.example src/leapfrogai_ui/.env
-            TEST_ENV=CI PUBLIC_DISABLE_KEYCLOAK=true PUBLIC_SUPABASE_ANON_KEY=$ANON_KEY npm --prefix src/leapfrogai_ui run test:integration:ci
-
-        # The UI can be removed after the Playwright tests are finished
-        - name: Cleanup UI
-          run: |
-            uds zarf package remove leapfrogai-ui --confirm
-
-        ##########
-        # llama
-        ##########
-        - name: Deploy llama-cpp-python
-          run: |
-            make build-llama-cpp-python LOCAL_VERSION=e2e-test
-            docker image prune -af
-            uds zarf package deploy packages/llama-cpp-python/zarf-package-llama-cpp-python-amd64-e2e-test.tar.zst -l=trace --confirm
-            rm packages/llama-cpp-python/zarf-package-llama-cpp-python-amd64-e2e-test.tar.zst
-
-        - name: Test llama-cpp-python
-          run: |
-            python -m pytest ./tests/e2e/test_llama.py -v
-
-        - name: Cleanup llama-cpp-python
-          run: |
-            uds zarf package remove llama-cpp-python -l=trace --confirm
-
-        ##########
-        # text-embeddings
-        ##########
-        - name: Deploy text-embeddings
-          run: |
-            make build-text-embeddings LOCAL_VERSION=e2e-test
-            docker image prune -af
-            uds zarf package deploy packages/text-embeddings/zarf-package-text-embeddings-amd64-e2e-test.tar.zst -l=trace --confirm
-            rm packages/text-embeddings/zarf-package-text-embeddings-amd64-e2e-test.tar.zst
-
-        - name: Test text-embeddings
-          run: |
-            python -m pytest ./tests/e2e/test_text_embeddings.py -v
-
-        - name: Cleanup text-embeddings
-          run: |
-            uds zarf package remove text-embeddings -l=trace --confirm
-
-        ##########
-        # whisper
-        ##########
-        - name: Deploy whisper
-          run: |
-            make build-whisper LOCAL_VERSION=e2e-test
-            docker image prune -af
-            uds zarf package deploy packages/whisper/zarf-package-whisper-amd64-e2e-test.tar.zst -l=trace --confirm
-            rm packages/whisper/zarf-package-whisper-amd64-e2e-test.tar.zst
-
-        - name: Test whisper
-          run: |
-            python -m pytest ./tests/e2e/test_whisper.py -v
-
-        - name: Cleanup whisper
-          run: |
-            uds zarf package remove whisper -l=trace --confirm
-
-        # This cleanup may need to be moved/removed when other packages depend on Supabase
-        - name: Cleanup Supabase
-          run: |
-            uds zarf package remove supabase -l=trace --confirm
-
-        ##########
-        # vLLM
-        # NOTE: We are not deploying and testing vLLM in this workflow because it requires a GPU
-        #     : This workflow simply verifies that the vLLM package can be built
-        ##########
-        - name: Build vLLM
-          run: |
-            make build-vllm LOCAL_VERSION=e2e-test
diff --git a/.github/workflows/lint.yaml b/.github/workflows/lint.yaml
index 7450aa4ee..e4cca5a4b 100644
--- a/.github/workflows/lint.yaml
+++ b/.github/workflows/lint.yaml
@@ -2,10 +2,11 @@ name: lint
 on:
   pull_request:
     types:
-      - ready_for_review
-      - review_requested
-      - synchronize
-      - milestoned
+      - opened            # default trigger
+      - reopened          # default trigger
+      - synchronize       # default trigger
+      - ready_for_review  # don't run on draft PRs
+      - milestoned        # allows us to trigger on bot PRs
 
 # Declare default permissions as read only.
 permissions: read-all
diff --git a/.github/workflows/pytest.yaml b/.github/workflows/pytest.yaml
index 1dda8ce1a..87cac7d56 100644
--- a/.github/workflows/pytest.yaml
+++ b/.github/workflows/pytest.yaml
@@ -2,10 +2,11 @@ name: pytest
 on:
   pull_request:
     types:
-      - ready_for_review
-      - review_requested
-      - synchronize
-      - milestoned
+      - opened            # default trigger
+      - reopened          # default trigger
+      - synchronize       # default trigger
+      - ready_for_review  # don't run on draft PRs
+      - milestoned        # allows us to trigger on bot PRs
     paths:
       - "**"
       - "!.github/**"
@@ -56,7 +57,7 @@ jobs:
         run: docker run -p 50051:50051 -d --name=repeater ghcr.io/defenseunicorns/leapfrogai/repeater:dev
 
       - name: Install Python Deps
-        run: pip install "." "src/leapfrogai_api" "src/leapfrogai_sdk"
+        run: pip install ".[dev]" "src/leapfrogai_api" "src/leapfrogai_sdk"
 
       - name: Run Pytest
         run: python -m pytest tests/pytest -v
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 0f891a599..c03767b30 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -40,6 +40,10 @@ jobs:
         with:
           python-version-file: 'pyproject.toml'
 
+      - name: Instal Python Deps
+        run: |
+          python -m pip install ".[dev,dev-whisper,dev-vllm]"
+
       - name: Build and Publish k3d-gpu image
         run: |
           cd packages/k3d-gpu
diff --git a/.gitignore b/.gitignore
index e4e9d2d60..bcefc6ea7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 # temporary deployment and development artifacts
+.logs/
 data/*
 **/*.tar.zst
 __pycache__
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 85aa2eaad..a23950ed8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,47 @@
 # Changelog
 
+## [0.10.0](https://github.com/defenseunicorns/leapfrogai/compare/v0.9.2...v0.10.0) (2024-08-02)
+
+
+### ⚠ BREAKING CHANGES
+
+* **api:** updating api endpoints ([#817](https://github.com/defenseunicorns/leapfrogai/issues/817))
+
+### Features
+
+* **backend:** add k3d gpu image builder ([#797](https://github.com/defenseunicorns/leapfrogai/issues/797)) ([4504085](https://github.com/defenseunicorns/leapfrogai/commit/4504085dc10e9b6cb74115c974ea5e8f8c7fa98c))
+* **backend:** nvidia runtimeclass ([#787](https://github.com/defenseunicorns/leapfrogai/issues/787)) ([106997d](https://github.com/defenseunicorns/leapfrogai/commit/106997d42e750014de94959c939442ac4e23378b))
+* silent parallel make targets for build and deployment ([#824](https://github.com/defenseunicorns/leapfrogai/issues/824)) ([681aafd](https://github.com/defenseunicorns/leapfrogai/commit/681aafdec1b59f00fb8c8deb598a00327ef404b6))
+* **ui:** remove carbon and replace with Flowbite ([#862](https://github.com/defenseunicorns/leapfrogai/issues/862)) ([921a864](https://github.com/defenseunicorns/leapfrogai/commit/921a8642c3e70c4d0dc3d92cd0d7745e45e21524))
+
+
+### Bug Fixes
+
+* **api:** fix indexing files with api key auth ([#852](https://github.com/defenseunicorns/leapfrogai/issues/852)) ([c4d9c3f](https://github.com/defenseunicorns/leapfrogai/commit/c4d9c3f289f8708cd08a82d290fe9ab51ba8cc09))
+* helm template evluation for whisper GPU_REQUEST envvar ([#859](https://github.com/defenseunicorns/leapfrogai/issues/859)) ([5320890](https://github.com/defenseunicorns/leapfrogai/commit/532089087fd520121c64d331716945563509a062))
+* make errors when supabase is unavailable ([#814](https://github.com/defenseunicorns/leapfrogai/issues/814)) ([976635c](https://github.com/defenseunicorns/leapfrogai/commit/976635cd5c5d615cc16adcbf6d6622845ab64eca))
+* **ui:** logout ([#849](https://github.com/defenseunicorns/leapfrogai/issues/849)) ([f71af5d](https://github.com/defenseunicorns/leapfrogai/commit/f71af5d6c0d6432644144f0ad090100969c69c04))
+* **ui:** playwright login without keycloak ([#833](https://github.com/defenseunicorns/leapfrogai/issues/833)) ([fd1e3dd](https://github.com/defenseunicorns/leapfrogai/commit/fd1e3dd3148581307d9ccf021c94d4208d839c56))
+* **whisper:** Including missing cuda dependencies required for GPU runtimes ([2aba4af](https://github.com/defenseunicorns/leapfrogai/commit/2aba4af86b37d32fbb4a8cbe73b6151e2e1c3190))
+
+
+### Miscellaneous
+
+* **api:** Adds API load testing ([#801](https://github.com/defenseunicorns/leapfrogai/issues/801)) ([67b9755](https://github.com/defenseunicorns/leapfrogai/commit/67b9755f8ff8ed2c1197efe9f22d12ace685ef82))
+* **api:** Indexing performance improvements ([#799](https://github.com/defenseunicorns/leapfrogai/issues/799)) ([e679ad2](https://github.com/defenseunicorns/leapfrogai/commit/e679ad22f52cb411e47fcc01f6e3eb3d7191ffcd))
+* **api:** updating api endpoints ([#817](https://github.com/defenseunicorns/leapfrogai/issues/817)) ([6ff292f](https://github.com/defenseunicorns/leapfrogai/commit/6ff292f0d3462b0a12cb0bd032ed9bdaa4077d69))
+* **deps:** bump torch from 2.1.2 to 2.2.0 in /packages/text-embeddings ([#831](https://github.com/defenseunicorns/leapfrogai/issues/831)) ([22c75cb](https://github.com/defenseunicorns/leapfrogai/commit/22c75cbfb662f8f1f53d91875d9bdf5126c31900))
+* make python test dependencies optional ([#815](https://github.com/defenseunicorns/leapfrogai/issues/815)) ([89ff0a6](https://github.com/defenseunicorns/leapfrogai/commit/89ff0a6a34957bbcd788250c10e28312192f0af1))
+* optimize vLLM Dockerfile to reduce layer sizes ([#805](https://github.com/defenseunicorns/leapfrogai/issues/805)) ([0fec864](https://github.com/defenseunicorns/leapfrogai/commit/0fec864f5f870dee560bd60dac74bca11b219442))
+* release 0.10.0 ([#864](https://github.com/defenseunicorns/leapfrogai/issues/864)) ([7e6f574](https://github.com/defenseunicorns/leapfrogai/commit/7e6f57433c0b2ea49f814906d9625f7419baecf3))
+* Remove model weights from container images ([#786](https://github.com/defenseunicorns/leapfrogai/issues/786)) ([33e4efb](https://github.com/defenseunicorns/leapfrogai/commit/33e4efb3031e7fd95333c4f98d47933a8123cb2d))
+* restrict daemonset to cuda compute, utility ([#836](https://github.com/defenseunicorns/leapfrogai/issues/836)) ([4bf9124](https://github.com/defenseunicorns/leapfrogai/commit/4bf9124f2019cd9c20abfc3db717de5fd5c16d95))
+* set kong service to default to cluster IP ([#857](https://github.com/defenseunicorns/leapfrogai/issues/857)) ([08f1d10](https://github.com/defenseunicorns/leapfrogai/commit/08f1d109f571e6c1649261cc99da115e23675b5d))
+* split e2e tests into multiple workflows ([#808](https://github.com/defenseunicorns/leapfrogai/issues/808)) ([c993ad5](https://github.com/defenseunicorns/leapfrogai/commit/c993ad5526e0bf23148e5f9ceef215abadef30fe))
+* Update defenseunicorns/zarf to zarf-dev/zarf ([#832](https://github.com/defenseunicorns/leapfrogai/issues/832)) ([cc18cea](https://github.com/defenseunicorns/leapfrogai/commit/cc18ceabfedf88bf355ec4eb53b436443b9a1f3c))
+* update release workflow to install necessary python deps ([#867](https://github.com/defenseunicorns/leapfrogai/issues/867)) ([1e667a4](https://github.com/defenseunicorns/leapfrogai/commit/1e667a44504e2441549c60951d8f1a1757c81864))
+* **whisper:** Pass through variables down to whisper ([#840](https://github.com/defenseunicorns/leapfrogai/issues/840)) ([4e8092a](https://github.com/defenseunicorns/leapfrogai/commit/4e8092ac4fe2ba9fb369506773074e929a1a1a25))
+
 ## [0.9.2](https://github.com/defenseunicorns/leapfrogai/compare/v0.9.1...v0.9.2) (2024-07-19)
 
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 15aba8464..b764d1ccd 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -26,8 +26,8 @@ Specifically:
 3. :key: Set up your Git config to GPG sign all commits. [Here's some documentation on how to set it up](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits). You won't be able to merge your PR if you have any unverified commits.
 4. Create a Draft Pull Request as soon as you can, even if it is just 5 minutes after you started working on it. We lean towards working in the open as much as we can. If you're not sure what to put in the PR description, just put a link to the issue you're working on. If you're not sure what to put in the PR title, just put "WIP" (Work In Progress) and we'll help you out with the rest.
 5. :key: Automated tests will begin based on the paths you have edited in your Pull Request.
-   > ⚠️ **NOTE:** _If you are an external third-party contributor, the pipelines won't run until a [CODEOWNER](https://github.com/defenseunicorns/zarf/blob/main/CODEOWNERS) approves the pipeline run._
-6. :key: Be sure to use the [needs-adr,needs-docs,needs-tests](https://github.com/defenseunicorns/zarf/labels?q=needs) labels as appropriate for the PR. Once you have addressed all of the needs, remove the label.
+   > ⚠️ **NOTE:** _If you are an external third-party contributor, the pipelines won't run until a [CODEOWNER](https://github.com/zarf-dev/zarf/blob/main/CODEOWNERS) approves the pipeline run._
+6. :key: Be sure to use the [needs-adr,needs-docs,needs-tests](https://github.com/zarf-dev/zarf/labels?q=needs) labels as appropriate for the PR. Once you have addressed all of the needs, remove the label.
 7. Once the review is complete and approved, a core member of the LeapfrogAI project will merge your PR. If you are an external third-party contributor, two core members of the zarf project will be required to approve the PR.
 8. Close the issue if it is fully resolved by your PR. _Hint: You can add "Fixes #XX" to the PR description to automatically close an issue when the PR is merged._
 
diff --git a/Makefile b/Makefile
index bff055321..bf5442755 100644
--- a/Makefile
+++ b/Makefile
@@ -1,10 +1,12 @@
 ARCH ?= amd64
-KEY ?= ""
 REG_PORT ?= 5000
 REG_NAME ?= registry
-
-VERSION ?= $(shell git describe --abbrev=0 --tags)
 LOCAL_VERSION ?= $(shell git rev-parse --short HEAD)
+DOCKER_FLAGS :=
+ZARF_FLAGS :=
+SILENT_DOCKER_FLAGS := --quiet
+SILENT_ZARF_FLAGS := --no-progress -l warn --no-color
+MAX_JOBS := 4
 ######################################################################################
 
 .PHONY: help
@@ -13,8 +15,8 @@ help: ## Display this help information
 		| sort | awk 'BEGIN {FS = ":.*?## "}; \
 		{printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
 
-
 clean: ## Clean up all the things (packages, build dirs, compiled .whl files, python eggs)
+	-rm -rf .logs
 	-rm zarf-package-*.tar.zst
 	-rm packages/**/zarf-package-*.tar.zst
 	-rm -rf build/*
@@ -46,113 +48,115 @@ clean-registry:
 	@docker rm ${REG_NAME}
 
 sdk-wheel: ## build wheels for the leapfrogai_sdk package as a dependency for other lfai components
-	docker build --platform=linux/${ARCH} -t ghcr.io/defenseunicorns/leapfrogai/leapfrogai-sdk:${LOCAL_VERSION} -f src/leapfrogai_sdk/Dockerfile .
+	docker build ${DOCKER_FLAGS} --platform=linux/${ARCH} -t ghcr.io/defenseunicorns/leapfrogai/leapfrogai-sdk:${LOCAL_VERSION} -f src/leapfrogai_sdk/Dockerfile .
 
 docker-supabase:
 	## Build the migration container for this version of the supabase package
-	docker build -t ghcr.io/defenseunicorns/leapfrogai/supabase-migrations:${LOCAL_VERSION} -f Dockerfile.migrations --build-arg="MIGRATIONS_DIR=packages/supabase/migrations" .
+	docker build ${DOCKER_FLAGS} -t ghcr.io/defenseunicorns/leapfrogai/supabase-migrations:${LOCAL_VERSION} -f Dockerfile.migrations --build-arg="MIGRATIONS_DIR=packages/supabase/migrations" .
 	docker tag ghcr.io/defenseunicorns/leapfrogai/supabase-migrations:${LOCAL_VERSION} localhost:${REG_PORT}/defenseunicorns/leapfrogai/supabase-migrations:${LOCAL_VERSION}
 
 build-supabase: local-registry docker-supabase
-	docker push localhost:${REG_PORT}/defenseunicorns/leapfrogai/supabase-migrations:${LOCAL_VERSION}
+	docker push ${DOCKER_FLAGS} localhost:${REG_PORT}/defenseunicorns/leapfrogai/supabase-migrations:${LOCAL_VERSION}
 
 	## Build the Zarf package
-	uds zarf package create packages/supabase -a ${ARCH} -o packages/supabase --registry-override=ghcr.io=localhost:${REG_PORT} --set IMAGE_VERSION=${LOCAL_VERSION} --confirm
+	uds zarf package create packages/supabase -a ${ARCH} -o packages/supabase --registry-override=ghcr.io=localhost:${REG_PORT} --set IMAGE_VERSION=${LOCAL_VERSION} ${ZARF_FLAGS} --confirm
 
 docker-api: local-registry sdk-wheel
+	@echo $(DOCKER_FLAGS)
+	@echo $(ZARF_FLAGS)
 	## Build the API image (and tag it for the local registry)
-	docker build --platform=linux/${ARCH} --build-arg LOCAL_VERSION=${LOCAL_VERSION} -t ghcr.io/defenseunicorns/leapfrogai/leapfrogai-api:${LOCAL_VERSION} -f packages/api/Dockerfile .
+	docker build ${DOCKER_FLAGS} --platform=linux/${ARCH} --build-arg LOCAL_VERSION=${LOCAL_VERSION} -t ghcr.io/defenseunicorns/leapfrogai/leapfrogai-api:${LOCAL_VERSION} -f packages/api/Dockerfile .
 	docker tag ghcr.io/defenseunicorns/leapfrogai/leapfrogai-api:${LOCAL_VERSION} localhost:${REG_PORT}/defenseunicorns/leapfrogai/leapfrogai-api:${LOCAL_VERSION}
 
 	## Build the migration container for this version of the API
-	docker build --platform=linux/${ARCH} -t ghcr.io/defenseunicorns/leapfrogai/api-migrations:${LOCAL_VERSION} -f Dockerfile.migrations --build-arg="MIGRATIONS_DIR=packages/api/supabase/migrations" .
+	docker build ${DOCKER_FLAGS} --platform=linux/${ARCH} -t ghcr.io/defenseunicorns/leapfrogai/api-migrations:${LOCAL_VERSION} -f Dockerfile.migrations --build-arg="MIGRATIONS_DIR=packages/api/supabase/migrations" .
 	docker tag ghcr.io/defenseunicorns/leapfrogai/api-migrations:${LOCAL_VERSION} localhost:${REG_PORT}/defenseunicorns/leapfrogai/api-migrations:${LOCAL_VERSION}
 
 build-api: local-registry docker-api ## Build the leapfrogai_api container and Zarf package
 	## Push the images to the local registry (Zarf is super slow if the image is only in the local daemon)
-	docker push localhost:${REG_PORT}/defenseunicorns/leapfrogai/leapfrogai-api:${LOCAL_VERSION}
-	docker push localhost:${REG_PORT}/defenseunicorns/leapfrogai/api-migrations:${LOCAL_VERSION}
+	docker push ${DOCKER_FLAGS} localhost:${REG_PORT}/defenseunicorns/leapfrogai/leapfrogai-api:${LOCAL_VERSION}
+	docker push ${DOCKER_FLAGS} localhost:${REG_PORT}/defenseunicorns/leapfrogai/api-migrations:${LOCAL_VERSION}
 
 	## Build the Zarf package
-	uds zarf package create packages/api -a ${ARCH} -o packages/api --registry-override=ghcr.io=localhost:${REG_PORT} --insecure --set LEAPFROGAI_IMAGE_VERSION=${LOCAL_VERSION} --confirm
+	uds zarf package create packages/api -a ${ARCH} -o packages/api --registry-override=ghcr.io=localhost:${REG_PORT} --insecure --set LEAPFROGAI_IMAGE_VERSION=${LOCAL_VERSION} ${ZARF_FLAGS} --confirm
 
 docker-ui:
 	## Build the UI image (and tag it for the local registry)
-	docker build --platform=linux/${ARCH} -t ghcr.io/defenseunicorns/leapfrogai/leapfrogai-ui:${LOCAL_VERSION} src/leapfrogai_ui
+	docker build ${DOCKER_FLAGS} --platform=linux/${ARCH} -t ghcr.io/defenseunicorns/leapfrogai/leapfrogai-ui:${LOCAL_VERSION} src/leapfrogai_ui
 	docker tag ghcr.io/defenseunicorns/leapfrogai/leapfrogai-ui:${LOCAL_VERSION} localhost:${REG_PORT}/defenseunicorns/leapfrogai/leapfrogai-ui:${LOCAL_VERSION}
 
 	## Build the migration container for the version of the UI
-	docker build --platform=linux/${ARCH} -t ghcr.io/defenseunicorns/leapfrogai/ui-migrations:${LOCAL_VERSION} -f Dockerfile.migrations --build-arg="MIGRATIONS_DIR=src/leapfrogai_ui/supabase/migrations" .
+	docker build ${DOCKER_FLAGS} --platform=linux/${ARCH} -t ghcr.io/defenseunicorns/leapfrogai/ui-migrations:${LOCAL_VERSION} -f Dockerfile.migrations --build-arg="MIGRATIONS_DIR=src/leapfrogai_ui/supabase/migrations" .
 	docker tag ghcr.io/defenseunicorns/leapfrogai/ui-migrations:${LOCAL_VERSION} localhost:${REG_PORT}/defenseunicorns/leapfrogai/ui-migrations:${LOCAL_VERSION}
 
 build-ui: local-registry docker-ui ## Build the leapfrogai_ui container and Zarf package
 	## Push the image to the local registry (Zarf is super slow if the image is only in the local daemon)
-	docker push localhost:${REG_PORT}/defenseunicorns/leapfrogai/leapfrogai-ui:${LOCAL_VERSION}
-	docker push localhost:${REG_PORT}/defenseunicorns/leapfrogai/ui-migrations:${LOCAL_VERSION}
+	docker push ${DOCKER_FLAGS} localhost:${REG_PORT}/defenseunicorns/leapfrogai/leapfrogai-ui:${LOCAL_VERSION}
+	docker push ${DOCKER_FLAGS} localhost:${REG_PORT}/defenseunicorns/leapfrogai/ui-migrations:${LOCAL_VERSION}
 
 	## Build the Zarf package
-	uds zarf package create packages/ui -a ${ARCH} -o packages/ui --registry-override=ghcr.io=localhost:${REG_PORT} --insecure --set IMAGE_VERSION=${LOCAL_VERSION} --confirm
+	uds zarf package create packages/ui -a ${ARCH} -o packages/ui --registry-override=ghcr.io=localhost:${REG_PORT} --insecure --set IMAGE_VERSION=${LOCAL_VERSION} ${ZARF_FLAGS} --confirm
 
 docker-llama-cpp-python: sdk-wheel
 	## Build the image (and tag it for the local registry)
-	docker build  --platform=linux/${ARCH} --build-arg LOCAL_VERSION=${LOCAL_VERSION} -t ghcr.io/defenseunicorns/leapfrogai/llama-cpp-python:${LOCAL_VERSION} -f packages/llama-cpp-python/Dockerfile .
+	docker build ${DOCKER_FLAGS} --platform=linux/${ARCH} --build-arg LOCAL_VERSION=${LOCAL_VERSION} -t ghcr.io/defenseunicorns/leapfrogai/llama-cpp-python:${LOCAL_VERSION} -f packages/llama-cpp-python/Dockerfile .
 	docker tag ghcr.io/defenseunicorns/leapfrogai/llama-cpp-python:${LOCAL_VERSION} localhost:${REG_PORT}/defenseunicorns/leapfrogai/llama-cpp-python:${LOCAL_VERSION}
 
 build-llama-cpp-python: local-registry docker-llama-cpp-python ## Build the llama-cpp-python (cpu) container and Zarf package
 	## Push the image to the local registry (Zarf is super slow if the image is only in the local daemon)
-	docker push localhost:${REG_PORT}/defenseunicorns/leapfrogai/llama-cpp-python:${LOCAL_VERSION}
+	docker push ${DOCKER_FLAGS} localhost:${REG_PORT}/defenseunicorns/leapfrogai/llama-cpp-python:${LOCAL_VERSION}
 
 	## Build the Zarf package
-	uds zarf package create packages/llama-cpp-python -a ${ARCH} -o packages/llama-cpp-python --registry-override=ghcr.io=localhost:${REG_PORT} --insecure --set IMAGE_VERSION=${LOCAL_VERSION} --confirm
+	uds zarf package create packages/llama-cpp-python -a ${ARCH} -o packages/llama-cpp-python --registry-override=ghcr.io=localhost:${REG_PORT} --insecure --set IMAGE_VERSION=${LOCAL_VERSION} ${ZARF_FLAGS} --confirm
 
 docker-vllm: sdk-wheel
 	## Build the image (and tag it for the local registry)
-	docker build --platform=linux/${ARCH} --build-arg LOCAL_VERSION=${LOCAL_VERSION} -t ghcr.io/defenseunicorns/leapfrogai/vllm:${LOCAL_VERSION} -f packages/vllm/Dockerfile .
+	docker build ${DOCKER_FLAGS} --platform=linux/${ARCH} --build-arg LOCAL_VERSION=${LOCAL_VERSION} -t ghcr.io/defenseunicorns/leapfrogai/vllm:${LOCAL_VERSION} -f packages/vllm/Dockerfile .
 	docker tag ghcr.io/defenseunicorns/leapfrogai/vllm:${LOCAL_VERSION} localhost:${REG_PORT}/defenseunicorns/leapfrogai/vllm:${LOCAL_VERSION}
 
 build-vllm: local-registry docker-vllm ## Build the vllm container and Zarf package
 	## Push the image to the local registry (Zarf is super slow if the image is only in the local daemon)
-	docker push localhost:${REG_PORT}/defenseunicorns/leapfrogai/vllm:${LOCAL_VERSION}
+	docker push ${DOCKER_FLAGS} localhost:${REG_PORT}/defenseunicorns/leapfrogai/vllm:${LOCAL_VERSION}
 
 	## Build the Zarf package
-	uds zarf package create packages/vllm -a ${ARCH} -o packages/vllm --registry-override=ghcr.io=localhost:${REG_PORT} --insecure --set IMAGE_VERSION=${LOCAL_VERSION} --confirm
+	uds zarf package create packages/vllm -a ${ARCH} -o packages/vllm --registry-override=ghcr.io=localhost:${REG_PORT} --insecure --set IMAGE_VERSION=${LOCAL_VERSION} ${ZARF_FLAGS} --confirm
 
 docker-text-embeddings: sdk-wheel
 	## Build the image (and tag it for the local registry)
-	docker build --platform=linux/${ARCH} --build-arg LOCAL_VERSION=${LOCAL_VERSION} -t ghcr.io/defenseunicorns/leapfrogai/text-embeddings:${LOCAL_VERSION} -f packages/text-embeddings/Dockerfile .
+	docker build ${DOCKER_FLAGS} --platform=linux/${ARCH} --build-arg LOCAL_VERSION=${LOCAL_VERSION} -t ghcr.io/defenseunicorns/leapfrogai/text-embeddings:${LOCAL_VERSION} -f packages/text-embeddings/Dockerfile .
 	docker tag ghcr.io/defenseunicorns/leapfrogai/text-embeddings:${LOCAL_VERSION} localhost:${REG_PORT}/defenseunicorns/leapfrogai/text-embeddings:${LOCAL_VERSION}
 
 build-text-embeddings: local-registry docker-text-embeddings ## Build the text-embeddings container and Zarf package
 	## Push the image to the local registry (Zarf is super slow if the image is only in the local daemon)
-	docker push localhost:${REG_PORT}/defenseunicorns/leapfrogai/text-embeddings:${LOCAL_VERSION}
+	docker push ${DOCKER_FLAGS} localhost:${REG_PORT}/defenseunicorns/leapfrogai/text-embeddings:${LOCAL_VERSION}
 
 	## Build the Zarf package
-	uds zarf package create packages/text-embeddings -a ${ARCH} -o packages/text-embeddings --registry-override=ghcr.io=localhost:${REG_PORT} --insecure --set IMAGE_VERSION=${LOCAL_VERSION} --confirm
+	uds zarf package create packages/text-embeddings -a ${ARCH} -o packages/text-embeddings --registry-override=ghcr.io=localhost:${REG_PORT} --insecure --set IMAGE_VERSION=${LOCAL_VERSION} ${ZARF_FLAGS} --confirm
 
 
 docker-whisper: sdk-wheel
 	## Build the image (and tag it for the local registry)
-	docker build --platform=linux/${ARCH} --build-arg LOCAL_VERSION=${LOCAL_VERSION} -t ghcr.io/defenseunicorns/leapfrogai/whisper:${LOCAL_VERSION} -f packages/whisper/Dockerfile .
+	docker build ${DOCKER_FLAGS} --platform=linux/${ARCH} --build-arg LOCAL_VERSION=${LOCAL_VERSION} -t ghcr.io/defenseunicorns/leapfrogai/whisper:${LOCAL_VERSION} -f packages/whisper/Dockerfile .
 	docker tag ghcr.io/defenseunicorns/leapfrogai/whisper:${LOCAL_VERSION} localhost:${REG_PORT}/defenseunicorns/leapfrogai/whisper:${LOCAL_VERSION}
 
 build-whisper: local-registry docker-whisper ## Build the whisper container and zarf package
 	## Push the image to the local registry (Zarf is super slow if the image is only in the local daemon)
-	docker push localhost:${REG_PORT}/defenseunicorns/leapfrogai/whisper:${LOCAL_VERSION}
+	docker push ${DOCKER_FLAGS} localhost:${REG_PORT}/defenseunicorns/leapfrogai/whisper:${LOCAL_VERSION}
 
 	## Build the Zarf package
-	uds zarf package create packages/whisper -a ${ARCH} -o packages/whisper --registry-override=ghcr.io=localhost:${REG_PORT} --insecure --set IMAGE_VERSION=${LOCAL_VERSION} --confirm
+	uds zarf package create packages/whisper -a ${ARCH} -o packages/whisper --registry-override=ghcr.io=localhost:${REG_PORT} --insecure --set IMAGE_VERSION=${LOCAL_VERSION} ${ZARF_FLAGS} --confirm
 
 docker-repeater: sdk-wheel
 	## Build the image (and tag it for the local registry)
-	docker build --platform=linux/${ARCH} --build-arg LOCAL_VERSION=${LOCAL_VERSION} -t ghcr.io/defenseunicorns/leapfrogai/repeater:${LOCAL_VERSION} -f packages/repeater/Dockerfile .
+	docker build ${DOCKER_FLAGS} --platform=linux/${ARCH} --build-arg LOCAL_VERSION=${LOCAL_VERSION} -t ghcr.io/defenseunicorns/leapfrogai/repeater:${LOCAL_VERSION} -f packages/repeater/Dockerfile .
 	docker tag ghcr.io/defenseunicorns/leapfrogai/repeater:${LOCAL_VERSION} localhost:${REG_PORT}/defenseunicorns/leapfrogai/repeater:${LOCAL_VERSION}
 
 build-repeater: local-registry docker-repeater ## Build the repeater container and zarf package
 	## Push the image to the local registry (Zarf is super slow if the image is only in the local daemon)
-	docker push localhost:${REG_PORT}/defenseunicorns/leapfrogai/repeater:${LOCAL_VERSION}
+	docker push ${DOCKER_FLAGS} localhost:${REG_PORT}/defenseunicorns/leapfrogai/repeater:${LOCAL_VERSION}
 
 	## Build the Zarf package
-	uds zarf package create packages/repeater -a ${ARCH} -o packages/repeater --registry-override=ghcr.io=localhost:${REG_PORT} --insecure --set IMAGE_VERSION=${LOCAL_VERSION} --confirm
+	uds zarf package create packages/repeater -a ${ARCH} -o packages/repeater --registry-override=ghcr.io=localhost:${REG_PORT} --insecure --set IMAGE_VERSION=${LOCAL_VERSION} ${ZARF_FLAGS} --confirm
 
 build-cpu: build-supabase build-api build-ui build-llama-cpp-python build-text-embeddings build-whisper ## Build all zarf packages for a cpu-enabled deployment of LFAI
 
@@ -163,3 +167,170 @@ build-all: build-cpu build-gpu ## Build all of the LFAI packages
 include tests/make-tests.mk
 
 include packages/k3d-gpu/Makefile
+
+silent-build-api-parallel:
+	@echo "API build started"
+	@mkdir -p .logs
+	@$(MAKE) build-api DOCKER_FLAGS="$(DOCKER_FLAGS) $(SILENT_DOCKER_FLAGS)" ZARF_FLAGS="$(ZARF_FLAGS) $(SILENT_ZARF_FLAGS)" > .logs/build-api.log 2>&1
+	@echo "API build completed"
+
+silent-build-supabase-parallel:
+	@echo "Supabase build started"
+	@mkdir -p .logs
+	@$(MAKE) build-supabase DOCKER_FLAGS="$(DOCKER_FLAGS) $(SILENT_DOCKER_FLAGS)" ZARF_FLAGS="$(ZARF_FLAGS) $(SILENT_ZARF_FLAGS)" > .logs/build-supabase.log 2>&1
+	@echo "Supabase build completed"
+
+silent-build-ui-parallel:
+	@echo "UI build started"
+	@mkdir -p .logs
+	@$(MAKE) build-ui DOCKER_FLAGS="$(DOCKER_FLAGS) $(SILENT_DOCKER_FLAGS)" ZARF_FLAGS="$(ZARF_FLAGS) $(SILENT_ZARF_FLAGS)" > .logs/build-ui.log 2>&1
+	@echo "UI build completed"
+
+silent-build-vllm-parallel:
+	@echo "VLLM build started"
+	@mkdir -p .logs
+	@$(MAKE) build-vllm DOCKER_FLAGS="$(DOCKER_FLAGS) $(SILENT_DOCKER_FLAGS)" ZARF_FLAGS="$(ZARF_FLAGS) $(SILENT_ZARF_FLAGS)" > .logs/build-vllm.log 2>&1
+	@echo "VLLM build completed"
+
+silent-build-llama-cpp-python-parallel:
+	@echo "llama-cpp-python build started"
+	@mkdir -p .logs
+	@$(MAKE) build-llama-cpp-python DOCKER_FLAGS="$(DOCKER_FLAGS) $(SILENT_DOCKER_FLAGS)" ZARF_FLAGS="$(ZARF_FLAGS) $(SILENT_ZARF_FLAGS)" > .logs/build-llama-cpp-python.log 2>&1
+	@echo "llama-cpp-python build completed"
+
+silent-build-text-embeddings-parallel:
+	@echo "text-embeddings build started"
+	@mkdir -p .logs
+	@$(MAKE) build-text-embeddings DOCKER_FLAGS="$(DOCKER_FLAGS) $(SILENT_DOCKER_FLAGS)" ZARF_FLAGS="$(ZARF_FLAGS) $(SILENT_ZARF_FLAGS)" > .logs/build-text-embeddings.log 2>&1
+	@echo "text-embeddings build completed"
+
+silent-build-whisper-parallel:
+	@echo "whisper build started"
+	@mkdir -p .logs
+	@$(MAKE) build-whisper DOCKER_FLAGS="$(DOCKER_FLAGS) $(SILENT_DOCKER_FLAGS)" ZARF_FLAGS="$(ZARF_FLAGS) $(SILENT_ZARF_FLAGS)" > .logs/build-whisper.log 2>&1
+	@echo "whisper build completed"
+
+silent-build-all:
+	@echo "Starting parallel builds..."
+	@echo "Logs at .logs/*.log"
+	@mkdir -p .logs
+	@$(MAKE) -j${MAX_JOBS} silent-build-api-parallel silent-build-supabase-parallel silent-build-ui-parallel silent-build-vllm-parallel silent-build-llama-cpp-python-parallel silent-build-text-embeddings-parallel silent-build-whisper-parallel
+	@echo "All builds completed"
+
+silent-build-gpu:
+	@echo "Starting parallel builds..."
+	@echo "Logs at .logs/*.log"
+	@mkdir -p .logs
+	@$(MAKE) -j${MAX_JOBS} silent-build-api-parallel silent-build-supabase-parallel silent-build-ui-parallel silent-build-vllm-parallel silent-build-text-embeddings-parallel silent-build-whisper-parallel
+	@echo "All builds completed"
+
+silent-build-cpu:
+	@echo "Starting parallel builds..."
+	@echo "Logs at .logs/*.log"
+	@mkdir -p .logs
+	@$(MAKE) -j${MAX_JOBS} silent-build-api-parallel silent-build-supabase-parallel silent-build-ui-parallel silent-build-llama-cpp-python-parallel silent-build-text-embeddings-parallel silent-build-whisper-parallel
+	@echo "All builds completed"
+
+# Define individual deployment targets
+silent-deploy-supabase-package:
+	@echo "Starting Supabase deployment..."
+	@mkdir -p .logs
+	@uds zarf package deploy packages/supabase/zarf-package-supabase-${ARCH}-${LOCAL_VERSION}.tar.zst ${ZARF_FLAGS} --confirm > .logs/deploy-supabase.log 2>&1
+	@echo "Supabase deployment completed"
+
+silent-deploy-api-package:
+	@echo "Starting API deployment..."
+	@mkdir -p .logs
+	@uds zarf package deploy packages/api/zarf-package-leapfrogai-api-${ARCH}-${LOCAL_VERSION}.tar.zst ${ZARF_FLAGS} --confirm > .logs/deploy-api.log 2>&1
+	@echo "API deployment completed"
+
+silent-deploy-ui-package:
+	@echo "Starting UI deployment..."
+	@mkdir -p .logs
+	@uds zarf package deploy packages/ui/zarf-package-leapfrogai-ui-${ARCH}-${LOCAL_VERSION}.tar.zst ${ZARF_FLAGS} --confirm > .logs/deploy-ui.log 2>&1
+	@echo "UI deployment completed"
+
+silent-deploy-llama-cpp-python-package:
+	@echo "Starting llama-cpp-python deployment..."
+	@mkdir -p .logs
+	@uds zarf package deploy packages/llama-cpp-python/zarf-package-llama-cpp-python-${ARCH}-${LOCAL_VERSION}.tar.zst ${ZARF_FLAGS} --confirm > .logs/deploy-llama-cpp-python.log 2>&1
+	@echo "llama-cpp-python deployment completed"
+
+silent-deploy-vllm-package:
+	@echo "Starting VLLM deployment..."
+	@mkdir -p .logs
+	@uds zarf package deploy packages/vllm/zarf-package-vllm-${ARCH}-${LOCAL_VERSION}.tar.zst ${ZARF_FLAGS} --confirm > .logs/deploy-vllm.log 2>&1
+	@echo "VLLM deployment completed"
+
+silent-deploy-text-embeddings-package:
+	@echo "Starting text-embeddings deployment..."
+	@mkdir -p .logs
+	@uds zarf package deploy packages/text-embeddings/zarf-package-text-embeddings-${ARCH}-${LOCAL_VERSION}.tar.zst ${ZARF_FLAGS} --confirm > .logs/deploy-text-embeddings.log 2>&1
+	@echo "text-embeddings deployment completed"
+
+silent-deploy-whisper-package:
+	@echo "Starting whisper deployment..."
+	@mkdir -p .logs
+	@uds zarf package deploy packages/whisper/zarf-package-whisper-${ARCH}-${LOCAL_VERSION}.tar.zst ${ZARF_FLAGS} --confirm > .logs/deploy-whisper.log 2>&1
+	@echo "whisper deployment completed"
+
+silent-deploy-cpu:
+	@echo "Logs at .logs/*.log"
+	@echo "Starting parallel deployments..."
+	@echo "Deploying Supabase first to avoid migration issues."
+	@$(MAKE) silent-deploy-supabase-package ZARF_FLAGS="$(ZARF_FLAGS) $(SILENT_ZARF_FLAGS)"
+	@echo "Deploying the rest of the packages..."
+	@$(MAKE) -j${MAX_JOBS} \
+		silent-deploy-api-package ZARF_FLAGS="$(ZARF_FLAGS) $(SILENT_ZARF_FLAGS)" \
+		silent-deploy-ui-package ZARF_FLAGS="$(ZARF_FLAGS) $(SILENT_ZARF_FLAGS)" \
+		silent-deploy-llama-cpp-python-package ZARF_FLAGS="$(ZARF_FLAGS) $(SILENT_ZARF_FLAGS)" \
+		silent-deploy-text-embeddings-package ZARF_FLAGS="$(ZARF_FLAGS) $(SILENT_ZARF_FLAGS)" \
+		silent-deploy-whisper-package ZARF_FLAGS="$(ZARF_FLAGS) $(SILENT_ZARF_FLAGS)"
+	@echo "All deployments completed"
+
+silent-deploy-gpu:
+	@echo "Logs at .logs/*.log"
+	@echo "Starting parallel deployments..."
+	@echo "Deploying Supabase first to avoid migration issues."
+	@$(MAKE) silent-deploy-supabase-package ZARF_FLAGS="$(ZARF_FLAGS) $(SILENT_ZARF_FLAGS)"
+	@echo "Deploying API and models..."
+	@$(MAKE) -j${MAX_JOBS} \
+		silent-deploy-api-package ZARF_FLAGS="${ZARF_FLAGS} ${SILENT_ZARF_FLAGS}" \
+		silent-deploy-vllm-package ZARF_FLAGS="${ZARF_FLAGS} ${SILENT_ZARF_FLAGS}" \
+		silent-deploy-text-embeddings-package ZARF_FLAGS="${ZARF_FLAGS} ${SILENT_ZARF_FLAGS} --set=GPU_CLASS_NAME='nvidia'" \
+		silent-deploy-whisper-package ZARF_FLAGS="${ZARF_FLAGS} ${SILENT_ZARF_FLAGS} --set=GPU_CLASS_NAME='nvidia'"
+	@echo "Deploying UI..."
+	@$(MAKE) silent-deploy-ui-package ZARF_FLAGS="${ZARF_FLAGS} ${SILENT_ZARF_FLAGS} --set=MODEL='vllm'"
+	@echo "All deployments completed"
+
+silent-fresh-leapfrogai-gpu:
+	@echo "Cleaning up previous artifacts..."
+	@$(MAKE) clean > /dev/null 2>&1
+	@echo "Logs at .logs/*.log"
+	@mkdir -p .logs
+	@echo "Creating a uds gpu enabled cluster..."
+	@$(MAKE) create-uds-gpu-cluster DOCKER_FLAGS="${SILENT_DOCKER_FLAGS}" ZARF_FLAGS="${SILENT_ZARF_FLAGS}" > .logs/create-uds-gpu-cluster.log 2>&1
+	@echo "Testing the uds gpu cluster..."
+	@$(MAKE) test-uds-gpu-cluster > .logs/test-uds-gpu-cluster.log 2>&1
+	@echo "Building all packages..."
+	@$(MAKE) silent-build-gpu
+	@echo "Deploying all packages..."
+	@$(MAKE) silent-deploy-gpu
+	@echo "Done!"
+	@echo "UI is available at https://ai.uds.dev"
+	@echo "API is available at https://leapfrogai-api.uds.dev"
+
+silent-fresh-leapfrogai-cpu:
+	@echo "Cleaning up previous artifacts..."
+	@$(MAKE) clean > /dev/null 2>&1
+	@echo "Logs at .logs/*.log"
+	@mkdir -p .logs
+	@echo "Creating a uds cpu-only cluster..."
+	@$(MAKE) create-uds-cpu-cluster DOCKER_FLAGS="${SILENT_DOCKER_FLAGS}" ZARF_FLAGS="${SILENT_ZARF_FLAGS}" > .logs/create-uds-cpu-cluster.log 2>&1
+	@echo "Building all packages..."
+	@$(MAKE) silent-build-cpu
+	@echo "Deploying all packages..."
+	@$(MAKE) silent-deploy-cpu
+	@echo "Done!"
+	@echo "UI is available at https://ai.uds.dev"
+	@echo "API is available at https://leapfrogai-api.uds.dev"
diff --git a/README.md b/README.md
index fb4d8c464..92a1b8af6 100644
--- a/README.md
+++ b/README.md
@@ -118,7 +118,7 @@ LeapfrogAI can be deployed and run locally via UDS and Kubernetes, built out usi
 Prior to deploying any LeapfrogAI packages, a UDS Kubernetes cluster must be deployed using the most recent k3d bundle:
 
 ```sh
-uds deploy k3d-core-slim-dev:0.23.0
+make create-uds-cpu-cluster
 ```
 
 #### UDS Latest
diff --git a/adr/0003-database.md b/adr/0003-database.md
index 512170dce..b5ef6ad94 100644
--- a/adr/0003-database.md
+++ b/adr/0003-database.md
@@ -14,7 +14,7 @@
 
 ## Status
 
-PROPOSED
+ACCEPTED
 
 ## Context
 
diff --git a/adr/0006-queueing-high-traffic.md b/adr/0006-queueing-high-traffic.md
new file mode 100644
index 000000000..70502a799
--- /dev/null
+++ b/adr/0006-queueing-high-traffic.md
@@ -0,0 +1,100 @@
+# Queueing and High Traffic
+
+## Table of Contents
+
+- [Handling High Traffic](#Queueing-and-High-Traffic)
+  - [Table of Contents](#table-of-contents)
+  - [Status](#status)
+  - [Background](#background)
+  - [Decision](#decision)
+  - [Rationale](#rationale)
+  - [Alternatives](#alternatives)
+  - [Related ADRs](#related-adrs)
+  - [References](#references)
+
+## Status
+
+PROPOSED
+
+## Context
+
+LeapfrogAI needs to handle a large volume of inference, file upload, and embeddings requests. To ensure that we can manage this level of activity without significant performance degradation, we need to implement systems that prevent overwhelming or blocking by a large volume or single long-running task.
+
+Adding a Queue management component can help create a more efficient request management system to deal with high request volumes of long-running tasks. However, it may introduce a significant level of complexity to the system, and we must weigh the options carefully.
+
+Benefits of a Queue system for request processing:
+- Allows the API to quickly respond even when the system is very busy.
+- Prevents requests from being dropped or timing out.
+- Allows resuming failed requests.
+- Enables throttling of message processing rate.
+
+## Decision
+
+We have decided to implement a multi-tiered approach to address the queueing and high traffic challenges:
+
+1. Address underlying bottlenecks in the system:
+   - Optimize endpoint implementations, processing of long-running tasks, and indexing of files.
+   - Reduce duplication of indexing efforts.
+   - Scale horizontal/vertical resources as needed.
+
+2. Implement a lightweight queueing solution using Supabase Realtime and FastAPI background tasks:
+   - Utilize Supabase Realtime for task status updates (in-progress, complete, etc...) and basic queueing.
+    - In the event of issues with Supabase Realtime, fallback to RedPanda.
+   - Leverage FastAPI's background tasks to handle long running operations asynchronously in the background.
+
+3. Prepare for future scaling by designing the system to easily integrate with a more robust queueing solution:
+   - Design interfaces that can work with both our current lightweight solution and future, more robust options.
+   - Do not attempt to push Supabase Realtime beyond its designed limits, instead plan to use RedPanda or RabbitMQ if those needs surface.
+
+## Rationale
+1. Addressing underlying bottlenecks:
+   - This approach ensures we're not masking performance issues with a queueing system.
+   - Optimizations can significantly improve system performance without adding complexity.
+
+2. Lightweight solution (Supabase Realtime and FastAPI background tasks):
+   - Leverages existing infrastructure (Supabase) reducing additional operational overhead.
+   - FastAPI background tasks provide a simple way to handle asynchronous operations without introducing new dependencies.
+   - This solution meets our current needs without over-engineering.
+
+3. Preparation for future scaling:
+   - Allows for easy transition to more robust solutions as the system grows.
+   - Prevents lock-in to a solution that may not meet future needs.
+
+We chose this approach over alternatives for a few reasons:
+- This tiered approach allows us to start with a simple solution while preparing for future growth.
+- Some alternatives are viable but would likely require significant additional setup and mx work to bring to the current environment.
+  - The additional setup includes but is not limited to: new Zarf packages, updates to uds bundles, spikes to integrate with current app, resolving any permissions/hardening issues, more containers to add to ironbank/chainguard.
+- When performing load testing on the system, the primary bottlenecks seem to be around the vectordb file indexing.
+  - The issues related to this process should be able to be resolved by optimizations, a light amount of queueing, and background tasks.
+  - Issues not related to indexing were primarily scalability issues. Which can be resolved via resource limits, throttling, improving horizontal and vertical scaling within the cluster.
+- Authentication will be an issue for every solution except Supabase Realtime.
+
+## Alternatives
+Queueing Solutions Considered:
+* RabbitMQ: Meets current and future needs.
+  * Well maintained JS and Python libraries.
+  * Requires additional, potentially significant integration work to bring into the k8s cluster.
+* Supabase Realtime: Lightweight and already integrated, but may not meet all future queuing needs.
+  * Well maintained JS and Python libraries.
+  * Can listen directly to db transactions.
+  * Already integrated with Supabase auth.
+* Kafka: Powerful but too heavy for our current requirements.
+  * Well maintained JS and Python libraries.
+  * Requires additional, potentially significant integration work to bring into the k8s cluster.
+* Celery: Good option for Python-based systems, but introduces additional dependencies.
+  * Python library well maintained. JS library not well maintained.
+* RedPanda: Accessible internally and provides a scalable solution.
+  * Well maintained JS and Python libraries as it supports the same tooling as Kafka.
+  * Zarf/UDS bundle already available.
+* Custom Python solution: Flexible but requires significant unnecessary development effort given the tools already available.
+
+## Related ADRs
+* [0003-database](0003-database.md)
+
+## References
+1. Supabase Realtime Documentation: https://supabase.com/docs/guides/realtime
+2. FastAPI Background Tasks: https://fastapi.tiangolo.com/tutorial/background-tasks/
+3. Celery Documentation: https://docs.celeryq.dev/en/stable/
+4. Kafka Documentation: https://kafka.apache.org/
+5. RabbitMQ Documentation: https://www.rabbitmq.com/docs
+6. RedPanda: https://docs.redpanda.com/docs/
\ No newline at end of file
diff --git a/packages/api/chart/Chart.yaml b/packages/api/chart/Chart.yaml
index 9b8d17b19..744281aff 100644
--- a/packages/api/chart/Chart.yaml
+++ b/packages/api/chart/Chart.yaml
@@ -16,7 +16,7 @@ type: application
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
 # x-release-please-start-version
-version: 0.9.2
+version: 0.10.0
 # x-release-please-end
 
 # This is the version number of the application being deployed. This version number should be
diff --git a/packages/api/chart/values.yaml b/packages/api/chart/values.yaml
index ea69fdf6e..d96db89fd 100644
--- a/packages/api/chart/values.yaml
+++ b/packages/api/chart/values.yaml
@@ -1,6 +1,6 @@
 image:
   # x-release-please-start-version
-  lfaiAPITag: 0.9.2
+  lfaiAPITag: 0.10.0
   # x-release-please-end
   kiwigridTag: 1.23.3
 
diff --git a/packages/api/supabase/migrations/20240729193626_v0.10.0_api_keys_storage_objects.sql b/packages/api/supabase/migrations/20240729193626_v0.10.0_api_keys_storage_objects.sql
new file mode 100644
index 000000000..562669c5d
--- /dev/null
+++ b/packages/api/supabase/migrations/20240729193626_v0.10.0_api_keys_storage_objects.sql
@@ -0,0 +1,11 @@
+create policy "Individuals can CRUD storage.objects via API key."
+    on storage.objects for all
+    to anon
+    using
+    (
+        exists (
+            select 1
+            from api_keys
+            where api_keys.api_key_hash = crypt(current_setting('request.headers')::json->>'x-custom-api-key', api_keys.api_key_hash)
+        )
+    );
diff --git a/packages/api/zarf.yaml b/packages/api/zarf.yaml
index 2b22a3f18..e7bb8e76f 100644
--- a/packages/api/zarf.yaml
+++ b/packages/api/zarf.yaml
@@ -1,4 +1,4 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/defenseunicorns/zarf/main/zarf.schema.json
+# yaml-language-server: $schema=https://raw.githubusercontent.com/zarf-dev/zarf/main/zarf.schema.json
 
 kind: ZarfPackageConfig
 metadata:
@@ -28,7 +28,7 @@ components:
       namespace: leapfrogai
       localPath: chart
       # x-release-please-start-version
-      version: 0.9.2
+      version: 0.10.0
       # x-release-please-end
       valuesFiles:
         - "lfai-values.yaml"
diff --git a/packages/k3d-gpu/Makefile b/packages/k3d-gpu/Makefile
index 7dfc7e5e9..4193e6d0f 100644
--- a/packages/k3d-gpu/Makefile
+++ b/packages/k3d-gpu/Makefile
@@ -1,20 +1,28 @@
 MAKEFILE_DIR := $(dir $(abspath $(lastword $(MAKEFILE_LIST))))
 
-UDS_VERSION := 0.24.1
+UDS_VERSION := 0.25.0
 LOCAL_VERSION ?= $(shell git rev-parse --short HEAD)
-
+DOCKER_FLAGS :=
+ZARF_FLAGS :=
 
 build-k3d-gpu:
 	@cd ${MAKEFILE_DIR} && \
 	docker build \
+	${DOCKER_FLAGS} \
 	--platform linux/amd64 \
 	-t ghcr.io/defenseunicorns/leapfrogai/k3d-gpu:${LOCAL_VERSION} .
 
 create-uds-gpu-cluster: build-k3d-gpu
 	@uds deploy k3d-core-slim-dev:${UDS_VERSION} \
+	${ZARF_FLAGS} \
 	--set K3D_EXTRA_ARGS="--gpus=all \
 	--image=ghcr.io/defenseunicorns/leapfrogai/k3d-gpu:${LOCAL_VERSION}" --confirm
 
+create-uds-cpu-cluster: build-k3d-gpu
+	@uds deploy k3d-core-slim-dev:${UDS_VERSION} \
+	${ZARF_FLAGS} \
+	--confirm
+
 test-uds-gpu-cluster:
 	@cd ${MAKEFILE_DIR} && \
 	uds zarf tools kubectl apply -f ./test/cuda-vector-add.yaml
@@ -23,4 +31,4 @@ test-uds-gpu-cluster:
 	@cd ${MAKEFILE_DIR} && \
 	uds zarf tools kubectl delete -f ./test/cuda-vector-add.yaml
 
-.PHONY: build-k3d-gpu create-uds-gpu-cluster test-uds-gpu-cluster
+.PHONY: build-k3d-gpu create-uds-gpu-cluster create-uds-cpu-cluster test-uds-gpu-cluster
diff --git a/packages/k3d-gpu/plugin/device-plugin-daemonset.yaml b/packages/k3d-gpu/plugin/device-plugin-daemonset.yaml
index 202280341..4f8dd882a 100644
--- a/packages/k3d-gpu/plugin/device-plugin-daemonset.yaml
+++ b/packages/k3d-gpu/plugin/device-plugin-daemonset.yaml
@@ -45,7 +45,7 @@ spec:
           - name: NVIDIA_VISIBLE_DEVICES
             value: all
           - name: NVIDIA_DRIVER_CAPABILITIES
-            value: all
+            value: compute,utility
           - name: MPS_ROOT
             value: /run/nvidia/mps
         securityContext:
diff --git a/packages/llama-cpp-python/Dockerfile b/packages/llama-cpp-python/Dockerfile
index 63d5c09aa..b7041bed9 100644
--- a/packages/llama-cpp-python/Dockerfile
+++ b/packages/llama-cpp-python/Dockerfile
@@ -7,19 +7,6 @@ ARG SDK_DEST=src/leapfrogai_sdk/build
 USER root
 WORKDIR /leapfrogai
 
-# download model
-RUN python -m pip install -U huggingface_hub[cli,hf_transfer]
-ARG REPO_ID=TheBloke/SynthIA-7B-v2.0-GGUF
-ARG FILENAME=synthia-7b-v2.0.Q4_K_M.gguf
-ARG REVISION=3f65d882253d1f15a113dabf473a7c02a004d2b5
-
-# NOTE: This is checking for a pre-downloaded model file in the local build dir before downloading the model from HuggingFace
-# TODO: Add checksum validation to verify the model in the local build-dir is the model we expect
-COPY packages/llama-cpp-python/scripts/model_download.py scripts/model_download.py
-RUN REPO_ID=${REPO_ID} FILENAME=${FILENAME} REVISION=${REVISION} python3.11 scripts/model_download.py
-RUN mv .model/*.gguf .model/model.gguf
-
-
 # create virtual environment for light-weight portability and minimal libraries
 RUN python3.11 -m venv .venv
 ENV PATH="/leapfrogai/.venv/bin:$PATH"
@@ -42,7 +29,6 @@ ENV PATH="/leapfrogai/.venv/bin:$PATH"
 WORKDIR /leapfrogai
 
 COPY --from=builder /leapfrogai/.venv/ /leapfrogai/.venv/
-COPY --from=builder /leapfrogai/.model/ /leapfrogai/.model/
 
 COPY packages/llama-cpp-python/main.py .
 COPY packages/llama-cpp-python/config.yaml .
diff --git a/packages/llama-cpp-python/README.md b/packages/llama-cpp-python/README.md
index 313649ed3..9aed7f7c7 100644
--- a/packages/llama-cpp-python/README.md
+++ b/packages/llama-cpp-python/README.md
@@ -37,6 +37,7 @@ To build and deploy just the llama-cpp-python Zarf package (from the root of the
 > Deploy a [UDS cluster](/README.md#uds) if one isn't deployed already
 
 ```shell
+pip install 'huggingface_hub[cli,hf_transfer]'  # Used to download the model weights from huggingface
 make build-llama-cpp-python LOCAL_VERSION=dev
 uds zarf package deploy packages/llama-cpp-python/zarf-package-llama-cpp-python-*-dev.tar.zst --confirm
 ```
diff --git a/packages/llama-cpp-python/chart/Chart.yaml b/packages/llama-cpp-python/chart/Chart.yaml
index c89277682..0eddf27e6 100644
--- a/packages/llama-cpp-python/chart/Chart.yaml
+++ b/packages/llama-cpp-python/chart/Chart.yaml
@@ -16,7 +16,7 @@ type: application
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
 # x-release-please-start-version
-version: 0.9.2
+version: 0.10.0
 # x-release-please-end
 
 # This is the version number of the application being deployed. This version number should be
diff --git a/packages/llama-cpp-python/chart/templates/deployment.yaml b/packages/llama-cpp-python/chart/templates/deployment.yaml
index 8d014f1c7..67082c4f4 100644
--- a/packages/llama-cpp-python/chart/templates/deployment.yaml
+++ b/packages/llama-cpp-python/chart/templates/deployment.yaml
@@ -23,8 +23,38 @@ spec:
         {{- toYaml . | nindent 8 }}
       {{- end }}
       labels:
+        app: lfai-llama
         {{- include "chart.selectorLabels" . | nindent 8 }}
     spec:
+      # It's necessary to include the ###ZARF_DATA_INJECTION_MARKER### somewhere in the podspec, otherwise data injections will not occur.
+      initContainers:
+        - name: data-loader
+          image: cgr.dev/chainguard/bash:latest
+          securityContext:
+            runAsUser: 65532
+            runAsGroup: 65532
+            fsGroup: 65532
+          # This command looks for the Zarf "data injection marker" which is a timestamped file that is injected after everything else and marks the injection as complete.
+          command:
+            [
+              "sh",
+              "-c",
+              'while [ ! -f /data/.model/###ZARF_DATA_INJECTION_MARKER### ]; do echo "waiting for zarf data sync" && sleep 1; done; echo "we are done waiting!"',
+            ]
+          resources:
+            requests:
+              memory: "64Mi"
+              cpu: "200m"
+            limits:
+              memory: "128Mi"
+              cpu: "500m"
+          volumeMounts:
+            - name: leapfrogai-pv-storage
+              mountPath: /data
+      volumes:
+        - name: leapfrogai-pv-storage
+          persistentVolumeClaim:
+            claimName: lfai-llama-pv-claim
       securityContext:
         {{- toYaml .Values.podSecurityContext | nindent 8 }}
       containers:
@@ -39,6 +69,9 @@ spec:
               protocol: TCP
           resources:
             {{- toYaml .Values.resources | nindent 12 }}
+          volumeMounts:
+            - name: leapfrogai-pv-storage
+              mountPath: "/data"
       {{- with .Values.nodeSelector }}
       nodeSelector:
         {{- toYaml . | nindent 8 }}
diff --git a/packages/llama-cpp-python/chart/templates/pvc.yaml b/packages/llama-cpp-python/chart/templates/pvc.yaml
new file mode 100644
index 000000000..2b161cffc
--- /dev/null
+++ b/packages/llama-cpp-python/chart/templates/pvc.yaml
@@ -0,0 +1,14 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+    name: lfai-llama-pv-claim
+    namespace: leapfrogai
+spec:
+  {{- if .Values.persistence.storageClass }}
+  storageClassName: {{ .Values.persistence.storageClass  }}
+  {{- end }}
+  accessModes:
+    - {{ .Values.persistence.accessModes | quote }}
+  resources:
+    requests:
+      storage: {{ .Values.persistence.size | quote }}
diff --git a/packages/llama-cpp-python/chart/values.yaml b/packages/llama-cpp-python/chart/values.yaml
index 5fee08d11..990341c52 100644
--- a/packages/llama-cpp-python/chart/values.yaml
+++ b/packages/llama-cpp-python/chart/values.yaml
@@ -9,7 +9,7 @@ image:
   pullPolicy: Always
   # Overrides the image tag whose default is the chart appVersion.
   # x-release-please-start-version
-  tag: 0.9.2
+  tag: 0.10.0
   # x-release-please-end
 
 nameOverride: llama-cpp-python
@@ -54,3 +54,8 @@ nodeSelector: {}
 tolerations: []
 
 affinity: {}
+
+persistence:
+  size: 15Gi
+  accessModes: ReadWriteOnce
+  storageClass: "local-path"
diff --git a/packages/llama-cpp-python/config.yaml b/packages/llama-cpp-python/config.yaml
index 30bf38126..4b307bca6 100644
--- a/packages/llama-cpp-python/config.yaml
+++ b/packages/llama-cpp-python/config.yaml
@@ -1,5 +1,5 @@
 model:
-  source: ".model/model.gguf"
+  source: "/data/.model/model.gguf"
 max_context_length: 16384
 stop_tokens:
   - "<|im_end|>"
diff --git a/packages/llama-cpp-python/llama-cpp-python-values.yaml b/packages/llama-cpp-python/llama-cpp-python-values.yaml
index 3e3c22379..f2acd8b4b 100644
--- a/packages/llama-cpp-python/llama-cpp-python-values.yaml
+++ b/packages/llama-cpp-python/llama-cpp-python-values.yaml
@@ -1,2 +1,7 @@
 image:
   tag: "###ZARF_CONST_IMAGE_VERSION###"
+
+persistence:
+  size: ###ZARF_VAR_PVC_SIZE###
+  accessModes: ###ZARF_VAR_PVC_ACCESS_MODE###
+  storageClass: ###ZARF_VAR_PVC_STORAGE_CLASS###
diff --git a/packages/llama-cpp-python/main.py b/packages/llama-cpp-python/main.py
index 12f10460c..70b01cc66 100644
--- a/packages/llama-cpp-python/main.py
+++ b/packages/llama-cpp-python/main.py
@@ -15,6 +15,9 @@
 class Model:
     backend_config = BackendConfig()
 
+    if not os.path.exists(backend_config.model.source):
+        raise ValueError(f"Model path ({backend_config.model.source}) does not exist")
+
     llm = Llama(
         model_path=backend_config.model.source,
         n_ctx=backend_config.max_context_length,
diff --git a/packages/llama-cpp-python/pyproject.toml b/packages/llama-cpp-python/pyproject.toml
index 9874a09d7..c47c875f4 100644
--- a/packages/llama-cpp-python/pyproject.toml
+++ b/packages/llama-cpp-python/pyproject.toml
@@ -3,7 +3,7 @@ name = "lfai-llama-cpp-python"
 description = "A LeapfrogAI API-compatible llama-cpp-python wrapper for quantized and un-quantized model inferencing on CPU infrastructures."
 
 # x-release-please-start-version
-version = "0.9.2"
+version = "0.10.0"
 # x-release-please-end
 
 dependencies = [
diff --git a/packages/llama-cpp-python/scripts/model_download.py b/packages/llama-cpp-python/scripts/model_download.py
index 7a4188942..a5cc79e52 100644
--- a/packages/llama-cpp-python/scripts/model_download.py
+++ b/packages/llama-cpp-python/scripts/model_download.py
@@ -1,17 +1,34 @@
 import os
+import hashlib
+import urllib.request
 
-from huggingface_hub import hf_hub_download
+REPO_ID = os.environ.get("REPO_ID", "")
+FILENAME = os.environ.get("FILENAME", "")
+REVISION = os.environ.get("REVISION", "main")
+CHECKSUM = os.environ.get("SHA256_CHECKSUM", "")
+OUTPUT_FILE = os.environ.get("OUTPUT_FILE", ".model/model.gguf")
 
-REPO_ID = os.environ.get("REPO_ID", "TheBloke/SynthIA-7B-v2.0-GGUF")
-FILENAME = os.environ.get("FILENAME", "synthia-7b-v2.0.Q4_K_M.gguf")
-REVISION = os.environ.get("REVISION", "3f65d882253d1f15a113dabf473a7c02a004d2b5")
 
-os.environ["HF_HUB_ENABLE_HF_TRANSFER"] = "1"
+def download_model():
+    # Check if the model is already downloaded.
+    if os.path.exists(OUTPUT_FILE) and CHECKSUM != "":
+        if hashlib.sha256(open(OUTPUT_FILE, "rb").read()).hexdigest() == CHECKSUM:
+            print("Model already downloaded.")
+            return
 
-hf_hub_download(
-    repo_id=REPO_ID,
-    filename=FILENAME,
-    local_dir=".model",
-    local_dir_use_symlinks=False,
-    revision=REVISION,
-)
+    # Validate that require environment variables are provided
+    if REPO_ID == "" or FILENAME == "":
+        print("Please provide REPO_ID and FILENAME environment variables.")
+        return
+
+    # Download the model!
+    print("Downloading model... This may take a while.")
+    if not os.path.exists(".model"):
+        os.mkdir(".model")
+    urllib.request.urlretrieve(
+        f"https://huggingface.co/{REPO_ID}/resolve/{REVISION}/{FILENAME}", OUTPUT_FILE
+    )
+
+
+if __name__ == "__main__":
+    download_model()
diff --git a/packages/llama-cpp-python/zarf.yaml b/packages/llama-cpp-python/zarf.yaml
index 8f0510eb5..0bdc4fe72 100644
--- a/packages/llama-cpp-python/zarf.yaml
+++ b/packages/llama-cpp-python/zarf.yaml
@@ -1,4 +1,4 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/defenseunicorns/zarf/main/zarf.schema.json
+# yaml-language-server: $schema=https://raw.githubusercontent.com/zarf-dev/zarf/main/zarf.schema.json
 
 kind: ZarfPackageConfig
 metadata:
@@ -11,6 +11,19 @@ constants:
   - name: IMAGE_VERSION
     value: "###ZARF_PKG_TMPL_IMAGE_VERSION###"
 
+variables:
+  - name: PVC_SIZE
+    description: Size of the PVC used for model storage.
+    default: "15Gi"
+    pattern: "^[0-9]+[a-zA-Z]+$"
+  - name: PVC_ACCESS_MODE
+    description: Access mode of the PVC used for model storage.
+    default: "ReadWriteOnce"
+    pattern: "^(ReadWriteOnce|ReadOnlyMany|ReadWriteMany)$"
+  - name: PVC_STORAGE_CLASS
+    description: Storage class of the PVC used for model storage.
+    default: "local-path"
+
 components:
   - name: llama-cpp-python-model
     required: true
@@ -20,9 +33,28 @@ components:
         localPath: chart
         releaseName: llama-cpp-python-model
         # x-release-please-start-version
-        version: 0.9.2
+        version: 0.10.0
         # x-release-please-end
         valuesFiles:
           - "llama-cpp-python-values.yaml"
     images:
       - ghcr.io/defenseunicorns/leapfrogai/llama-cpp-python:###ZARF_PKG_TMPL_IMAGE_VERSION###
+      - cgr.dev/chainguard/bash:latest
+    dataInjections:
+      - source: .model/
+        target:
+          namespace: leapfrogai
+          selector: app=lfai-llama
+          container: data-loader
+          path: /data/.model
+        compress: true
+    actions:
+      onCreate:
+        before:
+          # NOTE: This assumes python is installed and in $PATH and 'huggingface_hub[cli,hf_transfer]' has been installed
+          - cmd: python scripts/model_download.py
+            env:
+              - REPO_ID=TheBloke/SynthIA-7B-v2.0-GGUF
+              - FILENAME=synthia-7b-v2.0.Q4_K_M.gguf
+              - REVISION=3f65d882253d1f15a113dabf473a7c02a004d2b5
+              - SHA256_CHECKSUM=5d6369d456446c40a9fd149525747d8dc494196686861c43b00f9230a166ba82
diff --git a/packages/repeater/chart/Chart.yaml b/packages/repeater/chart/Chart.yaml
index 2b62387ee..906274ace 100644
--- a/packages/repeater/chart/Chart.yaml
+++ b/packages/repeater/chart/Chart.yaml
@@ -16,7 +16,7 @@ type: application
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
 # x-release-please-start-version
-version: 0.9.2
+version: 0.10.0
 # x-release-please-end
 
 # This is the version number of the application being deployed. This version number should be
diff --git a/packages/repeater/chart/values.yaml b/packages/repeater/chart/values.yaml
index c1cb3827f..84db4f3df 100644
--- a/packages/repeater/chart/values.yaml
+++ b/packages/repeater/chart/values.yaml
@@ -9,7 +9,7 @@ image:
   pullPolicy: Always
   # Overrides the image tag whose default is the chart appVersion.
   # x-release-please-start-version
-  tag: 0.9.2
+  tag: 0.10.0
   # x-release-please-end
 
 nameOverride: repeater
diff --git a/packages/repeater/pyproject.toml b/packages/repeater/pyproject.toml
index b77c92cb6..c7a562f97 100644
--- a/packages/repeater/pyproject.toml
+++ b/packages/repeater/pyproject.toml
@@ -3,7 +3,7 @@ name = "lfai-repeater"
 description = "A LeapfrogAI API-compatible pseudo-model for testing the API."
 
 # x-release-please-start-version
-version = "0.9.2"
+version = "0.10.0"
 # x-release-please-end
 
 dependencies = [
diff --git a/packages/repeater/zarf-config.yaml b/packages/repeater/zarf-config.yaml
index 7d41ed468..6b074b8c9 100644
--- a/packages/repeater/zarf-config.yaml
+++ b/packages/repeater/zarf-config.yaml
@@ -3,7 +3,7 @@ package:
     set:
       image_repository: "ghcr.io/defenseunicorns/leapfrogai/repeater"
       # x-release-please-start-version
-      image_version: 0.9.2
+      image_version: 0.10.0
       # x-release-please-end
       name: repeater
     max_package_size: "1000000000"
diff --git a/packages/repeater/zarf.yaml b/packages/repeater/zarf.yaml
index e17de5bf7..84373d464 100644
--- a/packages/repeater/zarf.yaml
+++ b/packages/repeater/zarf.yaml
@@ -18,7 +18,7 @@ components:
         localPath: chart
         releaseName: repeater
         # x-release-please-start-version
-        version: 0.9.2
+        version: 0.10.0
         # x-release-please-end
         valuesFiles:
           - "repeater-values.yaml"
diff --git a/packages/supabase/bitnami-values.yaml b/packages/supabase/bitnami-values.yaml
index 3f9dceb8b..2ae319903 100644
--- a/packages/supabase/bitnami-values.yaml
+++ b/packages/supabase/bitnami-values.yaml
@@ -75,6 +75,22 @@ realtime:
   resourcesPreset: "none"
   podLabels:
     sidecar.istio.io/inject: "false"
+  extraEnvVars:
+    - name: APP_NAME
+      value: "supabase-realtime"
+    - name: DB_AFTER_CONNECT_QUERY
+      value: "DO $body$ BEGIN CREATE SCHEMA IF NOT EXISTS _realtime; ALTER SCHEMA _realtime OWNER TO postgres; SET search_path TO _realtime; END $body$;"
+    - name: DB_ENC_KEY
+      valueFrom:
+        secretKeyRef:
+          name: supabase-realtime-extra
+          key: dbEncKey
+    - name: DNS_NODES
+      value: "supabase-realtime"
+  args:
+    - -ec
+    - |
+      realtime eval Realtime.Release.migrate && realtime eval 'Realtime.Release.seeds(Realtime.Repo)' && realtime start
 
 rest:
   enabled: ###ZARF_VAR_ENABLE_REST###
@@ -107,7 +123,7 @@ volumePermissions:
   resourcesPreset: "none"
 
 psqlImage:
-  tag: 15.1.1-debian-12-r69
+  tag: 15.6.1-debian-12-r2
 
 kong:
   enabled: ###ZARF_VAR_ENABLE_KONG###
@@ -167,12 +183,16 @@ kong:
       timeoutSeconds: 40
     readinessProbe:
       timeoutSeconds: 40
+  service:
+    type: ClusterIP
 postgresql:
   enabled: ###ZARF_VAR_ENABLE_POSTGRES###
   image:
-    tag: 15.1.1-debian-12-r69
+    tag: 15.6.1-debian-12-r2
     debug: true
   primary:
+    extendedConfiguration: |
+      wal_level = logical
     resourcesPreset: "none"
     podLabels:
       sidecar.istio.io/inject: "false"
@@ -182,4 +202,4 @@ postgresql:
   ## @param postgresql.postgresqlSharedPreloadLibraries Set the shared_preload_libraries parameter in postgresql.conf
   ## Setting an empty value in order to force the default extensions of supabase-postgres
   ##
-  postgresqlSharedPreloadLibraries: "pg_stat_statements, pg_stat_monitor, pgaudit, plpgsql, plpgsql_check, pg_cron, pg_net, pgsodium, timescaledb, auto_explain, vector"
+  postgresqlSharedPreloadLibraries: "pg_stat_statements, pg_stat_monitor, pgaudit, plpgsql, plpgsql_check, pg_cron, pg_net, pgsodium, timescaledb, auto_explain, vector"
\ No newline at end of file
diff --git a/packages/supabase/chart/templates/suapbase-realtime-secret.yaml b/packages/supabase/chart/templates/suapbase-realtime-secret.yaml
new file mode 100644
index 000000000..a762df845
--- /dev/null
+++ b/packages/supabase/chart/templates/suapbase-realtime-secret.yaml
@@ -0,0 +1,18 @@
+{{- $dbEncKey := randAlphaNum 16 }} # This needs to be exactly 16 characters
+{{- $existingSecret := (lookup "v1" "Secret" .Release.Namespace "supabase-realtime-extra") }}
+apiVersion: v1
+kind: Secret
+metadata:
+ name: supabase-realtime-extra
+ namespace: {{ .Release.Namespace }}
+ {{- if $existingSecret }}
+ annotations:
+   "helm.sh/resource-policy": keep
+ {{- end }}
+type: Opaque
+data:
+ {{- if $existingSecret }}
+ dbEncKey: {{ $existingSecret.data.dbEncKey }}
+ {{- else }}
+ dbEncKey: {{ $dbEncKey | b64enc | quote }}
+ {{- end }}
\ No newline at end of file
diff --git a/packages/supabase/manifests/declarative-conf-configmap.yaml b/packages/supabase/manifests/declarative-conf-configmap.yaml
index 8a4620f2c..344ec2f48 100644
--- a/packages/supabase/manifests/declarative-conf-configmap.yaml
+++ b/packages/supabase/manifests/declarative-conf-configmap.yaml
@@ -95,11 +95,31 @@ data:
                 - admin
                 - anon
 
-      - name: realtime-v1
-        _comment: "Realtime: /realtime/v1/* -> ws://supabase-realtime:80/socket/*"
-        url: http://supabase-realtime:80/socket
+      - name: realtime-v1-ws
+        _comment: "Realtime: /realtime/v1/* -> ws://supabase-realtime:80/socket/websocket/*"
+        url: http://supabase-realtime:80/socket/websocket
         routes:
-          - name: realtime-v1-all
+          - name: realtime-v1-ws
+            strip_path: true
+            paths:
+              - /realtime/v1/websocket
+        plugins:
+          - name: cors
+          - name: key-auth
+            config:
+              hide_credentials: false
+          - name: acl
+            config:
+              hide_groups_header: true
+              allow:
+                - admin
+                - anon
+
+      - name: realtime-v1-api
+        _comment: "Realtime: /realtime/v1/* -> http://supabase-realtime:80/*"
+        url: http://supabase-realtime:80
+        routes:
+          - name: realtime-v1-api
             strip_path: true
             paths:
               - /realtime/v1/
diff --git a/packages/supabase/migrations/20240808093300_v0.10.0_realtime_tenant.sql b/packages/supabase/migrations/20240808093300_v0.10.0_realtime_tenant.sql
new file mode 100644
index 000000000..27f58c83d
--- /dev/null
+++ b/packages/supabase/migrations/20240808093300_v0.10.0_realtime_tenant.sql
@@ -0,0 +1,22 @@
+-- Disable the foreign key constraint
+ALTER TABLE _realtime.extensions
+DROP CONSTRAINT extensions_tenant_external_id_fkey;
+
+-- Update the external_id and name for the realtime tenant
+UPDATE _realtime.tenants
+SET external_id = 'supabase-realtime',
+    name = 'supabase-realtime'
+WHERE external_id = 'realtime-dev'
+  AND name = 'realtime-dev';
+
+-- Update the tenant_external_id for the realtime extension
+UPDATE _realtime.extensions
+SET tenant_external_id = 'supabase-realtime'
+WHERE tenant_external_id = 'realtime-dev';
+
+-- Re-enable the foreign key constraint
+ALTER TABLE _realtime.extensions
+ADD CONSTRAINT extensions_tenant_external_id_fkey
+FOREIGN KEY (tenant_external_id)
+REFERENCES _realtime.tenants(external_id)
+ON DELETE CASCADE;
\ No newline at end of file
diff --git a/packages/supabase/zarf.yaml b/packages/supabase/zarf.yaml
index 4ad6c0fde..094219fcd 100644
--- a/packages/supabase/zarf.yaml
+++ b/packages/supabase/zarf.yaml
@@ -1,4 +1,4 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/defenseunicorns/zarf/main/zarf.schema.json
+# yaml-language-server: $schema=https://raw.githubusercontent.com/zarf-dev/zarf/main/zarf.schema.json
 kind: ZarfPackageConfig
 metadata:
   name: supabase
@@ -66,7 +66,7 @@ components:
         namespace: leapfrogai
         url: oci://registry-1.docker.io/bitnamicharts/supabase
         releaseName: supabase-bootstrap
-        version: 4.0.5
+        version: 5.3.3
         valuesFiles:
           - "bitnami-values.yaml"
           - "bitnami-values-bootstrap.yaml"
@@ -81,21 +81,21 @@ components:
         namespace: leapfrogai
         url: oci://registry-1.docker.io/bitnamicharts/supabase
         releaseName: supabase
-        version: 4.0.5
+        version: 5.3.3
         valuesFiles:
           - "bitnami-values.yaml"
     images:
-      - docker.io/bitnami/gotrue:2.150.1-debian-12-r1
-      - docker.io/bitnami/jwt-cli:6.0.0-debian-12-r20
-      - docker.io/bitnami/kubectl:1.30.0-debian-12-r0
-      - docker.io/bitnami/os-shell:12-debian-12-r19
-      - docker.io/bitnami/postgrest:11.2.2-debian-12-r15
-      - docker.io/bitnami/supabase-postgres:15.1.1-debian-12-r69
-      - docker.io/bitnami/supabase-postgres-meta:0.80.0-debian-12-r3
-      - docker.io/bitnami/supabase-realtime:2.28.32-debian-12-r2
-      - docker.io/bitnami/supabase-storage:0.48.4-debian-12-r2
-      - docker.io/bitnami/supabase-studio:0.24.3-debian-12-r3
-      - docker.io/bitnami/kong:3.6.1-debian-12-r18
+      - docker.io/bitnami/gotrue:2.155.6-debian-12-r3
+      - docker.io/bitnami/jwt-cli:6.1.0-debian-12-r5
+      - docker.io/bitnami/kubectl:1.30.3-debian-12-r4
+      - docker.io/bitnami/os-shell:12-debian-12-r27
+      - docker.io/bitnami/postgrest:11.2.2-debian-12-r31
+      - docker.io/bitnami/supabase-postgres:15.6.1-debian-12-r2
+      - docker.io/bitnami/supabase-postgres-meta:0.83.2-debian-12-r3
+      - docker.io/bitnami/supabase-realtime:2.30.14-debian-12-r2
+      - docker.io/bitnami/supabase-storage:1.8.2-debian-12-r2
+      - docker.io/bitnami/supabase-studio:1.24.5-debian-12-r4
+      - docker.io/bitnami/kong:3.7.1-debian-12-r5
   - name: supabase-post-process
     description: "Perform necessary post processing here"
     required: true
diff --git a/packages/text-embeddings/Dockerfile b/packages/text-embeddings/Dockerfile
index 9c1e76f5b..9af7c5537 100644
--- a/packages/text-embeddings/Dockerfile
+++ b/packages/text-embeddings/Dockerfile
@@ -14,7 +14,6 @@ ENV PATH="/leapfrogai/.venv/bin:$PATH"
 # copy and install all python dependencies
 # NOTE: We are copying the leapfrog whl to this filename because installing 'optional extras' from
 #       a wheel requires the absolute path to the wheel file (instead of a wildcard whl)
-
 COPY --from=sdk /leapfrogai/${SDK_DEST} ${SDK_DEST}
 COPY packages/text-embeddings packages/text-embeddings
 
@@ -22,14 +21,6 @@ RUN rm -f packages/text-embeddings/build/*.whl
 RUN python -m pip wheel packages/text-embeddings -w packages/text-embeddings/build --find-links=${SDK_DEST}
 RUN pip install packages/text-embeddings/build/lfai_text_embeddings*.whl --no-index --find-links=packages/text-embeddings/build/
 
-
-# download model
-RUN python -m pip install -U huggingface_hub[cli,hf_transfer]
-ARG REPO_ID="hkunlp/instructor-xl"
-ARG REVISION="ce48b213095e647a6c3536364b9fa00daf57f436"
-COPY packages/text-embeddings/scripts/model_download.py scripts/model_download.py
-RUN REPO_ID=${REPO_ID} REVISION=${REVISION} python scripts/model_download.py
-
 # hardened and slim python image
 FROM ghcr.io/defenseunicorns/leapfrogai/python:3.11
 
@@ -38,7 +29,6 @@ ENV PATH="/leapfrogai/.venv/bin:$PATH"
 WORKDIR /leapfrogai
 
 COPY --from=builder /leapfrogai/.venv/ /leapfrogai/.venv/
-COPY --from=builder /leapfrogai/.model/ /leapfrogai/.model/
 
 COPY packages/text-embeddings/main.py .
 
diff --git a/packages/text-embeddings/README.md b/packages/text-embeddings/README.md
index 33482867d..09bef42b4 100644
--- a/packages/text-embeddings/README.md
+++ b/packages/text-embeddings/README.md
@@ -14,6 +14,7 @@ To build and deploy just the text-embeddings Zarf package (from the root of the
 > Deploy a [UDS cluster](/README.md#uds) if one isn't deployed already
 
 ```shell
+pip install 'huggingface_hub[cli,hf_transfer]'  # Used to download the model weights from huggingface
 make build-text-embeddings LOCAL_VERSION=dev
 uds zarf package deploy packages/text-embeddings/zarf-package-text-embeddings-*-dev.tar.zst --confirm
 ```
diff --git a/packages/text-embeddings/chart/Chart.yaml b/packages/text-embeddings/chart/Chart.yaml
index c89277682..0eddf27e6 100644
--- a/packages/text-embeddings/chart/Chart.yaml
+++ b/packages/text-embeddings/chart/Chart.yaml
@@ -16,7 +16,7 @@ type: application
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
 # x-release-please-start-version
-version: 0.9.2
+version: 0.10.0
 # x-release-please-end
 
 # This is the version number of the application being deployed. This version number should be
diff --git a/packages/text-embeddings/chart/templates/deployment.yaml b/packages/text-embeddings/chart/templates/deployment.yaml
index 8d014f1c7..77d7d5e0b 100644
--- a/packages/text-embeddings/chart/templates/deployment.yaml
+++ b/packages/text-embeddings/chart/templates/deployment.yaml
@@ -23,8 +23,43 @@ spec:
         {{- toYaml . | nindent 8 }}
       {{- end }}
       labels:
+        app: lfai-text-embeddings
         {{- include "chart.selectorLabels" . | nindent 8 }}
     spec:
+      {{- if gt (index .Values.resources.limits "nvidia.com/gpu") 0.0 }}
+      runtimeClassName: nvidia
+      {{- else if .Values.gpu.runtimeClassName }}
+      runtimeClassName: {{ .Values.gpu.runtimeClassName }}
+      {{- end }}
+      # It's necessary to include the ###ZARF_DATA_INJECTION_MARKER### somewhere in the podspec, otherwise data injections will not occur.
+      initContainers:
+        - name: data-loader
+          image: cgr.dev/chainguard/bash:latest
+          securityContext:
+            runAsUser: 65532
+            runAsGroup: 65532
+            fsGroup: 65532
+          # This command looks for the Zarf "data injection marker" which is a timestamped file that is injected after everything else and marks the injection as complete.
+          command:
+            [
+              "sh",
+              "-c",
+              'while [ ! -f /data/.model/###ZARF_DATA_INJECTION_MARKER### ]; do echo "waiting for zarf data sync" && sleep 1; done; echo "we are done waiting!"',
+            ]
+          resources:
+            requests:
+              memory: "64Mi"
+              cpu: "200m"
+            limits:
+              memory: "128Mi"
+              cpu: "500m"
+          volumeMounts:
+            - name: leapfrogai-pv-storage
+              mountPath: /data
+      volumes:
+        - name: leapfrogai-pv-storage
+          persistentVolumeClaim:
+            claimName: lfai-text-embeddings-pv-claim
       securityContext:
         {{- toYaml .Values.podSecurityContext | nindent 8 }}
       containers:
@@ -39,6 +74,12 @@ spec:
               protocol: TCP
           resources:
             {{- toYaml .Values.resources | nindent 12 }}
+          volumeMounts:
+            - name: leapfrogai-pv-storage
+              mountPath: "/data"
+          env:
+            - name: LFAI_MODEL_PATH
+              value: '/data/.model'
       {{- with .Values.nodeSelector }}
       nodeSelector:
         {{- toYaml . | nindent 8 }}
diff --git a/packages/text-embeddings/chart/templates/pvc.yaml b/packages/text-embeddings/chart/templates/pvc.yaml
new file mode 100644
index 000000000..3ce063f32
--- /dev/null
+++ b/packages/text-embeddings/chart/templates/pvc.yaml
@@ -0,0 +1,14 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+    name: lfai-text-embeddings-pv-claim
+    namespace: leapfrogai
+spec:
+  {{- if .Values.persistence.storageClass }}
+  storageClassName: {{ .Values.persistence.storageClass  }}
+  {{- end }}
+  accessModes:
+    - {{ .Values.persistence.accessModes | quote }}
+  resources:
+    requests:
+      storage: {{ .Values.persistence.size | quote }}
diff --git a/packages/text-embeddings/chart/values.yaml b/packages/text-embeddings/chart/values.yaml
index 259f038ef..74da9c8b4 100644
--- a/packages/text-embeddings/chart/values.yaml
+++ b/packages/text-embeddings/chart/values.yaml
@@ -9,7 +9,7 @@ image:
   pullPolicy: Always
   # Overrides the image tag whose default is the chart appVersion.
   # x-release-please-start-version
-  tag: 0.9.2
+  tag: 0.10.0
   # x-release-please-end
 
 nameOverride: text-embeddings
@@ -53,3 +53,8 @@ nodeSelector: {}
 tolerations: []
 
 affinity: {}
+
+persistence:
+  size: 15Gi
+  accessModes: ReadWriteOnce
+  storageClass: "local-path"
diff --git a/packages/text-embeddings/embedding-values.yaml b/packages/text-embeddings/embedding-values.yaml
index 04a1455ff..864fc0a73 100644
--- a/packages/text-embeddings/embedding-values.yaml
+++ b/packages/text-embeddings/embedding-values.yaml
@@ -1,6 +1,14 @@
 image:
   tag: "###ZARF_CONST_IMAGE_VERSION###"
 
+gpu:
+  runtimeClassName: "###ZARF_VAR_GPU_CLASS_NAME###"
+
 resources:
   limits:
-    nvidia.com/gpu: "###ZARF_VAR_GPU_LIMIT###"
+    nvidia.com/gpu: ###ZARF_VAR_GPU_LIMIT###
+
+persistence:
+  size: ###ZARF_VAR_PVC_SIZE###
+  accessModes: ###ZARF_VAR_PVC_ACCESS_MODE###
+  storageClass: ###ZARF_VAR_PVC_STORAGE_CLASS###
diff --git a/packages/text-embeddings/main.py b/packages/text-embeddings/main.py
index 6af2d6a72..0ad8ce824 100644
--- a/packages/text-embeddings/main.py
+++ b/packages/text-embeddings/main.py
@@ -1,5 +1,6 @@
 import asyncio
 import logging
+import os
 
 from InstructorEmbedding import INSTRUCTOR
 from leapfrogai_sdk import (
@@ -10,7 +11,8 @@
     serve,
 )
 
-model = INSTRUCTOR("./.model")
+model_dir = os.environ.get("LFAI_MODEL_PATH", ".model")
+model = INSTRUCTOR(model_dir)
 
 
 class InstructorEmbedding:
diff --git a/packages/text-embeddings/pyproject.toml b/packages/text-embeddings/pyproject.toml
index 23666dcf4..574f2f1d5 100644
--- a/packages/text-embeddings/pyproject.toml
+++ b/packages/text-embeddings/pyproject.toml
@@ -3,12 +3,12 @@ name = "lfai-text-embeddings"
 description = "A LeapfrogAI API-compatible embeddings library wrapper for text-based embedding generation."
 
 # x-release-please-start-version
-version = "0.9.2"
+version = "0.10.0"
 # x-release-please-end
 
 dependencies = [
     "InstructorEmbedding >= 1.0.1",
-    "torch == 2.1.2",
+    "torch == 2.2.0",
     "numpy == 1.26.3",
     "tqdm == 4.66.3",
     "sentence-transformers == 2.2.2",
diff --git a/packages/text-embeddings/zarf.yaml b/packages/text-embeddings/zarf.yaml
index d3bec755c..36fa59c6e 100644
--- a/packages/text-embeddings/zarf.yaml
+++ b/packages/text-embeddings/zarf.yaml
@@ -1,4 +1,4 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/defenseunicorns/zarf/main/zarf.schema.json
+# yaml-language-server: $schema=https://raw.githubusercontent.com/zarf-dev/zarf/main/zarf.schema.json
 
 kind: ZarfPackageConfig
 metadata:
@@ -16,6 +16,21 @@ variables:
     description: The GPU limit for the model inferencing.
     default: "0"
     pattern: "^[0-9]+$"
+  - name: GPU_CLASS_NAME
+    description: The GPU class name for the model inferencing. Leave blank for CPU-only.
+    default: ""
+    pattern: "^(nvidia)?$"
+  - name: PVC_SIZE
+    description: Size of the PVC used for model storage.
+    default: "15Gi"
+    pattern: "^[0-9]+[a-zA-Z]+$"
+  - name: PVC_ACCESS_MODE
+    description: Access mode of the PVC used for model storage.
+    default: "ReadWriteOnce"
+    pattern: "^(ReadWriteOnce|ReadOnlyMany|ReadWriteMany)$"
+  - name: PVC_STORAGE_CLASS
+    description: Storage class of the PVC used for model storage.
+    default: "local-path"
 
 components:
   - name: text-embeddings-model
@@ -26,9 +41,26 @@ components:
         localPath: chart
         releaseName: text-embeddings-model
         # x-release-please-start-version
-        version: 0.9.2
+        version: 0.10.0
         # x-release-please-end
         valuesFiles:
           - "embedding-values.yaml"
     images:
       - ghcr.io/defenseunicorns/leapfrogai/text-embeddings:###ZARF_PKG_TMPL_IMAGE_VERSION###
+      - cgr.dev/chainguard/bash:latest
+    dataInjections:
+      - source: .model/
+        target:
+          namespace: leapfrogai
+          selector: app=lfai-text-embeddings
+          container: data-loader
+          path: /data/.model
+        compress: true
+    actions:
+      onCreate:
+        before:
+          # NOTE: This assumes python is installed and in $PATH and 'huggingface_hub[cli,hf_transfer]' has been installed
+          - cmd: python scripts/model_download.py
+            env:
+              - REPO_ID=hkunlp/instructor-xl
+              - REVISION=ce48b213095e647a6c3536364b9fa00daf57f436
diff --git a/packages/ui/chart/Chart.yaml b/packages/ui/chart/Chart.yaml
index 0ae233177..1bfbfbdfb 100644
--- a/packages/ui/chart/Chart.yaml
+++ b/packages/ui/chart/Chart.yaml
@@ -16,7 +16,7 @@ type: application
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
 # x-release-please-start-version
-version: 0.9.2
+version: 0.10.0
 # x-release-please-end
 
 # This is the version number of the application being deployed. This version number should be
diff --git a/packages/ui/chart/templates/ui/deployment.yaml b/packages/ui/chart/templates/ui/deployment.yaml
index 5fca93f30..8015d2345 100644
--- a/packages/ui/chart/templates/ui/deployment.yaml
+++ b/packages/ui/chart/templates/ui/deployment.yaml
@@ -48,6 +48,18 @@ spec:
               value: '###ZARF_VAR_DISABLE_KEYCLOAK###'
             - name: PUBLIC_MESSAGE_LENGTH_LIMIT
               value: '###ZARF_VAR_MESSAGE_LENGTH_LIMIT###'
+            - name: SUPABASE_AUTH_EXTERNAL_KEYCLOAK_URL
+              value: "https://sso.{{ .Values.package.domain }}/realms/uds"
+            - name: SUPABASE_AUTH_KEYCLOAK_CLIENT_ID
+              valueFrom:
+                secretKeyRef:
+                  name: sso-client-uds-supabase
+                  key: clientId
+            - name: SUPABASE_AUTH_KEYCLOAK_SECRET
+              valueFrom:
+                secretKeyRef:
+                  name: sso-client-uds-supabase
+                  key: secret
           resources:
             requests:
               memory: '0'
diff --git a/packages/ui/zarf.yaml b/packages/ui/zarf.yaml
index 47ecc0281..83a233f1f 100644
--- a/packages/ui/zarf.yaml
+++ b/packages/ui/zarf.yaml
@@ -69,7 +69,7 @@ components:
         valuesFiles:
           - 'chart/ui-values.yaml'
         # x-release-please-start-version
-        version: 0.9.2
+        version: 0.10.0
         # x-release-please-end
     images:
       - ghcr.io/defenseunicorns/leapfrogai/leapfrogai-ui:###ZARF_PKG_TMPL_IMAGE_VERSION###
diff --git a/packages/vllm/Dockerfile b/packages/vllm/Dockerfile
index b3d3028e8..859582c0e 100755
--- a/packages/vllm/Dockerfile
+++ b/packages/vllm/Dockerfile
@@ -10,7 +10,7 @@ ARG HF_HUB_ENABLE_HF_TRANSFER="1"
 ARG REPO_ID="TheBloke/Synthia-7B-v2.0-GPTQ"
 ARG REVISION="gptq-4bit-32g-actorder_True"
 ARG QUANTIZATION="gptq"
-ARG MODEL_SOURCE=".model/"
+ARG MODEL_SOURCE="/data/.model/"
 ARG MAX_CONTEXT_LENGTH=32768
 ARG STOP_TOKENS='["</s>","<|endoftext|>","<|im_end|>"]'
 ARG PROMPT_FORMAT_CHAT_SYSTEM="SYSTEM: {}\n"
@@ -67,7 +67,7 @@ ARG HF_HUB_ENABLE_HF_TRANSFER="1"
 ARG REPO_ID="TheBloke/Synthia-7B-v2.0-GPTQ"
 ARG REVISION="gptq-4bit-32g-actorder_True"
 ARG QUANTIZATION="gptq"
-ARG MODEL_SOURCE=".model/"
+ARG MODEL_SOURCE="/data/.model/"
 ARG MAX_CONTEXT_LENGTH=32768
 ARG STOP_TOKENS='["</s>","<|endoftext|>","<|im_end|>"]'
 ARG PROMPT_FORMAT_CHAT_SYSTEM="SYSTEM: {}\n"
@@ -121,9 +121,6 @@ ENV LAI_PROMPT_FORMAT_CHAT_USER=${PROMPT_FORMAT_CHAT_USER}
 ENV LAI_PROMPT_FORMAT_DEFAULTS_TOP_P=${PROMPT_FORMAT_DEFAULTS_TOP_P}
 ENV LAI_PROMPT_FORMAT_DEFAULTS_TOP_K=${PROMPT_FORMAT_DEFAULTS_TOP_K}
 
-RUN pip install -U huggingface_hub[cli,hf_transfer]
-RUN python3 packages/vllm/src/model_download.py
-
 EXPOSE 50051:50051
 
 ENTRYPOINT ["python", "-m", "leapfrogai_sdk.cli", "--app-dir=packages/vllm/src/", "main:Model"]
diff --git a/packages/vllm/README.md b/packages/vllm/README.md
index 59d705f48..eac93f3ef 100644
--- a/packages/vllm/README.md
+++ b/packages/vllm/README.md
@@ -38,6 +38,7 @@ To build and deploy just the VLLM Zarf package (from the root of the repository)
 > Deploy a [UDS cluster](/README.md#uds) if one isn't deployed already
 
 ```shell
+pip install 'huggingface_hub[cli,hf_transfer]'  # Used to download the model weights from huggingface
 make build-vllm LOCAL_VERSION=dev
 uds zarf package deploy packages/vllm/zarf-package-vllm-*-dev.tar.zst --confirm
 ```
diff --git a/packages/vllm/chart/Chart.yaml b/packages/vllm/chart/Chart.yaml
index c89277682..0eddf27e6 100644
--- a/packages/vllm/chart/Chart.yaml
+++ b/packages/vllm/chart/Chart.yaml
@@ -16,7 +16,7 @@ type: application
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
 # x-release-please-start-version
-version: 0.9.2
+version: 0.10.0
 # x-release-please-end
 
 # This is the version number of the application being deployed. This version number should be
diff --git a/packages/vllm/chart/templates/deployment.yaml b/packages/vllm/chart/templates/deployment.yaml
index 8d014f1c7..fcd927246 100644
--- a/packages/vllm/chart/templates/deployment.yaml
+++ b/packages/vllm/chart/templates/deployment.yaml
@@ -23,8 +23,39 @@ spec:
         {{- toYaml . | nindent 8 }}
       {{- end }}
       labels:
+        app: lfai-vllm
         {{- include "chart.selectorLabels" . | nindent 8 }}
     spec:
+      runtimeClassName: {{ .Values.gpu.runtimeClassName }}
+      # It's necessary to include the ###ZARF_DATA_INJECTION_MARKER### somewhere in the podspec, otherwise data injections will not occur.
+      initContainers:
+        - name: data-loader
+          image: cgr.dev/chainguard/bash:latest
+          securityContext:
+            runAsUser: 65532
+            runAsGroup: 65532
+            fsGroup: 65532
+          # This command looks for the Zarf "data injection marker" which is a timestamped file that is injected after everything else and marks the injection as complete.
+          command:
+            [
+              "sh",
+              "-c",
+              'while [ ! -f /data/.model/###ZARF_DATA_INJECTION_MARKER### ]; do echo "waiting for zarf data sync" && sleep 1; done; echo "we are done waiting!"',
+            ]
+          resources:
+            requests:
+              memory: "64Mi"
+              cpu: "200m"
+            limits:
+              memory: "128Mi"
+              cpu: "500m"
+          volumeMounts:
+            - name: leapfrogai-pv-storage
+              mountPath: /data
+      volumes:
+        - name: leapfrogai-pv-storage
+          persistentVolumeClaim:
+            claimName: lfai-vllm-pv-claim
       securityContext:
         {{- toYaml .Values.podSecurityContext | nindent 8 }}
       containers:
@@ -39,6 +70,9 @@ spec:
               protocol: TCP
           resources:
             {{- toYaml .Values.resources | nindent 12 }}
+          volumeMounts:
+            - name: leapfrogai-pv-storage
+              mountPath: "/data"
       {{- with .Values.nodeSelector }}
       nodeSelector:
         {{- toYaml . | nindent 8 }}
diff --git a/packages/vllm/chart/templates/pvc.yaml b/packages/vllm/chart/templates/pvc.yaml
new file mode 100644
index 000000000..81c617f70
--- /dev/null
+++ b/packages/vllm/chart/templates/pvc.yaml
@@ -0,0 +1,14 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+    name: lfai-vllm-pv-claim
+    namespace: leapfrogai
+spec:
+  {{- if .Values.persistence.storageClass }}
+  storageClassName: {{ .Values.persistence.storageClass  }}
+  {{- end }}
+  accessModes:
+    - {{ .Values.persistence.accessModes | quote }}
+  resources:
+    requests:
+      storage: {{ .Values.persistence.size | quote }}
diff --git a/packages/vllm/chart/values.yaml b/packages/vllm/chart/values.yaml
index 2e4582efc..d1a125885 100644
--- a/packages/vllm/chart/values.yaml
+++ b/packages/vllm/chart/values.yaml
@@ -9,7 +9,7 @@ image:
   pullPolicy: Always
   # Overrides the image tag whose default is the chart appVersion.
   # x-release-please-start-version
-  tag: 0.9.2
+  tag: 0.10.0
   # x-release-please-end
 
 nameOverride: vllm
@@ -54,3 +54,8 @@ nodeSelector: {}
 tolerations: []
 
 affinity: {}
+
+persistence:
+  size: 15Gi
+  accessModes: ReadWriteOnce
+  storageClass: "local-path"
diff --git a/packages/vllm/pyproject.toml b/packages/vllm/pyproject.toml
index b1b43efc4..f0b347a7a 100644
--- a/packages/vllm/pyproject.toml
+++ b/packages/vllm/pyproject.toml
@@ -3,7 +3,7 @@ name = "lfai-vllm"
 description = "A LeapfrogAI API-compatible VLLM wrapper for quantized and un-quantized model inferencing across GPU infrastructures."
 
 # x-release-please-start-version
-version = "0.9.2"
+version = "0.10.0"
 # x-release-please-end
 
 dependencies = [
diff --git a/packages/vllm/vllm-values.yaml b/packages/vllm/vllm-values.yaml
index 3e3c22379..90631193e 100644
--- a/packages/vllm/vllm-values.yaml
+++ b/packages/vllm/vllm-values.yaml
@@ -1,2 +1,10 @@
 image:
   tag: "###ZARF_CONST_IMAGE_VERSION###"
+
+gpu:
+  runtimeClassName: nvidia
+
+persistence:
+  size: ###ZARF_VAR_PVC_SIZE###
+  accessModes: ###ZARF_VAR_PVC_ACCESS_MODE###
+  storageClass: ###ZARF_VAR_PVC_STORAGE_CLASS###
diff --git a/packages/vllm/zarf.yaml b/packages/vllm/zarf.yaml
index 1de33ae5b..f69227aa9 100644
--- a/packages/vllm/zarf.yaml
+++ b/packages/vllm/zarf.yaml
@@ -1,4 +1,4 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/defenseunicorns/zarf/main/zarf.schema.json
+# yaml-language-server: $schema=https://raw.githubusercontent.com/zarf-dev/zarf/main/zarf.schema.json
 kind: ZarfPackageConfig
 metadata:
   name: vllm
@@ -10,6 +10,19 @@ constants:
   - name: IMAGE_VERSION
     value: "###ZARF_PKG_TMPL_IMAGE_VERSION###"
 
+variables:
+  - name: PVC_SIZE
+    description: Size of the PVC used for model storage.
+    default: "15Gi"
+    pattern: "^[0-9]+[a-zA-Z]+$"
+  - name: PVC_ACCESS_MODE
+    description: Access mode of the PVC used for model storage.
+    default: "ReadWriteOnce"
+    pattern: "^(ReadWriteOnce|ReadOnlyMany|ReadWriteMany)$"
+  - name: PVC_STORAGE_CLASS
+    description: Storage class of the PVC used for model storage.
+    default: "local-path"
+
 components:
   - name: vllm-model
     required: true
@@ -19,9 +32,28 @@ components:
         localPath: chart
         releaseName: vllm-model
         # x-release-please-start-version
-        version: 0.9.2
+        version: 0.10.0
         # x-release-please-end
         valuesFiles:
           - "vllm-values.yaml"
     images:
       - ghcr.io/defenseunicorns/leapfrogai/vllm:###ZARF_PKG_TMPL_IMAGE_VERSION###
+      - cgr.dev/chainguard/bash:latest
+    dataInjections:
+      - source: .model/
+        target:
+          namespace: leapfrogai
+          selector: app=lfai-vllm
+          container: data-loader
+          path: /data/.model
+        compress: true
+    actions:
+      onCreate:
+        before:
+          # NOTE: This assumes python is installed and in $PATH and 'huggingface_hub[cli,hf_transfer]' has been installed
+          - cmd: python src/model_download.py
+            env:
+              - LAI_REPO_ID=TheBloke/Synthia-7B-v2.0-GPTQ
+              - LAI_REVISION=gptq-4bit-32g-actorder_True
+              - LAI_QUANTIZATION=gptq
+              - LAI_HF_HUB_ENABLE_HF_TRANSFER=1
diff --git a/packages/whisper/Dockerfile b/packages/whisper/Dockerfile
index 1686c8d3c..e7568da48 100644
--- a/packages/whisper/Dockerfile
+++ b/packages/whisper/Dockerfile
@@ -17,16 +17,10 @@ COPY packages/whisper packages/whisper
 RUN rm -f packages/whisper/build/*.whl
 RUN python -m pip wheel "packages/whisper[dev]" -w packages/whisper/build --find-links=${SDK_DEST}
 
-# download and covnert OpenAI's whisper base
-ARG MODEL_NAME=openai/whisper-base
-RUN pip install ctranslate2 transformers[torch] --no-index --find-links=packages/whisper/build/
-RUN ct2-transformers-converter --model ${MODEL_NAME} --output_dir .model --copy_files tokenizer.json --quantization float32
-RUN pip uninstall -y ctranslate2 transformers[torch]
-
 RUN pip install packages/whisper/build/lfai_whisper*.whl --no-index --find-links=packages/whisper/build/
 
 # Use hardened ffmpeg image to get compiled binaries
-FROM cgr.dev/chainguard/ffmpeg:latest as ffmpeg
+FROM cgr.dev/chainguard/ffmpeg:latest AS ffmpeg
 
 # hardened and slim python image
 FROM ghcr.io/defenseunicorns/leapfrogai/python:3.11
@@ -40,7 +34,6 @@ COPY --from=ffmpeg /usr/bin/ffprobe /usr/bin
 COPY --from=ffmpeg /usr/lib/lib* /usr/lib
 
 COPY --from=builder /leapfrogai/.venv/ /leapfrogai/.venv/
-COPY --from=builder /leapfrogai/.model/ /leapfrogai/.model/
 
 # set the path to the cuda 11.8 dependencies
 ENV LD_LIBRARY_PATH \
diff --git a/packages/whisper/README.md b/packages/whisper/README.md
index 327d5a810..ddf0b1008 100644
--- a/packages/whisper/README.md
+++ b/packages/whisper/README.md
@@ -12,6 +12,8 @@ To build and deploy just the whisper Zarf package (from the root of the reposito
 > Deploy a [UDS cluster](/README.md#uds) if one isn't deployed already
 
 ```shell
+pip install 'ctranslate2'          # Used to download and convert the model weights
+pip install 'transformers[torch]'  # Used to download and convert the model weights
 make build-whisper LOCAL_VERSION=dev
 uds zarf package deploy packages/whisper/zarf-package-whisper-*-dev.tar.zst --confirm
 ```
diff --git a/packages/whisper/chart/Chart.yaml b/packages/whisper/chart/Chart.yaml
index c89277682..0eddf27e6 100644
--- a/packages/whisper/chart/Chart.yaml
+++ b/packages/whisper/chart/Chart.yaml
@@ -16,7 +16,7 @@ type: application
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
 # x-release-please-start-version
-version: 0.9.2
+version: 0.10.0
 # x-release-please-end
 
 # This is the version number of the application being deployed. This version number should be
diff --git a/packages/whisper/chart/templates/deployment.yaml b/packages/whisper/chart/templates/deployment.yaml
index da60b2778..40139d946 100644
--- a/packages/whisper/chart/templates/deployment.yaml
+++ b/packages/whisper/chart/templates/deployment.yaml
@@ -23,8 +23,43 @@ spec:
         {{- toYaml . | nindent 8 }}
       {{- end }}
       labels:
+        app: lfai-whisper
         {{- include "chart.selectorLabels" . | nindent 8 }}
     spec:
+      {{- if gt (index .Values.resources.limits "nvidia.com/gpu") 0.0 }}
+      runtimeClassName: nvidia
+      {{- else if .Values.gpu.runtimeClassName }}
+      runtimeClassName: {{ .Values.gpu.runtimeClassName }}
+      {{- end }}
+      # It's necessary to include the ###ZARF_DATA_INJECTION_MARKER### somewhere in the podspec, otherwise data injections will not occur.
+      initContainers:
+        - name: data-loader
+          image: cgr.dev/chainguard/bash:latest
+          securityContext:
+            runAsUser: 65532
+            runAsGroup: 65532
+            fsGroup: 65532
+          # This command looks for the Zarf "data injection marker" which is a timestamped file that is injected after everything else and marks the injection as complete.
+          command:
+            [
+              "sh",
+              "-c",
+              'while [ ! -f /data/.model/###ZARF_DATA_INJECTION_MARKER### ]; do echo "waiting for zarf data sync" && sleep 1; done; echo "we are done waiting!"',
+            ]
+          resources:
+            requests:
+              memory: "64Mi"
+              cpu: "200m"
+            limits:
+              memory: "128Mi"
+              cpu: "500m"
+          volumeMounts:
+            - name: leapfrogai-pv-storage
+              mountPath: /data
+      volumes:
+        - name: leapfrogai-pv-storage
+          persistentVolumeClaim:
+            claimName: lfai-whisper-pv-claim
       securityContext:
         {{- toYaml .Values.podSecurityContext | nindent 8 }}
       containers:
@@ -38,10 +73,15 @@ spec:
               containerPort: {{ .Values.service.port }}
               protocol: TCP
           env:
+            - name: LFAI_MODEL_PATH
+              value: "/data/.model"
             - name: GPU_REQUEST
-              value: "{{ (index .Values.resources.requests "nvidia.com/gpu") | default "0" }}"
+              value: "{{ (index .Values.resources.limits "nvidia.com/gpu") | default "0" }}"
           resources:
             {{- toYaml .Values.resources | nindent 12 }}
+          volumeMounts:
+            - name: leapfrogai-pv-storage
+              mountPath: "/data"
       {{- with .Values.nodeSelector }}
       nodeSelector:
         {{- toYaml . | nindent 8 }}
diff --git a/packages/whisper/chart/templates/pvc.yaml b/packages/whisper/chart/templates/pvc.yaml
new file mode 100644
index 000000000..02e81eec0
--- /dev/null
+++ b/packages/whisper/chart/templates/pvc.yaml
@@ -0,0 +1,14 @@
+apiVersion: v1
+kind: PersistentVolumeClaim
+metadata:
+    name: lfai-whisper-pv-claim
+    namespace: leapfrogai
+spec:
+  {{- if .Values.persistence.storageClass }}
+  storageClassName: {{ .Values.persistence.storageClass  }}
+  {{- end }}
+  accessModes:
+    - {{ .Values.persistence.accessModes | quote }}
+  resources:
+    requests:
+      storage: {{ .Values.persistence.size | quote }}
diff --git a/packages/whisper/chart/values.yaml b/packages/whisper/chart/values.yaml
index f55de8e65..c08319215 100644
--- a/packages/whisper/chart/values.yaml
+++ b/packages/whisper/chart/values.yaml
@@ -9,7 +9,7 @@ image:
   pullPolicy: Always
   # Overrides the image tag whose default is the chart appVersion.
   # x-release-please-start-version
-  tag: 0.9.2
+  tag: 0.10.0
   # x-release-please-end
 
 nameOverride: whisper
@@ -53,3 +53,8 @@ nodeSelector: {}
 tolerations: []
 
 affinity: {}
+
+persistence:
+  size: 15Gi
+  accessModes: ReadWriteOnce
+  storageClass: "local-path"
diff --git a/packages/whisper/main.py b/packages/whisper/main.py
index 517b21304..467a7039a 100644
--- a/packages/whisper/main.py
+++ b/packages/whisper/main.py
@@ -9,7 +9,7 @@
 
 logger = logging.getLogger(__name__)
 
-model_path = ".model"
+model_path = os.environ.get("LFAI_MODEL_PATH", ".model")
 
 GPU_ENABLED = True if int(os.environ.get("GPU_REQUEST", 0)) > 0 else False
 
@@ -18,10 +18,32 @@ def make_transcribe_request(filename, task, language, temperature, prompt):
     device = "cuda" if GPU_ENABLED else "cpu"
     model = WhisperModel(model_path, device=device, compute_type="float32")
 
-    segments, info = model.transcribe(filename, task=task, beam_size=5)
+    # Prepare kwargs with non-None values
+    kwargs = {}
+    if task:
+        if task in ["transcribe", "translate"]:
+            kwargs["task"] = task
+        else:
+            logger.error(f"Task {task} is not supported")
+            return {"text": ""}
+    if language:
+        if language in model.supported_languages:
+            kwargs["language"] = language
+        else:
+            logger.error(f"Language {language} is not supported")
+    if temperature:
+        kwargs["temperature"] = temperature
+    if prompt:
+        kwargs["initial_prompt"] = prompt
+
+    try:
+        # Call transcribe with only non-None parameters
+        segments, info = model.transcribe(filename, beam_size=5, **kwargs)
+    except Exception as e:
+        logger.error(f"Error transcribing audio: {e}")
+        return {"text": ""}
 
     output = ""
-
     for segment in segments:
         output += segment.text
 
diff --git a/packages/whisper/pyproject.toml b/packages/whisper/pyproject.toml
index 9c8bd81a1..79123cba5 100644
--- a/packages/whisper/pyproject.toml
+++ b/packages/whisper/pyproject.toml
@@ -3,12 +3,13 @@ name = "lfai-whisper"
 description = "A LeapfrogAI API-compatible faster-whisper wrapper for audio transcription generation across CPU and GPU infrastructures."
 
 # x-release-please-start-version
-version = "0.9.2"
+version = "0.10.0"
 # x-release-please-end
 
 dependencies = [
-    "faster-whisper == 0.10.0",
+    "faster-whisper == 1.0.3",
     "leapfrogai-sdk",
+    "openai-whisper == 20231117",
 ]
 requires-python = "~=3.11"
 readme = "README.md"
diff --git a/packages/whisper/whisper-values.yaml b/packages/whisper/whisper-values.yaml
index 04a1455ff..864fc0a73 100644
--- a/packages/whisper/whisper-values.yaml
+++ b/packages/whisper/whisper-values.yaml
@@ -1,6 +1,14 @@
 image:
   tag: "###ZARF_CONST_IMAGE_VERSION###"
 
+gpu:
+  runtimeClassName: "###ZARF_VAR_GPU_CLASS_NAME###"
+
 resources:
   limits:
-    nvidia.com/gpu: "###ZARF_VAR_GPU_LIMIT###"
+    nvidia.com/gpu: ###ZARF_VAR_GPU_LIMIT###
+
+persistence:
+  size: ###ZARF_VAR_PVC_SIZE###
+  accessModes: ###ZARF_VAR_PVC_ACCESS_MODE###
+  storageClass: ###ZARF_VAR_PVC_STORAGE_CLASS###
diff --git a/packages/whisper/zarf.yaml b/packages/whisper/zarf.yaml
index 52a44efc6..a10252027 100644
--- a/packages/whisper/zarf.yaml
+++ b/packages/whisper/zarf.yaml
@@ -1,4 +1,4 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/defenseunicorns/zarf/main/zarf.schema.json
+# yaml-language-server: $schema=https://raw.githubusercontent.com/zarf-dev/zarf/main/zarf.schema.json
 
 kind: ZarfPackageConfig
 metadata:
@@ -16,6 +16,22 @@ variables:
     description: The GPU limit for the model inferencing.
     default: "0"
     pattern: "^[0-9]+$"
+  - name: GPU_CLASS_NAME
+    description: The GPU class name for the model inferencing. Leave blank for CPU-only.
+    default: ""
+    pattern: "^(nvidia)?$"
+  - name: PVC_SIZE
+    description: Size of the PVC used for model storage.
+    default: "15Gi"
+    pattern: "^[0-9]+[a-zA-Z]+$"
+  - name: PVC_ACCESS_MODE
+    description: Access mode of the PVC used for model storage.
+    default: "ReadWriteOnce"
+    pattern: "^(ReadWriteOnce|ReadOnlyMany|ReadWriteMany)$"
+  - name: PVC_STORAGE_CLASS
+    description: Storage class of the PVC used for model storage.
+    default: "local-path"
+
 
 components:
   - name: whisper-model
@@ -26,9 +42,30 @@ components:
         localPath: chart
         releaseName: whisper-model
         # x-release-please-start-version
-        version: 0.9.2
+        version: 0.10.0
         # x-release-please-end
         valuesFiles:
           - "whisper-values.yaml"
     images:
       - ghcr.io/defenseunicorns/leapfrogai/whisper:###ZARF_PKG_TMPL_IMAGE_VERSION###
+      - cgr.dev/chainguard/bash:latest
+    dataInjections:
+      - source: .model/
+        target:
+          namespace: leapfrogai
+          selector: app=lfai-whisper
+          container: data-loader
+          path: /data/.model
+        compress: true
+    actions:
+      onCreate:
+        before:
+          # NOTE: This assumes python is installed and in $PATH and 'ctranslate2' and 'transformers[torch]' has been installed
+          - cmd: |
+              ct2-transformers-converter --model ${MODEL_NAME} \
+                --output_dir .model \
+                --copy_files tokenizer.json special_tokens_map.json preprocessor_config.json normalizer.json tokenizer_config.json vocab.json \
+                --quantization float32 \
+                --force
+            env:
+              - MODEL_NAME=openai/whisper-base
diff --git a/pyproject.toml b/pyproject.toml
index f86babfda..e794fec99 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ description = "ChatGPT type capabilities for secure, local, air-gapped systems."
 authors = [{ name = "LeapfrogAI Team", email = "ai@defenseunicorns.com" }]
 
 # x-release-please-start-version
-version = "0.9.2"
+version = "0.10.0"
 # x-release-please-end
 
 readme = "README.md"
@@ -13,15 +13,31 @@ license = {file = "LICENSE"}
 dependencies = [  # Dev dependencies needed for all of lfai
     "openai",
     "pip-tools == 7.3.0",
-    "pytest",
-    "pytest-asyncio",
     "httpx",
     "ruff",
-    "python-dotenv",
-    "pytest-asyncio"
+    "python-dotenv"
 ]
 requires-python = "~=3.11"
 
+[project.optional-dependencies]
+dev = [
+    "locust",
+    "pytest-asyncio",
+    "requests",
+    "requests-toolbelt",
+    "pytest",
+    "huggingface_hub[cli,hf_transfer]"
+]
+
+dev-whisper = [
+    "ctranslate2",
+    "transformers[torch]"
+]
+
+dev-vllm = [
+    "confz"
+]
+
 [tool.pip-tools]
 generate-hashes = true
 
diff --git a/src/leapfrogai_api/Makefile b/src/leapfrogai_api/Makefile
index 470f885db..adc2a2b20 100644
--- a/src/leapfrogai_api/Makefile
+++ b/src/leapfrogai_api/Makefile
@@ -1,14 +1,19 @@
+MAKEFILE_DIR := $(dir $(abspath $(lastword $(MAKEFILE_LIST))))
 SHELL := /bin/bash
 
 
 export SUPABASE_URL=$(shell supabase status | grep -oP '(?<=API URL: ).*')
 export SUPABASE_ANON_KEY=$(shell supabase status | grep -oP '(?<=anon key: ).*')
 
-install:
+install-api:
+	@cd ${MAKEFILE_DIR} && \
 	python -m pip install ../../src/leapfrogai_sdk
+	@cd ${MAKEFILE_DIR} && \
 	python -m pip install -e .
+	python -m pip install "../../.[dev]"
 
-dev:
+dev-run-api:
+	@cd ${MAKEFILE_DIR} && \
 	python -m uvicorn main:app --port 3000 --reload --log-level info
 
 define get_jwt_token
@@ -36,4 +41,4 @@ env:
 	$(call get_jwt_token,"${SUPABASE_URL}/auth/v1/token?grant_type=password")
 
 test-integration:
-	cd ../../ && python -m pytest tests/integration/api/ -vv -s
+	@cd ${MAKEFILE_DIR} && python -m pytest ../../tests/integration/api/ -vv -s
diff --git a/src/leapfrogai_api/backend/rag/index.py b/src/leapfrogai_api/backend/rag/index.py
index 97da39a07..ce4ade400 100644
--- a/src/leapfrogai_api/backend/rag/index.py
+++ b/src/leapfrogai_api/backend/rag/index.py
@@ -3,8 +3,6 @@
 import logging
 import tempfile
 import time
-
-
 from fastapi import HTTPException, UploadFile, status
 from langchain_core.documents import Document
 from langchain_core.embeddings import Embeddings
@@ -28,6 +26,8 @@
     FilterVectorStoreFile,
 )
 
+from leapfrogai_api.data.crud_vector_content import CRUDVectorContent, Vector
+
 # Allows for overwriting type of embeddings that will be instantiated
 embeddings_type: type[Embeddings] | type[LeapfrogAIEmbeddings] | None = (
     LeapfrogAIEmbeddings
@@ -56,14 +56,12 @@ async def index_file(self, vector_store_id: str, file_id: str) -> VectorStoreFil
         if await crud_vector_store_file.get(
             filters=FilterVectorStoreFile(vector_store_id=vector_store_id, id=file_id)
         ):
-            print("File already indexed: %s", file_id)
             logging.error("File already indexed: %s", file_id)
             raise FileAlreadyIndexedError("File already indexed")
 
         if not (
             await crud_vector_store.get(filters=FilterVectorStore(id=vector_store_id))
         ):
-            print("Vector store doesn't exist: %s", vector_store_id)
             logging.error("Vector store doesn't exist: %s", vector_store_id)
             raise ValueError("Vector store not found")
 
@@ -175,7 +173,7 @@ async def create_new_vector_store(
                 ),
                 last_active_at=last_active_at,  # Set to current time
                 metadata=request.metadata,
-                name=request.name,
+                name=request.name or "",
                 object="vector_store",
                 status=VectorStoreStatus.IN_PROGRESS.value,
                 expires_after=expires_after,
@@ -200,7 +198,6 @@ async def create_new_vector_store(
                 object_=new_vector_store,
             )
         except Exception as exc:
-            logging.error(exc)
             raise HTTPException(
                 status_code=status.HTTP_400_BAD_REQUEST,
                 detail="Unable to parse vector store request",
@@ -291,29 +288,6 @@ async def file_ids_are_valid(self, file_ids: str | list[str]) -> bool:
 
         return True
 
-    async def adelete_file(self, vector_store_id: str, file_id: str) -> bool:
-        """Delete a file from the vector store.
-
-        Args:
-            vector_store_id (str): The ID of the vector store.
-            file_id (str): The ID of the file to be deleted.
-
-        Returns:
-            dict: The response from the database after deleting the file.
-
-        """
-        data, _count = (
-            await self.db.from_(self.table_name)
-            .delete()
-            .eq("vector_store_id", vector_store_id)
-            .eq("file_id", file_id)
-            .execute()
-        )
-
-        _, response = data
-
-        return bool(response)
-
     async def aadd_documents(
         self,
         documents: list[Document],
@@ -326,7 +300,8 @@ async def aadd_documents(
             documents (list[Document]): A list of Langchain Document objects to be added.
             vector_store_id (str): The ID of the vector store where the documents will be added.
             file_id (str): The ID of the file associated with the documents.
-            batch_size (int): The size of the batches that will be pushed to the db. This value defaults to 100
+            batch_size (int): The size of the batches that will
+            be pushed to the db. This value defaults to 100
                 as a balance between the memory impact of large files and performance improvements from batching.
         Returns:
             List[str]: A list of IDs assigned to the added documents.
@@ -338,22 +313,25 @@ async def aadd_documents(
             texts=[document.page_content for document in documents]
         )
 
-        vectors = []
+        vectors: list[Vector] = []
         for document, embedding in zip(documents, embeddings):
-            vector = {
-                "content": document.page_content,
-                "metadata": document.metadata,
-                "embedding": embedding,
-            }
+            vector = Vector(
+                id="",
+                vector_store_id=vector_store_id,
+                file_id=file_id,
+                content=document.page_content,
+                metadata=document.metadata,
+                embedding=embedding,
+            )
             vectors.append(vector)
 
+        crud_vector_content = CRUDVectorContent(db=self.db)
+
         for i in range(0, len(vectors), batch_size):
             batch = vectors[i : i + batch_size]
-            response = await self._aadd_vectors(
-                vector_store_id=vector_store_id, file_id=file_id, vectors=batch
-            )
-            ids.extend([item["id"] for item in response])
 
+            response = await crud_vector_content.add_vectors(batch)
+            ids.extend([item.id for item in response])
         return ids
 
     async def asimilarity_search(self, query: str, vector_store_id: str, k: int = 4):
@@ -370,20 +348,10 @@ async def asimilarity_search(self, query: str, vector_store_id: str, k: int = 4)
         """
         vector = await self.embeddings.aembed_query(query)
 
-        user_id: str = (await self.db.auth.get_user()).user.id
-
-        params = {
-            "query_embedding": vector,
-            "match_limit": k,
-            "vs_id": vector_store_id,
-            "user_id": user_id,
-        }
-
-        query_builder = self.db.rpc(self.query_name, params=params)
-
-        response = await query_builder.execute()
-
-        return response
+        crud_vector_content = CRUDVectorContent(db=self.db)
+        return await crud_vector_content.similarity_search(
+            query=vector, vector_store_id=vector_store_id, k=k
+        )
 
     async def _increment_vector_store_file_status(
         self, vector_store: VectorStore, file_response: VectorStoreFile
@@ -398,64 +366,3 @@ async def _increment_vector_store_file_status(
         elif file_response.status == VectorStoreFileStatus.CANCELLED.value:
             vector_store.file_counts.cancelled += 1
         vector_store.file_counts.total += 1
-
-    async def _adelete_vector(
-        self,
-        vector_store_id: str,
-        file_id: str,
-    ) -> dict:
-        """Delete a vector from the vector store.
-
-        Args:
-            vector_store_id (str): The ID of the vector store.
-            file_id (str): The ID of the file associated with the vector.
-
-        Returns:
-            dict: The response from the database after deleting the vector.
-
-        """
-        response = (
-            await self.db.from_(self.table_name)
-            .delete()
-            .eq("vector_store_id", vector_store_id)
-            .eq("file_id", file_id)
-            .execute()
-        )
-        return response
-
-    async def _aadd_vectors(
-        self, vector_store_id: str, file_id: str, vectors: list[dict[str, any]]
-    ) -> dict:
-        """Add multiple vectors to the vector store in a batch.
-
-        Args:
-            vector_store_id (str): The ID of the vector store.
-            file_id (str): The ID of the file associated with the vectors.
-            vectors (list[dict]): A list of dictionaries containing vector data.
-
-        Returns:
-            dict: The response from the database after inserting the vectors.
-        """
-        user_id: str = (await self.db.auth.get_user()).user.id
-
-        rows = []
-        for vector in vectors:
-            row = {
-                "user_id": user_id,
-                "vector_store_id": vector_store_id,
-                "file_id": file_id,
-                "content": vector["content"],
-                "metadata": vector["metadata"],
-                "embedding": vector["embedding"],
-            }
-            rows.append(row)
-
-        data, _count = await self.db.from_(self.table_name).insert(rows).execute()
-
-        _, response = data
-
-        for item in response:
-            if "user_id" in item:
-                del item["user_id"]
-
-        return response
diff --git a/src/leapfrogai_api/backend/rag/leapfrogai_embeddings.py b/src/leapfrogai_api/backend/rag/leapfrogai_embeddings.py
index 03b9a3dde..0731a8e74 100644
--- a/src/leapfrogai_api/backend/rag/leapfrogai_embeddings.py
+++ b/src/leapfrogai_api/backend/rag/leapfrogai_embeddings.py
@@ -4,6 +4,7 @@
 import leapfrogai_sdk as lfai
 from leapfrogai_api.utils import get_model_config
 from leapfrogai_api.backend.grpc_client import create_embeddings
+import logging
 
 
 # Partially implements the Langchain Core Embeddings interface
@@ -44,7 +45,9 @@ async def aembed_query(self, text: str) -> list[float]:
 
         return list_of_embeddings[0]
 
-    async def _get_model(self, model_name: str = os.getenv("DEFAULT_EMBEDDINGS_MODEL")):
+    async def _get_model(
+        self, model_name: str = os.getenv("DEFAULT_EMBEDDINGS_MODEL", "text-embeddings")
+    ):
         """Gets the embeddings model.
 
         Args:
@@ -58,6 +61,7 @@ async def _get_model(self, model_name: str = os.getenv("DEFAULT_EMBEDDINGS_MODEL
         """
 
         if not (model := get_model_config().get_model_backend(model=model_name)):
+            logging.error(f"Embeddings model {model_name} not found.")
             raise ValueError("Embeddings model not found.")
 
         return model
diff --git a/src/leapfrogai_api/backend/types.py b/src/leapfrogai_api/backend/types.py
index 8024f9da1..59011003c 100644
--- a/src/leapfrogai_api/backend/types.py
+++ b/src/leapfrogai_api/backend/types.py
@@ -682,31 +682,31 @@ class ModifyMessageRequest(BaseModel):
 
 
 ################
-# LEAPFROGAI RAG
+# LEAPFROGAI Vector Stores
 ################
 
 
-class RAGItem(BaseModel):
-    """Object representing a single item in a Retrieval-Augmented Generation (RAG) result."""
+class SearchItem(BaseModel):
+    """Object representing a single item in a search result."""
 
-    id: str = Field(..., description="Unique identifier for the RAG item.")
+    id: str = Field(..., description="Unique identifier for the search item.")
     vector_store_id: str = Field(
         ..., description="ID of the vector store containing this item."
     )
     file_id: str = Field(..., description="ID of the file associated with this item.")
-    content: str = Field(..., description="The actual content of the RAG item.")
+    content: str = Field(..., description="The actual content of the item.")
     metadata: dict = Field(
-        ..., description="Additional metadata associated with the RAG item."
+        ..., description="Additional metadata associated with the item."
     )
     similarity: float = Field(
         ..., description="Similarity score of this item to the query."
     )
 
 
-class RAGResponse(BaseModel):
+class SearchResponse(BaseModel):
     """Response object for RAG queries."""
 
-    data: list[RAGItem] = Field(
+    data: list[SearchItem] = Field(
         ...,
         description="List of RAG items returned as a result of the query.",
         min_length=0,
diff --git a/src/leapfrogai_api/data/crud_base.py b/src/leapfrogai_api/data/crud_base.py
index 7f6b5db6d..8532df611 100644
--- a/src/leapfrogai_api/data/crud_base.py
+++ b/src/leapfrogai_api/data/crud_base.py
@@ -118,10 +118,16 @@ async def delete(self, filters: dict | None = None) -> bool:
     async def _get_user_id(self) -> str:
         """Get the user_id from the API key."""
 
-        if self.db.options.headers.get("x-custom-api-key"):
-            result = await self.db.table("api_keys").select("user_id").execute()
-            user_id: str = result.data[0]["user_id"]
-        else:
-            user_id = (await self.db.auth.get_user()).user.id
+        return await get_user_id(self.db)
 
-        return user_id
+
+async def get_user_id(db: AsyncClient) -> str:
+    """Get the user_id from the API key."""
+
+    if db.options.headers.get("x-custom-api-key"):
+        result = await db.table("api_keys").select("user_id").execute()
+        user_id: str = result.data[0]["user_id"]
+    else:
+        user_id = (await db.auth.get_user()).user.id
+
+    return user_id
diff --git a/src/leapfrogai_api/data/crud_vector_content.py b/src/leapfrogai_api/data/crud_vector_content.py
new file mode 100644
index 000000000..5cf5c34f2
--- /dev/null
+++ b/src/leapfrogai_api/data/crud_vector_content.py
@@ -0,0 +1,102 @@
+"""CRUD Operations for VectorStore."""
+
+from pydantic import BaseModel
+from supabase import AClient as AsyncClient
+from leapfrogai_api.data.crud_base import get_user_id
+import ast
+
+
+class Vector(BaseModel):
+    id: str = ""
+    vector_store_id: str
+    file_id: str
+    content: str
+    metadata: dict
+    embedding: list[float]
+
+
+class CRUDVectorContent:
+    """CRUD Operations for VectorStore"""
+
+    def __init__(self, db: AsyncClient):
+        self.db = db
+        self.table_name = "vector_content"
+
+    async def add_vectors(self, object_: list[Vector]) -> list[Vector]:
+        """Create new row."""
+
+        user_id = await get_user_id(self.db)
+
+        rows = []
+
+        for vector in object_:
+            dict_ = vector.model_dump()
+            dict_["user_id"] = user_id
+            if "id" in dict_:
+                del dict_["id"]
+
+            rows.append(dict_)
+
+        data, _count = await self.db.table(self.table_name).insert(dict_).execute()
+
+        _, response = data
+
+        final_response = []
+        try:
+            for item in response:
+                if "user_id" in item:
+                    del item["user_id"]
+                if isinstance(item["embedding"], str):
+                    item["embedding"] = self.string_to_float_list(item["embedding"])
+                final_response.append(
+                    Vector(
+                        id=item["id"],
+                        vector_store_id=item["vector_store_id"],
+                        file_id=item["file_id"],
+                        content=item["content"],
+                        metadata=item["metadata"],
+                        embedding=item["embedding"],
+                    )
+                )
+
+            return final_response
+        except Exception as e:
+            raise e
+
+    async def delete_vectors(self, vector_store_id: str, file_id: str) -> bool:
+        """Delete a vector store file by its ID."""
+        data, _count = (
+            await self.db.table(self.table_name)
+            .delete()
+            .eq("vector_store_id", vector_store_id)
+            .eq("file_id", file_id)
+            .execute()
+        )
+
+        _, response = data
+
+        return bool(response)
+
+    async def similarity_search(self, query: list[float], vector_store_id: str, k: int):
+        user_id = await get_user_id(self.db)
+
+        params = {
+            "query_embedding": query,
+            "match_limit": k,
+            "vs_id": vector_store_id,
+            "user_id": user_id,
+        }
+
+        return await self.db.rpc("match_vectors", params).execute()
+
+    @staticmethod
+    def string_to_float_list(s: str) -> list[float]:
+        try:
+            # Remove any whitespace and convert to a Python list
+            cleaned_string = s.strip()
+            python_list = ast.literal_eval(cleaned_string)
+
+            # Convert all elements to float
+            return [float(x) for x in python_list]
+        except (ValueError, SyntaxError) as e:
+            raise e
diff --git a/src/leapfrogai_api/main.py b/src/leapfrogai_api/main.py
index d3207169b..fa0a1e056 100644
--- a/src/leapfrogai_api/main.py
+++ b/src/leapfrogai_api/main.py
@@ -3,32 +3,30 @@
 import asyncio
 import logging
 from contextlib import asynccontextmanager
+
 from fastapi import FastAPI
+from fastapi.exception_handlers import request_validation_exception_handler
+from fastapi.exceptions import RequestValidationError
 
 from leapfrogai_api.routers.base import router as base_router
-from leapfrogai_api.routers.leapfrogai import (
-    auth,
-    rag,
-)
+from leapfrogai_api.routers.leapfrogai import auth
+from leapfrogai_api.routers.leapfrogai import models as lfai_models
+from leapfrogai_api.routers.leapfrogai import vector_stores as lfai_vector_stores
 from leapfrogai_api.routers.openai import (
+    assistants,
     audio,
-    completions,
     chat,
+    completions,
     embeddings,
-    models,
-    assistants,
     files,
-    threads,
     messages,
+    models,
     runs,
     runs_steps,
+    threads,
     vector_stores,
 )
 from leapfrogai_api.utils import get_model_config
-from fastapi.exception_handlers import (
-    request_validation_exception_handler,
-)
-from fastapi.exceptions import RequestValidationError
 
 
 # handle startup & shutdown tasks
@@ -71,7 +69,8 @@ async def validation_exception_handler(request, exc):
 app.include_router(runs.router)
 app.include_router(messages.router)
 app.include_router(runs_steps.router)
-app.include_router(rag.router)
+app.include_router(lfai_vector_stores.router)
+app.include_router(lfai_models.router)
 # This should be at the bottom to prevent it preempting more specific runs endpoints
 # https://fastapi.tiangolo.com/tutorial/path-params/#order-matters
 app.include_router(threads.router)
diff --git a/src/leapfrogai_api/pyproject.toml b/src/leapfrogai_api/pyproject.toml
index 96c61cfb3..1ffe367c6 100644
--- a/src/leapfrogai_api/pyproject.toml
+++ b/src/leapfrogai_api/pyproject.toml
@@ -3,7 +3,7 @@ name = "leapfrogai-api"
 description = "An API for LeapfrogAI that allows LeapfrogAI backends to connect seamlessly"
 
 # x-release-please-start-version
-version = "0.9.2"
+version = "0.10.0"
 # x-release-please-end
 
 dependencies = [
diff --git a/src/leapfrogai_api/routers/base.py b/src/leapfrogai_api/routers/base.py
index 150a53f90..58032a62c 100644
--- a/src/leapfrogai_api/routers/base.py
+++ b/src/leapfrogai_api/routers/base.py
@@ -1,7 +1,7 @@
 """Base router for the API."""
 
 from fastapi import APIRouter
-from leapfrogai_api.utils import get_model_config
+
 
 router = APIRouter(tags=["/"])
 
@@ -10,9 +10,3 @@
 async def healthz():
     """Health check endpoint."""
     return {"status": "ok"}
-
-
-@router.get("/models")
-async def models():
-    """List all the models."""
-    return get_model_config()
diff --git a/src/leapfrogai_api/routers/leapfrogai/auth.py b/src/leapfrogai_api/routers/leapfrogai/auth.py
index 9ef989d75..897f23a8b 100644
--- a/src/leapfrogai_api/routers/leapfrogai/auth.py
+++ b/src/leapfrogai_api/routers/leapfrogai/auth.py
@@ -42,7 +42,7 @@ class ModifyAPIKeyRequest(BaseModel):
     )
 
 
-@router.post("/create-api-key")
+@router.post("/api-keys")
 async def create_api_key(
     session: Session,
     request: CreateAPIKeyRequest,
@@ -50,6 +50,8 @@ async def create_api_key(
     """
     Create an API key.
 
+    Accessible only with a valid JWT, not an API key.
+
     WARNING: The API key is only returned once. Store it securely.
     """
 
@@ -71,24 +73,32 @@ async def create_api_key(
     return await crud_api_key.create(new_api_key)
 
 
-@router.get("/list-api-keys")
+@router.get("/api-keys")
 async def list_api_keys(
     session: Session,
 ) -> list[APIKeyItem]:
-    """List all API keys."""
+    """
+    List all API keys.
+
+    Accessible only with a valid JWT, not an API key.
+    """
 
     crud_api_key = CRUDAPIKey(session)
 
     return await crud_api_key.list()
 
 
-@router.post("/update-api-key/{api_key_id}")
+@router.patch("/api-keys/{api_key_id}")
 async def update_api_key(
     session: Session,
     api_key_id: Annotated[str, Field(description="The UUID of the API key.")],
     request: ModifyAPIKeyRequest,
 ) -> APIKeyItem:
-    """Update an API key."""
+    """
+    Update an API key.
+
+    Accessible only with a valid JWT, not an API key.
+    """
 
     crud_api_key = CRUDAPIKey(session)
 
@@ -100,6 +110,15 @@ async def update_api_key(
             detail="API key not found.",
         )
 
+    if request.expires_at and (
+        request.expires_at > api_key.expires_at
+        or request.expires_at <= int(time.time())
+    ):
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="Invalid expiration time. New expiration must be in the future but less than the current expiration.",
+        )
+
     updated_api_key = APIKeyItem(
         name=request.name if request.name else api_key.name,
         id=api_key_id,
@@ -113,12 +132,16 @@ async def update_api_key(
     return await crud_api_key.update(api_key_id, updated_api_key)
 
 
-@router.delete("/revoke-api-key/{api_key_id}", status_code=status.HTTP_204_NO_CONTENT)
+@router.delete("/api-keys/{api_key_id}", status_code=status.HTTP_204_NO_CONTENT)
 async def revoke_api_key(
     session: Session,
     api_key_id: Annotated[str, Field(description="The UUID of the API key.")],
 ):
-    """Revoke an API key."""
+    """
+    Revoke an API key.
+
+    Accessible only with a valid JWT, not an API key.
+    """
 
     crud_api_key = CRUDAPIKey(session)
 
diff --git a/src/leapfrogai_api/routers/leapfrogai/models.py b/src/leapfrogai_api/routers/leapfrogai/models.py
new file mode 100644
index 000000000..27b750a2a
--- /dev/null
+++ b/src/leapfrogai_api/routers/leapfrogai/models.py
@@ -0,0 +1,10 @@
+from fastapi import APIRouter
+from leapfrogai_api.utils import get_model_config
+
+router = APIRouter(prefix="/leapfrogai/v1/models", tags=["leapfrogai/models"])
+
+
+@router.get("")
+async def models():
+    """List all the models."""
+    return get_model_config()
diff --git a/src/leapfrogai_api/routers/leapfrogai/rag.py b/src/leapfrogai_api/routers/leapfrogai/vector_stores.py
similarity index 61%
rename from src/leapfrogai_api/routers/leapfrogai/rag.py
rename to src/leapfrogai_api/routers/leapfrogai/vector_stores.py
index 99da0d558..8d3db3ec3 100644
--- a/src/leapfrogai_api/routers/leapfrogai/rag.py
+++ b/src/leapfrogai_api/routers/leapfrogai/vector_stores.py
@@ -3,21 +3,23 @@
 from fastapi import APIRouter
 from postgrest.base_request_builder import SingleAPIResponse
 from leapfrogai_api.backend.rag.query import QueryService
-from leapfrogai_api.backend.types import RAGResponse
+from leapfrogai_api.backend.types import SearchResponse
 from leapfrogai_api.routers.supabase_session import Session
 
-router = APIRouter(prefix="/leapfrogai/v1/rag", tags=["leapfrogai/rag"])
+router = APIRouter(
+    prefix="/leapfrogai/v1/vector_stores", tags=["leapfrogai/vector_stores"]
+)
 
 
-@router.post("")
-async def query_rag(
+@router.post("/search")
+async def search(
     session: Session,
     query: str,
     vector_store_id: str,
     k: int = 5,
-) -> RAGResponse:
+) -> SearchResponse:
     """
-    Query the RAG (Retrieval-Augmented Generation).
+    Performs a similarity search of the vector store.
 
     Args:
         session (Session): The database session.
@@ -26,13 +28,13 @@ async def query_rag(
         k (int, optional): The number of results to retrieve. Defaults to 5.
 
     Returns:
-        RAGResponse: The response from the RAG.
+        SearchResponse: The search response from the vector store.
     """
     query_service = QueryService(db=session)
-    result: SingleAPIResponse[RAGResponse] = await query_service.query_rag(
+    result: SingleAPIResponse[SearchResponse] = await query_service.query_rag(
         query=query,
         vector_store_id=vector_store_id,
         k=k,
     )
 
-    return RAGResponse(data=result.data)
+    return SearchResponse(data=result.data)
diff --git a/src/leapfrogai_api/routers/openai/requests/run_create_params_request_base.py b/src/leapfrogai_api/routers/openai/requests/run_create_params_request_base.py
index eeefba78f..3f9834340 100644
--- a/src/leapfrogai_api/routers/openai/requests/run_create_params_request_base.py
+++ b/src/leapfrogai_api/routers/openai/requests/run_create_params_request_base.py
@@ -50,7 +50,7 @@
 from leapfrogai_api.backend.rag.query import QueryService
 from leapfrogai_api.backend.types import (
     ChatMessage,
-    RAGResponse,
+    SearchResponse,
     ChatCompletionResponse,
     ChatCompletionRequest,
     ChatChoice,
@@ -263,12 +263,14 @@ def sort_by_created_at(msg: Message):
 
             for vector_store_id in vector_store_ids:
                 rag_results_raw: SingleAPIResponse[
-                    RAGResponse
+                    SearchResponse
                 ] = await query_service.query_rag(
                     query=first_message.content,
                     vector_store_id=vector_store_id,
                 )
-                rag_responses: RAGResponse = RAGResponse(data=rag_results_raw.data)
+                rag_responses: SearchResponse = SearchResponse(
+                    data=rag_results_raw.data
+                )
 
                 # Insert the RAG response messages just before the user's query
                 for count, rag_response in enumerate(rag_responses.data):
diff --git a/src/leapfrogai_api/routers/openai/vector_stores.py b/src/leapfrogai_api/routers/openai/vector_stores.py
index 010c83d4e..765d07429 100644
--- a/src/leapfrogai_api/routers/openai/vector_stores.py
+++ b/src/leapfrogai_api/routers/openai/vector_stores.py
@@ -14,6 +14,7 @@
     ListVectorStoresResponse,
     ModifyVectorStoreRequest,
 )
+from leapfrogai_api.data.crud_vector_content import CRUDVectorContent
 from leapfrogai_api.data.crud_vector_store import CRUDVectorStore, FilterVectorStore
 from leapfrogai_api.data.crud_vector_store_file import (
     CRUDVectorStoreFile,
@@ -180,8 +181,8 @@ async def delete_vector_store_file(
 ) -> VectorStoreFileDeleted:
     """Delete a file in a vector store."""
 
-    vector_store = IndexingService(db=session)
-    vectors_deleted = await vector_store.adelete_file(
+    vector_content = CRUDVectorContent(db=session)
+    vectors_deleted = await vector_content.delete_vectors(
         vector_store_id=vector_store_id, file_id=file_id
     )
 
diff --git a/src/leapfrogai_sdk/pyproject.toml b/src/leapfrogai_sdk/pyproject.toml
index 6741059fa..2877c592d 100644
--- a/src/leapfrogai_sdk/pyproject.toml
+++ b/src/leapfrogai_sdk/pyproject.toml
@@ -3,7 +3,7 @@ name = "leapfrogai-sdk"
 description = "A tool for building gRPC-based model backends for LeapfrogAI"
 
 # x-release-please-start-version
-version = "0.9.2"
+version = "0.10.0"
 # x-release-please-end
 
 dependencies = [
diff --git a/src/leapfrogai_ui/.env.example b/src/leapfrogai_ui/.env.example
index e84c2afb6..0a892df2d 100644
--- a/src/leapfrogai_ui/.env.example
+++ b/src/leapfrogai_ui/.env.example
@@ -4,18 +4,18 @@ PUBLIC_SUPABASE_ANON_KEY=<anon_key>
 PUBLIC_DISABLE_KEYCLOAK=false
 PUBLIC_MESSAGE_LENGTH_LIMIT=10000
 
+
 # PRIVATE DYNAMIC
 DEFAULT_TEMPERATURE=0.1
 DEFAULT_SYSTEM_PROMPT="You are a helpful AI assistant created by Defense Unicorns."
 DEFAULT_MODEL=vllm #for OpenAI it could be: gpt-3.5-turbo
 LEAPFROGAI_API_BASE_URL=https://leapfrogai-api.uds.dev #for OpenAI it would be: https://api.openai.com
-#If specified, app will use OpenAI instead of Leapfrog
-OPENAI_API_KEY=
-
-# SUPABASE AUTH (when running Supabase Locally)
+SUPABASE_AUTH_EXTERNAL_KEYCLOAK_URL=https://sso.uds.dev/realms/uds
 SUPABASE_AUTH_KEYCLOAK_CLIENT_ID=uds-supabase
 SUPABASE_AUTH_KEYCLOAK_SECRET=<secret>
-SUPABASE_AUTH_EXTERNAL_KEYCLOAK_URL=https://sso.uds.dev/realms/uds
+
+#If specified, app will use OpenAI instead of Leapfrog
+OPENAI_API_KEY=
 
 # PLAYWRIGHT
 USERNAME=user1@test.com
diff --git a/src/leapfrogai_ui/.prettierrc b/src/leapfrogai_ui/.prettierrc
index 80e397b16..90d842967 100644
--- a/src/leapfrogai_ui/.prettierrc
+++ b/src/leapfrogai_ui/.prettierrc
@@ -4,6 +4,6 @@
   "singleQuote": true,
   "trailingComma": "none",
   "printWidth": 100,
-  "plugins": ["prettier-plugin-svelte"],
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
   "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/src/leapfrogai_ui/README.md b/src/leapfrogai_ui/README.md
index 3ef22293c..7b38cdb86 100644
--- a/src/leapfrogai_ui/README.md
+++ b/src/leapfrogai_ui/README.md
@@ -63,7 +63,7 @@ run the UI outside of UDS on localhost (e.g. for development work), there are so
    The Supabase UDS package has a ConfigMap called "supabase-auth-default".  
    Add these values to the "GOTRUE_URI_ALLOW_LIST" (no spaces!). This variable may not exist and you will need to add it.
    Restart the supabase-auth pod after updating the config:
-   `http://localhost:5173/auth/callback,http://localhost:5173,http://localhost:4173/auth/callback,http://localhost:4173`  
+   `http://localhost:5173/auth/callback,http://localhost:4173/auth/callback`  
    Note - Port 4173 is utilized by Playwright for E2E tests. You do not need this if you are not concerned about Playwright.
 
 ###### With Keycloak authentication
@@ -180,7 +180,6 @@ The variables that had to be overridden were:
 ```
 [auth]
 site_url = "http://localhost:5173"
-additional_redirect_urls = ["http://localhost:5173/auth/callback"]
 
 [auth.external.keycloak]
 enabled = true
@@ -197,9 +196,8 @@ Under a realm in Keycloak that is not the master realm (if using UDS, its "uds")
 1. Create a new client (the client ID you use will be used in the env variables below)
 2. Turn on "Client Authentication"
 3. For "Valid redirect URLs", you need to put:
-   1. `http://localhost:5173/auth/callback` (or the URL for the frontend app callback)
-   2. `http://127.0.0.1:54321/auth/v1/callback` (or the URL for the Supabase callback, for locally running Supabase, DO NOT USE LOCALHOST, use 127.0.0.1)
-   3. Put the same two URLs in for "Web Origins"
+   1. `http://127.0.0.1:54321/auth/v1/callback` (or the URL for the Supabase callback, for locally running Supabase, DO NOT USE LOCALHOST, use 127.0.0.1)
+   2. Put the same two URLs in for "Web Origins"
 4. Copy the Client Secret under the Clients -> Credentials tab and use in the env variables below
 5. You can create users under the "Users" tab and either have them verify their email (if you setup SMTP), or manually mark them as verified.
 
@@ -256,23 +254,6 @@ variables will also not do anything because they are only used for locally runni
 You will instead need to modify the Auth provider settings directly in the Supabase dashboard and set the appropriate
 redirect URLs and client ID/secret.
 
-If you use the <Auth /> component from @supabase/auth-ui-shared, you must ensure you supply provider and scope props:
-ex:
-
-```
-	<Auth
-		supabaseClient={data.supabase}
-		redirectTo={`${data.url}/auth/callback`}
-		showLinks={false}
-		providers={['keycloak']}
-		providerScopes={{
-			keycloak: 'openid'
-		}}
-		onlyThirdPartyProviders
-		appearance={{ theme: ThemeSupa }}
-	/>
-```
-
 If you do not use this component and need to login with a Supabase auth command directly, ensure you provide
 the "openid" scope with the options parameter.
 
diff --git a/src/leapfrogai_ui/package-lock.json b/src/leapfrogai_ui/package-lock.json
index 973169fe4..e4a887fa7 100644
--- a/src/leapfrogai_ui/package-lock.json
+++ b/src/leapfrogai_ui/package-lock.json
@@ -10,12 +10,6 @@
       "dependencies": {
         "@ai-sdk/openai": "^0.0.36",
         "@ai-sdk/svelte": "^0.0.17",
-        "@carbon/colors": "^11.23.0",
-        "@carbon/layout": "^11.23.0",
-        "@carbon/themes": "^11.37.0",
-        "@carbon/type": "^11.28.0",
-        "@supabase/auth-ui-shared": "^0.1.8",
-        "@supabase/auth-ui-svelte": "^0.2.9",
         "@supabase/ssr": "^0.4.0",
         "@supabase/supabase-js": "^2.44.4",
         "@sveltejs/vite-plugin-svelte": "^3.1.1",
@@ -41,6 +35,7 @@
         "@sveltejs/adapter-auto": "^3.2.2",
         "@sveltejs/adapter-node": "^5.2.0",
         "@sveltejs/kit": "^2.5.18",
+        "@tailwindcss/typography": "^0.5.13",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/svelte": "^5.2.0",
         "@testing-library/user-event": "^14.5.2",
@@ -50,26 +45,31 @@
         "@types/uuid": "^10.0.0",
         "@typescript-eslint/eslint-plugin": "^7.16.1",
         "@typescript-eslint/parser": "^7.16.1",
-        "carbon-components-svelte": "^0.85.0",
-        "carbon-icons-svelte": "^12.10.0",
-        "carbon-preprocess-svelte": "^0.11.3",
+        "autoprefixer": "^10.4.19",
         "docx": "^8.5.0",
         "dotenv": "^16.4.5",
         "eslint": "^8.56.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.42.0",
+        "flowbite": "^2.4.1",
+        "flowbite-svelte": "^0.46.15",
+        "flowbite-svelte-icons": "^1.6.1",
+        "husky": "^9.0.11",
         "jsdom": "^24.1.0",
         "lodash": "^4.17.21",
         "msw": "^2.3.1",
         "otpauth": "^9.3.1",
         "pdf-lib": "^1.17.1",
         "playwright": "^1.45.2",
+        "postcss": "^8.4.38",
         "pptxgenjs": "^3.12.0",
         "prettier": "^3.3.3",
         "prettier-plugin-svelte": "^3.2.6",
+        "prettier-plugin-tailwindcss": "^0.6.4",
         "sass": "^1.77.8",
         "svelte": "^4.2.18",
         "svelte-check": "^3.8.4",
+        "tailwindcss": "^3.4.4",
         "tslib": "^2.6.3",
         "typescript": "^5.5.3",
         "vite": "^5.3.4",
@@ -135,13 +135,13 @@
       }
     },
     "node_modules/@ai-sdk/react": {
-      "version": "0.0.22",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-0.0.22.tgz",
-      "integrity": "sha512-r84qhn08GHtVGjvbveMekP1CeXDs5sIrdDvMaoxhCL8o90HjYTWBSDywuRJU1Jk1uPE/BwZWQu9f5bqaIx6AgA==",
+      "version": "0.0.25",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-0.0.25.tgz",
+      "integrity": "sha512-79jFOpFRJs0vn9vOTlq0+jSFW8ztTJEXfUYTk+EwCymuGaSdbQQEKEMIDuRpaeOicNjVXZzbkKlQl9bv2l1R/w==",
       "dependencies": {
         "@ai-sdk/provider-utils": "1.0.2",
-        "@ai-sdk/ui-utils": "0.0.14",
-        "swr": "2.2.0"
+        "@ai-sdk/ui-utils": "0.0.16",
+        "swr": "2.2.5"
       },
       "engines": {
         "node": ">=18"
@@ -159,12 +159,32 @@
         }
       }
     },
-    "node_modules/@ai-sdk/solid": {
+    "node_modules/@ai-sdk/react/node_modules/@ai-sdk/ui-utils": {
       "version": "0.0.16",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/solid/-/solid-0.0.16.tgz",
-      "integrity": "sha512-rhBTHLY2fx+weF/vrNmYY8S+D6Gcni77YlDDq9kANpNycL99WQo1hRy9fVJ44ICMJCpVrY/kHIl3Jlumdy3oPw==",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/ui-utils/-/ui-utils-0.0.16.tgz",
+      "integrity": "sha512-DWPj2gPtY+MfEwxPeUZ/pLlKzfvL2u0p2fZLCYDJhJJgFWkvjvKUejRYH9M5uj8zTkZlwi92Gy+vZ20jto5zwQ==",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "1.0.2",
+        "secure-json-parse": "2.7.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@ai-sdk/solid": {
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/solid/-/solid-0.0.18.tgz",
+      "integrity": "sha512-XHPegleEdbTnb+B1dKsYB8E2oauHr3WP4W4VJ/8xYe7gaJK6Tl88Z8dcIo4szSYgAjJGzOsm0Air3vExTEtO6A==",
       "dependencies": {
-        "@ai-sdk/ui-utils": "0.0.14"
+        "@ai-sdk/ui-utils": "0.0.16"
       },
       "engines": {
         "node": ">=18"
@@ -178,6 +198,26 @@
         }
       }
     },
+    "node_modules/@ai-sdk/solid/node_modules/@ai-sdk/ui-utils": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/ui-utils/-/ui-utils-0.0.16.tgz",
+      "integrity": "sha512-DWPj2gPtY+MfEwxPeUZ/pLlKzfvL2u0p2fZLCYDJhJJgFWkvjvKUejRYH9M5uj8zTkZlwi92Gy+vZ20jto5zwQ==",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "1.0.2",
+        "secure-json-parse": "2.7.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@ai-sdk/svelte": {
       "version": "0.0.17",
       "resolved": "https://registry.npmjs.org/@ai-sdk/svelte/-/svelte-0.0.17.tgz",
@@ -220,12 +260,12 @@
       }
     },
     "node_modules/@ai-sdk/vue": {
-      "version": "0.0.17",
-      "resolved": "https://registry.npmjs.org/@ai-sdk/vue/-/vue-0.0.17.tgz",
-      "integrity": "sha512-DoWimMtYNQbqaZZZT00NlfR/G/hEMZLwOZLC58Jp0iIxagJnAcamMJlS1rSR4+vd2UWNk4iPdgsMFdkpDvD9aA==",
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/vue/-/vue-0.0.20.tgz",
+      "integrity": "sha512-yI1fIy2hjDy2vCTVcs4vatJ/Pn7UDFUynE6RLOH+K1FRwGEOYLmGO7s3Z59YHe4ZJuPQqWZEjG3dYSGyUJUJYg==",
       "dependencies": {
         "@ai-sdk/provider-utils": "0.0.14",
-        "@ai-sdk/ui-utils": "0.0.14",
+        "@ai-sdk/ui-utils": "0.0.16",
         "swrv": "1.0.4"
       },
       "engines": {
@@ -273,6 +313,71 @@
         }
       }
     },
+    "node_modules/@ai-sdk/vue/node_modules/@ai-sdk/ui-utils": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/ui-utils/-/ui-utils-0.0.16.tgz",
+      "integrity": "sha512-DWPj2gPtY+MfEwxPeUZ/pLlKzfvL2u0p2fZLCYDJhJJgFWkvjvKUejRYH9M5uj8zTkZlwi92Gy+vZ20jto5zwQ==",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "1.0.2",
+        "secure-json-parse": "2.7.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@ai-sdk/vue/node_modules/@ai-sdk/ui-utils/node_modules/@ai-sdk/provider": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-0.0.12.tgz",
+      "integrity": "sha512-oOwPQD8i2Ynpn22cur4sk26FW3mSy6t6/X/K1Ay2yGBKYiSpRyLfObhOrZEGsXDx+3euKy4nEZ193R36NM+tpQ==",
+      "dependencies": {
+        "json-schema": "0.4.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@ai-sdk/vue/node_modules/@ai-sdk/ui-utils/node_modules/@ai-sdk/provider-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-1.0.2.tgz",
+      "integrity": "sha512-57f6O4OFVNEpI8Z8o+K40tIB3YQiTw+VCql/qrAO9Utq7Ti1o6+X9tvm177DlZJL7ft0Rwzvgy48S9YhrEKgmA==",
+      "dependencies": {
+        "@ai-sdk/provider": "0.0.12",
+        "eventsource-parser": "1.1.2",
+        "nanoid": "3.3.6",
+        "secure-json-parse": "2.7.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -285,19 +390,19 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@arktype/schema": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/@arktype/schema/-/schema-0.1.13.tgz",
-      "integrity": "sha512-qZjtCAKrnhsixDWsEGJtosWfi4bLpAg4OnnICVYTer/6v5hwlhsdYpYobTSJUc5eiBoI5Ai/kcNfYaQISshY2g==",
+    "node_modules/@ark/schema": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@ark/schema/-/schema-0.2.0.tgz",
+      "integrity": "sha512-IkNWCSHdjaoemMXpps4uFHEAQzwJPbTAS8K2vcQpk90sa+eNBuPSVyB/81/Qyl1VYW0iX3ceGC5NL/OznQv1jg==",
       "optional": true,
       "dependencies": {
-        "@arktype/util": "0.0.48"
+        "@ark/util": "0.1.0"
       }
     },
-    "node_modules/@arktype/util": {
-      "version": "0.0.48",
-      "resolved": "https://registry.npmjs.org/@arktype/util/-/util-0.0.48.tgz",
-      "integrity": "sha512-U5FO5EUAJ4LoYtLSyAMmTf6CEVgslObfSQuua2zoK5Tv2FB3aESVQ3rdLfhuz+coRhlzlynbkmimyoQWwQT+aQ==",
+    "node_modules/@ark/util": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@ark/util/-/util-0.1.0.tgz",
+      "integrity": "sha512-qCLYICQoCy3kEKDVwirQp8qvxhY7NJd8BhhoHaj1l3wCFAk9NUbcDsxAkPStZEMdPI/d7NcbGJe8SWZuRG2twQ==",
       "optional": true
     },
     "node_modules/@babel/code-frame": {
@@ -449,56 +554,14 @@
         "statuses": "^2.0.1"
       }
     },
-    "node_modules/@carbon/colors": {
-      "version": "11.23.0",
-      "resolved": "https://registry.npmjs.org/@carbon/colors/-/colors-11.23.0.tgz",
-      "integrity": "sha512-xXcD064+JPk/tFRN3e3UAOHYpayo9Z6MMcHTt2Vb4U5/+6UUxaDReMPnSL+UNSrf75d4epomB+GrpN0tbmgMCA==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@ibm/telemetry-js": "^1.5.0"
-      }
-    },
-    "node_modules/@carbon/grid": {
-      "version": "11.24.0",
-      "resolved": "https://registry.npmjs.org/@carbon/grid/-/grid-11.24.0.tgz",
-      "integrity": "sha512-1HYS5FhLqLBBsmHA/oWikRXVq0C639DUZf0VGw+Dl7Nl7UasHDzFkErN0W3pNyMXPVr/rxSZV3ihJJTBsgVuhg==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@carbon/layout": "^11.23.0",
-        "@ibm/telemetry-js": "^1.5.0"
-      }
-    },
-    "node_modules/@carbon/layout": {
-      "version": "11.23.0",
-      "resolved": "https://registry.npmjs.org/@carbon/layout/-/layout-11.23.0.tgz",
-      "integrity": "sha512-7YFTFG9mqtvFp67h+qO2z2BG7QmbHc0jVgUevwtOHSCdVHRwhYqEFNGCCE4+MhMHetUjl/z3ut4rNfHleoyOWg==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@ibm/telemetry-js": "^1.5.0"
-      }
-    },
-    "node_modules/@carbon/themes": {
-      "version": "11.37.0",
-      "resolved": "https://registry.npmjs.org/@carbon/themes/-/themes-11.37.0.tgz",
-      "integrity": "sha512-nGsU4x13190Mrm1beb6Oy9Vacv9NNKhRSX/9DYXa6uB9anMy14vzZMLBZ5L1ubL6Eh8GRD06y7TO9lq2xqEkvw==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@carbon/colors": "^11.23.0",
-        "@carbon/layout": "^11.23.0",
-        "@carbon/type": "^11.28.0",
-        "@ibm/telemetry-js": "^1.5.0",
-        "color": "^4.0.0"
-      }
-    },
-    "node_modules/@carbon/type": {
-      "version": "11.28.0",
-      "resolved": "https://registry.npmjs.org/@carbon/type/-/type-11.28.0.tgz",
-      "integrity": "sha512-c0iJXuZgsCr8WARe8h3aMzdYuxM7pW81b+j6AP2Ra2n+/13jK0zlDLLel4pp3U0UAd/qSrlk6PKlwVLH76eLEg==",
-      "hasInstallScript": true,
+    "node_modules/@bundled-es-modules/tough-cookie": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/tough-cookie/-/tough-cookie-0.1.6.tgz",
+      "integrity": "sha512-dvMHbL464C0zI+Yqxbz6kZ5TOEp7GLW+pry/RWndAR8MJQAXZ2rPmIs8tziTZjeIyhSNZgZbCePtfSbdWqStJw==",
+      "dev": true,
       "dependencies": {
-        "@carbon/grid": "^11.24.0",
-        "@carbon/layout": "^11.23.0",
-        "@ibm/telemetry-js": "^1.5.0"
+        "@types/tough-cookie": "^4.0.5",
+        "tough-cookie": "^4.1.4"
       }
     },
     "node_modules/@commitlint/cli": {
@@ -1224,6 +1287,31 @@
         "npm": ">=6.14.13"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.4.tgz",
+      "integrity": "sha512-a4IowK4QkXl4SCWTGUR0INAfEOX3wtsYw3rKK5InQEHMGObkR8Xk44qYQD9P4r6HHw0iIfK6GUKECmY8sTkqRA==",
+      "dev": true,
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.4"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.7.tgz",
+      "integrity": "sha512-wmVfPG5o2xnKDU4jx/m4w5qva9FWHcnZ8BvzEe90D/RpwsJaTAVYPEPdQ8sbr/N8zZTAHlZUTQdqg8ZUbzHmng==",
+      "dev": true,
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.4"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.4.tgz",
+      "integrity": "sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA==",
+      "dev": true
+    },
     "node_modules/@gcornut/valibot-json-schema": {
       "version": "0.31.0",
       "resolved": "https://registry.npmjs.org/@gcornut/valibot-json-schema/-/valibot-json-schema-0.31.0.tgz",
@@ -1317,14 +1405,6 @@
       "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
       "dev": true
     },
-    "node_modules/@ibm/telemetry-js": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/@ibm/telemetry-js/-/telemetry-js-1.5.2.tgz",
-      "integrity": "sha512-KyvaHbiNMDtz2k/9DltkK3YkWTyvz8y7Pq1sQ4cnXDMzHiEatOyxw3zZgK9li80tgUOYMQLck9DLewEuhvtg7w==",
-      "bin": {
-        "ibmtelemetry": "dist/collect.js"
-      }
-    },
     "node_modules/@inquirer/confirm": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-3.1.8.tgz",
@@ -1575,15 +1655,6 @@
         "@lit-labs/ssr-dom-shim": "^1.2.0"
       }
     },
-    "node_modules/@mswjs/cookies": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@mswjs/cookies/-/cookies-1.1.0.tgz",
-      "integrity": "sha512-0ZcCVQxifZmhwNBoQIrystCb+2sWBY2Zw8lpfJBPCHGCA/HWqehITeCRVIv4VMy8MPlaHo2w2pTHFV2pFfqKPw==",
-      "dev": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@mswjs/interceptors": {
       "version": "0.29.1",
       "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.29.1.tgz",
@@ -1707,12 +1778,12 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.45.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.2.tgz",
-      "integrity": "sha512-JxG9eq92ET75EbVi3s+4sYbcG7q72ECeZNbdBlaMkGcNbiDQ4cAi8U2QP5oKkOx+1gpaiL1LDStmzCaEM1Z6fQ==",
+      "version": "1.45.3",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.3.tgz",
+      "integrity": "sha512-UKF4XsBfy+u3MFWEH44hva1Q8Da28G6RFtR2+5saw+jgAFQV5yYnB1fu68Mz7fO+5GJF3wgwAIs0UelU8TxFrA==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.45.2"
+        "playwright": "1.45.3"
       },
       "bin": {
         "playwright": "cli.js"
@@ -1726,6 +1797,16 @@
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
       "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ=="
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@poppinss/macroable": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@poppinss/macroable/-/macroable-1.0.2.tgz",
@@ -2041,9 +2122,9 @@
       "optional": true
     },
     "node_modules/@sinclair/typebox": {
-      "version": "0.32.34",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.32.34.tgz",
-      "integrity": "sha512-a3Z3ytYl6R/+7ldxx04PO1semkwWlX/8pTqxsPw4quIcIXDFPZhOc1Wx8azWmkU26ccK3mHwcWenn0avNgAKQg==",
+      "version": "0.32.35",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.32.35.tgz",
+      "integrity": "sha512-Ul3YyOTU++to8cgNkttakC0dWvpERr6RYoHO2W47DLbFvrwBDJUY31B1sImH6JZSYc4Kt4PyHtoPNu+vL2r2dA==",
       "optional": true
     },
     "node_modules/@sodaru/yup-to-json-schema": {
@@ -2052,11 +2133,6 @@
       "integrity": "sha512-lWb0Wiz8KZ9ip/dY1eUqt7fhTPmL24p6Hmv5Fd9pzlzAdw/YNcWZr+tiCT4oZ4Zyxzi9+1X4zv82o7jYvcFxYA==",
       "optional": true
     },
-    "node_modules/@stitches/core": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@stitches/core/-/core-1.2.8.tgz",
-      "integrity": "sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg=="
-    },
     "node_modules/@supabase/auth-js": {
       "version": "2.64.4",
       "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.64.4.tgz",
@@ -2065,35 +2141,6 @@
         "@supabase/node-fetch": "^2.6.14"
       }
     },
-    "node_modules/@supabase/auth-ui-shared": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-ui-shared/-/auth-ui-shared-0.1.8.tgz",
-      "integrity": "sha512-ouQ0DjKcEFg+0gZigFIEgu01V3e6riGZPzgVD0MJsCBNsMsiDT74+GgCEIElMUpTGkwSja3xLwdFRFgMNFKcjg==",
-      "peerDependencies": {
-        "@supabase/supabase-js": "^2.21.0"
-      }
-    },
-    "node_modules/@supabase/auth-ui-svelte": {
-      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/@supabase/auth-ui-svelte/-/auth-ui-svelte-0.2.9.tgz",
-      "integrity": "sha512-oc+SRS7ykc5FCssoqT0IiK5KF/obwnWko5ePaaMTDwUEQOavv+O8/poAh2lRTKRJCqJMqOOpMS/lUE6pHcma3g==",
-      "dependencies": {
-        "@stitches/core": "^1.2.8",
-        "@supabase/auth-ui-shared": "0.1.8",
-        "svelte": "^3.55.1"
-      },
-      "peerDependencies": {
-        "@supabase/supabase-js": "^2.21.0"
-      }
-    },
-    "node_modules/@supabase/auth-ui-svelte/node_modules/svelte": {
-      "version": "3.59.2",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.59.2.tgz",
-      "integrity": "sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/@supabase/functions-js": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.4.1.tgz",
@@ -2278,10 +2325,38 @@
         "vite": "^5.0.0"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz",
+      "integrity": "sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@testing-library/dom": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.1.0.tgz",
-      "integrity": "sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==",
+      "version": "10.3.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.3.2.tgz",
+      "integrity": "sha512-0bxIdP9mmPiOJ6wHLj8bdJRq+51oddObeCGdEf6PNEhYd93ZYAN+lPRnEOVFtheVwDM7+p+tza3LAQgp0PTudg==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
@@ -2341,9 +2416,9 @@
       }
     },
     "node_modules/@testing-library/jest-dom": {
-      "version": "6.4.6",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.6.tgz",
-      "integrity": "sha512-8qpnGVincVDLEcQXWaHOf6zmlbwTKc6Us6PPu4CRnPXCzo2OGBS5cwgMMOWdxDpEz1mkbvXHpEy99M5Yvt682w==",
+      "version": "6.4.8",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.8.tgz",
+      "integrity": "sha512-JD0G+Zc38f5MBHA4NgxQMR5XtO5Jx9g86jqturNTt2WUfRmLDIY7iKkWHDCCTiDuFMre6nxAD5wHw9W5kI4rGw==",
       "dev": true,
       "dependencies": {
         "@adobe/css-tools": "^4.4.0",
@@ -2359,30 +2434,6 @@
         "node": ">=14",
         "npm": ">=6",
         "yarn": ">=1"
-      },
-      "peerDependencies": {
-        "@jest/globals": ">= 28",
-        "@types/bun": "latest",
-        "@types/jest": ">= 28",
-        "jest": ">= 28",
-        "vitest": ">= 0.32"
-      },
-      "peerDependenciesMeta": {
-        "@jest/globals": {
-          "optional": true
-        },
-        "@types/bun": {
-          "optional": true
-        },
-        "@types/jest": {
-          "optional": true
-        },
-        "jest": {
-          "optional": true
-        },
-        "vitest": {
-          "optional": true
-        }
       }
     },
     "node_modules/@testing-library/jest-dom/node_modules/ansi-styles": {
@@ -2578,6 +2629,12 @@
       "integrity": "sha512-jmIUGWrAiwu3dZpxntxieC+1n/5c3mjrImkmOSQ2NC5uP6cYO4aAZDdSmRcI5C1oiTmqlZGHC+/NmJrKogbP5A==",
       "dev": true
     },
+    "node_modules/@types/tough-cookie": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
+      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
+      "dev": true
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -2610,16 +2667,16 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.16.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.16.1.tgz",
-      "integrity": "sha512-SxdPak/5bO0EnGktV05+Hq8oatjAYVY3Zh2bye9pGZy6+jwyR3LG3YKkV4YatlsgqXP28BTeVm9pqwJM96vf2A==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.17.0.tgz",
+      "integrity": "sha512-pyiDhEuLM3PuANxH7uNYan1AaFs5XE0zw1hq69JBvGvE7gSuEoQl1ydtEe/XQeoC3GQxLXyOVa5kNOATgM638A==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "7.16.1",
-        "@typescript-eslint/type-utils": "7.16.1",
-        "@typescript-eslint/utils": "7.16.1",
-        "@typescript-eslint/visitor-keys": "7.16.1",
+        "@typescript-eslint/scope-manager": "7.17.0",
+        "@typescript-eslint/type-utils": "7.17.0",
+        "@typescript-eslint/utils": "7.17.0",
+        "@typescript-eslint/visitor-keys": "7.17.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -2643,15 +2700,15 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "7.16.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.16.1.tgz",
-      "integrity": "sha512-u+1Qx86jfGQ5i4JjK33/FnawZRpsLxRnKzGE6EABZ40KxVT/vWsiZFEBBHjFOljmmV3MBYOHEKi0Jm9hbAOClA==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.17.0.tgz",
+      "integrity": "sha512-puiYfGeg5Ydop8eusb/Hy1k7QmOU6X3nvsqCgzrB2K4qMavK//21+PzNE8qeECgNOIoertJPUC1SpegHDI515A==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "7.16.1",
-        "@typescript-eslint/types": "7.16.1",
-        "@typescript-eslint/typescript-estree": "7.16.1",
-        "@typescript-eslint/visitor-keys": "7.16.1",
+        "@typescript-eslint/scope-manager": "7.17.0",
+        "@typescript-eslint/types": "7.17.0",
+        "@typescript-eslint/typescript-estree": "7.17.0",
+        "@typescript-eslint/visitor-keys": "7.17.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -2671,13 +2728,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.16.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.16.1.tgz",
-      "integrity": "sha512-nYpyv6ALte18gbMz323RM+vpFpTjfNdyakbf3nsLvF43uF9KeNC289SUEW3QLZ1xPtyINJ1dIsZOuWuSRIWygw==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.17.0.tgz",
+      "integrity": "sha512-0P2jTTqyxWp9HiKLu/Vemr2Rg1Xb5B7uHItdVZ6iAenXmPo4SZ86yOPCJwMqpCyaMiEHTNqizHfsbmCFT1x9SA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.16.1",
-        "@typescript-eslint/visitor-keys": "7.16.1"
+        "@typescript-eslint/types": "7.17.0",
+        "@typescript-eslint/visitor-keys": "7.17.0"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -2688,13 +2745,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.16.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.16.1.tgz",
-      "integrity": "sha512-rbu/H2MWXN4SkjIIyWcmYBjlp55VT+1G3duFOIukTNFxr9PI35pLc2ydwAfejCEitCv4uztA07q0QWanOHC7dA==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.17.0.tgz",
+      "integrity": "sha512-XD3aaBt+orgkM/7Cei0XNEm1vwUxQ958AOLALzPlbPqb8C1G8PZK85tND7Jpe69Wualri81PLU+Zc48GVKIMMA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.16.1",
-        "@typescript-eslint/utils": "7.16.1",
+        "@typescript-eslint/typescript-estree": "7.17.0",
+        "@typescript-eslint/utils": "7.17.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
@@ -2715,9 +2772,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "7.16.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.16.1.tgz",
-      "integrity": "sha512-AQn9XqCzUXd4bAVEsAXM/Izk11Wx2u4H3BAfQVhSfzfDOm/wAON9nP7J5rpkCxts7E5TELmN845xTUCQrD1xIQ==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.17.0.tgz",
+      "integrity": "sha512-a29Ir0EbyKTKHnZWbNsrc/gqfIBqYPwj3F2M+jWE/9bqfEHg0AMtXzkbUkOG6QgEScxh2+Pz9OXe11jHDnHR7A==",
       "dev": true,
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -2728,13 +2785,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.16.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.16.1.tgz",
-      "integrity": "sha512-0vFPk8tMjj6apaAZ1HlwM8w7jbghC8jc1aRNJG5vN8Ym5miyhTQGMqU++kuBFDNKe9NcPeZ6x0zfSzV8xC1UlQ==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.17.0.tgz",
+      "integrity": "sha512-72I3TGq93t2GoSBWI093wmKo0n6/b7O4j9o8U+f65TVD0FS6bI2180X5eGEr8MA8PhKMvYe9myZJquUT2JkCZw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.16.1",
-        "@typescript-eslint/visitor-keys": "7.16.1",
+        "@typescript-eslint/types": "7.17.0",
+        "@typescript-eslint/visitor-keys": "7.17.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -2756,15 +2813,15 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "7.16.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.16.1.tgz",
-      "integrity": "sha512-WrFM8nzCowV0he0RlkotGDujx78xudsxnGMBHI88l5J8wEhED6yBwaSLP99ygfrzAjsQvcYQ94quDwI0d7E1fA==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.17.0.tgz",
+      "integrity": "sha512-r+JFlm5NdB+JXc7aWWZ3fKSm1gn0pkswEwIYsrGPdsT2GjsRATAKXiNtp3vgAAO1xZhX8alIOEQnNMl3kbTgJw==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "7.16.1",
-        "@typescript-eslint/types": "7.16.1",
-        "@typescript-eslint/typescript-estree": "7.16.1"
+        "@typescript-eslint/scope-manager": "7.17.0",
+        "@typescript-eslint/types": "7.17.0",
+        "@typescript-eslint/typescript-estree": "7.17.0"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -2778,12 +2835,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.16.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.16.1.tgz",
-      "integrity": "sha512-Qlzzx4sE4u3FsHTPQAAQFJFNOuqtuY0LFrZHwQ8IHK705XxBiWOFkfKRWu6niB7hwfgnwIpO4jTC75ozW1PHWg==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.17.0.tgz",
+      "integrity": "sha512-RVGC9UhPOCsfCdI9pU++K4nD7to+jTcMIbXTSOcrLqUEW6gF2pU1UUbYJKc9cvcRSK1UDeMJ7pdMxf4bhMpV/A==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.16.1",
+        "@typescript-eslint/types": "7.17.0",
         "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
@@ -2829,13 +2886,13 @@
       }
     },
     "node_modules/@vitest/expect": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.3.tgz",
-      "integrity": "sha512-X6AepoOYePM0lDNUPsGXTxgXZAl3EXd0GYe/MZyVE4HzkUqyUVC6S3PrY5mClDJ6/7/7vALLMV3+xD/Ko60Hqg==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.4.tgz",
+      "integrity": "sha512-39jr5EguIoanChvBqe34I8m1hJFI4+jxvdOpD7gslZrVQBKhh8H9eD7J/LJX4zakrw23W+dITQTDqdt43xVcJw==",
       "dev": true,
       "dependencies": {
-        "@vitest/spy": "2.0.3",
-        "@vitest/utils": "2.0.3",
+        "@vitest/spy": "2.0.4",
+        "@vitest/utils": "2.0.4",
         "chai": "^5.1.1",
         "tinyrainbow": "^1.2.0"
       },
@@ -2844,9 +2901,9 @@
       }
     },
     "node_modules/@vitest/pretty-format": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.3.tgz",
-      "integrity": "sha512-URM4GLsB2xD37nnTyvf6kfObFafxmycCL8un3OC9gaCs5cti2u+5rJdIflZ2fUJUen4NbvF6jCufwViAFLvz1g==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.4.tgz",
+      "integrity": "sha512-RYZl31STbNGqf4l2eQM1nvKPXE0NhC6Eq0suTTePc4mtMQ1Fn8qZmjV4emZdEdG2NOWGKSCrHZjmTqDCDoeFBw==",
       "dev": true,
       "dependencies": {
         "tinyrainbow": "^1.2.0"
@@ -2856,12 +2913,12 @@
       }
     },
     "node_modules/@vitest/runner": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.0.3.tgz",
-      "integrity": "sha512-EmSP4mcjYhAcuBWwqgpjR3FYVeiA4ROzRunqKltWjBfLNs1tnMLtF+qtgd5ClTwkDP6/DGlKJTNa6WxNK0bNYQ==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.0.4.tgz",
+      "integrity": "sha512-Gk+9Su/2H2zNfNdeJR124gZckd5st4YoSuhF1Rebi37qTXKnqYyFCd9KP4vl2cQHbtuVKjfEKrNJxHHCW8thbQ==",
       "dev": true,
       "dependencies": {
-        "@vitest/utils": "2.0.3",
+        "@vitest/utils": "2.0.4",
         "pathe": "^1.1.2"
       },
       "funding": {
@@ -2869,12 +2926,12 @@
       }
     },
     "node_modules/@vitest/snapshot": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.0.3.tgz",
-      "integrity": "sha512-6OyA6v65Oe3tTzoSuRPcU6kh9m+mPL1vQ2jDlPdn9IQoUxl8rXhBnfICNOC+vwxWY684Vt5UPgtcA2aPFBb6wg==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.0.4.tgz",
+      "integrity": "sha512-or6Mzoz/pD7xTvuJMFYEtso1vJo1S5u6zBTinfl+7smGUhqybn6VjzCDMhmTyVOFWwkCMuNjmNNxnyXPgKDoPw==",
       "dev": true,
       "dependencies": {
-        "@vitest/pretty-format": "2.0.3",
+        "@vitest/pretty-format": "2.0.4",
         "magic-string": "^0.30.10",
         "pathe": "^1.1.2"
       },
@@ -2883,9 +2940,9 @@
       }
     },
     "node_modules/@vitest/spy": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.3.tgz",
-      "integrity": "sha512-sfqyAw/ypOXlaj4S+w8689qKM1OyPOqnonqOc9T91DsoHbfN5mU7FdifWWv3MtQFf0lEUstEwR9L/q/M390C+A==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.4.tgz",
+      "integrity": "sha512-uTXU56TNoYrTohb+6CseP8IqNwlNdtPwEO0AWl+5j7NelS6x0xZZtP0bDWaLvOfUbaYwhhWp1guzXUxkC7mW7Q==",
       "dev": true,
       "dependencies": {
         "tinyspy": "^3.0.0"
@@ -2895,12 +2952,12 @@
       }
     },
     "node_modules/@vitest/utils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.3.tgz",
-      "integrity": "sha512-c/UdELMuHitQbbc/EVctlBaxoYAwQPQdSNwv7z/vHyBKy2edYZaFgptE27BRueZB7eW8po+cllotMNTDpL3HWg==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.4.tgz",
+      "integrity": "sha512-Zc75QuuoJhOBnlo99ZVUkJIuq4Oj0zAkrQ2VzCqNCx6wAwViHEh5Fnp4fiJTE9rA+sAoXRf00Z9xGgfEzV6fzQ==",
       "dev": true,
       "dependencies": {
-        "@vitest/pretty-format": "2.0.3",
+        "@vitest/pretty-format": "2.0.4",
         "estree-walker": "^3.0.3",
         "loupe": "^3.1.1",
         "tinyrainbow": "^1.2.0"
@@ -2919,39 +2976,39 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.32",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.32.tgz",
-      "integrity": "sha512-8tCVWkkLe/QCWIsrIvExUGnhYCAOroUs5dzhSoKL5w4MJS8uIYiou+pOPSVIOALOQ80B0jBs+Ri+kd5+MBnCDw==",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.33.tgz",
+      "integrity": "sha512-MoIREbkdPQlnGfSKDMgzTqzqx5nmEjIc0ydLVYlTACGBsfvOJ4tHSbZXKVF536n6fB+0eZaGEOqsGThPpdvF5A==",
       "peer": true,
       "dependencies": {
         "@babel/parser": "^7.24.7",
-        "@vue/shared": "3.4.32",
+        "@vue/shared": "3.4.33",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.4.32",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.32.tgz",
-      "integrity": "sha512-PbSgt9KuYo4fyb90dynuPc0XFTfFPs3sCTbPLOLlo+PrUESW1gn/NjSsUvhR+mI2AmmEzexwYMxbHDldxSOr2A==",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.33.tgz",
+      "integrity": "sha512-GzB8fxEHKw0gGet5BKlpfXEqoBnzSVWwMnT+dc25wE7pFEfrU/QsvjZMP9rD4iVXHBBoemTct8mN0GJEI6ZX5A==",
       "peer": true,
       "dependencies": {
-        "@vue/compiler-core": "3.4.32",
-        "@vue/shared": "3.4.32"
+        "@vue/compiler-core": "3.4.33",
+        "@vue/shared": "3.4.33"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.32",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.32.tgz",
-      "integrity": "sha512-STy9im/WHfaguJnfKjjVpMHukxHUrOKjm2vVCxiojQJyo3Sb6Os8SMXBr/MI+ekpstEGkDONfqAQoSbZhspLYw==",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.33.tgz",
+      "integrity": "sha512-7rk7Vbkn21xMwIUpHQR4hCVejwE6nvhBOiDgoBcR03qvGqRKA7dCBSsHZhwhYUsmjlbJ7OtD5UFIyhP6BY+c8A==",
       "peer": true,
       "dependencies": {
         "@babel/parser": "^7.24.7",
-        "@vue/compiler-core": "3.4.32",
-        "@vue/compiler-dom": "3.4.32",
-        "@vue/compiler-ssr": "3.4.32",
-        "@vue/shared": "3.4.32",
+        "@vue/compiler-core": "3.4.33",
+        "@vue/compiler-dom": "3.4.33",
+        "@vue/compiler-ssr": "3.4.33",
+        "@vue/shared": "3.4.33",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.10",
         "postcss": "^8.4.39",
@@ -2959,65 +3016,71 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.32",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.32.tgz",
-      "integrity": "sha512-nyu/txTecF6DrxLrpLcI34xutrvZPtHPBj9yRoPxstIquxeeyywXpYZrQMsIeDfBhlw1abJb9CbbyZvDw2kjdg==",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.33.tgz",
+      "integrity": "sha512-0WveC9Ai+eT/1b6LCV5IfsufBZ0HP7pSSTdDjcuW302tTEgoBw8rHVHKPbGUtzGReUFCRXbv6zQDDgucnV2WzQ==",
       "peer": true,
       "dependencies": {
-        "@vue/compiler-dom": "3.4.32",
-        "@vue/shared": "3.4.32"
+        "@vue/compiler-dom": "3.4.33",
+        "@vue/shared": "3.4.33"
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.4.32",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.32.tgz",
-      "integrity": "sha512-1P7QvghAzhSIWmiNmh4MNkLVjr2QTNDcFv2sKmytEWhR6t7BZzNicgm5ENER4uU++wbWxgRh/pSEYgdI3MDcvg==",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.33.tgz",
+      "integrity": "sha512-B24QIelahDbyHipBgbUItQblbd4w5HpG3KccL+YkGyo3maXyS253FzcTR3pSz739OTphmzlxP7JxEMWBpewilA==",
       "peer": true,
       "dependencies": {
-        "@vue/shared": "3.4.32"
+        "@vue/shared": "3.4.33"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.4.32",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.32.tgz",
-      "integrity": "sha512-FxT2dTHUs1Hki8Ui/B1Hu339mx4H5kRJooqrNM32tGUHBPStJxwMzLIRbeGO/B1NMplU4Pg9fwOqrJtrOzkdfA==",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.33.tgz",
+      "integrity": "sha512-6wavthExzT4iAxpe8q37/rDmf44nyOJGISJPxCi9YsQO+8w9v0gLCFLfH5TzD1V1AYrTAdiF4Y1cgUmP68jP6w==",
       "peer": true,
       "dependencies": {
-        "@vue/reactivity": "3.4.32",
-        "@vue/shared": "3.4.32"
+        "@vue/reactivity": "3.4.33",
+        "@vue/shared": "3.4.33"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.4.32",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.32.tgz",
-      "integrity": "sha512-Xz9G+ZViRyPFQtRBCPFkhMzKn454ihCPMKUiacNaUhuTIXvyfkAq8l89IZ/kegFVyw/7KkJGRGqYdEZrf27Xsg==",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.33.tgz",
+      "integrity": "sha512-iHsMCUSFJ+4z432Bn9kZzHX+zOXa6+iw36DaVRmKYZpPt9jW9riF32SxNwB124i61kp9+AZtheQ/mKoJLerAaQ==",
       "peer": true,
       "dependencies": {
-        "@vue/reactivity": "3.4.32",
-        "@vue/runtime-core": "3.4.32",
-        "@vue/shared": "3.4.32",
+        "@vue/reactivity": "3.4.33",
+        "@vue/runtime-core": "3.4.33",
+        "@vue/shared": "3.4.33",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.4.32",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.32.tgz",
-      "integrity": "sha512-3c4rd0522Ao8hKjzgmUAbcjv2mBnvnw0Ld2f8HOMCuWJZjYie/p8cpIoYJbeP0VV2JYmrJJMwGQDO5RH4iQ30A==",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.33.tgz",
+      "integrity": "sha512-jTH0d6gQcaYideFP/k0WdEu8PpRS9MF8d0b6SfZzNi+ap972pZ0TNIeTaESwdOtdY0XPVj54XEJ6K0wXxir4fw==",
       "peer": true,
       "dependencies": {
-        "@vue/compiler-ssr": "3.4.32",
-        "@vue/shared": "3.4.32"
+        "@vue/compiler-ssr": "3.4.33",
+        "@vue/shared": "3.4.33"
       },
       "peerDependencies": {
-        "vue": "3.4.32"
+        "vue": "3.4.33"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.4.32",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.32.tgz",
-      "integrity": "sha512-ep4mF1IVnX/pYaNwxwOpJHyBtOMKWoKZMbnUyd+z0udqIxLUh7YCCd/JfDna8aUrmnG9SFORyIq2HzEATRrQsg==",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.33.tgz",
+      "integrity": "sha512-aoRY0jQk3A/cuvdkodTrM4NMfxco8n55eG4H7ML/CRy7OryHfiqvug4xrCBBMbbN+dvXAetDDwZW9DXWWjBntA==",
       "peer": true
     },
+    "node_modules/@yr/monotone-cubic-spline": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
+      "integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
+      "dev": true
+    },
     "node_modules/abort-controller": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -3081,17 +3144,17 @@
       }
     },
     "node_modules/ai": {
-      "version": "3.2.27",
-      "resolved": "https://registry.npmjs.org/ai/-/ai-3.2.27.tgz",
-      "integrity": "sha512-J0SCozj1c8ZTprYVAH3LL1XYR5TRT6oGsXZ5leSqXeEo1SWBx6rFEqDKZLFskLvOf3Ta/AG6EDDrP1EErwapMQ==",
+      "version": "3.2.32",
+      "resolved": "https://registry.npmjs.org/ai/-/ai-3.2.32.tgz",
+      "integrity": "sha512-1TmEY6jkgouP/OYLdt4rBZAUg6mFSfwLPUEwk0D7pLKy3tYB3OYz/XvZ5X8NShG3wNTv7pMzE8znM0vg5RIdoA==",
       "dependencies": {
         "@ai-sdk/provider": "0.0.12",
         "@ai-sdk/provider-utils": "1.0.2",
-        "@ai-sdk/react": "0.0.22",
-        "@ai-sdk/solid": "0.0.16",
-        "@ai-sdk/svelte": "0.0.17",
-        "@ai-sdk/ui-utils": "0.0.14",
-        "@ai-sdk/vue": "0.0.17",
+        "@ai-sdk/react": "0.0.25",
+        "@ai-sdk/solid": "0.0.18",
+        "@ai-sdk/svelte": "0.0.19",
+        "@ai-sdk/ui-utils": "0.0.16",
+        "@ai-sdk/vue": "0.0.20",
         "@opentelemetry/api": "1.9.0",
         "eventsource-parser": "1.1.2",
         "json-schema": "0.4.0",
@@ -3125,6 +3188,47 @@
         }
       }
     },
+    "node_modules/ai/node_modules/@ai-sdk/svelte": {
+      "version": "0.0.19",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/svelte/-/svelte-0.0.19.tgz",
+      "integrity": "sha512-eRBNXUshfwzYm3iaPCIZeV+XHZ0Hkrgj+V0Jy3bGvVzDX0cAs0EAxGPqYFArLFhuEBqiTQrW3QYL540GWYPl6g==",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "1.0.2",
+        "@ai-sdk/ui-utils": "0.0.16",
+        "sswr": "2.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "svelte": "^3.0.0 || ^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "svelte": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ai/node_modules/@ai-sdk/ui-utils": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/ui-utils/-/ui-utils-0.0.16.tgz",
+      "integrity": "sha512-DWPj2gPtY+MfEwxPeUZ/pLlKzfvL2u0p2fZLCYDJhJJgFWkvjvKUejRYH9M5uj8zTkZlwi92Gy+vZ20jto5zwQ==",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "1.0.2",
+        "secure-json-parse": "2.7.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/ajv": {
       "version": "8.14.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.14.0.tgz",
@@ -3188,6 +3292,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -3201,6 +3311,27 @@
         "node": ">= 8"
       }
     },
+    "node_modules/apexcharts": {
+      "version": "3.50.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.50.0.tgz",
+      "integrity": "sha512-LJT1PNAm+NoIU3aogL2P+ViC0y/Cjik54FdzzGV54UNnGQLBoLe5ok3fxsJDTgyez45BGYT8gqNpYKqhdfy5sg==",
+      "dev": true,
+      "dependencies": {
+        "@yr/monotone-cubic-spline": "^1.0.3",
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -3215,13 +3346,13 @@
       }
     },
     "node_modules/arktype": {
-      "version": "2.0.0-dev.21",
-      "resolved": "https://registry.npmjs.org/arktype/-/arktype-2.0.0-dev.21.tgz",
-      "integrity": "sha512-dgHCjb3FK4BGvG2LuXqgdWXstbFmiYowSy0jiKnyk4KVcMT5DyIJ9d1nbQM3ztiAL3hIPmPdkmpfxUqR+BoOBQ==",
+      "version": "2.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/arktype/-/arktype-2.0.0-beta.0.tgz",
+      "integrity": "sha512-fE3ssMiXjr/bLqFPzlDhRlXngdyHQreu7p7i8+dtcY1CA+f8WrVUcue6JxywhnqEJXPG4HOcIwQcC+q4VfeUMQ==",
       "optional": true,
       "dependencies": {
-        "@arktype/schema": "0.1.13",
-        "@arktype/util": "0.0.48"
+        "@ark/schema": "0.2.0",
+        "@ark/util": "0.1.0"
       }
     },
     "node_modules/array-ify": {
@@ -3253,13 +3384,50 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
-    "node_modules/axobject-query": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
-      "integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
-      "dependencies": {
-        "dequal": "^2.0.3"
-      }
+    "node_modules/autoprefixer": {
+      "version": "10.4.19",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.23.0",
+        "caniuse-lite": "^1.0.30001599",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
+      "integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
     },
     "node_modules/balanced-match": {
       "version": "1.0.2",
@@ -3300,6 +3468,38 @@
         "node": ">=8"
       }
     },
+    "node_modules/browserslist": {
+      "version": "4.23.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
+      "integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001640",
+        "electron-to-chromium": "^1.4.820",
+        "node-releases": "^2.0.14",
+        "update-browserslist-db": "^1.1.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
     "node_modules/buffer-crc32": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
@@ -3357,40 +3557,40 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/carbon-components-svelte": {
-      "version": "0.85.0",
-      "resolved": "https://registry.npmjs.org/carbon-components-svelte/-/carbon-components-svelte-0.85.0.tgz",
-      "integrity": "sha512-inJs4RE7ubiOafuiDkUkiV/np8ab63nzDNp+x2k+7kUhewtrYNTTyMHsMM/y2eQS042riXLzAxNsqF7MXm+kfA==",
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
       "dev": true,
-      "hasInstallScript": true,
-      "dependencies": {
-        "@ibm/telemetry-js": "^1.2.1",
-        "flatpickr": "4.6.9"
+      "engines": {
+        "node": ">= 6"
       }
     },
-    "node_modules/carbon-icons-svelte": {
-      "version": "12.10.0",
-      "resolved": "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-12.10.0.tgz",
-      "integrity": "sha512-GOPRBVm3klnaLksVFRvECKOvAXpdjF5FBKo/knQ/WG3LTehg6zvVButW+MdYZtxrtpg8Iqt95BRDmGBimiweWA==",
-      "dev": true
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001642",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001642.tgz",
+      "integrity": "sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
     },
     "node_modules/carbon-pictograms-svelte": {
       "version": "12.11.0",
       "resolved": "https://registry.npmjs.org/carbon-pictograms-svelte/-/carbon-pictograms-svelte-12.11.0.tgz",
       "integrity": "sha512-JWu/wcaq2nCWvre6FACGk2mXv1yEUTSoPfX+ioRpZlsDY4pFvCQOep8ozOLh/zJ1682AzkLbqv24S22fkKWDvQ=="
     },
-    "node_modules/carbon-preprocess-svelte": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/carbon-preprocess-svelte/-/carbon-preprocess-svelte-0.11.3.tgz",
-      "integrity": "sha512-gzzXNFUCrhYUNWxcuPRACWzDw/1CyyEUMrovXuS5jOTxmUC+m6XlElqbW8BR8+dznzFbwH/8dTfTuCbcixI3/A==",
-      "dev": true,
-      "dependencies": {
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.8",
-        "postcss": "^8.4.36",
-        "postcss-discard-empty": "^6.0.3"
-      }
-    },
     "node_modules/cfb": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
@@ -3497,6 +3697,11 @@
         "node": ">= 12"
       }
     },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -3569,18 +3774,6 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=12.5.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3597,15 +3790,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "node_modules/color-string": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
-      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -3617,6 +3801,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/commondir": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
@@ -4025,6 +4218,12 @@
       "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.0.0.tgz",
       "integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA=="
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
     "node_modules/diff-match-patch": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
@@ -4046,7 +4245,7 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "optional": true
+      "devOptional": true
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -4135,6 +4334,12 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "dev": true
     },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.829",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.829.tgz",
+      "integrity": "sha512-5qp1N2POAfW0u1qGAxXEtz6P7bO1m6gpZr5hdf5ve6lxpLM7MpiM4jIPz7xcrNlClQMafbyUDDWjlIQZ1Mw0Rw==",
+      "dev": true
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -4339,9 +4544,9 @@
       }
     },
     "node_modules/eslint-plugin-svelte": {
-      "version": "2.42.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.42.0.tgz",
-      "integrity": "sha512-mHP6z0DWq97KZvoQcApZHdF9m9epcDV/ICKufeEH18Vh+8vl7S+gwt8WdUohEqKNVMuXRkbvy1suMcVvUDiOGw==",
+      "version": "2.43.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.43.0.tgz",
+      "integrity": "sha512-REkxQWvg2pp7QVLxQNa+dJ97xUqRe7Y2JJbSWkHSuszu0VcblZtXkPBPckkivk99y5CdLw4slqfPylL2d/X4jQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
@@ -4354,7 +4559,7 @@
         "postcss-safe-parser": "^6.0.0",
         "postcss-selector-parser": "^6.1.0",
         "semver": "^7.6.2",
-        "svelte-eslint-parser": "^0.40.0"
+        "svelte-eslint-parser": "^0.41.0"
       },
       "engines": {
         "node": "^14.17.0 || >=16.0.0"
@@ -4364,7 +4569,7 @@
       },
       "peerDependencies": {
         "eslint": "^7.0.0 || ^8.0.0-0 || ^9.0.0-0",
-        "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.181"
+        "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.191"
       },
       "peerDependenciesMeta": {
         "svelte": {
@@ -4787,18 +4992,63 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
-    "node_modules/flatpickr": {
-      "version": "4.6.9",
-      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.9.tgz",
-      "integrity": "sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw==",
-      "dev": true
-    },
     "node_modules/flatted": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/flowbite": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-2.4.1.tgz",
+      "integrity": "sha512-I++vDsSOOlzHNuxY2OcFMNVC4CNzpPU2K14YHJ81cYrANXdzgizqniMB/1KQ219x8fqw+S0msY9Q45ZSXDqAPw==",
+      "dev": true,
+      "dependencies": {
+        "@popperjs/core": "^2.9.3",
+        "flowbite-datepicker": "^1.3.0",
+        "mini-svg-data-uri": "^1.4.3"
+      }
+    },
+    "node_modules/flowbite-datepicker": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/flowbite-datepicker/-/flowbite-datepicker-1.3.0.tgz",
+      "integrity": "sha512-CLVqzuoE2vkUvWYK/lJ6GzT0be5dlTbH3uuhVwyB67+PjqJWABm2wv68xhBf5BqjpBxvTSQ3mrmLHpPJ2tvrSQ==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "flowbite": "^2.0.0"
+      }
+    },
+    "node_modules/flowbite-svelte": {
+      "version": "0.46.15",
+      "resolved": "https://registry.npmjs.org/flowbite-svelte/-/flowbite-svelte-0.46.15.tgz",
+      "integrity": "sha512-xWhyLDez/gafTAmQayPMPKmWj1BAoq80SoA48yHZ12Wk3Vu3hFrELLUZf0UksxnjQL9hMOKRUlYl3/IH6pHwnQ==",
+      "dev": true,
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.7",
+        "apexcharts": "^3.49.2",
+        "flowbite": "^2.4.1",
+        "tailwind-merge": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "pnpm": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "svelte": "^3.55.1 || ^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/flowbite-svelte-icons": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/flowbite-svelte-icons/-/flowbite-svelte-icons-1.6.1.tgz",
+      "integrity": "sha512-Kw/7BzA6fqlFq7tBNudwX0KVU4cbyyXcMcgHTraMwGBtvBQan0RKMbvWwqm4JZNvLGAvRv1BM2EF7rzo/oam1Q==",
+      "dev": true,
+      "peerDependencies": {
+        "svelte": "^3.54.0 || ^4.0.0 || ^5.0.0",
+        "tailwind-merge": "^2.0.0",
+        "tailwindcss": "^3.3.2"
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
@@ -4862,6 +5112,19 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -5149,6 +5412,21 @@
         "ms": "^2.0.0"
       }
     },
+    "node_modules/husky": {
+      "version": "9.0.11",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.0.11.tgz",
+      "integrity": "sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw==",
+      "dev": true,
+      "bin": {
+        "husky": "bin.mjs"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -5787,6 +6065,12 @@
       "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
       "dev": true
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
@@ -5990,10 +6274,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
       "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -6057,16 +6350,16 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/msw": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/msw/-/msw-2.3.1.tgz",
-      "integrity": "sha512-ocgvBCLn/5l3jpl1lssIb3cniuACJLoOfZu01e3n5dbJrpA5PeeWn28jCLgQDNt6d7QT8tF2fYRzm9JoEHtiig==",
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/msw/-/msw-2.3.4.tgz",
+      "integrity": "sha512-sHMlwrajgmZSA2l1o7qRSe+azm/I+x9lvVVcOxAzi4vCtH8uVPJk1K5BQYDkzGl+tt0RvM9huEXXdeGrgcc79g==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "@bundled-es-modules/cookie": "^2.0.0",
         "@bundled-es-modules/statuses": "^1.0.1",
+        "@bundled-es-modules/tough-cookie": "^0.1.6",
         "@inquirer/confirm": "^3.0.0",
-        "@mswjs/cookies": "^1.1.0",
         "@mswjs/interceptors": "^0.29.0",
         "@open-draft/until": "^2.1.0",
         "@types/cookie": "^0.6.0",
@@ -6163,6 +6456,17 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -6223,6 +6527,12 @@
         }
       }
     },
+    "node_modules/node-releases": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.17.tgz",
+      "integrity": "sha512-Ww6ZlOiEQfPfXM45v17oabk77Z7mg5bOt7AjDyzy7RjK9OrLrLC8dyZQoAPEOtFX9SaNf1Tdvr5gRJWdTJj7GA==",
+      "dev": true
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -6232,6 +6542,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/normalize-url": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-8.0.1.tgz",
@@ -6276,6 +6595,24 @@
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.10.tgz",
       "integrity": "sha512-QK0sRs7MKv0tKe1+5uZIQk/C8XGza4DAnztJG8iD+TpJIORARrCxczA738awHrZoHeTjSSoHqao2teO0dC/gFQ=="
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -6301,9 +6638,9 @@
       }
     },
     "node_modules/openai": {
-      "version": "4.52.7",
-      "resolved": "https://registry.npmjs.org/openai/-/openai-4.52.7.tgz",
-      "integrity": "sha512-dgxA6UZHary6NXUHEDj5TWt8ogv0+ibH+b4pT5RrWMjiRZVylNwLcw/2ubDrX5n0oUmHX/ZgudMJeemxzOvz7A==",
+      "version": "4.53.0",
+      "resolved": "https://registry.npmjs.org/openai/-/openai-4.53.0.tgz",
+      "integrity": "sha512-XoMaJsSLuedW5eoMEMmZbdNoXgML3ujcU5KfwRnC6rnbmZkHE2Q4J/SArwhqCxQRqJwHnQUj1LpiROmKPExZJA==",
       "dependencies": {
         "@types/node": "^18.11.18",
         "@types/node-fetch": "^2.6.4",
@@ -6584,13 +6921,31 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/playwright": {
-      "version": "1.45.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.2.tgz",
-      "integrity": "sha512-ReywF2t/0teRvNBpfIgh5e4wnrI/8Su8ssdo5XsQKpjxJj+jspm00jSoz9BTg91TT0c9HRjXO7LBNVrgYj9X0g==",
+      "version": "1.45.3",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.3.tgz",
+      "integrity": "sha512-QhVaS+lpluxCaioejDZ95l4Y4jSFCsBvl2UZkpeXlzxmqS+aABr5c82YmfMHrL6x27nvrvykJAFpkzT2eWdJww==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.45.2"
+        "playwright-core": "1.45.3"
       },
       "bin": {
         "playwright": "cli.js"
@@ -6603,9 +6958,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.45.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.2.tgz",
-      "integrity": "sha512-ha175tAWb0dTK0X4orvBIqi3jGEt701SMxMhyujxNrgd8K0Uy5wMSwwcQHtyB4om7INUkfndx02XnQ2p6dvLDw==",
+      "version": "1.45.3",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.3.tgz",
+      "integrity": "sha512-+ym0jNbcjikaOwwSZycFbwkWgfruWvYlJfThKYAlImbxUgdWFO2oW70ojPm4OpE4t6TAo2FY/smM+hpVTtkhDA==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -6641,16 +6996,40 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-discard-empty": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-6.0.3.tgz",
-      "integrity": "sha512-znyno9cHKQsK6PtxL5D19Fj9uwSzC2mB74cpT66fhgOadEUPyXFkbgwm5tvc3bt3NAy8ltE5MrghxovZRVnOjQ==",
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
       "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
       "engines": {
-        "node": "^14 || ^16 || >=18.0"
+        "node": ">=14.0.0"
       },
       "peerDependencies": {
-        "postcss": "^8.4.31"
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
       }
     },
     "node_modules/postcss-load-config": {
@@ -6682,6 +7061,25 @@
         }
       }
     },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/postcss-safe-parser": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
@@ -6737,6 +7135,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
     "node_modules/postcss/node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -6809,6 +7213,80 @@
         "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.5.tgz",
+      "integrity": "sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig-melody": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig-melody": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -6907,6 +7385,15 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
@@ -7344,19 +7831,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
-    "node_modules/simple-swizzle/node_modules/is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
-    },
     "node_modules/sirv": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
@@ -7582,6 +8056,28 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/superstruct": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/superstruct/-/superstruct-2.0.2.tgz",
@@ -7662,9 +8158,9 @@
       }
     },
     "node_modules/svelte-eslint-parser": {
-      "version": "0.40.0",
-      "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.40.0.tgz",
-      "integrity": "sha512-M+v1HhC5T1WKYVxWexUCS4o6oIBS88XKzOZuhl2ew+eGxol7eC21e+VE8TC4rXJ3iT3iXT0qlZsZcpKjVo5/zQ==",
+      "version": "0.41.0",
+      "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.41.0.tgz",
+      "integrity": "sha512-L6f4hOL+AbgfBIB52Z310pg1d2QjRqm7wy3kI1W6hhdhX5bvu7+f0R6w4ykp5HoDdzq+vGhIJmsisaiJDGmVfA==",
       "dev": true,
       "dependencies": {
         "eslint-scope": "^7.2.2",
@@ -7680,7 +8176,7 @@
         "url": "https://github.com/sponsors/ota-meshi"
       },
       "peerDependencies": {
-        "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.181"
+        "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.191"
       },
       "peerDependenciesMeta": {
         "svelte": {
@@ -7778,9 +8274,9 @@
       }
     },
     "node_modules/sveltekit-superforms": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/sveltekit-superforms/-/sveltekit-superforms-2.16.0.tgz",
-      "integrity": "sha512-t5aZyMCXyahgvn7VAJ7l9S+wAv9YyMAZHYQ6gcGVZ6ecr4/DMMD2r3ajGCj1h1dWaMQ3w5zVw+SqHSAkbHsWVQ==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/sveltekit-superforms/-/sveltekit-superforms-2.16.1.tgz",
+      "integrity": "sha512-RNBdN43xge/ADmc3s7+pfdnRGuZ9gZiqpX6VKAQCnCI+ICc5rrPv5idYbx4iuY1Ia0lRMAq1hP0x2oHaPjB+Kg==",
       "funding": [
         {
           "type": "github",
@@ -7807,7 +8303,7 @@
         "@sinclair/typebox": "^0.32.34",
         "@sodaru/yup-to-json-schema": "^2.0.1",
         "@vinejs/vine": "^1.8.0",
-        "arktype": "2.0.0-dev.21",
+        "arktype": "2.0.0-beta.0",
         "joi": "^17.13.3",
         "json-schema-to-ts": "^3.1.0",
         "superstruct": "^2.0.2",
@@ -7821,7 +8317,7 @@
         "@sinclair/typebox": ">=0.32.30 <1",
         "@sveltejs/kit": "1.x || 2.x",
         "@vinejs/vine": "^1.8.0",
-        "arktype": ">=2.0.0-dev.21",
+        "arktype": ">=2.0.0-beta.0",
         "joi": "^17.13.1",
         "superstruct": "^2.0.2",
         "svelte": "3.x || 4.x || >=5.0.0-next.51",
@@ -7868,11 +8364,103 @@
         "zod": "^3.23.3"
       }
     },
+    "node_modules/svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "dev": true,
+      "dependencies": {
+        "svg.js": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
+      "dev": true,
+      "dependencies": {
+        "svg.js": ">=2.3.x"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
+      "dev": true,
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
+      "dev": true
+    },
+    "node_modules/svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "dev": true,
+      "dependencies": {
+        "svg.js": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "dev": true,
+      "dependencies": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.resize.js/node_modules/svg.select.js": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+      "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+      "dev": true,
+      "dependencies": {
+        "svg.js": "^2.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "dev": true,
+      "dependencies": {
+        "svg.js": "^2.6.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/swr": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.0.tgz",
-      "integrity": "sha512-AjqHOv2lAhkuUdIiBu9xbuettzAzWXmCEcLONNKJRba87WAefz8Ca9d6ds/SzrPc235n1IxWYdhJ2zF3MNUaoQ==",
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.5.tgz",
+      "integrity": "sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==",
       "dependencies": {
+        "client-only": "^0.0.1",
         "use-sync-external-store": "^1.2.0"
       },
       "peerDependencies": {
@@ -7897,6 +8485,112 @@
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.4.0.tgz",
+      "integrity": "sha512-49AwoOQNKdqKPd9CViyH5wJoSKsCDjUlzL8DxuGp3P1FsGY36NJDAa18jLZcaHAUUuTj+JB8IAo8zWgBNvBF7A==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.6",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.6.tgz",
+      "integrity": "sha512-1uRHzPB+Vzu57ocybfZ4jh5Q3SdlH7XW23J5sQoM9LhE9eIOlzxer/3XPSsycvih3rboRsvt0QCmzSrqyOYUIA==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/yaml": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz",
+      "integrity": "sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==",
+      "dev": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/text-extensions": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-2.4.0.tgz",
@@ -7915,6 +8609,27 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -8046,6 +8761,12 @@
         "node": ">=14.13.1"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
     "node_modules/tslib": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
@@ -8076,9 +8797,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.5.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
-      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
+      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
       "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -8118,6 +8839,36 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
+      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.2",
+        "picocolors": "^1.0.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -8232,9 +8983,9 @@
       }
     },
     "node_modules/vite-node": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.0.3.tgz",
-      "integrity": "sha512-14jzwMx7XTcMB+9BhGQyoEAmSl0eOr3nrnn+Z12WNERtOvLN+d2scbRUvyni05rT3997Bg+rZb47NyP4IQPKXg==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.0.4.tgz",
+      "integrity": "sha512-ZpJVkxcakYtig5iakNeL7N3trufe3M6vGuzYAr4GsbCTwobDeyPJpE4cjDhhPluv8OvQCFzu2LWp6GkoKRITXA==",
       "dev": true,
       "dependencies": {
         "cac": "^6.7.14",
@@ -8662,18 +9413,18 @@
       }
     },
     "node_modules/vitest": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.3.tgz",
-      "integrity": "sha512-o3HRvU93q6qZK4rI2JrhKyZMMuxg/JRt30E6qeQs6ueaiz5hr1cPj+Sk2kATgQzMMqsa2DiNI0TIK++1ULx8Jw==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.4.tgz",
+      "integrity": "sha512-luNLDpfsnxw5QSW4bISPe6tkxVvv5wn2BBs/PuDRkhXZ319doZyLOBr1sjfB5yCEpTiU7xCAdViM8TNVGPwoog==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.3.0",
-        "@vitest/expect": "2.0.3",
-        "@vitest/pretty-format": "^2.0.3",
-        "@vitest/runner": "2.0.3",
-        "@vitest/snapshot": "2.0.3",
-        "@vitest/spy": "2.0.3",
-        "@vitest/utils": "2.0.3",
+        "@vitest/expect": "2.0.4",
+        "@vitest/pretty-format": "^2.0.4",
+        "@vitest/runner": "2.0.4",
+        "@vitest/snapshot": "2.0.4",
+        "@vitest/spy": "2.0.4",
+        "@vitest/utils": "2.0.4",
         "chai": "^5.1.1",
         "debug": "^4.3.5",
         "execa": "^8.0.1",
@@ -8684,8 +9435,8 @@
         "tinypool": "^1.0.0",
         "tinyrainbow": "^1.2.0",
         "vite": "^5.0.0",
-        "vite-node": "2.0.3",
-        "why-is-node-running": "^2.2.2"
+        "vite-node": "2.0.4",
+        "why-is-node-running": "^2.3.0"
       },
       "bin": {
         "vitest": "vitest.mjs"
@@ -8699,8 +9450,8 @@
       "peerDependencies": {
         "@edge-runtime/vm": "*",
         "@types/node": "^18.0.0 || >=20.0.0",
-        "@vitest/browser": "2.0.3",
-        "@vitest/ui": "2.0.3",
+        "@vitest/browser": "2.0.4",
+        "@vitest/ui": "2.0.4",
         "happy-dom": "*",
         "jsdom": "*"
       },
@@ -8726,16 +9477,16 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.4.32",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.32.tgz",
-      "integrity": "sha512-9mCGIAi/CAq7GtaLLLp2J92pEic+HArstG+pq6F+H7+/jB9a0Z7576n4Bh4k79/50L1cKMIhZC3MC0iGpl+1IA==",
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.33.tgz",
+      "integrity": "sha512-VdMCWQOummbhctl4QFMcW6eNtXHsFyDlX60O/tsSQuCcuDOnJ1qPOhhVla65Niece7xq/P2zyZReIO5mP+LGTQ==",
       "peer": true,
       "dependencies": {
-        "@vue/compiler-dom": "3.4.32",
-        "@vue/compiler-sfc": "3.4.32",
-        "@vue/runtime-dom": "3.4.32",
-        "@vue/server-renderer": "3.4.32",
-        "@vue/shared": "3.4.32"
+        "@vue/compiler-dom": "3.4.33",
+        "@vue/compiler-sfc": "3.4.33",
+        "@vue/runtime-dom": "3.4.33",
+        "@vue/server-renderer": "3.4.33",
+        "@vue/shared": "3.4.33"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -8822,9 +9573,9 @@
       }
     },
     "node_modules/why-is-node-running": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.2.2.tgz",
-      "integrity": "sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
       "dev": true,
       "dependencies": {
         "siginfo": "^2.0.0",
@@ -8933,9 +9684,9 @@
       "dev": true
     },
     "node_modules/ws": {
-      "version": "8.18.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
-      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
+      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
       "engines": {
         "node": ">=10.0.0"
       },
diff --git a/src/leapfrogai_ui/package.json b/src/leapfrogai_ui/package.json
index b4fd46228..98439ea06 100644
--- a/src/leapfrogai_ui/package.json
+++ b/src/leapfrogai_ui/package.json
@@ -32,6 +32,7 @@
     "@sveltejs/adapter-auto": "^3.2.2",
     "@sveltejs/adapter-node": "^5.2.0",
     "@sveltejs/kit": "^2.5.18",
+    "@tailwindcss/typography": "^0.5.13",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/svelte": "^5.2.0",
     "@testing-library/user-event": "^14.5.2",
@@ -41,26 +42,31 @@
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",
-    "carbon-components-svelte": "^0.85.0",
-    "carbon-icons-svelte": "^12.10.0",
-    "carbon-preprocess-svelte": "^0.11.3",
+    "autoprefixer": "^10.4.19",
     "docx": "^8.5.0",
     "dotenv": "^16.4.5",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.42.0",
+    "flowbite": "^2.4.1",
+    "flowbite-svelte": "^0.46.15",
+    "flowbite-svelte-icons": "^1.6.1",
+    "husky": "^9.0.11",
     "jsdom": "^24.1.0",
     "lodash": "^4.17.21",
     "msw": "^2.3.1",
     "otpauth": "^9.3.1",
     "pdf-lib": "^1.17.1",
     "playwright": "^1.45.2",
+    "postcss": "^8.4.38",
     "pptxgenjs": "^3.12.0",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
+    "prettier-plugin-tailwindcss": "^0.6.4",
     "sass": "^1.77.8",
     "svelte": "^4.2.18",
     "svelte-check": "^3.8.4",
+    "tailwindcss": "^3.4.4",
     "tslib": "^2.6.3",
     "typescript": "^5.5.3",
     "vite": "^5.3.4",
@@ -71,12 +77,6 @@
   "dependencies": {
     "@ai-sdk/openai": "^0.0.36",
     "@ai-sdk/svelte": "^0.0.17",
-    "@carbon/colors": "^11.23.0",
-    "@carbon/layout": "^11.23.0",
-    "@carbon/themes": "^11.37.0",
-    "@carbon/type": "^11.28.0",
-    "@supabase/auth-ui-shared": "^0.1.8",
-    "@supabase/auth-ui-svelte": "^0.2.9",
     "@supabase/ssr": "^0.4.0",
     "@supabase/supabase-js": "^2.44.4",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
diff --git a/src/leapfrogai_ui/playwright.config.ts b/src/leapfrogai_ui/playwright.config.ts
index eb599e436..4d5025365 100644
--- a/src/leapfrogai_ui/playwright.config.ts
+++ b/src/leapfrogai_ui/playwright.config.ts
@@ -62,6 +62,8 @@ const devConfig: PlaywrightTestConfig = {
     port: 4173,
     stderr: 'pipe'
   },
+  testDir: 'tests',
+  testMatch: /(.+\.)?(test|spec)\.[jt]s/,
   use: {
     baseURL: 'http://localhost:4173'
   }
@@ -70,8 +72,11 @@ const devConfig: PlaywrightTestConfig = {
 // when e2e testing, use the deployed instance
 const CI_Config: PlaywrightTestConfig = {
   use: {
-    baseURL: 'https://ai.uds.dev'
-  }
+    baseURL: 'https://ai.uds.dev',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure'
+  },
+  reporter: [['html', { outputFolder: 'e2e-report' }]]
 };
 
 // get the environment type from command line. If none, set it to dev
diff --git a/src/leapfrogai_ui/postcss.config.js b/src/leapfrogai_ui/postcss.config.js
new file mode 100644
index 000000000..ba8073047
--- /dev/null
+++ b/src/leapfrogai_ui/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};
diff --git a/src/leapfrogai_ui/src/app.css b/src/leapfrogai_ui/src/app.css
new file mode 100644
index 000000000..5b910cc7f
--- /dev/null
+++ b/src/leapfrogai_ui/src/app.css
@@ -0,0 +1,91 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --header-height: 3rem;
+  --message-input-height: 2.5rem;
+  scrollbar-color: #4b5563 #1f2937;
+}
+
+/*TODO - can we get rid of some of these?*/
+@layer utilities {
+  .content {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    overflow: auto;
+    padding-top: 2rem;
+    height: calc(100vh - var(--header-height));
+  }
+
+  .sidebar-height {
+    height: calc(100vh - var(--header-height));
+  }
+
+  .no-scrollbar {
+    scrollbar-width: none;
+  }
+
+  .hide {
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  .lf-content-container {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .centered-flexbox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .remove-btn-style {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+  }
+
+  .link {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 400;
+    letter-spacing: 0.16px;
+    text-decoration: none;
+    color: #78a9ff;
+    cursor: pointer;
+  }
+
+  .z-max {
+    z-index: 9999;
+  }
+}
+
+@layer components {
+  .chat-icon {
+    width: 32px;
+    height: 52px;
+    padding: 14px 0.25rem;
+    color: white;
+  }
+
+  .pictogram {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    transition: fill 70ms ease;
+    &:hover {
+      background-color: gray;
+    }
+  }
+}
diff --git a/src/leapfrogai_ui/src/app.html b/src/leapfrogai_ui/src/app.html
index 84ffad166..ee4722804 100644
--- a/src/leapfrogai_ui/src/app.html
+++ b/src/leapfrogai_ui/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
diff --git a/src/leapfrogai_ui/src/lib/components/AssistantAvatar.svelte b/src/leapfrogai_ui/src/lib/components/AssistantAvatar.svelte
index 613becd56..ceca70148 100644
--- a/src/leapfrogai_ui/src/lib/components/AssistantAvatar.svelte
+++ b/src/leapfrogai_ui/src/lib/components/AssistantAvatar.svelte
@@ -1,62 +1,93 @@
 <script lang="ts">
-  import { Edit, TrashCan } from 'carbon-icons-svelte';
-  import {
-    Button,
-    FileUploaderButton,
-    Modal,
-    RadioButton,
-    RadioButtonGroup
-  } from 'carbon-components-svelte';
   import Pictograms from '$components/Pictograms.svelte';
   import DynamicPictogram from '$components/DynamicPictogram.svelte';
   import { AVATAR_FILE_SIZE_ERROR_TEXT, MAX_AVATAR_SIZE, NO_FILE_ERROR_TEXT } from '$lib/constants';
+  import { Avatar, Button, Modal, P, TableSearch } from 'flowbite-svelte';
+  import { twMerge } from 'tailwind-merge';
+  import { EditOutline, TrashBinOutline } from 'flowbite-svelte-icons';
+  import Fuse, { type FuseResult, type IFuseOptions } from 'fuse.js';
+  import { iconMap } from '$constants/iconMap';
+  import LFRadio from '$components/LFRadio.svelte';
 
   export let form;
-  export let files: File[];
-  export let selectedPictogramName: string;
 
   let originalAvatar = $form.avatar;
-  let tempFiles: File[] = [];
-  let tempPictogram = selectedPictogramName || 'default';
+  let selectedPictogramName = $form.pictogram || 'default';
+  let tempPictogram = selectedPictogramName;
   let modalOpen = false;
   let selectedRadioButton: 'upload' | 'pictogram' = originalAvatar ? 'upload' : 'pictogram';
   let shouldValidate = false;
   let fileUploaderRef: HTMLInputElement;
   let errorMsg = '';
+  let searchText = '';
+  let searchResults: FuseResult<(keyof typeof iconMap)[]>[];
+  let filteredPictograms: (keyof typeof iconMap)[] = [];
   let skipCloseActions = false;
 
-  $: avatarToShow = tempFiles?.length > 0 ? URL.createObjectURL(tempFiles[0]) : $form.avatar;
-  $: fileNotUploaded = !tempFiles[0]; // if on upload tab, you must upload a file to enable save
-  $: fileTooBig = tempFiles[0]?.size > MAX_AVATAR_SIZE;
-  $: hideUploader = avatarToShow ? true : tempFiles.length > 0;
+  const pictogramNames = Object.keys(iconMap);
+  const options: IFuseOptions<unknown> = {
+    minMatchCharLength: 3,
+    shouldSort: false,
+    findAllMatches: true,
+    threshold: 0, // perfect matches only
+    ignoreLocation: true
+  };
+
+  $: fileNotUploaded = !$form.avatarFile; // if on upload tab, you must upload a file to enable save
+
+  $: avatarToShow = $form.avatarFile ? URL.createObjectURL($form.avatarFile) : $form.avatar;
+
+  $: fileTooBig = $form.avatarFile?.size > MAX_AVATAR_SIZE;
+  $: hideUploader = avatarToShow ? true : $form.avatarFile;
 
-  const handleRemove = () => {
-    tempFiles = [];
+  $: if (searchText) {
+    const fuse = new Fuse(pictogramNames, options);
+    searchResults = fuse.search(searchText);
+    filteredPictograms = searchResults.map(
+      (result) => result.item
+    ) as unknown as (keyof typeof iconMap)[];
+  }
+
+  const handleRemove = (e) => {
+    e.stopPropagation();
+    clearFileInput();
     $form.avatar = '';
-    tempPictogram = selectedPictogramName || 'default';
+    tempPictogram = selectedPictogramName;
     shouldValidate = false;
   };
 
-  const handleClose = () => {
+  const handleCancel = (e) => {
+    e.stopPropagation();
+
+    // clicking on save will trigger this function via on:close for modal
+    // if submitting, this block should not run, only when cancelling should it run
     if (!skipCloseActions) {
       shouldValidate = false;
       modalOpen = false;
       $form.avatar = originalAvatar;
       tempPictogram = selectedPictogramName; // reset to original pictogram
-      if (files?.length > 0) {
-        tempFiles = [...files]; // reset to original file
+      if ($form.avatar) {
+        $form.avatarFile = $form.avatar; // reset to original file
       } else {
-        tempFiles = [];
+        clearFileInput();
       }
+      fileUploaderRef.value = ''; // Reset the file input value to ensure input event detection
     }
     skipCloseActions = false;
   };
 
-  const handleChangeAvatar = () => {
+  const handleChangeAvatar = (e) => {
+    e.stopPropagation();
     fileUploaderRef.click(); // re-open upload dialog
   };
 
-  const handleSubmit = () => {
+  const clearFileInput = () => {
+    fileUploaderRef.value = '';
+    $form.avatarFile = null;
+  };
+
+  const handleSubmit = (e) => {
+    e.stopPropagation();
     skipCloseActions = true;
     shouldValidate = true;
 
@@ -69,186 +100,141 @@
         errorMsg = AVATAR_FILE_SIZE_ERROR_TEXT;
         return;
       }
-      files = [...tempFiles];
-      modalOpen = false;
-      shouldValidate = false;
     } else {
       // pictogram tab
-      selectedPictogramName = tempPictogram;
-      files = []; // remove saved avatar
-      tempFiles = [];
-      $form.avatar = '';
-
-      modalOpen = false;
-      shouldValidate = false;
+      selectedPictogramName = tempPictogram; // TODO - can we remove this line
+      $form.pictogram = tempPictogram;
+      $form.avatar = ''; // remove saved avatar
+      clearFileInput();
     }
+
+    modalOpen = false;
+    shouldValidate = false;
   };
 </script>
 
-<div class="container">
+<div>
   <button
-    class="mini-avatar-container remove-btn-style"
     tabindex="0"
     on:click|preventDefault={() => (modalOpen = true)}
     data-testid="mini-avatar-container"
   >
     {#if avatarToShow}
-      <div class="mini-avatar-image" style={`background-image: url(${avatarToShow});`} />
+      <Avatar src={avatarToShow} size="lg" />
     {:else}
-      <DynamicPictogram iconName={tempPictogram} width="32px" height="32px" />
+      <DynamicPictogram iconName={tempPictogram} size="md" class="text-white" />
     {/if}
   </button>
-
   <Modal
     bind:open={modalOpen}
-    preventCloseOnClickOutside
-    modalHeading="Avatar Image"
-    shouldSubmitOnEnter={false}
-    primaryButtonText="Save"
-    secondaryButtonText="Cancel"
-    on:close={handleClose}
-    on:click:button--secondary={handleClose}
-    on:submit={handleSubmit}
-    style="--modal-height:{tempPictogram === 'pictogram' ? '100%' : 'auto'};"
-    class="avatar-modal"
+    autoclose
+    title="Avatar Image"
+    on:close={handleCancel}
+    color="primary"
   >
-    <div class="avatar-modal">
-      <RadioButtonGroup bind:selected={selectedRadioButton}>
-        <RadioButton labelText="Pictogram" value="pictogram" />
-        <RadioButton labelText="Upload" value="upload" />
-      </RadioButtonGroup>
-      <span class:hidden={selectedRadioButton === 'upload'} style="height: 100%;">
-        <Pictograms bind:selectedPictogramName={tempPictogram} />
-      </span>
-
-      <div class="avatar-upload-container" class:hidden={selectedRadioButton === 'pictogram'}>
-        {#if avatarToShow}
-          <div class="avatar-container">
-            <div
-              data-testid="image-upload-avatar"
-              class="avatar-image"
-              style={`background-image: url(${avatarToShow});`}
+    <div id="parent-flexbox" class="flex h-full flex-col gap-4">
+      <div id="child-flexbox-header" class="p-2">
+        <div class="flex flex-col gap-2">
+          <div class="flex gap-2">
+            <LFRadio
+              data-testid="pictogram-radio-btn"
+              name="Pictogram"
+              checked={selectedRadioButton === 'pictogram'}
+              on:click={() => (selectedRadioButton = 'pictogram')}
+              class="dark:text-gray-400">Pictogram</LFRadio
+            >
+            <LFRadio
+              data-testid="upload-radio-btn"
+              name="Upload"
+              checked={selectedRadioButton === 'upload'}
+              on:click={() => (selectedRadioButton = 'upload')}
+              class="dark:text-gray-400">Upload</LFRadio
+            >
+          </div>
+          <div class={selectedRadioButton === 'upload' && 'hidden'}>
+            <TableSearch
+              placeholder="Search"
+              hoverable={true}
+              bind:inputValue={searchText}
+              innerDivClass="px-0"
+              divClass="relative overflow-x-auto"
             />
           </div>
-        {/if}
-
-        <div class="image-uploader" style={hideUploader ? 'display: none' : 'display: block'}>
-          <div class:bx--file--label={true}>Upload image</div>
-          <div class:bx--label-description={true}>Supported file types are .jpg and .png.</div>
-          <FileUploaderButton
-            bind:ref={fileUploaderRef}
-            bind:files={tempFiles}
-            name="avatarFile"
-            kind="tertiary"
-            labelText="Upload from computer"
-            accept={['.jpg', '.jpeg', '.png']}
+        </div>
+      </div>
+      <div id="child-flexbox-main" class="flex-1 overflow-y-auto p-2">
+        <div
+          id="pictograms"
+          class={twMerge(
+            selectedRadioButton === 'upload' && 'hidden',
+            'flex-1  flex-col overflow-y-auto'
+          )}
+        >
+          <Pictograms
+            pictograms={filteredPictograms.length > 0 ? filteredPictograms : pictogramNames}
+            bind:selectedPictogramName={tempPictogram}
           />
-          <input type="hidden" name="avatar" bind:value={$form.avatar} />
         </div>
 
-        {#if hideUploader}
-          <div class="edit-btns">
-            <Button size="small" kind="tertiary" icon={Edit} on:click={handleChangeAvatar}
-              >Change</Button
+        <div
+          id="upload-components"
+          class={twMerge('flex flex-col gap-2', selectedRadioButton === 'pictogram' && 'hidden')}
+        >
+          {#if avatarToShow}
+            <Avatar src={avatarToShow} size="xl" data-testid="image-upload-avatar" />
+          {/if}
+
+          <div class={twMerge('flex flex-col gap-2', hideUploader && 'hidden')}>
+            <P>Upload image</P>
+            <P size="sm" color="dark:text-gray-400">Supported file types are .jpg and .png.</P>
+            <Button
+              on:click={(e) => {
+                e.stopPropagation();
+                fileUploaderRef?.click();
+              }}
+              tabindex={0}
+              class="w-1/2"
             >
-            <Button size="small" kind="tertiary" icon={TrashCan} on:click={handleRemove}
-              >Remove</Button
-            >
-          </div>
-        {/if}
+              Upload from computer
+            </Button>
 
-        {#if shouldValidate && (fileNotUploaded || fileTooBig)}
-          <div class="error-box">
-            <div>{errorMsg}</div>
+            <input type="hidden" name="avatar" bind:value={$form.avatar} />
           </div>
-        {/if}
-      </div>
-    </div></Modal
-  >
-</div>
-
-<style lang="scss">
-  .hidden {
-    display: none !important;
-  }
 
-  .container {
-    :global(.bx--modal-container) {
-      height: var(
-        --modal-height
-      ); // keeps height fixed when searching pictograms, but not that size for avatar upload
-      width: 80%;
-    }
-  }
-  .avatar-upload-container {
-    display: flex;
-    flex-direction: column;
-    gap: layout.$spacing-03;
-  }
-
-  .avatar-modal {
-    display: flex;
-    flex-direction: column;
-    gap: layout.$spacing-05;
-    height: calc(100% - 3rem); // 3 rem is default modal margin-bottom, prevents extra scrollbar
-  }
-
-  .mini-avatar-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 3rem;
-    height: 3rem;
-    border-radius: 50%;
-    background-color: themes.$layer-active-03;
-    transition: background-color 70ms ease;
-    &:hover {
-      background-color: themes.$layer-selected-hover-03;
-    }
-    .mini-avatar-image {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      background-size: cover;
-      background-position: center;
-      background-repeat: no-repeat;
-    }
-  }
-
-  .avatar-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 12rem;
-    height: 12rem;
-    border-radius: 50%;
-    background-color: themes.$layer-active-03;
-    .avatar-image {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      background-size: cover;
-      background-position: center;
-      background-repeat: no-repeat;
-    }
-  }
-
-  .image-uploader {
-    display: flex;
-    flex-direction: column;
-    gap: layout.$spacing-03;
-  }
-
-  .edit-btns {
-    display: flex;
-    gap: layout.$spacing-03;
-  }
+          {#if hideUploader}
+            <div>
+              <Button on:click={handleChangeAvatar}>Change <EditOutline /></Button>
+              <Button on:click={handleRemove}>Remove <TrashBinOutline /></Button>
+            </div>
+          {/if}
+
+          {#if shouldValidate && (fileNotUploaded || fileTooBig)}
+            <div class="error-box">
+              <div>{errorMsg}</div>
+            </div>
+          {/if}
+        </div>
+      </div>
 
-  .error-box {
-    border: 2px solid $red-30;
-    color: $red-30;
-    max-width: 20rem;
-    padding: layout.$spacing-02;
-    margin-top: layout.$spacing-05;
-  }
-</style>
+      <div id="child-flexbox-footer" class="flex justify-center">
+        <Button color="alternative" class="me-2" on:click={handleCancel}>Cancel</Button>
+        <Button on:click={handleSubmit}>Save</Button>
+      </div>
+    </div>
+  </Modal>
+  <!--    Important! These inputs must be outside of the modal or the image will be lost when the modal closes-->
+  <input
+    bind:this={fileUploaderRef}
+    on:input={(e) => {
+      const file = e.currentTarget.files[0];
+      $form.avatarFile = file ?? null;
+    }}
+    multiple={false}
+    type="file"
+    tabindex="-1"
+    accept={['.jpg', '.jpeg', '.png']}
+    name="avatarFile"
+    class="sr-only"
+  />
+  <input type="hidden" name="pictogram" value={selectedPictogramName} />
+</div>
diff --git a/src/leapfrogai_ui/src/lib/components/AssistantCard.svelte b/src/leapfrogai_ui/src/lib/components/AssistantCard.svelte
new file mode 100644
index 000000000..36cc4fd96
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/AssistantCard.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import { goto, invalidate } from '$app/navigation';
+  import { Avatar, Button, Card, Dropdown, DropdownItem, Modal, P } from 'flowbite-svelte';
+  import { DotsHorizontalOutline, ExclamationCircleOutline } from 'flowbite-svelte-icons';
+  import DynamicPictogram from '$components/DynamicPictogram.svelte';
+  import { threadsStore, toastStore } from '$stores';
+  import { NO_SELECTED_ASSISTANT_ID } from '$constants';
+  import type { LFAssistant } from '$lib/types/assistants';
+
+  export let assistant: LFAssistant;
+
+  let deleteModalOpen = false;
+
+  const handleDelete = async () => {
+    const res = await fetch('/api/assistants/delete', {
+      method: 'DELETE',
+      body: JSON.stringify({ id: assistant.id }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    if ($threadsStore.selectedAssistantId === assistant.id)
+      threadsStore.setSelectedAssistantId(NO_SELECTED_ASSISTANT_ID);
+
+    deleteModalOpen = false;
+
+    if (res.ok) {
+      await invalidate('lf:assistants');
+      toastStore.addToast({
+        kind: 'info',
+        title: 'Assistant Deleted.',
+        subtitle: `${assistant.name} Assistant deleted.`
+      });
+      return;
+    }
+
+    toastStore.addToast({
+      kind: 'error',
+      title: 'Error',
+      subtitle: 'Error deleting Assistant.'
+    });
+  };
+</script>
+
+<div transition:fade={{ duration: 150 }}>
+  <Card data-testid={`assistant-card-${assistant.name}`} padding="md" class="h-full">
+    <div class="flex justify-end">
+      <DotsHorizontalOutline data-testid="assistant-edit-icon" />
+      <Dropdown class="w-36" data-testid="assistant-card-dropdown">
+        <DropdownItem on:click={() => goto(`/chat/assistants-management/edit/${assistant.id}`)}
+          >Edit</DropdownItem
+        >
+        <DropdownItem on:click={() => (deleteModalOpen = true)}>Delete</DropdownItem>
+      </Dropdown>
+    </div>
+
+    <div class="flex flex-col items-center gap-2 pb-4">
+      {#if assistant.metadata.avatar}
+        <Avatar
+          data-testid="assistant-card-avatar"
+          size="md"
+          src={`${assistant.metadata.avatar}?v=${new Date().getTime()}`}
+        />
+      {:else}
+        <DynamicPictogram iconName={assistant.metadata.pictogram || 'default'} size="md" />
+      {/if}
+      <!--With fixed width and font sizes, there isn't a simple solution for multi line text ellipses, so doing it manually at specific character length instead-->
+      <h5 class="mb-1 break-words text-xl font-medium text-gray-900 dark:text-white">
+        {assistant.name && assistant.name.length > 20
+          ? `${assistant.name.slice(0, 20)}...`
+          : assistant.name}
+      </h5>
+      <span class="overflow-hidden break-all text-center text-sm text-gray-500 dark:text-gray-400">
+        {assistant.description && assistant.description.length > 75
+          ? `${assistant.description?.slice(0, 75)}...`
+          : assistant.description}</span
+      >
+    </div>
+  </Card>
+</div>
+<Modal
+  data-testid="delete-assistant-modal"
+  bind:open={deleteModalOpen}
+  autoclose
+  title="Delete Assistant"
+  color="primary"
+>
+  <div class="flex flex-col gap-4">
+    <ExclamationCircleOutline class="mx-auto h-12 w-12 text-gray-400 dark:text-white" />
+    <P size="xl" class="text-center dark:text-gray-400">
+      Are you sure you want to delete your
+      <strong>{assistant.name}</strong>
+      assistant?
+    </P>
+    <div class="flex justify-end gap-2">
+      <Button color="alternative" size="sm">Cancel</Button>
+      <Button color="red" on:click={handleDelete} size="sm">Delete</Button>
+    </div>
+  </div></Modal
+>
diff --git a/src/leapfrogai_ui/src/lib/components/AssistantFileDropdown.svelte b/src/leapfrogai_ui/src/lib/components/AssistantFileDropdown.svelte
new file mode 100644
index 000000000..3c903f0a9
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/AssistantFileDropdown.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { Button, Checkbox, Dropdown } from 'flowbite-svelte';
+  import { ChevronDownOutline } from 'flowbite-svelte-icons';
+  import type { FilesForm } from '$lib/types/files';
+  import { filesStore, toastStore } from '$stores';
+  import LFFileUploadBtn from '$components/LFFileUploadBtn.svelte';
+  import { superForm } from 'sveltekit-superforms';
+  import { yup } from 'sveltekit-superforms/adapters';
+  import { filesSchema } from '$schemas/files';
+  import type { ActionResult } from '@sveltejs/kit';
+
+  export let accept: ReadonlyArray<string> = [];
+  export let filesForm: FilesForm;
+  export let placement: 'top' | 'bottom' = 'top';
+
+  let open;
+
+  const handleClick = (id: string) => {
+    if ($filesStore.selectedAssistantFileIds.includes(id)) {
+      filesStore.setSelectedAssistantFileIds(
+        $filesStore.selectedAssistantFileIds.filter((selectedId) => selectedId !== id)
+      );
+    } else {
+      filesStore.setSelectedAssistantFileIds([...$filesStore.selectedAssistantFileIds, id]);
+    }
+  };
+
+  const { enhance, submit } = superForm(filesForm, {
+    validators: yup(filesSchema),
+    invalidateAll: false,
+    onError() {
+      // Backend failure, not just a single file failure
+      filesStore.setAllUploadingToError();
+      toastStore.addToast({
+        kind: 'error',
+        title: 'Upload Failed',
+        subtitle: `Please try again or contact support`
+      });
+    },
+    onResult: async ({ result }) => handleResult(result)
+  });
+
+  const handleResult = async (result: ActionResult) => {
+    if (result.type === 'success') {
+      const idsToSelect: string[] = [];
+      const uploadedFiles = result.data?.uploadedFiles;
+      filesStore.updateWithUploadResults(result.data?.uploadedFiles);
+      for (const uploadedFile of uploadedFiles) {
+        idsToSelect.push(uploadedFile.id);
+      }
+      filesStore.addSelectedAssistantFileIds(idsToSelect);
+    }
+    filesStore.setUploading(false);
+  };
+</script>
+
+<div class={$$props.class}>
+  <Button data-testid="file-select-dropdown-btn">
+    Choose data sources<ChevronDownOutline class="ms-2 h-6 w-8 text-white dark:text-white" />
+  </Button>
+  <Dropdown class="w-64 space-y-3 p-3 text-sm" bind:open {placement}>
+    <div class="flex justify-center">
+      <form
+        class="file-upload-container"
+        method="POST"
+        enctype="multipart/form-data"
+        use:enhance
+        action="/chat/file-management"
+      >
+        <LFFileUploadBtn
+          size="md"
+          name="files"
+          {accept}
+          multiple
+          on:change={async (e) => {
+            const fileList = e.detail;
+            filesStore.setUploading(true);
+            filesStore.addUploadingFiles(fileList, { autoSelectUploadedFiles: true });
+            submit();
+          }}>Upload new data source</LFFileUploadBtn
+        >
+      </form>
+    </div>
+    <div class="max-h-64 overflow-y-auto">
+      {#each $filesStore.files?.map( (file) => ({ id: file.id, text: file.filename }) ) as file (file.id)}
+        <li>
+          <Checkbox
+            on:click={() => handleClick(file.id)}
+            checked={$filesStore.selectedAssistantFileIds.includes(file.id)}
+            class="overflow-hidden text-ellipsis whitespace-nowrap">{file.text}</Checkbox
+          >
+        </li>
+      {/each}
+    </div>
+  </Dropdown>
+</div>
diff --git a/src/leapfrogai_ui/src/lib/components/AssistantFileSelect.svelte b/src/leapfrogai_ui/src/lib/components/AssistantFileSelect.svelte
index b3b065e2b..868593e3f 100644
--- a/src/leapfrogai_ui/src/lib/components/AssistantFileSelect.svelte
+++ b/src/leapfrogai_ui/src/lib/components/AssistantFileSelect.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { FileUploaderItem } from 'carbon-components-svelte';
   import { fade } from 'svelte/transition';
-  import LFMultiSelect from '$components/LFMultiSelect.svelte';
   import { filesStore } from '$stores';
   import type { FilesForm } from '$lib/types/files';
   import { ACCEPTED_FILE_TYPES } from '$constants';
+  import AssistantFileDropdown from '$components/AssistantFileDropdown.svelte';
+  import FileUploaderItem from '$components/FileUploaderItem.svelte';
 
   export let filesForm: FilesForm;
 
@@ -17,28 +17,17 @@
     .filter((id) => $filesStore.selectedAssistantFileIds.includes(id));
 </script>
 
-<div id="multi-select-container">
-  <LFMultiSelect
-    label="Choose data sources"
-    items={$filesStore.files.map((file) => ({ id: file.id, text: file.filename }))}
-    direction="top"
-    accept={ACCEPTED_FILE_TYPES}
-    bind:selectedIds={$filesStore.selectedAssistantFileIds}
-    {filesForm}
-  />
-</div>
+<AssistantFileDropdown accept={ACCEPTED_FILE_TYPES} {filesForm} class="mb-6" />
 
-<div class="file-item-list">
+<div class="grid grid-cols-2 gap-4">
   {#each filteredStoreFiles as file}
-    <div transition:fade={{ duration: 70 }}>
+    <div transition:fade={{ duration: 150 }}>
       <FileUploaderItem
+        id={file.id}
         data-testid={`${file.filename}-${file.status}-uploader-item`}
         invalid={file.status === 'error'}
-        id={file.id}
         name={file.filename}
-        size="small"
         status={file.status === 'uploading' ? 'uploading' : 'edit'}
-        style="max-width: 100%"
         on:delete={() => {
           filesStore.setSelectedAssistantFileIds(
             $filesStore.selectedAssistantFileIds.filter((id) => id !== file.id)
@@ -50,25 +39,3 @@
 </div>
 
 <input type="hidden" name="data_sources" bind:value={fileIdsWithoutErrors} />
-
-<style lang="scss">
-  #multi-select-container {
-    // remove border from first item so button outline shows instead
-    :global(.bx--list-box__menu-item__option:nth-of-type(1)) {
-      border-top: none;
-    }
-  }
-
-  .file-item-list {
-    display: flex;
-    flex-direction: column;
-    gap: layout.$spacing-03;
-  }
-
-  :global(.bx--tag) {
-    // hide tag but keep spacing for multiselect text the same
-    visibility: hidden;
-    width: 0rem;
-    margin-left: 0.25rem;
-  }
-</style>
diff --git a/src/leapfrogai_ui/src/lib/components/AssistantFileSelect.test.ts b/src/leapfrogai_ui/src/lib/components/AssistantFileSelect.test.ts
index 5c938b175..6bb15f2ae 100644
--- a/src/leapfrogai_ui/src/lib/components/AssistantFileSelect.test.ts
+++ b/src/leapfrogai_ui/src/lib/components/AssistantFileSelect.test.ts
@@ -56,6 +56,7 @@ describe('AssistantFileSelect', () => {
       screen.queryByTestId(`${mockFiles[0].filename}-${mockFiles[0].status}-uploader-item`)
     ).not.toBeInTheDocument();
 
+    await userEvent.click(screen.getByTestId('file-select-dropdown-btn'));
     await userEvent.click(screen.getByText(mockFiles[0].filename));
     screen.getByTestId(`${mockFiles[0].filename}-${mockFiles[0].status}-uploader-item`);
   });
diff --git a/src/leapfrogai_ui/src/lib/components/AssistantForm.svelte b/src/leapfrogai_ui/src/lib/components/AssistantForm.svelte
index b96c19dcb..2b738982c 100644
--- a/src/leapfrogai_ui/src/lib/components/AssistantForm.svelte
+++ b/src/leapfrogai_ui/src/lib/components/AssistantForm.svelte
@@ -7,15 +7,17 @@
   import { superForm } from 'sveltekit-superforms';
   import { page } from '$app/stores';
   import { beforeNavigate, goto } from '$app/navigation';
-  import { Button, Modal, Slider, TextArea, TextInput } from 'carbon-components-svelte';
-  import AssistantAvatar from '$components/AssistantAvatar.svelte';
+  import { Button, Modal, P } from 'flowbite-svelte';
+  import Slider from '$components/Slider.svelte';
   import { yup } from 'sveltekit-superforms/adapters';
   import { filesStore, toastStore } from '$stores';
-  import InputTooltip from '$components/InputTooltip.svelte';
   import { assistantInputSchema, editAssistantInputSchema } from '$lib/schemas/assistants';
   import type { NavigationTarget } from '@sveltejs/kit';
   import { onMount } from 'svelte';
   import AssistantFileSelect from '$components/AssistantFileSelect.svelte';
+  import LFInput from '$components/LFInput.svelte';
+  import LFLabel from '$components/LFLabel.svelte';
+  import AssistantAvatar from '$components/AssistantAvatar.svelte';
 
   export let data;
 
@@ -53,8 +55,6 @@
   });
 
   let cancelModalOpen = false;
-  let files: File[] = [];
-  let selectedPictogramName = isEditMode ? $form.pictogram : 'default';
 
   let navigateTo: NavigationTarget;
   let leavePageConfirmed = false;
@@ -86,171 +86,110 @@
   });
 </script>
 
-<form method="POST" enctype="multipart/form-data" use:enhance class="assistant-form">
-  <div class="container">
-    <div class="inner-container">
-      <div class="top-row">
-        <div class="title">{`${isEditMode ? 'Edit' : 'New'} Assistant`}</div>
-        <AssistantAvatar bind:files bind:selectedPictogramName {form} />
-      </div>
-      <input type="hidden" name="id" value={$form.id} />
-      <TextInput
-        name="name"
-        autocomplete="off"
-        labelText="Name"
-        placeholder="Assistant name"
-        bind:value={$form.name}
-        maxlength={ASSISTANTS_NAME_MAX_LENGTH}
-        invalid={!!$errors.name}
-        invalidText={$errors.name?.toString()}
-      />
-
-      <InputTooltip
-        name="description"
-        labelText="Tagline"
-        tooltipText="Taglines display on assistant tiles"
-      />
-
-      <TextInput
-        name="description"
-        autocomplete="off"
-        placeholder="Here to help..."
-        labelText="Description"
-        hideLabel
-        bind:value={$form.description}
-        maxlength={ASSISTANTS_DESCRIPTION_MAX_LENGTH}
-        invalid={!!$errors.description}
-        invalidText={$errors.description?.toString()}
-      />
-
-      <InputTooltip
-        name="instructions"
-        labelText="Instructions"
-        tooltipText="Detailed instructions to guide your assistant's responses and behavior"
-      />
-
-      <TextArea
-        name="instructions"
-        autocomplete="off"
-        labelText="Instructions"
-        bind:value={$form.instructions}
-        rows={6}
-        placeholder="You'll act as..."
-        hideLabel
-        invalid={!!$errors.instructions}
-        invalidText={$errors.instructions?.toString()}
-        maxlength={ASSISTANTS_INSTRUCTIONS_MAX_LENGTH}
-      />
+<form method="POST" enctype="multipart/form-data" use:enhance class="w-1/2">
+  <div class="flex flex-col py-2">
+    <div class="flex items-center justify-between">
+      <h5 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">
+        {`${isEditMode ? 'Edit' : 'New'} Assistant`}
+      </h5>
 
-      <InputTooltip
-        name="temperature"
-        labelText="Temperature"
-        tooltipText="Adjust the slider to set the creativity level of your assistant's responses"
-      />
-      <Slider
-        name="temperature"
-        bind:value={$form.temperature}
-        hideLabel
-        hideTextInput
-        fullWidth
-        min={0}
-        max={1}
-        step={0.1}
-        minLabel="Min"
-        maxLabel="Max"
-        invalid={!!$errors.temperature}
-      />
-
-      <!--Note - Data Sources is a placeholder and will be completed in a future story-->
-      <InputTooltip
-        name="data_sources"
-        labelText="Data Sources"
-        tooltipText="Specific files your assistant can search and reference"
-      />
+      <AssistantAvatar {form} />
+    </div>
+    <input type="hidden" name="id" value={$form.id} />
+    <LFInput
+      id="name"
+      name="name"
+      label="Name *"
+      placeholder="Assistant name"
+      autocomplete="off"
+      bind:value={$form.name}
+      maxlength={ASSISTANTS_NAME_MAX_LENGTH}
+      errorText={!!$errors.name && $errors.name.toString()}
+    />
+
+    <LFInput
+      id="description"
+      name="description"
+      label="Tagline *"
+      placeholder="Here to help..."
+      autocomplete="off"
+      bind:value={$form.description}
+      maxlength={ASSISTANTS_DESCRIPTION_MAX_LENGTH}
+      tooltipText="Taglines display on assistant tiles"
+      errorText={!!$errors.description && $errors.description.toString()}
+    />
+
+    <LFInput
+      id="instructions"
+      name="instructions"
+      label="Instructions *"
+      placeholder="You'll act as..."
+      autocomplete="off"
+      textArea
+      bind:value={$form.instructions}
+      maxlength={ASSISTANTS_INSTRUCTIONS_MAX_LENGTH}
+      tooltipText="Detailed instructions to guide your assistant's responses and behavior"
+      errorText={!!$errors.instructions && $errors.instructions.toString()}
+    />
+
+    <Slider
+      id="temperature"
+      name="temperature"
+      label="Temperature"
+      bind:value={$form.temperature}
+      tooltipText="Adjust the slider to set the creativity level of your assistant's responses"
+      showThumb={false}
+    />
+
+    <div class="mb-6">
+      <LFLabel
+        id="data_sources"
+        tooltipText="Specific files your assistant can search and reference">Data Sources</LFLabel
+      >
       <AssistantFileSelect filesForm={data.filesForm} />
-      <input
-        type="hidden"
-        name="vectorStoreId"
-        value={data?.assistant?.tool_resources?.file_search?.vector_store_ids[0] || undefined}
-      />
-
-      <div class="btns-container">
-        <Button
-          kind="secondary"
-          size="small"
-          on:click={() => {
-            bypassCancelWarning = true;
-            goto('/chat/assistants-management');
-          }}>Cancel</Button
-        >
+    </div>
 
-        <Button
-          kind="primary"
-          size="small"
-          type="submit"
-          disabled={$submitting || $filesStore.uploading}>Save</Button
-        >
-        {#if $delayed}
-          <span>Processing, please wait...</span>
-        {/if}
-      </div>
+    <input
+      type="hidden"
+      name="vectorStoreId"
+      value={data?.assistant?.tool_resources?.file_search?.vector_store_ids[0] || undefined}
+    />
+
+    <div>
+      <Button
+        data-testid="assistant-form-cancel-btn"
+        color="alternative"
+        on:click={() => {
+          bypassCancelWarning = true;
+          goto('/chat/assistants-management');
+        }}>Cancel</Button
+      >
+
+      <Button type="submit" disabled={$submitting || $filesStore.uploading}>Save</Button>
+      {#if $delayed}
+        <P class="inline text-gray-700 dark:text-gray-400">Processing, please wait...</P>
+      {/if}
     </div>
   </div>
 </form>
 
-<div class="cancel-modal">
-  <Modal
-    bind:open={cancelModalOpen}
-    preventCloseOnClickOutside
-    modalHeading="Unsaved Changes"
-    primaryButtonText="Leave this page"
-    secondaryButtonText="Stay on page"
-    on:click:button--secondary={() => (cancelModalOpen = false)}
-    on:submit={() => {
-      leavePageConfirmed = true;
-      if (navigateTo) goto(navigateTo.url.href);
-    }}
-    ><p>
-      You have unsaved changes. Do you want to leave this page? Unsaved changes will be deleted.
-    </p></Modal
+<Modal bind:open={cancelModalOpen} title="Unsaved Changes" color="primary"
+  ><P class="dark:text-gray-400"
+    >You have unsaved changes. Do you want to leave this page? Unsaved changes will be deleted.</P
   >
-</div>
-
-<style lang="scss">
-  .assistant-form {
-    .container {
-      display: flex;
-      justify-content: center;
-    }
-    .inner-container {
-      display: flex;
-      flex-direction: column;
-      gap: 1.5rem;
-      width: 50%;
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
-    }
-    .top-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .title {
-      @include type.type-style('heading-05');
-    }
-
-    .cancel-modal {
-      :global(.bx--modal-container) {
-        position: absolute;
-        top: 25%;
-      }
-    }
-
-    .btns-container {
-      display: flex;
-      align-items: center;
-      gap: 0.2rem;
-    }
-  }
-</style>
+  <div class="flex justify-end gap-2">
+    <Button color="alternative" on:click={() => (cancelModalOpen = false)} size="sm"
+      >Stay on page</Button
+    >
+    <Button
+      color="red"
+      on:click={() => {
+        leavePageConfirmed = true;
+        if (navigateTo) goto(navigateTo.url.href);
+      }}
+      size="sm">Leave this page</Button
+    >
+
+    <div class="flex justify-end gap-2"></div>
+  </div></Modal
+>
diff --git a/src/leapfrogai_ui/src/lib/components/AssistantTile.svelte b/src/leapfrogai_ui/src/lib/components/AssistantTile.svelte
deleted file mode 100644
index 32526e7ea..000000000
--- a/src/leapfrogai_ui/src/lib/components/AssistantTile.svelte
+++ /dev/null
@@ -1,164 +0,0 @@
-<script lang="ts">
-  import { goto, invalidate } from '$app/navigation';
-  import { fade } from 'svelte/transition';
-  import DynamicPictogram from '$components/DynamicPictogram.svelte';
-  import { Modal, OverflowMenu, OverflowMenuItem } from 'carbon-components-svelte';
-  import { threadsStore, toastStore } from '$stores';
-  import { Edit, TrashCan } from 'carbon-icons-svelte';
-  import type { LFAssistant } from '$lib/types/assistants';
-  import { NO_SELECTED_ASSISTANT_ID } from '$constants';
-
-  export let assistant: LFAssistant;
-
-  let deleteModalOpen = false;
-
-  const handleDelete = async () => {
-    const res = await fetch('/api/assistants/delete', {
-      method: 'DELETE',
-      body: JSON.stringify({ id: assistant.id }),
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-    if ($threadsStore.selectedAssistantId === assistant.id)
-      threadsStore.setSelectedAssistantId(NO_SELECTED_ASSISTANT_ID);
-
-    deleteModalOpen = false;
-
-    if (res.ok) {
-      await invalidate('lf:assistants');
-      toastStore.addToast({
-        kind: 'info',
-        title: 'Assistant Deleted.',
-        subtitle: `${assistant.name} Assistant deleted.`
-      });
-      return;
-    }
-
-    toastStore.addToast({
-      kind: 'error',
-      title: 'Error',
-      subtitle: 'Error deleting Assistant.'
-    });
-  };
-</script>
-
-<div
-  class="assistant-tile"
-  transition:fade={{ duration: 70 }}
-  data-testid={`assistant-tile-${assistant.name}`}
->
-  <div class="overflow-menu-container">
-    <OverflowMenu flipped size="sm" data-testid="overflow-menu">
-      <OverflowMenuItem on:click={() => goto(`/chat/assistants-management/edit/${assistant.id}`)}>
-        <div class="overflow-menu-item">
-          Edit <Edit />
-        </div>
-      </OverflowMenuItem>
-      <OverflowMenuItem on:click={() => (deleteModalOpen = true)}>
-        <div class="overflow-menu-item">
-          Delete <TrashCan />
-        </div></OverflowMenuItem
-      >
-    </OverflowMenu>
-  </div>
-
-  {#if assistant.metadata.avatar}
-    <div class="mini-avatar-container" data-testid="mini-avatar-container">
-      <div
-        class="mini-avatar-image"
-        style={`background-image: url(${assistant.metadata.avatar}?v=${new Date().getTime()}`}
-      />
-    </div>
-  {:else}
-    <DynamicPictogram iconName={assistant.metadata.pictogram || 'default'} />
-  {/if}
-  <!--With fixed width and font sizes, there isn't a simple solution for multi line text ellipses, so doing it manually at specific character length instead-->
-  <p class="name">
-    {assistant.name && assistant.name.length > 20
-      ? `${assistant.name.slice(0, 20)}...`
-      : assistant.name}
-  </p>
-  <p class="description">
-    {assistant.description && assistant.description.length > 75
-      ? `${assistant.description?.slice(0, 75)}...`
-      : assistant.description}
-  </p>
-</div>
-
-<Modal
-  danger
-  preventCloseOnClickOutside
-  bind:open={deleteModalOpen}
-  modalHeading="Delete Assistant"
-  primaryButtonText="Delete"
-  secondaryButtonText="Cancel"
-  on:click:button--secondary={() => (deleteModalOpen = false)}
-  on:submit={() => handleDelete()}
->
-  <p>
-    Are you sure you want to delete your
-    <span style="font-weight: bold">{assistant.name}</span>
-    assistant?
-  </p>
-</Modal>
-
-<style lang="scss">
-  .assistant-tile {
-    background-color: themes.$layer-active-03;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    width: 288px;
-    height: 172px;
-    padding: 1rem;
-    gap: layout.$spacing-05;
-
-    .name {
-      @include type.type-style('heading-03');
-      height: 1.75rem;
-    }
-
-    .description {
-      @include type.type-style('body-01');
-      width: 256px;
-      height: 2.5rem;
-      word-wrap: break-word;
-      overflow: hidden;
-    }
-
-    .overflow-menu-container {
-      position: absolute;
-      top: 0.5rem;
-      right: 0.5rem;
-
-      .overflow-menu-item {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
-    }
-  }
-
-  .mini-avatar-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: 50%;
-
-    .mini-avatar-image {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      background-size: cover;
-      background-position: center;
-      background-repeat: no-repeat;
-    }
-  }
-</style>
diff --git a/src/leapfrogai_ui/src/lib/components/AttachFile.svelte b/src/leapfrogai_ui/src/lib/components/AttachFile.svelte
deleted file mode 100644
index 8d07ef537..000000000
--- a/src/leapfrogai_ui/src/lib/components/AttachFile.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-  import { Attachment } from 'carbon-icons-svelte';
-  import { Button } from 'carbon-components-svelte';
-  import { ACCEPTED_FILE_TYPES } from '$constants';
-
-  export let disabled = false;
-  export let accept = ACCEPTED_FILE_TYPES;
-  export let multiple = false;
-  export let files: File[] = [];
-  export let handleAttach: () => void;
-</script>
-
-<Button
-  icon={Attachment}
-  kind="ghost"
-  size="small"
-  iconDescription="Attach File"
-  on:click={handleAttach}
-/>
-
-<input
-  {disabled}
-  type="file"
-  tabindex="-1"
-  accept={accept.join(',')}
-  {multiple}
-  name="files"
-  class:bx--visually-hidden={true}
-  {...$$restProps}
-  on:change|stopPropagation={({ target }) => {
-    if (target) {
-      files = [...target.files];
-    }
-  }}
-  on:click
-  on:click={({ target }) => {
-    if (target) {
-      target.value = null;
-    }
-  }}
-/>
diff --git a/src/leapfrogai_ui/src/lib/components/ChatSidebar.svelte b/src/leapfrogai_ui/src/lib/components/ChatSidebar.svelte
deleted file mode 100644
index dff19f537..000000000
--- a/src/leapfrogai_ui/src/lib/components/ChatSidebar.svelte
+++ /dev/null
@@ -1,388 +0,0 @@
-<script lang="ts">
-  import {
-    Button,
-    Modal,
-    SideNav,
-    SideNavItems,
-    SideNavMenu,
-    SideNavMenuItem,
-    TextInput
-  } from 'carbon-components-svelte';
-  import { AddComment } from 'carbon-icons-svelte';
-  import { dates } from '$helpers';
-  import { MAX_LABEL_SIZE } from '$lib/constants';
-  import { threadsStore, uiStore } from '$stores';
-  import { page } from '$app/stores';
-  import ImportExport from '$components/ImportExport.svelte';
-  import Fuse, { type FuseResult, type IFuseOptions } from 'fuse.js';
-  import { onMount } from 'svelte';
-  import type { LFThread } from '$lib/types/threads';
-  import { getMessageText } from '$helpers/threads';
-  import { goto } from '$app/navigation';
-  import ThreadOverflowMenu from '$components/ThreadOverflowMenu.svelte';
-
-  let deleteModalOpen = false;
-  let editLabelInputDisabled = false;
-  let scrollOffset = 0;
-  let scrollBoxRef: HTMLElement;
-  let searchText = '';
-  let searchResults: FuseResult<LFThread>[];
-  let filteredThreads: LFThread[] = [];
-  let editLabelText: string | undefined;
-  let sideNavItemRefs: { [id: string]: HTMLAnchorElement } = {};
-  let editMode = false;
-
-  $: activeThread = $page.data.thread;
-  $: organizedThreads = dates.organizeThreadsByDate(
-    searchText !== '' ? filteredThreads : $threadsStore.threads
-  );
-  $: selectedThread = $threadsStore.threads.find(
-    (thread) => thread.id === $uiStore.selectedThreadOverflowMenuId
-  );
-
-  const resetEditMode = () => {
-    uiStore.setSelectedThreadOverflowMenuId('');
-    editLabelText = undefined;
-    editLabelInputDisabled = false;
-    editMode = false;
-  };
-
-  const saveNewLabel = async () => {
-    if ($uiStore.selectedThreadOverflowMenuId && editLabelText) {
-      editLabelInputDisabled = true;
-      await threadsStore.updateThreadLabel($uiStore.selectedThreadOverflowMenuId, editLabelText);
-    }
-    resetEditMode();
-  };
-
-  const handleEdit = async (e: KeyboardEvent | FocusEvent) => {
-    if (e.type === 'blur') {
-      await saveNewLabel();
-    }
-    if (e.type === 'keydown') {
-      const keyboardEvent = e as KeyboardEvent;
-      if (keyboardEvent.key === 'Escape') {
-        resetEditMode();
-        return;
-      }
-
-      if (keyboardEvent.key === 'Enter' || keyboardEvent.key === 'Tab') {
-        await saveNewLabel();
-      }
-    }
-  };
-
-  const handleDelete = async () => {
-    delete sideNavItemRefs[$uiStore.selectedThreadOverflowMenuId];
-    deleteModalOpen = false;
-    if ($uiStore.selectedThreadOverflowMenuId) {
-      await threadsStore.deleteThread($uiStore.selectedThreadOverflowMenuId);
-    }
-    await goto('/chat');
-  };
-
-  const handleActiveThreadChange = (id: string) => {
-    threadsStore.changeThread(id);
-  };
-
-  const options: IFuseOptions<unknown> = {
-    keys: ['metadata.label', 'messages.content'],
-    minMatchCharLength: 3,
-    shouldSort: false,
-    findAllMatches: true,
-    threshold: 0, // perfect matches only
-    ignoreLocation: true
-  };
-
-  $: if (searchText) {
-    // Remap the message content to be a string instead of string | nested object
-    const threadsWithTextMessages = $threadsStore.threads.map((thread) => ({
-      ...thread,
-      messages: thread.messages?.map((message) => ({
-        ...message,
-        content: getMessageText(message)
-      }))
-    }));
-
-    const fuse = new Fuse(threadsWithTextMessages, options);
-    searchResults = fuse.search(searchText);
-    filteredThreads = searchResults.map((result) => result.item);
-  }
-
-  onMount(() => {
-    // When trying to set the isSideNavOpen to true when initialized as a variable
-    // Header component overrides it to false so menu closes, setting to true here
-    // to prevent that
-    uiStore.setIsSideNavOpen(true);
-  });
-</script>
-
-<SideNav
-  bind:isOpen={$uiStore.isSideNavOpen}
-  aria-label="side navigation"
-  style="background-color: g90;"
->
-  <div class="inner-side-nav-container">
-    <SideNavItems>
-      <div class="side-nav-items-container">
-        <div style="height: 100%">
-          <div class="side-nav-items-container">
-            <div class="new-chat-container">
-              <Button
-                kind="secondary"
-                size="small"
-                icon={AddComment}
-                class="new-chat-btn"
-                id="new-chat-btn"
-                aria-label="new thread"
-                on:click={() => handleActiveThreadChange('')}>New Chat</Button
-              >
-              <TextInput
-                light
-                size="sm"
-                placeholder="Search..."
-                bind:value={searchText}
-                maxlength={25}
-              />
-              <hr id="divider" class="divider" />
-            </div>
-
-            <div
-              class:noScroll={$uiStore.selectedThreadOverflowMenuId !== '' || editMode}
-              bind:this={scrollBoxRef}
-              class="threads"
-              data-testid="threads"
-              on:scroll={() => (scrollOffset = scrollBoxRef.scrollTop)}
-            >
-              {#each organizedThreads as category}
-                {#if category.threads.length > 0}
-                  <SideNavMenu text={category.label} expanded data-testid="side-nav-menu">
-                    {#each category.threads as thread (thread.id)}
-                      <SideNavMenuItem
-                        data-testid="side-nav-menu-item-{thread.metadata.label}"
-                        id="side-nav-menu-item-{thread.id}"
-                        bind:ref={sideNavItemRefs[thread.id]}
-                        isSelected={activeThread?.id === thread.id}
-                        on:click={() => {
-                          uiStore.setSelectedThreadOverflowMenuId('');
-                          handleActiveThreadChange(thread.id);
-                        }}
-                      >
-                        <div class="menu-content">
-                          {#if editMode && $uiStore.selectedThreadOverflowMenuId === thread.id}
-                            <TextInput
-                              bind:value={editLabelText}
-                              size="sm"
-                              class="edit-thread"
-                              on:keydown={(e) => {
-                                e.stopPropagation();
-                                handleEdit(e);
-                              }}
-                              on:blur={(e) => {
-                                e.stopPropagation();
-                                handleEdit(e);
-                              }}
-                              on:click={(e) => {
-                                e.stopPropagation();
-                              }}
-                              autofocus
-                              maxlength={MAX_LABEL_SIZE}
-                              readonly={editLabelInputDisabled}
-                              aria-label="edit thread"
-                            />
-                          {:else}
-                            <div data-testid="thread-label-{thread.id}" class="menu-text">
-                              {thread.metadata.label}
-                            </div>
-                            <div>
-                              <ThreadOverflowMenu
-                                {thread}
-                                {scrollOffset}
-                                parentSideNavRef={sideNavItemRefs[thread.id]}
-                                bind:editLabelText
-                                bind:editMode
-                                bind:deleteModalOpen
-                              />
-                            </div>
-                          {/if}
-                        </div>
-                      </SideNavMenuItem>
-                    {/each}
-                  </SideNavMenu>
-                {/if}
-              {/each}
-            </div>
-            <div>
-              <hr id="divider" class="divider" />
-              <ImportExport />
-            </div>
-          </div>
-        </div>
-      </div></SideNavItems
-    >
-
-    <Modal
-      danger
-      preventCloseOnClickOutside
-      bind:open={deleteModalOpen}
-      modalHeading="Delete Chat"
-      primaryButtonText="Delete"
-      secondaryButtonText="Cancel"
-      on:click:button--secondary={() => (deleteModalOpen = false)}
-      on:open
-      on:close
-      on:submit={handleDelete}
-      >Are you sure you want to delete your <strong
-        >{selectedThread?.metadata.label.substring(0, MAX_LABEL_SIZE)}</strong
-      > chat?</Modal
-    >
-  </div></SideNav
->
-
-<!-- NOTE - Carbon Components Svelte does not yet support theming of the UI Shell components so several
-properties had to be manually overridden.
-https://github.com/carbon-design-system/carbon-components-svelte/issues/892
--->
-<style lang="scss">
-  .inner-side-nav-container {
-    height: 100%;
-
-    :global(.bx--overflow-menu) {
-      width: 16px;
-      height: 32px;
-      z-index: 1;
-    }
-
-    :global(.bx--overflow-menu-options) {
-      left: 20px !important;
-    }
-  }
-
-  :global(.bx--side-nav__item) {
-    list-style-type: none;
-  }
-
-  .noScroll {
-    overflow-y: hidden !important;
-  }
-
-  .side-nav-items-container {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    :global(.bx--side-nav__divider) {
-      margin: layout.$spacing-03 0 0 0;
-      background-color: themes.$border-subtle-01;
-    }
-  }
-
-  .new-chat-container {
-    display: flex;
-    flex-direction: column;
-    gap: layout.$spacing-03;
-    padding: layout.$spacing-05;
-
-    :global(button.new-chat-btn) {
-      width: 100%;
-    }
-  }
-
-  .menu-content {
-    width: 100% !important;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .menu-text {
-      width: 192px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      color: themes.$text-secondary;
-    }
-  }
-
-  // The following overflow: visible !important overrides allow the OverflowMenu component
-  // to display correctly. There may be a better way to do this, but just realize you have
-  // to override things at several levels to get results.
-  // The !important is necessary for the changes to work in production builds.
-  .threads {
-    flex-grow: 1;
-    scrollbar-width: none;
-    overflow-y: auto;
-  }
-
-  :global(.bx--side-nav__navigation) {
-    overflow: visible !important;
-
-    :global(.bx--side-nav__item) {
-      overflow: visible !important;
-      cursor: pointer;
-    }
-  }
-
-  :global(.bx--side-nav__link) {
-    &:hover {
-      background-color: #4d4d4d !important;
-    }
-  }
-
-  :global(.bx--side-nav__link[aria-current='page']) {
-    background-color: #4d4d4d !important;
-  }
-
-  :global(.bx--side-nav__link-text) {
-    position: relative;
-    display: flex;
-    flex-grow: 1;
-    justify-content: space-between;
-    text-align: left;
-    overflow: visible !important;
-    color: themes.$text-secondary !important;
-  }
-
-  :global(.bx--side-nav__navigation) {
-    background-color: themes.$layer-01 !important;
-    list-style: none;
-    height: calc(100vh - var(--header-height)) !important;
-    color: themes.$text-secondary !important;
-  }
-
-  :global(.bx--side-nav__items) {
-    text-align: center;
-    overflow: visible !important;
-    height: 100%;
-  }
-
-  :global(.bx--side-nav__submenu) {
-    color: themes.$text-secondary !important;
-
-    :global(svg) {
-      stroke: themes.$text-secondary;
-    }
-
-    &:hover {
-      background-color: #4d4d4d !important;
-    }
-  }
-
-  .label-edit-mode {
-    :global(.bx--side-nav__link) {
-      padding: 0 layout.$spacing-05 0 layout.$spacing-07;
-    }
-
-    :global(.bx--side-nav__link[aria-current='page']) {
-      background-color: themes.$layer-01 !important;
-    }
-
-    :global(input) {
-      height: 1.5rem;
-    }
-
-    :global(.bx--text-input) {
-      border-bottom: none;
-    }
-  }
-</style>
diff --git a/src/leapfrogai_ui/src/lib/components/Citation.svelte b/src/leapfrogai_ui/src/lib/components/Citation.svelte
index 4dd2003d8..c5931ed1e 100644
--- a/src/leapfrogai_ui/src/lib/components/Citation.svelte
+++ b/src/leapfrogai_ui/src/lib/components/Citation.svelte
@@ -2,7 +2,7 @@
   import { browser } from '$app/environment';
   import { toastStore } from '$stores';
   import type { FileObject } from 'openai/resources/files';
-  import { ArrowUp } from 'carbon-icons-svelte';
+  import { ArrowUpOutline } from 'flowbite-svelte-icons';
   export let file: FileObject;
   export let index: string;
 
@@ -38,24 +38,12 @@
 </script>
 
 <button
-  class="centered-flexbox citation-container remove-btn-style"
+  class="flex items-center justify-center gap-1"
   on:click={(e) => {
     e.preventDefault();
     handleClick();
   }}
 >
   <span class="link">{`[${index}] ${file.filename}`}</span>
-  <ArrowUp class="link" color="#78a9ff" style="cursor: pointer;" />
+  <ArrowUpOutline class="link cursor-pointer" color="#78a9ff" />
 </button>
-
-<style lang="scss">
-  .citation-container {
-    gap: layout.$spacing-02;
-  }
-  .link {
-    @include type.type-style('body-01');
-    text-decoration: none;
-    color: #78a9ff;
-    cursor: pointer;
-  }
-</style>
diff --git a/src/leapfrogai_ui/src/lib/components/CopyToClipboardBtn.svelte b/src/leapfrogai_ui/src/lib/components/CopyToClipboardBtn.svelte
index 846ad6ca1..4fe7f458f 100644
--- a/src/leapfrogai_ui/src/lib/components/CopyToClipboardBtn.svelte
+++ b/src/leapfrogai_ui/src/lib/components/CopyToClipboardBtn.svelte
@@ -1,15 +1,17 @@
 <script lang="ts">
-  import { Copy } from 'carbon-icons-svelte';
-  import { Button } from 'carbon-components-svelte';
+  import { Button } from 'flowbite-svelte';
   import { toastStore } from '$stores';
+  import { FileCopyOutline } from 'flowbite-svelte-icons';
+  import { twMerge } from 'tailwind-merge';
 
   export let value: string;
   export let toastTitle = 'Copied';
-  export let btnText = 'Copy';
-  export let size: 'small' | 'default' | 'field' | 'lg' | 'xl' | undefined = 'small';
+  export let btnText = '';
+  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined = 'sm';
   export let testId: string;
 
-  const handleClick = async () => {
+  const handleClick = async (e) => {
+    e.stopPropagation();
     if (value) {
       await navigator.clipboard.writeText(value);
       toastStore.addToast({
@@ -20,6 +22,10 @@
   };
 </script>
 
-<Button data-testid={testId} kind="tertiary" icon={Copy} {size} on:click={handleClick}
-  >{btnText}</Button
+<Button
+  data-testid={testId}
+  color="alternative"
+  {size}
+  on:click={handleClick}
+  class={twMerge('dark:text-white', $$props.class)}>{btnText}<FileCopyOutline /></Button
 >
diff --git a/src/leapfrogai_ui/src/lib/components/DynamicPictogram.svelte b/src/leapfrogai_ui/src/lib/components/DynamicPictogram.svelte
index 39eecf0f8..5e0356dcc 100644
--- a/src/leapfrogai_ui/src/lib/components/DynamicPictogram.svelte
+++ b/src/leapfrogai_ui/src/lib/components/DynamicPictogram.svelte
@@ -1,18 +1,30 @@
 <script lang="ts">
   import { iconMap } from '$lib/constants/iconMap';
+  import { twMerge } from 'tailwind-merge';
 
   export let iconName = 'default';
-  export let width = '40px';
-  export let height = '2.5rem';
+  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none' = 'md';
 
   let Pictogram = iconMap.default;
 
+  const sizes = {
+    xs: 'w-6 h-6',
+    sm: 'w-8 h-8',
+    md: 'w-10 h-10',
+    lg: 'w-20 h-20',
+    xl: 'w-36 h-36',
+    none: ''
+  };
+
   $: {
     // Avoids a complex type union error
     if (iconName in iconMap) {
       Pictogram = iconMap[iconName as keyof typeof iconMap];
     }
   }
+
+  let pictogramClass: string;
+  $: pictogramClass = twMerge(sizes[size], $$props.class);
 </script>
 
-<svelte:component this={Pictogram} {width} {height} data-testid={`pictogram-${iconName}`} />
+<svelte:component this={Pictogram} class={pictogramClass} data-testid={`pictogram-${iconName}`} />
diff --git a/src/leapfrogai_ui/src/lib/components/FileUploadMenuItem.svelte b/src/leapfrogai_ui/src/lib/components/FileUploadMenuItem.svelte
deleted file mode 100644
index 89364f8fe..000000000
--- a/src/leapfrogai_ui/src/lib/components/FileUploadMenuItem.svelte
+++ /dev/null
@@ -1,163 +0,0 @@
-<script lang="ts">
-  import { Upload } from 'carbon-icons-svelte';
-  import { ListBoxMenuItem } from 'carbon-components-svelte';
-  import { createEventDispatcher } from 'svelte';
-  import type { FilesForm } from '$lib/types/files';
-  import { filesStore, toastStore } from '$stores';
-  import { superForm } from 'sveltekit-superforms';
-  import { yup } from 'sveltekit-superforms/adapters';
-  import { filesSchema } from '$schemas/files';
-  import type { ActionResult } from '@sveltejs/kit';
-
-  export let multiple = false;
-  export let files: File[] = [];
-  export let labelText = 'Add file';
-  export let ref: HTMLInputElement | null = null;
-  export let id = 'ccs-' + Math.random().toString(36);
-  export let disabled = false;
-  export let tabindex = '0';
-  export let role = 'button';
-  export let accept: ReadonlyArray<string> = [];
-  export let disableLabelChanges = false;
-
-  export let filesForm: FilesForm; // for the form
-  export let open: boolean; //Parent LFMultiSelect open reactive variable
-
-  let initialLabelText = labelText;
-
-  const dispatch = createEventDispatcher();
-
-  $: if (ref && files.length === 0) {
-    labelText = initialLabelText;
-    ref.value = '';
-  }
-
-  $: if (files.length > 0) {
-    handleUpload();
-  }
-
-  const handleUpload = () => {
-    open = false; // close parent multi select
-    filesStore.setUploading(true);
-    filesStore.addUploadingFiles(files, { autoSelectUploadedFiles: true });
-    submit();
-  };
-
-  // The parent ListBox that uses this component has on:click|preventDefault for the other
-  // items in the list box to prevent it from closing. We get around that with this function
-  // to ensure you can still open a file upload dialog.
-  const handleClick = (e: MouseEvent) => {
-    e.stopPropagation();
-    if (ref) {
-      ref.click();
-    }
-  };
-
-  const handleResult = async (result: ActionResult) => {
-    if (result.type === 'success') {
-      const idsToSelect: string[] = [];
-      const uploadedFiles = result.data?.uploadedFiles;
-      filesStore.updateWithUploadResults(result.data?.uploadedFiles);
-      for (const uploadedFile of uploadedFiles) {
-        idsToSelect.push(uploadedFile.id);
-      }
-      filesStore.addSelectedAssistantFileIds(idsToSelect);
-    }
-    filesStore.setUploading(false);
-  };
-
-  const { enhance, submit } = superForm(filesForm, {
-    validators: yup(filesSchema),
-    invalidateAll: false,
-    onError() {
-      // Backend failure, not just a single file failure
-      filesStore.setAllUploadingToError();
-      toastStore.addToast({
-        kind: 'error',
-        title: 'Upload Failed',
-        subtitle: `Please try again or contact support`
-      });
-    },
-    onResult: async ({ result }) => handleResult(result)
-  });
-</script>
-
-<form
-  class="file-upload-container"
-  method="POST"
-  enctype="multipart/form-data"
-  use:enhance
-  action="/chat/file-management"
->
-  <ListBoxMenuItem on:click={handleClick}>
-    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-    <label
-      for={id}
-      aria-disabled={disabled}
-      tabindex={disabled ? '-1' : tabindex}
-      on:keydown
-      on:keydown={({ key }) => {
-        if (key === ' ' || key === 'Enter') {
-          ref?.click();
-        }
-      }}
-    >
-      <span {role}>
-        <slot name="labelText">
-          <div class="upload-item">
-            <div class="upload-icon">
-              <Upload />
-            </div>
-            <span class="bx--checkbox-label-text">{labelText}</span>
-          </div>
-        </slot>
-      </span>
-    </label>
-    <input
-      bind:this={ref}
-      {disabled}
-      type="file"
-      tabindex="-1"
-      {accept}
-      {multiple}
-      name="files"
-      class:bx--visually-hidden={true}
-      {...$$restProps}
-      on:change|stopPropagation={({ target }) => {
-        if (target) {
-          files = [...target.files];
-          if (files && !disableLabelChanges) {
-            labelText = files.length > 1 ? `${files.length} files` : files[0].name;
-          }
-          dispatch('change', files);
-        }
-      }}
-      on:click
-      on:click={({ target }) => {
-        if (target) {
-          target.value = null;
-        }
-      }}
-    />
-  </ListBoxMenuItem>
-</form>
-
-<style lang="scss">
-  .file-upload-container {
-    outline: 1px solid themes.$border-subtle-03;
-  }
-
-  .upload-item {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  .upload-icon {
-    display: flex;
-    width: 1.4rem;
-    justify-content: center;
-    margin-right: 0.3rem;
-  }
-</style>
diff --git a/src/leapfrogai_ui/src/lib/components/FileUploaderItem.svelte b/src/leapfrogai_ui/src/lib/components/FileUploaderItem.svelte
new file mode 100644
index 000000000..cf7aba055
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/FileUploaderItem.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import Filename from '$components/Filename.svelte';
+  import { Card } from 'flowbite-svelte';
+
+  export let id = 'ccs-' + Math.random().toString(36);
+  export let status: 'uploading' | 'edit' | 'complete' = 'uploading';
+  export let invalid = false;
+  export let name = '';
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<Card {id} class="w-full " padding="xs" {...$$restProps}>
+  <div class="flex items-center justify-between">
+    <p
+      class="overflow-hidden text-ellipsis whitespace-nowrap font-normal leading-tight text-gray-700 dark:text-gray-400"
+    >
+      {name}
+    </p>
+
+    <Filename
+      on:keydown={({ key }) => {
+        if (key === ' ' || key === 'Enter') {
+          dispatch('delete', id);
+        }
+      }}
+      on:click={() => {
+        dispatch('delete', id);
+      }}
+      {status}
+      {invalid}
+    />
+  </div>
+</Card>
diff --git a/src/leapfrogai_ui/src/lib/components/Filename.svelte b/src/leapfrogai_ui/src/lib/components/Filename.svelte
new file mode 100644
index 000000000..9e7c76dcd
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/Filename.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { BanOutline, CheckOutline, CloseOutline } from 'flowbite-svelte-icons';
+  import { Spinner } from 'flowbite-svelte';
+  import IconButton from '$components/IconButton.svelte';
+
+  export let status = 'uploading';
+  export let invalid = false;
+</script>
+
+{#if status === 'uploading'}
+  <Spinner color="gray" />
+{/if}
+
+{#if status === 'edit'}
+  {#if invalid}
+    <BanOutline tabindex="0" color="red" />
+  {:else}
+    <IconButton tabindex="0" on:click on:keydown>
+      <CloseOutline />
+    </IconButton>
+  {/if}
+{/if}
+
+{#if status === 'complete'}
+  <CheckOutline tabindex="0" color="green" />
+{/if}
diff --git a/src/leapfrogai_ui/src/lib/components/HeaderButton.svelte b/src/leapfrogai_ui/src/lib/components/HeaderButton.svelte
new file mode 100644
index 000000000..fc2cfd6fe
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/HeaderButton.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let btnClass =
+    'dark:text-gray-400 hover:bg-secondary-800 dark:hover:bg-secondary-300 dark:hover:text-white rounded-lg p-1 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-300 transition duration-100 ease-in-out';
+</script>
+
+<button type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)} on:click>
+  <slot />
+</button>
diff --git a/src/leapfrogai_ui/src/lib/components/IconButton.svelte b/src/leapfrogai_ui/src/lib/components/IconButton.svelte
new file mode 100644
index 000000000..d3b58089f
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/IconButton.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let btnClass =
+    'dark:text-gray-400 dark:hover:text-white rounded-lg p-1 transition duration-100 ease-in-out';
+</script>
+
+<button type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)} on:click>
+  <slot />
+</button>
diff --git a/src/leapfrogai_ui/src/lib/components/ImportExport.svelte b/src/leapfrogai_ui/src/lib/components/ImportExport.svelte
index 0512865af..bfee2b0ec 100644
--- a/src/leapfrogai_ui/src/lib/components/ImportExport.svelte
+++ b/src/leapfrogai_ui/src/lib/components/ImportExport.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { Export } from 'carbon-icons-svelte';
-  import { Button } from 'carbon-components-svelte';
-  import LFFileUploader from '$components/LFFileUploader.svelte';
+  import { Button, Spinner } from 'flowbite-svelte';
+  import { DownloadOutline } from 'flowbite-svelte-icons';
   import { threadsStore, toastStore } from '$stores';
   import { threadsSchema } from '$schemas/threadSchema';
   import type { LFThread } from '$lib/types/threads';
+  import LFFileUploadBtn from '$components/LFFileUploadBtn.svelte';
 
   let importing = false;
 
@@ -44,8 +44,10 @@
       toastStore.addToast({
         kind: 'error',
         title: 'Error',
-        subtitle: `Threads are incorrectly formatted.`
+        subtitle: `Threads are incorrectly formatted.`,
+        timeout: 5000
       });
+      importing = false;
       return;
     }
     await threadsStore.importThreads(threads);
@@ -74,28 +76,25 @@
   };
 </script>
 
-<div class="import-export-btns-container">
-  <LFFileUploader accept={['application/json']} {importing} {onUpload} />
-  <Button
-    id="export-btn"
-    kind="ghost"
-    icon={Export}
-    size="small"
-    iconDescription="Export conversations"
-    on:click={onExport}>Export chat history</Button
-  >
-</div>
+<div class="flex flex-col gap-2">
+  {#if importing}
+    <Button outline disabled size="sm">
+      <Spinner class="me-3" size="4" color="white" />Importing...
+    </Button>
+  {:else}
+    <LFFileUploadBtn
+      data-testid="import-chat-history-input"
+      outline
+      size="sm"
+      on:change={(e) => onUpload(e.detail)}
+      accept={['application/json']}
+      disabled={importing}>Import chat history</LFFileUploadBtn
+    >
+  {/if}
 
-<style lang="scss">
-  .import-export-btns-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    padding: layout.$spacing-03 0 layout.$spacing-03 0;
-    :global(.bx--btn) {
-      width: 100%;
-      color: themes.$text-secondary;
-      font-weight: bold;
-    }
-  }
-</style>
+  <Button id="export-btn" outline size="sm" on:click={onExport} class="w-full">
+    <div class="flex w-full justify-between">
+      Export chat history <DownloadOutline />
+    </div>
+  </Button>
+</div>
diff --git a/src/leapfrogai_ui/src/lib/components/ImportExport.test.ts b/src/leapfrogai_ui/src/lib/components/ImportExport.test.ts
index efde4bc1a..37c4e7c50 100644
--- a/src/leapfrogai_ui/src/lib/components/ImportExport.test.ts
+++ b/src/leapfrogai_ui/src/lib/components/ImportExport.test.ts
@@ -36,7 +36,8 @@ describe('Import and Export chat history', () => {
     expect(toastSpy).toHaveBeenNthCalledWith(2, {
       kind: 'error',
       title: 'Error',
-      subtitle: `Threads are incorrectly formatted.`
+      subtitle: `Threads are incorrectly formatted.`,
+      timeout: 5000
     });
   });
 
diff --git a/src/leapfrogai_ui/src/lib/components/InfoTooltip.svelte b/src/leapfrogai_ui/src/lib/components/InfoTooltip.svelte
new file mode 100644
index 000000000..1deef48ce
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/InfoTooltip.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Tooltip } from 'flowbite-svelte';
+  import { InfoCircleOutline } from 'flowbite-svelte-icons';
+  import { twMerge } from 'tailwind-merge';
+
+  export let iconClass: string = '';
+  export let tooltipClass: string = '';
+</script>
+
+<div class={$$props.class}>
+  <InfoCircleOutline class={twMerge('text-gray-900 dark:text-gray-300', iconClass)} />
+  <Tooltip data-testid="tooltip" placement="right" class={tooltipClass} {...$$restProps}
+    ><slot /></Tooltip
+  >
+</div>
diff --git a/src/leapfrogai_ui/src/lib/components/InputTooltip.svelte b/src/leapfrogai_ui/src/lib/components/InputTooltip.svelte
deleted file mode 100644
index 5af446936..000000000
--- a/src/leapfrogai_ui/src/lib/components/InputTooltip.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-  import { Tooltip } from 'carbon-components-svelte';
-
-  export let name: string = '';
-  export let labelText: string;
-  export let tooltipText: string;
-  export let direction: 'top' | 'bottom' | 'left' | 'right' = 'right';
-</script>
-
-<div class="label-and-tooltip">
-  <label for={name} class="bx--label" style="margin-bottom: 0">{labelText}</label>
-  <Tooltip {direction}>
-    <p>{tooltipText}</p>
-  </Tooltip>
-</div>
-
-<style lang="scss">
-  .label-and-tooltip {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-  }
-</style>
diff --git a/src/leapfrogai_ui/src/lib/components/InputTooltip.test.ts b/src/leapfrogai_ui/src/lib/components/InputTooltip.test.ts
deleted file mode 100644
index 1aa6d6499..000000000
--- a/src/leapfrogai_ui/src/lib/components/InputTooltip.test.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { render, screen } from '@testing-library/svelte';
-import InputTooltip from '$components/InputTooltip.svelte';
-import userEvent from '@testing-library/user-event';
-
-describe('Input Tooltip', () => {
-  it('has a label and tooltip', async () => {
-    const labelText = 'Test Label Text';
-    const tooltipText = 'Test label tooltip test';
-    render(InputTooltip, {
-      name: 'test',
-      labelText,
-      tooltipText
-    });
-
-    screen.getByText(labelText);
-    const tooltip = screen.getByRole('button');
-    expect(screen.queryByText(tooltipText)).not.toBeInTheDocument();
-
-    await userEvent.click(tooltip);
-
-    screen.getByText(tooltipText);
-  });
-});
diff --git a/src/leapfrogai_ui/src/lib/components/LFDrawer.svelte b/src/leapfrogai_ui/src/lib/components/LFDrawer.svelte
new file mode 100644
index 000000000..a24f17fc4
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/LFDrawer.svelte
@@ -0,0 +1,92 @@
+<!--
+This is a modified version of Flowbite Svelte's Drawer.svelte component.
+It allows adding custom styling to the backdrop (div with role "presentation")
+-->
+
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { blur, fade, fly, slide } from 'svelte/transition';
+
+  import type { drawerTransitionParamTypes, drawerTransitionTypes } from 'flowbite-svelte';
+  import { clickOutside } from '$lib/utils/clickOutside';
+
+  export let activateClickOutside: boolean = true;
+  export let hidden: boolean = true;
+  export let position: 'fixed' | 'absolute' = 'fixed';
+  export let leftOffset: string = 'inset-y-0 start-0';
+  export let rightOffset: string = 'inset-y-0 end-0';
+  export let topOffset: string = 'inset-x-0 top-0';
+  export let bottomOffset: string = 'inset-x-0 bottom-0';
+  export let width: string = 'w-80';
+  export let backdrop: boolean = true;
+  export let bgColor: string = 'bg-gray-900';
+  export let bgOpacity: string = 'bg-opacity-75';
+  export let placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
+  export let id: string = 'drawer';
+  export let divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
+  export let backdropCustomClass: string = '';
+  export let transitionParams: drawerTransitionParamTypes = {};
+  export let transitionType: drawerTransitionTypes = 'fly';
+
+  function multiple(node: HTMLElement, params: drawerTransitionParamTypes) {
+    switch (transitionType) {
+      case 'slide':
+        return slide(node, params);
+      case 'blur':
+        return blur(node, params);
+      case 'fade':
+        return fade(node, params);
+      default:
+        return fly(node, params);
+    }
+  }
+
+  const placements = {
+    left: leftOffset,
+    right: rightOffset,
+    top: topOffset,
+    bottom: bottomOffset
+  };
+
+  const handleDrawer = () => {
+    hidden = !hidden;
+  };
+
+  const handleClickOutside = () => activateClickOutside && !hidden && handleDrawer();
+
+  let backdropDivClass = twMerge(
+    'fixed top-0 start-0 z-50 w-full h-full',
+    backdrop && bgColor,
+    backdrop && bgOpacity,
+    backdropCustomClass
+  );
+
+  function clickOutsideWrapper(node: HTMLElement, callback: () => void) {
+    return activateClickOutside ? clickOutside(node, callback) : undefined;
+  }
+</script>
+
+{#if !hidden}
+  {#if backdrop && activateClickOutside}
+    <div
+      role="presentation"
+      class={backdropDivClass}
+      on:click={() => !hidden && handleDrawer()}
+    ></div>
+  {:else if backdrop && !activateClickOutside}
+    <div role="presentation" class={backdropDivClass}></div>
+  {/if}
+
+  <div
+    use:clickOutsideWrapper={handleClickOutside}
+    {id}
+    {...$$restProps}
+    class={twMerge(divClass, width, position, placements[placement], $$props.class)}
+    transition:multiple={transitionParams}
+    tabindex="-1"
+    aria-controls={id}
+    aria-labelledby={id}
+  >
+    <slot {hidden}></slot>
+  </div>
+{/if}
diff --git a/src/leapfrogai_ui/src/lib/components/LFFileUploadBtn.svelte b/src/leapfrogai_ui/src/lib/components/LFFileUploadBtn.svelte
new file mode 100644
index 000000000..8cabc81b7
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/LFFileUploadBtn.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { Button } from 'flowbite-svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  export let files = null;
+  export let name: string = '';
+  export let ref: HTMLInputElement | null = null;
+  export let accept: string[] = [];
+  export let multiple = false;
+  export let disabled = false;
+  export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none' = 'sm';
+  export let outline: boolean = false;
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<div>
+  <input
+    bind:this={ref}
+    {name}
+    type="file"
+    accept={accept.join(',')}
+    {multiple}
+    bind:files
+    on:click
+    on:keydown={({ key }) => {
+      if (key === ' ' || key === 'Enter') {
+        ref?.click();
+      }
+    }}
+    on:change={(e) => {
+      dispatch('change', Array.from(e.currentTarget.files ?? []));
+    }}
+    class="sr-only"
+    {...$$restProps}
+  />
+  <Button
+    {outline}
+    {size}
+    {disabled}
+    on:click={() => ref?.click()}
+    class={twMerge('w-full', $$props.class)}
+  >
+    <div class="flex w-full justify-between">
+      <slot />
+    </div>
+  </Button>
+</div>
diff --git a/src/leapfrogai_ui/src/lib/components/LFFileUploader.svelte b/src/leapfrogai_ui/src/lib/components/LFFileUploader.svelte
deleted file mode 100644
index 70e952329..000000000
--- a/src/leapfrogai_ui/src/lib/components/LFFileUploader.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<!--This is a custom version of Carbon Components Svelte's FileUploaderButton to support usage of an inline icon-->
-
-<script lang="ts">
-  import { Download } from 'carbon-icons-svelte';
-  import { Button } from 'carbon-components-svelte';
-
-  export let importing: boolean;
-
-  /** Obtain a reference to the input HTML element */
-  export let ref: HTMLInputElement | null = null;
-  export let accept: string[] = [];
-  export let onUpload: (files: FileList) => void;
-
-  let files: FileList;
-
-  $: if (files) {
-    onUpload(files);
-  }
-</script>
-
-<div>
-  <input
-    data-testid="import-chat-history-input"
-    id="import-conversations"
-    bind:this={ref}
-    type="file"
-    accept={accept.join(',')}
-    multiple={false}
-    name="import"
-    on:keydown={({ key }) => {
-      if (key === ' ' || key === 'Enter') {
-        ref?.click();
-      }
-    }}
-    bind:files
-    class:bx--visually-hidden={true}
-  />
-
-  <Button
-    id="import-btn"
-    kind="ghost"
-    disabled={importing}
-    size="small"
-    icon={Download}
-    iconDescription="Import conversations"
-    on:click={() => ref?.click()}>Import chat history</Button
-  >
-</div>
diff --git a/src/leapfrogai_ui/src/lib/components/LFHeader.svelte b/src/leapfrogai_ui/src/lib/components/LFHeader.svelte
index eabc2a1d8..cc797c8fc 100644
--- a/src/leapfrogai_ui/src/lib/components/LFHeader.svelte
+++ b/src/leapfrogai_ui/src/lib/components/LFHeader.svelte
@@ -1,127 +1,73 @@
 <script lang="ts">
+  import { Button, Dropdown, DropdownItem, Navbar, NavBrand } from 'flowbite-svelte';
+  import { BarsOutline, CloseOutline, CogOutline, UserCircleOutline } from 'flowbite-svelte-icons';
+  import { page } from '$app/stores';
   import { threadsStore, uiStore } from '$stores';
   import logo from '$assets/LeapfrogAI.png';
-  import { Settings, UserAvatar } from 'carbon-icons-svelte';
-  import { Header, HeaderAction, HeaderUtilities } from 'carbon-components-svelte';
 
   export let isUsingOpenAI: boolean;
 
-  let loading = false;
   let signOutForm: HTMLFormElement;
 
   $: innerWidth = 0;
 
-  const handleLogOut = () => {
-    loading = true;
-    signOutForm.submit();
-    loading = false;
-  };
+  const handleLogOut = (e) => {
+    e.preventDefault();
 
-  // We override the default behavior of the HeaderAction component to close other actions
-  // when a new one is opened
-  let activeHeaderAction: { [key: string]: boolean };
-  $: activeHeaderAction = {
-    user: false,
-    settings: false
-  };
-
-  const setActiveHeaderAction = (headerActionName: keyof typeof activeHeaderAction) => {
-    Object.keys(activeHeaderAction).forEach((key) => {
-      activeHeaderAction[key] = key === headerActionName;
-    });
+    signOutForm.submit();
   };
 </script>
 
 <svelte:window bind:innerWidth />
 
-<Header
-  persistentHamburgerMenu={innerWidth ? innerWidth < 1056 : false}
-  bind:isSideNavOpen={$uiStore.isSideNavOpen}
->
-  <span slot="platform"
-    ><a
-      data-testid="header-logo-link"
+<header>
+  <Navbar fluid class="h-header border-b border-gray-700 py-1 dark:bg-gray-800">
+    <NavBrand
       href={$threadsStore.lastVisitedThreadId
         ? `/chat/${$threadsStore.lastVisitedThreadId}`
-        : '/chat'}><img alt="LeapfrogAI Logo" src={logo} class="logo" /></a
-    ></span
-  >
-  <HeaderUtilities>
-    <HeaderAction
-      data-testid="settings header action button"
-      aria-label="Settings"
-      title="Settings"
-      icon={Settings}
-      transition={false}
-      isOpen={activeHeaderAction.settings}
-      on:open={() => setActiveHeaderAction('settings')}
+        : '/chat'}
+      data-testid="logo-link"
     >
-      <div class="links-container">
-        <a
-          href="/chat/assistants-management"
-          class="header-link"
-          on:click={() => setActiveHeaderAction('')}>Assistants Management</a
-        >
-
-        <a
-          href="/chat/file-management"
-          class="header-link"
-          on:click={() => setActiveHeaderAction('')}>File Management</a
+      {#if innerWidth < 1024 && $page.url.pathname === '/chat'}
+        <Button
+          outline={true}
+          class="mr-2 !p-2"
+          on:click={(e) => {
+            e.preventDefault();
+            uiStore.setOpenSidebar(!$uiStore.openSidebar);
+          }}
         >
+          {#if $uiStore.openSidebar}
+            <CloseOutline data-testid="close-sidebar-btn" />
+          {:else}
+            <BarsOutline data-testid="open-sidebar-btn" />
+          {/if}
+        </Button>
+      {/if}
+      <img src={logo} class="w-[7.875rem]] h-[2.25rem]" alt="LeapfrogAI Logo" />
+    </NavBrand>
+    <div id="header-btns-container" class="flex gap-4">
+      <CogOutline
+        data-testid="header-settings-btn"
+        class="settings-menu cursor-pointer dark:text-white"
+      />
+      <Dropdown triggeredBy=".settings-menu" data-testid="settings-dropdown">
+        <DropdownItem href="/chat/assistants-management">Assistants Management</DropdownItem>
+        <DropdownItem href="/chat/file-management">File Management</DropdownItem>
         {#if !isUsingOpenAI}
-          <a href="/chat/api-keys" class="header-link" on:click={() => setActiveHeaderAction('')}
-            >API Keys</a
-          >
+          <DropdownItem href="/chat/api-keys">API Keys</DropdownItem>
         {/if}
-      </div>
-    </HeaderAction>
-    <HeaderAction
-      data-testid="user header action button"
-      aria-label="User"
-      title="User"
-      icon={UserAvatar}
-      transition={false}
-      isOpen={activeHeaderAction.user}
-      on:open={() => setActiveHeaderAction('user')}
-    >
-      <div class="links-container">
-        <form bind:this={signOutForm} method="post" action="/auth?/signout">
-          <button
-            class="header-link"
-            aria-label="Log Out"
-            disabled={loading}
-            on:click={handleLogOut}>Log Out</button
-          >
-        </form>
-      </div>
-    </HeaderAction>
-  </HeaderUtilities>
-</Header>
-
-<style lang="scss">
-  .logo {
-    width: 126px;
-    height: 36px;
-  }
-
-  .links-container {
-    display: flex;
-    padding: 1rem;
-    flex-direction: column;
-    gap: 0.88rem;
-  }
+      </Dropdown>
 
-  .header-link {
-    @include type.type-style('heading-compact-01');
-    cursor: pointer;
-    background: none;
-    color: inherit;
-    border: none;
-    padding: 0;
-    outline: inherit;
-    text-decoration: none;
-    &:hover {
-      color: themes.$text-on-color;
-    }
-  }
-</style>
+      <UserCircleOutline
+        data-testid="header-profile-btn"
+        class="profile-menu cursor-pointer dark:text-white"
+      />
+      <Dropdown triggeredBy=".profile-menu" data-testid="profile-dropdown">
+        <DropdownItem on:click={handleLogOut}
+          >Log Out <form bind:this={signOutForm} method="post" action="/auth?/signout" />
+        </DropdownItem>
+      </Dropdown>
+    </div>
+  </Navbar>
+</header>
diff --git a/src/leapfrogai_ui/src/lib/components/LFHeader.test.ts b/src/leapfrogai_ui/src/lib/components/LFHeader.test.ts
index 1913ef5ce..1a54892c3 100644
--- a/src/leapfrogai_ui/src/lib/components/LFHeader.test.ts
+++ b/src/leapfrogai_ui/src/lib/components/LFHeader.test.ts
@@ -5,31 +5,45 @@ import { threadsStore } from '$stores';
 import { getFakeThread } from '$testUtils/fakeData';
 
 describe('LFHeader', () => {
-  it('closes the other header actions when one is opened', async () => {
-    // We cannot test by visibility because carbon components svelte does not give us a way to grab the panel
-    // in our test. The best we can do is check that the bx--header__action--active class is correctly
-    // applied or not applied to the button that controls the panel
-    render(LFHeader);
+  it('has a link on the logo that navigates to the last visited thread id', async () => {
+    const thread = getFakeThread();
+    threadsStore.set({
+      threads: [thread],
+      lastVisitedThreadId: thread.id,
+      selectedAssistantId: '',
+      sendingBlocked: false,
+      streamingMessage: null
+    });
 
-    const userActionBtn = screen.getByTestId('user header action button');
-    await userEvent.click(userActionBtn);
+    render(LFHeader, { isUsingOpenAI: false });
+    expect(screen.getByTestId('logo-link')).toHaveAttribute('href', `/chat/${thread.id}`);
+  });
+  it('has a settings btn dropdown with links to various pages', async () => {
+    render(LFHeader, { isUsingOpenAI: false });
+    await userEvent.click(screen.getByTestId('header-settings-btn'));
 
-    expect(userActionBtn).toHaveClass('bx--header__action--active');
+    expect(screen.getByRole('link', { name: /assistants management/i })).toHaveAttribute(
+      'href',
+      '/chat/assistants-management'
+    );
 
-    const settingsActionBtn = screen.getByTestId('settings header action button');
-    await userEvent.click(settingsActionBtn);
+    expect(screen.getByRole('link', { name: /file management/i })).toHaveAttribute(
+      'href',
+      '/chat/file-management'
+    );
 
-    expect(settingsActionBtn).toHaveClass('bx--header__action--active');
-    expect(userActionBtn).not.toHaveClass('bx--header__action--active');
+    expect(screen.getByRole('link', { name: /api keys/i })).toHaveAttribute(
+      'href',
+      '/chat/api-keys'
+    );
   });
-  it('has a link on the logo that navigates to the last visited thread id', () => {
-    const thread = getFakeThread();
 
-    threadsStore.set({
-      threads: [thread],
-      lastVisitedThreadId: thread.id
+  it('has a profile btn dropdown with a logout btn', async () => {
+    render(LFHeader, { isUsingOpenAI: false });
+    await userEvent.click(screen.getByTestId('header-profile-btn'));
+
+    screen.getByRole('button', {
+      name: /log out/i
     });
-    render(LFHeader);
-    expect(screen.getByTestId('header-logo-link')).toHaveAttribute('href', `/chat/${thread.id}`);
   });
 });
diff --git a/src/leapfrogai_ui/src/lib/components/LFInput.svelte b/src/leapfrogai_ui/src/lib/components/LFInput.svelte
new file mode 100644
index 000000000..8761a3b18
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/LFInput.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { Helper, Input, Textarea } from 'flowbite-svelte';
+  import { twMerge } from 'tailwind-merge';
+  import LFLabel from '$components/LFLabel.svelte';
+
+  export let id: string;
+  export let name: string; // for form input
+  export let label: string;
+  export let placeholder: string = '';
+  export let autocomplete: string = 'on';
+  export let value: string | number = '';
+  export let maxlength: number;
+  export let errorText: string | undefined = undefined;
+  export let divClass: string = '';
+  export let labelClass: string = '';
+  export let inputClass: string = '';
+  export let helperClass: string = '';
+  export let tooltipText: string | undefined = undefined;
+  export let hideLabel: boolean = false;
+  export let textArea: boolean = false;
+  export let textAreaRows: number = 6;
+
+  let divInnerClass = twMerge('mb-6', divClass);
+  let labelInnerClass = twMerge('block', labelClass);
+  let helperInnerClass = twMerge('mt-2', helperClass);
+</script>
+
+<div class={divInnerClass}>
+  {#if !hideLabel}
+    <LFLabel {id} {labelInnerClass} {tooltipText}>{label}</LFLabel>
+  {/if}
+  {#if textArea}
+    <Textarea
+      {id}
+      {name}
+      {placeholder}
+      {autocomplete}
+      bind:value
+      rows={textAreaRows}
+      {maxlength}
+      color={errorText ? 'red' : 'base'}
+      class={inputClass}
+    />
+  {:else}
+    <Input
+      {id}
+      {name}
+      {placeholder}
+      {autocomplete}
+      bind:value
+      {maxlength}
+      color={errorText ? 'red' : 'base'}
+      class={inputClass}
+    />
+  {/if}
+  {#if errorText}
+    <Helper class={helperInnerClass} color="red"
+      ><span class="font-medium">{errorText}</span></Helper
+    >
+  {/if}
+</div>
diff --git a/src/leapfrogai_ui/src/lib/components/LFLabel.svelte b/src/leapfrogai_ui/src/lib/components/LFLabel.svelte
new file mode 100644
index 000000000..cf15d94c9
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/LFLabel.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Label } from 'flowbite-svelte';
+  import InfoTooltip from '$components/InfoTooltip.svelte';
+  import { twMerge } from 'tailwind-merge';
+
+  export let id: string;
+  export let labelClass: string = '';
+  export let tooltipText: string | undefined = undefined;
+
+  let labelInnerClass = twMerge('block', labelClass);
+</script>
+
+<div class={twMerge('mb-3 flex gap-2', $$props.class)}>
+  <Label for={id} class={labelInnerClass}><slot /></Label>
+  {#if tooltipText}
+    <InfoTooltip>{tooltipText}</InfoTooltip>
+  {/if}
+</div>
diff --git a/src/leapfrogai_ui/src/lib/components/LFMultiSelect.svelte b/src/leapfrogai_ui/src/lib/components/LFMultiSelect.svelte
deleted file mode 100644
index 50e53b343..000000000
--- a/src/leapfrogai_ui/src/lib/components/LFMultiSelect.svelte
+++ /dev/null
@@ -1,554 +0,0 @@
-<script lang="ts">
-  /* This component is a modified version of the Carbon Components Svelte MultiSelect.
-   It adds a button into the menu that allows uploading of files.
-   It has also been converted to use Typescript.
- */
-
-  import type {
-    MultiSelectItem,
-    MultiSelectItemId
-  } from 'carbon-components-svelte/src/MultiSelect/MultiSelect.svelte';
-  import { afterUpdate, createEventDispatcher, setContext } from 'svelte';
-  import { WarningAltFilled, WarningFilled } from 'carbon-icons-svelte';
-  import {
-    Checkbox,
-    ListBox,
-    ListBoxField,
-    ListBoxMenu,
-    ListBoxMenuIcon,
-    ListBoxMenuItem,
-    ListBoxSelection
-  } from 'carbon-components-svelte';
-
-  import type { ListBoxMenuIconTranslationId } from 'carbon-components-svelte/src/ListBox/ListBoxMenuIcon.svelte';
-  import type { ListBoxSelectionTranslationId } from 'carbon-components-svelte/src/ListBox/ListBoxSelection.svelte';
-  import FileUploadMenuItem from '$components/FileUploadMenuItem.svelte';
-  import type { FilesForm } from '$lib/types/files';
-
-  /**
-   * Set the multiselect items
-   */
-  export let items: ReadonlyArray<MultiSelectItem> = [];
-
-  /**
-   * Override the display of a multiselect item
-   * @type {(item: MultiSelectItem) => any}
-   */
-  export let itemToString = (item: MultiSelectItem) => item.text || item.id;
-
-  /**
-   * Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs.
-   
-   */
-  // Copied from Svelte Carbon components, seems like this doesn't do what it is supposed to
-  // so leaving as is and ignoring the eslint error
-  export let itemToInput: (
-    item: MultiSelectItem
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ) => { name?: string; labelText?: string; title?: string; value?: string } = (item) => {};
-
-  /**
-   * Set the selected ids
-   * @type {ReadonlyArray<MultiSelectItemId>}
-   */
-  export let selectedIds: ReadonlyArray<MultiSelectItemId> = [];
-
-  /** Specify the multiselect value */
-  export let value = '';
-
-  /**
-   * Set the size of the combobox
-   */
-  export let size: 'sm' | 'lg' | 'xl' | undefined = undefined;
-
-  /**
-   * Specify the type of multiselect
-   */
-  export let type: 'default' | 'inline' = 'default';
-
-  /**
-   * Specify the direction of the multiselect dropdown menu
-   */
-  export let direction: 'bottom' | 'top' = 'bottom';
-
-  /**
-   * Specify the selection feedback after selecting items
-   */
-  export let selectionFeedback: 'top' | 'fixed' | 'top-after-reopen' = 'top-after-reopen';
-
-  /** Set to `true` to disable the dropdown */
-  export let disabled = false;
-
-  /** Set to `true` to filter items */
-  export let filterable = false;
-
-  /**
-   * Override the filtering logic
-   * The default filtering is an exact string comparison
-   */
-  export let filterItem = (item: MultiSelectItem, value: string) =>
-    item.text.toLowerCase().includes(value.trim().toLowerCase());
-
-  /** Set to `true` to open the dropdown */
-  export let open = false;
-
-  /** Set to `true` to enable the light variant */
-  export let light = false;
-
-  /** Specify the locale */
-  export let locale = 'en';
-
-  /** Specify the placeholder text */
-  export let placeholder = '';
-
-  /**
-   * Override the sorting logic
-   * The default sorting compare the item text value
-   */
-  export let sortItem = (a: MultiSelectItem, b: MultiSelectItem) =>
-    a.text.localeCompare(b.text, locale, { numeric: true });
-
-  /**
-   * Override the chevron icon label based on the open state.
-   * Defaults to "Open menu" when closed and "Close menu" when open
-   */
-  export let translateWithId: ((id: ListBoxMenuIconTranslationId) => string) | undefined =
-    undefined;
-
-  /**
-   * Override the label of the clear button when the input has a selection.
-   * Defaults to "Clear selected item" and "Clear all items" if more than one item is selected
-   */
-  export let translateWithIdSelection: ((id: ListBoxSelectionTranslationId) => string) | undefined =
-    undefined;
-
-  /** Specify the title text */
-  export let titleText = '';
-
-  /** Set to `true` to pass the item to `itemToString` in the checkbox */
-  export let useTitleInItem = false;
-
-  /** Set to `true` to indicate an invalid state */
-  export let invalid = false;
-
-  /** Specify the invalid state text */
-  export let invalidText = '';
-
-  /** Set to `true` to indicate an warning state */
-  export let warn = false;
-
-  /** Specify the warning state text */
-  export let warnText = '';
-
-  /** Specify the helper text */
-  export let helperText = '';
-
-  /** Specify the list box label */
-  export let label = '';
-
-  /** Set to `true` to visually hide the label text */
-  export let hideLabel = false;
-
-  /** Set an id for the list box component */
-  export let id = 'ccs-' + Math.random().toString(36);
-
-  /**
-   * Specify a name attribute for the select
-   */
-  export let name: string | undefined = undefined;
-
-  /** Obtain a reference to the input HTML element */
-  export let inputRef: HTMLElement | null = null;
-
-  /** Obtain a reference to the outer div element */
-  export let multiSelectRef: HTMLDivElement | null = null;
-
-  /**
-   * Obtain a reference to the field box element
-   */
-  export let fieldRef: HTMLDivElement | null = null;
-
-  /**
-   * Obtain a reference to the selection element
-   */
-  export let selectionRef: HTMLDivElement | null = null;
-
-  /**
-   * Id of the highlighted ListBoxMenuItem
-   */
-  export let highlightedId: null | MultiSelectItemId = null;
-
-  /**
-   * Specify the accepted file types
-   */
-  export let accept: ReadonlyArray<string> = [];
-
-  /**
-   * SuperValidated Form
-   */
-  export let filesForm: FilesForm;
-
-  const dispatch = createEventDispatcher();
-
-  let initialSorted = false;
-  let highlightedIndex = -1;
-  let prevChecked = [];
-
-  setContext('MultiSelect', {
-    declareRef: ({ key, ref }: { key: 'field' | 'selection'; ref: HTMLDivElement }) => {
-      switch (key) {
-        case 'field':
-          fieldRef = ref;
-          break;
-        case 'selection':
-          selectionRef = ref;
-          break;
-      }
-    }
-  });
-
-  function change(direction: number) {
-    let index = highlightedIndex + direction;
-    const length = filterable ? filteredItems.length : items.length;
-    if (length === 0) return;
-    if (index < 0) {
-      index = length - 1;
-    } else if (index >= length) {
-      index = 0;
-    }
-
-    let disabled = items[index].disabled;
-
-    while (disabled) {
-      index = index + direction;
-
-      if (index < 0) {
-        index = items.length - 1;
-      } else if (index >= items.length) {
-        index = 0;
-      }
-
-      disabled = items[index].disabled;
-    }
-
-    highlightedIndex = index;
-  }
-
-  function sort() {
-    return [
-      ...(checked.length > 1 ? checked.sort(sortItem) : checked),
-      ...unchecked.sort(sortItem)
-    ];
-  }
-
-  afterUpdate(() => {
-    if (checked.length !== prevChecked.length) {
-      if (selectionFeedback === 'top') {
-        sortedItems = sort();
-      }
-      prevChecked = checked;
-      selectedIds = checked.map(({ id }) => id);
-      dispatch('select', {
-        selectedIds,
-        selected: checked,
-        unselected: unchecked
-      });
-    }
-
-    if (!open) {
-      if (!initialSorted || selectionFeedback !== 'fixed') {
-        sortedItems = sort();
-        initialSorted = true;
-      }
-
-      highlightedIndex = -1;
-      value = '';
-    }
-
-    items = sortedItems;
-  });
-
-  $: menuId = `menu-${id}`;
-  $: inline = type === 'inline';
-  $: ariaLabel = $$props['aria-label'] || 'Choose an item';
-  $: sortedItems = items.map((item) => ({
-    ...item,
-    checked: selectedIds.includes(item.id)
-  }));
-  $: checked = sortedItems.filter(({ checked }) => checked);
-  $: unchecked = sortedItems.filter(({ checked }) => !checked);
-  $: filteredItems = sortedItems.filter((item) => filterItem(item, value));
-  $: highlightedId =
-    highlightedIndex > -1
-      ? ((filterable ? filteredItems : sortedItems)[highlightedIndex]?.id ?? null)
-      : null;
-</script>
-
-<svelte:window
-  on:click={({ target }) => {
-    if (open && multiSelectRef && !multiSelectRef.contains(target)) {
-      open = false;
-    }
-  }}
-/>
-
-<div
-  bind:this={multiSelectRef}
-  class:bx--multi-select__wrapper={true}
-  class:bx--list-box__wrapper={true}
-  class:bx--multi-select__wrapper--inline={inline}
-  class:bx--list-box__wrapper--inline={inline}
-  class:bx--multi-select__wrapper--inline--invalid={inline && invalid}
->
-  {#if titleText || $$slots.titleText}
-    <label
-      for={id}
-      class:bx--label={true}
-      class:bx--label--disabled={disabled}
-      class:bx--visually-hidden={hideLabel}
-    >
-      <slot name="titleText">
-        {titleText}
-      </slot>
-    </label>
-  {/if}
-  <ListBox
-    role={undefined}
-    {disabled}
-    {invalid}
-    {invalidText}
-    {open}
-    {light}
-    {size}
-    {warn}
-    {warnText}
-    class="bx--multi-select {direction === 'top' && 'bx--list-box--up'} {filterable &&
-      'bx--combo-box'}
-      {filterable && 'bx--multi-select--filterable'}
-      {invalid && 'bx--multi-select--invalid'}
-      {inline && 'bx--multi-select--inline'}
-      {checked.length > 0 && 'bx--multi-select--selected'}"
-  >
-    {#if invalid}
-      <WarningFilled class="bx--list-box__invalid-icon" />
-    {/if}
-    {#if !invalid && warn}
-      <WarningAltFilled class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning" />
-    {/if}
-    <ListBoxField
-      role="button"
-      tabindex="0"
-      aria-expanded={open}
-      on:click={() => {
-        if (disabled) return;
-        if (filterable) {
-          open = true;
-          inputRef?.focus();
-        } else {
-          open = !open;
-        }
-      }}
-      on:keydown={(e) => {
-        if (filterable) {
-          return;
-        }
-        const key = e.key;
-        if ([' ', 'ArrowUp', 'ArrowDown'].includes(key)) {
-          e.preventDefault();
-        }
-        if (key === ' ') {
-          open = !open;
-        } else if (key === 'Tab') {
-          if (selectionRef && checked.length > 0) {
-            selectionRef.focus();
-          } else {
-            open = false;
-            fieldRef?.blur();
-          }
-        } else if (key === 'ArrowDown') {
-          change(1);
-        } else if (key === 'ArrowUp') {
-          change(-1);
-        } else if (key === 'Enter') {
-          if (highlightedIndex > -1) {
-            sortedItems = sortedItems.map((item, i) => {
-              if (i !== highlightedIndex) return item;
-              return { ...item, checked: !item.checked };
-            });
-          }
-        } else if (key === 'Escape') {
-          open = false;
-        }
-      }}
-      on:focus={() => {
-        if (filterable) {
-          open = true;
-          if (inputRef) inputRef.focus();
-        }
-      }}
-      on:blur={(e) => {
-        if (!filterable) dispatch('blur', e);
-      }}
-      {id}
-      {disabled}
-      {translateWithId}
-    >
-      {#if checked.length > 0}
-        <ListBoxSelection
-          selectionCount={checked.length}
-          on:clear
-          on:clear={() => {
-            selectedIds = [];
-            sortedItems = sortedItems.map((item) => ({
-              ...item,
-              checked: false
-            }));
-            if (fieldRef) fieldRef.blur();
-          }}
-          translateWithId={translateWithIdSelection}
-          {disabled}
-        />
-      {/if}
-      {#if filterable}
-        <input
-          bind:this={inputRef}
-          bind:value
-          {...$$restProps}
-          role="combobox"
-          tabindex="0"
-          autocomplete="off"
-          aria-autocomplete="list"
-          aria-expanded={open}
-          aria-activedescendant={highlightedId}
-          aria-disabled={disabled}
-          aria-controls={menuId}
-          class:bx--text-input={true}
-          class:bx--text-input--empty={value === ''}
-          class:bx--text-input--light={light}
-          on:keydown
-          on:keydown|stopPropagation={({ key }) => {
-            if (key === 'Enter') {
-              if (highlightedId) {
-                const filteredItemIndex = sortedItems.findIndex(
-                  (item) => item.id === highlightedId
-                );
-                sortedItems = sortedItems.map((item, i) => {
-                  if (i !== filteredItemIndex) return item;
-                  return { ...item, checked: !item.checked };
-                });
-              }
-            } else if (key === 'Tab') {
-              open = false;
-              inputRef?.blur();
-            } else if (key === 'ArrowDown') {
-              change(1);
-            } else if (key === 'ArrowUp') {
-              change(-1);
-            } else if (key === 'Escape') {
-              open = false;
-            } else if (key === ' ') {
-              if (!open) open = true;
-            }
-          }}
-          on:keyup
-          on:focus
-          on:blur
-          on:paste
-          {disabled}
-          {placeholder}
-          {id}
-          {name}
-        />
-        {#if invalid}
-          <WarningFilled class="bx--list-box__invalid-icon" />
-        {/if}
-        {#if value}
-          <ListBoxSelection
-            on:clear={() => {
-              value = '';
-              open = false;
-            }}
-            translateWithId={translateWithIdSelection}
-            {disabled}
-            {open}
-          />
-        {/if}
-        <ListBoxMenuIcon
-          style="pointer-events: {open ? 'auto' : 'none'}"
-          on:click={(e) => {
-            e.stopPropagation();
-            open = !open;
-          }}
-          {translateWithId}
-          {open}
-        />
-      {/if}
-      {#if !filterable}
-        <span class:bx--list-box__label={true}>{label}</span>
-        <ListBoxMenuIcon {open} {translateWithId} />
-      {/if}
-    </ListBoxField>
-    <div style:display={open ? 'block' : 'none'}>
-      <ListBoxMenu aria-label={ariaLabel} {id} aria-multiselectable="true">
-        <FileUploadMenuItem
-          id="file-upload"
-          labelText="Upload new data source"
-          {accept}
-          multiple
-          disableLabelChanges
-          {filesForm}
-          bind:open
-        />
-        {#each filterable ? filteredItems : sortedItems as item, i (item.id)}
-          <ListBoxMenuItem
-            id={item.id}
-            role="option"
-            aria-labelledby="checkbox-{item.id}"
-            aria-selected={item.checked}
-            active={item.checked}
-            highlighted={highlightedIndex === i}
-            disabled={item.disabled}
-            on:click={(e) => {
-              if (item.disabled) {
-                e.stopPropagation();
-                return;
-              }
-              sortedItems = sortedItems.map((_) =>
-                _.id === item.id ? { ..._, checked: !_.checked } : _
-              );
-              fieldRef?.focus();
-            }}
-            on:mouseenter={() => {
-              if (item.disabled) return;
-              highlightedIndex = i;
-            }}
-          >
-            <Checkbox
-              name={item.id}
-              title={useTitleInItem ? itemToString(item) : undefined}
-              {...itemToInput(item)}
-              readonly
-              tabindex="-1"
-              id="checkbox-{item.id}"
-              checked={item.checked}
-              disabled={item.disabled}
-              on:blur={() => {
-                if (i === filteredItems.length - 1) open = false;
-              }}
-            >
-              <slot slot="labelText" {item} index={i}>
-                {itemToString(item)}
-              </slot>
-            </Checkbox>
-          </ListBoxMenuItem>
-        {/each}
-      </ListBoxMenu>
-    </div>
-  </ListBox>
-
-  {#if !inline && !invalid && !warn && helperText}
-    <div class:bx--form__helper-text={true} class:bx--form__helper-text--disabled={disabled}>
-      {helperText}
-    </div>
-  {/if}
-</div>
diff --git a/src/leapfrogai_ui/src/lib/components/LFRadio.svelte b/src/leapfrogai_ui/src/lib/components/LFRadio.svelte
new file mode 100644
index 000000000..f7994a5c4
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/LFRadio.svelte
@@ -0,0 +1,110 @@
+<!--There is a bug in Flowbite's Radio component that we submitted
+a PR for here: https://github.com/themesberg/flowbite-svelte/pull/1398
+This is a copy-paste of their component with that change until they patch it
+-->
+
+<script context="module" lang="ts">
+  // this part is shared between Radio and Checkbox
+  import { twMerge } from 'tailwind-merge';
+
+  export type FormColorType =
+    | 'blue'
+    | 'red'
+    | 'green'
+    | 'purple'
+    | 'teal'
+    | 'yellow'
+    | 'orange'
+    | 'primary'
+    | 'secondary';
+
+  const colorClasses: Record<FormColorType, string> = {
+    primary: 'text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600',
+    secondary: 'text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600',
+    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
+    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
+    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
+    teal: 'text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600',
+    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600',
+    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
+    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
+  };
+
+  export const labelClass = (inline: boolean, extraClass: string) =>
+    twMerge(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
+
+  export const inputClass = (
+    custom: boolean,
+    color: FormColorType,
+    rounded: boolean,
+    tinted: boolean,
+    spacing: string,
+    extraClass: string
+  ) =>
+    twMerge(
+      'w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2',
+      spacing,
+      tinted ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600',
+      custom && 'sr-only peer',
+      rounded && 'rounded',
+      colorClasses[color],
+      extraClass
+    );
+</script>
+
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import { Label } from 'flowbite-svelte';
+
+  export type FormColorType =
+    | 'blue'
+    | 'red'
+    | 'green'
+    | 'purple'
+    | 'teal'
+    | 'yellow'
+    | 'orange'
+    | 'primary'
+    | 'secondary';
+
+  export let color: FormColorType = 'primary';
+  export let custom: boolean = false;
+  export let inline: boolean = false;
+  export let value: number | string = '';
+  export let spacing: string = $$slots.default ? 'me-2' : '';
+
+  // tinted if put in component having its own background
+  let background: boolean = getContext('background');
+</script>
+
+<Label class={labelClass(inline, $$props.class)} show={$$slots.default}>
+  <slot />
+</Label>
+<input
+  type="radio"
+  on:blur
+  on:change
+  on:click
+  on:focus
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mouseenter
+  on:mouseleave
+  on:mouseover
+  on:paste
+  {value}
+  {...$$restProps}
+  class={inputClass(custom, color, false, background, spacing, $$slots.default || $$props.class)}
+/>
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: FormColorType = 'primary';
+@prop export let custom: boolean = false;
+@prop export let inline: boolean = false;
+@prop export let group: number | string | undefined = undefined;
+@prop export let value: number | string = '';
+@prop export let spacing: string = $$slots.default ? 'me-2' : '';
+-->
diff --git a/src/leapfrogai_ui/src/lib/components/LFSidebar.svelte b/src/leapfrogai_ui/src/lib/components/LFSidebar.svelte
new file mode 100644
index 000000000..cd48d5d9a
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/LFSidebar.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+  import {
+    Button,
+    Hr,
+    Input,
+    Sidebar,
+    SidebarDropdownWrapper,
+    SidebarGroup,
+    SidebarWrapper
+  } from 'flowbite-svelte';
+  import { PlusOutline } from 'flowbite-svelte-icons';
+  import { dates } from '$helpers';
+  import { threadsStore } from '$stores';
+  import type { LFThread } from '$lib/types/threads';
+  import LFSidebarDropdownItem from '$components/LFSidebarDropdownItem.svelte';
+  import { page } from '$app/stores';
+  import { getMessageText } from '$helpers/threads';
+  import Fuse, { type FuseResult, type IFuseOptions } from 'fuse.js';
+  import ImportExport from '$components/ImportExport.svelte';
+
+  let searchText = '';
+  let filteredThreads: LFThread[] = [];
+  let searchResults: FuseResult<LFThread>[];
+
+  const options: IFuseOptions<unknown> = {
+    keys: ['metadata.label', 'messages.content'],
+    minMatchCharLength: 3,
+    shouldSort: false,
+    findAllMatches: true,
+    threshold: 0, // perfect matches only
+    ignoreLocation: true
+  };
+
+  $: activeThreadId = $page.params.thread_id;
+  $: organizedThreads = dates.organizeThreadsByDate(
+    searchText !== '' ? filteredThreads : $threadsStore.threads
+  );
+
+  $: if (searchText) {
+    // Remap the message content to be a string instead of string | nested object
+    const threadsWithTextMessages = $threadsStore.threads.map((thread) => ({
+      ...thread,
+      messages: thread.messages?.map((message) => ({
+        ...message,
+        content: getMessageText(message)
+      }))
+    }));
+
+    const fuse = new Fuse(threadsWithTextMessages, options);
+    searchResults = fuse.search(searchText);
+    filteredThreads = searchResults.map((result) => result.item);
+  }
+</script>
+
+<!--Custom styling allows center SidebarGroup (chat threads) to scroll-->
+<Sidebar
+  data-testid="sidebar"
+  class="sidebar-height flex w-[255px] border-r border-gray-700  dark:bg-gray-800 "
+>
+  <SidebarWrapper class="flex w-full flex-col px-0">
+    <SidebarGroup>
+      <div class="flex flex-col gap-2 px-3">
+        <Button on:click={() => threadsStore.changeThread('')}>
+          <PlusOutline />New Chat
+        </Button>
+        <Input type="txt" placeholder="Search..." bind:value={searchText} maxlength={25}></Input>
+      </div>
+    </SidebarGroup>
+    <Hr classHr="my-2" />
+    <SidebarGroup class="no-scrollbar flex-grow overflow-y-scroll px-3" data-testid="threads">
+      {#each organizedThreads as category}
+        {#if category.threads.length > 0}
+          <SidebarDropdownWrapper label={category.label} isOpen={true}>
+            {#each category.threads as thread (thread.id)}
+              <LFSidebarDropdownItem
+                threadId={thread.id}
+                label={thread.metadata.label}
+                active={activeThreadId === thread.id}
+              />
+            {/each}
+          </SidebarDropdownWrapper>
+        {/if}
+      {/each}
+    </SidebarGroup>
+    <Hr classHr="my-2" />
+    <SidebarGroup class="px-3">
+      <ImportExport />
+    </SidebarGroup>
+  </SidebarWrapper>
+</Sidebar>
diff --git a/src/leapfrogai_ui/src/lib/components/LFSidebarDropdownItem.svelte b/src/leapfrogai_ui/src/lib/components/LFSidebarDropdownItem.svelte
new file mode 100644
index 000000000..286ecf719
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/LFSidebarDropdownItem.svelte
@@ -0,0 +1,175 @@
+<!--
+This is a modified version of Flowbite Svelte's SidebarDropdownItem.svelte component
+It adds a "three-dot" menu button with Popover, and delete confirmation Modal
+-->
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import { Button, Input, P, Popover } from 'flowbite-svelte';
+  import { DotsVerticalOutline, ExclamationCircleOutline } from 'flowbite-svelte-icons';
+  import { threadsStore } from '$stores';
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import { MAX_LABEL_SIZE } from '$constants';
+  import { Modal } from 'flowbite-svelte';
+
+  export let sClass: string =
+    'flex items-center p-2 ps-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
+  export let threadId: string;
+  export let label: string = '';
+  export let activeClass: string =
+    'flex items-center p-2 ps-11 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
+  export let active: boolean = false;
+  let deleteModalOpen = false;
+  let editLabelText: string | undefined = label;
+  let editLabelInputDisabled = false;
+
+  let lengthOverride = 'overflow-hidden text-ellipsis whitespace-nowrap';
+
+  $: popperOpen = false;
+  $: editMode = false;
+
+  const handleEditClick = (e) => {
+    e.preventDefault();
+    editMode = true;
+    popperOpen = false;
+  };
+
+  const resetEditMode = () => {
+    editLabelText = undefined;
+    editLabelInputDisabled = false;
+    editMode = false;
+  };
+
+  const saveNewLabel = async () => {
+    if (editLabelText) {
+      editLabelInputDisabled = true;
+      await threadsStore.updateThreadLabel(threadId, editLabelText);
+    }
+    resetEditMode();
+  };
+
+  const handleEdit = async (e: KeyboardEvent | FocusEvent) => {
+    if (e.type === 'blur') {
+      await saveNewLabel();
+    }
+    if (e.type === 'keydown') {
+      const keyboardEvent = e as KeyboardEvent;
+      if (keyboardEvent.key === 'Escape') {
+        resetEditMode();
+        return;
+      }
+
+      if (keyboardEvent.key === 'Enter' || keyboardEvent.key === 'Tab') {
+        await saveNewLabel();
+      }
+    }
+  };
+
+  const handleDelete = async () => {
+    resetEditMode();
+    deleteModalOpen = false;
+    await threadsStore.deleteThread(threadId);
+    if (threadId === $page.params.thread_id) await goto('/chat');
+  };
+</script>
+
+<li class="flex flex-grow justify-between">
+  {#if editMode}
+    <Input
+      data-testid="edit-thread-input"
+      bind:value={editLabelText}
+      type="text"
+      size="sm"
+      on:blur={(e) => {
+        e.stopPropagation();
+        handleEdit(e);
+      }}
+      disabled={editLabelInputDisabled}
+      autofocus
+      on:keydown={(e) => {
+        e.stopPropagation();
+        handleEdit(e);
+      }}
+      on:click={(e) => {
+        e.stopPropagation();
+      }}
+      on:focus={() => {}}
+      maxlength={MAX_LABEL_SIZE}
+    />
+  {:else}
+    <button
+      {...$$restProps}
+      on:blur
+      on:focus
+      on:keydown
+      on:keypress
+      on:keyup
+      on:mouseenter
+      on:mouseleave
+      on:mouseover
+      on:click={async () => {
+        await threadsStore.changeThread(threadId);
+      }}
+      class={twMerge(
+        active ? activeClass : sClass,
+        lengthOverride,
+        'flex-grow',
+        'cursor-pointer',
+        $$props.class
+      )}
+    >
+      <P size="sm" class="overflow-hidden text-ellipsis whitespace-nowrap">
+        {label}
+      </P>
+    </button>
+    <button
+      data-testid={`thread-menu-btn-${label}`}
+      id={`btn-${threadId}`}
+      class={popperOpen && 'focus:rounded focus:bg-gray-400'}
+    >
+      <DotsVerticalOutline color="white" />
+    </button>
+    <Popover
+      data-testid={'sidebar-popover'}
+      class="w-32 border-none border-none text-sm font-light"
+      defaultClass="p-0"
+      placement="right"
+      trigger="click"
+      triggeredBy={`#btn-${threadId}`}
+      arrow={false}
+      on:show={() => {
+        popperOpen = !popperOpen;
+      }}
+      ><div class="flex flex-col items-center gap-1">
+        <Button size="xs" class="w-full" on:click={handleEditClick}>Edit</Button>
+        <Button
+          size="xs"
+          class="w-full"
+          on:click={(e) => {
+            e.stopPropagation();
+            deleteModalOpen = true;
+          }}>Delete</Button
+        >
+      </div></Popover
+    >
+  {/if}
+</li>
+
+<Modal
+  data-testid="delete-thread-modal"
+  bind:open={deleteModalOpen}
+  autoclose
+  title="Delete Chat"
+  color="primary"
+>
+  <div class="flex flex-col gap-4">
+    <ExclamationCircleOutline class="mx-auto  h-12 w-12 text-gray-400 dark:text-white" />
+    <P size="xl" class="text-center dark:text-gray-400">
+      Are you sure you want to delete your <strong>{label.substring(0, MAX_LABEL_SIZE)}</strong> chat?
+    </P>
+    <div class="flex justify-end gap-2">
+      <Button color="alternative" size="sm">Cancel</Button>
+      <Button color="red" on:click={handleDelete} size="sm">Delete</Button>
+    </div>
+  </div>
+</Modal>
diff --git a/src/leapfrogai_ui/src/lib/components/LFTextArea.svelte b/src/leapfrogai_ui/src/lib/components/LFTextArea.svelte
index 62c3259e0..e690fd2a8 100644
--- a/src/leapfrogai_ui/src/lib/components/LFTextArea.svelte
+++ b/src/leapfrogai_ui/src/lib/components/LFTextArea.svelte
@@ -1,205 +1,184 @@
-<!--This component was modified from https://github.com/carbon-design-system/carbon-components-svelte/blob/master/src/TextArea/TextArea.svelte
-It keeps all the Carbon Components Svelte functionality, but instead grows as multiple lines are added until it
-hits the limit specified by maxRows.
-It also defaults maxCount to the environment variable PUBLIC_MESSAGE_LENGTH_LIMIT
-and shows an error when the user attempts to type past the maxCount limitation.
-The invalid prop can still be passed to this component to validate for other conditions.
+<!--
+This component creates a custom version of Flowbite Svelte's Textarea component that auto grows and shrinks in height up
+to a limit of maxRows. It can also show error text.
 -->
 
 <script lang="ts">
-  import { WarningFilled } from 'carbon-icons-svelte';
-  import type { Writable } from 'svelte/store';
-  import { onMount } from 'svelte';
+  import { twMerge } from 'tailwind-merge';
+  import { getContext, onMount } from 'svelte';
+  import Wrapper from 'flowbite-svelte/Wrapper.svelte';
   import { env } from '$env/dynamic/public';
+  import { Helper } from 'flowbite-svelte';
+  import type { Writable } from 'svelte/store';
 
-  /** Specify the textarea value */
-  export let value: Writable<string>;
-  /** Specify the onSubmit function */
-  export let onSubmit: (e: SubmitEvent | KeyboardEvent) => Promise<void>;
-  /** Specify the maxRows value */
-  export let maxRows = 10;
-
-  /** Specify the placeholder text */
-  export let placeholder = '';
-
-  /** Specify the number of cols */
-  export let cols = 50;
-
-  /** Specify the number of rows */
-  export let rows = 4;
-
-  /**
-   * Specify the max character count
-   */
-  export let maxCount: number = Number(env.PUBLIC_MESSAGE_LENGTH_LIMIT);
-
-  /** Set to `true` to enable the light variant */
-  export let light = false;
-
-  /** Set to `true` to disable the input */
-  export let disabled = false;
-
-  /** Set to `true` to use the read-only variant */
-  export let readonly = false;
-
-  /** Specify the helper text */
-  export let helperText = '';
-
-  /** Specify the label text */
-  export let labelText = '';
+  const background = getContext('background');
 
-  /** Set to `true` to visually hide the label text */
-  export let hideLabel = false;
+  export let ref: HTMLInputElement | null = null;
+  export let value: Writable<string>;
+  export let wrappedClass: string =
+    'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50';
+  export let unWrappedClass: string =
+    'p-2.5 text-sm focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50';
+  export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-gray-800';
+  export let headerClass: string = '';
+  export let footerClass: string = '';
 
-  /** Set to `true` to indicate an invalid state */
+  export let showLengthError = false;
+  export let onSubmit: (e: SubmitEvent | KeyboardEvent) => Promise<void>;
   export let invalid = false;
-
-  /** Specify the text for the invalid state */
   export let invalidText = '';
-
-  /** Set an id for the textarea element */
   export let id = 'ccs-' + Math.random().toString(36);
+  export let maxRows = 10;
+  export let rows = '1';
 
-  /**
-   * Specify a name attribute for the input
-   */
-  export let name: string | undefined = undefined;
-
-  /** Obtain a reference to the textarea HTML element */
-  export let ref: HTMLTextAreaElement | null = null;
-
-  /**
-   * Specify an aria label for the input
-   */
-  export let ariaLabel: string | undefined = undefined;
-
-  /**
-   * Obtain a reference to the error state of the input text length.
-   */
-  export let showLengthError = false;
-
-  $: errorId = `error-${id}`;
-
+  let wrapped: boolean;
+  let maxLength = Number(env.PUBLIC_MESSAGE_LENGTH_LIMIT);
   let lengthInvalidText = 'Character limit reached';
-  $: limitReached = $value.length === Number(env.PUBLIC_MESSAGE_LENGTH_LIMIT);
+  $: wrapped = $$slots.header || $$slots.footer;
+  $: errorId = `error-${id}`;
 
-  function resizeTextArea() {
+  let wrapperClass: string;
+  $: wrapperClass = twMerge(
+    'rounded-lg bg-gray-50',
+    background ? 'dark:bg-gray-600' : 'dark:bg-gray-700',
+    'text-gray-900 dark:placeholder-gray-400 dark:text-white',
+    'border border-gray-200',
+    background ? 'dark:border-gray-500' : 'dark:border-gray-600',
+    $$props.class
+  );
+
+  let textareaClass: string;
+  $: textareaClass = wrapped ? wrappedClass : twMerge(wrapperClass, unWrappedClass, 'scrollbar');
+
+  const headerCls = (header: boolean) =>
+    twMerge(
+      header ? 'border-b' : 'border-t',
+      'py-2 px-3 border-gray-200',
+      background ? 'dark:border-gray-500' : 'dark:border-gray-600',
+      header ? headerClass : footerClass
+    );
+
+  let innerWrapperClass: string;
+  $: innerWrapperClass = twMerge(
+    innerWrappedClass,
+    $$slots.footer ? '' : 'rounded-b-lg',
+    $$slots.header ? '' : 'rounded-t-lg'
+  );
+
+  $: limitReached = $value.length === maxLength;
+  $: $value === '' && resizeTextArea(true);
+
+  function resizeTextArea(reset = false) {
     if (ref) {
-      ref.style.height = '1px';
-      ref.style.height = ref.scrollHeight - 2 + 'px';
+      ref.style.height = 'auto';
+
+      if (reset) {
+        ref.style.overflowY = 'hidden';
+        return;
+      }
+
+      const scrollHeight = ref.scrollHeight + 2;
+      const maxHeight = maxRows * 18; // Rows are 18px in height
+      if (scrollHeight > maxHeight) {
+        ref.style.height = `${maxHeight}px`;
+        ref.style.overflowY = 'auto';
+      } else {
+        ref.style.height = `${scrollHeight}px`;
+        ref.style.overflowY = 'hidden';
+      }
     }
   }
 
   onMount(() => {
-    resizeTextArea();
+    resizeTextArea(); // prevents a pixel jump when you first type in input
   });
 </script>
 
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div on:click on:mouseover on:mouseenter on:mouseleave class:bx--form-item={true}>
-  {#if (labelText || $$slots.labelText) && !hideLabel}
-    <div class:bx--text-area__label-wrapper={true}>
-      <label
-        for={id}
-        class:bx--label={true}
-        class:bx--visually-hidden={hideLabel}
-        class:bx--label--disabled={disabled}
-      >
-        <slot name="labelText">
-          {labelText}
-        </slot>
-      </label>
-      {#if maxCount}
-        <div class:bx--label={true} class:bx--label--disabled={disabled}>
-          {$value.length}/{maxCount}
-        </div>
-      {/if}
+<Wrapper show={wrapped} class={wrapperClass}>
+  {#if $$slots.header}
+    <div class={headerCls(true)}>
+      <slot name="header"></slot>
     </div>
   {/if}
-  <div class:bx--text-area__wrapper={true} data-invalid={invalid || showLengthError || undefined}>
-    {#if invalid || showLengthError}
-      <WarningFilled class="bx--text-area__invalid-icon" />
-    {/if}
-    <span class="lf-text-area">
-      <textarea
-        bind:this={ref}
-        bind:value={$value}
-        aria-invalid={invalid || showLengthError || undefined}
-        aria-describedby={invalid || showLengthError ? errorId : undefined}
-        aria-label={ariaLabel}
-        {disabled}
-        {id}
-        {name}
-        {cols}
-        {rows}
-        {placeholder}
-        {readonly}
-        class:bx--text-area={true}
-        class:bx--text-area--light={light}
-        class:bx--text-area--invalid={invalid || showLengthError}
-        style="--maxRows:{maxRows};"
-        maxlength={maxCount + 1 ?? undefined}
-        {...$$restProps}
-        on:keyup={resizeTextArea}
-        on:keydown={(e) => {
-          resizeTextArea();
-          // Allow user to type up to maxCount, but only show error once trying to add more
-          // characters after hitting this limit
-
-          // Allow Command+A / Ctrl+A for select all even when max length is reached
-          if (e.key === 'a' && (e.metaKey || e.ctrlKey)) {
-            return; // Do not prevent the default action for Command+A/Ctrl+A
-          }
-          // If limit reached and trying to delete characters
-          if (limitReached && ['Backspace', 'Delete'].includes(e.key)) {
-            showLengthError = false; // remove error
-          }
 
-          // Limit has previously been reached and still trying to type
-          else if (
-            limitReached &&
-            !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'].includes(e.key)
-          ) {
-            e.preventDefault(); // disallow adding character
-            showLengthError = true; // throw error
-          } else {
-            if (e.key === 'Enter' && !e.shiftKey && ref) {
-              resizeTextArea();
-              onSubmit(e);
-            }
+  <Wrapper show={wrapped} class={innerWrapperClass}>
+    <textarea
+      {id}
+      bind:this={ref}
+      bind:value={$value}
+      on:blur
+      on:change
+      on:click
+      on:contextmenu
+      on:focus
+      on:input={() => resizeTextArea()}
+      on:keyup
+      on:keydown={(e) => {
+        // Allow user to type up to maxCount, but only show error once trying to add more
+        // characters after hitting this limit
+
+        // Allow Command+A / Ctrl+A for select all even when max length is reached
+        if (e.key === 'a' && (e.metaKey || e.ctrlKey)) {
+          return; // Do not prevent the default action for Command+A/Ctrl+A
+        }
+        // If limit reached and trying to delete characters
+        if (limitReached && ['Backspace', 'Delete'].includes(e.key)) {
+          showLengthError = false; // remove error
+        }
+
+        // Limit has previously been reached and still trying to type
+        else if (
+          limitReached &&
+          !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'].includes(e.key)
+        ) {
+          e.preventDefault(); // disallow adding character
+          showLengthError = true; // throw error
+        } else {
+          if (e.key === 'Enter' && !e.shiftKey && ref) {
+            onSubmit(e);
           }
-        }}
-        on:focus
-        on:blur
-        on:paste
-      />
-    </span>
-  </div>
-  {#if !invalid && !showLengthError && helperText}
-    <div class:bx--form__helper-text={true} class:bx--form__helper-text--disabled={disabled}>
-      {helperText}
+        }
+      }}
+      {rows}
+      on:keypress
+      on:keyup
+      on:mouseenter
+      on:mouseleave
+      on:mouseover
+      on:paste
+      on:select
+      {...$$restProps}
+      maxlength={maxLength + 1 ?? undefined}
+      class={textareaClass}
+    />
+    <Helper>
+      <Wrapper id={errorId} show={invalid || showLengthError} class="text-red-500">
+        {showLengthError ? lengthInvalidText : invalidText}
+      </Wrapper>
+    </Helper>
+  </Wrapper>
+
+  {#if $$slots.footer}
+    <div class={headerCls(false)}>
+      <slot name="footer"></slot>
     </div>
   {/if}
-  {#if invalid || showLengthError}
-    <div id={errorId} class:bx--form-requirement={true}>
-      {showLengthError ? lengthInvalidText : invalidText}
-    </div>
-  {/if}
-</div>
+</Wrapper>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let value: Writable<string>;
+@prop export let wrappedClass: string = 'block text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50';
+@prop export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 border-gray-300 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:cursor-not-allowed disabled:opacity-50';
+@prop export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-gray-800';
+@prop export let headerClass: string = ''
+  export let footerClass: string = '';
+-->
 
 <style lang="scss">
-  .lf-text-area {
-    display: flex;
-    flex: 1;
-    :global(.bx--text-area) {
-      overflow-y: scroll;
-      min-height: var(--message-input-height);
-      max-height: calc(var(--maxRows) * 22px); // each row is 22px
-      scrollbar-color: themes.$layer-03 themes.$layer-01;
-      padding: 0.6rem 1rem; // need to slightly reduce padding to avoid having scroll bar initially
-      resize: none;
-    }
+  .scrollbar {
+    scrollbar-color: #4b5563 #1f2937;
   }
 </style>
diff --git a/src/leapfrogai_ui/src/lib/components/LFTextArea.test.ts b/src/leapfrogai_ui/src/lib/components/LFTextArea.test.ts
index 65e4cf1bf..cbce7d47f 100644
--- a/src/leapfrogai_ui/src/lib/components/LFTextArea.test.ts
+++ b/src/leapfrogai_ui/src/lib/components/LFTextArea.test.ts
@@ -21,8 +21,13 @@ describe('LF Text Area', () => {
   });
   it('limits text input and displays an error message', async () => {
     const value = writable('');
-    render(LFTextArea, { value, onSubmit: vi.fn(), maxRows: 2, ariaLabel: 'test input' });
-    const input = screen.getByLabelText('test input');
+    render(LFTextArea, {
+      value,
+      onSubmit: vi.fn(),
+      maxRows: 2,
+      'data-testid': 'edit-message-input'
+    });
+    const input = screen.getByTestId('edit-message-input');
     const limitText = faker.string.alpha({ length: 10 });
     await userEvent.type(input, limitText);
     expect(screen.queryByText('Character limit reached')).not.toBeInTheDocument();
diff --git a/src/leapfrogai_ui/src/lib/components/LFToast.svelte b/src/leapfrogai_ui/src/lib/components/LFToast.svelte
new file mode 100644
index 000000000..623f3cd3c
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/LFToast.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { P, Toast } from 'flowbite-svelte';
+  import {
+    BanOutline,
+    CheckCircleSolid,
+    ExclamationCircleOutline,
+    InfoCircleOutline
+  } from 'flowbite-svelte-icons';
+
+  export let toast: ToastNotificationProps;
+
+  let { title, subtitle, kind } = toast;
+
+  $: color = getColor(kind);
+  $: IconComponent = getIconComponent(kind);
+
+  function getColor(toastKind: ToastKind) {
+    switch (toastKind) {
+      case 'success':
+        return 'green';
+      case 'info':
+        return 'blue';
+      case 'warning':
+        return 'yellow';
+      case 'error':
+        return 'red';
+      default:
+        return 'blue';
+    }
+  }
+
+  function getIconComponent(toastKind: ToastKind) {
+    switch (toastKind) {
+      case 'success':
+        return CheckCircleSolid;
+      case 'info':
+        return InfoCircleOutline;
+      case 'warning':
+        return ExclamationCircleOutline;
+      case 'error':
+        return BanOutline;
+      default:
+        return InfoCircleOutline;
+    }
+  }
+</script>
+
+<Toast {color}>
+  <svelte:fragment slot="icon">
+    <IconComponent class="h-5 w-5" />
+    <span class="sr-only">Check icon</span>
+  </svelte:fragment>
+  <div class="flex flex-col">
+    {title}
+    {#if subtitle}
+      <P size="xs">{subtitle}</P>
+    {/if}
+    <P size="xs">{`Time stamp [${new Date().toLocaleTimeString()}]`}</P>
+  </div>
+</Toast>
diff --git a/src/leapfrogai_ui/src/lib/components/LayoutWithBreadcrumb.svelte b/src/leapfrogai_ui/src/lib/components/LayoutWithBreadcrumb.svelte
new file mode 100644
index 000000000..e292ab85a
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/LayoutWithBreadcrumb.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { PoweredByDU } from '$components/index.js';
+  import { Breadcrumb, BreadcrumbItem } from 'flowbite-svelte';
+
+  export let paths: { path: string; name: string }[];
+  export let getPath: (path: string) => string;
+</script>
+
+<main class="content px-8">
+  <Breadcrumb data-testid="breadcrumbs" aria-label="breadcrumbs">
+    {#each paths as { path, name } (path)}
+      {#if $page.url.pathname.includes(path)}
+        <BreadcrumbItem home={name === 'Chat'} href={getPath(path)}>{name}</BreadcrumbItem>
+      {/if}
+    {/each}
+  </Breadcrumb>
+  <div class="flex h-full justify-center overflow-auto">
+    <div class="flex w-full flex-col items-center">
+      <slot />
+    </div>
+  </div>
+  <PoweredByDU />
+</main>
diff --git a/src/leapfrogai_ui/src/lib/components/Message.svelte b/src/leapfrogai_ui/src/lib/components/Message.svelte
index 3d38bfcb8..fac9bb406 100644
--- a/src/leapfrogai_ui/src/lib/components/Message.svelte
+++ b/src/leapfrogai_ui/src/lib/components/Message.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import { Button, Tile } from 'carbon-components-svelte';
-  import { Copy, Edit, Reset, UserAvatar } from 'carbon-icons-svelte';
+  import { Button, Card } from 'flowbite-svelte';
   import { type Message as VercelAIMessage } from '@ai-sdk/svelte';
   import markdownit from 'markdown-it';
   import hljs from 'highlight.js';
-  import { LFTextArea } from '$components';
   import frog from '$assets/frog.png';
   import { writable } from 'svelte/store';
+  import {
+    EditOutline,
+    FileCopyOutline,
+    RedoOutline,
+    UserCircleOutline
+  } from 'flowbite-svelte-icons';
+  import { twMerge } from 'tailwind-merge';
   import { threadsStore, toastStore } from '$stores';
   import { convertTextToMessageContentArr, getMessageText } from '$helpers/threads';
   import type { Message as OpenAIMessage } from 'openai/resources/beta/threads/messages';
@@ -20,6 +25,8 @@
   import DynamicPictogram from '$components/DynamicPictogram.svelte';
   import type { AppendFunction } from '$lib/types/messages';
   import DOMPurify from 'isomorphic-dompurify';
+  import TextareaV2 from '$components/LFTextArea.svelte';
+  import IconButton from '$components/IconButton.svelte';
 
   export let message: OpenAIMessage;
   export let messages: OpenAIMessage[] = [];
@@ -42,7 +49,7 @@
         code = md.utils.escapeHtml(str);
       }
 
-      return `<pre><code><code-block code="${code}" language="${language}"></code></pre>`;
+      return `<pre><code><code-block code="${code}" language="${language}" /></code></pre>`;
     }
   });
 
@@ -101,88 +108,96 @@
 
 <div
   data-testid="message"
-  class="message"
+  class="whitespace-pre-line"
   role="toolbar"
-  class:transparent={message.role === 'user'}
   on:mouseover={() => (messageIsHovered = true)}
   on:mouseleave={() => (messageIsHovered = false)}
   on:focus={() => (messageIsHovered = true)}
   tabindex="0"
 >
-  <div class="message-and-avatar">
+  <div class="flex flex-1 items-start">
     {#if message.role === 'user'}
-      <div class="icon">
-        <UserAvatar style="width: 24px; height: 24px;" data-testid="user-icon" />
+      <div class="chat-icon">
+        <UserCircleOutline class="h-6 w-6" data-testid="user-icon" />
       </div>
     {:else if assistantImage && assistantImage.startsWith('http')}
-      <img alt="Assistant" src={assistantImage} class="icon" data-testid="assistant-icon" />
+      <img alt="Assistant" src={assistantImage} class="chat-icon" data-testid="assistant-icon" />
     {:else if assistantImage}
-      <div class="icon" data-testid="assistant-icon">
-        <DynamicPictogram iconName={assistantImage} width="24px" height="24px" />
+      <div class="chat-icon" data-testid="assistant-icon">
+        <DynamicPictogram size="xs" iconName={assistantImage} />
       </div>
     {:else}
-      <img alt="LeapfrogAI" src={frog} class="icon" data-testid="leapfrog-icon" />
+      <img alt="LeapfrogAI" src={frog} class="chat-icon" data-testid="leapfrog-icon" />
     {/if}
 
-    <div class="message-and-utils">
+    <div class="flex flex-grow flex-col gap-1 overflow-hidden pb-1">
       {#if editMode}
-        <div class="edit-prompt">
-          <LFTextArea {value} {onSubmit} ariaLabel="edit message input" />
-          <div class="cancel-save">
-            <Button size="small" kind="secondary" on:click={handleCancel}>Cancel</Button>
-            <Button
-              size="small"
-              disabled={$threadsStore.sendingBlocked}
-              on:click={onSubmit}
-              aria-label="submit edited message">Submit</Button
-            >
-          </div>
+        <TextareaV2
+          data-testid="edit-message-input"
+          {value}
+          {onSubmit}
+          class="mx-4 mt-[54px] resize-none bg-white dark:bg-gray-800"
+        />
+        <div class="flex justify-end gap-1">
+          <Button size="sm" color="alternative" on:click={handleCancel}>Cancel</Button>
+          <Button
+            size="sm"
+            disabled={$threadsStore.sendingBlocked}
+            on:click={onSubmit}
+            aria-label="submit edited message"
+            data-testid="submit-edit-message">Submit</Button
+          >
         </div>
       {:else}
-        <Tile style="line-height: 20px;">
-          <div class="message-content">
-            <div style="font-weight: bold">
+        <Card
+          class={twMerge(
+            'max-w-full break-words border-none dark:bg-gray-700 dark:text-white',
+            message.role === 'user' && 'bg-transparent shadow-none dark:bg-transparent'
+          )}
+        >
+          <div class="flex flex-col gap-2">
+            <div class="font-bold">
               {message.role === 'user' ? 'You' : getAssistantName(message.assistant_id)}
             </div>
             <!--eslint-disable-next-line svelte/no-at-html-tags -- We use DomPurity to sanitize the code snippet-->
             {@html md.render(DOMPurify.sanitize(getMessageText(message)))}
-            <div class="citations">
+            <div class="flex flex-col items-start">
               {#each getCitations(message, $page.data.files) as { component: Component, props }}
                 <svelte:component this={Component} {...props} />
               {/each}
             </div>
           </div>
-        </Tile>
+        </Card>
       {/if}
 
-      <div class="utils">
+      <div class="flex gap-1 pl-4">
         {#if message.role === 'user' && !editMode}
-          <button
-            data-testid="edit prompt btn"
-            class="remove-btn-style"
-            class:highlight-icon={!$threadsStore.sendingBlocked}
-            class:hide={!messageIsHovered}
+          <IconButton
+            class={!messageIsHovered && 'hide'}
             on:click={() => (editMode = true)}
             aria-label="edit prompt"
-            tabindex="0"><Edit /></button
+            data-testid="edit-message"
+            tabindex="0"
           >
+            <EditOutline />
+          </IconButton>
         {/if}
         {#if message.role !== 'user'}
-          <button
+          <IconButton
             data-testid="copy btn"
-            class="highlight-icon remove-btn-style"
-            class:hide={!messageIsHovered}
+            class={!messageIsHovered && 'hide'}
             on:click={handleCopy}
             tabindex="0"
-            aria-label="copy message"><Copy /></button
+            aria-label="copy message"
           >
+            <FileCopyOutline />
+          </IconButton>
         {/if}
         {#if message.role !== 'user' && isLastMessage && !$threadsStore.sendingBlocked}
-          <button
+          <IconButton
             data-testid="regenerate btn"
-            class="remove-btn-style"
-            class:highlight-icon={!$threadsStore.sendingBlocked}
-            class:hide={!messageIsHovered}
+            class={!messageIsHovered && 'hide'}
+            disabled={$threadsStore.sendingBlocked}
             on:click={async () =>
               await handleMessageEdit({
                 messages,
@@ -193,78 +208,12 @@
                 selectedAssistantId: $threadsStore.selectedAssistantId
               })}
             aria-label="regenerate message"
-            tabindex="0"><Reset /></button
+            tabindex="0"
           >
+            <RedoOutline />
+          </IconButton>
         {/if}
       </div>
     </div>
   </div>
 </div>
-
-<style lang="scss">
-  .message-and-avatar {
-    display: flex;
-    flex: 1;
-    align-items: flex-start;
-  }
-
-  .message-and-utils {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: layout.$spacing-02;
-    overflow: hidden;
-    padding-bottom: layout.$spacing-02;
-  }
-
-  .hide {
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-  .message {
-    white-space: pre-line;
-  }
-
-  .transparent {
-    :global(.bx--tile) {
-      background-color: transparent;
-    }
-  }
-  .icon {
-    width: 32px;
-    height: 52px;
-    padding: 14px layout.$spacing-02;
-  }
-
-  .cancel-save {
-    display: flex;
-    justify-content: flex-end;
-    gap: layout.$spacing-02;
-    margin-top: 1px; // prevents text in editable text area from slightly jumping
-  }
-
-  .utils {
-    display: flex;
-    gap: layout.$spacing-03;
-    padding-left: layout.$spacing-05;
-  }
-
-  .edit-prompt :global(.lf-text-area.bx--text-area) {
-    background: themes.$background;
-    outline: 1px solid themes.$layer-02;
-    border-bottom: 0;
-    margin-top: 7px; // prevents edit box from jumping up on editMode
-  }
-
-  .message-content {
-    display: flex;
-    flex-direction: column;
-    gap: layout.$spacing-03;
-  }
-
-  .citations {
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-  }
-</style>
diff --git a/src/leapfrogai_ui/src/lib/components/Message.test.ts b/src/leapfrogai_ui/src/lib/components/Message.test.ts
index 74033506c..041a1e302 100644
--- a/src/leapfrogai_ui/src/lib/components/Message.test.ts
+++ b/src/leapfrogai_ui/src/lib/components/Message.test.ts
@@ -11,7 +11,6 @@ import { threadsStore } from '$stores';
 import { NO_SELECTED_ASSISTANT_ID } from '$constants';
 
 const fakeAppend = vi.fn();
-const fakeReload = vi.fn();
 
 const getDefaultMessageProps = () => {
   let messages: VercelAIMessage[] = [];
@@ -19,33 +18,30 @@ const getDefaultMessageProps = () => {
     messages = [...newMessages];
   };
   return {
-    allStreamedMessages: [],
     message: convertMessageToVercelAiMessage(getFakeMessage()),
     messages,
+    streamedMessages: [],
     setMessages,
     isLastMessage: false,
-    append: fakeAppend,
-    reload: fakeReload
+    append: fakeAppend
   };
 };
 
 describe('Message component', () => {
   afterEach(() => {
     fakeAppend.mockReset();
-    fakeReload.mockReset();
   });
 
   afterAll(() => {
     fakeAppend.mockRestore();
-    fakeReload.mockRestore();
   });
 
   it('displays edit text area when edit btn is clicked', async () => {
     render(Message, { ...getDefaultMessageProps() });
-    expect(screen.queryByText('edit message input')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('edit-message-input')).not.toBeInTheDocument();
     const editPromptBtn = screen.getByLabelText('edit prompt');
     await userEvent.click(editPromptBtn);
-    await screen.findByLabelText('edit message input');
+    await screen.findByTestId('edit-message-input');
   });
   it('removes the edit textarea and restores original text on close', async () => {
     const fakeMessage = getFakeMessage();
@@ -54,11 +50,11 @@ describe('Message component', () => {
       message: convertMessageToVercelAiMessage(fakeMessage)
     });
     const editPromptBtn = screen.getByLabelText('edit prompt');
-    expect(screen.queryByText('edit message input')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('edit-message-input')).not.toBeInTheDocument();
     expect(screen.getByText(getMessageText(fakeMessage))).toBeInTheDocument();
     await userEvent.click(editPromptBtn);
 
-    const input = screen.getByRole('textbox', { name: /edit message input/i });
+    const input = screen.getByTestId('edit-message-input');
     await userEvent.clear(input);
     expect(screen.queryByText(getMessageText(fakeMessage))).not.toBeInTheDocument();
 
@@ -76,7 +72,7 @@ describe('Message component', () => {
       message: convertMessageToVercelAiMessage(fakeMessage)
     });
     const editPromptBtn = screen.getByLabelText('edit prompt');
-    expect(screen.queryByText('edit message input')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('edit-message-input')).not.toBeInTheDocument();
     expect(screen.getByText(getMessageText(fakeMessage))).toBeInTheDocument();
     await userEvent.click(editPromptBtn);
 
@@ -139,16 +135,17 @@ describe('Message component', () => {
         threads: fakeThreads,
         selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
         sendingBlocked: true,
-        lastVisitedThreadId: ''
+        lastVisitedThreadId: '',
+        streamingMessage: null
       });
       render(MessageWithToast, {
         ...getDefaultMessageProps()
       });
 
-      const editPromptBtn = screen.getByLabelText('edit prompt');
+      const editPromptBtn = screen.getByTestId('edit-message');
       await userEvent.click(editPromptBtn);
 
-      const submitBtn = screen.getByRole('button', { name: /submit/i });
+      const submitBtn = screen.getByTestId('submit-edit-message');
       expect(submitBtn).toHaveProperty('disabled', true);
     });
     it('has copy and regenerate buttons for the last AI response', () => {
@@ -156,7 +153,8 @@ describe('Message component', () => {
         threads: fakeThreads,
         selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
         sendingBlocked: false,
-        lastVisitedThreadId: ''
+        lastVisitedThreadId: '',
+        streamingMessage: null
       });
       render(MessageWithToast, {
         ...getDefaultMessageProps(),
@@ -198,7 +196,8 @@ describe('Message component', () => {
         threads: fakeThreads,
         selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
         sendingBlocked: true,
-        lastVisitedThreadId: ''
+        lastVisitedThreadId: '',
+        streamingMessage: null
       });
       render(MessageWithToast, {
         ...getDefaultMessageProps(),
@@ -213,7 +212,8 @@ describe('Message component', () => {
         threads: fakeThreads,
         selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
         sendingBlocked: true,
-        lastVisitedThreadId: ''
+        lastVisitedThreadId: '',
+        streamingMessage: null
       });
       render(MessageWithToast, {
         ...getDefaultMessageProps(),
@@ -227,7 +227,8 @@ describe('Message component', () => {
         threads: fakeThreads,
         selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
         sendingBlocked: true,
-        lastVisitedThreadId: ''
+        lastVisitedThreadId: '',
+        streamingMessage: null
       });
       render(MessageWithToast, {
         ...getDefaultMessageProps(),
diff --git a/src/leapfrogai_ui/src/lib/components/MessageWithToast.test.svelte b/src/leapfrogai_ui/src/lib/components/MessageWithToast.test.svelte
index adb7dbfe2..96f2a4ce7 100644
--- a/src/leapfrogai_ui/src/lib/components/MessageWithToast.test.svelte
+++ b/src/leapfrogai_ui/src/lib/components/MessageWithToast.test.svelte
@@ -2,27 +2,18 @@
   import { Message, Toasts } from '$components';
   import { type Message as VercelAIMessage } from '@ai-sdk/svelte';
 
-  import type { AppendFunction, ReloadFunction, VercelOrOpenAIMessage } from '$lib/types/messages';
+  import type { AppendFunction } from '$lib/types/messages';
+  import type { Message as OpenAIMessage } from 'openai/resources/beta/threads/messages';
 
-  export let allStreamedMessages: VercelAIMessage[];
-  export let message: VercelOrOpenAIMessage;
-  export let messages: VercelAIMessage[] = [];
-  export let setMessages: (messages: VercelAIMessage[]) => void;
+  export let message: OpenAIMessage;
+  export let messages: OpenAIMessage[] = [];
+  export let streamedMessages: VercelAIMessage[] = [];
+  export let setMessages: ((messages: VercelAIMessage[]) => void) | undefined = undefined;
   export let isLastMessage: boolean;
-
-  export let append: AppendFunction;
-  export let reload: ReloadFunction;
+  export let append: AppendFunction | undefined = undefined;
 </script>
 
 <div>
   <Toasts />
-  <Message
-    {allStreamedMessages}
-    {message}
-    {messages}
-    {setMessages}
-    {isLastMessage}
-    {append}
-    {reload}
-  />
+  <Message {message} {messages} {streamedMessages} {setMessages} {isLastMessage} {append} />
 </div>
diff --git a/src/leapfrogai_ui/src/lib/components/Pictograms.svelte b/src/leapfrogai_ui/src/lib/components/Pictograms.svelte
index 10ff3d785..d5d102155 100644
--- a/src/leapfrogai_ui/src/lib/components/Pictograms.svelte
+++ b/src/leapfrogai_ui/src/lib/components/Pictograms.svelte
@@ -1,38 +1,11 @@
 <script lang="ts">
-  import { Search } from 'carbon-components-svelte';
-  import Fuse, { type FuseResult, type IFuseOptions } from 'fuse.js';
-  import { iconMap } from '$lib/constants/iconMap';
   import DynamicPictogram from '$components/DynamicPictogram.svelte';
+  import { iconMap } from '$constants/iconMap';
+  import { twMerge } from 'tailwind-merge';
 
+  export let pictograms: (keyof typeof iconMap)[];
   export let selectedPictogramName: string;
 
-  let filteredPictograms: (keyof typeof iconMap)[] = [];
-  let searchText = '';
-  let searchResults: FuseResult<(keyof typeof iconMap)[]>[];
-
-  const pictogramNames = Object.keys(iconMap);
-
-  const options: IFuseOptions<unknown> = {
-    minMatchCharLength: 3,
-    shouldSort: false,
-    findAllMatches: true,
-    threshold: 0, // perfect matches only
-    ignoreLocation: true
-  };
-
-  $: if (searchText) {
-    const fuse = new Fuse(pictogramNames, options);
-    searchResults = fuse.search(searchText);
-    filteredPictograms = searchResults.map(
-      (result) => result.item
-    ) as unknown as (keyof typeof iconMap)[];
-  }
-
-  const resetSearch = () => {
-    searchText = '';
-    filteredPictograms = [];
-  };
-
   function scrollToPictogram(node: HTMLElement, params: { active: boolean }) {
     if (params.active) {
       node.scrollIntoView({ behavior: 'auto', block: 'nearest' });
@@ -47,64 +20,23 @@
   }
 </script>
 
-<div class="pictogram-container">
-  <div style="width:22rem" class="search">
-    <Search
-      placeholder="Search"
-      expanded
-      size="sm"
-      bind:value={searchText}
-      on:clear={resetSearch}
-    />
-  </div>
-  <div class="gallery">
-    {#each filteredPictograms.length > 0 ? filteredPictograms : pictogramNames as pictogram}
+<div>
+  <div class="flex flex-wrap justify-center gap-4">
+    {#each pictograms as pictogram}
       <button
-        class="pictogram remove-btn-style"
-        class:clicked={pictogram === selectedPictogramName}
+        class="remove-btn-style transition-fill duration-70 flex cursor-pointer items-center justify-center ease-in hover:bg-gray-700"
         on:click|preventDefault={() => (selectedPictogramName = pictogram)}
         use:scrollToPictogram={{ active: pictogram === selectedPictogramName }}
       >
-        <DynamicPictogram iconName={pictogram} width="64px" height="64px" />
+        <DynamicPictogram
+          iconName={pictogram}
+          size="lg"
+          class={twMerge(
+            'text-gray-400',
+            pictogram === selectedPictogramName && 'border-2 border-white '
+          )}
+        />
       </button>
     {/each}
   </div>
-  <input type="hidden" name="pictogram" value={selectedPictogramName} />
 </div>
-
-<style lang="scss">
-  .pictogram-container {
-    display: flex;
-    flex-direction: column;
-    gap: layout.$spacing-05;
-    height: 100%;
-  }
-  .search {
-    :global(.bx--search-input) {
-      background-color: themes.$layer-01;
-    }
-  }
-  .gallery {
-    display: flex;
-    flex-wrap: wrap;
-    overflow-y: scroll;
-    scrollbar-width: none;
-  }
-
-  .pictogram {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 112px;
-    height: 112px;
-    padding: 16px;
-    cursor: pointer;
-    transition: fill 70ms ease;
-    &:hover {
-      background-color: themes.$layer-hover-01;
-    }
-  }
-  .clicked {
-    border: 2px solid white;
-  }
-</style>
diff --git a/src/leapfrogai_ui/src/lib/components/PoweredByDU.svelte b/src/leapfrogai_ui/src/lib/components/PoweredByDU.svelte
index 49c65b948..2edf3ee2a 100644
--- a/src/leapfrogai_ui/src/lib/components/PoweredByDU.svelte
+++ b/src/leapfrogai_ui/src/lib/components/PoweredByDU.svelte
@@ -3,27 +3,8 @@
   import DefenseUnicorns from '$assets/DefenseUnicorns.png';
 </script>
 
-<div class="flex">
-  <img alt="Doug" src={doug} class="icon" />
-  <span class="legal">Powered By</span>
-  <img alt="Defense Unicorns" src={DefenseUnicorns} class="wordmark" />
+<div class="flex items-center justify-center gap-1 py-4 text-white">
+  <img alt="Doug" src={doug} class="h-6" />
+  <span class="tracking-custom text-xs leading-4">Powered By</span>
+  <img alt="Defense Unicorns" src={DefenseUnicorns} class="w-[6.75rem]" />
 </div>
-
-<style lang="scss">
-  .flex {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: layout.$spacing-02;
-    margin-top: 1rem;
-  }
-  .legal {
-    @include type.type-style('legal-01');
-  }
-  .icon {
-    height: var(--footer-height);
-  }
-  .wordmark {
-    width: 6.75rem;
-  }
-</style>
diff --git a/src/leapfrogai_ui/src/lib/components/Range.svelte b/src/leapfrogai_ui/src/lib/components/Range.svelte
new file mode 100644
index 000000000..c0d1a2998
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/Range.svelte
@@ -0,0 +1,317 @@
+<script>
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { fly, fade } from 'svelte/transition';
+
+  // Props
+  export let min = 0;
+  export let max = 100;
+  export let initialValue = 0;
+  export let id = null;
+  export let value = typeof initialValue === 'string' ? parseInt(initialValue) : initialValue;
+  export let showThumb = true;
+
+  // Node Bindings
+  let container = null;
+  let thumb = null;
+  let progressBar = null;
+  let element = null;
+
+  // Internal State
+  let elementX = null;
+  let currentThumb = null;
+  let holding = false;
+  let thumbHover = false;
+  let keydownAcceleration = 0;
+  let accelerationTimer = null;
+
+  // Dispatch 'change' events
+  const dispatch = createEventDispatcher();
+
+  let mouseEventShield;
+
+  onMount(() => {
+    // Mouse shield used onMouseDown to prevent any mouse events penetrating other elements,
+    // ie. hover events on other elements while dragging. Especially for Safari
+    const mouseEventShield = document.createElement('div');
+    mouseEventShield.setAttribute('class', 'mouse-over-shield');
+    mouseEventShield.addEventListener('mouseover', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    });
+  });
+
+  function resizeWindow() {
+    elementX = element.getBoundingClientRect().left;
+  }
+
+  // Allows both bind:value and on:change for parent value retrieval
+  function setValue(val) {
+    value = val;
+    dispatch('change', { value });
+  }
+
+  function onTrackEvent(e) {
+    // Update value immediately before beginning drag
+    updateValueOnEvent(e);
+    onDragStart(e);
+  }
+
+  function onDragStart(e) {
+    // If mouse event add a pointer events shield
+    if (e.type === 'mousedown') document.body.append(mouseEventShield);
+    currentThumb = thumb;
+  }
+
+  function onDragEnd(e) {
+    // If using mouse - remove pointer event shield
+    if (e.type === 'mouseup') {
+      if (document.body.contains(mouseEventShield)) document.body.removeChild(mouseEventShield);
+      // Needed to check whether thumb and mouse overlap after shield removed
+      if (isMouseInElement(e, thumb)) thumbHover = true;
+    }
+    currentThumb = null;
+  }
+
+  // Check if mouse event cords overlay with an element's area
+  function isMouseInElement(event, element) {
+    let rect = element.getBoundingClientRect();
+    let { clientX: x, clientY: y } = event;
+    if (x < rect.left || x >= rect.right) return false;
+    if (y < rect.top || y >= rect.bottom) return false;
+    return true;
+  }
+
+  // Accessible keypress handling
+  function onKeyPress(e) {
+    // Max out at +/- 10 to value per event (50 events / 5)
+    // 100 below is to increase the amount of events required to reach max velocity
+    if (keydownAcceleration < 50) keydownAcceleration++;
+    let throttled = Math.ceil(keydownAcceleration / 5);
+
+    if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
+      if (value + throttled > max || value >= max) {
+        setValue(max);
+      } else {
+        setValue(value + throttled);
+      }
+    }
+    if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
+      if (value - throttled < min || value <= min) {
+        setValue(min);
+      } else {
+        setValue(value - throttled);
+      }
+    }
+
+    // Reset acceleration after 100ms of no events
+    clearTimeout(accelerationTimer);
+    accelerationTimer = setTimeout(() => (keydownAcceleration = 1), 100);
+  }
+
+  function calculateNewValue(clientX) {
+    // Find distance between cursor and element's left cord (20px / 2 = 10px) - Center of thumb
+    let delta = clientX - (elementX + 10);
+
+    // Use width of the container minus (5px * 2 sides) offset for percent calc
+    let percent = (delta * 100) / (container.clientWidth - 10);
+
+    // Limit percent 0 -> 100
+    percent = percent < 0 ? 0 : percent > 100 ? 100 : percent;
+
+    // Limit value min -> max
+    setValue(parseInt((percent * (max - min)) / 100) + min);
+  }
+
+  // Handles both dragging of touch/mouse as well as simple one-off click/touches
+  function updateValueOnEvent(e) {
+    // touchstart && mousedown are one-off updates, otherwise expect a currentPointer node
+    if (!currentThumb && e.type !== 'touchstart' && e.type !== 'mousedown') return false;
+
+    if (e.stopPropagation) e.stopPropagation();
+    if (e.preventDefault) e.preventDefault();
+
+    // Get client's x cord either touch or mouse
+    const clientX =
+      e.type === 'touchmove' || e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
+
+    calculateNewValue(clientX);
+  }
+
+  // React to left position of element relative to window
+  $: if (element) elementX = element.getBoundingClientRect().left;
+
+  // Set a class based on if dragging
+  $: holding = Boolean(currentThumb);
+
+  // Update progressbar and thumb styles to represent value
+  $: if (progressBar && thumb) {
+    // Limit value min -> max
+    value = value > min ? value : min;
+    value = value < max ? value : max;
+
+    let percent = ((value - min) * 100) / (max - min);
+    let offsetLeft = (container.clientWidth - 10) * (percent / 100) + 5;
+
+    // Update thumb position + active range track width
+    thumb.style.left = `${offsetLeft}px`;
+    progressBar.style.width = `${offsetLeft}px`;
+  }
+</script>
+
+<svelte:window
+  on:touchmove|nonpassive={updateValueOnEvent}
+  on:touchcancel={onDragEnd}
+  on:touchend={onDragEnd}
+  on:mousemove={updateValueOnEvent}
+  on:mouseup={onDragEnd}
+  on:resize={resizeWindow}
+/>
+<div class="range">
+  <div
+    class="range__wrapper"
+    tabindex="0"
+    on:keydown={onKeyPress}
+    bind:this={element}
+    role="slider"
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-valuenow={value}
+    {id}
+    on:mousedown={onTrackEvent}
+    on:touchstart={onTrackEvent}
+  >
+    <div class="range__track" bind:this={container}>
+      <div class="range__track--highlighted" bind:this={progressBar} />
+      <div
+        role="button"
+        tabindex="0"
+        class="range__thumb"
+        class:range__thumb--holding={holding}
+        bind:this={thumb}
+        on:touchstart={onDragStart}
+        on:mousedown={onDragStart}
+        on:mouseover={() => (thumbHover = true)}
+        on:mouseout={() => (thumbHover = false)}
+        on:focus
+        on:blur
+      >
+        {#if holding || thumbHover}
+          {#if showThumb}
+            <div
+              class="range__tooltip"
+              in:fly={{ y: 7, duration: 200 }}
+              out:fade={{ duration: 100 }}
+            >
+              {value}
+            </div>
+          {/if}
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
+
+<svelte:head>
+  <style>
+    .mouse-over-shield {
+      position: fixed;
+      top: 0px;
+      left: 0px;
+      height: 100%;
+      width: 100%;
+      background-color: rgba(255, 0, 0, 0);
+      z-index: 10000;
+      cursor: grabbing;
+    }
+  </style>
+</svelte:head>
+
+<style>
+  .range {
+    position: relative;
+    flex: 1;
+  }
+
+  .range__wrapper {
+    min-width: 100%;
+    position: relative;
+    padding: 0.5rem;
+    box-sizing: border-box;
+    outline: none;
+  }
+
+  .range__wrapper:focus-visible > .range__track {
+    box-shadow:
+      0 0 0 2px white,
+      0 0 0 3px var(--track-focus, #6185ff);
+  }
+
+  .range__track {
+    height: 6px;
+    background-color: var(--track-bgcolor, #d0d0d0);
+    border-radius: 999px;
+  }
+
+  .range__track--highlighted {
+    background-color: var(--track-highlight-bgcolor, #6185ff);
+    background: var(--track-highlight-bg, linear-gradient(90deg, #6185ff, #9c65ff));
+    width: 0;
+    height: 6px;
+    position: absolute;
+    border-radius: 999px;
+  }
+
+  .range__thumb {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background-color: var(--thumb-bgcolor, white);
+    cursor: pointer;
+    border-radius: 999px;
+    margin-top: -8px;
+    transition: box-shadow 100ms;
+    user-select: none;
+    box-shadow: var(
+      --thumb-boxshadow,
+      0 1px 1px 0 rgba(0, 0, 0, 0.14),
+      0 0px 2px 1px rgba(0, 0, 0, 0.2)
+    );
+  }
+
+  .range__thumb--holding {
+    box-shadow:
+      0 1px 1px 0 rgba(0, 0, 0, 0.14),
+      0 1px 2px 1px rgba(0, 0, 0, 0.2),
+      0 0 0 6px var(--thumb-holding-outline, rgba(113, 119, 250, 0.3));
+  }
+
+  .range__tooltip {
+    pointer-events: none;
+    position: absolute;
+    top: -33px;
+    color: var(--tooltip-text, white);
+    width: 38px;
+    padding: 4px 0;
+    border-radius: 4px;
+    text-align: center;
+    background-color: var(--tooltip-bgcolor, #6185ff);
+    background: var(--tooltip-bg, linear-gradient(45deg, #6185ff, #9c65ff));
+  }
+
+  .range__tooltip::after {
+    content: '';
+    display: block;
+    position: absolute;
+    height: 7px;
+    width: 7px;
+    background-color: var(--tooltip-bgcolor, #6185ff);
+    bottom: -3px;
+    left: calc(50% - 3px);
+    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+    transform: rotate(-45deg);
+    border-radius: 0 0 0 3px;
+  }
+</style>
diff --git a/src/leapfrogai_ui/src/lib/components/Section.svelte b/src/leapfrogai_ui/src/lib/components/Section.svelte
new file mode 100644
index 000000000..a56277f85
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/Section.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let tinted: boolean = false;
+</script>
+
+<section class={tinted ? 'bg-gray-50 dark:bg-gray-800' : ''}>
+  <div class="max-w-8xl mx-auto px-4 py-8 lg:px-20 {$$props.class ?? ''}">
+    <slot />
+  </div>
+</section>
diff --git a/src/leapfrogai_ui/src/lib/components/SelectAssistantDropdown.svelte b/src/leapfrogai_ui/src/lib/components/SelectAssistantDropdown.svelte
new file mode 100644
index 000000000..8dc639e3b
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/SelectAssistantDropdown.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { threadsStore } from '$stores';
+  import { NO_SELECTED_ASSISTANT_ID } from '$constants';
+  import { Button, Dropdown, DropdownItem } from 'flowbite-svelte';
+  import { CheckOutline, ChevronDownOutline, UserSettingsOutline } from 'flowbite-svelte-icons';
+  import type { Assistant } from 'openai/resources/beta/assistants';
+
+  export let assistants: Assistant[] = [];
+
+  let assistantSelectDropdownOpen = false;
+
+  $: selectedAssistantName =
+    assistants.find((assistant) => assistant.id === $threadsStore.selectedAssistantId)?.name ||
+    'Select assistant...';
+
+  const handleSelectAssistant = (e) => {
+    e.preventDefault();
+    const item = e.target.closest('button, [data-value]');
+    if (item) {
+      const selectedAssistantId = item.dataset.value;
+      if ($threadsStore.selectedAssistantId === selectedAssistantId) {
+        threadsStore.setSelectedAssistantId(NO_SELECTED_ASSISTANT_ID);
+      } else {
+        threadsStore.setSelectedAssistantId(selectedAssistantId);
+      }
+    }
+    assistantSelectDropdownOpen = false;
+  };
+</script>
+
+<Button class="w-48 justify-between "
+  ><span class="overflow-hidden text-ellipsis whitespace-nowrap">{selectedAssistantName}</span
+  ><ChevronDownOutline
+    class="ms-2 h-6 w-6 text-white dark:text-white"
+    data-testid="assistants-select-btn"
+  /></Button
+>
+<Dropdown bind:open={assistantSelectDropdownOpen} class="h-44 overflow-y-auto px-3 pb-3 text-sm">
+  <div slot="header" class="p-3">
+    <Button
+      id="manage assistants"
+      data-testid="assistants-management-btn"
+      on:click={(e) => {
+        e.preventDefault();
+        goto('/chat/assistants-management');
+      }}
+    >
+      <UserSettingsOutline />
+      Manage Assistants
+    </Button>
+  </div>
+  {#each assistants as assistant (assistant.id)}
+    <DropdownItem
+      on:click={handleSelectAssistant}
+      data-value={assistant.id}
+      class="flex justify-between "
+    >
+      {assistant.name.length > 20 ? `${assistant.name.slice(0, 20)}...` : assistant.name}
+      {#if $threadsStore.selectedAssistantId === assistant.id}
+        <CheckOutline data-testid="checked" />
+      {/if}
+    </DropdownItem>
+  {/each}
+  <div
+    slot="footer"
+    class="-mb-1 flex items-center bg-gray-50 p-3 text-sm font-medium hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600"
+  >
+    <DropdownItem
+      on:click={() => {
+        threadsStore.setSelectedAssistantId(NO_SELECTED_ASSISTANT_ID);
+        assistantSelectDropdownOpen = false;
+      }}
+      class="flex justify-between"
+      >None {#if $threadsStore.selectedAssistantId === NO_SELECTED_ASSISTANT_ID}
+        <CheckOutline data-testid="checked" />
+      {/if}</DropdownItem
+    >
+  </div>
+</Dropdown>
diff --git a/src/leapfrogai_ui/src/lib/components/ChatSidebar.test.ts b/src/leapfrogai_ui/src/lib/components/Sidebar.test.ts
similarity index 52%
rename from src/leapfrogai_ui/src/lib/components/ChatSidebar.test.ts
rename to src/leapfrogai_ui/src/lib/components/Sidebar.test.ts
index e41d03974..68654bbc4 100644
--- a/src/leapfrogai_ui/src/lib/components/ChatSidebar.test.ts
+++ b/src/leapfrogai_ui/src/lib/components/Sidebar.test.ts
@@ -1,4 +1,4 @@
-import { ChatSidebar } from '$components';
+import Sidebar from '$components/LFSidebar.svelte';
 import {
   mockDeleteThread,
   mockDeleteThreadError,
@@ -16,36 +16,54 @@ import * as navigation from '$app/navigation';
 import { getMessageText } from '$helpers/threads';
 import { NO_SELECTED_ASSISTANT_ID } from '$constants';
 
-const editThreadsLabel = async (oldLabel: string, newLabel: string, keyToPress = '{enter}') => {
-  const overflowMenu = within(screen.getByTestId(`side-nav-menu-item-${oldLabel}`)).getByRole(
-    'button',
-    { name: /menu/i }
-  );
-  await userEvent.click(overflowMenu);
-  const editBtn = within(overflowMenu).getByRole('menuitem', { name: /edit/i });
-  await userEvent.click(editBtn);
-
-  const editInput = await screen.findByLabelText('edit thread');
+const openThreadEditDeleteMenu = async (label: string) => {
+  const sidebarThreadMenuBtn = screen.getByTestId(`thread-menu-btn-${label}`);
+  await userEvent.click(sidebarThreadMenuBtn);
+};
+
+const clickEditThreadBtn = async () => {
+  const editDeletePopover = screen.getByTestId('sidebar-popover');
+  await userEvent.click(within(editDeletePopover).getByRole('button', { name: /edit/i }));
+  expect(screen.getByTestId('edit-thread-input')).toBeInTheDocument();
+};
+
+const clickDeleteThreadBtn = async () => {
+  const editDeletePopover = screen.getByTestId('sidebar-popover');
+  await userEvent.click(within(editDeletePopover).getByRole('button', { name: /delete/i }));
+};
+
+const renameThread = async (oldLabel: string, newLabel: string, keyToPress = '{enter}') => {
+  expect(screen.getByTestId('edit-thread-input')).toBeInTheDocument();
+  const editInput = screen.getByDisplayValue(oldLabel); // also test input has original label
   await userEvent.clear(editInput);
   await userEvent.type(editInput, newLabel);
   await userEvent.keyboard(keyToPress);
 };
 
+const editThreadsLabel = async (oldLabel: string, newLabel: string, keyToPress = '{enter}') => {
+  await openThreadEditDeleteMenu(fakeThreads[0].metadata.label);
+  await clickEditThreadBtn();
+  await renameThread(oldLabel, newLabel, keyToPress);
+};
+
 describe('ChatSidebar', () => {
   it('renders threads', async () => {
     threadsStore.set({
       threads: fakeThreads,
       sendingBlocked: false,
       selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
-      lastVisitedThreadId: fakeThreads[0].id
+      lastVisitedThreadId: fakeThreads[0].id,
+      streamingMessage: null
     });
 
-    render(ChatSidebar);
+    render(Sidebar);
 
     const threadsSection = screen.getByTestId('threads');
 
     fakeThreads.forEach((thread) => {
-      expect(within(threadsSection).getByText(thread.metadata.label)).toBeInTheDocument();
+      expect(
+        within(threadsSection).getByRole('button', { name: thread.metadata.label })
+      ).toBeInTheDocument();
     });
   });
 
@@ -62,15 +80,18 @@ describe('ChatSidebar', () => {
       threads: [fakeTodayThread, fakeYesterdayThread], // uses date override starting in March
       sendingBlocked: false,
       selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
-      lastVisitedThreadId: ''
+      lastVisitedThreadId: '',
+      streamingMessage: null
     });
 
-    render(ChatSidebar);
+    render(Sidebar);
     const threadsSection = screen.getByTestId('threads');
 
-    expect(within(threadsSection).getByText(fakeTodayThread.metadata.label)).toBeInTheDocument();
     expect(
-      within(threadsSection).getByText(fakeYesterdayThread.metadata.label)
+      within(threadsSection).getByRole('button', { name: fakeTodayThread.metadata.label })
+    ).toBeInTheDocument();
+    expect(
+      within(threadsSection).getByRole('button', { name: fakeYesterdayThread.metadata.label })
     ).toBeInTheDocument();
 
     expect(screen.getByText('Today')).toBeInTheDocument();
@@ -87,34 +108,37 @@ describe('ChatSidebar', () => {
       threads: fakeThreads,
       sendingBlocked: false,
       selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
-      lastVisitedThreadId: fakeThreads[0].id
+      lastVisitedThreadId: fakeThreads[0].id,
+      streamingMessage: null
     });
 
-    render(ChatSidebar);
+    render(Sidebar);
 
     const threadsSection = screen.getByTestId('threads');
 
-    expect(within(threadsSection).getByText(fakeThreads[0].metadata.label)).toBeInTheDocument();
-    expect(within(threadsSection).getByText(fakeThreads[1].metadata.label)).toBeInTheDocument();
-
-    const overflowMenu = screen.getAllByLabelText('menu')[0];
-    await userEvent.click(overflowMenu);
-
-    const deleteBtn = within(overflowMenu).getByText('Delete');
-    await userEvent.click(deleteBtn);
+    expect(
+      within(threadsSection).getByRole('button', { name: fakeThreads[0].metadata.label })
+    ).toBeInTheDocument();
+    expect(
+      within(threadsSection).getByRole('button', { name: fakeThreads[1].metadata.label })
+    ).toBeInTheDocument();
 
-    const modal = screen.getByRole('presentation');
+    await openThreadEditDeleteMenu(fakeThreads[0].metadata.label);
+    await clickDeleteThreadBtn();
 
+    const modal = screen.getByTestId('delete-thread-modal');
     expect(modal).toBeVisible();
 
-    const confirmDeleteBtn = within(modal).getByText('Delete');
+    const confirmDeleteBtn = within(modal).getByRole('button', { name: /delete/i });
     await userEvent.click(confirmDeleteBtn);
     expect(modal).not.toBeVisible;
 
     expect(
-      within(threadsSection).queryByText(fakeThreads[0].metadata.label)
+      within(threadsSection).queryByRole('button', { name: fakeThreads[0].metadata.label })
     ).not.toBeInTheDocument();
-    expect(within(threadsSection).getByText(fakeThreads[1].metadata.label)).toBeInTheDocument();
+    expect(
+      within(threadsSection).getByRole('button', { name: fakeThreads[1].metadata.label })
+    ).toBeInTheDocument();
   });
   it('dispatches a toast when there is an error deleting a thread and it does not delete the thread from the screen', async () => {
     mockDeleteThreadError();
@@ -125,29 +149,31 @@ describe('ChatSidebar', () => {
       threads: fakeThreads,
       sendingBlocked: false,
       selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
-      lastVisitedThreadId: fakeThreads[0].id
+      lastVisitedThreadId: fakeThreads[0].id,
+      streamingMessage: null
     });
 
-    render(ChatSidebar);
+    render(Sidebar);
 
     const threadsSection = screen.getByTestId('threads');
 
-    expect(within(threadsSection).getByText(fakeThreads[0].metadata.label)).toBeInTheDocument();
-
-    const overflowMenu = screen.getAllByLabelText('menu')[0];
-    await userEvent.click(overflowMenu);
+    expect(
+      within(threadsSection).getByRole('button', { name: fakeThreads[0].metadata.label })
+    ).toBeInTheDocument();
 
-    const deleteBtn = within(overflowMenu).getByText('Delete');
-    await userEvent.click(deleteBtn);
+    await openThreadEditDeleteMenu(fakeThreads[0].metadata.label);
+    await clickDeleteThreadBtn();
 
-    const modal = screen.getByRole('presentation');
+    const modal = screen.getByTestId('delete-thread-modal');
 
-    expect(modal).toBeInTheDocument();
+    expect(modal).toBeVisible();
 
-    const confirmDeleteBtn = within(modal).getByText('Delete');
+    const confirmDeleteBtn = within(modal).getByRole('button', { name: /delete/i });
     await userEvent.click(confirmDeleteBtn);
 
-    expect(within(threadsSection).getByText(fakeThreads[0].metadata.label)).toBeInTheDocument();
+    expect(
+      within(threadsSection).getByRole('button', { name: fakeThreads[0].metadata.label })
+    ).toBeInTheDocument();
     expect(toastSpy).toHaveBeenCalledTimes(1);
   });
 
@@ -159,17 +185,20 @@ describe('ChatSidebar', () => {
       threads: fakeThreads,
       sendingBlocked: false,
       selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
-      lastVisitedThreadId: fakeThreads[0].id
+      lastVisitedThreadId: fakeThreads[0].id,
+      streamingMessage: null
     });
 
-    render(ChatSidebar);
+    render(Sidebar);
 
     const threadsSection = screen.getByTestId('threads');
 
-    expect(within(threadsSection).getByText(fakeThreads[0].metadata.label)).toBeInTheDocument();
+    expect(
+      within(threadsSection).getByRole('button', { name: fakeThreads[0].metadata.label })
+    ).toBeInTheDocument();
 
     await editThreadsLabel(fakeThreads[0].metadata.label, newLabelText);
-    expect(within(threadsSection).getByText(newLabelText)).toBeInTheDocument();
+    expect(within(threadsSection).getByRole('button', { name: newLabelText })).toBeInTheDocument();
   });
 
   it('edits thread labels when tab is pressed instead of enter', async () => {
@@ -180,17 +209,20 @@ describe('ChatSidebar', () => {
       threads: fakeThreads,
       sendingBlocked: false,
       selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
-      lastVisitedThreadId: fakeThreads[0].id
+      lastVisitedThreadId: fakeThreads[0].id,
+      streamingMessage: null
     });
 
-    render(ChatSidebar);
+    render(Sidebar);
 
     const threadsSection = screen.getByTestId('threads');
 
-    expect(within(threadsSection).getByText(fakeThreads[0].metadata.label)).toBeInTheDocument();
+    expect(
+      within(threadsSection).getByRole('button', { name: fakeThreads[0].metadata.label })
+    ).toBeInTheDocument();
 
     await editThreadsLabel(fakeThreads[0].metadata.label, newLabelText, '{Tab}');
-    expect(within(threadsSection).getByText(newLabelText)).toBeInTheDocument();
+    expect(within(threadsSection).getByRole('button', { name: newLabelText })).toBeInTheDocument();
   });
 
   it('edits thread labels when the user clicks away from the input (onBlur)', async () => {
@@ -201,27 +233,27 @@ describe('ChatSidebar', () => {
       threads: fakeThreads,
       sendingBlocked: false,
       selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
-      lastVisitedThreadId: fakeThreads[0].id
+      lastVisitedThreadId: fakeThreads[0].id,
+      streamingMessage: null
     });
 
-    render(ChatSidebar);
+    render(Sidebar);
 
     const threadsSection = screen.getByTestId('threads');
 
-    expect(within(threadsSection).getByText(fakeThreads[0].metadata.label)).toBeInTheDocument();
+    expect(
+      within(threadsSection).getByRole('button', { name: fakeThreads[0].metadata.label })
+    ).toBeInTheDocument();
+
+    await openThreadEditDeleteMenu(fakeThreads[0].metadata.label);
+    await clickEditThreadBtn();
 
-    const overflowMenu = within(
-      screen.getByTestId(`side-nav-menu-item-${fakeThreads[0].metadata.label}`)
-    ).getByRole('button', { name: /menu/i });
-    await userEvent.click(overflowMenu);
-    const editBtn = within(overflowMenu).getByRole('menuitem', { name: /edit/i });
-    await userEvent.click(editBtn);
-    const editInput = screen.getByLabelText('edit thread');
+    const editInput = screen.getByDisplayValue(fakeThreads[0].metadata.label);
     await userEvent.clear(editInput);
     await userEvent.type(editInput, newLabelText);
 
     await fireEvent.blur(editInput);
-    await within(threadsSection).findByText(newLabelText);
+    await screen.findByRole('button', { name: newLabelText });
   });
 
   it('dispatches a toast when there is an error editing a threads label and it does not update the label on the screen', async () => {
@@ -233,18 +265,23 @@ describe('ChatSidebar', () => {
       threads: fakeThreads,
       sendingBlocked: false,
       selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
-      lastVisitedThreadId: fakeThreads[0].id
+      lastVisitedThreadId: fakeThreads[0].id,
+      streamingMessage: null
     });
 
-    render(ChatSidebar);
+    render(Sidebar);
 
     const threadsSection = screen.getByTestId('threads');
 
-    expect(within(threadsSection).getByText(fakeThreads[0].metadata.label)).toBeInTheDocument();
+    expect(
+      within(threadsSection).getByRole('button', { name: fakeThreads[0].metadata.label })
+    ).toBeInTheDocument();
 
     await editThreadsLabel(fakeThreads[0].metadata.label, newLabelText);
-    await userEvent.keyboard('{enter}');
-    expect(within(threadsSection).getByText(fakeThreads[0].metadata.label)).toBeInTheDocument();
+
+    expect(
+      within(threadsSection).getByRole('button', { name: fakeThreads[0].metadata.label })
+    ).toBeInTheDocument();
     expect(toastSpy).toHaveBeenCalledTimes(1);
   });
 
@@ -254,19 +291,24 @@ describe('ChatSidebar', () => {
       threads: fakeThreads,
       sendingBlocked: false,
       selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
-      lastVisitedThreadId: fakeThreads[0].id
+      lastVisitedThreadId: fakeThreads[0].id,
+      streamingMessage: null
     });
 
-    render(ChatSidebar);
+    render(Sidebar);
 
     const threadsSection = screen.getByTestId('threads');
 
-    expect(within(threadsSection).getByText(fakeThreads[0].metadata.label)).toBeInTheDocument();
+    expect(
+      within(threadsSection).getByRole('button', { name: fakeThreads[0].metadata.label })
+    ).toBeInTheDocument();
 
     await editThreadsLabel(fakeThreads[0].metadata.label, newLabelText, '{escape}');
 
-    expect(screen.queryByLabelText('edit thread')).not.toBeInTheDocument();
-    expect(within(threadsSection).getByText(fakeThreads[0].metadata.label)).toBeInTheDocument();
+    expect(screen.queryByTestId('edit-thread-input')).not.toBeInTheDocument();
+    expect(
+      within(threadsSection).getByRole('button', { name: fakeThreads[0].metadata.label })
+    ).toBeInTheDocument();
   });
 
   it('disables the input when enter is pressed', async () => {
@@ -277,21 +319,20 @@ describe('ChatSidebar', () => {
       threads: fakeThreads,
       sendingBlocked: false,
       selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
-      lastVisitedThreadId: fakeThreads[0].id
+      lastVisitedThreadId: fakeThreads[0].id,
+      streamingMessage: null
     });
 
-    render(ChatSidebar);
+    render(Sidebar);
 
-    // Not using the helper function b/c we need to reference the editInput at the end
-    const overflowMenu = screen.getAllByLabelText('menu')[0];
-    await userEvent.click(overflowMenu);
-    const editBtn = within(overflowMenu).getByText('Edit');
-    await userEvent.click(editBtn);
-    const editInput = screen.getByLabelText('edit thread');
+    // Not using the helper function b/c we need to reference the editInput before it is removed from the dom
+    await openThreadEditDeleteMenu(fakeThreads[0].metadata.label);
+    await clickEditThreadBtn();
+    const editInput = screen.getByTestId('edit-thread-input');
     await userEvent.clear(editInput);
     await userEvent.type(editInput, newLabelText);
     await userEvent.keyboard('{enter}');
-    expect(editInput).toHaveProperty('readOnly', true);
+    expect(editInput).toBeDisabled();
   });
 
   it('removes the edit input when the focus on the input is lost', async () => {
@@ -302,14 +343,14 @@ describe('ChatSidebar', () => {
       threads: fakeThreads,
       sendingBlocked: false,
       selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
-      lastVisitedThreadId: fakeThreads[0].id
+      lastVisitedThreadId: fakeThreads[0].id,
+      streamingMessage: null
     });
 
-    render(ChatSidebar);
+    render(Sidebar);
 
     await editThreadsLabel(fakeThreads[0].metadata.label, newLabelText, '{tab}');
-    const editInput = screen.queryByText('edit thread');
-    expect(editInput).not.toBeInTheDocument();
+    expect(screen.queryByTestId('edit-thread-input')).not.toBeInTheDocument();
   });
   it('changes the active chat thread', async () => {
     const goToSpy = vi.spyOn(navigation, 'goto');
@@ -320,14 +361,17 @@ describe('ChatSidebar', () => {
       threads: [fakeThread],
       sendingBlocked: false,
       selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
-      lastVisitedThreadId: fakeThreads[0].id
+      lastVisitedThreadId: fakeThreads[0].id,
+      streamingMessage: null
     });
 
-    render(ChatSidebar);
+    render(Sidebar);
 
-    expect(screen.queryByText(getMessageText(fakeThread.messages![0]))).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: getMessageText(fakeThread.messages![0]) })
+    ).not.toBeInTheDocument();
 
-    await userEvent.click(screen.getByText(fakeThread.metadata.label));
+    await userEvent.click(screen.getByRole('button', { name: fakeThread.metadata.label }));
 
     expect(goToSpy).toHaveBeenCalledTimes(1);
     expect(goToSpy).toHaveBeenCalledWith(`/chat/${fakeThread.id}`);
@@ -341,21 +385,28 @@ describe('ChatSidebar', () => {
       threads: [fakeThread1, fakeThread2, fakeThread3],
       sendingBlocked: false,
       selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
-      lastVisitedThreadId: ''
+      lastVisitedThreadId: '',
+      streamingMessage: null
     });
 
-    render(ChatSidebar);
+    render(Sidebar);
 
-    expect(screen.queryByText(fakeThread1.metadata.label)).toBeInTheDocument();
-    expect(screen.queryByText(fakeThread2.metadata.label)).toBeInTheDocument();
-    expect(screen.queryByText(fakeThread3.metadata.label)).toBeInTheDocument();
+    screen.getByRole('button', { name: fakeThread1.metadata.label });
+    screen.getByRole('button', { name: fakeThread2.metadata.label });
+    screen.getByRole('button', { name: fakeThread3.metadata.label });
 
     const searchBox = screen.getByPlaceholderText('Search...');
     await userEvent.type(searchBox, fakeThread2.metadata.label);
 
-    expect(screen.queryByText(fakeThread1.metadata.label)).not.toBeInTheDocument();
-    expect(screen.queryByText(fakeThread2.metadata.label)).toBeInTheDocument();
-    expect(screen.queryByText(fakeThread3.metadata.label)).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: fakeThread1.metadata.label })
+    ).not.toBeInTheDocument();
+
+    expect(screen.queryByRole('button', { name: fakeThread2.metadata.label })).toBeInTheDocument();
+
+    expect(
+      screen.queryByRole('button', { name: fakeThread3.metadata.label })
+    ).not.toBeInTheDocument();
   });
 
   it('search finds threads by messages', async () => {
@@ -367,21 +418,28 @@ describe('ChatSidebar', () => {
       threads: [fakeThread1, fakeThread2, fakeThread3],
       sendingBlocked: false,
       selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
-      lastVisitedThreadId: ''
+      lastVisitedThreadId: '',
+      streamingMessage: null
     });
 
-    render(ChatSidebar);
+    render(Sidebar);
 
-    expect(screen.queryByText(fakeThread1.metadata.label)).toBeInTheDocument();
-    expect(screen.queryByText(fakeThread2.metadata.label)).toBeInTheDocument();
-    expect(screen.queryByText(fakeThread3.metadata.label)).toBeInTheDocument();
+    screen.getByRole('button', { name: fakeThread1.metadata.label });
+    screen.getByRole('button', { name: fakeThread2.metadata.label });
+    screen.getByRole('button', { name: fakeThread3.metadata.label });
 
     const searchBox = screen.getByPlaceholderText('Search...');
 
     await userEvent.type(searchBox, getMessageText(fakeThread1.messages![0]));
 
-    expect(screen.queryByText(fakeThread1.metadata.label)).toBeInTheDocument();
-    expect(screen.queryByText(fakeThread2.metadata.label)).not.toBeInTheDocument();
-    expect(screen.queryByText(fakeThread3.metadata.label)).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: fakeThread1.metadata.label })).toBeInTheDocument();
+
+    expect(
+      screen.queryByRole('button', { name: fakeThread2.metadata.label })
+    ).not.toBeInTheDocument();
+
+    expect(
+      screen.queryByRole('button', { name: fakeThread3.metadata.label })
+    ).not.toBeInTheDocument();
   });
 });
diff --git a/src/leapfrogai_ui/src/lib/components/SidebarWrapper.svelte b/src/leapfrogai_ui/src/lib/components/SidebarWrapper.svelte
new file mode 100644
index 000000000..04d60476a
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/SidebarWrapper.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { sineIn } from 'svelte/easing';
+  import { uiStore } from '$stores';
+  import LFSidebar from '$components/LFSidebar.svelte';
+  import LFDrawer from '$components/LFDrawer.svelte';
+
+  let transitionParams = {
+    x: -320,
+    duration: 200,
+    easing: sineIn
+  };
+
+  $: innerWidth = 0;
+
+  $: innerWidth < 1024 && uiStore.setOpenSidebar(false);
+</script>
+
+<svelte:window bind:innerWidth />
+
+{#if innerWidth < 1024}
+  <LFDrawer
+    transitionType="fly"
+    {transitionParams}
+    activateClickOutside={false}
+    placement="left"
+    hidden={!$uiStore.openSidebar}
+    class="no-scrollbar top-header flex max-w-64 overflow-y-hidden p-0"
+    backdropCustomClass="top-header"
+  >
+    <LFSidebar />
+  </LFDrawer>
+{:else}
+  <LFSidebar />
+{/if}
diff --git a/src/leapfrogai_ui/src/lib/components/Slider.svelte b/src/leapfrogai_ui/src/lib/components/Slider.svelte
new file mode 100644
index 000000000..150c379d7
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/Slider.svelte
@@ -0,0 +1,38 @@
+<!-- A basic reference custom range component -->
+<!-- Featuring: onChange events, Custom property theming, Tooltip, A11y keyboard controls + attributes, -->
+
+<script lang="ts">
+  import Range from '$components/Range.svelte';
+  import LFLabel from '$components/LFLabel.svelte';
+  import { twMerge } from 'tailwind-merge';
+
+  export let id: string;
+  export let label: string | undefined = undefined;
+  export let tooltipText: string | undefined = undefined;
+  export let max = 100;
+  export let min = 0;
+  export let value: number = Math.floor((max - min) / 2);
+  export let showThumb = true;
+
+  function normalize(value: number) {
+    return (value - min) / (max - min);
+  }
+</script>
+
+<div class={twMerge('theme', 'mb-6', $$props.class)}>
+  {#if label}
+    <LFLabel {id} {tooltipText}>{label}</LFLabel>
+  {/if}
+  <Range on:change={(e) => (value = normalize(e.detail.value))} {id} {max} {min} {showThumb} />
+</div>
+
+<style>
+  .theme {
+    --track-focus: #1e40af;
+    --track-highlight-bgcolor: #1e40af;
+    --track-highlight-bg: linear-gradient(90deg, #93c5fd, #1e3a8a);
+    --thumb-holding-outline: #3b82f6;
+    --tooltip-bgcolor: #374151;
+    --tooltip-bg: #374151;
+  }
+</style>
diff --git a/src/leapfrogai_ui/src/lib/components/ThreadOverflowMenu.svelte b/src/leapfrogai_ui/src/lib/components/ThreadOverflowMenu.svelte
deleted file mode 100644
index 11e65afe1..000000000
--- a/src/leapfrogai_ui/src/lib/components/ThreadOverflowMenu.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-  import { OverflowMenu, OverflowMenuItem } from 'carbon-components-svelte';
-  import type { LFThread } from '$lib/types/threads';
-  import { uiStore } from '$stores';
-
-  export let thread: LFThread;
-  export let scrollOffset = 0;
-  export let editLabelText: string | undefined = undefined;
-  export let parentSideNavRef: HTMLAnchorElement;
-  export let editMode: boolean;
-  export let deleteModalOpen: boolean;
-
-  let isOpen: boolean;
-  let buttonRef: HTMLButtonElement;
-
-  $: positioningHeight = Math.abs((parentSideNavRef?.offsetTop || 0) - scrollOffset + 48);
-</script>
-
-<OverflowMenu
-  id={`overflow-menu-${thread.id}`}
-  bind:buttonRef
-  bind:open={isOpen}
-  data-testid="overflow-menu-{thread.metadata.label}"
-  style={isOpen
-    ? `position: fixed; top: 0; left: 0; transform: translate(224px, ${positioningHeight}px)`
-    : ''}
-  on:click={(e) => {
-    e.stopPropagation();
-    uiStore.setSelectedThreadOverflowMenuId(thread.id);
-  }}
->
-  <OverflowMenuItem
-    text="Edit"
-    on:click={(e) => {
-      e.stopPropagation();
-      editLabelText = thread.metadata.label;
-      editMode = true;
-    }}
-  />
-
-  <OverflowMenuItem
-    data-testid="overflow-menu-delete-{thread.metadata.label}"
-    text="Delete"
-    on:click={(e) => {
-      e.stopPropagation();
-      deleteModalOpen = true;
-    }}
-  />
-</OverflowMenu>
diff --git a/src/leapfrogai_ui/src/lib/components/Toasts.svelte b/src/leapfrogai_ui/src/lib/components/Toasts.svelte
index dddbc5d84..7a5eabadb 100644
--- a/src/leapfrogai_ui/src/lib/components/Toasts.svelte
+++ b/src/leapfrogai_ui/src/lib/components/Toasts.svelte
@@ -1,34 +1,15 @@
 <script lang="ts">
-  import { ToastNotification } from 'carbon-components-svelte';
-  import { slide } from 'svelte/transition';
   import { toastStore } from '$stores';
+  import { slide } from 'svelte/transition';
+  import LFToast from '$components/LFToast.svelte';
 </script>
 
 {#if $toastStore.toasts}
-  <section>
+  <section class="z-max absolute right-0 top-header flex flex-col justify-center gap-1">
     {#each $toastStore.toasts as toast (toast.id)}
       <div transition:slide>
-        <ToastNotification
-          timeout={toast.timeout}
-          kind={toast.kind}
-          title={toast.title}
-          subtitle={toast.subtitle}
-          caption={`Time stamp [${new Date().toLocaleTimeString()}]`}
-          on:click={() => toastStore.dismissToast(toast.id)}
-        />
+        <LFToast {toast} />
       </div>
     {/each}
   </section>
 {/if}
-
-<style lang="scss">
-  section {
-    position: absolute;
-    top: 0 + var(--header-height);
-    right: 0;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    z-index: 100000;
-  }
-</style>
diff --git a/src/leapfrogai_ui/src/lib/components/index.ts b/src/leapfrogai_ui/src/lib/components/index.ts
index 41f277a8e..97d490029 100644
--- a/src/leapfrogai_ui/src/lib/components/index.ts
+++ b/src/leapfrogai_ui/src/lib/components/index.ts
@@ -1,4 +1,3 @@
-export { default as ChatSidebar } from './ChatSidebar.svelte';
 export { default as PoweredByDU } from './PoweredByDU.svelte';
 export { default as LFTextArea } from './LFTextArea.svelte';
 export { default as Message } from './Message.svelte';
diff --git a/src/leapfrogai_ui/src/lib/components/modals/ConfirmAssistantDeleteModal.svelte b/src/leapfrogai_ui/src/lib/components/modals/ConfirmAssistantDeleteModal.svelte
deleted file mode 100644
index 4bb584f07..000000000
--- a/src/leapfrogai_ui/src/lib/components/modals/ConfirmAssistantDeleteModal.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts">
-  import { Modal } from 'carbon-components-svelte';
-  import type { Assistant } from 'openai/resources/beta/assistants';
-  import { filesStore } from '$stores';
-
-  export let open: boolean;
-  export let affectedAssistantsLoading: boolean;
-  export let deleting: boolean;
-  export let confirmDeleteModalOpen: boolean;
-  export let handleConfirmedDelete: () => void;
-  export let affectedAssistants: Assistant[];
-
-  const handleCancel = () => {
-    confirmDeleteModalOpen = false;
-    affectedAssistants = [];
-    affectedAssistantsLoading = false;
-  };
-
-  $: fileNames = $filesStore.files
-    .map((file) => {
-      if ($filesStore.selectedFileManagementFileIds.includes(file.id)) return file.filename;
-    })
-    .filter((filename) => filename !== undefined)
-    .join(', ');
-</script>
-
-<Modal
-  danger
-  preventCloseOnClickOutside
-  bind:open
-  modalHeading="Delete File"
-  shouldSubmitOnEnter={false}
-  primaryButtonText="Delete"
-  secondaryButtonText="Cancel"
-  primaryButtonDisabled={affectedAssistantsLoading || deleting}
-  on:click:button--secondary={handleCancel}
-  on:close={handleCancel}
-  on:submit={() => handleConfirmedDelete()}
->
-  {#if affectedAssistantsLoading}
-    <p>Checking for any assistants affected by deletion...</p>
-  {:else}
-    <p>
-      Are you sure you want to delete <span style="font-weight: bold">{fileNames}</span>?
-      {#if affectedAssistants.length > 0}
-        This will affect the following assistants:
-        {#each affectedAssistants as affectedAssistant}
-          <li>{affectedAssistant.name}</li>
-        {/each}
-      {/if}
-    </p>
-  {/if}
-</Modal>
diff --git a/src/leapfrogai_ui/src/lib/components/modals/ConfirmFilesDeleteModal.svelte b/src/leapfrogai_ui/src/lib/components/modals/ConfirmFilesDeleteModal.svelte
new file mode 100644
index 000000000..98011ede8
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/modals/ConfirmFilesDeleteModal.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { Button, Modal, P } from 'flowbite-svelte';
+  import type { Assistant } from 'openai/resources/beta/assistants';
+  import { filesStore, toastStore } from '$stores';
+  import { ExclamationCircleOutline } from 'flowbite-svelte-icons';
+  import { invalidate } from '$app/navigation';
+  import { createEventDispatcher } from 'svelte';
+
+  export let open;
+  export let affectedAssistantsLoading: boolean;
+  export let deleting: boolean;
+  export let affectedAssistants: Assistant[];
+
+  const dispatch = createEventDispatcher();
+
+  const handleCancel = () => {
+    open = false;
+    affectedAssistants = [];
+    affectedAssistantsLoading = false;
+  };
+
+  const handleConfirmedDelete = async () => {
+    const isMultipleFiles = $filesStore.selectedFileManagementFileIds.length > 1;
+    deleting = true;
+    const res = await fetch('/api/files/delete', {
+      method: 'DELETE',
+      body: JSON.stringify({ ids: $filesStore.selectedFileManagementFileIds }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    open = false;
+    await invalidate('lf:files');
+    if (res.ok) {
+      toastStore.addToast({
+        kind: 'success',
+        title: `${isMultipleFiles ? 'Files' : 'File'} Deleted`
+      });
+    } else {
+      toastStore.addToast({
+        kind: 'error',
+        title: `Error Deleting ${isMultipleFiles ? 'Files' : 'File'}`
+      });
+    }
+    filesStore.setSelectedFileManagementFileIds([]);
+    deleting = false;
+    dispatch('delete');
+  };
+
+  $: fileNames = $filesStore.files
+    .map((file) => {
+      if ($filesStore.selectedFileManagementFileIds.includes(file.id)) return file.filename;
+    })
+    .filter((filename) => filename !== undefined)
+    .join(', ');
+</script>
+
+<Modal
+  data-testid="delete-files-modal"
+  bind:open
+  autoclose
+  title="Delete File"
+  on:close={handleCancel}
+  color="primary"
+>
+  <div class="flex flex-col gap-4">
+    <ExclamationCircleOutline class="mx-auto  h-12 w-12 text-gray-400 dark:text-white" />
+    {#if affectedAssistantsLoading}
+      <P size="xl" class="text-center dark:text-gray-400"
+        >Checking for any assistants affected by deletion...</P
+      >
+    {:else}
+      <P size="xl" class="text-center dark:text-gray-400">
+        Are you sure you want to delete <span style="font-weight: bold">{fileNames}</span>?
+        {#if affectedAssistants.length > 0}
+          This will affect the following assistants:
+          {#each affectedAssistants as affectedAssistant}
+            <li>{affectedAssistant.name}</li>
+          {/each}
+        {/if}
+      </P>
+    {/if}
+    <div class="flex justify-end gap-2">
+      <Button color="alternative" on:click={handleCancel} size="sm">Cancel</Button>
+      <Button
+        color="red"
+        on:click={handleConfirmedDelete}
+        disabled={deleting || affectedAssistantsLoading}
+        size="sm">Delete</Button
+      >
+    </div>
+  </div>
+</Modal>
diff --git a/src/leapfrogai_ui/src/lib/components/modals/CopyApiKeyModal.svelte b/src/leapfrogai_ui/src/lib/components/modals/CopyApiKeyModal.svelte
index d5779f655..ee64265a4 100644
--- a/src/leapfrogai_ui/src/lib/components/modals/CopyApiKeyModal.svelte
+++ b/src/leapfrogai_ui/src/lib/components/modals/CopyApiKeyModal.svelte
@@ -1,64 +1,49 @@
 <script lang="ts">
   import { formatKeyLong } from '$helpers/apiKeyHelpers.js';
   import { calculateDays, formatDate } from '$helpers/dates.js';
-  import { Modal, TextInput } from 'carbon-components-svelte';
+  import { Button, Kbd, Label, Modal, P } from 'flowbite-svelte';
   import type { APIKeyRow } from '$lib/types/apiKeys';
   import CopyToClipboardBtn from '$components/CopyToClipboardBtn.svelte';
 
   export let copyKeyModalOpen: boolean;
-  export let handleCloseCopyKeyModal: () => void;
   export let createdKey: APIKeyRow | null;
 
   let saveKeyModalRef: HTMLDivElement;
+
+  const handleClose = () => {
+    copyKeyModalOpen = false;
+  };
 </script>
 
 <Modal
-  bind:ref={saveKeyModalRef}
   bind:open={copyKeyModalOpen}
-  preventCloseOnClickOutside
-  modalHeading="Save secret key"
-  primaryButtonText="Close"
-  on:close={handleCloseCopyKeyModal}
-  on:submit={handleCloseCopyKeyModal}
+  autoclose
+  title="Save secret key"
+  on:close={handleClose}
+  color="primary"
 >
   {#if createdKey}
-    <div class="centered-spaced-container" style="flex-direction: column">
-      <p>
+    <div class="flex flex-col gap-4">
+      <P size="xl" class="text-center dark:text-gray-400">
         Please store this secret key in a safe and accessible place. For security purposes, it
         cannot be viewed again through your LeapfrogAI account. If you lose it, you'll need to
         create a new one.
-      </p>
-      <div class="centered-spaced-lg-container" style="width: 100%">
-        <TextInput
-          readonly
-          labelText="Key"
-          value={formatKeyLong(createdKey.api_key, saveKeyModalRef?.offsetWidth || 200)}
-        />
-        <CopyToClipboardBtn value={createdKey.api_key} toastTitle="API Key Copied" />
+      </P>
+      <div class="flex w-full gap-2">
+        <Kbd class="flex items-center px-2 py-1.5"
+          >{formatKeyLong(createdKey.api_key, saveKeyModalRef?.offsetWidth || 200)}</Kbd
+        >
+        <CopyToClipboardBtn btnText="Copy" value={createdKey.api_key} toastTitle="API Key Copied" />
       </div>
-      <div style="width: 100%">
-        <label for="saved-expiration" class:bx--label={true}>Expiration</label>
-        <p id="saved-expiration">
+      <div>
+        <Label for="saved-expiration" class="mb-2 block">Expiration</Label>
+        <P size="lg" class=" dark:text-gray-400">
           {`${calculateDays(createdKey.created_at, createdKey.expires_at)} days - ${formatDate(new Date(createdKey.expires_at * 1000))}`}
-        </p>
+        </P>
       </div>
     </div>
   {/if}
+  <div class="flex justify-end">
+    <Button on:click={handleClose} size="sm">Close</Button>
+  </div>
 </Modal>
-
-<style lang="scss">
-  .centered-spaced-container {
-    display: flex;
-    gap: layout.$spacing-06;
-    align-items: center;
-  }
-
-  .centered-spaced-lg-container {
-    display: flex;
-    gap: layout.$spacing-07;
-    align-items: center;
-    :global(.bx--text-input__readonly-icon) {
-      display: none;
-    }
-  }
-</style>
diff --git a/src/leapfrogai_ui/src/lib/components/modals/CreateApiKeyModal.svelte b/src/leapfrogai_ui/src/lib/components/modals/CreateApiKeyModal.svelte
index a5881cc0a..5c7df1bdb 100644
--- a/src/leapfrogai_ui/src/lib/components/modals/CreateApiKeyModal.svelte
+++ b/src/leapfrogai_ui/src/lib/components/modals/CreateApiKeyModal.svelte
@@ -1,65 +1,153 @@
 <script lang="ts">
-  import { ContentSwitcher, Modal, Switch, TextInput } from 'carbon-components-svelte';
+  import { Button, ButtonGroup, Input, Label, Modal, P } from 'flowbite-svelte';
+  import { superForm } from 'sveltekit-superforms';
+  import { yup } from 'sveltekit-superforms/adapters';
+  import { newAPIKeySchema } from '$schemas/apiKey';
+  import { toastStore } from '$stores';
+  import { invalidate } from '$app/navigation';
+  import type { APIKeyRow } from '$lib/types/apiKeys';
+  import CopyApiKeyModal from '$components/modals/CopyApiKeyModal.svelte';
 
-  export let modalOpen: boolean;
-  export let handleCancel: () => void;
-  export let submit: () => void;
-  export let name: string | undefined;
-  export let invalidText: string | undefined;
-  export let selectedExpirationIndex: number;
-  export let selectedExpirationDate: number;
+  export let form;
+  export let createApiKeyModalOpen: boolean;
+
+  let selectedExpirationIndex = 1;
+  let selectedExpirationDate: number;
+  let createdKey: APIKeyRow | null = null;
+  let copyKeyModalOpen = false;
+
+  // Set actual expiration date based on selected Switch
+  $: {
+    switch (selectedExpirationIndex) {
+      case 0: {
+        const sevenDays = new Date();
+        sevenDays.setDate(sevenDays.getDate() + 7);
+        selectedExpirationDate = Math.floor(sevenDays.getTime() / 1000);
+        break;
+      }
+      case 1: {
+        const thirtyDays = new Date();
+        thirtyDays.setDate(thirtyDays.getDate() + 30);
+        selectedExpirationDate = Math.floor(thirtyDays.getTime() / 1000);
+        break;
+      }
+      case 2: {
+        const sixtyDays = new Date();
+        sixtyDays.setDate(sixtyDays.getDate() + 60);
+        selectedExpirationDate = Math.floor(sixtyDays.getTime() / 1000);
+        break;
+      }
+      case 3: {
+        const ninetyDays = new Date();
+        ninetyDays.setDate(ninetyDays.getDate() + 90);
+        selectedExpirationDate = Math.floor(ninetyDays.getTime() / 1000);
+        break;
+      }
+      default: {
+        selectedExpirationDate = Math.floor(new Date().getTime() / 1000);
+        break;
+      }
+    }
+  }
+
+  const handleClose = () => {
+    reset();
+    selectedExpirationIndex = 1;
+    createApiKeyModalOpen = false;
+  };
+
+  const {
+    form: sForm,
+    enhance,
+    submit,
+    reset
+  } = superForm(form, {
+    invalidateAll: false,
+    validators: yup(newAPIKeySchema),
+    onError() {
+      createApiKeyModalOpen = false;
+      toastStore.addToast({
+        kind: 'error',
+        title: 'Creation Failed'
+      });
+      invalidate('lf:api-keys');
+    },
+    onResult({ result }) {
+      if (result.type === 'success') {
+        createdKey = result.data?.key;
+        copyKeyModalOpen = true;
+        handleClose();
+        toastStore.addToast({
+          kind: 'success',
+          title: 'Created Successfully',
+          subtitle: `${result.data?.form.data.name} created successfully.`
+        });
+        invalidate('lf:api-keys');
+      }
+    }
+  });
+
+  const handleExpirationClick = (index: number, e) => {
+    e.stopPropagation();
+    selectedExpirationIndex = index;
+  };
 </script>
 
-<Modal
-  bind:open={modalOpen}
-  preventCloseOnClickOutside
-  modalHeading="Create new secret key"
-  primaryButtonText="Create"
-  secondaryButtonText="Cancel"
-  hasForm
-  on:click:button--secondary={handleCancel}
-  on:close={handleCancel}
-  on:submit={submit}
->
-  <div class="modal-inner-content">
-    <p style="width: 70%;">
-      This API key is linked to your user account and gives full access to it. Please be careful and
-      keep it secret.
-    </p>
+<form method="POST" enctype="multipart/form-data" action={'/chat/api-keys'} use:enhance>
+  <Modal
+    data-testid="create-api-key-modal"
+    bind:open={createApiKeyModalOpen}
+    autoclose
+    title="Create new secret key"
+    on:close={handleClose}
+    color="primary"
+  >
+    <div class="flex flex-col gap-4">
+      <div>
+        <P class="dark:text-gray-400">
+          This API key is linked to your user account and gives full access to it. Please be careful
+          and keep it secret.
+        </P>
+      </div>
+      <div>
+        <Label for="name" class="mb-2">Name</Label>
+        <Input
+          name="name"
+          type="text"
+          placeholder="Test key"
+          autocomplete="off"
+          bind:value={$sForm.name}
+        />
+      </div>
+      <div>
+        <Label for="expiration" class="mb-2">Expiration</Label>
+        <ButtonGroup>
+          <Button
+            class={selectedExpirationIndex === 0 && 'z-10 ring-2 !ring-primary-700'}
+            on:click={(e) => handleExpirationClick(0, e)}>7 Days</Button
+          >
+          <Button
+            class={selectedExpirationIndex === 1 && 'z-10 ring-2 !ring-primary-700'}
+            on:click={(e) => handleExpirationClick(1, e)}>30 Days</Button
+          >
+          <Button
+            on:click={(e) => handleExpirationClick(2, e)}
+            class={selectedExpirationIndex === 2 && 'z-10 ring-2 !ring-primary-700'}>60 Days</Button
+          >
+          <Button
+            on:click={(e) => handleExpirationClick(3, e)}
+            class={selectedExpirationIndex === 3 && 'z-10 ring-2 !ring-primary-700'}>90 Days</Button
+          >
+        </ButtonGroup>
+      </div>
 
-    <TextInput
-      id="name"
-      name="name"
-      labelText="Name"
-      placeholder="Test Key"
-      size="sm"
-      autocomplete="off"
-      bind:value={name}
-      invalid={!!invalidText}
-      {invalidText}
-    />
-    <div>
-      <label for="expiration" class:bx--label={true}>Expiration</label>
-      <ContentSwitcher
-        id="expiration"
-        size="xl"
-        style="width: 60%"
-        bind:selectedIndex={selectedExpirationIndex}
-      >
-        <Switch text="7 Days" />
-        <Switch text="30 Days" />
-        <Switch text="60 Days" />
-        <Switch text="90 Days" />
-      </ContentSwitcher>
+      <input type="hidden" name="expires_at" value={selectedExpirationDate} />
     </div>
-    <input type="hidden" name="expires_at" value={selectedExpirationDate} />
-  </div>
-</Modal>
+    <div class="flex justify-end gap-2">
+      <Button color="alternative" on:click={handleClose} size="sm">Cancel</Button>
+      <Button on:click={submit} size="sm">Create</Button>
+    </div>
+  </Modal>
+</form>
 
-<style lang="scss">
-  .modal-inner-content {
-    display: flex;
-    flex-direction: column;
-    gap: layout.$spacing-06;
-  }
-</style>
+<CopyApiKeyModal bind:copyKeyModalOpen {createdKey} />
diff --git a/src/leapfrogai_ui/src/lib/components/modals/CreateApiKeyModal.test.ts b/src/leapfrogai_ui/src/lib/components/modals/CreateApiKeyModal.test.ts
new file mode 100644
index 000000000..00e942344
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/components/modals/CreateApiKeyModal.test.ts
@@ -0,0 +1,42 @@
+import { render, screen, within } from '@testing-library/svelte';
+import CreateApiKeyModal from '$components/modals/CreateApiKeyModal.svelte';
+import { superValidate } from 'sveltekit-superforms';
+import { yup } from 'sveltekit-superforms/adapters';
+import { vi } from 'vitest';
+import type { APIKeysForm } from '$lib/types/apiKeys';
+import { newAPIKeySchema } from '$schemas/apiKey';
+import { toastStore } from '$stores';
+import { faker } from '@faker-js/faker';
+import userEvent from '@testing-library/user-event';
+import { mockCreateApiKeyFormActionError } from '$lib/mocks/api-key-mocks';
+
+// TODO - this test will not work until we get a response to this question:
+// https://github.com/ciscoheat/sveltekit-superforms/issues/394
+// This is currently blocking this issue: https://github.com/defenseunicorns/leapfrogai/issues/636
+describe.skip('Create API Key Modal', () => {
+  let form: APIKeysForm;
+
+  it('closes the modal and pops a toast when there is an error with the form action', async () => {
+    const keyName = faker.word.noun();
+    const sixtyDays = new Date();
+    sixtyDays.setDate(sixtyDays.getDate() + 60);
+
+    mockCreateApiKeyFormActionError();
+
+    const toastSpy = vi.spyOn(toastStore, 'addToast');
+
+    form = await superValidate(yup(newAPIKeySchema));
+    render(CreateApiKeyModal, { createApiKeyModalOpen: true, form });
+
+    const modal = screen.getByTestId('create-api-key-modal');
+    await userEvent.type(within(modal).getByRole('textbox'), keyName);
+    await userEvent.click(screen.getByText('60 Days'));
+    await userEvent.click(within(modal).getByRole('button', { name: /create/i }));
+
+    expect(toastSpy).toHaveBeenCalledWith({
+      kind: 'error',
+      title: 'Creation Failed'
+    });
+    expect(modal).not.toBeInTheDocument();
+  });
+});
diff --git a/src/leapfrogai_ui/src/lib/components/modals/DeleteApiKeyModal.svelte b/src/leapfrogai_ui/src/lib/components/modals/DeleteApiKeyModal.svelte
index 2159e853f..58b0d9d58 100644
--- a/src/leapfrogai_ui/src/lib/components/modals/DeleteApiKeyModal.svelte
+++ b/src/leapfrogai_ui/src/lib/components/modals/DeleteApiKeyModal.svelte
@@ -1,24 +1,70 @@
 <script lang="ts">
-  import { Modal } from 'carbon-components-svelte';
+  import { Button, Modal, P } from 'flowbite-svelte';
+  import { ExclamationCircleOutline } from 'flowbite-svelte-icons';
+  import { toastStore } from '$stores';
+  import { page } from '$app/stores';
+  import { invalidate } from '$app/navigation';
+  import { createEventDispatcher } from 'svelte';
 
   export let confirmDeleteModalOpen: boolean;
-  export let keyNames: string;
+  export let selectedRowIds: string[];
   export let deleting: boolean;
-  export let handleCancelConfirmDelete: () => void;
-  export let handleDelete: () => void;
+
+  const dispatch = createEventDispatcher();
+
+  $: keyNames = $page.data.keys
+    ? $page.data.keys
+        .map((key) => {
+          if (selectedRowIds.includes(key.id)) return key.name;
+        })
+        .filter((key) => key !== undefined)
+        .join(', ')
+    : '';
+
+  const handleCancel = () => {
+    confirmDeleteModalOpen = false;
+  };
+
+  const handleDelete = async () => {
+    deleting = true;
+    const isMultiple = selectedRowIds.length > 1;
+    const res = await fetch('/api/api-keys/delete', {
+      body: JSON.stringify({ ids: selectedRowIds }),
+      method: 'DELETE'
+    });
+    dispatch('delete', selectedRowIds);
+    deleting = false;
+    if (res.ok) {
+      toastStore.addToast({
+        kind: 'success',
+        title: `${isMultiple ? 'Keys' : 'Key'} Deleted`
+      });
+    } else {
+      toastStore.addToast({
+        kind: 'error',
+        title: `Error Deleting ${isMultiple ? 'Keys' : 'Key'}`
+      });
+    }
+    await invalidate('lf:api-keys');
+  };
 </script>
 
 <Modal
-  danger
-  preventCloseOnClickOutside
+  data-testid="delete-api-key-modal"
   bind:open={confirmDeleteModalOpen}
-  modalHeading={`Delete API ${keyNames.length > 0 ? 'Keys' : 'Key'}`}
-  primaryButtonText="Delete"
-  secondaryButtonText="Cancel"
-  primaryButtonDisabled={deleting}
-  on:click:button--secondary={() => handleCancelConfirmDelete()}
-  on:close={() => handleCancelConfirmDelete()}
-  on:submit={() => handleDelete()}
+  autoclose
+  title={`Delete API ${keyNames.length > 0 ? 'Keys' : 'Key'}`}
+  on:close={handleCancel}
+  color="primary"
+>
+  <div class="flex flex-col gap-4">
+    <ExclamationCircleOutline class="mx-auto  h-12 w-12 text-gray-400 dark:text-white" />
+    <P size="xl" class="text-center dark:text-gray-400">
+      Are you sure you want to delete <strong>{keyNames}</strong>
+    </P>
+    <div class="flex justify-end gap-2">
+      <Button color="alternative" on:click={handleCancel} size="sm">Cancel</Button>
+      <Button color="red" on:click={handleDelete} disabled={deleting} size="sm">Delete</Button>
+    </div>
+  </div></Modal
 >
-  <p>Are you sure you want to delete <span style="font-weight: bold">{keyNames}</span>?</p>
-</Modal>
diff --git a/src/leapfrogai_ui/src/lib/helpers/apiKeyHelpers.ts b/src/leapfrogai_ui/src/lib/helpers/apiKeyHelpers.ts
index 6d78ee4b1..5ff5dafea 100644
--- a/src/leapfrogai_ui/src/lib/helpers/apiKeyHelpers.ts
+++ b/src/leapfrogai_ui/src/lib/helpers/apiKeyHelpers.ts
@@ -10,7 +10,7 @@ export const formatKeyShort = (key: string) => {
 // This is used to ensure the "copy key" text input is filled with text regardless of the
 // actual key length
 export const formatKeyLong = (key: string, width: number) => {
-  const approxNumStars = (width * 0.65) / 14;
+  const approxNumStars = width / 4;
   const firstTwo = key.slice(0, 5);
   const lastFour = key.slice(-4);
   return `${firstTwo}${'*'.repeat(approxNumStars)}${lastFour}`;
diff --git a/src/leapfrogai_ui/src/lib/helpers/chatHelpers.test.ts b/src/leapfrogai_ui/src/lib/helpers/chatHelpers.test.ts
index 630843e91..62a3f8511 100644
--- a/src/leapfrogai_ui/src/lib/helpers/chatHelpers.test.ts
+++ b/src/leapfrogai_ui/src/lib/helpers/chatHelpers.test.ts
@@ -48,14 +48,15 @@ describe('chat helpers', () => {
       expect(timestamp).toBe(timestampValue * 1000);
     });
 
-    it('should default to a timestamp in miliseconds of right now for invalid or missing date value', () => {
+    it('should default to a timestamp in milliseconds of right now for invalid or missing date value', () => {
       const message: LFMessage = {
         ...getFakeOpenAIMessage({ thread_id: '123', content: 'test', role: 'user' }),
         createdAt: null,
         created_at: null
       };
-      const timestamp = normalizeTimestamp(message);
-      expect(timestamp).toBe(new Date().getTime());
+      // Occasionally the timestamps can be off by 1 millisecond and fail the tests, so we just check seconds here
+      const timestamp = Math.floor(normalizeTimestamp(message) / 1000);
+      expect(timestamp).toBe(Math.floor(new Date().getTime() / 1000));
     });
   });
 });
diff --git a/src/leapfrogai_ui/src/lib/helpers/fileHelpers.ts b/src/leapfrogai_ui/src/lib/helpers/fileHelpers.ts
index d1c0dd77b..bc459624f 100644
--- a/src/leapfrogai_ui/src/lib/helpers/fileHelpers.ts
+++ b/src/leapfrogai_ui/src/lib/helpers/fileHelpers.ts
@@ -5,6 +5,6 @@ export const convertFileObjectToFileRows = (files: FileObject[]): FileRow[] =>
   files.map((file) => ({
     id: file.id,
     filename: file.filename,
-    created_at: file.created_at,
+    created_at: file.created_at * 1000,
     status: 'hide'
   }));
diff --git a/src/leapfrogai_ui/src/lib/mocks/api-key-mocks.ts b/src/leapfrogai_ui/src/lib/mocks/api-key-mocks.ts
index be4b8c96e..42b21423b 100644
--- a/src/leapfrogai_ui/src/lib/mocks/api-key-mocks.ts
+++ b/src/leapfrogai_ui/src/lib/mocks/api-key-mocks.ts
@@ -5,7 +5,7 @@ import { faker } from '@faker-js/faker';
 
 export const mockGetKeys = (keys: APIKeyRow[]) => {
   server.use(
-    http.get(`${process.env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/list-api-keys`, () =>
+    http.get(`${process.env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/api-keys`, () =>
       HttpResponse.json(keys)
     )
   );
@@ -41,7 +41,7 @@ export const mockCreateApiKeyFormAction = (key: APIKeyRow) => {
 export const mockCreateApiKey = (api_key = `lfai_${faker.string.uuid()}`) => {
   server.use(
     http.post(
-      `${process.env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/create-api-key`,
+      `${process.env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/api-keys`,
       async ({ request }) => {
         const reqJson = (await request.json()) as NewApiKeyInput;
         const key: APIKeyRow = {
@@ -61,7 +61,7 @@ export const mockCreateApiKey = (api_key = `lfai_${faker.string.uuid()}`) => {
 export const mockCreateApiKeyError = () => {
   server.use(
     http.post(
-      `${process.env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/create-api-key`,
+      `${process.env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/api-keys`,
       async () => new HttpResponse(null, { status: 500 })
     )
   );
@@ -70,7 +70,7 @@ export const mockCreateApiKeyError = () => {
 export const mockRevokeApiKey = () => {
   server.use(
     http.delete(
-      `${process.env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/revoke-api-key/:id`,
+      `${process.env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/api-keys/:id`,
       () => new HttpResponse(null, { status: 204 })
     )
   );
@@ -79,8 +79,12 @@ export const mockRevokeApiKey = () => {
 export const mockRevokeApiKeyError = () => {
   server.use(
     http.delete(
-      `${process.env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/revoke-api-key/:id`,
+      `${process.env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/api-keys/:id`,
       () => new HttpResponse(null, { status: 500 })
     )
   );
 };
+
+export const mockCreateApiKeyFormActionError = () => {
+  server.use(http.post('/chat/api-keys', () => HttpResponse.error()));
+};
diff --git a/src/leapfrogai_ui/src/lib/mocks/svelte.ts b/src/leapfrogai_ui/src/lib/mocks/svelte.ts
index af601cfe4..019aa2d8c 100644
--- a/src/leapfrogai_ui/src/lib/mocks/svelte.ts
+++ b/src/leapfrogai_ui/src/lib/mocks/svelte.ts
@@ -1,40 +1,56 @@
-import { type Readable, readable } from 'svelte/store';
-import type { Navigation, Page } from '@sveltejs/kit';
-import { getFakeSession } from '$testUtils/fakeData';
-import { faker } from '@faker-js/faker';
-
 type GetStoresOverrides = {
-  url: string;
-  params: Record<string, string>;
+  url?: string;
+  params?: Record<string, string>;
   data?: object;
 };
 
-export const getStores = (
-  options: GetStoresOverrides = { url: 'http://localhost', params: {}, data: {} }
-) => {
+export const mockSvelteStores = async (options: GetStoresOverrides = {}) => {
+  const { readable, writable } = await import('svelte/store');
+  const { faker } = await import('@faker-js/faker');
+  const { getFakeSession } = await import('$testUtils/fakeData');
+
+  const { url = 'http://localhost', params = {}, data = {} } = options;
+
   const id = faker.string.uuid();
   const user_id = faker.string.uuid();
   const full_name = faker.person.fullName();
-  const navigating = readable<Navigation | null>(null);
-
-  const page = readable<Page>({
-    url: new URL(options.url),
-    params: options.params,
-    route: { id: null },
-    status: 200,
-    error: null,
-    data: {
-      profile: { id, full_name: full_name, thread_ids: [] },
-      session: getFakeSession({ user_id, full_name }),
-      ...options.data
-    },
-    state: {},
-    form: null
-  });
-  const updated: Readable<boolean> & { check(): Promise<boolean> } = {
+  const updated: typeof import('$app/stores').updated = {
     subscribe: readable(false).subscribe,
     check: () => Promise.resolve(false)
   };
 
-  return { navigating, page, updated };
+  const getStores = () => ({
+    navigating: readable(null),
+    page: readable({
+      url: new URL(url),
+      params,
+      route: { id: null },
+      status: 200,
+      error: null,
+      data: {
+        profile: { id, full_name: full_name, thread_ids: [] },
+        session: getFakeSession({ user_id, full_name }),
+        ...data
+      },
+      state: {},
+      form: null
+    }),
+    session: writable(null),
+    updated
+  });
+
+  const page: typeof import('$app/stores').page = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    subscribe(fn: any) {
+      return getStores().page.subscribe(fn);
+    }
+  };
+  const navigating: typeof import('$app/stores').navigating = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    subscribe(fn: any) {
+      return getStores().navigating.subscribe(fn);
+    }
+  };
+
+  return { getStores, page, navigating, updated };
 };
diff --git a/src/leapfrogai_ui/src/lib/schemas/auth.ts b/src/leapfrogai_ui/src/lib/schemas/auth.ts
new file mode 100644
index 000000000..512801154
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/schemas/auth.ts
@@ -0,0 +1,6 @@
+import { object, string } from 'yup';
+
+export const emailPasswordSchema = object({
+  email: string().email().required(),
+  password: string().required()
+});
diff --git a/src/leapfrogai_ui/src/lib/stores/filesStore.ts b/src/leapfrogai_ui/src/lib/stores/filesStore.ts
index a305a8e02..321511a7b 100644
--- a/src/leapfrogai_ui/src/lib/stores/filesStore.ts
+++ b/src/leapfrogai_ui/src/lib/stores/filesStore.ts
@@ -1,4 +1,4 @@
-import { writable } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 import type { FileObject } from 'openai/resources/files';
 import type { FileRow } from '$lib/types/files';
 import { toastStore } from '$stores/index';
@@ -36,6 +36,25 @@ const createFilesStore = () => {
     setSelectedFileManagementFileIds: (newIds: string[]) => {
       update((old) => ({ ...old, selectedFileManagementFileIds: newIds }));
     },
+    addSelectedFileManagementFileId: (id: string) => {
+      update((old) => ({
+        ...old,
+        selectedFileManagementFileIds: [...old.selectedFileManagementFileIds, id]
+      }));
+    },
+    removeSelectedFileManagementFileId: (id: string) => {
+      update((old) => {
+        const copy = [...old.selectedFileManagementFileIds];
+        const index = copy.indexOf(id);
+        if (index > -1) {
+          copy.splice(index, 1);
+        }
+        return {
+          ...old,
+          selectedFileManagementFileIds: [...copy]
+        };
+      });
+    },
     addSelectedAssistantFileIds: (newIds: string[]) =>
       update((old) => ({
         ...old,
@@ -114,6 +133,15 @@ const createFilesStore = () => {
         };
       });
     },
+    updateFiles: () => {
+      update((old) => {
+        old.files.forEach((row) => (row.status = 'hide'));
+        return {
+          ...old,
+          pendingUploads: [...old.pendingUploads.filter((row) => row.status !== 'error')]
+        };
+      });
+    },
     setAllUploadingToError: () => {
       update((old) => {
         const modifiedFiles = old.pendingUploads.map((file) => {
@@ -142,4 +170,11 @@ const createFilesStore = () => {
   };
 };
 
-export default createFilesStore();
+const filesStore = createFilesStore();
+export default filesStore;
+
+const allFilesAndPendingUploads = derived(filesStore, ($filesStore) => [
+  ...$filesStore.files,
+  ...$filesStore.pendingUploads
+]);
+export { allFilesAndPendingUploads };
diff --git a/src/leapfrogai_ui/src/lib/stores/threads.ts b/src/leapfrogai_ui/src/lib/stores/threads.ts
index b3854719d..354f5e14c 100644
--- a/src/leapfrogai_ui/src/lib/stores/threads.ts
+++ b/src/leapfrogai_ui/src/lib/stores/threads.ts
@@ -215,7 +215,6 @@ const createThreadsStore = () => {
           ...old,
           threads: old.threads.filter((c) => c.id !== id)
         }));
-        await goto(`/chat`);
       } catch {
         toastStore.addToast({
           kind: 'error',
diff --git a/src/leapfrogai_ui/src/lib/stores/toast.ts b/src/leapfrogai_ui/src/lib/stores/toast.ts
index 73ac01ac8..6a37f04eb 100644
--- a/src/leapfrogai_ui/src/lib/stores/toast.ts
+++ b/src/leapfrogai_ui/src/lib/stores/toast.ts
@@ -1,14 +1,13 @@
 import { writable } from 'svelte/store';
 import { v4 as uuidv4 } from 'uuid';
-import type { ToastNotificationProps } from 'carbon-components-svelte/src/Notification/ToastNotification.svelte';
 
 const defaultValues: ToastStore = {
   toasts: []
 };
 
-const toastDefaults: Pick<ToastNotificationProps, 'kind' | 'caption' | 'timeout'> = {
+const toastDefaults: Pick<ToastNotificationProps, 'kind' | 'title' | 'timeout'> = {
   kind: 'info',
-  caption: new Date().toLocaleString(),
+  title: '',
   timeout: 3000
 };
 const createToastsStore = () => {
diff --git a/src/leapfrogai_ui/src/lib/stores/ui.ts b/src/leapfrogai_ui/src/lib/stores/ui.ts
index 4adcbc83c..c2fee8728 100644
--- a/src/leapfrogai_ui/src/lib/stores/ui.ts
+++ b/src/leapfrogai_ui/src/lib/stores/ui.ts
@@ -1,15 +1,11 @@
 import { writable } from 'svelte/store';
 
 type UIStore = {
-  isSideNavOpen: boolean;
-  overflowMenuOpen: boolean;
-  selectedThreadOverflowMenuId: string;
+  openSidebar: boolean;
 };
 
 const defaultValues: UIStore = {
-  isSideNavOpen: true,
-  overflowMenuOpen: false,
-  selectedThreadOverflowMenuId: ''
+  openSidebar: true
 };
 
 const createUIStore = () => {
@@ -20,14 +16,8 @@ const createUIStore = () => {
     set,
     update,
     reset: () => set({ ...defaultValues }),
-    setIsSideNavOpen: (isOpen: boolean) => {
-      update((old) => ({ ...old, isSideNavOpen: isOpen }));
-    },
-    setOverflowMenuOpen: (isOpen: boolean) => {
-      update((old) => ({ ...old, overflowMenuOpen: isOpen }));
-    },
-    setSelectedThreadOverflowMenuId: (id: string) => {
-      update((old) => ({ ...old, selectedThreadOverflowMenuId: id }));
+    setOpenSidebar: (isOpen: boolean) => {
+      update((old) => ({ ...old, openSidebar: isOpen }));
     }
   };
 };
diff --git a/src/leapfrogai_ui/src/lib/styles/tables.ts b/src/leapfrogai_ui/src/lib/styles/tables.ts
new file mode 100644
index 000000000..a9fcb9daf
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/styles/tables.ts
@@ -0,0 +1,10 @@
+export const tableStyles = {
+  divClass: 'bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden',
+  innerDivClass:
+    'flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 p-4',
+  searchClass: 'w-full md:w-1/2 relative',
+  classInput:
+    'text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2  pl-10',
+  headerClass:
+    'flex w-full flex-shrink-0 flex-col items-stretch justify-end space-y-2 md:w-auto md:flex-row md:items-center md:space-x-3 md:space-y-0'
+};
diff --git a/src/leapfrogai_ui/src/lib/types/toast.d.ts b/src/leapfrogai_ui/src/lib/types/toast.d.ts
index 23c03566b..e590b5421 100644
--- a/src/leapfrogai_ui/src/lib/types/toast.d.ts
+++ b/src/leapfrogai_ui/src/lib/types/toast.d.ts
@@ -1,3 +1,13 @@
+type ToastKind = 'success' | 'info' | 'warning' | 'error';
+
+type ToastNotificationProps = {
+  id?: string;
+  kind: ToastKind;
+  title: string;
+  subtitle?: string;
+  timeout?: number; // milliseconds
+};
+
 type ToastStore = {
   toasts: ToastNotificationProps[];
 };
diff --git a/src/leapfrogai_ui/src/lib/utils/clickOutside.ts b/src/leapfrogai_ui/src/lib/utils/clickOutside.ts
new file mode 100644
index 000000000..f64e8b708
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/utils/clickOutside.ts
@@ -0,0 +1,16 @@
+export const clickOutside = (node: HTMLElement, callback: () => void) => {
+  const handleClick = (event: MouseEvent) => {
+    if (!event?.target) return;
+    if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
+      callback();
+    }
+  };
+
+  document.addEventListener('click', handleClick, true);
+
+  return {
+    destroy() {
+      document.removeEventListener('click', handleClick, true);
+    }
+  };
+};
diff --git a/src/leapfrogai_ui/src/lib/utils/tables.ts b/src/leapfrogai_ui/src/lib/utils/tables.ts
new file mode 100644
index 000000000..f850da692
--- /dev/null
+++ b/src/leapfrogai_ui/src/lib/utils/tables.ts
@@ -0,0 +1,29 @@
+import { formatDate } from '$helpers/dates';
+
+export const filterTable = <T>(
+  items: T[],
+  filter_keys: Array<keyof T>,
+  searchTerm: string
+): T[] => {
+  return items.filter((item) => {
+    return filter_keys.some((filter) => {
+      const value = item[filter];
+
+      if (typeof value === 'string') {
+        return value.toLowerCase().includes(searchTerm.toLowerCase());
+      }
+      if (typeof value === 'number') {
+        // handles string date search term when date is stored as number
+        const formattedDate = formatDate(new Date(value)).toLowerCase();
+
+        return (
+          value.toString().toLowerCase().includes(searchTerm) || formattedDate.includes(searchTerm)
+        );
+      }
+      if (typeof value === 'object' && value !== null) {
+        return JSON.stringify(value).includes(searchTerm);
+      }
+      return false;
+    });
+  });
+};
diff --git a/src/leapfrogai_ui/src/lib/web-components/CodeBlock.js b/src/leapfrogai_ui/src/lib/web-components/CodeBlock.js
index 4aea7deb9..1d28905a2 100644
--- a/src/leapfrogai_ui/src/lib/web-components/CodeBlock.js
+++ b/src/leapfrogai_ui/src/lib/web-components/CodeBlock.js
@@ -50,6 +50,11 @@ export class CodeBlock extends LitElement {
         border-top-left-radius: 0.375rem;
         border-top-right-radius: 0.375rem;
       }
+      button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     `
   ];
 
@@ -94,28 +99,27 @@ export class CodeBlock extends LitElement {
           <span>${language}</span>
           <div class="centered-flexbox">
             <button
+              id="copy-btn"
               data-testid="copy-code-btn"
-              class="bx--btn bx--btn--tertiary bx--btn--sm "
               @click=${this.handleClick}
+              class="copy-btn-base dark"
             >
-              <div style="display: flex; width: 100%;">
-                <span>Copy</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 32 32"
-                  fill="currentColor"
-                  preserveAspectRatio="xMidYMid meet"
-                  width="16"
-                  height="16"
-                  aria-hidden="true"
-                  class="bx--btn__icon"
-                >
-                  <path
-                    d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z"
-                  ></path>
-                  <path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z"></path>
-                </svg>
-              </div>
+              <span>Copy</span>
+              <svg
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke="currentColor"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 8v3a1 1 0 0 1-1 1H5m11 4h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v1m4 3v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-7.13a1 1 0 0 1 .24-.65L7.7 8.35A1 1 0 0 1 8.46 8H13a1 1 0 0 1 1 1Z"
+                />
+              </svg>
             </button>
           </div>
         </div>
diff --git a/src/leapfrogai_ui/src/lib/web-components/styles.js b/src/leapfrogai_ui/src/lib/web-components/styles.js
index c5ff0ad90..2cf3ebdb9 100644
--- a/src/leapfrogai_ui/src/lib/web-components/styles.js
+++ b/src/leapfrogai_ui/src/lib/web-components/styles.js
@@ -110,67 +110,38 @@ Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
   }
 `;
 
-// Styles copied from carbon for use in CodeBlock web component
 export const buttonStyles = css`
-  .bx--btn {
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.28572;
-    letter-spacing: 0.16px;
-    position: relative;
+  .copy-btn-base {
     display: inline-flex;
-    max-width: 20rem;
-    min-height: 3rem;
-    flex-shrink: 0;
+    justify-content: center;
     align-items: center;
-    justify-content: space-between;
-    padding: calc(0.875rem - 3px) 63px calc(0.875rem - 3px) 15px;
-    margin: 0;
-    border-radius: 0;
+    border-radius: 0.5rem;
+    border: 1px solid #e5e7eb;
+    background-color: white;
+    padding: 0.25rem 0.5rem;
+    text-align: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    color: #111827;
     cursor: pointer;
-    outline: none;
-    text-align: left;
-    text-decoration: none;
-    transition:
-      background 70ms cubic-bezier(0, 0, 0.38, 0.9),
-      box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9),
-      border-color 70ms cubic-bezier(0, 0, 0.38, 0.9),
-      outline 70ms cubic-bezier(0, 0, 0.38, 0.9);
-    vertical-align: top;
-  }
-
-  .bx--btn--tertiary {
-    border-width: 1px;
-    border-style: solid;
-    border-color: #fff;
-    background-color: #0000;
-    color: #fff;
-  }
-
-  .bx--btn--tertiary:focus {
-    background-color: #fff;
-    color: #161616;
-    border-color: #fff;
-    box-shadow:
-      inset 0 0 0 1px #fff,
-      inset 0 0 0 2px #262626;
   }
 
-  .bx--btn--tertiary:hover {
-    background-color: #f4f4f4;
-    color: #000000;
+  .dark,
+  copy-btn-base {
+    background: transparent;
+    color: #f3f4f6;
+    border: 1px solid white;
   }
 
-  .bx--btn--sm {
-    min-height: 2rem;
-    padding: calc(0.375rem - 3px) 60px calc(0.375rem - 3px) 12px;
+  .copy-btn-base:hover {
+    color: #1d4ed8;
+    background-color: #f3f4f6;
   }
 
-  .bx--btn__icon {
-    position: absolute;
-    right: 1rem;
-    width: 1rem;
-    height: 1rem;
-    flex-shrink: 0;
+  .dark:hover {
+    background-color: #374151;
+    color: white;
+    border: 1px solid #4b5563;
   }
 `;
diff --git a/src/leapfrogai_ui/src/routes/+layout.svelte b/src/leapfrogai_ui/src/routes/+layout.svelte
index a18813dab..f7c7be5a5 100644
--- a/src/leapfrogai_ui/src/routes/+layout.svelte
+++ b/src/leapfrogai_ui/src/routes/+layout.svelte
@@ -1,19 +1,15 @@
-<script lang="ts">
+<script>
+  import '../app.css';
   import { invalidate } from '$app/navigation';
   import { onMount } from 'svelte';
   import { Toasts } from '$components';
   import { page } from '$app/stores';
-  import 'carbon-components-svelte/css/g90.css';
-  import '../styles/main.scss';
-  import { Theme } from 'carbon-components-svelte';
-  import type { CarbonTheme } from 'carbon-components-svelte/src/Theme/Theme.svelte';
   import '$webComponents/CodeBlock';
-
   export let data;
+
   let { supabase, session } = data;
-  $: ({ supabase, session } = data);
 
-  let theme: CarbonTheme | undefined = 'g90';
+  $: ({ supabase, session } = data);
 
   onMount(() => {
     const { data } = supabase.auth.onAuthStateChange((_, newSession) => {
@@ -30,15 +26,7 @@
   <title>{$page.data.title || ''}</title>
 </svelte:head>
 
-<Theme bind:theme />
-
 <Toasts />
-
-<slot />
-
-<style lang="scss">
-  :global(.bx--content) {
-    height: calc(100vh - var(--header-height));
-    padding-bottom: 1rem;
-  }
-</style>
+<div class="flex h-screen flex-col bg-gray-900">
+  <slot />
+</div>
diff --git a/src/leapfrogai_ui/src/routes/+page.server.ts b/src/leapfrogai_ui/src/routes/+page.server.ts
index f598cdcda..d44e7310c 100644
--- a/src/leapfrogai_ui/src/routes/+page.server.ts
+++ b/src/leapfrogai_ui/src/routes/+page.server.ts
@@ -1,5 +1,10 @@
 import type { PageServerLoad } from './$types';
+import { superValidate } from 'sveltekit-superforms';
+import { yup } from 'sveltekit-superforms/adapters';
+import { emailPasswordSchema } from '$schemas/auth';
 
 export const load: PageServerLoad = async ({ url }) => {
-  return { url: url.origin };
+  const form = await superValidate(yup(emailPasswordSchema));
+
+  return { url: url.origin, form };
 };
diff --git a/src/leapfrogai_ui/src/routes/+page.svelte b/src/leapfrogai_ui/src/routes/+page.svelte
index 454a33b46..5bab7cbda 100644
--- a/src/leapfrogai_ui/src/routes/+page.svelte
+++ b/src/leapfrogai_ui/src/routes/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import logo from '$assets/LeapfrogAI.png';
-  import { Button } from 'carbon-components-svelte';
-  import { Auth } from '@supabase/auth-ui-svelte';
+  import { Button, Input, Label } from 'flowbite-svelte';
+  import { superForm } from 'sveltekit-superforms';
   import { env } from '$env/dynamic/public';
-  import { ThemeSupa } from '@supabase/auth-ui-shared';
 
   export let data;
   export let queryParams: { [key: string]: string } | undefined = undefined;
@@ -22,42 +21,51 @@
       }
     });
   }
+  const { form, errors, enhance } = superForm(data.form);
 </script>
 
-<div class="login-container">
-  <div class="logo">
+<div class="flex w-full flex-col items-center gap-10 pt-3">
+  <div class="h-[72px] w-[252px]">
     <img alt="LeapfrogAI Logo" src={logo} class="logo" />
   </div>
   {#if env.PUBLIC_DISABLE_KEYCLOAK === 'true'}
-    <Auth
-      supabaseClient={data.supabase}
-      view={isSignup ? 'sign_up' : 'sign_in'}
-      redirectTo={`${data.url}/auth/callback`}
-      showLinks={false}
-      appearance={{ theme: ThemeSupa, style: { input: 'color: #fff' } }}
-    />
+    <form method="POST" action={isSignup ? '/auth?/signup' : '/auth?/login'} use:enhance>
+      <div class="flex flex-col gap-2">
+        <Label for="email">Email</Label>
+        <Input
+          id="email"
+          data-testid="email-input"
+          name="email"
+          type="email"
+          bind:value={$form.email}
+          placeholder="Your email address"
+        />
+
+        <Label for="password">Password</Label>
+        <Input
+          id="password"
+          data-testid="password-input"
+          name="password"
+          type="password"
+          placeholder="Your password"
+          bind:value={$form.password}
+        />
+
+        <Button data-testid="submit-btn" type="submit">{isSignup ? 'Sign Up' : 'Sign In'}</Button>
+        {#if $errors.email}
+          <span style="color: red">{$errors.email}</span>
+        {/if}
+      </div>
+    </form>
+
     <Button
-      kind="ghost"
+      data-testid="toggle-submit-btn"
+      color="alternative"
       on:click={() => {
         isSignup = !isSignup;
       }}>{isSignup ? 'Already have an account? Sign In' : 'Need an account? Sign Up'}</Button
     >
   {:else}
-    <Button on:click={signInWithKeycloak} kind="secondary">Log In with UDS SSO</Button>
+    <Button on:click={signInWithKeycloak}>Log In with UDS SSO</Button>
   {/if}
 </div>
-
-<style lang="scss">
-  .logo {
-    width: 252px;
-    height: 72px;
-  }
-  .login-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: layout.$spacing-08;
-    width: 100%;
-    padding-top: layout.$spacing-04;
-  }
-</style>
diff --git a/src/leapfrogai_ui/src/routes/api/api-keys/delete/+server.ts b/src/leapfrogai_ui/src/routes/api/api-keys/delete/+server.ts
index d5b81633a..785c289ac 100644
--- a/src/leapfrogai_ui/src/routes/api/api-keys/delete/+server.ts
+++ b/src/leapfrogai_ui/src/routes/api/api-keys/delete/+server.ts
@@ -25,7 +25,7 @@ export const DELETE: RequestHandler = async ({ request, locals: { session } }) =
   const promises: Promise<Response>[] = [];
   for (const id of requestData.ids) {
     promises.push(
-      fetch(`${env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/revoke-api-key/${id}`, {
+      fetch(`${env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/api-keys/${id}`, {
         method: 'DELETE',
         headers: {
           Authorization: `Bearer ${session.access_token}`,
diff --git a/src/leapfrogai_ui/src/routes/auth/+page.server.ts b/src/leapfrogai_ui/src/routes/auth/+page.server.ts
index 70a2f3837..e73489aa6 100644
--- a/src/leapfrogai_ui/src/routes/auth/+page.server.ts
+++ b/src/leapfrogai_ui/src/routes/auth/+page.server.ts
@@ -1,8 +1,51 @@
 import type { Actions } from './$types';
-import { redirect } from '@sveltejs/kit';
+import { fail, redirect } from '@sveltejs/kit';
 import { env } from '$env/dynamic/private';
+import { setError, superValidate } from 'sveltekit-superforms';
+import { yup } from 'sveltekit-superforms/adapters';
+import { emailPasswordSchema } from '$schemas/auth';
 
 export const actions: Actions = {
+  signup: async ({ request, locals: { supabase } }) => {
+    const form = await superValidate(request, yup(emailPasswordSchema));
+
+    if (!form.valid) {
+      return fail(400, { form });
+    }
+
+    const email = form.data.email;
+    const password = form.data.password;
+
+    const { error } = await supabase.auth.signUp({ email, password });
+    if (error) {
+      if (error.code === 'user_already_exists') {
+        console.log('user already exists');
+        return setError(form, 'email', 'User already exists');
+      }
+      console.error(error);
+      return setError(form, 'email', 'Unknown error');
+    } else {
+      redirect(303, '/chat');
+    }
+  },
+  login: async ({ request, locals: { supabase } }) => {
+    const form = await superValidate(request, yup(emailPasswordSchema));
+
+    if (!form.valid) {
+      return fail(400, { form });
+    }
+
+    const email = form.data.email;
+    const password = form.data.password;
+
+    const { error } = await supabase.auth.signInWithPassword({ email, password });
+    if (error) {
+      console.error(error);
+      return setError(form, 'email', 'Login error');
+    } else {
+      redirect(303, '/chat');
+    }
+  },
   signout: async ({ locals: { supabase, session } }) => {
     if (session) {
       if (session.provider_refresh_token) {
diff --git a/src/leapfrogai_ui/src/routes/auth/confirm/+server.ts b/src/leapfrogai_ui/src/routes/auth/confirm/+server.ts
new file mode 100644
index 000000000..a84f7d6aa
--- /dev/null
+++ b/src/leapfrogai_ui/src/routes/auth/confirm/+server.ts
@@ -0,0 +1,31 @@
+import type { EmailOtpType } from '@supabase/supabase-js';
+import { redirect } from '@sveltejs/kit';
+
+import type { RequestHandler } from './$types';
+
+export const GET: RequestHandler = async ({ url, locals: { supabase } }) => {
+  const token_hash = url.searchParams.get('token_hash');
+  const type = url.searchParams.get('type') as EmailOtpType | null;
+  const next = url.searchParams.get('next') ?? '/';
+
+  /**
+   * Clean up the redirect URL by deleting the Auth flow parameters.
+   *
+   * `next` is preserved for now, because it's needed in the error case.
+   */
+  const redirectTo = new URL(url);
+  redirectTo.pathname = next;
+  redirectTo.searchParams.delete('token_hash');
+  redirectTo.searchParams.delete('type');
+
+  if (token_hash && type) {
+    const { error } = await supabase.auth.verifyOtp({ type, token_hash });
+    if (!error) {
+      redirectTo.searchParams.delete('next');
+      redirect(303, redirectTo);
+    }
+  }
+
+  redirectTo.pathname = '/auth/error';
+  redirect(303, redirectTo);
+};
diff --git a/src/leapfrogai_ui/src/routes/auth/error/+page.svelte b/src/leapfrogai_ui/src/routes/auth/error/+page.svelte
new file mode 100644
index 000000000..9f4e4b981
--- /dev/null
+++ b/src/leapfrogai_ui/src/routes/auth/error/+page.svelte
@@ -0,0 +1 @@
+<p class="dark:text-white">Authentication error</p>
diff --git a/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+layout.svelte b/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+layout.svelte
index a5595c938..723ff3abc 100644
--- a/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+layout.svelte
+++ b/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+layout.svelte
@@ -1,11 +1,7 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import threadsStore from '$stores/threads';
-  import '../../../../styles/main.scss';
-  import { ChatSidebar } from '$components';
-  import { Content } from 'carbon-components-svelte';
-
-  $: innerWidth = 0;
+  import SidebarWrapper from '$components/SidebarWrapper.svelte';
 
   $: threadLabel = $threadsStore.threads.find((thread) => thread.id === $page.params.thread_id)
     ?.metadata.label;
@@ -15,10 +11,10 @@
   <title>{threadLabel || 'LeapfrogAI - Chat'}</title>
 </svelte:head>
 
-<svelte:window bind:innerWidth />
-
-<ChatSidebar />
+<div class="flex h-full">
+  <SidebarWrapper />
 
-<Content>
-  <slot />
-</Content>
+  <main class="content">
+    <slot />
+  </main>
+</div>
diff --git a/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.svelte b/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.svelte
index b6335bcb0..d48639810 100644
--- a/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.svelte
+++ b/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/+page.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
+  import { beforeNavigate } from '$app/navigation';
   import { LFTextArea, PoweredByDU } from '$components';
-  import { Button, Dropdown } from 'carbon-components-svelte';
+  import { Hr, ToolbarButton } from 'flowbite-svelte';
   import { onMount, tick } from 'svelte';
   import { threadsStore, toastStore } from '$stores';
-  import { ArrowRight, Checkmark, StopFilledAlt, UserProfile } from 'carbon-icons-svelte';
   import { type Message as VercelAIMessage, useAssistant, useChat } from '@ai-sdk/svelte';
   import { page } from '$app/stores';
-  import { beforeNavigate, goto } from '$app/navigation';
   import Message from '$components/Message.svelte';
   import { getMessageText } from '$helpers/threads';
   import { getUnixSeconds } from '$helpers/dates.js';
@@ -23,11 +22,12 @@
     ERROR_GETTING_ASSISTANT_MSG_TEXT,
     ERROR_SAVING_MSG_TEXT
   } from '$constants/toastMessages';
+  import SelectAssistantDropdown from '$components/SelectAssistantDropdown.svelte';
+  import { PaperPlaneOutline, StopOutline } from 'flowbite-svelte-icons';
 
   export let data;
 
   /** LOCAL VARS **/
-  let messageThreadDiv: HTMLDivElement;
   let lengthInvalid: boolean; // bound to child LFTextArea
   let assistantsList: Array<{ id: string; text: string }>;
   /** END LOCAL VARS **/
@@ -291,151 +291,65 @@
   });
 </script>
 
-<div class="container">
-  <form on:submit={onSubmit} class="container">
-    <div class="messages-container">
-      <div bind:this={messageThreadDiv}>
-        {#each activeThreadMessages as message, index (message.id)}
-          <Message
-            messages={activeThreadMessages}
-            streamedMessages={isRunAssistantMessage(message) ? $assistantMessages : $chatMessages}
-            {message}
-            isLastMessage={!$threadsStore.streamingMessage &&
-              index === activeThreadMessages.length - 1}
-            append={assistantMode ? assistantAppend : chatAppend}
-            setMessages={isRunAssistantMessage(message) ? setAssistantMessages : setChatMessages}
-          />
-        {/each}
-        {#if $threadsStore.streamingMessage}
-          <Message message={$threadsStore.streamingMessage} isLastMessage />
-        {/if}
-      </div>
+<form on:submit={onSubmit} class="flex h-full flex-col">
+  <div class="no-scrollbar flex flex-grow flex-col-reverse overflow-auto px-8">
+    <div id="messages-container">
+      {#each activeThreadMessages as message, index (message.id)}
+        <Message
+          messages={activeThreadMessages}
+          streamedMessages={isRunAssistantMessage(message) ? $assistantMessages : $chatMessages}
+          {message}
+          isLastMessage={!$threadsStore.streamingMessage &&
+            index === activeThreadMessages.length - 1}
+          append={assistantMode ? assistantAppend : chatAppend}
+          setMessages={isRunAssistantMessage(message) ? setAssistantMessages : setChatMessages}
+        />
+      {/each}
+
+      {#if $threadsStore.streamingMessage}
+        <Message message={$threadsStore.streamingMessage} isLastMessage />
+      {/if}
     </div>
-    <hr id="divider" class="divider" />
-    <div class:noAssistant={$threadsStore.selectedAssistantId === NO_SELECTED_ASSISTANT_ID}>
-      <Dropdown
-        data-testid="assistant-dropdown"
-        disabled={$isLoading || $status === 'in_progress'}
-        hideLabel
-        direction="top"
-        selectedId={$threadsStore.selectedAssistantId}
-        on:select={async (e) => {
-          if (e.detail.selectedId === 'manage-assistants') {
-            await goto('/chat/assistants-management');
-          } else {
-            if ($threadsStore.selectedAssistantId === e.detail.selectedId)
-              threadsStore.setSelectedAssistantId(NO_SELECTED_ASSISTANT_ID); //deselect
-            else {
-              threadsStore.setSelectedAssistantId(e.detail.selectedId);
-            }
-          }
-        }}
-        items={assistantsList}
-        style="width: 25%; margin-bottom: 0.5rem"
-        let:item
-      >
-        {#if item.id === `manage-assistants`}
-          <button
-            id="manage assistants"
-            data-testid="assistants-management-btn"
-            class="manage-assistants-btn remove-btn-style"
+  </div>
+  <Hr classHr="my-2" />
+  <div id="chat-tools" class="flex flex-col gap-2 px-8">
+    <SelectAssistantDropdown assistants={data?.assistants || []} />
+
+    <div class="flex items-end justify-around gap-2">
+      <div class="flex flex-grow items-center rounded-lg bg-gray-50 px-3 py-2 dark:bg-gray-700">
+        <LFTextArea
+          id="chat"
+          data-testid="chat-input"
+          class="mx-4 flex-grow resize-none bg-white dark:bg-gray-800"
+          placeholder="Type your message here..."
+          value={chatInput}
+          bind:showLengthError={lengthInvalid}
+          {onSubmit}
+          maxRows={10}
+        />
+        {#if !$isLoading && $status !== 'in_progress'}
+          <ToolbarButton
+            data-testid="send message"
+            type="submit"
+            color="blue"
+            class="rounded-full text-primary-600 dark:text-primary-500"
+            disabled={!$chatInput || lengthInvalid || $threadsStore.sendingBlocked}
           >
-            <UserProfile />
-            {item.text}
-          </button>
-        {:else if item.id === NO_SELECTED_ASSISTANT_ID}
-          <div class="noAssistant">
-            {item.text}
-          </div>
+            <PaperPlaneOutline class="h-6 w-6 rotate-45" />
+            <span class="sr-only">Send message</span>
+          </ToolbarButton>
         {:else}
-          <div class="assistant-dropdown-item">
-            {item.text}
-            {#if item.id !== NO_SELECTED_ASSISTANT_ID && $threadsStore.selectedAssistantId === item.id}
-              <Checkmark data-testid="checked" />
-            {/if}
-          </div>
+          <ToolbarButton
+            data-testid="cancel message"
+            type="submit"
+            color="gray"
+            class="rounded-full text-primary-600 dark:text-primary-500"
+            ><StopOutline class="h-6 w-6" color="red" /><span class="sr-only">Cancel message</span
+            ></ToolbarButton
+          >
         {/if}
-      </Dropdown>
-    </div>
-    <div class="chat-input">
-      <LFTextArea
-        value={chatInput}
-        {onSubmit}
-        ariaLabel="message input"
-        placeholder="Type your message here..."
-        bind:showLengthError={lengthInvalid}
-      />
-
-      {#if !$isLoading && $status !== 'in_progress'}
-        <Button
-          data-testid="send message"
-          kind="secondary"
-          icon={ArrowRight}
-          size="field"
-          type="submit"
-          iconDescription="send"
-          disabled={!$chatInput || lengthInvalid || $threadsStore.sendingBlocked}
-        />
-      {:else}
-        <Button
-          data-testid="cancel message"
-          kind="secondary"
-          size="field"
-          type="submit"
-          icon={StopFilledAlt}
-          iconDescription="cancel"
-        />
-      {/if}
+      </div>
     </div>
-    <PoweredByDU />
-  </form>
-</div>
-
-<style lang="scss">
-  .container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-  .messages-container {
-    display: flex;
-    flex-direction: column-reverse;
-    flex-grow: 1;
-    overflow: auto;
-    scrollbar-width: none;
-  }
-
-  .chat-input {
-    display: flex;
-    justify-content: space-around;
-    align-items: flex-end;
-    gap: 0.5rem;
-  }
-
-  .manage-assistants-btn {
-    display: flex;
-    align-items: center;
-    gap: layout.$spacing-03;
-  }
-
-  .assistant-dropdown-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  :global(#manage-assistants) {
-    z-index: 2; // ensures outline is on top of border of item below
-    outline: 1px solid themes.$border-subtle-03;
-    :global(.bx--list-box__menu_item__option) {
-      padding-right: 0.25rem;
-    }
-  }
-
-  .noAssistant {
-    color: $gray-50;
-    :global(.bx--list-box__label) {
-      color: $gray-50;
-    }
-  }
-</style>
+  </div>
+  <PoweredByDU />
+</form>
diff --git a/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/chatpage.test.ts b/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/chatpage.test.ts
index fb6438021..c6ccff59b 100644
--- a/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/chatpage.test.ts
+++ b/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/chatpage.test.ts
@@ -70,7 +70,8 @@ describe('when there is an active thread selected', () => {
       threads: fakeThreads,
       lastVisitedThreadId: fakeThreads[0].id,
       selectedAssistantId: NO_SELECTED_ASSISTANT_ID,
-      sendingBlocked: false
+      sendingBlocked: false,
+      streamingMessage: null
     });
   });
 
@@ -96,10 +97,10 @@ describe('when there is an active thread selected', () => {
     mockChatCompletion();
     mockNewMessage();
 
-    const { getByLabelText } = render(ChatPage, { data });
+    const { getByTestId } = render(ChatPage, { data });
 
-    const input = getByLabelText('message input') as HTMLInputElement;
-    const submitBtn = getByLabelText('send');
+    const input = getByTestId('chat-input') as HTMLInputElement;
+    const submitBtn = getByTestId('send message');
 
     await userEvent.type(input, question);
     expect(input.value).toBe(question);
@@ -117,11 +118,10 @@ describe('when there is an active thread selected', () => {
     mockNewMessage();
     mockChatCompletion({ delayTime });
 
-    const { getByLabelText } = render(ChatPage, { data });
-
-    const input = getByLabelText('message input') as HTMLInputElement;
-    const submitBtn = getByLabelText('send');
+    const { getByTestId } = render(ChatPage, { data });
 
+    const input = getByTestId('chat-input') as HTMLInputElement;
+    const submitBtn = getByTestId('send message');
     await userEvent.type(input, question);
     await userEvent.click(submitBtn);
 
@@ -134,9 +134,9 @@ describe('when there is an active thread selected', () => {
   });
 
   it('disables the send button if the message length is too long', async () => {
-    const { getByLabelText, getByRole } = render(ChatPage, { data });
-    const input = getByLabelText('message input') as HTMLInputElement;
-    const submitBtn = getByRole('button', { name: /send/i });
+    const { getByTestId } = render(ChatPage, { data });
+    const input = getByTestId('chat-input') as HTMLInputElement;
+    const submitBtn = getByTestId('send message');
     const limitText = faker.string.alpha({ length: 101 });
     await userEvent.type(input, limitText);
     screen.getByDisplayValue(limitText.slice(0, -1)); // does not allow extra character
@@ -148,10 +148,10 @@ describe('when there is an active thread selected', () => {
   it.skip('displays a toast error notification when there is an error with the AI response', async () => {
     mockChatCompletionError();
     mockNewMessage();
-    const { getByLabelText } = render(ChatPageWithToast, { data });
+    const { getByTestId } = render(ChatPageWithToast, { data });
 
-    const input = getByLabelText('message input') as HTMLInputElement;
-    const submitBtn = getByLabelText('send');
+    const input = getByTestId('chat-input') as HTMLInputElement;
+    const submitBtn = getByTestId('send message');
 
     await userEvent.type(input, question);
     await userEvent.click(submitBtn);
@@ -161,10 +161,10 @@ describe('when there is an active thread selected', () => {
 
   it('displays an error message when there is an error saving the response', async () => {
     mockNewMessageError();
-    const { getByLabelText } = render(ChatPageWithToast, { data });
+    const { getByTestId } = render(ChatPageWithToast, { data });
 
-    const input = getByLabelText('message input') as HTMLInputElement;
-    const submitBtn = getByLabelText('send');
+    const input = getByTestId('chat-input') as HTMLInputElement;
+    const submitBtn = getByTestId('send message');
 
     await userEvent.type(input, question);
     await userEvent.click(submitBtn);
@@ -183,10 +183,10 @@ describe('when there is an active thread selected', () => {
     });
     mockNewMessage();
 
-    const { getByLabelText } = render(ChatPageWithToast, { data });
+    const { getByTestId } = render(ChatPageWithToast, { data });
 
-    const input = getByLabelText('message input') as HTMLInputElement;
-    const submitBtn = getByLabelText('send');
+    const input = getByTestId('chat-input') as HTMLInputElement;
+    const submitBtn = getByTestId('send message');
 
     await userEvent.type(input, question);
     await userEvent.click(submitBtn);
@@ -200,11 +200,9 @@ describe('when there is an active thread selected', () => {
   it('has a button to go to the assistants management page in the assistant dropdown', async () => {
     const goToSpy = vi.spyOn(navigation, 'goto');
 
-    const { getByRole } = render(ChatPage, { data });
+    const { getByRole, getByTestId } = render(ChatPage, { data });
 
-    const assistantSelect = getByRole('button', {
-      name: /select assistant\.\.\. open menu/i
-    });
+    const assistantSelect = getByTestId('assistants-select-btn');
     await userEvent.click(assistantSelect);
     await userEvent.click(
       getByRole('button', {
diff --git a/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/chatpage_no_thread.test.ts b/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/chatpage_no_thread.test.ts
index f8484a5c8..b441aee01 100644
--- a/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/chatpage_no_thread.test.ts
+++ b/src/leapfrogai_ui/src/routes/chat/(dashboard)/[[thread_id]]/chatpage_no_thread.test.ts
@@ -51,10 +51,10 @@ describe('when there is NO active thread selected', () => {
     mockNewThreadError();
     mockNewMessage();
 
-    const { getByLabelText } = render(ChatPageWithToast, { data });
+    const { getByTestId } = render(ChatPageWithToast, { data });
 
-    const input = getByLabelText('message input') as HTMLInputElement;
-    const submitBtn = getByLabelText('send');
+    const input = getByTestId('chat-input') as HTMLInputElement;
+    const submitBtn = getByTestId('send message');
 
     await userEvent.type(input, question);
     await userEvent.click(submitBtn);
diff --git a/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+layout.svelte b/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+layout.svelte
index 2dbfa3eaf..0a473db09 100644
--- a/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+layout.svelte
+++ b/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+layout.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { page } from '$app/stores';
-  import { Breadcrumb, BreadcrumbItem, Content } from 'carbon-components-svelte';
   import { threadsStore } from '$stores';
+  import LayoutWithBreadcrumb from '$components/LayoutWithBreadcrumb.svelte';
 
   const paths = [
     {
@@ -14,8 +13,6 @@
     }
   ];
 
-  $: isCurrentPage = (path: string) => $page.url.pathname === path;
-
   const getPath = (path: string) => {
     if (path === '/chat')
       return $threadsStore.lastVisitedThreadId
@@ -25,20 +22,4 @@
   };
 </script>
 
-<Content>
-  <div class="lf-content-container">
-    <div class="slot-wrapper">
-      <Breadcrumb noTrailingSlash>
-        {#each paths as { path, name } (path)}
-          {#if $page.url.pathname.includes(path)}
-            <BreadcrumbItem
-              href={isCurrentPage(path) ? '' : getPath(path)}
-              isCurrentPage={isCurrentPage(path)}>{name}</BreadcrumbItem
-            >
-          {/if}
-        {/each}
-      </Breadcrumb>
-      <slot />
-    </div>
-  </div>
-</Content>
+<LayoutWithBreadcrumb {paths} {getPath}><slot /></LayoutWithBreadcrumb>
diff --git a/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+page.server.ts b/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+page.server.ts
index 838468361..4f919caa9 100644
--- a/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+page.server.ts
+++ b/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+page.server.ts
@@ -21,7 +21,7 @@ export const load: PageServerLoad = async ({ depends, locals: { session } }) =>
 
   let keys: APIKeyRow[] = [];
 
-  const res = await fetch(`${env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/list-api-keys`, {
+  const res = await fetch(`${env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/api-keys`, {
     headers: {
       Authorization: `Bearer ${session.access_token}`
     }
@@ -31,14 +31,14 @@ export const load: PageServerLoad = async ({ depends, locals: { session } }) =>
     return error(500, { message: 'Error fetching API keys' });
   }
 
-  keys = await res.json();
+  keys = (await res.json()) as APIKeyRow[];
   // convert from seconds to milliseconds
   keys.forEach((key) => {
     key.created_at = key.created_at * 1000;
     key.expires_at = key.expires_at * 1000;
   });
 
-  return { title: 'LeapfrogAI - API Keys', form, keys };
+  return { title: 'LeapfrogAI - API Keys', form, keys: keys ?? [] };
 };
 
 export const actions: Actions = {
@@ -48,12 +48,11 @@ export const actions: Actions = {
     }
 
     const form = await superValidate(request, yup(newAPIKeySchema));
-
     if (!form.valid) {
       return fail(400, { form });
     }
 
-    const res = await fetch(`${env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/create-api-key`, {
+    const res = await fetch(`${env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/api-keys`, {
       headers: {
         Authorization: `Bearer ${session.access_token}`,
         'Content-Type': 'application/json'
diff --git a/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+page.svelte b/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+page.svelte
index f01cdb7dc..8c4b4ad62 100644
--- a/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+page.svelte
+++ b/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/+page.svelte
@@ -1,264 +1,251 @@
 <script lang="ts">
+  import { fade } from 'svelte/transition';
   import {
     Button,
-    DataTable,
-    Loading,
-    Toolbar,
-    ToolbarBatchActions,
-    ToolbarContent,
-    ToolbarSearch
-  } from 'carbon-components-svelte';
-  import { superForm } from 'sveltekit-superforms';
-  import { yup } from 'sveltekit-superforms/adapters';
-  import { formatDate } from '$helpers/dates';
-  import { Add, TrashCan } from 'carbon-icons-svelte';
-  import { toastStore } from '$stores';
-  import { newAPIKeySchema } from '$schemas/apiKey.js';
-  import { invalidate } from '$app/navigation';
-  import type { APIKeyRow } from '$lib/types/apiKeys';
+    Checkbox,
+    Heading,
+    Pagination,
+    Spinner,
+    TableBody,
+    TableBodyCell,
+    TableBodyRow,
+    TableHead,
+    TableHeadCell,
+    TableSearch
+  } from 'flowbite-svelte';
+  import { ArrowLeftOutline, ArrowRightOutline, PlusOutline } from 'flowbite-svelte-icons';
+  import { formatDate } from '$helpers/dates.js';
   import { formatKeyShort } from '$helpers/apiKeyHelpers';
-  import CreateApiKeyModal from '$components/modals/CreateApiKeyModal.svelte';
+  import type { APIKeyRow } from '$lib/types/apiKeys';
+  import type { PageServerData } from './$types';
+  import { filterTable } from '$lib/utils/tables';
+  import { tableStyles } from '$lib/styles/tables';
   import DeleteApiKeyModal from '$components/modals/DeleteApiKeyModal.svelte';
-  import SaveApiKeyModal from '$components/modals/CopyApiKeyModal.svelte';
+  import CreateApiKeyModal from '$components/modals/CreateApiKeyModal.svelte';
 
-  export let data;
+  export let data: PageServerData;
 
-  let selectedRowIds: string[] = [];
-  let filteredRowIds: string[] = [];
-  let modalOpen = false;
+  // TODO - data.keys not getting type inference - https://github.com/defenseunicorns/leapfrogai/issues/856
+  $: filteredItems =
+    searchTerm !== ''
+      ? filterTable(data.keys, FILTER_KEYS, searchTerm.toLowerCase())
+      : [...data.keys];
+  $: totalItems = filteredItems.length;
+  $: startRange = currentPosition + 1;
+  $: endRange = Math.min(currentPosition + itemsPerPage, totalItems);
+  $: editMode = selectedRowIds.length > 0;
+
+  const FILTER_KEYS: Array<keyof APIKeyRow> = ['name', 'api_key', 'created_at', 'expires_at'];
+  const { divClass, innerDivClass, searchClass, classInput, headerClass } = tableStyles;
+  const itemsPerPage = 10;
+  let pageItems;
+  let searchTerm = '';
+  let currentPosition = 0;
+  let createApiKeyModalOpen = false;
   let confirmDeleteModalOpen = false;
-  let copyKeyModalOpen = false;
+  let allItemsChecked = false;
+  let selectedRowIds: string[] = [];
   let deleting = false;
-  let selectedExpirationIndex = 1;
-  let selectedExpirationDate: number;
-  let createdKey: APIKeyRow | null = null;
 
-  // Set actual expiration date based on selected Switch
-  $: {
-    switch (selectedExpirationIndex) {
-      case 0: {
-        const sevenDays = new Date();
-        sevenDays.setDate(sevenDays.getDate() + 7);
-        selectedExpirationDate = Math.floor(sevenDays.getTime() / 1000);
-        break;
-      }
-      case 1: {
-        const thirtyDays = new Date();
-        thirtyDays.setDate(thirtyDays.getDate() + 30);
-        selectedExpirationDate = Math.floor(thirtyDays.getTime() / 1000);
-        break;
-      }
-      case 2: {
-        const sixtyDays = new Date();
-        sixtyDays.setDate(sixtyDays.getDate() + 60);
-        selectedExpirationDate = Math.floor(sixtyDays.getTime() / 1000);
-        break;
-      }
-      case 3: {
-        const ninetyDays = new Date();
-        ninetyDays.setDate(ninetyDays.getDate() + 90);
-        selectedExpirationDate = Math.floor(ninetyDays.getTime() / 1000);
-        break;
-      }
-      default: {
-        selectedExpirationDate = Math.floor(new Date().getTime() / 1000);
-        break;
-      }
+  /****** Pagination Handlers ******/
+  const next = () => {
+    if (currentPosition + itemsPerPage < filteredItems.length) {
+      currentPosition += itemsPerPage;
     }
-  }
-  $: active = selectedRowIds.length > 0;
-  $: keyNames = data.keys
-    ? data.keys
-        .map((key) => {
-          if (selectedRowIds.includes(key.id)) return key.name;
-        })
-        .filter((key) => key !== undefined)
-        .join(', ')
-    : '';
-
-  const handleError = () => {
-    modalOpen = false;
-    toastStore.addToast({
-      kind: 'error',
-      title: 'Creation Failed'
-    });
-    invalidate('lf:api-keys');
   };
-
-  const { form, errors, enhance, submit, reset } = superForm(data.form, {
-    invalidateAll: false,
-    validators: yup(newAPIKeySchema),
-    onError() {
-      handleError();
-    },
-    onResult({ result }) {
-      if (result.type === 'success') {
-        createdKey = result.data?.key;
-        modalOpen = false;
-        copyKeyModalOpen = true;
-        toastStore.addToast({
-          kind: 'success',
-          title: 'Created Successfully',
-          subtitle: `${result.data?.form.data.name} created successfully.`
-        });
-        invalidate('lf:api-keys');
-      }
+  const previous = () => {
+    if (currentPosition - itemsPerPage >= 0) {
+      currentPosition -= itemsPerPage;
     }
-  });
-
-  const handleCancel = () => {
-    modalOpen = false;
-    reset();
   };
 
-  const handleDelete = async () => {
-    deleting = true;
-    const isMultiple = selectedRowIds.length > 1;
-    const res = await fetch('/api/api-keys/delete', {
-      body: JSON.stringify({ ids: selectedRowIds }),
-      method: 'DELETE'
-    });
-    confirmDeleteModalOpen = false;
-    selectedRowIds = [];
-    deleting = false;
-    if (res.ok) {
-      toastStore.addToast({
-        kind: 'success',
-        title: `${isMultiple ? 'Keys' : 'Key'} Deleted`
-      });
+  /****** End Pagination Handlers ******/
+
+  /****** Sorting Handlers ******/
+
+  let sortKey = 'created_at'; // default sort key
+  let sortDirection = 1; // default sort direction (ascending)
+
+  // Define a function to sort the items
+  const sortTable = (key) => {
+    // If the same key is clicked, reverse the sort direction
+    if (sortKey === key) {
+      sortDirection = -sortDirection;
     } else {
-      toastStore.addToast({
-        kind: 'error',
-        title: `Error Deleting ${isMultiple ? 'Keys' : 'Key'}`
-      });
+      sortKey = key;
+      sortDirection = 1;
     }
-    await invalidate('lf:api-keys');
   };
 
-  const handleCancelConfirmDelete = () => {
-    confirmDeleteModalOpen = false;
+  // When search term changes, reset to first page
+  $: searchTerm, (currentPosition = 0);
+
+  // Sort page items based on the sort key and direction
+  $: {
+    const tempPageItems = filteredItems.slice(currentPosition, currentPosition + itemsPerPage);
+    const sorted = tempPageItems.sort((a, b) => {
+      const aVal = a[sortKey];
+      const bVal = b[sortKey];
+      if (aVal < bVal) {
+        return -sortDirection;
+      } else if (aVal > bVal) {
+        return sortDirection;
+      }
+      return 0;
+    });
+    pageItems = [...sorted];
+  }
+
+  /****** End Sorting Handlers ******/
+
+  const handleClose = () => {
+    editMode = false;
+    allItemsChecked = false;
     selectedRowIds = [];
-    active = false;
   };
 
-  const handleCloseCopyKeyModal = () => {
-    copyKeyModalOpen = false;
-    createdKey = null;
+  const handleEditItem = (id: string) => {
+    const index = selectedRowIds.indexOf(id);
+    if (index > -1) {
+      selectedRowIds = selectedRowIds.toSpliced(index, 1);
+    } else {
+      selectedRowIds = [...selectedRowIds, id];
+    }
+  };
+
+  const checkAllItems = () => {
+    if (allItemsChecked) {
+      selectedRowIds = [];
+    } else {
+      selectedRowIds = filteredItems.map((item) => item.id);
+    }
   };
 </script>
 
-<div class="container">
-  <div class="centered-spaced-container">
-    <div class="title">API Keys</div>
-  </div>
-  <form method="POST" enctype="multipart/form-data" use:enhance>
-    <DataTable
-      bind:selectedRowIds
-      headers={[
-        { key: 'name', value: 'Name', display: (name) => name || '' },
-        { key: 'api_key', value: 'Secret Keys', display: (key) => formatKeyShort(key) },
-        {
-          key: 'created_at',
-          value: 'Created',
-          display: (created_at) => formatDate(new Date(created_at))
-        },
-        {
-          key: 'expires_at',
-          value: 'Expires',
-          display: (created_at) => formatDate(new Date(created_at))
-        },
-        { key: 'permissions', value: 'Permissions', display: (permissions) => permissions || '' }
-      ]}
-      rows={data.keys || []}
-      batchSelection={true}
-      sortable
-    >
-      <Toolbar>
-        <ToolbarBatchActions
-          bind:active
-          on:cancel={(e) => {
-            e.preventDefault();
-            active = false;
-            selectedRowIds = [];
-          }}
-        >
-          {#if deleting}
-            <div class="deleting">
-              <Loading withOverlay={false} small data-testid="delete-pending" />
-            </div>
-          {:else}
-            <Button
-              icon={TrashCan}
-              on:click={() => (confirmDeleteModalOpen = true)}
-              disabled={selectedRowIds.length === 0}>Delete</Button
-            >
-          {/if}</ToolbarBatchActions
-        >
-        <ToolbarContent>
-          <ToolbarSearch
-            bind:filteredRowIds
-            shouldFilterRows={(row, value) => {
-              // filter for name and date
-              const formattedCreatedAtDate = formatDate(new Date(row.created_at)).toLowerCase();
-              const formattedExpiresAtDate = formatDate(new Date(row.expires_at)).toLowerCase();
-              return (
-                row.name?.toLowerCase().includes(value.toString().toLowerCase()) ||
-                row.api_key.toLowerCase().includes(value.toString().toLowerCase()) ||
-                formattedCreatedAtDate.includes(value.toString().toLowerCase()) ||
-                formattedExpiresAtDate.includes(value.toString().toLowerCase()) ||
-                row.permissions?.toLowerCase().includes(value.toString().toLowerCase())
-              );
-            }}
-          />
-          <Button
-            icon={Add}
-            on:click={() => {
-              modalOpen = true;
-            }}>Create new</Button
-          >
-        </ToolbarContent>
-      </Toolbar>
-    </DataTable>
-    <CreateApiKeyModal
-      {modalOpen}
-      {handleCancel}
-      {submit}
-      bind:name={$form.name}
-      bind:selectedExpirationIndex
-      bind:selectedExpirationDate
-      invalidText={$errors.name?.toString()}
-    />
-  </form>
+<div class="w-3/4 bg-gray-50 p-3 dark:bg-gray-900">
+  <Heading tag="h3" class="mb-4">API Keys</Heading>
+  <TableSearch
+    data-testid="api-keys-table"
+    placeholder="Search"
+    hoverable={true}
+    bind:inputValue={searchTerm}
+    {divClass}
+    {innerDivClass}
+    {searchClass}
+    {classInput}
+  >
+    <div slot="header" class={headerClass}>
+      <!-- Button with color="alternative" adds two pixels to btn height, border-box does not prevent this. h-[42px] prevents slight screen jump-->
+      <div class="h-[42px]">
+        {#if editMode}
+          <div in:fade={{ duration: 150 }} class="flex items-center gap-2">
+            {#if deleting}
+              <Button color="red" disabled>
+                <Spinner class="me-3" size="4" color="white" />Deleting...
+              </Button>
+            {:else}
+              <Button color="red" on:click={() => (confirmDeleteModalOpen = true)}>Delete</Button>
+            {/if}
 
-  <DeleteApiKeyModal
-    {confirmDeleteModalOpen}
-    {keyNames}
-    {deleting}
-    {handleCancelConfirmDelete}
-    {handleDelete}
-  />
-  <SaveApiKeyModal {copyKeyModalOpen} {handleCloseCopyKeyModal} {createdKey} />
-</div>
+            <Button color="alternative" on:click={handleClose}>Cancel</Button>
+          </div>
+        {:else}
+          <div in:fade={{ duration: 150 }}>
+            <Button on:click={() => (createApiKeyModalOpen = true)} aria-label="create new">
+              <PlusOutline class="mr-2 h-3.5 w-3.5" />Create new
+            </Button>
+          </div>
+        {/if}
+      </div>
+    </div>
+    <TableHead>
+      <TableHeadCell class="w-0 !p-4">
+        <Checkbox
+          data-testid="select-all-rows-checkbox"
+          on:click={checkAllItems}
+          bind:checked={allItemsChecked}
+          aria-label="select all rows"
+        />
+      </TableHeadCell>
 
-<style lang="scss">
-  .container {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 0 12rem 0 12rem;
-  }
+      <TableHeadCell
+        on:click={() => sortTable('name')}
+        padding="px-4 py-3"
+        scope="col"
+        class="cursor-pointer">Name</TableHeadCell
+      >
+      <TableHeadCell
+        on:click={() => sortTable('api_key')}
+        padding="px-4 py-3"
+        scope="col"
+        class="cursor-pointer">Secret Keys</TableHeadCell
+      >
+      <TableHeadCell
+        on:click={() => sortTable('created_at')}
+        padding="px-4 py-3"
+        scope="col"
+        class="cursor-pointer">Created</TableHeadCell
+      >
+      <TableHeadCell
+        on:click={() => sortTable('expires_at')}
+        padding="px-4 py-3"
+        scope="col"
+        class="cursor-pointer">Expires</TableHeadCell
+      >
+    </TableHead>
+    <TableBody>
+      {#each pageItems as item (item.id)}
+        <TableBodyRow>
+          <TableHeadCell class="!p-4">
+            <Checkbox
+              on:click={() => handleEditItem(item.id)}
+              checked={selectedRowIds.includes(item.id)}
+            />
+          </TableHeadCell>
 
-  .centered-spaced-container {
-    display: flex;
-    gap: layout.$spacing-06;
-    align-items: center;
-  }
+          <TableBodyCell tdClass="px-4 py-3">{item.name}</TableBodyCell>
+          <TableBodyCell tdClass="px-4 py-3">{formatKeyShort(item.api_key)}</TableBodyCell>
+          <TableBodyCell tdClass="px-4 py-3">{formatDate(new Date(item.created_at))}</TableBodyCell>
+          <TableBodyCell tdClass="px-4 py-3">{formatDate(new Date(item.expires_at))}</TableBodyCell>
+        </TableBodyRow>
+      {/each}
+    </TableBody>
+  </TableSearch>
+  <div class="mt-2 flex items-center justify-between gap-2">
+    <div class="text-sm text-gray-700 dark:text-gray-400">
+      {#if endRange === 0}
+        Showing <span class="font-semibold text-gray-900 dark:text-white">0</span> Entries
+      {:else}
+        Showing <span class="font-semibold text-gray-900 dark:text-white"
+          >{startRange}-{endRange}</span
+        >
+        of
+        <span class="font-semibold text-gray-900 dark:text-white">{totalItems}</span>
+        Entries
+      {/if}
+    </div>
 
-  .title {
-    @include type.type-style('heading-05');
-  }
+    <Pagination table on:previous={previous} on:next={next}>
+      <div slot="prev" class="flex items-center gap-2 text-white">
+        <ArrowLeftOutline class="me-2 h-3.5 w-3.5" />
+        Prev
+      </div>
+      <div slot="next" class="flex items-center gap-2 text-white">
+        Next
+        <ArrowRightOutline class="ms-2 h-6 w-6" />
+      </div>
+    </Pagination>
+  </div>
+</div>
 
-  .deleting {
-    margin-right: layout.$spacing-05;
-  }
-</style>
+<DeleteApiKeyModal
+  bind:confirmDeleteModalOpen
+  {selectedRowIds}
+  bind:deleting
+  on:delete={() => {
+    confirmDeleteModalOpen = false;
+    handleClose();
+  }}
+/>
+
+<CreateApiKeyModal form={data.form} bind:createApiKeyModalOpen />
diff --git a/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/api-keys.test.ts b/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/api-keys.test.ts
index 116088a76..f71ec554e 100644
--- a/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/api-keys.test.ts
+++ b/src/leapfrogai_ui/src/routes/chat/(settings)/api-keys/api-keys.test.ts
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor, within } from '@testing-library/svelte';
+import { render, screen, within } from '@testing-library/svelte';
 import { load } from './+page.server';
 import { superValidate } from 'sveltekit-superforms';
 import { yup } from 'sveltekit-superforms/adapters';
@@ -10,24 +10,40 @@ import {
   mockGetKeys
 } from '$lib/mocks/api-key-mocks';
 import { type APIKeyRow, type APIKeysForm, PERMISSIONS } from '$lib/types/apiKeys';
-import { getFakeApiKeys } from '$testUtils/fakeData';
+import { fakeKeys } from '$testUtils/fakeData';
 import userEvent from '@testing-library/user-event';
 import { toastStore } from '$stores';
 import { formatDate } from '$helpers/dates';
 import { vi } from 'vitest';
 import { faker } from '@faker-js/faker';
 import { getLocalsMock } from '$lib/mocks/misc';
+import stores from '$app/stores';
+
+const { mockSvelteStores } = await vi.hoisted(() => import('$lib/mocks/svelte'));
+
+// The DeleteApiKeyModal access $page.data so we re-mock it out here with the keys set to a static value we can
+// use throughout the tests when mocking the server load data as well
+vi.mock('$app/stores', async (): Promise<typeof stores> => {
+  const { fakeThreads, fakeAssistants, fakeKeys } = await import('$testUtils/fakeData');
+  return await mockSvelteStores({
+    url: `http://localhost/chat/${fakeThreads[0].id}`,
+    params: { thread_id: fakeThreads[0].id },
+    data: {
+      threads: fakeThreads,
+      assistants: fakeAssistants,
+      assistant: undefined,
+      files: [],
+      keys: fakeKeys
+    }
+  });
+});
 
 describe('api keys', () => {
   let form: APIKeysForm;
-  const keys = getFakeApiKeys({ numKeys: 4 });
+  let searchbox: HTMLElement;
 
   beforeEach(async () => {
-    mockGetKeys(keys);
-    keys[0].permissions = PERMISSIONS.ALL;
-    keys[1].permissions = PERMISSIONS.READ;
-    keys[2].permissions = PERMISSIONS.WRITE;
-    keys[3].permissions = PERMISSIONS.READ_WRITE;
+    mockGetKeys(fakeKeys);
 
     // @ts-expect-error: full mocking of load function params not necessary and is overcomplicated
     const data = await load({ depends: vi.fn(), locals: getLocalsMock() });
@@ -35,47 +51,69 @@ describe('api keys', () => {
     render(ApiKeyPage, {
       data: { ...data, form }
     });
+    searchbox = screen.getByRole('textbox', {
+      name: /search/i
+    });
   });
   it('lists all the keys', () => {
-    keys.forEach((key) => {
+    fakeKeys.forEach((key) => {
       expect(screen.getByText(key.name));
     });
   });
   it('searches by name', async () => {
-    expect(screen.getByText(keys[1].name)).toBeInTheDocument();
-    await userEvent.type(screen.getByRole('searchbox'), keys[0].name);
-    expect(screen.queryByText(keys[1].name)).not.toBeInTheDocument();
-    expect(screen.getByText(keys[0].name)).toBeInTheDocument();
+    expect(screen.getByText(fakeKeys[1].name)).toBeInTheDocument();
+    await userEvent.type(searchbox, fakeKeys[0].name);
+    expect(screen.queryByText(fakeKeys[1].name)).not.toBeInTheDocument();
+    expect(screen.getByText(fakeKeys[0].name)).toBeInTheDocument();
   });
   it('searches for keys by created date', async () => {
-    expect(screen.getByText(keys[0].name)).toBeInTheDocument();
-    await userEvent.type(
-      screen.getByRole('searchbox'),
-      formatDate(new Date(keys[0].created_at * 1000))
-    );
-    expect(screen.queryByText(keys[1].name)).not.toBeInTheDocument();
-    expect(screen.getByText(keys[0].name)).toBeInTheDocument();
+    expect(screen.getByText(fakeKeys[0].name)).toBeInTheDocument();
+    await userEvent.type(searchbox, formatDate(new Date(fakeKeys[0].created_at * 1000)));
+    expect(screen.queryByText(fakeKeys[1].name)).not.toBeInTheDocument();
+    expect(screen.getByText(fakeKeys[0].name)).toBeInTheDocument();
   });
   it('searches for keys by expiration date', async () => {
-    expect(screen.getByText(keys[0].name)).toBeInTheDocument();
-    await userEvent.type(
-      screen.getByRole('searchbox'),
-      formatDate(new Date(keys[0].expires_at * 1000))
-    );
-    expect(screen.queryByText(keys[1].name)).not.toBeInTheDocument();
-    expect(screen.getByText(keys[0].name)).toBeInTheDocument();
+    expect(screen.getByText(fakeKeys[0].name)).toBeInTheDocument();
+    await userEvent.type(searchbox, formatDate(new Date(fakeKeys[0].expires_at * 1000)));
+    expect(screen.queryByText(fakeKeys[1].name)).not.toBeInTheDocument();
+    expect(screen.getByText(fakeKeys[0].name)).toBeInTheDocument();
   });
   it('searches for keys by secret', async () => {
-    expect(screen.getByText(keys[0].name)).toBeInTheDocument();
-    await userEvent.type(screen.getByRole('searchbox'), keys[0].api_key.slice(-4));
-    expect(screen.queryByText(keys[1].name)).not.toBeInTheDocument();
-    expect(screen.getByText(keys[0].name)).toBeInTheDocument();
+    expect(screen.getByText(fakeKeys[0].name)).toBeInTheDocument();
+    await userEvent.type(searchbox, fakeKeys[0].api_key.slice(-4));
+    expect(screen.queryByText(fakeKeys[1].name)).not.toBeInTheDocument();
+    expect(screen.getByText(fakeKeys[0].name)).toBeInTheDocument();
   });
-  it('searches for keys by permissions', async () => {
-    expect(screen.getByText(keys[0].name)).toBeInTheDocument();
-    await userEvent.type(screen.getByRole('searchbox'), keys[0].permissions);
-    expect(screen.queryByText(keys[1].name)).not.toBeInTheDocument();
-    expect(screen.getByText(keys[0].name)).toBeInTheDocument();
+
+  it('sorts by created_at by default', async () => {
+    const keysSortedByCreatedAt = fakeKeys.sort((a, b) => a.created_at - b.created_at);
+    const rows = screen.getAllByRole('row');
+    // The first row is the header
+    const rowKeyNames = rows.slice(1).map((row) => {
+      // Get all the cells within the current row
+      const cells = row.querySelectorAll('td');
+
+      // Assuming created_at is in the last column or you know the specific index
+      const createdAtCell = cells[0]; // name column is the first column
+      return createdAtCell.textContent;
+    });
+    expect(rowKeyNames).toEqual(keysSortedByCreatedAt.map((key) => key.name));
+  });
+  // Only testing the "Name" column
+  it('sorts by column', async () => {
+    const keysSortedByName = fakeKeys.sort((a, b) => a.name.localeCompare(b.name));
+    await userEvent.click(screen.getByText('Name'));
+    const rows = screen.getAllByRole('row');
+    // The first row is the header
+    const rowKeyNames = rows.slice(1).map((row) => {
+      // Get all the cells within the current row
+      const cells = row.querySelectorAll('td');
+
+      // Assuming created_at is in the last column or you know the specific index
+      const createdAtCell = cells[0]; // name column is the first column
+      return createdAtCell.textContent;
+    });
+    expect(rowKeyNames).toEqual(keysSortedByName.map((key) => key.name));
   });
 
   it('can delete keys', async () => {
@@ -85,48 +123,48 @@ describe('api keys', () => {
     const checkbox = screen.getByRole('checkbox', {
       name: /select all rows/i
     });
-    await fireEvent.click(checkbox);
-
-    for (const key of keys) {
-      expect(screen.getByText(key.name)).toBeInTheDocument();
-    }
-
-    const deleteBtns = screen.getAllByRole('button', { name: /delete/i });
-    await userEvent.click(deleteBtns[0]);
+    await userEvent.click(checkbox);
+    await userEvent.click(screen.getByRole('button', { name: /delete/i }));
 
-    screen.getByText(/are you sure you want to delete \?/i);
-    screen.getByText(`${keys.map((key) => key.name).join(', ')}`); // check modal has all selected key names
-    await userEvent.click(deleteBtns[1]);
+    const modal = screen.getByTestId('delete-api-key-modal');
+    expect(modal).toBeInTheDocument();
+    screen.getByText(fakeKeys.map((key) => key.name).join(', '));
+    await userEvent.click(within(modal).getByRole('button', { name: /delete/i }));
 
     expect(toastSpy).toHaveBeenCalledWith({
       kind: 'success',
       title: 'Keys Deleted'
     });
   });
-  it('disables the delete button when there are no rows selected', async () => {
-    // Note - the delete button is hidden when there are no rows selected, but still on the page so it needs to be
-    // disabled
+  it('shows the create btn and not the actions btns when no items are selected', async () => {
+    expect(screen.getByRole('button', { name: /create new/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
 
-    const deleteBtn = screen.getAllByRole('button', { name: /delete/i })[0];
-    expect(deleteBtn).toBeDisabled();
+    const checkbox = screen.getByRole('checkbox', {
+      name: /select all rows/i
+    });
+    await userEvent.click(checkbox);
+
+    expect(screen.getByRole('button', { name: /delete/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /create new/i })).not.toBeInTheDocument();
   });
-  it('replaces the delete button with a loading spinner while deleting', async () => {
+  it('replaces the delete button with a disabled loading spinner button while deleting', async () => {
     mockDeleteApiKey({ withDelay: true });
-    const deleteBtns = screen.getAllByRole('button', { name: /delete/i });
-
-    const checkboxes = screen.getAllByRole('checkbox');
-
-    await fireEvent.click(checkboxes[1]); // select key
-    expect(screen.queryByTestId('delete-pending')).not.toBeInTheDocument(); // no loading spinner yet
-    await userEvent.click(deleteBtns[0]);
-    await waitFor(() => expect(deleteBtns[1]).not.toBeDisabled());
-    // Deletion check completed
-    screen.getByText(/are you sure you want to delete \?/i);
 
-    await userEvent.click(deleteBtns[1]); // confirm delete
-    const deleteBtns2 = screen.getAllByRole('button', { name: /delete/i });
-    expect(deleteBtns2).toHaveLength(1); // only modal delete btn remains in document
-    expect(screen.queryByTestId('delete-pending')).toBeInTheDocument();
+    const checkbox = screen.getByRole('checkbox', {
+      name: /select all rows/i
+    });
+    await userEvent.click(checkbox);
+    const deleteBtn = screen.getByRole('button', { name: /delete/i });
+    await userEvent.click(deleteBtn);
+    const modal = screen.getByTestId('delete-api-key-modal');
+    await userEvent.click(within(modal).getByRole('button', { name: /delete/i }));
+
+    expect(deleteBtn).not.toBeInTheDocument();
+    const deleteSpinnerBtn = screen.getByRole('button', { name: /deleting/i });
+    expect(deleteSpinnerBtn).toBeInTheDocument();
+    expect(deleteSpinnerBtn).toBeDisabled();
+    screen.getByText('Deleting...');
   });
 
   // This test passes but is throwing a type error:
@@ -150,14 +188,11 @@ describe('api keys', () => {
     mockCreateApiKeyFormAction(key);
 
     await userEvent.click(screen.getByRole('button', { name: /create new/i }));
-    await userEvent.type(screen.getByLabelText(/name/i), keyName);
+    const modal = screen.getByTestId('create-api-key-modal');
+    await userEvent.type(within(modal).getByRole('textbox'), keyName);
     await userEvent.click(screen.getByText('60 Days'));
 
-    const dialog = screen.getByRole('dialog', {
-      name: /create new secret key/i
-    });
-
-    await userEvent.click(within(dialog).getByRole('button', { name: /create/i }));
+    await userEvent.click(within(modal).getByRole('button', { name: /create/i }));
 
     expect(toastSpy).toHaveBeenCalledWith({
       kind: 'success',
diff --git a/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/+layout.svelte b/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/+layout.svelte
index 13832b0da..036a24892 100644
--- a/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/+layout.svelte
+++ b/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/+layout.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-  import { Breadcrumb, BreadcrumbItem, Content } from 'carbon-components-svelte';
-  import { page } from '$app/stores';
-  import { PoweredByDU } from '$components';
   import { threadsStore } from '$stores';
+  import LayoutWithBreadcrumb from '$components/LayoutWithBreadcrumb.svelte';
 
   const paths = [
     {
@@ -23,12 +21,6 @@
     }
   ];
 
-  $: isCurrentPage = (path: string) =>
-    $page.url.pathname === path ||
-    // Handle edit route with assistant id as path parameter
-    ($page.url.pathname.startsWith('/chat/assistants-management/edit/') &&
-      path === '/chat/assistants-management/edit');
-
   const getPath = (path: string) => {
     if (path === '/chat')
       return $threadsStore.lastVisitedThreadId
@@ -38,20 +30,4 @@
   };
 </script>
 
-<Content>
-  <Breadcrumb noTrailingSlash>
-    {#each paths as { path, name } (path)}
-      {#if $page.url.pathname.includes(path)}
-        <BreadcrumbItem
-          href={isCurrentPage(path) ? '' : getPath(path)}
-          isCurrentPage={isCurrentPage(path)}>{name}</BreadcrumbItem
-        >
-      {/if}
-    {/each}
-  </Breadcrumb>
-  <div class="lf-content-container">
-    <slot />
-
-    <PoweredByDU />
-  </div>
-</Content>
+<LayoutWithBreadcrumb {paths} {getPath}><slot /></LayoutWithBreadcrumb>
diff --git a/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/+page.svelte b/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/+page.svelte
index 13b29948e..80d519742 100644
--- a/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/+page.svelte
+++ b/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { Button, Search } from 'carbon-components-svelte';
-  import { Add } from 'carbon-icons-svelte';
   import Fuse, { type FuseResult, type IFuseOptions } from 'fuse.js';
-  import AssistantTile from '$components/AssistantTile.svelte';
+  import AssistantCard from '$components/AssistantCard.svelte';
   import type { LFAssistant } from '$lib/types/assistants';
+  import { Button, Heading, TableSearch } from 'flowbite-svelte';
+  import { PlusOutline } from 'flowbite-svelte-icons';
 
   export let data;
 
@@ -27,70 +27,30 @@
     searchResults = fuse.search(searchText);
     filteredAssistants = searchResults.map((result) => result.item);
   }
-  const resetSearch = () => {
-    searchText = '';
-    filteredAssistants = [];
-  };
 </script>
 
-<div class="container">
-  <div class="inner-container">
-    <div class="title">Assistants Management</div>
+<div class="no-scrollbar flex w-3/4 flex-col gap-4 overflow-y-scroll py-2">
+  <Heading tag="h3" class="mb-4">Assistants Management</Heading>
 
-    <div class="utils">
-      <div style="width: 20.5rem">
-        <Search
-          placeholder="Search"
-          expanded
-          size="sm"
-          style="width: 20.5rem"
-          bind:value={searchText}
-          on:clear={resetSearch}
-        />
-      </div>
-      <Button
-        kind="primary"
-        size="small"
-        icon={Add}
-        on:click={() => goto('/chat/assistants-management/new')}>New assistant</Button
-      >
-    </div>
-    <div data-testid="assistants grid" class="assistants-grid">
-      {#each assistantsToDisplay as assistant (assistant.id)}
-        <AssistantTile {assistant} />
-      {/each}
-    </div>
-  </div>
-</div>
+  <div class="flex items-center justify-between">
+    <TableSearch
+      placeholder="Search"
+      hoverable={true}
+      bind:inputValue={searchText}
+      innerDivClass="px-0"
+    />
 
-<style lang="scss">
-  .container {
-    display: flex;
-    justify-content: center;
-    max-height: 90%;
-  }
-  .inner-container {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    width: 943px; // 3 tiles, plus gap, plus scrollbar
-  }
-
-  .utils {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .assistants-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: layout.$spacing-07;
-    overflow-y: auto;
-  }
+    <Button on:click={() => goto('/chat/assistants-management/new')} class="h-11"
+      ><PlusOutline class="me-2 h-5 w-5" />New assistant</Button
+    >
+  </div>
 
-  .title {
-    @include type.type-style('heading-05');
-  }
-</style>
+  <div
+    data-testid="assistants grid"
+    class="no-scrollbar grid grid-cols-3 gap-8 overflow-y-auto 3xl:grid-cols-6"
+  >
+    {#each assistantsToDisplay as assistant (assistant.id)}
+      <AssistantCard {assistant} />
+    {/each}
+  </div>
+</div>
diff --git a/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/assistant_form.test.ts b/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/assistant_form.test.ts
index 68f28e949..0dd64bf48 100644
--- a/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/assistant_form.test.ts
+++ b/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/assistant_form.test.ts
@@ -33,7 +33,7 @@ describe('Assistant Form', () => {
     vi.restoreAllMocks();
   });
 
-  it('has a modal that navigates back to the management page', async () => {
+  it('has a cancel btn that navigates back to the management page', async () => {
     mockGetAssistants([]);
     mockGetFiles([]);
 
@@ -41,7 +41,7 @@ describe('Assistant Form', () => {
     const data = await newLoad();
     render(AssistantForm, { data });
 
-    const cancelBtn = screen.getAllByRole('button', { name: /cancel/i })[1];
+    const cancelBtn = screen.getByTestId('assistant-form-cancel-btn');
     await userEvent.click(cancelBtn);
 
     expect(goToSpy).toHaveBeenCalledWith('/chat/assistants-management');
@@ -64,7 +64,7 @@ describe('Assistant Form', () => {
     // @ts-expect-error: overcomplicated to mock out load function arguments and they are not used
     const data = await newLoad();
     render(AssistantForm, { data });
-    const descriptionField = screen.getByRole('textbox', { name: /description/i });
+    const descriptionField = screen.getByRole('textbox', { name: /tagline/i });
     await userEvent.type(descriptionField, 'a'.repeat(ASSISTANTS_DESCRIPTION_MAX_LENGTH + 1));
     expect(descriptionField).toHaveValue('a'.repeat(ASSISTANTS_DESCRIPTION_MAX_LENGTH));
   });
diff --git a/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/assistants-management-page.test.ts b/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/assistants-management-page.test.ts
index 565de1c54..10da18130 100644
--- a/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/assistants-management-page.test.ts
+++ b/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/assistants-management-page.test.ts
@@ -19,7 +19,7 @@ describe('Assistants management page', () => {
       }
     });
 
-    screen.getByTestId(`assistant-tile-${assistant1.name!}`);
-    screen.getByTestId(`assistant-tile-${assistant2.name!}`);
+    screen.getByTestId(`assistant-card-${assistant1.name!}`);
+    screen.getByTestId(`assistant-card-${assistant2.name!}`);
   });
 });
diff --git a/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/new/+page.server.ts b/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/new/+page.server.ts
index eb7f26498..08f9e2f41 100644
--- a/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/new/+page.server.ts
+++ b/src/leapfrogai_ui/src/routes/chat/(settings)/assistants-management/new/+page.server.ts
@@ -32,7 +32,6 @@ export const actions: Actions = {
     }
 
     const form = await superValidate(request, yup(assistantInputSchema));
-
     if (!form.valid) {
       return fail(400, { form });
     }
diff --git a/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/+layout.svelte b/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/+layout.svelte
index 7529747b1..114336914 100644
--- a/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/+layout.svelte
+++ b/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/+layout.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-  import { Breadcrumb, BreadcrumbItem, Content } from 'carbon-components-svelte';
-  import { page } from '$app/stores';
-  import { PoweredByDU } from '$components';
   import { threadsStore } from '$stores';
+  import LayoutWithBreadcrumb from '$components/LayoutWithBreadcrumb.svelte';
 
   const paths = [
     {
@@ -14,7 +12,6 @@
       name: 'File Management'
     }
   ];
-  $: isCurrentPage = (path: string) => $page.url.pathname === path;
 
   const getPath = (path: string) => {
     if (path === '/chat')
@@ -25,22 +22,4 @@
   };
 </script>
 
-<Content>
-  <div class="lf-content-container">
-    <div class="slot-wrapper">
-      <Breadcrumb noTrailingSlash>
-        {#each paths as { path, name } (path)}
-          {#if $page.url.pathname.includes(path)}
-            <BreadcrumbItem
-              href={isCurrentPage(path) ? '' : getPath(path)}
-              isCurrentPage={isCurrentPage(path)}>{name}</BreadcrumbItem
-            >
-          {/if}
-        {/each}
-      </Breadcrumb>
-      <slot />
-    </div>
-
-    <PoweredByDU />
-  </div>
-</Content>
+<LayoutWithBreadcrumb {paths} {getPath}><slot /></LayoutWithBreadcrumb>
diff --git a/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/+page.server.ts b/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/+page.server.ts
index 6605eb52e..237db5f7c 100644
--- a/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/+page.server.ts
+++ b/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/+page.server.ts
@@ -30,7 +30,6 @@ export const actions: Actions = {
 
     if (form.data.files) {
       const fileId: string | null = null;
-
       const uploadedFiles: Array<FileObject | FileRow> = [];
       for (const file of form.data.files) {
         if (file) {
diff --git a/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/+page.svelte b/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/+page.svelte
index ff6314cef..b91d43d8f 100644
--- a/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/+page.svelte
+++ b/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/+page.svelte
@@ -1,41 +1,143 @@
 <script lang="ts">
   import {
     Button,
-    DataTable,
-    FileUploaderButton,
-    Loading,
-    Toolbar,
-    ToolbarBatchActions,
-    ToolbarContent,
-    ToolbarSearch
-  } from 'carbon-components-svelte';
-  import { CheckmarkFilled, ErrorFilled, TrashCan } from 'carbon-icons-svelte';
+    Checkbox,
+    Heading,
+    Pagination,
+    Spinner,
+    TableBody,
+    TableBodyCell,
+    TableBodyRow,
+    TableHead,
+    TableHeadCell,
+    TableSearch
+  } from 'flowbite-svelte';
+  import { fade } from 'svelte/transition';
   import { yup } from 'sveltekit-superforms/adapters';
   import { superForm } from 'sveltekit-superforms';
   import { formatDate } from '$helpers/dates';
   import { filesSchema } from '$schemas/files';
   import { filesStore, toastStore } from '$stores';
+  import { ACCEPTED_FILE_TYPES } from '$constants';
   import { afterNavigate, invalidate } from '$app/navigation';
   import type { Assistant } from 'openai/resources/beta/assistants';
-  import ConfirmAssistantDeleteModal from '$components/modals/ConfirmAssistantDeleteModal.svelte';
-  import { ACCEPTED_FILE_TYPES } from '$constants';
+  import { tableStyles } from '$lib/styles/tables';
+  import { filterTable } from '$lib/utils/tables';
+  import {
+    ArrowLeftOutline,
+    ArrowRightOutline,
+    CheckOutline,
+    CloseCircleOutline,
+    UploadOutline
+  } from 'flowbite-svelte-icons';
+  import type { FileRow } from '$lib/types/files';
+  import LFFileUploadBtn from '$components/LFFileUploadBtn.svelte';
+  import ConfirmFilesDeleteModal from '$components/modals/ConfirmFilesDeleteModal.svelte';
+  import { allFilesAndPendingUploads } from '$stores/filesStore';
 
   export let data;
 
-  let uploadedFiles: File[] = [];
-  let filteredRowIds: string[] = [];
-  let deleting = false;
-  let active = $filesStore.selectedFileManagementFileIds.length > 0;
-  let nonSelectableRowIds: string[] = [];
+  $: filteredItems =
+    searchTerm !== ''
+      ? filterTable($allFilesAndPendingUploads, FILTER_KEYS, searchTerm.toLowerCase())
+      : $allFilesAndPendingUploads;
+  $: totalItems = filteredItems.length;
+  $: startRange = currentPosition + 1;
+  $: endRange = Math.min(currentPosition + itemsPerPage, totalItems);
+  $: editMode = $filesStore.selectedFileManagementFileIds.length > 0;
+  $: affectedAssistants = [];
+  // Form error in form action (e.g. validation failure)
+  $: $errors._errors && $errors._errors.length > 0 && handleFormError();
+
+  const FILTER_KEYS: Array<keyof FileRow> = ['filename', 'created_at'];
+  const { divClass, innerDivClass, searchClass, classInput, headerClass } = tableStyles;
+  const itemsPerPage = 10;
+  let pageItems;
+  let searchTerm = '';
+  let currentPosition = 0;
+  let totalItems = $allFilesAndPendingUploads?.length || 0;
   let confirmDeleteModalOpen = false;
+  let allItemsChecked = false;
+  let nonSelectableRowIds: string[] = [];
   let affectedAssistants: Assistant[];
   let affectedAssistantsLoading = false;
+  let deleting = false;
 
-  $: affectedAssistants = [];
-  $: if ($filesStore.selectedFileManagementFileIds.length === 0) active = false;
+  /****** Pagination Handlers ******/
+  const next = () => {
+    if (currentPosition + itemsPerPage < filteredItems.length) {
+      currentPosition += itemsPerPage;
+    }
+  };
+  const previous = () => {
+    if (currentPosition - itemsPerPage >= 0) {
+      currentPosition -= itemsPerPage;
+    }
+  };
 
-  // Form error in form action (e.g. validation failure)
-  $: $errors._errors && $errors._errors.length > 0 && handleFormError();
+  /****** End Pagination Handlers ******/
+
+  /****** Sorting Handlers ******/
+
+  let sortKey = 'created_at'; // default sort key
+  let sortDirection = 1; // default sort direction (ascending)
+
+  // Define a function to sort the items
+  const sortTable = (key) => {
+    // If the same key is clicked, reverse the sort direction
+    if (sortKey === key) {
+      sortDirection = -sortDirection;
+    } else {
+      sortKey = key;
+      sortDirection = 1;
+    }
+  };
+
+  // When search term changes, reset to first page
+  $: searchTerm, (currentPosition = 0);
+
+  // Sort page items based on the sort key and direction
+  $: {
+    const tempPageItems = filteredItems.slice(currentPosition, currentPosition + itemsPerPage);
+    const sorted = tempPageItems.sort((a, b) => {
+      const aVal = a[sortKey];
+      const bVal = b[sortKey];
+      if (aVal < bVal) {
+        return -sortDirection;
+      } else if (aVal > bVal) {
+        return sortDirection;
+      }
+      return 0;
+    });
+    pageItems = [...sorted];
+  }
+
+  /****** End Sorting Handlers ******/
+
+  const handleClose = () => {
+    editMode = false;
+    allItemsChecked = false;
+    filesStore.setSelectedFileManagementFileIds([]);
+  };
+
+  const handleEditItem = (id: string) => {
+    const index = $filesStore.selectedFileManagementFileIds.indexOf(id);
+    if (index > -1) {
+      filesStore.removeSelectedFileManagementFileId(id);
+    } else {
+      filesStore.addSelectedFileManagementFileId(id);
+    }
+  };
+
+  const checkAllItems = () => {
+    if (allItemsChecked) {
+      filesStore.setSelectedFileManagementFileIds([]);
+    } else {
+      const items = searchTerm !== '' ? filteredItems : $allFilesAndPendingUploads;
+      const selectableItems = items.filter((item) => !nonSelectableRowIds.includes(item.id));
+      filesStore.setSelectedFileManagementFileIds(selectableItems.map((item) => item.id));
+    }
+  };
 
   const handleFormError = () => {
     filesStore.setAllUploadingToError();
@@ -79,47 +181,15 @@
     affectedAssistantsLoading = false;
   };
 
-  const handleConfirmedDelete = async () => {
-    const isMultipleFiles = $filesStore.selectedFileManagementFileIds.length > 1;
-    deleting = true;
-    const res = await fetch('/api/files/delete', {
-      method: 'DELETE',
-      body: JSON.stringify({ ids: $filesStore.selectedFileManagementFileIds }),
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-    confirmDeleteModalOpen = false;
-    await invalidate('lf:files');
-    if (res.ok) {
-      toastStore.addToast({
-        kind: 'success',
-        title: `${isMultipleFiles ? 'Files' : 'File'} Deleted`
-      });
-    } else {
-      toastStore.addToast({
-        kind: 'error',
-        title: `Error Deleting ${isMultipleFiles ? 'Files' : 'File'}`
-      });
-    }
-    filesStore.setSelectedFileManagementFileIds([]);
-    deleting = false;
-  };
-
-  const handleUpload = async () => {
+  const handleUpload = async (files: File[]) => {
     filesStore.setUploading(true);
-    filesStore.addUploadingFiles(uploadedFiles);
+    filesStore.addUploadingFiles(files);
     nonSelectableRowIds = $filesStore.pendingUploads.map((row) =>
       row.status === 'uploading' ? row.id : ''
     );
     submit(); //upload all files
   };
 
-  $: if (uploadedFiles.length > 0) {
-    //files selected by user
-    handleUpload();
-  }
-
   afterNavigate(() => {
     // Remove files with "uploading" status from store and invalidate the route so files are re-fetched
     // when the page is loaded again
@@ -131,127 +201,165 @@
   });
 </script>
 
-<div class="file-management-container">
-  <div class="title">File Management</div>
+<div class="w-3/4 bg-gray-50 p-3 dark:bg-gray-900">
+  <Heading tag="h3" class="mb-4">File Management</Heading>
   <form method="POST" enctype="multipart/form-data" use:enhance>
-    <DataTable
-      batchSelection={true}
-      bind:selectedRowIds={$filesStore.selectedFileManagementFileIds}
-      bind:nonSelectableRowIds
-      headers={[
-        { key: 'filename', value: 'Name', width: '75%' },
-        {
-          key: 'created_at',
-          value: 'Date Added'
-        }
-      ]}
-      rows={[...$filesStore.files, ...$filesStore.pendingUploads]}
-      sortable
+    <TableSearch
+      data-testid="file-management-table"
+      placeholder="Search"
+      hoverable={true}
+      bind:inputValue={searchTerm}
+      {divClass}
+      {innerDivClass}
+      {searchClass}
+      {classInput}
     >
-      <Toolbar>
-        <ToolbarBatchActions
-          bind:active
-          on:cancel={(e) => {
-            e.preventDefault();
-            active = false;
-            filesStore.setSelectedFileManagementFileIds([]);
-          }}
-        >
-          {#if deleting}
-            <div class="deleting">
-              <Loading withOverlay={false} small data-testid="delete-pending" />
+      <div slot="header" class={headerClass}>
+        <!-- Button with color="alternative" adds two pixels to btn height, border-box does not prevent this. h-[42px] prevents slight screen jump-->
+        <div class="h-[42px]">
+          {#if editMode}
+            <div in:fade={{ duration: 150 }} class="flex items-center gap-2">
+              {#if deleting}
+                <Button color="red" disabled>
+                  <Spinner class="me-3" size="4" color="white" />Deleting...
+                </Button>
+              {:else}
+                <Button color="red" on:click={handleDelete}>Delete</Button>
+              {/if}
+
+              <Button color="alternative" on:click={handleClose}>Cancel</Button>
             </div>
           {:else}
-            <Button
-              icon={TrashCan}
-              on:click={handleDelete}
-              disabled={$filesStore.selectedFileManagementFileIds.length === 0}>Delete</Button
-            >
+            <div in:fade={{ duration: 150 }}>
+              {#if $submitting}
+                <Button disabled>
+                  <Spinner class="me-3" size="4" color="white" />Uploading...
+                </Button>
+              {:else}
+                <LFFileUploadBtn
+                  name="files"
+                  multiple
+                  accept={ACCEPTED_FILE_TYPES}
+                  on:change={(e) => {
+                    const fileList = e.detail;
+                    handleUpload(fileList);
+                  }}
+                >
+                  Upload <UploadOutline class="ml-2" />
+                </LFFileUploadBtn>
+              {/if}
+            </div>
           {/if}
-        </ToolbarBatchActions>
-        <ToolbarContent>
-          <ToolbarSearch
-            bind:filteredRowIds
-            shouldFilterRows={(row, value) => {
-              // filter for filename and date
-              const formattedDate = formatDate(new Date(row.created_at * 1000)).toLowerCase();
-              return (
-                formattedDate.includes(value.toString().toLowerCase()) ||
-                row.filename.toLowerCase().includes(value.toString().toLowerCase())
-              );
-            }}
+        </div>
+      </div>
+      <TableHead>
+        <TableHeadCell class="!p-4">
+          <Checkbox
+            data-testid="select-all-rows-checkbox"
+            on:click={checkAllItems}
+            bind:checked={allItemsChecked}
+            aria-label="select all rows"
           />
+        </TableHeadCell>
 
-          <FileUploaderButton
-            bind:files={uploadedFiles}
-            name="files"
-            multiple
-            disableLabelChanges
-            disabled={$submitting}
-            labelText="Upload"
-            accept={ACCEPTED_FILE_TYPES}
-          />
-        </ToolbarContent>
-      </Toolbar>
-
-      <svelte:fragment slot="cell" let:row let:cell>
-        {#if cell.key === 'filename' && row.status === 'uploading'}
-          <div class="item-with-status uploading">
-            <Loading data-testid="uploading-file-icon" withOverlay={false} small />
-            {cell.value}
-          </div>
-        {:else if cell.key === 'filename' && row.status === 'complete'}
-          <div class="item-with-status">
-            <CheckmarkFilled data-testid="file-uploaded-icon" color="#24a148" />
-
-            {cell.value}
-          </div>
-        {:else if cell.key === 'filename' && row.status === 'error'}
-          <div class="item-with-status error">
-            <ErrorFilled data-testid="file-uploaded-error-icon" color="#DA1E28" />
-            {cell.value}
-          </div>
-        {:else if cell.key === 'created_at'}
-          {cell.value ? formatDate(new Date(cell.value * 1000)) : ''}
-        {:else}
-          {cell.value}
-        {/if}
-      </svelte:fragment>
-    </DataTable>
+        <TableHeadCell
+          padding="px-4 py-3"
+          scope="col"
+          on:click={() => sortTable('filename')}
+          class="cursor-pointer">Name</TableHeadCell
+        >
+        <TableHeadCell
+          padding="px-4 py-3"
+          scope="col"
+          on:click={() => sortTable('created_at')}
+          class="cursor-pointer">Date Added</TableHeadCell
+        >
+      </TableHead>
+      <TableBody>
+        {#each pageItems as item (item.id)}
+          <TableBodyRow>
+            <TableHeadCell class="w-0 !p-4">
+              {#if item.status !== 'uploading'}
+                <Checkbox
+                  on:click={() => handleEditItem(item.id)}
+                  checked={$filesStore.selectedFileManagementFileIds.includes(item.id)}
+                  disabled={nonSelectableRowIds.includes(item.id)}
+                />
+              {/if}
+            </TableHeadCell>
+            {#if item.status === 'uploading'}
+              <TableBodyCell tdClass="px-4 py-3">
+                <div class="flex gap-2">
+                  <Spinner data-testid="uploading-file-spinner" size={6} />
+                  {item.filename}
+                </div>
+              </TableBodyCell>
+            {:else if item.status === 'complete'}
+              <TableBodyCell tdClass="px-4 py-3">
+                <div class="flex gap-2">
+                  <CheckOutline data-testid="file-uploaded-icon" color="green" />
+                  {item.filename}
+                </div>
+              </TableBodyCell>
+            {:else if item.status === 'error'}
+              <TableBodyCell tdClass="px-4 py-3">
+                <div class="flex gap-2">
+                  <div class="flex gap-2">
+                    <CloseCircleOutline data-testid="file-uploaded-error-icon" color="red" />
+                    {item.filename}
+                  </div>
+                </div>
+              </TableBodyCell>
+            {:else}
+              <TableBodyCell tdClass="px-4 py-3">{item.filename}</TableBodyCell>
+            {/if}
+            <TableBodyCell tdClass="px-4 py-3"
+              >{formatDate(new Date(item.created_at))}</TableBodyCell
+            >
+          </TableBodyRow>
+        {/each}
+      </TableBody>
+    </TableSearch>
   </form>
-  <ConfirmAssistantDeleteModal
+  <!--Note - the Pagination component must be outside of the form or it will cause a SuperForm related TypeError in
+  the unit tests: Cannot read properties of undefined (reading '$set')
+    -->
+  <div class="mt-2 flex items-center justify-between gap-2">
+    <div class="text-sm text-gray-700 dark:text-gray-400">
+      {#if endRange === 0}
+        Showing <span
+          data-testid="pagination-range"
+          class="font-semibold text-gray-900 dark:text-white">0</span
+        > Entries
+      {:else}
+        Showing <span
+          data-testid="pagination-range"
+          class="font-semibold text-gray-900 dark:text-white">{startRange}-{endRange}</span
+        >
+        of
+        <span data-testid="pagination-total" class="font-semibold text-gray-900 dark:text-white"
+          >{totalItems}</span
+        >
+        Entries
+      {/if}
+    </div>
+    <Pagination table on:previous={previous} on:next={next}>
+      <div slot="prev" class="flex items-center gap-2 text-white" data-testid="prev-btn">
+        <ArrowLeftOutline class="me-2 h-3.5 w-3.5" />
+        Prev
+      </div>
+      <div slot="next" class="flex items-center gap-2 text-white" data-testid="next-btn">
+        Next
+        <ArrowRightOutline class="ms-2 h-6 w-6" />
+      </div>
+    </Pagination>
+  </div>
+
+  <ConfirmFilesDeleteModal
     bind:open={confirmDeleteModalOpen}
     bind:affectedAssistantsLoading
     bind:deleting
-    bind:confirmDeleteModalOpen
-    {handleConfirmedDelete}
     {affectedAssistants}
+    on:delete={handleClose}
   />
 </div>
-
-<style lang="scss">
-  .file-management-container {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 0 12rem 0 12rem;
-  }
-  .title {
-    @include type.type-style('heading-05');
-  }
-
-  .item-with-status {
-    display: flex;
-    gap: layout.$spacing-03;
-  }
-
-  .uploading {
-    opacity: 50%;
-  }
-  .error {
-    opacity: 50%;
-  }
-  .deleting {
-    margin-right: layout.$spacing-05;
-  }
-</style>
diff --git a/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/file-management.test.ts b/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/file-management.test.ts
index ba7b67853..13f61da3c 100644
--- a/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/file-management.test.ts
+++ b/src/leapfrogai_ui/src/routes/chat/(settings)/file-management/file-management.test.ts
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
+import { fireEvent, render, screen, within } from '@testing-library/svelte';
 import FileManagementPage from './+page.svelte';
 import { getFakeAssistant, getFakeFiles, getFakeSession } from '$testUtils/fakeData';
 import userEvent from '@testing-library/user-event';
@@ -10,7 +10,7 @@ import {
   mockDeleteFileWithDelay,
   mockGetFiles
 } from '$lib/mocks/file-mocks';
-import { vi } from 'vitest';
+import { beforeEach, vi } from 'vitest';
 import { filesStore, toastStore } from '$stores';
 import { convertFileObjectToFileRows } from '$helpers/fileHelpers';
 import { superValidate } from 'sveltekit-superforms';
@@ -23,6 +23,7 @@ import { tick } from 'svelte';
 describe('file management', () => {
   const files = getFakeFiles();
   let form: FilesForm;
+  let searchbox: HTMLElement;
 
   beforeEach(async () => {
     const data = await load();
@@ -40,6 +41,9 @@ describe('file management', () => {
         supabase: {} as unknown as SupabaseClient
       }
     });
+    searchbox = screen.getByRole('textbox', {
+      name: /search/i
+    });
   });
   it('lists all the files', async () => {
     mockGetFiles(files);
@@ -52,7 +56,7 @@ describe('file management', () => {
     mockGetFiles(files);
 
     expect(screen.getByText(files[1].filename)).toBeInTheDocument();
-    await userEvent.type(screen.getByRole('searchbox'), files[0].filename);
+    await userEvent.type(searchbox, files[0].filename);
     expect(screen.queryByText(files[1].filename)).not.toBeInTheDocument();
     expect(screen.getByText(files[0].filename)).toBeInTheDocument();
   });
@@ -73,10 +77,7 @@ describe('file management', () => {
     mockGetFiles([file1, file2]);
 
     expect(screen.getByText(file2.filename)).toBeInTheDocument();
-    await userEvent.type(
-      screen.getByRole('searchbox'),
-      formatDate(new Date(file1.created_at * 1000))
-    );
+    await userEvent.type(searchbox, formatDate(new Date(file1.created_at * 1000)));
     expect(screen.queryByText(file2.filename)).not.toBeInTheDocument();
     expect(screen.getByText(file1.filename)).toBeInTheDocument();
   });
@@ -97,24 +98,25 @@ describe('file management', () => {
     expect(screen.getByText(files[0].filename)).toBeInTheDocument();
     expect(screen.getByText(files[1].filename)).toBeInTheDocument();
 
-    const deleteBtns = screen.getAllByRole('button', { name: /delete/i });
+    const deleteBtn = screen.getByRole('button', { name: /delete/i });
 
-    await userEvent.click(deleteBtns[0]);
+    await userEvent.click(deleteBtn);
 
     // Running deletion check
+    const modal = screen.getByTestId('delete-files-modal');
+    const confirmDeleteBtn = within(modal).getByRole('button', { name: /delete/i });
     expect(screen.getByText('Checking for any assistants affected by deletion...'));
-    expect(deleteBtns[1]).toBeDisabled();
-    await waitFor(() => expect(deleteBtns[1]).not.toBeDisabled());
+    expect(confirmDeleteBtn).toBeDisabled();
 
     // Deletion check completed
-    screen.getByText(/are you sure you want to delete \?/i);
+    await screen.findByText(/are you sure you want to delete \?/i);
 
     // Affected assistants displayed
     expect(screen.queryByText(assistant1.name!));
     expect(screen.queryByText(assistant2.name!));
 
-    await waitFor(() => expect(deleteBtns[1]).not.toBeDisabled());
-    await userEvent.click(deleteBtns[1]);
+    expect(confirmDeleteBtn).not.toBeDisabled();
+    await userEvent.click(confirmDeleteBtn);
 
     expect(toastSpy).toHaveBeenCalledWith({
       kind: 'success',
@@ -122,35 +124,30 @@ describe('file management', () => {
     });
   });
 
-  it('disables the delete button when there are no rows selected', async () => {
-    // Note - the delete button is hidden when there are no rows selected, but still on the page so it needs to be
-    // disabled
+  it('replaces the delete button with a disabled loading spinner button while deleting', async () => {
     mockGetFiles(files);
-
-    const deleteBtn = screen.getAllByRole('button', { name: /delete/i })[0];
-    expect(deleteBtn).toBeDisabled();
-  });
-  it('replaces the delete button with a loading spinner while deleting', async () => {
     mockDeleteCheck([]);
     mockDeleteFileWithDelay();
-    mockGetFiles(files);
-
-    const deleteBtns = screen.getAllByRole('button', { name: /delete/i });
-
-    const checkboxes = screen.getAllByRole('checkbox');
 
-    await fireEvent.click(checkboxes[1]); // select file
-    expect(screen.queryByTestId('delete-pending')).not.toBeInTheDocument(); // no loading spinner yet
-    await userEvent.click(deleteBtns[0]);
-    await waitFor(() => expect(deleteBtns[1]).not.toBeDisabled());
+    const checkbox = screen.getByRole('checkbox', {
+      name: /select all rows/i
+    });
+    await userEvent.click(checkbox);
+    const deleteBtn = screen.getByRole('button', { name: /delete/i });
+    await userEvent.click(deleteBtn);
+    const modal = screen.getByTestId('delete-files-modal');
     // Deletion check completed
-    screen.getByText(/are you sure you want to delete \?/i);
+    await screen.findByText(/are you sure you want to delete \?/i);
+
+    await userEvent.click(within(modal).getByRole('button', { name: /delete/i }));
 
-    await userEvent.click(deleteBtns[1]); // confirm delete
-    const deleteBtns2 = screen.getAllByRole('button', { name: /delete/i });
-    expect(deleteBtns2).toHaveLength(1); // only modal delete btn remains in document
-    expect(screen.queryByTestId('delete-pending')).toBeInTheDocument();
+    expect(deleteBtn).not.toBeInTheDocument();
+    const deleteSpinnerBtn = screen.getByRole('button', { name: /deleting/i });
+    expect(deleteSpinnerBtn).toBeInTheDocument();
+    expect(deleteSpinnerBtn).toBeDisabled();
+    screen.getByText('Deleting...');
   });
+
   it("doesn't display warning about affected assistants when the file doesn't affect any assistants", async () => {
     mockDeleteCheck([]); // no assistants affected
     mockGetFiles(files);
@@ -160,20 +157,111 @@ describe('file management', () => {
     });
     await fireEvent.click(checkbox);
 
-    const deleteBtns = screen.getAllByRole('button', { name: /delete/i });
+    const deleteBtn = screen.getByRole('button', { name: /delete/i });
 
-    await userEvent.click(deleteBtns[0]);
+    await userEvent.click(deleteBtn);
 
     // Running deletion check
     await screen.findByText('Checking for any assistants affected by deletion...');
-    expect(deleteBtns[1]).toBeDisabled();
-    await waitFor(() => expect(deleteBtns[1]).not.toBeDisabled());
 
     // Deletion check completed
-    screen.getByText(/are you sure you want to delete \?/i);
+    await screen.findByText(/are you sure you want to delete \?/i);
 
     expect(
       screen.queryByText(/this will affect the following assistants/i)
     ).not.toBeInTheDocument();
   });
 });
+
+// TODO - The API Keys table also uses this pagination logic, but we are only testing it here on the files table
+// Eventually we should refactor the table to a re-usable component and test there instead
+// https://github.com/defenseunicorns/leapfrogai/issues/860
+describe('table pagination', () => {
+  const files = getFakeFiles({ numFiles: 15 });
+  let form: FilesForm;
+  let searchbox: HTMLElement;
+
+  beforeEach(async () => {
+    const data = await load();
+
+    form = await superValidate(yup(filesSchema));
+    filesStore.setFiles(convertFileObjectToFileRows(files));
+    filesStore.setSelectedFileManagementFileIds([]);
+
+    render(FileManagementPage, {
+      data: {
+        ...data,
+        form,
+        session: getFakeSession(),
+        assistants: [],
+        supabase: {} as unknown as SupabaseClient
+      }
+    });
+    searchbox = screen.getByRole('textbox', {
+      name: /search/i
+    });
+  });
+  it('renders the correct item ranges', () => {
+    mockGetFiles(files);
+    expect(screen.getByText(/showing of entries/i));
+    expect(screen.getByTestId('pagination-range').textContent).toEqual('1-10');
+    expect(screen.getByTestId('pagination-total').textContent).toEqual('15');
+  });
+
+  it('renders 0 items when none found', async () => {
+    mockGetFiles(files);
+
+    await userEvent.type(searchbox, 'not an existing file');
+    expect(screen.getByText(/showing entries/i));
+    expect(screen.getByTestId('pagination-range').textContent).toEqual('0');
+    expect(screen.queryByTestId('pagination-total')).not.toBeInTheDocument();
+  });
+
+  it('renders the correct item ranges when clicking next and prev', async () => {
+    mockGetFiles(files);
+    await userEvent.click(screen.getByTestId('next-btn'));
+    expect(screen.getByText(/showing of entries/i));
+    expect(screen.getByTestId('pagination-range').textContent).toEqual('11-15');
+    expect(screen.getByTestId('pagination-total').textContent).toEqual('15');
+
+    await userEvent.click(screen.getByTestId('prev-btn'));
+    expect(screen.getByText(/showing of entries/i));
+    expect(screen.getByTestId('pagination-range').textContent).toEqual('1-10');
+    expect(screen.getByTestId('pagination-total').textContent).toEqual('15');
+  });
+  it('updates item counts when searching and switching pages', async () => {
+    const searchTerm = files[0].filename;
+    const filesThatMeetSearchCriteria = files.filter((file) => file.filename.includes(searchTerm));
+
+    const searchbox = screen.getByRole('textbox', {
+      name: /search/i
+    });
+
+    // Regular search
+    await userEvent.type(searchbox, searchTerm);
+    expect(screen.getByText(/showing of entries/i));
+    expect(screen.getByTestId('pagination-range').textContent).toEqual(
+      `1-${filesThatMeetSearchCriteria.length}`
+    );
+    expect(screen.getByTestId('pagination-total').textContent).toEqual(
+      filesThatMeetSearchCriteria.length.toString()
+    );
+
+    // Clear search
+    await userEvent.clear(searchbox);
+    expect(screen.getByText(/showing of entries/i));
+    expect(screen.getByTestId('pagination-range').textContent).toEqual('1-10');
+    expect(screen.getByTestId('pagination-total').textContent).toEqual('15');
+
+    // Search while on page 2
+    await userEvent.click(screen.getByTestId('next-btn'));
+    await userEvent.type(searchbox, searchTerm);
+    expect(screen.getByText(/showing of entries/i));
+    expect(screen.getByTestId('pagination-range').textContent).toEqual(
+      `1-${filesThatMeetSearchCriteria.length}`
+    );
+    expect(screen.getByTestId('pagination-total').textContent).toEqual(
+      filesThatMeetSearchCriteria.length.toString()
+    );
+  });
+});
diff --git a/src/leapfrogai_ui/src/routes/chat/+layout.svelte b/src/leapfrogai_ui/src/routes/chat/+layout.svelte
index 6f97b4547..2e4cc095d 100644
--- a/src/leapfrogai_ui/src/routes/chat/+layout.svelte
+++ b/src/leapfrogai_ui/src/routes/chat/+layout.svelte
@@ -6,5 +6,4 @@
 </script>
 
 <LFHeader isUsingOpenAI={data.isUsingOpenAI} />
-
 <slot />
diff --git a/src/leapfrogai_ui/src/styles/main.scss b/src/leapfrogai_ui/src/styles/main.scss
deleted file mode 100644
index 3b86fff92..000000000
--- a/src/leapfrogai_ui/src/styles/main.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-:root {
-  --header-height: 3rem;
-  --footer-height: 1.5rem;
-  --message-input-height: 2.5rem;
-  scrollbar-color: themes.$layer-03 themes.$background;
-}
-
-.centered-flexbox {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.remove-btn-style {
-  // remove default button styling
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-}
-
-.divider {
-  display: block;
-  width: 100%;
-  height: 1px;
-  margin: 0.5rem 0;
-  border: none;
-  background: themes.$border-subtle-00;
-}
-
-.lf-content-container {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.highlight-icon :global(svg) {
-  cursor: pointer;
-  fill: themes.$icon-secondary;
-  transition: fill 70ms ease;
-  &:hover {
-    fill: themes.$icon-primary;
-  }
-}
diff --git a/src/leapfrogai_ui/supabase/config.toml b/src/leapfrogai_ui/supabase/config.toml
index c83557ee6..81adecd94 100644
--- a/src/leapfrogai_ui/supabase/config.toml
+++ b/src/leapfrogai_ui/supabase/config.toml
@@ -73,7 +73,7 @@ enabled = true
 # in emails.
 site_url = "http://localhost:5173"
 # A list of *exact* URLs that auth providers are permitted to redirect to post authentication.
-additional_redirect_urls = ["http://localhost:5173/auth/callback"]
+additional_redirect_urls = ["http://localhost:5173/auth/callback", "http://localhost:4173", "http://localhost:4173/auth/callback"]
 # How long tokens are valid for, in seconds. Defaults to 3600 (1 hour), maximum 604,800 (1 week).
 jwt_expiry = 3600
 # If disabled, the refresh token will never expire.
diff --git a/src/leapfrogai_ui/svelte.config.js b/src/leapfrogai_ui/svelte.config.js
index 8c830e378..122bb5f1f 100644
--- a/src/leapfrogai_ui/svelte.config.js
+++ b/src/leapfrogai_ui/svelte.config.js
@@ -1,12 +1,11 @@
 import adapter from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-import { optimizeImports } from 'carbon-preprocess-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   // Consult https://kit.svelte.dev/docs/integrations#preprocessors
   // for more information about preprocessors
-  preprocess: [vitePreprocess(), optimizeImports()],
+  preprocess: [vitePreprocess()],
   kit: {
     // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
     // If your environment is not supported or you settled on a specific environment, switch out the adapter.
diff --git a/src/leapfrogai_ui/tailwind.config.cjs b/src/leapfrogai_ui/tailwind.config.cjs
new file mode 100644
index 000000000..78b3f01db
--- /dev/null
+++ b/src/leapfrogai_ui/tailwind.config.cjs
@@ -0,0 +1,55 @@
+import flowbitePlugin from 'flowbite/plugin';
+
+export default {
+  content: [
+    './src/**/*.{html,js,svelte,ts}',
+    './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
+  ],
+  darkMode: 'class',
+  theme: {
+    screens: {
+      sm: '640px',
+      // => @media (min-width: 640px) { ... }
+
+      md: '768px',
+      // => @media (min-width: 768px) { ... }
+
+      lg: '1024px',
+      // => @media (min-width: 1024px) { ... }
+
+      xl: '1280px',
+      // => @media (min-width: 1280px) { ... }
+
+      '2xl': '1536px',
+      // => @media (min-width: 1536px) { ... }
+
+      '3xl': '1920px'
+      // => @media (min-width: 1920px) { ... }
+    },
+    extend: {
+      height: {
+        header: '3rem'
+      },
+      inset: {
+        header: '3rem' // Extend the `top` utility to include the header height
+      },
+      colors: {
+        // flowbite-svelte
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a'
+        }
+      }
+    }
+  },
+
+  plugins: [flowbitePlugin]
+};
diff --git a/src/leapfrogai_ui/testUtils/fakeData/index.ts b/src/leapfrogai_ui/testUtils/fakeData/index.ts
index b382636f8..8895201dc 100644
--- a/src/leapfrogai_ui/testUtils/fakeData/index.ts
+++ b/src/leapfrogai_ui/testUtils/fakeData/index.ts
@@ -117,7 +117,7 @@ export const getFakeAssistant = (options: GetFakeAssistantOptions = {}): LFAssis
   return {
     id: faker.string.uuid(),
     ...assistantDefaults,
-    name: faker.person.fullName(),
+    name: faker.person.firstName(),
     description: faker.lorem.sentence(),
     instructions: faker.lorem.paragraph(),
     temperature: DEFAULT_ASSISTANT_TEMP,
@@ -152,7 +152,7 @@ export const fakeAssistants: LFAssistant[] = [getFakeAssistant(), getFakeAssista
 
 export const getFakeAssistantInput = (data_sources?: string[]): AssistantInput => {
   return {
-    name: faker.person.fullName(),
+    name: faker.person.firstName(),
     description: faker.lorem.sentence(),
     instructions: faker.lorem.paragraph(),
     temperature: DEFAULT_ASSISTANT_TEMP,
@@ -343,3 +343,5 @@ export const getFakeApiKeys = (options: GetFakeApiKeysOptions = {}): APIKeyRow[]
   }
   return result;
 };
+
+export const fakeKeys = getFakeApiKeys({ numKeys: 4 });
diff --git a/src/leapfrogai_ui/tests/api-keys.test.ts b/src/leapfrogai_ui/tests/api-keys.test.ts
index 999858ff2..ef1ea5a11 100644
--- a/src/leapfrogai_ui/tests/api-keys.test.ts
+++ b/src/leapfrogai_ui/tests/api-keys.test.ts
@@ -4,7 +4,7 @@ import { getTableRow, loadApiKeyPage, loadChatPage } from './helpers/helpers';
 test('it can navigate to the API key page', async ({ page }) => {
   await loadChatPage(page);
 
-  await page.getByLabel('Settings').click();
+  await page.getByTestId('header-settings-btn').click();
   await page.getByText('API Keys').click();
 
   await expect(page).toHaveTitle('LeapfrogAI - API Keys');
@@ -13,20 +13,22 @@ test('it can navigate to the API key page', async ({ page }) => {
 test('it can create and delete an API key', async ({ page }) => {
   await loadApiKeyPage(page);
   const keyName = 'new test key';
-  await page.getByRole('button', { name: 'Create new', exact: true }).click();
-  await page.getByLabel('name').fill(keyName);
+  await page.getByLabel('create new').click();
+  const createModal = page.getByTestId('create-api-key-modal');
+  await createModal.getByRole('textbox').fill(keyName);
   await page.getByText('60 Days').click();
   await page.getByRole('button', { name: 'Create', exact: true }).click();
   await expect(page.getByText(`${keyName} created successfully`)).toBeVisible();
   await page.getByRole('button', { name: 'Close', exact: true }).click({ force: true });
   await expect(page.getByText('Save secret key')).not.toBeVisible();
-  const row = await getTableRow(page, keyName);
-  expect(row).not.toBeNull();
-  await row!.getByRole('checkbox').check({ force: true });
+
+  const row = await getTableRow(page, keyName, 'api-keys-table');
+  await row.getByRole('checkbox').check();
   const deleteBtn = page.getByRole('button', { name: 'delete' });
   await deleteBtn.click();
-  await expect(page.getByText(`Are you sure you want to delete ${keyName}?`)).toBeVisible();
-  const deleteBtns = await page.getByRole('button', { name: 'delete' }).all();
-  await deleteBtns[1].click();
+  const deleteModal = page.getByTestId('delete-api-key-modal');
+  await expect(deleteModal.getByText(`Are you sure you want to delete`)).toBeVisible();
+  const confirmDeleteBtn = deleteModal.getByRole('button', { name: 'delete' });
+  await confirmDeleteBtn.click();
   await expect(page.getByText('Key Deleted')).toBeVisible();
 });
diff --git a/src/leapfrogai_ui/tests/assistant-avatars.test.ts b/src/leapfrogai_ui/tests/assistant-avatars.test.ts
index 767875f6a..1fdba4a3b 100644
--- a/src/leapfrogai_ui/tests/assistant-avatars.test.ts
+++ b/src/leapfrogai_ui/tests/assistant-avatars.test.ts
@@ -1,8 +1,15 @@
 import { expect, test } from './fixtures';
-import { faker } from '@faker-js/faker';
 import { getFakeAssistantInput } from '../testUtils/fakeData';
 import { NO_FILE_ERROR_TEXT } from '../src/lib/constants/index';
-import { deleteAllAssistants, uploadAvatar } from './helpers/assistantHelpers';
+import {
+  deleteAllAssistants,
+  fillOutRequiredAssistantFields,
+  getRandomPictogramName,
+  saveAssistant,
+  saveAvatarImage,
+  savePictogram,
+  uploadAvatar
+} from './helpers/assistantHelpers';
 
 test.afterEach(async ({ openAIClient }) => {
   await deleteAllAssistants(openAIClient);
@@ -14,35 +21,13 @@ test('it can search for and choose a pictogram as an avatar', async ({ page }) =
   // Attempts to import the iconMap and pick random pictograms failed, the import breaks this test file and it won't
   // show up in playwright
   const assistantInput = getFakeAssistantInput();
-  const pictogramName = faker.helpers.arrayElement([
-    'Agriculture',
-    'Airplane',
-    'AmsterdamWindmill',
-    'Analytics',
-    'Analyze',
-    'AnalyzeCode',
-    'AnalyzesData',
-    'AnalyzingContainers',
-    'AppDeveloper',
-    'AppModernization',
-    'ApplicationIntegration',
-    'ApplicationPlatform',
-    'ApplicationSecurity',
-    'ArtTools_01',
-    'AsiaAustralia',
-    'AudioData',
-    'AuditTrail',
-    'AugmentedReality',
-    'Automobile'
-  ]);
+  const pictogramName = getRandomPictogramName();
 
   await page.goto('/chat/assistants-management/new');
 
-  await page.getByLabel('name').fill(assistantInput.name);
-  await page.getByLabel('description').fill(assistantInput.description);
-  await page.getByPlaceholder("You'll act as...").fill(assistantInput.instructions);
+  await fillOutRequiredAssistantFields(assistantInput, page);
 
-  await page.locator('.mini-avatar-container').click();
+  await page.getByTestId('mini-avatar-container').click();
 
   await page.getByPlaceholder('Search').click();
   await page.getByPlaceholder('Search').fill(pictogramName);
@@ -57,10 +42,8 @@ test('it can search for and choose a pictogram as an avatar', async ({ page }) =
   const miniAvatarContainer = page.getByTestId('mini-avatar-container');
   const pictogram = miniAvatarContainer.getByTestId(`pictogram-${pictogramName}`);
   await expect(pictogram).toBeVisible();
-  await saveButton.click();
-  await expect(page.getByText('Assistant Created')).toBeVisible();
+  await saveAssistant(assistantInput.name, page);
 
-  await page.waitForURL('**/chat/assistants-management');
   await expect(page.getByTestId(`pictogram-${pictogramName}`)).toBeVisible();
 });
 
@@ -70,51 +53,41 @@ test('it can upload an image as an avatar', async ({ page }) => {
 
   await page.goto('/chat/assistants-management/new');
 
-  await page.getByLabel('name').fill(assistantInput.name);
-  await page.getByLabel('description').fill(assistantInput.description);
-  await page.getByPlaceholder("You'll act as...").fill(assistantInput.instructions);
+  await fillOutRequiredAssistantFields(assistantInput, page);
 
-  await page.locator('.mini-avatar-container').click();
+  await page.getByTestId('mini-avatar-container').click();
   await uploadAvatar(page);
 
   await page.getByRole('dialog').getByRole('button', { name: 'Save' }).click();
 
-  // Wait for modal save button to disappear
-  const saveButtons = page.getByRole('button', { name: 'Save' });
-  await expect(saveButtons).toHaveCount(1);
-
-  await saveButtons.click();
+  await saveAssistant(assistantInput.name, page);
+  const card = page.getByTestId(`assistant-card-${assistantInput.name}`);
+  const avatar = card.getByTestId('assistant-card-avatar');
+  const avatarSrc = await avatar.getAttribute('src');
 
-  await page.waitForURL('/chat/assistants-management');
-  await expect(page.getByText('Assistant Created')).toBeVisible();
-  await expect(page.getByTestId(`assistant-tile-${assistantInput.name}`)).toBeVisible();
+  expect(avatarSrc).toBeDefined();
 });
 
 test('it can change an image uploaded as an avatar', async ({ page }) => {
   await page.goto('/chat/assistants-management/new');
 
-  await page.locator('.mini-avatar-container').click();
+  await page.getByTestId('mini-avatar-container').click();
   await uploadAvatar(page);
 
-  const imageUploadContainer = page.getByTestId('image-upload-avatar');
-  const backgroundImage = await imageUploadContainer.evaluate((node) => {
-    return window.getComputedStyle(node).backgroundImage;
-  });
+  const avatarUploadContainer = page.getByTestId('image-upload-avatar');
+  const originalImageSource = await avatarUploadContainer.getAttribute('src');
 
   await page.getByRole('dialog').getByRole('button', { name: 'Save' }).click();
 
-  await page.locator('.mini-avatar-container').click();
+  await page.getByTestId('mini-avatar-container').click();
 
   const fileChooserPromise = page.waitForEvent('filechooser');
   await page.getByText('Change', { exact: true }).click();
   const fileChooser = await fileChooserPromise;
   await fileChooser.setFiles('./tests/fixtures/frog.png');
 
-  const newBackgroundImage = await imageUploadContainer.evaluate((node) => {
-    return window.getComputedStyle(node).backgroundImage;
-  });
-
-  expect(backgroundImage).not.toEqual(newBackgroundImage);
+  const newImageSource = await avatarUploadContainer.getAttribute('src');
+  expect(originalImageSource).not.toEqual(newImageSource);
 });
 
 test('it shows an error when clicking save on the upload tab if no image is uploaded', async ({
@@ -124,12 +97,10 @@ test('it shows an error when clicking save on the upload tab if no image is uplo
 
   await page.goto('/chat/assistants-management/new');
 
-  await page.getByLabel('name').fill(assistantInput.name);
-  await page.getByLabel('description').fill(assistantInput.description);
-  await page.getByPlaceholder("You'll act as...").fill(assistantInput.instructions);
+  await fillOutRequiredAssistantFields(assistantInput, page);
 
-  await page.locator('.mini-avatar-container').click();
-  await page.getByText('Upload', { exact: true }).click();
+  await page.getByTestId('mini-avatar-container').click();
+  await page.getByTestId('upload-radio-btn').check();
 
   const saveButton = page.getByRole('button', { name: 'Save' }).nth(0);
 
@@ -142,7 +113,7 @@ test('it shows an error when clicking save on the upload tab if no image is uplo
 
 test('it removes an uploaded image and keeps the original pictogram on save', async ({ page }) => {
   await page.goto('/chat/assistants-management/new');
-  await page.locator('.mini-avatar-container').click();
+  await page.getByTestId('mini-avatar-container').click();
 
   await uploadAvatar(page);
 
@@ -150,7 +121,7 @@ test('it removes an uploaded image and keeps the original pictogram on save', as
 
   await expect(page.getByTestId('image-upload-avatar')).toHaveCount(0);
 
-  await page.getByText('Pictogram', { exact: true }).click();
+  await page.getByTestId('pictogram-radio-btn').check();
 
   await page.getByRole('dialog').getByRole('button', { name: 'Save' }).click();
 
@@ -163,7 +134,7 @@ test('it keeps the original pictogram on cancel after uploading an image but not
   page
 }) => {
   await page.goto('/chat/assistants-management/new');
-  await page.locator('.mini-avatar-container').click();
+  await page.getByTestId('mini-avatar-container').click();
 
   await uploadAvatar(page);
 
@@ -179,7 +150,7 @@ test('it keeps the original pictogram on cancel after changing the pictogram but
 }) => {
   const pictogramName = 'Analytics';
   await page.goto('/chat/assistants-management/new');
-  await page.locator('.mini-avatar-container').click();
+  await page.getByTestId('mini-avatar-container').click();
 
   await page.getByPlaceholder('Search').click();
   await page.getByPlaceholder('Search').fill(pictogramName);
@@ -199,14 +170,14 @@ test('it keeps the original pictogram on close (not cancel) after changing the p
 }) => {
   const pictogramName = 'Analytics';
   await page.goto('/chat/assistants-management/new');
-  await page.locator('.mini-avatar-container').click();
+  await page.getByTestId('mini-avatar-container').click();
 
   await page.getByPlaceholder('Search').click();
   await page.getByPlaceholder('Search').fill(pictogramName);
 
   await page.getByTestId(`pictogram-${pictogramName}`).click();
 
-  await page.getByLabel('Close the modal').nth(0).click();
+  await page.getByLabel('Close modal').click();
 
   const miniAvatarContainer = page.getByTestId('mini-avatar-container');
   const pictogram = miniAvatarContainer.getByTestId(`pictogram-default`);
@@ -219,11 +190,10 @@ test('it saves the pictogram if the save button is clicked on the pictogram tab
   const pictogramName = 'Analytics';
 
   await page.goto('/chat/assistants-management/new');
-  await page.locator('.mini-avatar-container').click();
+  await page.getByTestId('mini-avatar-container').click();
 
   await uploadAvatar(page);
-
-  await page.getByText('Pictogram', { exact: true }).click();
+  await page.getByTestId('pictogram-radio-btn').check();
 
   await page.getByTestId(`pictogram-${pictogramName}`).click();
   await page.getByRole('dialog').getByRole('button', { name: 'Save' }).click();
@@ -232,3 +202,28 @@ test('it saves the pictogram if the save button is clicked on the pictogram tab
   const pictogram = miniAvatarContainer.getByTestId(`pictogram-${pictogramName}`);
   await expect(pictogram).toBeVisible();
 });
+
+test('it can upload an image, then change to a pictogram, then change to an image', async ({
+  page
+}) => {
+  // There are lots of edge cases for the avatar/pictogram upload flow, this tests a couple of them
+  const assistantInput = getFakeAssistantInput();
+  const pictogramName = getRandomPictogramName();
+
+  await page.goto('/chat/assistants-management/new');
+
+  await fillOutRequiredAssistantFields(assistantInput, page);
+
+  await saveAvatarImage(page);
+  await savePictogram(pictogramName, page);
+  await saveAvatarImage(page);
+
+  // create assistant
+  await saveAssistant(assistantInput.name, page);
+
+  const card = page.getByTestId(`assistant-card-${assistantInput.name}`);
+  const avatar = card.getByTestId('assistant-card-avatar');
+  const avatarSrc = await avatar.getAttribute('src');
+
+  expect(avatarSrc).toBeDefined();
+});
diff --git a/src/leapfrogai_ui/tests/assistants.test.ts b/src/leapfrogai_ui/tests/assistants.test.ts
index 751d155c2..532832f97 100644
--- a/src/leapfrogai_ui/tests/assistants.test.ts
+++ b/src/leapfrogai_ui/tests/assistants.test.ts
@@ -4,15 +4,17 @@ import { getFakeAssistantInput } from '../testUtils/fakeData';
 import type { ActionResult } from '@sveltejs/kit';
 import {
   createAssistant,
-  deleteAssistant,
-  deleteAssistantWithApi
+  createAssistantWithApi,
+  deleteAssistantCard,
+  deleteAssistantWithApi,
+  editAssistantCard
 } from './helpers/assistantHelpers';
 import { deleteActiveThread, sendMessage } from './helpers/threadHelpers';
 
 test('it navigates to the assistants page', async ({ page }) => {
   await loadChatPage(page);
 
-  await page.getByLabel('Settings').click();
+  await page.getByTestId('header-settings-btn').click();
   await page.getByText('Assistants Management').click();
 
   await expect(page).toHaveTitle('LeapfrogAI - Assistants Management');
@@ -31,12 +33,12 @@ test('it creates an assistant and navigates back to the management page', async
 
   await createAssistant(assistantInput, page);
 
-  await page.waitForURL('/chat/assistants-management');
   await expect(page.getByText('Assistant Created')).toBeVisible();
-  await expect(page.getByTestId(`assistant-tile-${assistantInput.name}`)).toBeVisible();
+  await page.waitForURL('/chat/assistants-management');
+  await expect(page.getByTestId(`assistant-card-${assistantInput.name}`)).toBeVisible();
 
   // cleanup
-  await deleteAssistant(assistantInput.name, page);
+  await deleteAssistantCard(assistantInput.name, page);
 });
 
 test('displays an error toast when there is an error creating an assistant and remains on the assistant page', async ({
@@ -66,22 +68,16 @@ test('displays an error toast when there is an error editing an assistant and re
   page,
   openAIClient
 }) => {
-  const assistantInput1 = getFakeAssistantInput();
-  const assistantInput2 = getFakeAssistantInput();
+  const assistant = await createAssistantWithApi({ openAIClient });
+  const newAssistantAttributes = getFakeAssistantInput();
 
-  await createAssistant(assistantInput1, page);
+  await page.goto('/chat/assistants-management');
 
-  await page
-    .getByTestId(`assistant-tile-${assistantInput1.name}`)
-    .getByTestId('overflow-menu')
-    .click();
-  await page.getByRole('menuitem', { name: 'Edit' }).click();
+  await editAssistantCard(assistant.name!, page);
 
   await page.waitForURL('/chat/assistants-management/edit/**/*');
 
-  const assistantId = page.url().substring(page.url().lastIndexOf('/') + 1);
-
-  await page.route(`*/**/chat/assistants-management/edit/${assistantId}`, async (route) => {
+  await page.route(`*/**/chat/assistants-management/edit/${assistant.id}`, async (route) => {
     if (route.request().method() === 'POST') {
       const result: ActionResult = {
         type: 'failure',
@@ -95,7 +91,7 @@ test('displays an error toast when there is an error editing an assistant and re
     }
   });
 
-  await page.getByLabel('name').fill(assistantInput2.name);
+  await page.getByLabel('name').fill(newAssistantAttributes.name);
 
   // Wait for modal save button to disappear if avatar modal was open
   const saveButtons = page.getByRole('button', { name: 'Save' });
@@ -105,43 +101,47 @@ test('displays an error toast when there is an error editing an assistant and re
 
   await expect(page.getByText('Error Editing Assistant')).toBeVisible();
 
-  await page.waitForURL(`/chat/assistants-management/edit/${assistantId}`);
+  await page.waitForURL(`/chat/assistants-management/edit/${assistant.id}`);
 
   // cleanup
-  await deleteAssistantWithApi(assistantId, openAIClient);
+  await deleteAssistantWithApi(assistant.id, openAIClient);
 });
 
-test('it can search for assistants', async ({ page }) => {
-  const assistantInput1 = getFakeAssistantInput();
-  const assistantInput2 = getFakeAssistantInput();
-
-  await createAssistant(assistantInput1, page);
-  await createAssistant(assistantInput2, page);
+test('it can search for assistants', async ({ page, openAIClient }) => {
+  const assistant1 = await createAssistantWithApi({ openAIClient });
+  const assistant2 = await createAssistantWithApi({ openAIClient });
 
+  await page.goto('/chat/assistants-management');
   // Search by name
-  await page.waitForURL('/chat/assistants-management');
-  await page.getByRole('searchbox').fill(assistantInput1.name);
+  await page
+    .getByRole('textbox', {
+      name: /search/i
+    })
+    .fill(assistant1.name!);
 
-  await expect(page.getByTestId(`assistant-tile-${assistantInput2.name}`)).not.toBeVisible();
-  await expect(page.getByTestId(`assistant-tile-${assistantInput1.name}`)).toBeVisible();
+  await expect(page.getByTestId(`assistant-card-${assistant2.name}`)).not.toBeVisible();
+  await expect(page.getByTestId(`assistant-card-${assistant1.name}`)).toBeVisible();
 
   // search by description
-  await page.getByRole('searchbox').clear();
-  await page.getByRole('searchbox').fill(assistantInput2.description);
+  const searchBox = page.getByRole('textbox', {
+    name: /search/i
+  });
+  await searchBox.clear();
+  await searchBox.fill(assistant2.description!);
 
-  await expect(page.getByTestId(`assistant-tile-${assistantInput2.name}`)).toBeVisible();
-  await expect(page.getByTestId(`assistant-tile-${assistantInput1.name}`)).not.toBeVisible();
+  await expect(page.getByTestId(`assistant-card-${assistant2.name!}`)).toBeVisible();
+  await expect(page.getByTestId(`assistant-card-${assistant1.name!}`)).not.toBeVisible();
 
   // Search by instructions
-  await page.getByRole('searchbox').fill(assistantInput1.instructions);
+  await searchBox.fill(assistant1.instructions!);
 
-  await expect(page.getByTestId(`assistant-tile-${assistantInput2.name}`)).not.toBeVisible();
-  await expect(page.getByTestId(`assistant-tile-${assistantInput1.name}`)).toBeVisible();
+  await expect(page.getByTestId(`assistant-card-${assistant2.name}`)).not.toBeVisible();
+  await expect(page.getByTestId(`assistant-card-${assistant1.name}`)).toBeVisible();
 
   // cleanup
-  await page.getByRole('searchbox').clear();
-  await deleteAssistant(assistantInput1.name, page);
-  await deleteAssistant(assistantInput2.name, page);
+  await searchBox.clear();
+  await deleteAssistantWithApi(assistant1.id, openAIClient);
+  await deleteAssistantWithApi(assistant2.id, openAIClient);
 });
 
 test('it can navigate to the last visited thread with breadcrumbs', async ({
@@ -157,13 +157,16 @@ test('it can navigate to the last visited thread with breadcrumbs', async ({
   const urlParts = new URL(page.url()).pathname.split('/');
   const threadId = urlParts[urlParts.length - 1];
 
-  await page.getByLabel('Settings').click();
+  await page.getByTestId('header-settings-btn').click();
   await page.getByText('Assistants Management').click();
   await page.getByRole('button', { name: 'New Assistant' }).click();
   await page.waitForURL('/chat/assistants-management/new');
-  await page.getByRole('link', { name: 'Assistants Management' }).click();
+  await page
+    .getByTestId('breadcrumbs')
+    .getByRole('link', { name: 'Assistants Management' })
+    .click();
   await page.waitForURL('/chat/assistants-management');
-  await page.getByRole('link', { name: 'Chat' }).click();
+  await page.getByTestId('breadcrumbs').getByRole('link', { name: 'Chat' }).click();
   await page.waitForURL(`/chat/${threadId}`);
 
   // Cleanup
@@ -181,7 +184,7 @@ test('it validates input', async ({ page }) => {
   await expect(page.getByText('This field is required. Please enter instructions.')).toHaveCount(1);
 
   // Test client side validation - errors disappear live without have to click save
-  await page.getByLabel('description').fill('my description');
+  await page.getByLabel('tagline').fill('my description');
 
   await page.getByPlaceholder("You'll act as...").fill('my instructions');
   await expect(page.getByText('This field is required. Please enter a tagline.')).toHaveCount(0);
@@ -221,26 +224,20 @@ test('it DOES NOT confirm you want to navigate away if you click the cancel butt
   await page.waitForURL('/chat/assistants-management');
 });
 
-test('it allows you to edit an assistant', async ({ page }) => {
+test('it allows you to edit an assistant', async ({ page, openAIClient }) => {
   const pictogramName = 'Analytics';
-  const assistantInput1 = getFakeAssistantInput();
-  const assistantInput2 = getFakeAssistantInput();
+  const assistant1 = await createAssistantWithApi({ openAIClient });
+  const newAssistantAttributes = getFakeAssistantInput();
 
-  await createAssistant(assistantInput1, page);
-
-  await page.waitForURL('/chat/assistants-management');
+  await page.goto('/chat/assistants-management');
 
-  await page
-    .getByTestId(`assistant-tile-${assistantInput1.name}`)
-    .getByTestId('overflow-menu')
-    .click();
-  await page.getByRole('menuitem', { name: 'Edit' }).click();
+  await editAssistantCard(assistant1.name!, page);
 
-  await page.getByLabel('name').fill(assistantInput2.name);
-  await page.getByLabel('description').fill(assistantInput2.description);
-  await page.getByPlaceholder("You'll act as...").fill(assistantInput2.instructions);
+  await page.getByLabel('name').fill(newAssistantAttributes.name);
+  await page.getByLabel('tagline').fill(newAssistantAttributes.description);
+  await page.getByPlaceholder("You'll act as...").fill(newAssistantAttributes.instructions);
 
-  await page.locator('.mini-avatar-container').click();
+  await page.getByTestId('mini-avatar-container').click();
   await page.getByTestId(`pictogram-${pictogramName}`).click();
   await page.getByRole('dialog').getByRole('button', { name: 'Save' }).click();
 
@@ -251,44 +248,36 @@ test('it allows you to edit an assistant', async ({ page }) => {
   await page.getByRole('button', { name: 'Save' }).click();
 
   await expect(page.getByText('Assistant Updated')).toBeVisible();
-  await expect(page.getByTestId(`assistant-tile-${assistantInput2.name}`)).toBeVisible();
+  await expect(page.getByTestId(`assistant-card-${newAssistantAttributes.name}`)).toBeVisible();
+
+  //cleanup
+  await deleteAssistantWithApi(assistant1.id, openAIClient);
 });
 
-test("it populates the assistants values when editing an assistant's details", async ({ page }) => {
-  const assistantInput = getFakeAssistantInput();
+test("it populates the assistants values when editing an assistant's details", async ({
+  page,
+  openAIClient
+}) => {
+  const assistant = await createAssistantWithApi({ openAIClient });
 
-  await createAssistant(assistantInput, page);
+  await page.goto('/chat/assistants-management');
 
-  await page.waitForURL('/chat/assistants-management');
+  await editAssistantCard(assistant.name!, page);
 
-  await page
-    .getByTestId(`assistant-tile-${assistantInput.name}`)
-    .getByTestId('overflow-menu')
-    .click();
-  await page.getByRole('menuitem', { name: 'Edit' }).click();
+  await expect(page.getByLabel('name')).toHaveValue(assistant.name!);
+  await expect(page.getByLabel('tagline')).toHaveValue(assistant.description!);
+  await expect(page.getByPlaceholder("You'll act as...")).toHaveValue(assistant.instructions!);
 
-  await expect(page.getByLabel('name')).toHaveValue(assistantInput.name);
-  await expect(page.getByLabel('description')).toHaveValue(assistantInput.description);
-  await expect(page.getByPlaceholder("You'll act as...")).toHaveValue(assistantInput.instructions);
+  //cleanup
+  await deleteAssistantWithApi(assistant.id, openAIClient);
 });
 
-test('it can delete assistants', async ({ page }) => {
-  const assistantInput = getFakeAssistantInput();
-
-  await createAssistant(assistantInput, page);
+test('it can delete assistants', async ({ page, openAIClient }) => {
+  const assistant = await createAssistantWithApi({ openAIClient });
 
   await page.goto('/chat/assistants-management');
 
-  await page
-    .getByTestId(`assistant-tile-${assistantInput.name}`)
-    .getByTestId('overflow-menu')
-    .click();
-
-  // click overflow menu delete btn
-  await page.getByRole('menuitem', { name: 'Delete' }).click();
-
-  // click modal actual delete btn
-  await page.getByRole('button', { name: 'Delete' }).click();
+  await deleteAssistantCard(assistant.name!, page);
 
-  await expect(page.getByText(`${assistantInput.name} Assistant deleted.`)).toBeVisible();
+  await expect(page.getByText(`${assistant.name} Assistant deleted.`)).toBeVisible();
 });
diff --git a/src/leapfrogai_ui/tests/chat.test.ts b/src/leapfrogai_ui/tests/chat.test.ts
index 478fb27fa..3b1984e65 100644
--- a/src/leapfrogai_ui/tests/chat.test.ts
+++ b/src/leapfrogai_ui/tests/chat.test.ts
@@ -65,9 +65,8 @@ function countWords(str: string) {
 test('it cancels responses', async ({ page, openAIClient }) => {
   await loadChatPage(page);
   const messages = page.getByTestId('message');
-  await sendMessage(page, newMessage1);
+  await sendMessage(page, LONG_RESPONSE_PROMPT);
   await expect(messages).toHaveCount(2); // ensure new response is being received
-  await page.waitForTimeout(25); // let it partially complete
   await page.getByTestId('cancel message').click();
   await page.waitForTimeout(200); // wait to ensure new question was not sent
   await expect(messages).toHaveCount(2);
@@ -87,7 +86,7 @@ test('it cancels responses when clicking enter instead of pause button and does
   const messages = page.getByTestId('message');
   await sendMessage(page, LONG_RESPONSE_PROMPT); // response must take a long time for this test to work
   await expect(messages).toHaveCount(2); // ensure new response is being received
-  await page.getByLabel('message input').fill('new question');
+  await page.getByTestId('chat-input').fill('new question');
   await page.waitForTimeout(25); // let it partially complete
   await page.keyboard.down('Enter'); // pause response
   await page.waitForTimeout(200); // wait to ensure new question was not sent
@@ -119,8 +118,8 @@ test('it can switch between normal chat and chat with an assistant', async ({
   await expect(messages).toHaveCount(2);
 
   // Select assistant
-  await expect(page.getByTestId('assistant-dropdown')).not.toBeDisabled();
-  const assistantDropdown = page.getByTestId('assistant-dropdown');
+  await expect(page.getByTestId('assistants-select-btn')).not.toBeDisabled();
+  const assistantDropdown = page.getByTestId('assistants-select-btn');
   await assistantDropdown.click();
   await page.getByText(assistant!.name!).click();
 
@@ -135,7 +134,7 @@ test('it can switch between normal chat and chat with an assistant', async ({
   await expect(page.getByTestId('assistant-icon')).toHaveCount(1);
 
   // Test selected assistant has a checkmark and clicking it again de-selects the assistant
-  await expect(page.getByTestId('assistant-dropdown')).not.toBeDisabled();
+  await expect(page.getByTestId('assistants-select-btn')).not.toBeDisabled();
   await assistantDropdown.click();
   await page.getByTestId('checked').click();
 
@@ -160,6 +159,6 @@ test('it formats code in a code block and can copy the code', async ({ page }) =
   await expect(page.getByTestId('copy-code-btn')).not.toBeVisible();
   await sendMessage(page, 'create a javascript function that prints hello world');
   await waitForResponseToComplete(page);
-  const copyBtn = page.getByTestId('copy-code-btn');
-  await expect(copyBtn).toBeVisible();
+  const copyBtns = await page.getByTestId('copy-code-btn').all();
+  expect(copyBtns.length).toBeGreaterThan(0);
 });
diff --git a/src/leapfrogai_ui/tests/edit_message.test.ts b/src/leapfrogai_ui/tests/edit_message.test.ts
index a2023474b..36f0c413f 100644
--- a/src/leapfrogai_ui/tests/edit_message.test.ts
+++ b/src/leapfrogai_ui/tests/edit_message.test.ts
@@ -23,7 +23,7 @@ test('editing a message', async ({ page, openAIClient }) => {
   await page.getByTestId('message').first().click();
   await expect(page.getByLabel('edit prompt').first()).not.toBeDisabled(); // wait for message to finish saving
   await page.getByLabel('edit prompt').first().click();
-  await page.getByLabel('edit message input').fill('edited message');
+  await page.getByTestId('edit-message-input').fill('edited message');
   await page.getByLabel('submit edited message').click();
   await delay(3000);
   const messages = page.getByTestId('message');
@@ -67,7 +67,7 @@ test('editing a message when an AI response is missing', async ({ page, openAICl
   await page.reload();
 
   const messages = page.getByTestId('message');
-  await expect(messages).toHaveCount(1, { timeout: 30000 });
+  await expect(messages).toHaveCount(1);
 
   // Send a second message that gets a successful response
   await sendMessage(page, newMessage2);
@@ -77,7 +77,7 @@ test('editing a message when an AI response is missing', async ({ page, openAICl
 
   await page.getByTestId('message').first().click();
   await page.getByLabel('edit prompt').first().click();
-  await page.getByLabel('edit message input').fill('edited message');
+  await page.getByTestId('edit-message-input').fill('edited message');
   await page.getByLabel('submit edited message').click();
   await delay(3000);
 
@@ -120,7 +120,7 @@ test('it can regenerate the last assistant response', async ({ page, openAIClien
   const messages = page.getByTestId('message');
   await expect(messages).toHaveCount(0);
 
-  const assistantDropdown = page.getByTestId('assistant-dropdown');
+  const assistantDropdown = page.getByTestId('assistants-select-btn');
   await assistantDropdown.click();
   await page.getByText(assistant!.name!).click();
 
@@ -144,7 +144,7 @@ test('editing an assistant message', async ({ page, openAIClient }) => {
   await loadChatPage(page);
 
   // Select assistant
-  const assistantDropdown = page.getByTestId('assistant-dropdown');
+  const assistantDropdown = page.getByTestId('assistants-select-btn');
   await assistantDropdown.click();
   await page.getByText(assistant!.name!).click();
 
@@ -158,7 +158,7 @@ test('editing an assistant message', async ({ page, openAIClient }) => {
   await page.getByTestId('message').first().click();
   await expect(page.getByLabel('edit prompt').first()).not.toBeDisabled(); // wait for message to finish saving
   await page.getByLabel('edit prompt').first().click();
-  await page.getByLabel('edit message input').fill('edited message');
+  await page.getByTestId('edit-message-input').fill('edited message');
   await page.getByLabel('submit edited message').click();
   await delay(3000);
   const messages = page.getByTestId('message');
diff --git a/src/leapfrogai_ui/tests/file-management.test.ts b/src/leapfrogai_ui/tests/file-management.test.ts
index cba53d711..e76b357d5 100644
--- a/src/leapfrogai_ui/tests/file-management.test.ts
+++ b/src/leapfrogai_ui/tests/file-management.test.ts
@@ -31,16 +31,16 @@ test('it can navigate to the last visited thread with breadcrumbs', async ({ pag
   const urlParts = new URL(page.url()).pathname.split('/');
   const threadId = urlParts[urlParts.length - 1];
 
-  await page.getByLabel('Settings').click();
+  await page.getByTestId('header-settings-btn').click();
   await page.getByText('File Management').click();
-  await page.getByRole('link', { name: 'Chat' }).click();
+  await page.getByTestId('breadcrumbs').getByRole('link', { name: 'Chat' }).click();
   await page.waitForURL(`/chat/${threadId}`);
 });
 
 test('it can navigate to the file management page', async ({ page }) => {
   await loadChatPage(page);
 
-  await page.getByLabel('Settings').click();
+  await page.getByTestId('header-settings-btn').click();
   await page.getByText('File Management').click();
 
   await expect(page).toHaveTitle('LeapfrogAI - File Management');
@@ -103,8 +103,8 @@ test('confirms any affected assistants then deletes multiple files', async ({
   await expect(page.getByText(`${filename2} imported successfully`)).toBeVisible();
   await expect(page.getByText(`${filename2} imported successfully`)).not.toBeVisible();
 
-  const row1 = await getTableRow(page, filename1);
-  const row2 = await getTableRow(page, filename2);
+  const row1 = await getTableRow(page, filename1, 'file-management-table');
+  const row2 = await getTableRow(page, filename2, 'file-management-table');
   expect(row1).not.toBeNull();
   expect(row2).not.toBeNull();
 
@@ -131,9 +131,8 @@ test('it cancels the delete confirmation modal', async ({ page, openAIClient })
   await expect(page.getByText(`${filename} imported successfully`)).toBeVisible();
   await expect(page.getByText(`${filename} imported successfully`)).not.toBeVisible(); // wait for upload to finish
 
-  const row = await getTableRow(page, filename);
-  expect(row).not.toBeNull();
-  await row!.getByRole('checkbox').check({ force: true });
+  const row = await getTableRow(page, filename, 'file-management-table');
+  await row.getByRole('checkbox').check();
 
   await initiateDeletion(page, filename);
 
@@ -170,9 +169,8 @@ test('shows an error toast when there is an error deleting a file', async ({
   await expect(page.getByText(`${filename} imported successfully`)).toBeVisible();
   await expect(page.getByText(`${filename} imported successfully`)).not.toBeVisible(); // wait for upload to finish
 
-  const row = await getTableRow(page, filename);
-  expect(row).not.toBeNull();
-  await row!.getByRole('checkbox').check({ force: true });
+  const row = await getTableRow(page, filename, 'file-management-table');
+  await row.getByRole('checkbox').check();
 
   await initiateDeletion(page, filename);
   await confirmDeletion(page);
diff --git a/src/leapfrogai_ui/tests/global.setup.ts b/src/leapfrogai_ui/tests/global.setup.ts
index 6d8a007fe..88993dc17 100644
--- a/src/leapfrogai_ui/tests/global.setup.ts
+++ b/src/leapfrogai_ui/tests/global.setup.ts
@@ -1,26 +1,36 @@
 import { test as setup } from './fixtures';
 import * as OTPAuth from 'otpauth';
+import { delay } from 'msw';
 
 const authFile = 'playwright/.auth/user.json';
 
 setup('authenticate', async ({ page }) => {
   await page.goto('/'); // go to the home page
+  await delay(2000); // allow page to fully hydrate
   if (process.env.PUBLIC_DISABLE_KEYCLOAK === 'true') {
     // when running in Github CI, create a new account because we don't have seed migrations
+    const emailField = page.getByTestId('email-input');
+    const passwordField = page.getByTestId('password-input');
     if (process.env.TEST_ENV === 'CI') {
-      await page.getByPlaceholder('Your email address').click();
-      await page.getByPlaceholder('Your email address').fill('ci_user@test.com');
-      await page.getByPlaceholder('Your password').click();
-      await page.getByPlaceholder('Your password').fill('password123');
-      await page.getByRole('button', { name: 'Sign Up' }).click();
+      await emailField.click();
+      await emailField.fill('ci_user@test.com');
+      await passwordField.click();
+      await passwordField.fill('password123');
+
+      const emailText = await emailField.innerText();
+      const passwordText = await passwordField.innerText();
+      if (emailText !== 'ci_user@test.com') await emailField.fill('ci_user@test.com');
+      if (passwordText !== 'password123') await passwordField.fill('password123');
+
+      await page.getByTestId('submit-btn').click();
     } else {
       // uses local supabase test users, logs in directly with Supabase, no Keycloak
-      await page.getByText('Already have an account? Sign In').click();
-      await page.getByPlaceholder('Your email address').click();
-      await page.getByPlaceholder('Your email address').fill('user1@test.com');
-      await page.getByPlaceholder('Your password').click();
-      await page.getByPlaceholder('Your password').fill('password123');
-      await page.getByRole('button', { name: 'Sign In' }).click();
+      await page.getByTestId('toggle-submit-btn').click();
+      await emailField.click();
+      await emailField.fill('user1@test.com');
+      await passwordField.click();
+      await passwordField.fill('password123');
+      await page.getByTestId('submit-btn').click();
     }
   } else {
     // With Keycloak
diff --git a/src/leapfrogai_ui/tests/header.test.ts b/src/leapfrogai_ui/tests/header.test.ts
index ba3fdb543..062326cdc 100644
--- a/src/leapfrogai_ui/tests/header.test.ts
+++ b/src/leapfrogai_ui/tests/header.test.ts
@@ -1,17 +1,36 @@
 import { expect, test } from './fixtures';
 
-// Note - testing that the sidenav is hidden when on small screens and not expanded by the menu button was deemed not possible with
-// playwright because Carbon doesn't actually hide it in a way that playwright can detect, https://playwright.dev/docs/actionability#visible
-// Carbon uses transform: translateX(-16rem) to move it off the screen, but Playwright still sees it
-
-test('it only shows the hamburger menu on small screens', async ({ page }) => {
-  // Unable to apply test id to just the hamburger menu because the element is not exposed by carbon components svelte
-  // Instead, we test that an addional button is added to the banner when the screen is small
-  // If more buttons are added to the banner, this test will need to be updated
+test('it only shows the open/close sidebar button on small screens', async ({ page }) => {
   await page.setViewportSize({ width: 600, height: 600 });
   await page.goto('/chat');
-  await expect(page.getByRole('banner').getByRole('button')).toHaveCount(3);
+  await expect(page.getByTestId('open-sidebar-btn')).toBeVisible();
 
   await page.setViewportSize({ width: 1800, height: 800 });
-  await expect(page.getByRole('banner').getByRole('button')).toHaveCount(2);
+  await expect(page.getByTestId('open-sidebar-btn')).not.toBeVisible();
+  await expect(page.getByTestId('close-sidebar-btn')).not.toBeVisible();
+});
+
+test('it opens the sidebar when the open/close sidebar button is clicked', async ({ page }) => {
+  await page.setViewportSize({ width: 600, height: 600 });
+  await page.goto('/chat');
+
+  await page.getByTestId('open-sidebar-btn').click();
+  await expect(page.getByTestId('sidebar')).toBeVisible();
+  await page.getByTestId('close-sidebar-btn').click();
+  await expect(page.getByTestId('sidebar')).not.toBeVisible();
+  await page.getByTestId('open-sidebar-btn').click();
+  await expect(page.getByTestId('sidebar')).toBeVisible();
+});
+
+test('only shows the menu open/close btn on the main chat page', async ({ page }) => {
+  await page.setViewportSize({ width: 600, height: 600 });
+  await page.goto('/chat');
+
+  await page.getByTestId('open-sidebar-btn').click();
+  await expect(page.getByTestId('sidebar')).toBeVisible();
+
+  await page.goto('/chat/api-keys');
+
+  await expect(page.getByTestId('open-sidebar-btn')).not.toBeVisible();
+  await expect(page.getByTestId('close-sidebar-btn')).not.toBeVisible();
 });
diff --git a/src/leapfrogai_ui/tests/helpers/apiHelpers.ts b/src/leapfrogai_ui/tests/helpers/apiHelpers.ts
index 3ae672d21..db67856c4 100644
--- a/src/leapfrogai_ui/tests/helpers/apiHelpers.ts
+++ b/src/leapfrogai_ui/tests/helpers/apiHelpers.ts
@@ -2,29 +2,23 @@ import { getToken } from '../fixtures';
 
 export const deleteAllTestAPIKeys = async () => {
   const token = getToken();
-  const res = await fetch(
-    `${process.env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/list-api-keys`,
-    {
-      headers: {
-        Authorization: `Bearer ${token}`
-      }
+  const res = await fetch(`${process.env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/api-keys`, {
+    headers: {
+      Authorization: `Bearer ${token}`
     }
-  );
+  });
   const keys = await res.json();
   const promises: Promise<Response>[] = [];
   for (const key of keys) {
     if (key.name.includes('test')) {
       promises.push(
-        fetch(
-          `${process.env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/revoke-api-key/${key.id}`,
-          {
-            method: 'DELETE',
-            headers: {
-              Authorization: `Bearer ${token}`,
-              'Content-Type': 'application/json'
-            }
+        fetch(`${process.env.LEAPFROGAI_API_BASE_URL}/leapfrogai/v1/auth/api-keys/${key.id}`, {
+          method: 'DELETE',
+          headers: {
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/json'
           }
-        )
+        })
       );
     }
   }
diff --git a/src/leapfrogai_ui/tests/helpers/assistantHelpers.ts b/src/leapfrogai_ui/tests/helpers/assistantHelpers.ts
index 87d759b87..411805bd9 100644
--- a/src/leapfrogai_ui/tests/helpers/assistantHelpers.ts
+++ b/src/leapfrogai_ui/tests/helpers/assistantHelpers.ts
@@ -4,14 +4,27 @@ import { getFakeAssistantInput } from '../../testUtils/fakeData';
 import type { AssistantCreateParams } from 'openai/resources/beta/assistants';
 import type { AssistantInput, LFAssistant } from '../../src/lib/types/assistants';
 import { supabase } from './helpers';
+import { faker } from '@faker-js/faker';
 
 // Note - this will not apply the temperature slider value provided, it only clicks on the 0.5 increment
 export const createAssistant = async (assistantInput: AssistantInput, page: Page) => {
   await page.goto('/chat/assistants-management/new');
   await page.getByLabel('name').fill(assistantInput.name);
-  await page.getByLabel('description').fill(assistantInput.description);
+  await page.getByLabel('tagline').fill(assistantInput.description);
   await page.getByPlaceholder("You'll act as...").fill(assistantInput.instructions);
-  await page.locator('.bx--slider__track').click();
+
+  const slider = page.getByRole('slider');
+  const sliderButton = slider.getByRole('button');
+  const box = await sliderButton.boundingBox();
+  if (box) {
+    const startX = box.x + box.width / 2;
+    const startY = box.y + box.height / 2;
+    const endX = startX + 100; // adjust as needed
+    await page.mouse.move(startX, startY);
+    await page.mouse.down();
+    await page.mouse.move(endX, startY, { steps: 10 }); // Drag to the new position
+    await page.mouse.up();
+  }
 
   // Wait for modal save button to disappear if avatar modal was open
   const saveButtons = page.getByRole('button', { name: 'Save' });
@@ -31,20 +44,19 @@ export const deleteAllAssistants = async (openAIClient: OpenAI) => {
 };
 export const attachAvatarImage = async (page: Page, imageName: string) => {
   const fileChooserPromise = page.waitForEvent('filechooser');
-  await page.locator('label').filter({ hasText: 'Upload from computer' }).click();
+  await page.getByText('Upload from computer').click();
   const fileChooser = await fileChooserPromise;
   await fileChooser.setFiles(`./tests/fixtures/${imageName}.png`);
 };
 export const uploadAvatar = async (page: Page, imageName = 'Doug') => {
-  await page.getByText('Upload', { exact: true }).click();
+  await page.getByTestId('upload-radio-btn').check();
 
   await attachAvatarImage(page, imageName);
 
-  const imageUploadContainer = page.getByTestId('image-upload-avatar');
-  const hasImage = await imageUploadContainer.evaluate((node) => {
-    return window.getComputedStyle(node).backgroundImage;
-  });
-  expect(hasImage).toBeDefined();
+  const imageUploadContainerSource = await page
+    .getByTestId('image-upload-avatar')
+    .getAttribute('src');
+  expect(imageUploadContainerSource).toBeDefined();
 };
 
 type CreateAssistantWithApiParams = {
@@ -80,14 +92,86 @@ export const createAssistantWithApi = async (params: CreateAssistantWithApiParam
 export const deleteAssistantWithApi = async (id: string, openAIClient: OpenAI) => {
   await openAIClient.beta.assistants.del(id);
 };
-export const deleteAssistant = async (name: string, page: Page) => {
-  await page.getByTestId(`assistant-tile-${name}`).getByTestId('overflow-menu').click();
-  // click overflow menu delete btn
-  await page.getByRole('menuitem', { name: 'Delete' }).click();
-  // click modal actual delete btn
-  await page.getByRole('button', { name: 'Delete' }).click();
+
+export const editAssistantCard = async (name: string, page: Page) => {
+  const assistantCard = page.getByTestId(`assistant-card-${name}`);
+  await assistantCard.getByTestId('assistant-edit-icon').click();
+  // click edit menu delete btn
+  await assistantCard
+    .getByTestId('assistant-card-dropdown')
+    .getByRole('button', { name: /edit/i })
+    .click();
+};
+
+export const deleteAssistantCard = async (name: string, page: Page) => {
+  const assistantCard = page.getByTestId(`assistant-card-${name}`);
+  await assistantCard.getByTestId('assistant-edit-icon').click();
+  // click edit menu delete btn
+  await assistantCard.getByRole('button', { name: /delete/i }).click();
+  // click modal confirmation delete btn
+  await page
+    .getByTestId('delete-assistant-modal')
+    .getByRole('button', { name: /delete/i })
+    .click();
 };
 
 export const deleteAssistantAvatars = async () => {
   await supabase.storage.emptyBucket('assistant_avatars');
 };
+
+export const savePictogram = async (pictogramName: string, page: Page) => {
+  await page.getByTestId('mini-avatar-container').click();
+  await page.getByTestId('pictogram-radio-btn').check();
+  await page.getByPlaceholder('Search').click();
+  await page.getByPlaceholder('Search').fill(pictogramName);
+  await page.getByTestId(`pictogram-${pictogramName}`).click();
+  await page.getByRole('dialog').getByRole('button', { name: 'Save' }).click();
+};
+
+export const saveAvatarImage = async (page: Page) => {
+  await page.getByTestId('mini-avatar-container').click();
+  await uploadAvatar(page);
+  await page.getByRole('dialog').getByRole('button', { name: 'Save' }).click();
+};
+
+export const getRandomPictogramName = () =>
+  faker.helpers.arrayElement([
+    'Agriculture',
+    'Airplane',
+    'AmsterdamWindmill',
+    'Analytics',
+    'Analyze',
+    'AnalyzeCode',
+    'AnalyzesData',
+    'AnalyzingContainers',
+    'AppDeveloper',
+    'AppModernization',
+    'ApplicationIntegration',
+    'ApplicationPlatform',
+    'ApplicationSecurity',
+    'ArtTools_01',
+    'AsiaAustralia',
+    'AudioData',
+    'AuditTrail',
+    'AugmentedReality',
+    'Automobile'
+  ]);
+
+export const fillOutRequiredAssistantFields = async (
+  assistantInput: AssistantInput,
+  page: Page
+) => {
+  await page.getByLabel('name').fill(assistantInput.name);
+  await page.getByLabel('tagline').fill(assistantInput.description);
+  await page.getByPlaceholder("You'll act as...").fill(assistantInput.instructions);
+};
+
+export const saveAssistant = async (assistantName: string, page: Page) => {
+  const saveButtons = page.getByRole('button', { name: 'Save' });
+  await expect(saveButtons).toHaveCount(1);
+  await saveButtons.click();
+
+  await expect(page.getByText('Assistant Created')).toBeVisible();
+  await page.waitForURL('/chat/assistants-management');
+  await expect(page.getByTestId(`assistant-card-${assistantName}`)).toBeVisible();
+};
diff --git a/src/leapfrogai_ui/tests/helpers/fileHelpers.ts b/src/leapfrogai_ui/tests/helpers/fileHelpers.ts
index 2d392ac27..14df9ea01 100644
--- a/src/leapfrogai_ui/tests/helpers/fileHelpers.ts
+++ b/src/leapfrogai_ui/tests/helpers/fileHelpers.ts
@@ -191,10 +191,10 @@ export const testFileUpload = async (filename: string, page: Page, openAIClient:
   await loadFileManagementPage(page);
   await uploadFile(page, filename);
 
-  const row = await getTableRow(page, filename);
+  const row = await getTableRow(page, filename, 'file-management-table');
   expect(row).not.toBeNull();
 
-  const uploadingFileIcon = row!.getByTestId('uploading-file-icon');
+  const uploadingFileIcon = row!.getByTestId('uploading-file-spinner');
   const fileUploadedIcon = row!.getByTestId('file-uploaded-icon');
 
   // test loading icon shows then disappears
diff --git a/src/leapfrogai_ui/tests/helpers/helpers.ts b/src/leapfrogai_ui/tests/helpers/helpers.ts
index cfa0e6d90..cbed3fcf8 100644
--- a/src/leapfrogai_ui/tests/helpers/helpers.ts
+++ b/src/leapfrogai_ui/tests/helpers/helpers.ts
@@ -35,7 +35,10 @@ export const loadApiKeyPage = async (page: Page) => {
   await page.waitForURL('/chat/api-keys');
   await expect(page).toHaveTitle('LeapfrogAI - API Keys');
 };
-export const getTableRow = async (page: Page, textToSearchWith: string) => {
+export const getTableRow = async (page: Page, textToSearchWith: string, tableTestId = '') => {
+  if (tableTestId) {
+    await expect(page.getByTestId(tableTestId).getByText(textToSearchWith)).toBeVisible();
+  }
   const rows = page.locator('table tr');
   let targetRow;
   for (let i = 0; i < (await rows.count()); i++) {
@@ -46,5 +49,8 @@ export const getTableRow = async (page: Page, textToSearchWith: string) => {
       break;
     }
   }
+  if (!targetRow) {
+    throw new Error('error getting row');
+  }
   return targetRow;
 };
diff --git a/src/leapfrogai_ui/tests/helpers/threadHelpers.ts b/src/leapfrogai_ui/tests/helpers/threadHelpers.ts
index 7ee9e3635..5b5447fa2 100644
--- a/src/leapfrogai_ui/tests/helpers/threadHelpers.ts
+++ b/src/leapfrogai_ui/tests/helpers/threadHelpers.ts
@@ -1,18 +1,19 @@
 import { expect, type Page } from '@playwright/test';
 import OpenAI from 'openai';
 import type { Profile } from '$lib/types/profile';
-import { LONG_RESPONSE_PROMPT, supabase, SHORT_RESPONSE_PROMPT } from './helpers';
+import { LONG_RESPONSE_PROMPT, SHORT_RESPONSE_PROMPT, supabase } from './helpers';
 import type { LFThread } from '$lib/types/threads';
 
 export const clickToDeleteThread = async (page: Page, label: string) => {
-  await page.getByTestId(`overflow-menu-${label}`).click();
-  await page.getByTestId(`overflow-menu-delete-${label}`).click();
-
-  await page.locator('button:text("Delete")').click();
-  await expect(page.getByTestId(`overflow-menu-${label}`)).toHaveCount(0);
+  await page.getByTestId(`thread-menu-btn-${label}`).click();
+  await page.getByRole('button', { name: /delete/i }).click();
+  const deleteBtns = await page.getByRole('button', { name: /delete/i }).all();
+  await deleteBtns[1].click(); // confirm delete in modal
+  await expect(page.getByTestId(`thread-menu-btn-${label}`)).toHaveCount(0);
 };
+
 export const sendMessage = async (page: Page, message = 'Who are Defense Unicorns?') => {
-  await page.getByLabel('message input').fill(message);
+  await page.getByTestId('chat-input').fill(message);
   await page.click('button[type="submit"]');
 };
 export const deleteActiveThread = async (page: Page, openAIClient: OpenAI) => {
diff --git a/src/leapfrogai_ui/tests/import_export.test.ts b/src/leapfrogai_ui/tests/import_export.test.ts
index 1d03b4eab..8f3883df6 100644
--- a/src/leapfrogai_ui/tests/import_export.test.ts
+++ b/src/leapfrogai_ui/tests/import_export.test.ts
@@ -14,7 +14,9 @@ test('it can import and exports threads', async ({ page }) => {
     mimeType: 'application/JSON',
     buffer: Buffer.from(threadStr)
   });
+  await expect(page.getByText('Importing...')).toBeVisible();
   await expect(page.getByText(thread.metadata.label)).toHaveCount(1);
+  await expect(page.getByText('Importing...')).not.toBeVisible();
 
   const downloadPromise = page.waitForEvent('download');
   await page.getByText('Export chat history').click();
@@ -40,3 +42,20 @@ test('it can import and exports threads', async ({ page }) => {
   // We can't test full equality because the ids and insertedAt dates will be different
   expect(importedThreads).toBeDefined();
 });
+
+test('it displays an error toast and removes the Importing spinner on error when the threads are improperly formatted', async ({
+  page
+}) => {
+  const threadStr = JSON.stringify([{ bad: 'data' }]);
+
+  await loadChatPage(page);
+
+  await page.getByTestId('import-chat-history-input').setInputFiles({
+    name: 'upload.json',
+    mimeType: 'application/JSON',
+    buffer: Buffer.from(threadStr)
+  });
+
+  await expect(page.getByText('Importing...')).not.toBeVisible();
+  await expect(page.getByText('Threads are incorrectly formatted.')).toBeVisible();
+});
diff --git a/src/leapfrogai_ui/tests/logout.test.ts b/src/leapfrogai_ui/tests/logout.test.ts
index b53dfe99b..57bbfe8ad 100644
--- a/src/leapfrogai_ui/tests/logout.test.ts
+++ b/src/leapfrogai_ui/tests/logout.test.ts
@@ -3,17 +3,20 @@ import { expect, test } from './fixtures';
 test('it can log out', async ({ page }) => {
   await page.goto('/chat');
   await expect(page).toHaveTitle('LeapfrogAI - Chat');
-  await page.getByLabel('User').click();
-  await page.getByLabel('Log Out').click();
+  await page.getByTestId('header-profile-btn').click();
+  await page
+    .getByTestId('profile-dropdown')
+    .getByRole('button', { name: /log out/i })
+    .click();
 
   await page.waitForURL('/');
 
   if (process.env.PUBLIC_DISABLE_KEYCLOAK === 'true') {
     await expect(page.getByText('Sign In')).toBeVisible();
   } else {
-    const loginBtn = page.getByText('Log In');
+    const loginBtn = page.getByRole('button', { name: /Log In with UDS SSO/i });
     await expect(loginBtn).toBeVisible();
     await loginBtn.click();
-    await page.waitForURL(`${process.env.SUPABASE_AUTH_EXTERNAL_KEYCLOAK_URL!}/**/*`);
+    await page.waitForURL(`**/*/realms/uds/**/*`); // ensure full logout of keycloak (not just supabase)
   }
 });
diff --git a/src/leapfrogai_ui/tests/rag.test.ts b/src/leapfrogai_ui/tests/rag.test.ts
index fa79d8fe1..1c904808d 100644
--- a/src/leapfrogai_ui/tests/rag.test.ts
+++ b/src/leapfrogai_ui/tests/rag.test.ts
@@ -96,7 +96,10 @@ test('it can edit an assistant and remove a file', async ({ page, openAIClient }
   await page.getByRole('button', { name: 'Save' }).click();
   await expect(page.getByText('Assistant Updated')).toBeVisible();
 
-  await page.getByTestId(`assistant-tile-${assistant.name}`).getByTestId('overflow-menu').click();
+  await page
+    .getByTestId(`assistant-card-${assistant.name}`)
+    .getByTestId('assistant-card-dropdown')
+    .click();
   await page.getByRole('menuitem', { name: 'Edit' }).click();
   await page.waitForURL('/chat/assistants-management/edit/**/*');
 
@@ -233,7 +236,7 @@ test('can download a file with the citation', async ({ page, openAIClient }) =>
   await loadChatPage(page);
   const messages = page.getByTestId('message');
 
-  const assistantDropdown = page.getByTestId('assistant-dropdown');
+  const assistantDropdown = page.getByTestId('assistants-select-btn');
   await assistantDropdown.click();
   await page.getByText(assistant.name!).click();
   await sendMessage(page, newMessage);
diff --git a/src/leapfrogai_ui/tests/sidebar.test.ts b/src/leapfrogai_ui/tests/sidebar.test.ts
index 1fd742d04..3008497cf 100644
--- a/src/leapfrogai_ui/tests/sidebar.test.ts
+++ b/src/leapfrogai_ui/tests/sidebar.test.ts
@@ -14,9 +14,11 @@ const newMessage3 = getSimpleMathQuestion();
 test('it can delete threads', async ({ page }) => {
   await loadChatPage(page);
 
-  const threadLocator = page.getByText(newMessage1);
+  const threadLocator = page.getByRole('button', { name: newMessage1 });
 
   await sendMessage(page, newMessage1);
+  await waitForResponseToComplete(page);
+
   await clickToDeleteThread(page, newMessage1);
   await expect(threadLocator).toHaveCount(0);
 });
@@ -30,20 +32,18 @@ test('can edit thread labels', async ({ page, openAIClient }) => {
   await sendMessage(page, newMessage1);
   await expect(messages).toHaveCount(2);
 
-  const overflowMenu = page.getByTestId(`overflow-menu-${newMessage1}`);
-  await overflowMenu.click();
+  const threadMenuBtn = page.getByTestId(`thread-menu-btn-${newMessage1}`);
+  await threadMenuBtn.click();
 
-  await overflowMenu.getByText('Edit').click();
+  await page.getByTestId('sidebar-popover').getByRole('button', { name: /edit/i }).click();
 
-  await page.getByLabel('edit thread').fill(newLabel);
+  await page.getByTestId('edit-thread-input').fill(newLabel);
 
   await page.keyboard.down('Enter');
 
   await page.reload();
 
-  const threadId = page.url().split('/chat/')[1];
-
-  expect(page.getByTestId(`thread-label-${threadId}`).getByText(newLabel));
+  expect(page.getByTestId(`thread-menu-btn-${newLabel}`).getByText(newLabel));
 
   await deleteActiveThread(page, openAIClient);
 });
@@ -65,7 +65,7 @@ test('Can switch threads', async ({ page, openAIClient }) => {
   await waitForResponseToComplete(page);
   await expect(messages).toHaveCount(2);
 
-  await page.getByText(newMessage1).click(); // switch threads by clicking thread label
+  await page.getByRole('button', { name: newMessage1 }).click(); // switch threads by clicking thread label
 
   await expect(messages).toHaveCount(4);
 
diff --git a/src/leapfrogai_ui/vite.config.ts b/src/leapfrogai_ui/vite.config.ts
index 6bd935758..cdcfc31e0 100644
--- a/src/leapfrogai_ui/vite.config.ts
+++ b/src/leapfrogai_ui/vite.config.ts
@@ -1,23 +1,14 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
-import { optimizeCss } from 'carbon-preprocess-svelte';
 
 import { svelteTesting } from '@testing-library/svelte/vite';
 
 export default defineConfig(() => ({
-  plugins: [sveltekit(), svelteTesting(), optimizeCss()],
+  plugins: [sveltekit(), svelteTesting()],
   test: {
     environment: 'jsdom',
     setupFiles: ['./vitest-setup.ts'],
     include: ['src/**/*.{test,spec}.{js,ts}'],
     globals: true
-  },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData:
-          '@use "@carbon/themes/scss/themes" as *; @use "@carbon/themes" with ($theme: $g90); @use "@carbon/layout"; @use "@carbon/type"; @use "@carbon/colors" as *;'
-      }
-    }
   }
 }));
diff --git a/src/leapfrogai_ui/vitest-setup.ts b/src/leapfrogai_ui/vitest-setup.ts
index 76b72b75f..9423a5df3 100644
--- a/src/leapfrogai_ui/vitest-setup.ts
+++ b/src/leapfrogai_ui/vitest-setup.ts
@@ -5,14 +5,13 @@ import { afterAll, afterEach, beforeAll, vi } from 'vitest';
 import * as environment from '$app/environment';
 import * as navigation from '$app/navigation';
 import * as stores from '$app/stores';
-import { fakeAssistants, fakeThreads } from '$testUtils/fakeData';
 import OpenAIMock from '$lib/mocks/openai';
 import dotenv from 'dotenv';
 
 dotenv.config();
 
 //Calls to vi.mock are hoisted to the top of the file, so you don't have access to variables declared in the global file scope unless they are defined with vi.hoisted before the call.
-const { getStores } = await vi.hoisted(() => import('$lib/mocks/svelte'));
+const { mockSvelteStores } = await vi.hoisted(() => import('$lib/mocks/svelte'));
 
 // Fixes error: node.scrollIntoView is not a function
 window.HTMLElement.prototype.scrollIntoView = function () {};
@@ -57,39 +56,19 @@ vi.mock('$app/navigation', (): typeof navigation => ({
 }));
 
 // Mock SvelteKit runtime module $app/stores
-vi.mock('$app/stores', (): typeof stores => {
-  const page: typeof stores.page = {
-    subscribe(fn) {
-      return getStores({
-        url: `http://localhost/chat/${fakeThreads[0].id}`,
-        params: { thread_id: fakeThreads[0].id },
-        data: {
-          threads: fakeThreads,
-          assistants: fakeAssistants,
-          assistant: undefined,
-          files: []
-        }
-      }).page.subscribe(fn);
+vi.mock('$app/stores', async (): Promise<typeof stores> => {
+  const { fakeAssistants, fakeThreads } = await import('$testUtils/fakeData');
+  return await mockSvelteStores({
+    url: `http://localhost/chat/${fakeThreads[0].id}`,
+    params: { thread_id: fakeThreads[0].id },
+    data: {
+      threads: fakeThreads,
+      assistants: fakeAssistants,
+      assistant: undefined,
+      files: [],
+      keys: []
     }
-  };
-  const navigating: typeof stores.navigating = {
-    subscribe(fn) {
-      return getStores().navigating.subscribe(fn);
-    }
-  };
-  const updated: typeof stores.updated = {
-    subscribe(fn) {
-      return getStores().updated.subscribe(fn);
-    },
-    check: () => Promise.resolve(false)
-  };
-
-  return {
-    getStores,
-    navigating,
-    page,
-    updated
-  };
+  });
 });
 
 export const restHandlers = [];
diff --git a/tests/data/russian.mp3 b/tests/data/russian.mp3
new file mode 100644
index 000000000..4785b213e
Binary files /dev/null and b/tests/data/russian.mp3 differ
diff --git a/tests/e2e/README.md b/tests/e2e/README.md
index 372b89f42..b566ffc04 100644
--- a/tests/e2e/README.md
+++ b/tests/e2e/README.md
@@ -30,7 +30,7 @@ make build-llama-cpp-python
 uds zarf package deploy zarf-package-llama-cpp-python-*.tar.zst
 
 # Install the python dependencies
-python -m pip install "."
+python -m pip install ".[dev]"
 
 # Run the tests!
 # NOTE: Each model backend has its own e2e test files
diff --git a/tests/e2e/__init__.py b/tests/e2e/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/tests/e2e/test_whisper.py b/tests/e2e/test_whisper.py
index b32c7d041..e41cefc23 100644
--- a/tests/e2e/test_whisper.py
+++ b/tests/e2e/test_whisper.py
@@ -52,8 +52,8 @@ def test_transcriptions():
         timestamp_granularities=["word", "segment"],
     )
 
-    assert len(transcription.text) > 0  # The transcription should not be empty
-    assert len(transcription.text) < 500  # The transcription should not be too long
+    assert len(transcription.text) > 0, "The transcription should not be empty"
+    assert len(transcription.text) < 500, "The transcription should not be too long"
 
 
 def test_translations():
@@ -65,8 +65,8 @@ def test_translations():
         temperature=0.3,
     )
 
-    assert len(translation.text) > 0  # The translation should not be empty
-    assert len(translation.text) < 500  # The translation should not be too long
+    assert len(translation.text) > 0, "The translation should not be empty"
+    assert len(translation.text) < 500, "The translation should not be too long"
 
     def is_english_or_punctuation(c):
         if c in string.punctuation or c.isspace():
@@ -78,4 +78,4 @@ def is_english_or_punctuation(c):
 
     english_chars = [is_english_or_punctuation(c) for c in translation.text]
 
-    assert all(english_chars)  # Check that only English characters are returned
+    assert all(english_chars), "Non-English characters have been returned"
diff --git a/tests/integration/api/conformance_test.py b/tests/integration/api/conformance_test.py
new file mode 100644
index 000000000..681f1591f
--- /dev/null
+++ b/tests/integration/api/conformance_test.py
@@ -0,0 +1,156 @@
+"""Conformance test the LeapfrogAI API against the OpenAI spec."""
+
+import os
+from pathlib import Path
+from openai import OpenAI
+from openai.types.chat import ChatCompletion, ChatCompletionChunk
+from openai.types import FileObject, FileDeleted
+from openai.types.beta import VectorStore, VectorStoreDeleted
+from openai.types.beta.vector_stores import VectorStoreFile
+import pytest
+
+client = OpenAI(
+    base_url=os.getenv("LEAPFROGAI_API_URL"), api_key=os.getenv("LEAPFROGAI_API_KEY")
+)
+
+TEST_FILE_PATH = Path(os.path.dirname(__file__) + "/../../data/test.txt")
+
+CHAT_PARAMS = [
+    (
+        "vllm",
+        [
+            {"role": "system", "content": "You are a helpful assistant."},
+            {"role": "user", "content": "Hello, how are you?"},
+        ],
+    ),
+    (
+        "llama-cpp-python",
+        [
+            {"role": "system", "content": "You are a helpful assistant."},
+            {"role": "user", "content": "Hello, how are you?"},
+        ],
+    ),
+]
+
+
+@pytest.mark.parametrize("model,messages", CHAT_PARAMS)
+def test_chat_completion(model, messages):
+    response = client.chat.completions.create(
+        model=model,
+        messages=messages,
+    )
+    assert isinstance(response, ChatCompletion)
+    assert response.choices[0].message.role == "assistant"
+    assert len(response.choices[0].message.content) > 0
+
+
+@pytest.mark.parametrize("model,messages", CHAT_PARAMS)
+def test_chat_completion_streaming(model, messages):
+    """
+    Test the chat completion endpoint with streaming.
+
+    This function verifies that the chat completion API:
+    1. Returns a stream of ChatCompletionChunk objects
+    2. Each streamed response contains a delta with content
+    """
+    stream = client.chat.completions.create(model=model, messages=messages, stream=True)
+    accumulated_content = ""
+    for chunk in stream:
+        assert isinstance(chunk, ChatCompletionChunk)
+        if chunk.choices[0].delta.content is not None:
+            accumulated_content += chunk.choices[0].delta.content
+    assert len(accumulated_content) > 0
+
+
+def test_files():
+    """
+    Test file operations including create, retrieve, list, and delete.
+
+    This function verifies that the file API can:
+    1. Create a new file and return a FileObject
+    2. Retrieve a file by ID
+    3. List files and include the created file
+    4. Delete a file and confirm the deletion
+    """
+    # Create file
+    create_file_response = client.files.create(
+        file=TEST_FILE_PATH,
+        purpose="assistants",
+    )
+    assert isinstance(create_file_response, FileObject)
+    assert create_file_response.id is not None
+
+    # Retrieve file
+    get_file_response = client.files.retrieve(file_id=create_file_response.id)
+    assert isinstance(get_file_response, FileObject)
+    assert get_file_response.purpose == "assistants"
+
+    # List files
+    list_files_response = client.files.list()
+    assert any(file.id == create_file_response.id for file in list_files_response.data)
+
+    # Delete file
+    delete_file_response = client.files.delete(file_id=create_file_response.id)
+    assert isinstance(delete_file_response, FileDeleted)
+    assert delete_file_response.deleted is True
+
+
+def test_vector_store():
+    """
+    Test vector store operations including create, add file, list, and delete.
+
+    This function verifies that the vector store API can:
+    1. Create a new vector store
+    2. Create a file and add it to the vector store
+    3. List vector stores and files within a vector store
+    4. Delete the vector store and confirm the deletion
+    """
+    # Create vector store
+    create_vector_store_response = client.beta.vector_stores.create(
+        name="test_vector_store"
+    )
+    assert isinstance(create_vector_store_response, VectorStore)
+    assert create_vector_store_response.name == "test_vector_store"
+    assert create_vector_store_response.id is not None
+
+    # Create file
+    create_file_response = client.files.create(
+        file=TEST_FILE_PATH,
+        purpose="assistants",
+    )
+
+    # Add file to vector store
+    create_vector_store_file_response = client.beta.vector_stores.files.create(
+        vector_store_id=create_vector_store_response.id, file_id=create_file_response.id
+    )
+    assert isinstance(create_vector_store_file_response, VectorStoreFile)
+    assert (
+        create_vector_store_file_response.vector_store_id
+        == create_vector_store_response.id
+    )
+
+    # List vector stores
+    list_vector_stores_response = client.beta.vector_stores.list()
+    assert any(
+        vs.id == create_vector_store_response.id
+        for vs in list_vector_stores_response.data
+    )
+
+    # List files in vector store
+    list_vector_store_files_response = client.beta.vector_stores.files.list(
+        vector_store_id=create_vector_store_response.id
+    )
+    assert any(
+        file.id == create_file_response.id
+        for file in list_vector_store_files_response.data
+    )
+
+    # Delete vector store
+    delete_vector_store_response = client.beta.vector_stores.delete(
+        vector_store_id=create_vector_store_response.id
+    )
+    assert isinstance(delete_vector_store_response, VectorStoreDeleted)
+    assert delete_vector_store_response.deleted is True
+
+    # Clean up file
+    client.files.delete(file_id=create_file_response.id)
diff --git a/tests/integration/api/test_auth.py b/tests/integration/api/test_auth.py
index 554ab53b4..834dc8756 100644
--- a/tests/integration/api/test_auth.py
+++ b/tests/integration/api/test_auth.py
@@ -35,7 +35,7 @@ def create_api_key():
         "expires_at": int(time.time()) + THIRTY_DAYS,
     }
 
-    response = client.post("/leapfrogai/v1/auth/create-api-key", json=request)
+    response = client.post("/leapfrogai/v1/auth/api-keys", json=request)
     return response
 
 
@@ -58,7 +58,7 @@ def test_list_api_keys(create_api_key):
 
     id_ = create_api_key.json()["id"]
 
-    response = client.get("/leapfrogai/v1/auth/list-api-keys")
+    response = client.get("/leapfrogai/v1/auth/api-keys")
     assert response.status_code is status.HTTP_200_OK
     assert len(response.json()) > 0, "List should return at least one API key."
     for api_key in response.json():
@@ -79,7 +79,7 @@ def test_update_api_key(create_api_key):
         "expires_at": int(time.time()) + 100,
     }
 
-    response = client.post(f"/leapfrogai/v1/auth/update-api-key/{id_}", json=request)
+    response = client.patch(f"/leapfrogai/v1/auth/api-keys/{id_}", json=request)
     assert response.status_code is status.HTTP_200_OK
     assert APIKeyItem.model_validate(response.json()), "API key should be valid."
     assert response.json()["id"] == id_, "Update should return the created API key."
@@ -90,9 +90,9 @@ def test_revoke_api_key(create_api_key):
 
     api_key_id = create_api_key.json()["id"]
 
-    response = client.delete(f"/leapfrogai/v1/auth/revoke-api-key/{api_key_id}")
+    response = client.delete(f"/leapfrogai/v1/auth/api-keys/{api_key_id}")
     assert response.status_code is status.HTTP_204_NO_CONTENT
 
     with pytest.raises(HTTPException):
-        response = client.delete(f"/leapfrogai/v1/auth/revoke-api-key/{api_key_id}")
+        response = client.delete(f"/leapfrogai/v1/auth/api-keys/{api_key_id}")
         assert response.status_code is status.HTTP_404_NOT_FOUND
diff --git a/tests/load/README.md b/tests/load/README.md
new file mode 100644
index 000000000..7985a6463
--- /dev/null
+++ b/tests/load/README.md
@@ -0,0 +1,52 @@
+# LeapfrogAI Load Tests
+
+## Overview
+
+These tests check the API's ability to handle different amounts of load. The tests simulate a specified number of users hitting the endpoints with some number of requests per second.
+
+# Requirements
+
+### Environment Setup
+
+Before running the tests, ensure that your API URL and bearer token are properly configured in your environment variables. Follow these steps:
+
+1. Set the API URL:
+   ```bash
+   export API_URL="https://leapfrogai-api.uds.dev"
+   ```
+
+2. Set the API token:
+   ```bash
+   export BEARER_TOKEN="<your-supabase-jwt-here>"
+   ```
+
+   **Note:** The bearer token should be your Supabase user JWT. For information on generating a JWT, please refer to the [Supabase README.md](../../packages/supabase/README.md). While an API key generated from the LeapfrogAI API endpoint can be used, it will cause the token generation load tests to fail.
+
+3. (Optional) - Set the model backend, this will default to `vllm` if unset:
+      ```bash
+   export DEFAULT_MODEL="llama-cpp-python"
+   ```
+
+## Running the Tests
+
+To start the Locust web interface and run the tests:
+
+1. Install dependencies from the project root.
+   ```bash
+   pip install ".[dev]"
+   ```
+
+2. Navigate to the directory containing `loadtest.py`.
+
+3. Execute the following command:
+   ```bash
+   locust -f loadtest.py --web-port 8089
+   ```
+
+4. Open your web browser and go to `http://0.0.0.0:8089`.
+
+5. Use the Locust web interface to configure and run your tests:
+   - Set the number of users to simulate
+   - Set the spawn rate (users per second)
+   - Choose the host to test against (should match your `API_URL`)
+   - Start the test and monitor results in real-time
\ No newline at end of file
diff --git a/tests/load/loadtest.py b/tests/load/loadtest.py
new file mode 100644
index 000000000..1a3bd8faa
--- /dev/null
+++ b/tests/load/loadtest.py
@@ -0,0 +1,248 @@
+import mimetypes
+import threading
+
+import requests
+from requests_toolbelt.multipart.encoder import MultipartEncoder
+import os
+from locust import HttpUser, task, between, SequentialTaskSet
+import warnings
+import tempfile
+import uuid
+
+# Suppress SSL-related warnings
+warnings.filterwarnings("ignore", category=Warning)
+
+
+class MissingEnvironmentVariable(Exception):
+    pass
+
+
+try:
+    # The default model backend is set to vllm, this can be changed but llama-cpp-python may have concurrency issues
+    DEFAULT_MODEL = os.getenv("DEFAULT_MODEL", "vllm")
+    BEARER_TOKEN = os.environ["BEARER_TOKEN"]
+    API_URL = os.environ["API_URL"]
+except KeyError:
+    raise MissingEnvironmentVariable(
+        "BEARER_TOKEN and API_URL must be defined for the test to run. "
+        "Please check the loadtest README at /tests/load/README.md for instructions on setting these values."
+    )
+
+
+class SharedResources:
+    pdf_path = None
+    pdf_lock = threading.Lock()
+
+
+def download_arxiv_pdf():
+    with SharedResources.pdf_lock:
+        if SharedResources.pdf_path is None or not os.path.exists(
+            SharedResources.pdf_path
+        ):
+            url = "https://arxiv.org/pdf/2305.16291.pdf"
+            with tempfile.NamedTemporaryFile(delete=False, suffix=".pdf") as temp_file:
+                SharedResources.pdf_path = temp_file.name
+
+            response = requests.get(url)
+            if response.status_code == 200:
+                with open(SharedResources.pdf_path, "wb") as file:
+                    file.write(response.content)
+                print("ArXiv PDF downloaded successfully.")
+            else:
+                raise Exception(
+                    f"Failed to download PDF from ArXiv. Status code: {response.status_code}"
+                )
+        else:
+            print("Using existing ArXiv PDF.")
+
+    return SharedResources.pdf_path
+
+
+def load_audio_file():
+    script_dir = os.path.dirname(os.path.abspath(__file__))
+    file_path = os.path.join(script_dir, "..", "data", "russian.mp3")
+    with open(file_path, "rb") as file:
+        return file.read()
+
+
+class RAGTasks(SequentialTaskSet):
+    """Run these tasks in order to simulate full RAG flow"""
+
+    file_id = None
+    vector_store_id = None
+    assistant_id = None
+    thread_id = None
+    pdf_path = None
+
+    def on_start(self):
+        self.pdf_path = download_arxiv_pdf()
+
+    @task
+    def upload_file(self):
+        mime_type, _ = mimetypes.guess_type(self.pdf_path)
+        if mime_type is None:
+            mime_type = "application/octet-stream"
+
+        m = MultipartEncoder(
+            fields={
+                "file": ("arxiv_2305.16291.pdf", open(self.pdf_path, "rb"), mime_type),
+                "purpose": "assistants",
+            }
+        )
+
+        headers = {"Content-Type": m.content_type}
+        response = self.client.post("/openai/v1/files", data=m, headers=headers)
+
+        if response.status_code == 200:
+            self.file_id = response.json()["id"]
+            print(f"Uploaded file ID: {self.file_id}")
+
+    @task
+    def create_vector_store(self):
+        payload = {
+            "name": f"Test Vector Store {uuid.uuid4()}",
+            "file_ids": [self.file_id],
+            "metadata": {"test": "data"},
+        }
+        response = self.client.post("/openai/v1/vector_stores", json=payload)
+        if response.status_code == 200:
+            self.vector_store_id = response.json()["id"]
+            print(f"Created vector store ID: {self.vector_store_id}")
+
+    @task
+    def create_assistant(self):
+        payload = {
+            "model": DEFAULT_MODEL,
+            "name": f"RAG Assistant {uuid.uuid4()}",
+            "instructions": "You are a helpful assistant with access to a knowledge base. Use the file_search tool to find relevant information.",
+            "tools": [{"type": "file_search"}],
+            "tool_resources": {
+                "file_search": {"vector_store_ids": [self.vector_store_id]}
+            },
+        }
+        response = self.client.post("/openai/v1/assistants", json=payload)
+        if response.status_code == 200:
+            self.assistant_id = response.json()["id"]
+            print(f"Created assistant with ID: {self.assistant_id}")
+
+    @task
+    def create_thread_and_run(self):
+        # Create a thread
+        thread_payload = {
+            "messages": [
+                {
+                    "role": "user",
+                    "content": "What information can you provide about the capital of France?",
+                }
+            ]
+        }
+        thread_response = self.client.post("/openai/v1/threads", json=thread_payload)
+
+        if thread_response.status_code == 200:
+            self.thread_id = thread_response.json()["id"]
+
+            # Create a run using the thread and assistant
+            run_payload = {
+                "assistant_id": self.assistant_id,
+                "instructions": "Please use the file_search tool to find information about the capital of France and provide a detailed response.",
+            }
+            run_response = self.client.post(
+                f"/openai/v1/threads/{self.thread_id}/runs", json=run_payload
+            )
+
+            if run_response.status_code == 200:
+                run_id = run_response.json()["id"]
+                print(f"Created run with ID: {run_id}")
+
+                # Check run status
+                status_response = self.client.get(
+                    f"/openai/v1/threads/{self.thread_id}/runs/{run_id}"
+                )
+                print(f"Run status: {status_response.json()['status']}")
+
+    @task
+    def stop(self):
+        self.interrupt()
+
+
+class LeapfrogAIUser(HttpUser):
+    """This class represents a user that will kick off tasks over the life of the test"""
+
+    # Root url to use for all client requests
+    host = API_URL
+    # Add some wait time in-between kicking off tasks
+    wait_time = between(1, 3)
+
+    def on_start(self):
+        # Turn off SSL verification to get rid of unnecessary TLS version issues
+        self.client.verify = False
+        self.client.headers.update({"Authorization": f"Bearer {BEARER_TOKEN}"})
+
+    @task
+    def perform_rag_tasks(self):
+        rag_tasks = RAGTasks(self)
+        rag_tasks.run()
+
+    @task
+    def test_list_api_keys(self):
+        self.client.get("/leapfrogai/v1/auth/list-api-keys")
+
+    @task
+    def test_openai_models(self):
+        self.client.get("/openai/v1/models")
+
+    @task
+    def test_chat_completions(self):
+        payload = {
+            "model": DEFAULT_MODEL,
+            "messages": [{"role": "user", "content": "Hello, how are you?"}],
+            "max_tokens": 50,
+        }
+        self.client.post("/openai/v1/chat/completions", json=payload)
+
+    @task
+    def test_embeddings(self):
+        payload = {
+            "model": "text-embeddings",
+            "input": "The quick brown fox jumps over the lazy dog",
+        }
+        self.client.post("/openai/v1/embeddings", json=payload)
+
+    @task
+    def test_transcribe(self):
+        audio_content = load_audio_file()
+        files = {"file": ("russian.mp3", audio_content, "audio/mpeg")}
+        data = {"model": "whisper", "language": "ru"}
+        self.client.post("/openai/v1/audio/transcriptions", files=files, data=data)
+
+    @task
+    def test_translate(self):
+        audio_content = load_audio_file()
+        files = {"file": ("russian.mp3", audio_content, "audio/mpeg")}
+        data = {"model": "whisper"}
+        self.client.post("/openai/v1/audio/translations", files=files, data=data)
+
+    @task
+    def test_list_files(self):
+        self.client.get("/openai/v1/files")
+
+    @task
+    def test_list_vector_stores(self):
+        self.client.get("/openai/v1/vector_stores")
+
+    @task
+    def test_list_assistants(self):
+        self.client.get("/openai/v1/assistants")
+
+    @task
+    def test_healthz(self):
+        self.client.get("/healthz")
+
+    @task
+    def test_models(self):
+        self.client.get("/models")
+
+    @task
+    def test_create_api_key(self):
+        payload = {"name": "Test API Key"}
+        self.client.post("/leapfrogai/v1/auth/create-api-key", json=payload)
diff --git a/tests/make-tests.mk b/tests/make-tests.mk
index 564fa63e5..00b24dc1a 100644
--- a/tests/make-tests.mk
+++ b/tests/make-tests.mk
@@ -32,6 +32,9 @@ test-int-api: set-supabase
 test-unit: set-supabase
 	PYTHONPATH=$$(pwd) pytest -vv -s tests/unit
 
+test-load:
+	locust -f ${PWD}/tests/load/loadtest.py --web-port 8089
+
 debug: set-supabase
 	@echo ${SUPABASE_URL}
 	@echo ${SUPABASE_ANON_KEY}
diff --git a/tests/pytest/leapfrogai_api/test_api.py b/tests/pytest/leapfrogai_api/test_api.py
index 935cc3b0c..a80df6b6c 100644
--- a/tests/pytest/leapfrogai_api/test_api.py
+++ b/tests/pytest/leapfrogai_api/test_api.py
@@ -70,7 +70,7 @@ def dummy_auth_middleware():
 def test_config_load():
     """Test that the config is loaded correctly."""
     with TestClient(app) as client:
-        response = client.get("/models")
+        response = client.get("/leapfrogai/v1/models")
 
         assert response.status_code == 200
         assert response.json() == {
@@ -89,7 +89,7 @@ def test_config_delete(tmp_path):
 
     with TestClient(app) as client:
         # ensure the API loads the temp config
-        response = client.get("/models")
+        response = client.get("/leapfrogai/v1/models")
         assert response.status_code == 200
 
         assert response.json() == {
@@ -102,7 +102,7 @@ def test_config_delete(tmp_path):
         # wait for the api to be able to detect the change
         time.sleep(0.5)
         # assert response is now empty
-        response = client.get("/models")
+        response = client.get("/leapfrogai/v1/models")
         assert response.status_code == 200
         assert response.json() == {"config_sources": {}, "models": {}}
 
@@ -114,7 +114,7 @@ def test_routes():
     expected_routes = {
         "/docs": ["GET", "HEAD"],
         "/healthz": ["GET"],
-        "/models": ["GET"],
+        "/leapfrogai/v1/models": ["GET"],
         "/openai/v1/models": ["GET"],
         "/openai/v1/chat/completions": ["POST"],
         "/openai/v1/embeddings": ["POST"],
diff --git a/uds-bundles/dev/README.md b/uds-bundles/dev/README.md
index a097869b7..deb25ddde 100644
--- a/uds-bundles/dev/README.md
+++ b/uds-bundles/dev/README.md
@@ -16,6 +16,8 @@ source .venv/bin/activate
 Each component is built into its own Zarf package. You can build all of the packages you need at once with the following `Make` targets:
 > ***Note:*** You need to build with `make build-* LOCAL_VERSION=dev` to set the tag to `dev` instead of the commit hash locally.  
 
+> ***NOTE:*** Some of the packages have Python dev dependencies that need to be installed when building them locally. These dependencies are used to download the model weights that will be included in the final Zarf package. These dependencies are listed as `dev` in the `project.optional-dependencies` section of each models `pyproject.toml`.
+
 You can build all of the packages you need at once with the following `Make` targets:
 
 ```shell
diff --git a/uds-bundles/dev/cpu/uds-config.yaml b/uds-bundles/dev/cpu/uds-config.yaml
index d610a1972..85e8e3e74 100644
--- a/uds-bundles/dev/cpu/uds-config.yaml
+++ b/uds-bundles/dev/cpu/uds-config.yaml
@@ -1,8 +1,10 @@
 variables:
   text-embeddings:
+    gpu_class_name: "" # Leave blank if nvidia runtimeClass is not present in cluster
     gpu_limit: 0
 
   whisper:
+    gpu_class_name: "" # Leave blank if nvidia runtimeClass is not present in cluster
     gpu_limit: 0
 
   supabase:
diff --git a/uds-bundles/dev/gpu/uds-config.yaml b/uds-bundles/dev/gpu/uds-config.yaml
index 9ba6bf636..4f331e1dc 100644
--- a/uds-bundles/dev/gpu/uds-config.yaml
+++ b/uds-bundles/dev/gpu/uds-config.yaml
@@ -1,13 +1,15 @@
 # see individual zarf packaging configuration for more variables and variable descriptions
 variables:
   text-embeddings:
-    gpu_limit: 0
+    gpu_class_name: "nvidia"  # Set to ensure the nvidia runtimeClass is present in case GPU limit is increased
+    gpu_limit: 0  # runs on CPU until GPU limit is increased
 
   whisper:
-    gpu_limit: 0
+    gpu_class_name: "nvidia"  # Set to ensure the nvidia runtimeClass is present in case GPU limit is increased
+    gpu_limit: 0  # runs on CPU until GPU limit is increased
 
   vllm:
-    gpu_limit: 1
+    gpu_limit: 1 # if <1, vllm won't work, VLLM is GPU only
     #tensor_parallel_size: 1   # TODO: reintroduce when vllm changes get pulled in
 
   supabase:
diff --git a/uds-bundles/latest/cpu/uds-bundle.yaml b/uds-bundles/latest/cpu/uds-bundle.yaml
index 36e03f254..7067da8ea 100644
--- a/uds-bundles/latest/cpu/uds-bundle.yaml
+++ b/uds-bundles/latest/cpu/uds-bundle.yaml
@@ -5,7 +5,7 @@ metadata:
   name: leapfrogai
   description: A UDS bundle for deploying LeapfrogAI
   # x-release-please-start-version
-  version: 0.9.2
+  version: 0.10.0
   # x-release-please-end
 
 packages:
@@ -13,40 +13,40 @@ packages:
   - name: supabase
     repository: ghcr.io/defenseunicorns/packages/leapfrogai/supabase
     # x-release-please-start-version
-    ref: 0.9.2
+    ref: 0.10.0
     # x-release-please-end
 
   # API
   - name: leapfrogai-api
     repository: ghcr.io/defenseunicorns/packages/leapfrogai/leapfrogai-api
     # x-release-please-start-version
-    ref: 0.9.2
+    ref: 0.10.0
     # x-release-please-end
 
   # Chat Model
   - name: llama-cpp-python
     repository: ghcr.io/defenseunicorns/packages/leapfrogai/llama-cpp-python
     # x-release-please-start-version
-    ref: 0.9.2
+    ref: 0.10.0
     # x-release-please-end
 
   # Text Embeddings Model
   - name: text-embeddings
     repository: ghcr.io/defenseunicorns/packages/leapfrogai/text-embeddings
     # x-release-please-start-version
-    ref: 0.9.2
+    ref: 0.10.0
     # x-release-please-end
 
   # Transcription Model
   - name: whisper
     repository: ghcr.io/defenseunicorns/packages/leapfrogai/whisper
     # x-release-please-start-version
-    ref: 0.9.2
+    ref: 0.10.0
     # x-release-please-end
 
   # UI - new UI TODO - point to ghcr image after Sprint 0.7.0
   - name: leapfrogai-ui
     repository: ghcr.io/defenseunicorns/packages/leapfrogai/leapfrogai-ui
     # x-release-please-start-version
-    ref: 0.9.2
+    ref: 0.10.0
     # x-release-please-end
diff --git a/uds-bundles/latest/cpu/uds-config.yaml b/uds-bundles/latest/cpu/uds-config.yaml
index d610a1972..99e4fb49b 100644
--- a/uds-bundles/latest/cpu/uds-config.yaml
+++ b/uds-bundles/latest/cpu/uds-config.yaml
@@ -1,8 +1,11 @@
+# see individual zarf packaging configuration for more variables and variable descriptions
 variables:
   text-embeddings:
+    gpu_class_name: "" # Leave blank if nvidia runtimeClass is not present in cluster
     gpu_limit: 0
 
   whisper:
+    gpu_class_name: "" # Leave blank if nvidia runtimeClass is not present in cluster
     gpu_limit: 0
 
   supabase:
diff --git a/uds-bundles/latest/gpu/uds-bundle.yaml b/uds-bundles/latest/gpu/uds-bundle.yaml
index d9ebb7579..b25c62ac6 100644
--- a/uds-bundles/latest/gpu/uds-bundle.yaml
+++ b/uds-bundles/latest/gpu/uds-bundle.yaml
@@ -5,7 +5,7 @@ metadata:
   name: leapfrogai
   description: A UDS bundle for deploying LeapfrogAI
   # x-release-please-start-version
-  version: 0.9.2
+  version: 0.10.0
   # x-release-please-end
 
 packages:
@@ -13,40 +13,40 @@ packages:
   - name: supabase
     repository: ghcr.io/defenseunicorns/packages/leapfrogai/supabase
     # x-release-please-start-version
-    ref: 0.9.2
+    ref: 0.10.0
     # x-release-please-end
 
   # OpenAI-like API
   - name: leapfrogai-api
     repository: ghcr.io/defenseunicorns/packages/leapfrogai/leapfrogai-api
     # x-release-please-start-version
-    ref: 0.9.2
+    ref: 0.10.0
     # x-release-please-end
 
   # Model for generic chat and summarization
   - name: vllm
     repository: ghcr.io/defenseunicorns/packages/leapfrogai/vllm
     # x-release-please-start-version
-    ref: 0.9.2
+    ref: 0.10.0
     # x-release-please-end
 
   # Model for providing vector embeddings for text
   - name: text-embeddings
     repository: ghcr.io/defenseunicorns/packages/leapfrogai/text-embeddings
     # x-release-please-start-version
-    ref: 0.9.2
+    ref: 0.10.0
     # x-release-please-end
 
   # Model for converting audio to text
   - name: whisper
     repository: ghcr.io/defenseunicorns/packages/leapfrogai/whisper
     # x-release-please-start-version
-    ref: 0.9.2
+    ref: 0.10.0
     # x-release-please-end
 
   # UI - new UI TODO - point to ghcr image after Sprint 0.7.0
   - name: leapfrogai-ui
     repository: ghcr.io/defenseunicorns/packages/leapfrogai/leapfrogai-ui
     # x-release-please-start-version
-    ref: 0.9.2
+    ref: 0.10.0
     # x-release-please-end
diff --git a/uds-bundles/latest/gpu/uds-config.yaml b/uds-bundles/latest/gpu/uds-config.yaml
index 9ba6bf636..4f331e1dc 100644
--- a/uds-bundles/latest/gpu/uds-config.yaml
+++ b/uds-bundles/latest/gpu/uds-config.yaml
@@ -1,13 +1,15 @@
 # see individual zarf packaging configuration for more variables and variable descriptions
 variables:
   text-embeddings:
-    gpu_limit: 0
+    gpu_class_name: "nvidia"  # Set to ensure the nvidia runtimeClass is present in case GPU limit is increased
+    gpu_limit: 0  # runs on CPU until GPU limit is increased
 
   whisper:
-    gpu_limit: 0
+    gpu_class_name: "nvidia"  # Set to ensure the nvidia runtimeClass is present in case GPU limit is increased
+    gpu_limit: 0  # runs on CPU until GPU limit is increased
 
   vllm:
-    gpu_limit: 1
+    gpu_limit: 1 # if <1, vllm won't work, VLLM is GPU only
     #tensor_parallel_size: 1   # TODO: reintroduce when vllm changes get pulled in
 
   supabase:
diff --git a/website/content/en/docs/local deploy guide/dependencies.md b/website/content/en/docs/local deploy guide/dependencies.md
index d4142275b..a67440d35 100644
--- a/website/content/en/docs/local deploy guide/dependencies.md	
+++ b/website/content/en/docs/local deploy guide/dependencies.md	
@@ -56,7 +56,7 @@ brew tap defenseunicorns/tap && brew install zarf
 ```
 
 - As Homebrew does not install packages to the root directory, it is advisable to manually add the `zarf` binary to the root. Even in cases where Docker is installed in a rootless configuration, certain systems may encounter container access issues if Docker is not executed with root privileges.
-- To install as root, execute the following command in your terminal and ensure that the version number is replaced with the most recent [release](https://github.com/defenseunicorns/zarf/releases):
+- To install as root, execute the following command in your terminal and ensure that the version number is replaced with the most recent [release](https://github.com/zarf-dev/zarf/releases):
 
 ```git
 # switch to sudo
diff --git a/website/content/en/docs/local deploy guide/deploy.md b/website/content/en/docs/local deploy guide/deploy.md
index bf69ed596..74d0dec78 100644
--- a/website/content/en/docs/local deploy guide/deploy.md	
+++ b/website/content/en/docs/local deploy guide/deploy.md	
@@ -30,7 +30,7 @@ Isolated Network:
 
 ```bash
 # download and store on removable media
-wget https://github.com/defenseunicorns/zarf/releases/download/v0.31.0/zarf_v0.31.0_Linux_amd64
+wget https://github.com/zarf-dev/zarf/releases/download/v0.31.0/zarf_v0.31.0_Linux_amd64
 
 # upload from removable media and install
 mv zarf_v0.31.0_Linux_amd64 /usr/local/bin/zarf
@@ -69,7 +69,7 @@ The following commands are divided into three parts: download, create, and deplo
 
 ```git
 # download
-git clone https://github.com/defenseunicorns/zarf-package-k3d-airgap.git
+git clone https://github.com/zarf-dev/zarf-package-k3d-airgap.git
 cd zarf-package-k3d-airgap
 
 # create
diff --git a/website/content/en/docs/local deploy guide/quick_start.md b/website/content/en/docs/local deploy guide/quick_start.md
index 49f07358b..2b94d21b9 100644
--- a/website/content/en/docs/local deploy guide/quick_start.md	
+++ b/website/content/en/docs/local deploy guide/quick_start.md	
@@ -22,6 +22,8 @@ Additionally, please check the list of tested [operating systems](https://docs.l
 
 ## Prerequisites
 
+- [Python 3.11](https://www.python.org/downloads/release/python-3116/)
+    - NOTE: Different model packages will require different Python libraries. The libraries required will be listed in the `dev` optional dependencies in each projects `pyproject.toml` file.
 - [Docker](https://docs.docker.com/engine/install/)
 - [K3D](https://k3d.io/)
 - [Zarf](https://docs.zarf.dev/getting-started/install/)
@@ -73,9 +75,10 @@ git clone https://github.com/defenseunicorns/leapfrogai.git
 From within the cloned repository, deploy K3D and the LeapfrogAI bundle:
 
 ``` bash
+make create-uds-cpu-cluster
+
 cd uds-bundles/latest/cpu/
 uds create .
-uds deploy k3d-core-slim-dev:0.23.0      # be sure to check if a newer version exists
 uds deploy uds-bundle-leapfrogai-*.tar.zst --confirm
 ```
 
@@ -84,9 +87,12 @@ uds deploy uds-bundle-leapfrogai-*.tar.zst --confirm
 In order to test the GPU deployment locally on K3d, use the following command when deploying UDS-Core:
 
 ```bash
+ make build-k3d-gpu # build the image
+ make create-uds-gpu-cluster # create a uds cluster equipped with the k3d-gpu image
+ make test-uds-gpu-cluster # deploy a test gpu pod to see if everything is working
+
  cd uds-bundles/latest/gpu/
  uds create .
- uds deploy k3d-core-slim-dev:0.23.0 --set K3D_EXTRA_ARGS="--gpus=all --image=ghcr.io/justinthelaw/k3d-gpu-support:v1.27.4-k3s1-cuda"     # be sure to check if a newer version exists
  uds deploy uds-bundle-leapfrogai-*.tar.zst --confirm
 ```