diff --git a/web/beacon-app/.gitignore b/web/beacon-app/.gitignore
index f5c171f01..d85091cdb 100644
--- a/web/beacon-app/.gitignore
+++ b/web/beacon-app/.gitignore
@@ -23,3 +23,5 @@ locales
 *.njsproj
 *.sln
 *.sw?
+
+public/tailwind.css
\ No newline at end of file
diff --git a/web/beacon-app/package.json b/web/beacon-app/package.json
index e313bea2b..b30ab7809 100644
--- a/web/beacon-app/package.json
+++ b/web/beacon-app/package.json
@@ -39,15 +39,19 @@
     "@lingui/cli": "^3.16.1",
     "@lingui/core": "^3.16.1",
     "@lingui/macro": "^3.16.1",
-    "@sentry/react": "^7.33.0",
-    "@sentry/tracing": "^7.33.0",
-    "babel-plugin-macros": "^3.1.0",
+    "@radix-ui/react-avatar": "^1.0.1",
     "@rotational/beacon-core": "^1.0.0",
     "@rotational/beacon-foundation": "^1.0.0",
+    "@sentry/react": "^7.33.0",
+    "@sentry/tracing": "^7.33.0",
     "@tanstack/react-query": "^4.22.4",
     "@testing-library/react": "^13.4.0",
+    "@types/styled-components": "^5.1.26",
     "axios": "^1.2.5",
+    "babel-plugin-macros": "^3.1.0",
     "class-variance-authority": "^0.4.0",
+    "classnames": "^2.3.2",
+    "framer-motion": "^8.5.4",
     "localforage": "^1.10.0",
     "react": "^18.2.0",
     "react-aria": "^3.22.0",
@@ -55,7 +59,10 @@
     "react-lazy-load-image-component": "^1.5.6",
     "react-router-dom": "^6.7.0",
     "react-stately": "^3.20.0",
-    "tailwind-merge": "^1.8.1"
+    "react-use": "^17.4.0",
+    "styled-components": "^5.3.6",
+    "tailwind-merge": "^1.8.1",
+    "type-fest": "^3.5.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
diff --git a/web/beacon-app/public/tailwind.css b/web/beacon-app/public/tailwind.css
index d2ccfd3ef..41d05297a 100644
--- a/web/beacon-app/public/tailwind.css
+++ b/web/beacon-app/public/tailwind.css
@@ -3475,6 +3475,10 @@ video {
   z-index: -50;
 }
 
+.z-\[1\] {
+  z-index: 1;
+}
+
 .order-1 {
   order: 1;
 }
@@ -6538,6 +6542,10 @@ video {
   min-height: fit-content;
 }
 
+.min-h-\[8px\] {
+  min-height: 8px;
+}
+
 .w-0 {
   width: 0px;
 }
@@ -6927,10 +6935,6 @@ video {
   max-width: 1536px;
 }
 
-.max-w-\[600px\] {
-  max-width: 600px;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -60014,6 +60018,11 @@ video {
   background-color: rgb(217 217 217 / 1);
 }
 
+.bg-\[\#F7F9FB\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 249 251 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-0 {
   --tw-bg-opacity: 0;
 }
@@ -88361,6 +88370,10 @@ video {
   font-weight: 900;
 }
 
+.\!font-medium {
+  font-weight: 500 !important;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -137658,6 +137671,10 @@ video {
   transition-duration: 1000ms;
 }
 
+.duration-\[350ms\] {
+  transition-duration: 350ms;
+}
+
 .ease-linear {
   transition-timing-function: linear;
 }
@@ -137695,6 +137712,49 @@ video {
   content: var(--tw-content);
 }
 
+.before\:-ml-0\.5::before {
+  content: var(--tw-content);
+  margin-left: -0.125rem;
+}
+
+.before\:-ml-0::before {
+  content: var(--tw-content);
+  margin-left: -0px;
+}
+
+.before\:h-1::before {
+  content: var(--tw-content);
+  height: 0.25rem;
+}
+
+.before\:\!h-2::before {
+  content: var(--tw-content);
+  height: 0.5rem !important;
+}
+
+.before\:w-1::before {
+  content: var(--tw-content);
+  width: 0.25rem;
+}
+
+.before\:\!w-2::before {
+  content: var(--tw-content);
+  width: 0.5rem !important;
+}
+
+.before\:rounded-full::before {
+  content: var(--tw-content);
+  border-radius: 9999px;
+}
+
+.first\:pt-2:first-child {
+  padding-top: 0.5rem;
+}
+
+.last\:mb-0:last-child {
+  margin-bottom: 0px;
+}
+
 .hover\:max-w-\[50\%\]:hover {
   max-width: 50%;
 }
@@ -137703,13 +137763,67 @@ video {
   border-radius: 9999px;
 }
 
+.hover\:bg-secondary-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(73 95 109 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-icon-hover:hover {
   background-color: rgba(217, 217, 217, 0.4);
 }
 
-.hover\:bg-secondary-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(73 95 109 / var(--tw-bg-opacity));
+[dir="ltr"] .ltr\:mr-3 {
+  margin-right: 0.75rem;
+}
+
+[dir="ltr"] .ltr\:pl-6 {
+  padding-left: 1.5rem;
+}
+
+[dir="ltr"] .before\:ltr\:mr-5::before {
+  content: var(--tw-content);
+  margin-right: 1.25rem;
+}
+
+[dir="ltr"] .before\:ltr\:\!mr-\[18px\]::before {
+  content: var(--tw-content);
+  margin-right: 18px !important;
+}
+
+[dir="rtl"] .rtl\:ml-3 {
+  margin-left: 0.75rem;
+}
+
+[dir="rtl"] .rtl\:pr-6 {
+  padding-right: 1.5rem;
+}
+
+[dir="rtl"] .before\:rtl\:ml-5::before {
+  content: var(--tw-content);
+  margin-left: 1.25rem;
+}
+
+[dir="rtl"] .before\:rtl\:\!ml-\[18px\]::before {
+  content: var(--tw-content);
+  margin-left: 18px !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dark\:\!text-white {
+    --tw-text-opacity: 1 !important;
+    color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
+  }
+
+  .dark\:before\:\!bg-white::before {
+    content: var(--tw-content);
+    --tw-bg-opacity: 1 !important;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
+  }
+
+  .dark\:hover\:text-white:hover {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+  }
 }
 
 @media (min-width: 640px) {
@@ -137722,7 +137836,23 @@ video {
   }
 }
 
+@media (min-width: 768px) {
+  .md\:w-72 {
+    width: 18rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:fixed {
+    position: fixed;
+  }
+}
+
 @media (min-width: 1536px) {
+  .\32xl\:w-80 {
+    width: 20rem;
+  }
+
   .\32xl\:pt-80 {
     padding-top: 20rem;
   }
diff --git a/web/beacon-app/src/application/index.ts b/web/beacon-app/src/application/index.ts
new file mode 100644
index 000000000..a3820983e
--- /dev/null
+++ b/web/beacon-app/src/application/index.ts
@@ -0,0 +1 @@
+export * from './routes';
diff --git a/web/beacon-app/src/application/routes/index.ts b/web/beacon-app/src/application/routes/index.ts
new file mode 100644
index 000000000..4a38559a0
--- /dev/null
+++ b/web/beacon-app/src/application/routes/index.ts
@@ -0,0 +1 @@
+export * from './paths';
diff --git a/web/beacon-app/src/application/routes/paths.ts b/web/beacon-app/src/application/routes/paths.ts
new file mode 100644
index 000000000..5388e8d7d
--- /dev/null
+++ b/web/beacon-app/src/application/routes/paths.ts
@@ -0,0 +1,7 @@
+export const routes = {
+  home: '/',
+  projects: '/projects',
+  docs: '/docs',
+  supports: '/supports',
+  profile: '/profile',
+};
diff --git a/web/beacon-app/src/components/Layouts/LeftSidebar/LeftSidebar.stories.tsx b/web/beacon-app/src/components/Layouts/LeftSidebar/LeftSidebar.stories.tsx
new file mode 100644
index 000000000..de0de5c52
--- /dev/null
+++ b/web/beacon-app/src/components/Layouts/LeftSidebar/LeftSidebar.stories.tsx
@@ -0,0 +1,17 @@
+import { Meta, Story } from '@storybook/react';
+
+import LeftSideBar from './LeftSidebar';
+
+export default {
+  title: 'component/layout/LeftSideBar',
+  component: LeftSideBar,
+} as Meta<typeof LeftSideBar>;
+
+const Template: Story<typeof LeftSideBar> = (args) => (
+  <div>
+    <LeftSideBar {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {};
diff --git a/web/beacon-app/src/components/Layouts/LeftSidebar/LeftSidebar.style.css b/web/beacon-app/src/components/Layouts/LeftSidebar/LeftSidebar.style.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/web/beacon-app/src/components/Layouts/LeftSidebar/LeftSidebar.tsx b/web/beacon-app/src/components/Layouts/LeftSidebar/LeftSidebar.tsx
new file mode 100644
index 000000000..53de1d78e
--- /dev/null
+++ b/web/beacon-app/src/components/Layouts/LeftSidebar/LeftSidebar.tsx
@@ -0,0 +1,125 @@
+import { Link } from 'react-router-dom';
+
+import { routes } from '@/application';
+import DocsIcon from '@/components/icons/docs';
+import FolderIcon from '@/components/icons/folder';
+import HomeIcon from '@/components/icons/home-icon';
+import ProfileIcon from '@/components/icons/profile';
+import SupportIcon from '@/components/icons/support';
+import Avatar from '@/components/UI/Avatar';
+import { MenuItem } from '@/components/UI/CollapsibleMenu';
+
+type MenuItem = {
+  name: string;
+  icon: JSX.Element;
+  href: string;
+  isExternal?: boolean;
+  dropdownItems?: Pick<MenuItem, 'name' | 'href'>[];
+};
+
+const menuItems: MenuItem[] = [
+  {
+    name: 'Home',
+    icon: <HomeIcon />,
+    href: routes.home,
+  },
+  {
+    name: 'Projects',
+    icon: <FolderIcon />,
+    href: routes.projects,
+  },
+];
+
+const otherMenuItems: MenuItem[] = [
+  {
+    name: 'Docs',
+    icon: <DocsIcon />,
+    href: routes.docs,
+    isExternal: false,
+  },
+  {
+    name: 'Support',
+    icon: <SupportIcon />,
+    href: routes.supports,
+    isExternal: true,
+  },
+  {
+    name: 'Profile',
+    icon: <ProfileIcon />,
+    href: routes.profile,
+    dropdownItems: [],
+  },
+];
+
+const footerItems = [
+  {
+    name: 'About',
+    href: '/#',
+  },
+  {
+    name: 'Contact Us',
+    href: '/#',
+    isExternal: true,
+  },
+  {
+    name: 'Server Status',
+    href: '/#',
+    isExternal: true,
+  },
+];
+
+function LeftSideBar() {
+  return (
+    <aside
+      className={
+        'xs:w-80 top-0 left-0 right-0 z-40 flex h-screen w-full max-w-full flex-col bg-[#F7F9FB] px-5 pt-5 pb-10 md:w-72 xl:fixed 2xl:w-80'
+      }
+    >
+      <div className="relative flex items-center gap-2 overflow-hidden py-2 pl-4 text-sm">
+        <Avatar alt="Acme Systems" />
+        <h1>
+          Acme <br /> Systems
+        </h1>
+      </div>
+      <div className="grow pt-8">
+        <div>
+          {menuItems.map((item, index) => (
+            <MenuItem
+              href={item.href}
+              key={'default' + item.name + index}
+              name={item.name}
+              icon={item.icon}
+              dropdownItems={item?.dropdownItems}
+              isExternal={item.isExternal}
+            />
+          ))}
+        </div>
+        <hr className="my-5 mx-8"></hr>
+        <div>
+          {otherMenuItems.map((item, index) => (
+            <MenuItem
+              href={item.href}
+              key={'default' + item.name + index}
+              name={item.name}
+              icon={item.icon}
+              dropdownItems={item?.dropdownItems}
+              isExternal={item.isExternal}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="ml-8 space-y-3">
+        <ul className="space-y-1 text-xs text-neutral-600">
+          {footerItems.map((item) => (
+            <li key={item.name}>
+              <Link to={item.href}>{item.name}</Link>
+            </li>
+          ))}
+        </ul>
+        <p className="text-xs text-neutral-600">&copy; Rotational Lab, Inc</p>
+      </div>
+    </aside>
+  );
+}
+
+export default LeftSideBar;
diff --git a/web/beacon-app/src/components/Layouts/LeftSidebar/index.ts b/web/beacon-app/src/components/Layouts/LeftSidebar/index.ts
new file mode 100644
index 000000000..d9b3900ba
--- /dev/null
+++ b/web/beacon-app/src/components/Layouts/LeftSidebar/index.ts
@@ -0,0 +1,3 @@
+import LeftSideBar from './LeftSidebar';
+
+export default LeftSideBar;
diff --git a/web/beacon-app/src/components/common/auth/LandingHeader.tsx b/web/beacon-app/src/components/common/auth/LandingHeader.tsx
index e1d4ff708..d9c23639d 100644
--- a/web/beacon-app/src/components/common/auth/LandingHeader.tsx
+++ b/web/beacon-app/src/components/common/auth/LandingHeader.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@rotational/beacon-core';
 import { Link } from 'react-router-dom';
 
-import { Logo } from '../../ui';
+import { Logo } from '../../UI';
 
 function LandingHeader() {
   return (
diff --git a/web/beacon-app/src/components/common/index.ts b/web/beacon-app/src/components/common/index.ts
index 269586ee8..7b139a21c 100644
--- a/web/beacon-app/src/components/common/index.ts
+++ b/web/beacon-app/src/components/common/index.ts
@@ -1 +1 @@
-export * from './auth';
+export * from './Auth';
diff --git a/web/beacon-app/src/components/icons/chevron-down.tsx b/web/beacon-app/src/components/icons/chevron-down.tsx
new file mode 100644
index 000000000..f9756cbf1
--- /dev/null
+++ b/web/beacon-app/src/components/icons/chevron-down.tsx
@@ -0,0 +1,19 @@
+export function ChevronDown(props: React.SVGAttributes<SVGSVGElement>) {
+  return (
+    <svg
+      width="11"
+      height="6"
+      viewBox="0 0 11 6"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.6635 0.336517C10.9719 0.644826 10.9719 1.14469 10.6635 1.453L6.45302 5.66353C6.14471 5.97184 5.64484 5.97184 5.33653 5.66353L1.12601 1.453C0.817699 1.14469 0.817699 0.644826 1.12601 0.336517C1.43432 0.0282085 1.93418 0.0282085 2.24249 0.336517L5.89478 3.9888L9.54706 0.336517C9.85537 0.0282085 10.3552 0.0282085 10.6635 0.336517Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/web/beacon-app/src/components/icons/close.tsx b/web/beacon-app/src/components/icons/close.tsx
new file mode 100644
index 000000000..fb815ef5f
--- /dev/null
+++ b/web/beacon-app/src/components/icons/close.tsx
@@ -0,0 +1,25 @@
+export function Close(props: React.SVGAttributes<SVGSVGElement>) {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M1.46445 8.53542L8.53552 1.46436"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M1.46446 1.46458L8.53552 8.53564"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/web/beacon-app/src/components/icons/docs.tsx b/web/beacon-app/src/components/icons/docs.tsx
new file mode 100644
index 000000000..4382f70f3
--- /dev/null
+++ b/web/beacon-app/src/components/icons/docs.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+function DocsIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={27}
+      height={22}
+      viewBox="0 0 27 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M1.2 19.25h14.285c.657 0 1.192-.463 1.192-1.031V5.156c0-.016-.008-.03-.01-.044a.324.324 0 00-.107-.199L10.999.1a.432.432 0 00-.229-.093C10.755.007 10.74 0 10.721 0H1.196C.536 0 0 .463 0 1.031V18.22c0 .568.538 1.031 1.2 1.031zm9.918-18.076l4.203 3.639h-3.806a.43.43 0 01-.281-.101.322.322 0 01-.116-.243V1.174zM.794 1.03c0-.19.18-.343.402-.343h9.127v3.78c0 .57.535 1.032 1.192 1.032h4.367v12.719a.322.322 0 01-.116.243.43.43 0 01-.28.1H1.2a.458.458 0 01-.154-.024.412.412 0 01-.132-.075.35.35 0 01-.088-.111.309.309 0 01-.033-.133V1.03z"
+        fill="#000"
+      />
+      <path
+        d="M3.574 8.25h9.529a.43.43 0 00.28-.1.322.322 0 00.117-.244.322.322 0 00-.116-.243.43.43 0 00-.281-.1h-9.53a.43.43 0 00-.28.1.322.322 0 00-.117.243c0 .091.042.179.117.243a.43.43 0 00.28.101zm0 2.75h9.529a.43.43 0 00.28-.1.322.322 0 00.117-.244.322.322 0 00-.116-.243.43.43 0 00-.281-.1h-9.53a.43.43 0 00-.28.1.322.322 0 00-.117.243c0 .091.042.179.117.243a.43.43 0 00.28.101zm0-5.5h3.97a.43.43 0 00.28-.1.322.322 0 00.117-.244.322.322 0 00-.116-.243.43.43 0 00-.28-.1H3.573a.43.43 0 00-.281.1.322.322 0 00-.117.243c0 .091.042.179.117.243a.43.43 0 00.28.101zm0 8.25h9.529a.43.43 0 00.28-.1.322.322 0 00.117-.244.322.322 0 00-.116-.243.43.43 0 00-.281-.1h-9.53a.43.43 0 00-.28.1.322.322 0 00-.117.243c0 .091.042.179.117.243a.43.43 0 00.28.101zm0 2.75h9.529a.43.43 0 00.28-.1.322.322 0 00.117-.244.322.322 0 00-.116-.243.43.43 0 00-.281-.1h-9.53a.43.43 0 00-.28.1.322.322 0 00-.117.243c0 .091.042.179.117.243a.43.43 0 00.28.101z"
+        fill="#000"
+      />
+      <path
+        d="M17.073 3.438h3.574v3.78c0 .57.535 1.032 1.191 1.032h4.368v12.719a.322.322 0 01-.116.243.43.43 0 01-.281.1H11.524a.458.458 0 01-.154-.024.412.412 0 01-.131-.075.35.35 0 01-.089-.111.308.308 0 01-.032-.133v-.688a.322.322 0 00-.117-.243.43.43 0 00-.28-.1.43.43 0 00-.281.1.322.322 0 00-.117.243v.688c0 .568.539 1.031 1.201 1.031H25.81c.657 0 1.191-.463 1.191-1.031V7.906c0-.016-.008-.03-.01-.044a.325.325 0 00-.107-.199L21.325 2.85a.419.419 0 00-.23-.092c-.017-.002-.033-.009-.05-.009h-3.972a.43.43 0 00-.28.1.322.322 0 00-.116.244c0 .09.041.178.116.243a.43.43 0 00.28.1zm4.765 4.124a.43.43 0 01-.28-.1.322.322 0 01-.117-.243V3.924l4.204 3.639h-3.807z"
+        fill="#000"
+      />
+      <path
+        d="M18.662 11h4.765a.43.43 0 00.28-.1.322.322 0 00.116-.244.322.322 0 00-.116-.243.43.43 0 00-.28-.1h-4.765a.43.43 0 00-.281.1.322.322 0 00-.116.243c0 .091.041.179.116.243a.43.43 0 00.28.101zm0 2.75h4.765a.43.43 0 00.28-.1.322.322 0 00.116-.244.322.322 0 00-.116-.243.43.43 0 00-.28-.1h-4.765a.43.43 0 00-.281.1.322.322 0 00-.116.243c0 .091.041.179.116.243a.43.43 0 00.28.101zm0 2.75h4.765a.43.43 0 00.28-.1.322.322 0 00.116-.244.322.322 0 00-.116-.243.43.43 0 00-.28-.1h-4.765a.43.43 0 00-.281.1.322.322 0 00-.116.243c0 .091.041.179.116.243a.43.43 0 00.28.101zm0 2.75h4.765a.43.43 0 00.28-.1.322.322 0 00.116-.244.322.322 0 00-.116-.243.43.43 0 00-.28-.1h-4.765a.43.43 0 00-.281.1.322.322 0 00-.116.243c0 .091.041.179.116.243a.43.43 0 00.28.101z"
+        fill="#000"
+      />
+    </svg>
+  );
+}
+
+export default DocsIcon;
diff --git a/web/beacon-app/src/components/icons/external-icon.tsx b/web/beacon-app/src/components/icons/external-icon.tsx
new file mode 100644
index 000000000..421f6456f
--- /dev/null
+++ b/web/beacon-app/src/components/icons/external-icon.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { twMerge } from 'tailwind-merge';
+
+function ExternalIcon({ className, ...props }: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={twMerge('h-6 w-6', className)}
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+      />
+    </svg>
+  );
+}
+
+export default ExternalIcon;
diff --git a/web/beacon-app/src/components/icons/folder.tsx b/web/beacon-app/src/components/icons/folder.tsx
new file mode 100644
index 000000000..bb7dcfbff
--- /dev/null
+++ b/web/beacon-app/src/components/icons/folder.tsx
@@ -0,0 +1,19 @@
+function FolderIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={23}
+      height={18}
+      viewBox="0 0 23 18"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M20.75 2.703h-7.038a.163.163 0 01-.122-.04L10.766.55a1.432 1.432 0 00-.853-.284h-4.6A1.422 1.422 0 003.89 1.687v1.829H2.062A1.422 1.422 0 00.641 4.937v11.375a1.422 1.422 0 001.421 1.422h15.53a1.33 1.33 0 001.33-1.33v-1.92h1.92a1.33 1.33 0 001.33-1.33V4.125a1.422 1.422 0 00-1.422-1.422zm-3.047 13.7a.111.111 0 01-.112.113H2.062a.203.203 0 01-.203-.203V4.938a.203.203 0 01.204-.204h4.6a.163.163 0 01.122.041L9.61 6.887c.246.184.545.284.853.285H17.5a.203.203 0 01.203.203v9.029zm3.25-3.25a.111.111 0 01-.112.113h-1.92V7.375A1.422 1.422 0 0017.5 5.953h-7.038a.163.163 0 01-.122-.04L7.516 3.8a1.432 1.432 0 00-.853-.284H5.11V1.687a.203.203 0 01.204-.203h4.6a.163.163 0 01.122.041l2.824 2.113c.246.183.545.283.853.284h7.038a.203.203 0 01.203.203v9.029z"
+        fill="#000"
+      />
+    </svg>
+  );
+}
+
+export default FolderIcon;
diff --git a/web/beacon-app/src/components/icons/home-icon.tsx b/web/beacon-app/src/components/icons/home-icon.tsx
new file mode 100644
index 000000000..3949c1067
--- /dev/null
+++ b/web/beacon-app/src/components/icons/home-icon.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+function HomeIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="h-6 w-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+      />
+    </svg>
+  );
+}
+
+export default HomeIcon;
diff --git a/web/beacon-app/src/components/icons/profile.tsx b/web/beacon-app/src/components/icons/profile.tsx
new file mode 100644
index 000000000..c41a86ff8
--- /dev/null
+++ b/web/beacon-app/src/components/icons/profile.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+function ProfileIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="h-6 w-6"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    </svg>
+  );
+}
+
+export default ProfileIcon;
diff --git a/web/beacon-app/src/components/icons/support.tsx b/web/beacon-app/src/components/icons/support.tsx
new file mode 100644
index 000000000..6664da649
--- /dev/null
+++ b/web/beacon-app/src/components/icons/support.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+function SupportIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={22}
+      height={23}
+      viewBox="0 0 22 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M9.7 6.775a6.26 6.26 0 01.712-2.906 5.992 5.992 0 011.964-2.198 5.66 5.66 0 015.581-.433c.096.044.18.113.245.199a.687.687 0 01.109.616.68.68 0 01-.161.276l-2.98 3.096 1.68 1.746 2.98-3.096a.627.627 0 01.86-.056.671.671 0 01.194.254 6.286 6.286 0 01.465 3.33 6.19 6.19 0 01-1.31 3.075 5.845 5.845 0 01-2.687 1.88 5.644 5.644 0 01-3.237.107L5.839 21.37a3.01 3.01 0 01-2.156.96 3.005 3.005 0 01-2.178-.905 3.242 3.242 0 01-.923-2.24 3.248 3.248 0 01.87-2.26l8.355-8.989A6.33 6.33 0 019.7 6.775zm5.85-4.725c-.696 0-1.382.165-2.007.484a4.59 4.59 0 00-1.595 1.353 4.812 4.812 0 00-.858 1.945c-.139.708-.12 1.44.057 2.14a.698.698 0 01-.161.638l-8.597 9.253a1.87 1.87 0 00-.502 1.302c.006.486.197.95.532 1.289.335.34.786.527 1.254.52a1.734 1.734 0 001.242-.552l8.546-8.99a.626.626 0 01.666-.167 4.39 4.39 0 002.353.137 4.49 4.49 0 002.105-1.104 4.744 4.744 0 001.29-2.05c.249-.788.293-1.631.129-2.444L17.31 8.603a.638.638 0 01-.46.198.638.638 0 01-.459-.198l-2.6-2.7a.678.678 0 01-.19-.478.697.697 0 01.19-.478l2.694-2.797c-.308-.067-.62-.1-.935-.1z"
+        fill="#000"
+      />
+    </svg>
+  );
+}
+
+export default SupportIcon;
diff --git a/web/beacon-app/src/components/index.ts b/web/beacon-app/src/components/index.ts
index 80aba2823..f1284af38 100644
--- a/web/beacon-app/src/components/index.ts
+++ b/web/beacon-app/src/components/index.ts
@@ -1,2 +1,2 @@
-export * from './common/auth';
-export * from './ui';
+export * from './Common/Auth';
+export * from './UI';
diff --git a/web/beacon-app/src/components/ui/Avatar/Avatar.stories.tsx b/web/beacon-app/src/components/ui/Avatar/Avatar.stories.tsx
new file mode 100644
index 000000000..5de8c6aa1
--- /dev/null
+++ b/web/beacon-app/src/components/ui/Avatar/Avatar.stories.tsx
@@ -0,0 +1,39 @@
+import { Meta, Story } from '@storybook/react';
+
+import Avatar from './Avatar';
+import { AvatarProps } from './Avatar.type';
+
+export default {
+  title: 'ui/Avatar',
+  component: Avatar,
+  argTypes: {
+    src: {
+      description: 'The src attribute for the img element.',
+      control: {
+        type: 'text',
+      },
+    },
+    srcSet: {
+      description:
+        'The srcSet attribute for the img element. Use this attribute for responsive image display.',
+      control: {
+        type: 'text',
+      },
+    },
+    alt: {
+      description:
+        'Used in combination with src or srcSet to provide an alt attribute for the rendered img element.',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+} as Meta<AvatarProps>;
+
+const Template: Story<AvatarProps> = (args) => <Avatar {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  src: 'https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80',
+  alt: 'Colm Tuite',
+};
diff --git a/web/beacon-app/src/components/ui/Avatar/Avatar.styles.tsx b/web/beacon-app/src/components/ui/Avatar/Avatar.styles.tsx
new file mode 100644
index 000000000..50d1d648a
--- /dev/null
+++ b/web/beacon-app/src/components/ui/Avatar/Avatar.styles.tsx
@@ -0,0 +1,35 @@
+import * as RadixAvatar from '@radix-ui/react-avatar';
+import styled from 'styled-components';
+
+export const StyledAvatar = styled(RadixAvatar.Root)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  overflow: hidden;
+  user-select: none;
+  width: 45px;
+  height: 45px;
+  border-radius: 100%;
+  background-color: gray;
+`;
+
+export const StyledAvatarImage = styled(RadixAvatar.Image)`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+`;
+
+export const StyledAvatarFallback = styled(RadixAvatar.Fallback)`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--colors-secondary-900);
+  color: #fff;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+`;
diff --git a/web/beacon-app/src/components/ui/Avatar/Avatar.tsx b/web/beacon-app/src/components/ui/Avatar/Avatar.tsx
new file mode 100644
index 000000000..28c218cfd
--- /dev/null
+++ b/web/beacon-app/src/components/ui/Avatar/Avatar.tsx
@@ -0,0 +1,25 @@
+import { twMerge } from 'tailwind-merge';
+
+import getInitials from '@/utils/get-initials';
+
+import { StyledAvatar, StyledAvatarFallback, StyledAvatarImage } from './Avatar.styles';
+import { AvatarProps } from './Avatar.type';
+
+const Avatar = (props: AvatarProps) => {
+  const { className, fallbackProps, ...imageProps } = props;
+
+  return (
+    <StyledAvatar>
+      <StyledAvatarImage {...imageProps} className={twMerge(className)} />
+      <StyledAvatarFallback
+        delayMs={600}
+        {...fallbackProps}
+        className={twMerge('capitalize', fallbackProps?.className)}
+      >
+        {getInitials(props.alt)}
+      </StyledAvatarFallback>
+    </StyledAvatar>
+  );
+};
+
+export default Avatar;
diff --git a/web/beacon-app/src/components/ui/Avatar/Avatar.type.ts b/web/beacon-app/src/components/ui/Avatar/Avatar.type.ts
new file mode 100644
index 000000000..252848cdd
--- /dev/null
+++ b/web/beacon-app/src/components/ui/Avatar/Avatar.type.ts
@@ -0,0 +1,8 @@
+import { AvatarFallbackProps, AvatarImageProps } from '@radix-ui/react-avatar';
+import { SetRequired } from 'type-fest';
+
+type FallbackProps = Omit<AvatarFallbackProps, 'children'>;
+
+export type AvatarProps = {
+  fallbackProps?: FallbackProps;
+} & SetRequired<AvatarImageProps, 'alt'>;
diff --git a/web/beacon-app/src/components/ui/Avatar/index.ts b/web/beacon-app/src/components/ui/Avatar/index.ts
new file mode 100644
index 000000000..f04201c1b
--- /dev/null
+++ b/web/beacon-app/src/components/ui/Avatar/index.ts
@@ -0,0 +1,4 @@
+import Avatar from './Avatar';
+
+export * from './Avatar.type';
+export default Avatar;
diff --git a/web/beacon-app/src/components/ui/CollapsibleMenu.tsx b/web/beacon-app/src/components/ui/CollapsibleMenu.tsx
new file mode 100644
index 000000000..c0d94f393
--- /dev/null
+++ b/web/beacon-app/src/components/ui/CollapsibleMenu.tsx
@@ -0,0 +1,122 @@
+// import { useRouter } from 'next/router';
+import cn from 'classnames';
+import { motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import useMeasure from 'react-use/lib/useMeasure';
+
+import { ChevronDown } from '../icons/chevron-down';
+import ExternalIcon from '../icons/external-icon';
+
+type MenuItemProps = {
+  name?: string;
+  icon: React.ReactNode;
+  href: string;
+  dropdownItems?: DropdownItemProps[];
+  isExternal?: boolean;
+};
+
+type DropdownItemProps = {
+  name: string;
+  href: string;
+};
+
+export function MenuItem({ name, icon, href, dropdownItems, isExternal }: MenuItemProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [ref, { height }] = useMeasure<HTMLUListElement>();
+  const location = useLocation();
+
+  const isChildrenActive =
+    dropdownItems && dropdownItems.some((item) => item.href === location.pathname);
+
+  useEffect(() => {
+    if (isChildrenActive) {
+      setIsOpen(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="mb-2 min-h-[8px] list-none last:mb-0">
+      {dropdownItems?.length ? (
+        <>
+          <div
+            onClick={() => setIsOpen(!isOpen)}
+            role="button"
+            aria-hidden="true"
+            className={cn(
+              'relative flex h-12 cursor-pointer items-center justify-between whitespace-nowrap  rounded-lg px-4 text-sm transition-all',
+              isChildrenActive
+                ? 'text-white'
+                : 'text-gray-500 hover:text-brand dark:hover:text-white'
+            )}
+          >
+            <span className="z-[1] flex items-center ltr:mr-3 rtl:ml-3">
+              <span className="ltr:mr-3 rtl:ml-3">{icon}</span>
+              {name}
+            </span>
+            <span
+              className={`z-[1] transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+            >
+              <ChevronDown />
+            </span>
+
+            {isChildrenActive && (
+              <motion.span
+                className="bg-brand shadow-large absolute bottom-0 left-0 right-0 h-full w-full rounded-lg"
+                layoutId="menu-item-active-indicator"
+              />
+            )}
+          </div>
+          <div
+            style={{
+              height: isOpen ? height : 0,
+            }}
+            className="ease-[cubic-bezier(0.33, 1, 0.68, 1)] overflow-hidden transition-all duration-[350ms]"
+          >
+            <ul ref={ref}>
+              {dropdownItems.map((item, index) => (
+                <li className="first:pt-2" key={index}>
+                  <NavLink
+                    to={href}
+                    className={({ isActive }) =>
+                      !isActive
+                        ? 'text-gray-500 before:bg-gray-500 hover:text-brand flex items-center rounded-lg p-3 text-sm transition-all before:h-1 before:w-1 before:rounded-full ltr:pl-6 before:ltr:mr-5 rtl:pr-6 before:rtl:ml-5 dark:hover:text-white'
+                        : '!text-brand before:!bg-brand !font-medium before:-ml-0.5 before:!h-2 before:!w-2 before:ltr:!mr-[18px] before:rtl:!ml-[18px] dark:!text-white dark:before:!bg-white'
+                    }
+                  >
+                    {item.name}
+                  </NavLink>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </>
+      ) : (
+        <NavLink
+          to={href}
+          target={isExternal ? '_blank' : '_self'}
+          rel="noopener noreferrer"
+          className={({ isActive }) =>
+            cn(
+              `${isActive ? 'transition-all' : 'text-secondary-900'}`,
+              'relative flex h-12 items-center whitespace-nowrap pl-8 text-sm text-secondary-900'
+            )
+          }
+        >
+          <span className="relative z-[1] mr-3">{icon}</span>
+          <span className="relative z-[1] flex font-normal">
+            {name} {isExternal && <ExternalIcon className="ml-1 h-3 w-3" />}
+          </span>
+
+          {href === location.pathname && (
+            <motion.span
+              className="absolute bottom-0 left-0 right-0 h-full w-full border-l-4 border-secondary-900 bg-secondary-100 shadow-1"
+              layoutId="menu-item-active-indicator"
+            />
+          )}
+        </NavLink>
+      )}
+    </div>
+  );
+}
diff --git a/web/beacon-app/src/components/ui/index.ts b/web/beacon-app/src/components/ui/index.ts
index c6444c91f..b5128bad1 100644
--- a/web/beacon-app/src/components/ui/index.ts
+++ b/web/beacon-app/src/components/ui/index.ts
@@ -1 +1,2 @@
+export * from './Avatar';
 export { default as Logo } from './Logo';
diff --git a/web/beacon-app/src/utils/get-initials.ts b/web/beacon-app/src/utils/get-initials.ts
new file mode 100644
index 000000000..ac8cae348
--- /dev/null
+++ b/web/beacon-app/src/utils/get-initials.ts
@@ -0,0 +1,13 @@
+/**
+ * Get initials of a given name (e.g: Calumn Scott -> CS)
+ * @param name
+ * @returns string
+ */
+export default function getInitials(name = '') {
+  return name
+    .match(/(^\S\S?|\b\S)?/g)
+    ?.join('')
+    .match(/(^\S|\S$)?/g)
+    ?.join('')
+    .toUpperCase();
+}
diff --git a/web/beacon-app/yarn.lock b/web/beacon-app/yarn.lock
index 409bc5439..935f197e1 100644
--- a/web/beacon-app/yarn.lock
+++ b/web/beacon-app/yarn.lock
@@ -1105,7 +1105,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.5.0", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.8", "@babel/runtime@^7.5.0", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.20.13"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.13.tgz#7055ab8a7cff2b8f6058bf6ae45ff84ad2aded4b"
   integrity sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==
@@ -1257,6 +1257,13 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
 "@emotion/is-prop-valid@^1.1.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz#7f2d35c97891669f7e276eb71c83376a5dc44c83"
@@ -1264,6 +1271,11 @@
   dependencies:
     "@emotion/memoize" "^0.8.0"
 
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@emotion/memoize@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
@@ -1775,6 +1787,59 @@
   dependencies:
     moo "^0.5.1"
 
+"@motionone/animation@^10.15.1":
+  version "10.15.1"
+  resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.15.1.tgz#4a85596c31cbc5100ae8eb8b34c459fb0ccf6807"
+  integrity sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==
+  dependencies:
+    "@motionone/easing" "^10.15.1"
+    "@motionone/types" "^10.15.1"
+    "@motionone/utils" "^10.15.1"
+    tslib "^2.3.1"
+
+"@motionone/dom@^10.15.3":
+  version "10.15.5"
+  resolved "https://registry.yarnpkg.com/@motionone/dom/-/dom-10.15.5.tgz#4af18f8136d85c2fc997cac98121c969f6731802"
+  integrity sha512-Xc5avlgyh3xukU9tydh9+8mB8+2zAq+WlLsC3eEIp7Ax7DnXgY7Bj/iv0a4X2R9z9ZFZiaXK3BO0xMYHKbAAdA==
+  dependencies:
+    "@motionone/animation" "^10.15.1"
+    "@motionone/generators" "^10.15.1"
+    "@motionone/types" "^10.15.1"
+    "@motionone/utils" "^10.15.1"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
+"@motionone/easing@^10.15.1":
+  version "10.15.1"
+  resolved "https://registry.yarnpkg.com/@motionone/easing/-/easing-10.15.1.tgz#95cf3adaef34da6deebb83940d8143ede3deb693"
+  integrity sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==
+  dependencies:
+    "@motionone/utils" "^10.15.1"
+    tslib "^2.3.1"
+
+"@motionone/generators@^10.15.1":
+  version "10.15.1"
+  resolved "https://registry.yarnpkg.com/@motionone/generators/-/generators-10.15.1.tgz#dc6abb11139d1bafe758a41c134d4c753a9b871c"
+  integrity sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==
+  dependencies:
+    "@motionone/types" "^10.15.1"
+    "@motionone/utils" "^10.15.1"
+    tslib "^2.3.1"
+
+"@motionone/types@^10.15.1":
+  version "10.15.1"
+  resolved "https://registry.yarnpkg.com/@motionone/types/-/types-10.15.1.tgz#89441b54285012795cbba8612cbaa0fa420db3eb"
+  integrity sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==
+
+"@motionone/utils@^10.15.1":
+  version "10.15.1"
+  resolved "https://registry.yarnpkg.com/@motionone/utils/-/utils-10.15.1.tgz#6b5f51bde75be88b5411e084310299050368a438"
+  integrity sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==
+  dependencies:
+    "@motionone/types" "^10.15.1"
+    hey-listen "^1.0.8"
+    tslib "^2.3.1"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -1852,6 +1917,61 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@radix-ui/react-avatar@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-avatar/-/react-avatar-1.0.1.tgz#d25ef10b56210039c152e45209dd41a1afdc192e"
+  integrity sha512-GfUgw4i/OWmb76bmM9qLnedYOsXhPvRXL6xaxyZzhiIVEwo2KbmxTaSQv5r1Oh8nNqBs1vfYPGuVmhEfpxpnvw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-callback-ref" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
+"@radix-ui/react-compose-refs@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
+  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-context@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
+  integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-primitive@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz#c1ebcce283dd2f02e4fbefdaa49d1cb13dbc990a"
+  integrity sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.1"
+
+"@radix-ui/react-slot@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81"
+  integrity sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.0"
+
+"@radix-ui/react-use-callback-ref@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
+  integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-layout-effect@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
+  integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@react-aria/breadcrumbs@^3.4.1":
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/@react-aria/breadcrumbs/-/breadcrumbs-3.4.1.tgz#f0fc1353bf402cac2d2312d7de60f545366e1413"
@@ -4159,6 +4279,14 @@
   dependencies:
     "@types/unist" "*"
 
+"@types/hoist-non-react-statics@*":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz#693b316ad323ea97eed6b38ed1a3cc02b1672b57"
@@ -4196,6 +4324,11 @@
     expect "^29.0.0"
     pretty-format "^29.0.0"
 
+"@types/js-cookie@^2.2.6":
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.7.tgz#226a9e31680835a6188e887f3988e60c04d3f6a3"
+  integrity sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==
+
 "@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz"
@@ -4320,6 +4453,15 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
+"@types/styled-components@^5.1.26":
+  version "5.1.26"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.26.tgz#5627e6812ee96d755028a98dae61d28e57c233af"
+  integrity sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    csstype "^3.0.2"
+
 "@types/tapable@^1", "@types/tapable@^1.0.5":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.8.tgz#b94a4391c85666c7b73299fd3ad79d4faa435310"
@@ -4849,6 +4991,11 @@
     "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
+"@xobotyi/scrollbar-width@^1.9.5":
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz#80224a6919272f405b87913ca13b92929bdf3c4d"
+  integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -6093,6 +6240,11 @@ class-variance-authority@^0.4.0:
   resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.4.0.tgz#2ff1b5a836a68ce7a2dac0cc12f6fdc50e47f666"
   integrity sha512-74enNN8O9ZNieycac/y8FxqgyzZhZbxmCitAtAeUrLPlxjSd5zA7LfpprmxEcOmQBnaGs5hYhiSGnJ0mqrtBLQ==
 
+classnames@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 clean-css@^4.2.3:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"
@@ -6401,6 +6553,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.25.1, core-js-compat@^3.8.1:
   version "3.27.2"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.27.2.tgz#607c50ad6db8fd8326af0b2883ebb987be3786da"
@@ -6556,6 +6715,13 @@ css-color-keywords@^1.0.0:
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
   integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
 
+css-in-js-utils@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz#640ae6a33646d401fc720c54fc61c42cd76ae2bb"
+  integrity sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==
+  dependencies:
+    hyphenate-style-name "^1.0.3"
+
 css-loader@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.6.0.tgz#2e4b2c7e6e2d27f8c8f28f61bffcd2e6c91ef645"
@@ -6595,6 +6761,14 @@ css-to-react-native@^3.0.0:
     css-color-keywords "^1.0.0"
     postcss-value-parser "^4.0.2"
 
+css-tree@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
 css-what@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
@@ -6627,7 +6801,7 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^3.0.2:
+csstype@^3.0.2, csstype@^3.0.6:
   version "3.1.1"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
@@ -7867,6 +8041,21 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
+fast-loops@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.3.tgz#ce96adb86d07e7bf9b4822ab9c6fac9964981f75"
+  integrity sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==
+
+fast-shallow-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz#d4dcaf6472440dcefa6f88b98e3251e27f25628b"
+  integrity sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==
+
+fastest-stable-stringify@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz#3757a6774f6ec8de40c4e86ec28ea02417214c76"
+  integrity sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==
+
 fastq@^1.6.0:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.15.0.tgz#d04d07c6a2a68fe4599fea8d2e103a937fae6b3a"
@@ -8125,6 +8314,17 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
+framer-motion@^8.5.4:
+  version "8.5.4"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-8.5.4.tgz#aa6d88f2af8d7aa1b58ca8e53b7ccce0d8c4089b"
+  integrity sha512-xBVovXUIdpKvRvIPsrSTiyXZUYyct9zarzdVeyzv+V6DFsDpHIuppyOjDO8VM1fBspDn+rUU4ZFZ5yJxLmzebQ==
+  dependencies:
+    "@motionone/dom" "^10.15.3"
+    hey-listen "^1.0.8"
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -8651,6 +8851,11 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -8660,7 +8865,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -8785,6 +8990,11 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
+hyphenate-style-name@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -8889,6 +9099,14 @@ inline-style-parser@0.1.1:
   resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
   integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
 
+inline-style-prefixer@^6.0.0:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-6.0.4.tgz#4290ed453ab0e4441583284ad86e41ad88384f44"
+  integrity sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==
+  dependencies:
+    css-in-js-utils "^3.1.0"
+    fast-loops "^1.1.3"
+
 inquirer@^7.3.3:
   version "7.3.3"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
@@ -9582,6 +9800,11 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+js-cookie@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
 js-sdsl@^4.1.4:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0"
@@ -10092,6 +10315,11 @@ mdast-util-to-string@^1.0.0:
   resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527"
   integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 mdurl@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -10418,6 +10646,20 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb"
   integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==
 
+nano-css@^5.3.1:
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.3.5.tgz#3075ea29ffdeb0c7cb6d25edb21d8f7fa8e8fe8e"
+  integrity sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==
+  dependencies:
+    css-tree "^1.1.2"
+    csstype "^3.0.6"
+    fastest-stable-stringify "^2.0.2"
+    inline-style-prefixer "^6.0.0"
+    rtl-css-js "^1.14.0"
+    sourcemap-codec "^1.4.8"
+    stacktrace-js "^2.0.2"
+    stylis "^4.0.6"
+
 nanoid@^3.3.1, nanoid@^3.3.4:
   version "3.3.4"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz"
@@ -11853,6 +12095,31 @@ react-stately@^3.20.0:
     "@react-stately/tree" "^3.4.1"
     "@react-types/shared" "^3.16.0"
 
+react-universal-interface@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"
+  integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==
+
+react-use@^17.4.0:
+  version "17.4.0"
+  resolved "https://registry.yarnpkg.com/react-use/-/react-use-17.4.0.tgz#cefef258b0a6c534a5c8021c2528ac6e1a4cdc6d"
+  integrity sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==
+  dependencies:
+    "@types/js-cookie" "^2.2.6"
+    "@xobotyi/scrollbar-width" "^1.9.5"
+    copy-to-clipboard "^3.3.1"
+    fast-deep-equal "^3.1.3"
+    fast-shallow-equal "^1.0.0"
+    js-cookie "^2.2.1"
+    nano-css "^5.3.1"
+    react-universal-interface "^0.6.2"
+    resize-observer-polyfill "^1.5.1"
+    screenfull "^5.1.0"
+    set-harmonic-interval "^1.0.1"
+    throttle-debounce "^3.0.1"
+    ts-easing "^0.2.0"
+    tslib "^2.1.0"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
@@ -12164,6 +12431,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
@@ -12256,6 +12528,13 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
+rtl-css-js@^1.14.0:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.16.1.tgz#4b48b4354b0ff917a30488d95100fbf7219a3e80"
+  integrity sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -12390,6 +12669,11 @@ schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+screenfull@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
+  integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
+
 "semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -12473,6 +12757,11 @@ set-blocking@^2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
 
+set-harmonic-interval@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz#e1773705539cdfb80ce1c3d99e7f298bb3995249"
+  integrity sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==
+
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -12653,6 +12942,11 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
+source-map@0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+  integrity sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==
+
 source-map@^0.5.0, source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -12740,6 +13034,13 @@ stable@^0.1.8:
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
   integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
 
+stack-generator@^2.0.5:
+  version "2.0.10"
+  resolved "https://registry.yarnpkg.com/stack-generator/-/stack-generator-2.0.10.tgz#8ae171e985ed62287d4f1ed55a1633b3fb53bb4d"
+  integrity sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==
+  dependencies:
+    stackframe "^1.3.4"
+
 stack-utils@^2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.6.tgz#aaf0748169c02fc33c8232abccf933f54a1cc34f"
@@ -12757,6 +13058,23 @@ stackframe@^1.3.4:
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
   integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
 
+stacktrace-gps@^3.0.4:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz#0c40b24a9b119b20da4525c398795338966a2fb0"
+  integrity sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==
+  dependencies:
+    source-map "0.5.6"
+    stackframe "^1.3.4"
+
+stacktrace-js@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/stacktrace-js/-/stacktrace-js-2.0.2.tgz#4ca93ea9f494752d55709a081d400fdaebee897b"
+  integrity sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==
+  dependencies:
+    error-stack-parser "^2.0.6"
+    stack-generator "^2.0.5"
+    stacktrace-gps "^3.0.4"
+
 state-toggle@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe"
@@ -12997,7 +13315,7 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-components@^5.3.5:
+styled-components@^5.3.5, styled-components@^5.3.6:
   version "5.3.6"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.6.tgz#27753c8c27c650bee9358e343fc927966bfd00d1"
   integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==
@@ -13013,6 +13331,11 @@ styled-components@^5.3.5:
     shallowequal "^1.1.0"
     supports-color "^5.5.0"
 
+stylis@^4.0.6:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
+  integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
+
 supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
@@ -13225,6 +13548,11 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+throttle-debounce@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
+  integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -13322,6 +13650,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 toidentifier@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
@@ -13379,6 +13712,11 @@ ts-dedent@^2.0.0, ts-dedent@^2.2.0:
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
   integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
 
+ts-easing@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ts-easing/-/ts-easing-0.2.0.tgz#c8a8a35025105566588d87dbda05dd7fbfa5a4ec"
+  integrity sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==
+
 ts-node@^10.8.1:
   version "10.9.1"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.1.tgz#e73de9102958af9e1f0b168a6ff320e25adcff4b"
@@ -13428,6 +13766,11 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
   integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
 
+tslib@^2.3.1:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
+  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -13479,6 +13822,11 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
+type-fest@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-3.5.3.tgz#9f8cc2725aa8978ca65a4e6853e74748b0f2d27b"
+  integrity sha512-V2+og4j/rWReWvaFrse3s9g2xvUv/K9Azm/xo6CjIuq7oeGqsoimC7+9/A3tfvNcbQf8RPSVj/HV81fB4DJrjA==
+
 type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"