diff --git a/sandbox/public/index.css b/sandbox/public/index.css
index c3c4a778b..f1b13b0ff 100755
--- a/sandbox/public/index.css
+++ b/sandbox/public/index.css
@@ -11,15 +11,45 @@ body {
   color: #eaeaea;
 }
 
-a {
-  color: #e7ca8d;
+nav {
+  flex: 0 0 200px; /* Adjust this value to change the width of the navigation */
+  height: 100vh;
+  padding: 1em;
+  background-color: #f5f5f5; /* Adjust this value to change the background color of the navigation */
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow to the navigation */
+}
+
+nav ul {
+  display: flex;
+  flex-direction: column;
+  width: 200px; /* adjust this value as needed */
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  padding: 0;
+  margin: 0;
+}
+
+nav li {
+  list-style: none;
+  padding: 10px;
+}
+
+.content {
+  margin-left: 210px; /* adjust this value as needed */
+}
+
+nav a {
+  color: #333; /* Adjust this value to change the color of the links */
+  text-decoration: none;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-    color: #acecfe;
-  }
+  monospace;
+  color: #acecfe;
+}
 
 section {
   padding: 15px;
@@ -34,7 +64,8 @@ ul {
   padding: 0;
 }
 
-li, button {
+li,
+button {
   display: inline-block;
   margin-right: 20px;
   font-size: 120%;
@@ -42,4 +73,4 @@ li, button {
 
 #root {
   padding: 10px;
-}
+}
\ No newline at end of file
diff --git a/sandbox/public/index.html b/sandbox/public/index.html
index 8590202d8..050bb4d5b 100755
--- a/sandbox/public/index.html
+++ b/sandbox/public/index.html
@@ -4,6 +4,10 @@
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <link rel="stylesheet" href="/index.css" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@spectrum-css/page@3.0.0-beta.5/dist/index-vars.css"
+    />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
diff --git a/sandbox/public/logo.png b/sandbox/public/logo.png
new file mode 100644
index 000000000..6e2a21599
Binary files /dev/null and b/sandbox/public/logo.png differ
diff --git a/sandbox/src/App.css b/sandbox/src/App.css
index 85416a259..ae022c9ca 100755
--- a/sandbox/src/App.css
+++ b/sandbox/src/App.css
@@ -8,11 +8,17 @@
 }
 
 .App-header ul {
-  display: flex;
   flex-direction: column;
   align-items: flex-start;
   overflow-y: auto;
   height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 200px;
+  padding: 1em;
+  margin: 0;
+  background-color: #f8f9fa;
 }
 
 .App-link {
diff --git a/sandbox/src/App.js b/sandbox/src/App.js
index 1282f112b..e6e398deb 100755
--- a/sandbox/src/App.js
+++ b/sandbox/src/App.js
@@ -1,15 +1,3 @@
-/*
-Copyright 2019 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
 import React from "react";
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 
@@ -37,99 +25,114 @@ const BasicExample = () => {
   return (
     <>
       <Router>
-        <div>
-          <ul>
-            <li>
+        <div style={{ display: "flex" }}>
+          <nav style={{ listStyleType: "none", padding: 0 }}>
+            <li style={{ display: "block" }}>
+              <img
+                src="logo.png"
+                alt="Adobe AEP Web SDK"
+                style={{ width: "150px" }}
+              />
+            </li>
+            <li style={{ display: "block" }}>
               <Link to="/">Home</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/consent">Consent</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/personalization">Personalization</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/personalizationSpa">Personalization - SPA</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/personalizationAjo">Personalization - AJO</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/personalizationA4TClientSide">
                 Personalization - A4T Client Side
               </Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/personalizationProfile">
                 Personalization - Profile
               </Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/personalizationFormBased">
                 Personalization - Form Based
               </Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/links">Links</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/eventMerge">Event-Merge</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/largePayload">Large Payload</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/orgTwo">Multiple Orgs</Link>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               {/* Anchor tag to ensure app is reloaded with unsafe CSP */}
               <a href="/dualTag">Dual Tag</a>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <a href="/legacy.html">Legacy Visitor ID</a>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <a href="/redirectOffers">Redirect Offers</a>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <a href="/identity">Identity</a>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <a href="/configOverrides">Config Overrides</a>
             </li>
-            <li>
+            <li style={{ display: "block" }}>
               <Link to="/inAppMessages">In-app Messages</Link>
             </li>
-          </ul>
+          </nav>
+          <main
+            style={{
+              float: "right",
+              marginLeft: "50px",
+              padding: "1em",
+              width: "calc(100% - 200px)"
+            }}
+          >
+            <Route exact path="/" component={Home} />
+            <Route path="/consent" component={Consent} />
+            <Route path="/personalization" component={Personalization} />
+            <Route path="/personalizationSpa" component={PersonalizationSpa} />
+            <Route path="/personalizationAjo" component={PersonalizationAjo} />
+            <Route
+              path="/personalizationA4TClientSide"
+              component={PersonalizationAnalyticsClientSide}
+            />
+            <Route
+              path="/personalizationProfile"
+              component={PersonalizationProfile}
+            />
+            <Route
+              path="/personalizationFormBased"
+              component={PersonalizationFormBased}
+            />
+            <Route path="/links" component={Links} />
+            <Route path="/eventMerge" component={EventMerge} />
+            <Route path="/largePayload" component={LargePayload} />
+            <Route path="/orgTwo" component={OrgTwo} />
+            <Route path="/dualTag" component={DualTag} />
+            <Route path="/redirectOffers" component={RedirectOffers} />
+            <Route path="/redirectedNewPage" component={RedirectedNewPage} />
+            <Route path="/identity" component={Identity} />
+            <Route path="/configOverrides" component={ConfigOverrides} />
+            <Route path="/inAppMessages" component={InAppMessages} />
+          </main>
           <hr />
-
-          <Route exact path="/" component={Home} />
-          <Route path="/consent" component={Consent} />
-          <Route path="/personalization" component={Personalization} />
-          <Route path="/personalizationSpa" component={PersonalizationSpa} />
-          <Route path="/personalizationAjo" component={PersonalizationAjo} />
-          <Route
-            path="/personalizationA4TClientSide"
-            component={PersonalizationAnalyticsClientSide}
-          />
-          <Route
-            path="/personalizationProfile"
-            component={PersonalizationProfile}
-          />
-          <Route
-            path="/personalizationFormBased"
-            component={PersonalizationFormBased}
-          />
-          <Route path="/links" component={Links} />
-          <Route path="/eventMerge" component={EventMerge} />
-          <Route path="/largePayload" component={LargePayload} />
-          <Route path="/orgTwo" component={OrgTwo} />
-          <Route path="/dualTag" component={DualTag} />
-          <Route path="/redirectOffers" component={RedirectOffers} />
-          <Route path="/redirectedNewPage" component={RedirectedNewPage} />
-          <Route path="/identity" component={Identity} />
-          <Route path="/configOverrides" component={ConfigOverrides} />
-          <Route path="/inAppMessages" component={InAppMessages} />
         </div>
       </Router>
       <AlloyVersion />
diff --git a/sandbox/src/index.js b/sandbox/src/index.js
index 9813a108f..a2f69009a 100755
--- a/sandbox/src/index.js
+++ b/sandbox/src/index.js
@@ -14,8 +14,8 @@ import "core-js/stable";
 import "regenerator-runtime/runtime";
 import React from "react";
 import ReactDOM from "react-dom";
-import "@adobe/spectrum-css/dist/spectrum-core.css";
 import { Provider, defaultTheme } from "@adobe/react-spectrum";
+import "@adobe/spectrum-css/dist/spectrum-core.css";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 
diff --git a/scripts/helpers/runFunctionalTests.js b/scripts/helpers/runFunctionalTests.js
index 85609f615..9b5d9eb08 100644
--- a/scripts/helpers/runFunctionalTests.js
+++ b/scripts/helpers/runFunctionalTests.js
@@ -1,32 +1,34 @@
 #!/usr/bin/env node
 
-const glob = require('glob');
-const createTestCafe = require('testcafe');
-const yargs = require('yargs/yargs');
-const { hideBin } = require('yargs/helpers');
+const glob = require("glob");
+const createTestCafe = require("testcafe");
+const yargs = require("yargs/yargs");
+const { hideBin } = require("yargs/helpers");
 
-const argv = yargs(hideBin(process.argv)).option('exclude', {
-    type: 'array',
-    default: []
+const argv = yargs(hideBin(process.argv)).option("exclude", {
+  type: "array",
+  default: []
 }).argv;
 
-glob('test/functional/specs/**/*.js', (err, files) => {
-    if (err) {
-        console.error(err);
-        process.exit(1);
-    }
+glob("test/functional/specs/**/*.js", (err, files) => {
+  if (err) {
+    console.error(err);
+    process.exit(1);
+  }
 
-    const testFiles = files.filter(file => {
-        const shouldExclude = argv.exclude.some(excludedDir => file.includes(excludedDir));
-        return !shouldExclude;
-    });
+  const testFiles = files.filter(file => {
+    const shouldExclude = argv.exclude.some(excludedDir =>
+      file.includes(excludedDir)
+    );
+    return !shouldExclude;
+  });
 
-    createTestCafe().then(testcafe => {
-        const runner = testcafe.createRunner();
-        runner
-            .src(testFiles)
-            .browsers('chrome')
-            .run()
-            .then(() => testcafe.close());
-    });
+  createTestCafe().then(testcafe => {
+    const runner = testcafe.createRunner();
+    runner
+      .src(testFiles)
+      .browsers("chrome")
+      .run()
+      .then(() => testcafe.close());
+  });
 });