diff --git a/web/beacon-app/src/components/layout/AppLayout.tsx b/web/beacon-app/src/components/layout/AppLayout.tsx
index 1a9324700..9d9c38356 100644
--- a/web/beacon-app/src/components/layout/AppLayout.tsx
+++ b/web/beacon-app/src/components/layout/AppLayout.tsx
@@ -6,6 +6,7 @@ import { PATH_DASHBOARD } from '@/application';
 import { useFetchProfile } from '@/features/members/hooks/useFetchProfile';
 import { isOnboardedMember } from '@/features/members/utils';
 
+// import SandboxBanner from './SanboxBanner/SandboxBanner';
 import Topbar from './Topbar';
 
 type PageProps = {
@@ -28,6 +29,9 @@ function AppLayout({ children, Breadcrumbs }: PageProps) {
   return (
     <>
       <Topbar Breadcrumbs={Breadcrumbs} isOnboarded={isOnboarded} profileData={loaderData} />
+      {/* TODO: Display SandboxBanner only to user's with the sandbox account type. 
+      <SandboxBanner />
+      */}
       <Container max={696} centered className="my-10 mt-8 px-4 xl:px-28">
         {children}
       </Container>
diff --git a/web/beacon-app/src/components/layout/SanboxBanner/SandboxBanner.tsx b/web/beacon-app/src/components/layout/SanboxBanner/SandboxBanner.tsx
new file mode 100644
index 000000000..d0510e3fc
--- /dev/null
+++ b/web/beacon-app/src/components/layout/SanboxBanner/SandboxBanner.tsx
@@ -0,0 +1,28 @@
+import { Trans } from '@lingui/macro';
+
+import { EXTERNAL_LINKS } from '@/application';
+import Alert from '@/components/common/Alert/Alert';
+
+function SandboxBanner() {
+  return (
+    <Alert>
+      <div className="flex h-auto w-full flex-col items-center justify-center gap-x-4 bg-[#EBF5FF] py-6 text-center font-bold text-[#1D65A6] lg:flex-row">
+        <p>
+          <Trans>
+            You are using the Ensign Sandbox. Ready to deploy your models to production?
+          </Trans>
+        </p>
+        <a
+          href={EXTERNAL_LINKS.ENSIGN_PRICING}
+          target="_blank"
+          rel="noreferrer"
+          className="mt-4 rounded-md border border-white bg-[#1D65A6] px-4 py-1.5 text-white hover:bg-[#1D65A6/50] lg:mt-0"
+        >
+          <Trans>Upgrade</Trans>
+        </a>
+      </div>
+    </Alert>
+  );
+}
+
+export default SandboxBanner;
diff --git a/web/beacon-app/src/components/layout/SandboxLayout.tsx b/web/beacon-app/src/components/layout/SandboxLayout.tsx
new file mode 100644
index 000000000..1fd02101b
--- /dev/null
+++ b/web/beacon-app/src/components/layout/SandboxLayout.tsx
@@ -0,0 +1,18 @@
+import MobileFooter from './MobileFooter';
+import SandboxSidebar from './Sidebar/SandboxSidebar';
+
+type SandboxLayoutProps = {
+  children?: React.ReactNode;
+};
+
+function SandboxLayout({ children }: SandboxLayoutProps) {
+  return (
+    <div className="flex flex-col md:pl-[250px]">
+      <SandboxSidebar className="hidden md:block" />
+      <div>{children}</div>
+      <MobileFooter />
+    </div>
+  );
+}
+
+export default SandboxLayout;
diff --git a/web/beacon-app/src/components/layout/Topbar/Topbar.styles.ts b/web/beacon-app/src/components/layout/Topbar/Topbar.styles.ts
deleted file mode 100644
index a04cf0925..000000000
--- a/web/beacon-app/src/components/layout/Topbar/Topbar.styles.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-export const Header = styled.header`
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  display: flex;
-`;
diff --git a/web/beacon-app/src/components/layout/Topbar/Topbar.tsx b/web/beacon-app/src/components/layout/Topbar/Topbar.tsx
index 0b8a3a048..62e5783f6 100644
--- a/web/beacon-app/src/components/layout/Topbar/Topbar.tsx
+++ b/web/beacon-app/src/components/layout/Topbar/Topbar.tsx
@@ -1,8 +1,6 @@
-// import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/macro';
 import { memo, ReactNode, useId, useState } from 'react';
 
-// import { EXTERNAL_LINKS } from '@/application';
-// import { EXTERNAL_LINKS } from '@/application';
 import { ProfileCard } from '@/components/common/ProfileCard/ProfileCard';
 import { MenuDropdownMenu } from '@/components/MenuDropdown/MenuDropdown';
 import { useDropdownMenu } from '@/components/MenuDropdown/useDropdownMenu';
@@ -15,7 +13,6 @@ import { useOrgStore } from '@/store';
 import ScheduleOfficeHours from '../../ScheduleOfficeHours/ScheduleOfficeHours';
 import MobileNav from '../MobileNav/MobileNav';
 import ProfileAvatar from '../ProfileAvatar/ProfileAvatar';
-import { Header } from './Topbar.styles';
 type TopBarProps = {
   Breadcrumbs?: ReactNode;
   isOnboarded?: boolean;
@@ -47,71 +44,54 @@ function Topbar({ Breadcrumbs: CustomBreadcrumbs, isOnboarded, profileData }: To
   });
 
   return (
-    <>
-      <Header className="flex flex-col items-baseline justify-center gap-2 bg-[#1D65A6] md:ml-[250px] md:min-h-[60px] md:border-b md:bg-white">
-        {/* TODO: Display alert banner when user is on the sandbox. */}
-        {/* <Alert>
-          <div className="flex h-auto w-full flex-col items-center justify-center gap-x-4 bg-[#192E5B] py-6 text-center font-bold text-white lg:flex-row">
-            <p>
-              <Trans>
-                You are using the Ensign Sandbox. Ready to deploy your models to production?
-              </Trans>
-            </p>
-            <div className="mt-4 rounded-md border border-white bg-[#316D3C] py-1 px-4 lg:mt-0">
-              <a href={EXTERNAL_LINKS.ENSIGN_PRICING} target="_blank" rel="noreferrer">
-                <Trans>Upgrade</Trans>
-              </a>
+    <div className="flex flex-col items-baseline justify-center gap-2 overflow-auto bg-[#1D65A6] py-4 md:border-b md:bg-white">
+      <div className="flex w-[98%] justify-between py-2 xl:w-[92.5%]">
+        {isOnboarded ? (
+          <>
+            {CustomBreadcrumbs ? (
+              CustomBreadcrumbs
+            ) : (
+              <Breadcrumbs separator={separator} className="ml-4 hidden md:block">
+                {items.map((item) => (
+                  <Breadcrumbs.Item key={item + id} className="capitalize">
+                    {item}
+                  </Breadcrumbs.Item>
+                ))}
+              </Breadcrumbs>
+            )}
+            <div className="flex space-x-4">
+              <ScheduleOfficeHours />
+              <MenuDropdownMenu
+                items={dropdownItems}
+                trigger={<ProfileAvatar name={profileData?.name} />}
+                onOpenChange={onOpenChange}
+                isOpen={isOpen}
+                data-cy="menu-dropdown"
+              />
             </div>
-          </div>
-        </Alert> */}
-        <div className="flex w-[98%] justify-between py-2 xl:w-[92.5%]">
-          {isOnboarded ? (
-            <>
-              {CustomBreadcrumbs ? (
-                CustomBreadcrumbs
-              ) : (
-                <Breadcrumbs separator={separator} className="ml-4 hidden md:block">
-                  {items.map((item) => (
-                    <Breadcrumbs.Item key={item + id} className="capitalize">
-                      {item}
-                    </Breadcrumbs.Item>
-                  ))}
-                </Breadcrumbs>
-              )}
-              <div className="flex space-x-4">
-                <ScheduleOfficeHours />
-                <MenuDropdownMenu
-                  items={dropdownItems}
-                  trigger={<ProfileAvatar name={profileData?.name} />}
-                  onOpenChange={onOpenChange}
-                  isOpen={isOpen}
-                  data-cy="menu-dropdown"
-                />
-              </div>
-            </>
-          ) : (
-            <>
-              <span></span>
-              <div className="flex h-20  items-center justify-end">
-                <ProfileCard
-                  picture={profileData?.picture}
-                  owner_name={profileData?.email}
-                  cardSize="medium"
-                />
-                <button
-                  onClick={Logout}
-                  className="ml-4 pb-1 font-bold text-primary"
-                  data-cy="log-out-bttn"
-                >
-                  Log Out
-                </button>
-              </div>
-            </>
-          )}
-        </div>
-        {!isOnboarded && <MobileNav />}
-      </Header>
-    </>
+          </>
+        ) : (
+          <>
+            <span></span>
+            <div className="flex items-center justify-end">
+              <ProfileCard
+                picture={profileData?.picture}
+                owner_name={profileData?.email}
+                cardSize="medium"
+              />
+              <button
+                onClick={Logout}
+                className="ml-4 pb-1 font-bold text-primary"
+                data-cy="log-out-bttn"
+              >
+                <Trans>Log Out</Trans>
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+      {!isOnboarded && <MobileNav />}
+    </div>
   );
 }
 
diff --git a/web/beacon-app/src/constants/dashLayout.tsx b/web/beacon-app/src/constants/dashLayout.tsx
index 04191293d..d716262ea 100644
--- a/web/beacon-app/src/constants/dashLayout.tsx
+++ b/web/beacon-app/src/constants/dashLayout.tsx
@@ -10,8 +10,9 @@ import { TbPlayFootball } from 'react-icons/tb';
 import { EXTERNAL_LINKS, PATH_DASHBOARD } from '@/application';
 import { MenuItem } from '@/types/MenuItem';
 
-export const SIDEBAR_WIDTH = 250;
-export const TOPBAR_HEIGHT = 60;
+/* TODO: Verify if styles are used and remove if not. */
+export const SIDEBAR_WIDTH = 0;
+export const TOPBAR_HEIGHT = 0;
 
 export const menuItems: MenuItem[] = [
   {