diff --git a/.eslintignore b/.eslintignore
index 4dabd4795b..1338c204f1 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -8,3 +8,6 @@ cli/template
 docs/.vitepress/.temp/
 docs/.vitepress/.cache/
 docs/.vitepress/dist/
+
+# Ignore files in the GitHub Pages deploy previews
+pr-preview/
diff --git a/.github/workflows/github-pages-pr-preview.yaml b/.github/workflows/github-pages-pr-preview.yaml
new file mode 100644
index 0000000000..31eabc3f3b
--- /dev/null
+++ b/.github/workflows/github-pages-pr-preview.yaml
@@ -0,0 +1,73 @@
+name: Deploy Sandbox PR Preview to GitHub Pages
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      # Ensure previews are cleaned up when PR is closed
+      - closed
+    # TODO: Update branch name to beta when needed
+    branches:
+      - alpha
+
+concurrency:
+  group: sandbox-pr-preview-${{ github.ref }}
+  cancel-in-progress: true
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+  pull-requests: write
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      # - name: Remove sandbox preview comment
+      #   uses: marocchino/sticky-pull-request-comment@v2
+      #   with:
+      #     header: sandbox_pr_preview
+      #     delete: true
+      #     GITHUB_TOKEN: ${{ secrets.KONGPONENTS_BOT_PAT }}
+
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build Sandbox
+        env:
+          # Tell the script to use the sandbox directory
+          USE_SANDBOX: true
+        run: yarn sandbox:build
+
+      - name: Deploy Sandbox PR Preview to GitHub Pages
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: './sandbox/dist'
+          preview-branch: ${{ github.head_ref || github.ref_name }}
+          umbrella-dir: pr-preview
+          token: ${{ secrets.KONGPONENTS_BOT_PAT }}
+
+      # - name: Provide sandbox preview link
+      #   if: ${{ steps.pr-preview.outputs.deployment-url != '' }}
+      #   uses: marocchino/sticky-pull-request-comment@v2
+      #   with:
+      #     header: sandbox_pr_preview
+      #     message: |
+      #       ## Sandbox Deploy Preview
+
+      #       ${{ steps.pr-preview.outputs.deployment-url }}
+      #     GITHUB_TOKEN: ${{ secrets.KONGPONENTS_BOT_PAT }}
diff --git a/.github/workflows/github-pages.yaml b/.github/workflows/github-pages.yaml
index b4596b576b..72fae2b464 100644
--- a/.github/workflows/github-pages.yaml
+++ b/.github/workflows/github-pages.yaml
@@ -18,21 +18,20 @@ permissions:
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: 'pages'
+  group: pages-${{ github.ref }}
   cancel-in-progress: false
 
 jobs:
-  # Single deploy job since we're just deploying
   deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
+    # environment:
+    #   name: github-pages
+    #   url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
     timeout-minutes: 10
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Use Node.js
         uses: actions/setup-node@v3
@@ -57,6 +56,16 @@ jobs:
           # Upload sandbox/dist directory
           path: './sandbox/dist'
 
+      # - name: Deploy to GitHub Pages
+      #   id: deployment
+      #   uses: actions/deploy-pages@v2
+
       - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v2
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          # TODO: Update branch name to beta when needed
+          branch: alpha
+          folder: './sandbox/dist' # The folder the action should deploy.
+          clean-exclude: pr-preview/ # Do not remove other PR preview builds
+          force: false
+          token: ${{ secrets.KONGPONENTS_BOT_PAT }}
diff --git a/.gitignore b/.gitignore
index 3019e68fe1..93e4195f43 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,3 +18,6 @@ docs/.vitepress/.temp
 docs/.vitepress/.cache
 docs/.vitepress/cache
 docs/.vitepress/dist
+
+# Ignore files in the GitHub Pages deploy previews
+pr-preview/
diff --git a/sandbox/index.html b/sandbox/index.html
index 4407547366..c0bc1c745f 100644
--- a/sandbox/index.html
+++ b/sandbox/index.html
@@ -2,12 +2,16 @@
 <html lang="en">
 
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Kongponents Sandbox</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="robots" content="noindex nofollow" />
+    <link rel="icon" href="/favicon.ico">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono&display=swap"
+      rel="stylesheet">
+    <title>Kongponents Sandbox</title>
     <style>
       html,
       body {
diff --git a/sandbox/pages/HomePage.vue b/sandbox/pages/HomePage.vue
index 7a3937afcb..6a58812bf2 100644
--- a/sandbox/pages/HomePage.vue
+++ b/sandbox/pages/HomePage.vue
@@ -41,10 +41,10 @@
       >
         <h2>Welcome to the Sandbox!</h2>
         <p>
-          The sandbox mode in Kongponents provides developers with a controlled environment to test and ensure that no styles from the docs app leak through into the component library. This feature guarantees that the components look and function as intended, without any external interference.
+          This sandbox (currently pointed to the <code>alpha</code> branch) provides users with a controlled environment to test and interact with components. This feature helps to guarantee that the components look and behave as intended, without external interference.
         </p>
         <p>
-          By using the sandbox mode, you can have confidence that components maintain their visual consistency, regardless of the context in which they are used.
+          By using the sandbox, you can verify that components maintain their visual consistency, regardless of the host app in which they are used.
         </p>
       </div>
       <router-view />
diff --git a/sandbox/router.ts b/sandbox/router.ts
index 727ca0a1f5..0034b30323 100644
--- a/sandbox/router.ts
+++ b/sandbox/router.ts
@@ -1,7 +1,7 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 
 export default createRouter({
-  history: createWebHistory('/kongponents'),
+  history: createWebHashHistory(),
   routes: [
     {
       path: '/',