From 99e97d11fe10f4e1b13eda7cc4fb3266bf6d6fcb Mon Sep 17 00:00:00 2001
From: Majk Shkurti <majkshkurti@outlook.com>
Date: Sun, 16 Jul 2023 22:07:04 +0200
Subject: [PATCH] wip: refactor nextjs/mui

---
 app/client-v2/.vscode/launch.json             |  25 +-
 .../goat/app/(dashboard)/DashboardSidebar.tsx |  91 +++++++
 .../goat/app/(dashboard)/content/page.tsx     |   3 +
 .../apps/goat/app/(dashboard)/help/page.tsx   |   3 +
 .../goat/app/(dashboard)}/home/CardList.tsx   |  21 +-
 .../(dashboard)}/home/NewsLetterSection.tsx   |  13 +-
 .../goat/app/(dashboard)/home/page.tsx}       |  59 ++---
 .../goat/app/(dashboard)/layout.tsx}          |  37 ++-
 .../goat/app/(dashboard)/settings/layout.tsx  | 112 +++++++++
 .../settings/organization/ManageUsers.tsx     |  28 ++-
 .../settings/organization/Overview.tsx        |  16 +-
 .../settings/organization/page.tsx}           |   6 +-
 .../goat/app/(dashboard)/settings/page.tsx    |   5 +
 .../settings/privacy-preference/page.tsx      |   3 +
 .../settings/subscription/Subscription.tsx    |   7 +-
 .../subscription/SubscriptionSettings.tsx     |   8 +-
 .../subscription/SubscriptionStatusCard.tsx   |   9 +-
 .../settings/subscription/page.tsx}           |   7 +-
 .../app/api/auth/[...nextauth]/options.ts     | 222 +++++++-----------
 .../apps/goat/app/components/Navbar.tsx       |  28 ---
 app/client-v2/apps/goat/app/extra/page.tsx    |   3 -
 app/client-v2/apps/goat/app/layout.tsx        |  27 +--
 .../globals.css => map/[projectId]/page.tsx}  |   0
 app/client-v2/apps/goat/app/map/page.tsx      |   8 -
 .../app/onboarding}/auth/AuthTemplate.tsx     |   7 +-
 .../onboarding}/auth/OrganizationCreation.tsx |   0
 .../app/onboarding}/auth/steps/Create.tsx     |   0
 .../apps/goat/app/onboarding/page.tsx         |   0
 app/client-v2/apps/goat/app/page.tsx          |  19 +-
 app/client-v2/apps/goat/app/server/page.tsx   |  19 --
 .../apps/goat/components/Copyright.tsx        |   4 +
 .../goat/{app => }/components/MapByStyle.tsx  |   0
 .../goat/{app => }/components/MapDemo.tsx     |   0
 app/client-v2/apps/goat/components/Protip.tsx |  22 ++
 .../goat/{app => }/components/UserCard.tsx    |   0
 app/client-v2/apps/goat/layouts/Home.tsx      |  27 +++
 app/client-v2/apps/goat/lib/ThemeRegistry.tsx |  20 ++
 .../apps/goat/{app => lib}/configs/axios.ts   |   0
 .../{app => lib}/context/AuthProvider.tsx     |   0
 .../{app => lib}/context/StoreProvider.tsx    |   0
 .../apps/goat/{app => lib}/store/index.ts     |   0
 .../goat/{app => lib}/store/map/actions.ts    |   0
 .../apps/goat/{app => lib}/store/map/api.ts   |   0
 .../apps/goat/{app => lib}/store/map/slice.ts |   0
 app/client-v2/apps/goat/lib/theme.ts          |  37 +++
 .../apps/goat/{app => lib}/utils/constants.js |   0
 .../goat/{app => lib}/utils/layer_demo.json   |   0
 app/client-v2/apps/goat/next.config.js        |   5 +
 app/client-v2/apps/goat/package.json          |  11 +-
 app/client-v2/apps/goat/styles/globals.css    |   0
 .../apps/goat/{app => }/styles/map.css        |   0
 app/client-v2/apps/goat/tsconfig.json         |  23 +-
 .../[...nextauth] => types}/next-auth.d.ts    |  10 +-
 app/client-v2/apps/storybook/package.json     |   2 +-
 .../keycloak-theme/src/login/Template.tsx     |  18 +-
 .../src/login/pages/RegisterUserProfile.tsx   |   3 +-
 .../packages/keycloak-theme/src/theme.tsx     |   8 +-
 .../packages/ui/assets/svg/GOATLogoDark.tsx   |  10 +-
 .../packages/ui/assets/svg/GOATLogoGreen.tsx  |  10 +-
 app/client-v2/packages/ui/components/Box.tsx  |   3 +
 .../packages/ui/components/Button.tsx         |   7 +-
 .../ui/components/DashboardSidebar.tsx        |  89 -------
 .../packages/ui/components/Footer.tsx         |   2 +
 app/client-v2/packages/ui/components/Grid.tsx |   3 +
 .../ui/components/Icon/IconButton.tsx         |   2 +
 .../packages/ui/components/Lists/ChipList.tsx |   2 +
 .../packages/ui/components/Text/TextField.tsx |  18 +-
 .../ui/components/temporary/home/index.ts     |   1 -
 .../temporary/settings/Settings.tsx           | 112 ---------
 .../privacyPreferences/PrivacyPreferences.tsx |   7 -
 app/client-v2/packages/ui/components/theme.ts |   8 +-
 .../packages/ui/lib/ThemeProvider.tsx         | 115 ++-------
 app/client-v2/packages/ui/lib/icon.ts         |  33 +--
 app/client-v2/packages/ui/lib/icons.ts        |   3 -
 app/client-v2/packages/ui/lib/index.ts        |  14 +-
 app/client-v2/packages/ui/lib/spacing.ts      |  43 +---
 app/client-v2/packages/ui/lib/typography.ts   | 183 +--------------
 .../packages/ui/lib/useIsDarkModeEnabled.ts   |  73 ------
 app/client-v2/packages/ui/stories/theme.ts    |   8 +-
 app/client-v2/packages/ui/tools/getBrowser.ts |  12 -
 .../ui/tools/getIsDarkModeEnabledOsDefault.ts |   4 -
 app/client-v2/pnpm-lock.yaml                  | 159 +++++++------
 82 files changed, 730 insertions(+), 1167 deletions(-)
 create mode 100644 app/client-v2/apps/goat/app/(dashboard)/DashboardSidebar.tsx
 create mode 100644 app/client-v2/apps/goat/app/(dashboard)/content/page.tsx
 create mode 100644 app/client-v2/apps/goat/app/(dashboard)/help/page.tsx
 rename app/client-v2/{packages/ui/components/temporary => apps/goat/app/(dashboard)}/home/CardList.tsx (86%)
 rename app/client-v2/{packages/ui/components/temporary => apps/goat/app/(dashboard)}/home/NewsLetterSection.tsx (84%)
 rename app/client-v2/{packages/ui/components/temporary/home/Home.tsx => apps/goat/app/(dashboard)/home/page.tsx} (86%)
 rename app/client-v2/{packages/ui/components/temporary/DashboardLayout.tsx => apps/goat/app/(dashboard)/layout.tsx} (74%)
 create mode 100644 app/client-v2/apps/goat/app/(dashboard)/settings/layout.tsx
 rename app/client-v2/{packages/ui/components/temporary => apps/goat/app/(dashboard)}/settings/organization/ManageUsers.tsx (94%)
 rename app/client-v2/{packages/ui/components/temporary => apps/goat/app/(dashboard)}/settings/organization/Overview.tsx (91%)
 rename app/client-v2/{packages/ui/components/temporary/settings/organization/Organization.tsx => apps/goat/app/(dashboard)/settings/organization/page.tsx} (90%)
 create mode 100644 app/client-v2/apps/goat/app/(dashboard)/settings/page.tsx
 create mode 100644 app/client-v2/apps/goat/app/(dashboard)/settings/privacy-preference/page.tsx
 rename app/client-v2/{packages/ui/components/temporary => apps/goat/app/(dashboard)}/settings/subscription/Subscription.tsx (96%)
 rename app/client-v2/{packages/ui/components/temporary => apps/goat/app/(dashboard)}/settings/subscription/SubscriptionSettings.tsx (86%)
 rename app/client-v2/{packages/ui/components/temporary => apps/goat/app/(dashboard)}/settings/subscription/SubscriptionStatusCard.tsx (90%)
 rename app/client-v2/{packages/ui/components/temporary/settings/subscription/Overview.tsx => apps/goat/app/(dashboard)/settings/subscription/page.tsx} (95%)
 delete mode 100644 app/client-v2/apps/goat/app/components/Navbar.tsx
 delete mode 100644 app/client-v2/apps/goat/app/extra/page.tsx
 rename app/client-v2/apps/goat/app/{styles/globals.css => map/[projectId]/page.tsx} (100%)
 rename app/client-v2/{packages/ui/components/temporary => apps/goat/app/onboarding}/auth/AuthTemplate.tsx (93%)
 rename app/client-v2/{packages/ui/components/temporary => apps/goat/app/onboarding}/auth/OrganizationCreation.tsx (100%)
 rename app/client-v2/{packages/ui/components/temporary => apps/goat/app/onboarding}/auth/steps/Create.tsx (100%)
 create mode 100644 app/client-v2/apps/goat/app/onboarding/page.tsx
 delete mode 100644 app/client-v2/apps/goat/app/server/page.tsx
 create mode 100644 app/client-v2/apps/goat/components/Copyright.tsx
 rename app/client-v2/apps/goat/{app => }/components/MapByStyle.tsx (100%)
 rename app/client-v2/apps/goat/{app => }/components/MapDemo.tsx (100%)
 create mode 100644 app/client-v2/apps/goat/components/Protip.tsx
 rename app/client-v2/apps/goat/{app => }/components/UserCard.tsx (100%)
 create mode 100644 app/client-v2/apps/goat/layouts/Home.tsx
 create mode 100644 app/client-v2/apps/goat/lib/ThemeRegistry.tsx
 rename app/client-v2/apps/goat/{app => lib}/configs/axios.ts (100%)
 rename app/client-v2/apps/goat/{app => lib}/context/AuthProvider.tsx (100%)
 rename app/client-v2/apps/goat/{app => lib}/context/StoreProvider.tsx (100%)
 rename app/client-v2/apps/goat/{app => lib}/store/index.ts (100%)
 rename app/client-v2/apps/goat/{app => lib}/store/map/actions.ts (100%)
 rename app/client-v2/apps/goat/{app => lib}/store/map/api.ts (100%)
 rename app/client-v2/apps/goat/{app => lib}/store/map/slice.ts (100%)
 create mode 100644 app/client-v2/apps/goat/lib/theme.ts
 rename app/client-v2/apps/goat/{app => lib}/utils/constants.js (100%)
 rename app/client-v2/apps/goat/{app => lib}/utils/layer_demo.json (100%)
 create mode 100644 app/client-v2/apps/goat/styles/globals.css
 rename app/client-v2/apps/goat/{app => }/styles/map.css (100%)
 rename app/client-v2/apps/goat/{app/api/auth/[...nextauth] => types}/next-auth.d.ts (96%)
 create mode 100644 app/client-v2/packages/ui/components/Box.tsx
 create mode 100644 app/client-v2/packages/ui/components/Grid.tsx
 delete mode 100644 app/client-v2/packages/ui/components/temporary/home/index.ts
 delete mode 100644 app/client-v2/packages/ui/components/temporary/settings/Settings.tsx
 delete mode 100644 app/client-v2/packages/ui/components/temporary/settings/privacyPreferences/PrivacyPreferences.tsx
 delete mode 100644 app/client-v2/packages/ui/lib/icons.ts
 delete mode 100644 app/client-v2/packages/ui/lib/useIsDarkModeEnabled.ts
 delete mode 100644 app/client-v2/packages/ui/tools/getBrowser.ts
 delete mode 100644 app/client-v2/packages/ui/tools/getIsDarkModeEnabledOsDefault.ts

diff --git a/app/client-v2/.vscode/launch.json b/app/client-v2/.vscode/launch.json
index 0477c86c3..f91782882 100644
--- a/app/client-v2/.vscode/launch.json
+++ b/app/client-v2/.vscode/launch.json
@@ -12,6 +12,29 @@
         "uriFormat": "%s",
         "action": "debugWithChrome"
       }
-    }
+    },
+    {
+      "name": "GOAT Debug (Server-Side)",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "pnpm run goat"
+    },
+    {
+      "name": "GOAT Debug (Client)",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "GOAT Debug (Full Stack)",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "pnpm run goat",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    },
   ]
 }
diff --git a/app/client-v2/apps/goat/app/(dashboard)/DashboardSidebar.tsx b/app/client-v2/apps/goat/app/(dashboard)/DashboardSidebar.tsx
new file mode 100644
index 000000000..1dcf72834
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/DashboardSidebar.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { makeStyles } from "@/lib/theme";
+import { Text } from "@/lib/theme";
+import { useTheme } from "@/lib/theme";
+import { Fade, List, ListItem, ListItemButton, ListItemIcon } from "@mui/material";
+import { useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+
+import { Icon } from "@p4b/ui/components/theme";
+import type { IconId } from "@p4b/ui/components/theme";
+
+export type DashboardSidebarProps = {
+  items: { link: string; icon: IconId; placeholder: string }[];
+  width: number;
+  extended_width: number;
+  children: React.ReactNode;
+};
+
+export function DashboardSidebar(props: DashboardSidebarProps) {
+  const { items, children } = props;
+  const router = useRouter();
+  const { classes, cx } = useStyles(props)();
+  const theme = useTheme();
+  const [hover, setHover] = useState(false);
+  const pathname = usePathname();
+  const handleHover = () => {
+    setHover((currHover) => !currHover);
+  };
+  return (
+    <>
+      <nav className={cx(classes.root)} onMouseEnter={handleHover} onMouseLeave={handleHover}>
+        <List>
+          {items?.map(({ link, icon, placeholder }, indx) => (
+            <ListItem onClick={() => router.push(link)} disablePadding key={indx}>
+              <ListItemButton className={classes.itemList}>
+                <ListItemIcon sx={{ marginRight: "10px" }}>
+                  <Icon
+                    size="default"
+                    iconId={icon}
+                    iconVariant={
+                      pathname.includes(link) ? "focus" : theme.isDarkModeEnabled ? "white" : "gray"
+                    }
+                  />
+                </ListItemIcon>
+                {hover ? (
+                  <Fade in={true}>
+                    <Text typo="body 2" color={pathname.startsWith(link) ? "focus" : "primary"}>
+                      {placeholder}
+                    </Text>
+                  </Fade>
+                ) : (
+                  <></>
+                )}
+              </ListItemButton>
+            </ListItem>
+          ))}
+        </List>
+      </nav>
+      {children}
+    </>
+  );
+}
+
+const useStyles = (props: DashboardSidebarProps) =>
+  makeStyles({ name: { DashboardSidebar } })((theme) => ({
+    root: {
+      zIndex: "20",
+      paddingTop: "52px",
+      backgroundColor: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].light,
+      cursor: "pointer",
+      width: props.width,
+      left: 0,
+      top: 0,
+      bottom: 0,
+      position: "fixed",
+      transition: "width 0.4s ease",
+      display: "flex",
+      flexDirection: "column",
+      boxShadow: "0px 2px 4px -1px rgba(0, 0, 0, 0.12)",
+      "&:hover": {
+        width: props.extended_width,
+      },
+    },
+    itemList: {
+      "&:hover": {
+        backgroundColor: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1,
+      },
+    },
+  }));
diff --git a/app/client-v2/apps/goat/app/(dashboard)/content/page.tsx b/app/client-v2/apps/goat/app/(dashboard)/content/page.tsx
new file mode 100644
index 000000000..0775686e3
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/content/page.tsx
@@ -0,0 +1,3 @@
+export default function ContentPage() {
+  return <div>Contents Page</div>;
+}
diff --git a/app/client-v2/apps/goat/app/(dashboard)/help/page.tsx b/app/client-v2/apps/goat/app/(dashboard)/help/page.tsx
new file mode 100644
index 000000000..c58d62fb6
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/help/page.tsx
@@ -0,0 +1,3 @@
+export default function HelpPage() {
+  return <div>Contents Page</div>;
+}
diff --git a/app/client-v2/packages/ui/components/temporary/home/CardList.tsx b/app/client-v2/apps/goat/app/(dashboard)/home/CardList.tsx
similarity index 86%
rename from app/client-v2/packages/ui/components/temporary/home/CardList.tsx
rename to app/client-v2/apps/goat/app/(dashboard)/home/CardList.tsx
index 16c0adc4d..5b1388fa7 100644
--- a/app/client-v2/packages/ui/components/temporary/home/CardList.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/home/CardList.tsx
@@ -1,12 +1,13 @@
-import React from "react";
+"use client";
 
-import { makeStyles } from "../../../lib/ThemeProvider";
-import { CardContent } from "../../Card";
-import { CardMedia } from "../../Card";
-import { Card } from "../../Card/Card";
-import { Divider } from "../../Divider";
-import { Button } from "../../theme";
-import { Text } from "../../theme";
+import { makeStyles } from "@/lib/theme";
+
+import { CardContent } from "@p4b/ui/components/Card";
+import { CardMedia } from "@p4b/ui/components/Card";
+import { Card } from "@p4b/ui/components/Card/Card";
+import { Divider } from "@p4b/ui/components/Divider";
+import { Button } from "@p4b/ui/components/theme";
+import { Text } from "@p4b/ui/components/theme";
 
 export interface CardType<IconId extends string> {
   title: string;
@@ -30,10 +31,6 @@ export interface CardListProps {
   cards?: CardsDataArray[];
 }
 
-{
-  /* <Button><Text typo="label 1">+</Text><Text typo="label 2">New</Text></Button> */
-}
-
 const CardList = (props: CardListProps) => {
   const { title, buttons, cards } = props;
 
diff --git a/app/client-v2/packages/ui/components/temporary/home/NewsLetterSection.tsx b/app/client-v2/apps/goat/app/(dashboard)/home/NewsLetterSection.tsx
similarity index 84%
rename from app/client-v2/packages/ui/components/temporary/home/NewsLetterSection.tsx
rename to app/client-v2/apps/goat/app/(dashboard)/home/NewsLetterSection.tsx
index 00a70ee29..81d53c5e9 100644
--- a/app/client-v2/packages/ui/components/temporary/home/NewsLetterSection.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/home/NewsLetterSection.tsx
@@ -1,10 +1,11 @@
-import React from "react";
+"use client";
 
-import { makeStyles } from "../../../lib/ThemeProvider";
-import { Card } from "../../Card";
-import { TextField } from "../../Text/TextField";
-import { Text } from "../../theme";
-import { Button } from "../../theme";
+import { makeStyles } from "@/lib/theme";
+
+import { Card } from "@p4b/ui/components/Card";
+import { TextField } from "@p4b/ui/components/Text/TextField";
+import { Text } from "@p4b/ui/components/theme";
+import { Button } from "@p4b/ui/components/theme";
 
 const NewsLetterSection = () => {
   const { classes, cx } = useStyles();
diff --git a/app/client-v2/packages/ui/components/temporary/home/Home.tsx b/app/client-v2/apps/goat/app/(dashboard)/home/page.tsx
similarity index 86%
rename from app/client-v2/packages/ui/components/temporary/home/Home.tsx
rename to app/client-v2/apps/goat/app/(dashboard)/home/page.tsx
index b2d50135b..c5ff33f4a 100644
--- a/app/client-v2/packages/ui/components/temporary/home/Home.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/home/page.tsx
@@ -1,11 +1,11 @@
-// import Head from "next/head";
-import React from "react";
+"use client";
+
+import { makeStyles } from "@/lib/theme";
+
+import { SlideShow } from "@p4b/ui/components/SlideShow";
 
-import { makeStyles } from "../../../lib/ThemeProvider";
-import { SlideShow } from "../../SlideShow";
-import DashboardLayout from "../DashboardLayout";
-import NewsLetterSection from "../home/NewsLetterSection";
 import CardList, { type CardType } from "./CardList";
+import NewsLetterSection from "./NewsLetterSection";
 
 interface CardsDataArray {
   content: CardType<"file">;
@@ -209,30 +209,22 @@ const Home = () => {
   const { classes, cx } = useStyles();
 
   return (
-    <DashboardLayout>
-      {/* <Head>
-        <title>Dashboard - Home</title>
-        <meta name="description" content="Data Dashboard" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head> */}
-      <div>
-        <SlideShow images={slideShowImages} height={328} width="100%" />
-        {tempCardInfo.map((cardSection: CardDataType, index: number) => (
-          <CardList
-            title={cardSection.title}
-            cards={cardSection.cards}
-            buttons={cardSection.buttons}
-            key={index}
-          />
-        ))}
-        <NewsLetterSection />
-      </div>
-    </DashboardLayout>
+    <>
+      <SlideShow images={slideShowImages} height={328} width="100%" />
+      {tempCardInfo.map((cardSection: CardDataType, index: number) => (
+        <CardList
+          title={cardSection.title}
+          cards={cardSection.cards}
+          buttons={cardSection.buttons}
+          key={index}
+        />
+      ))}
+      <NewsLetterSection />
+    </>
   );
 };
 
-const useStyles = makeStyles({ name: { Home } })((theme) => ({
+const useStyles = makeStyles({ name: { Home } })(() => ({
   media: {
     width: "100%",
     height: "100px",
@@ -240,19 +232,6 @@ const useStyles = makeStyles({ name: { Home } })((theme) => ({
     borderTopLeftRadius: 4,
     objectFit: "cover",
   },
-  // container: {
-  //   width: "60%",
-  //   margin: "0 auto",
-  //   "@media (max-width: 1714px)": {
-  //     width: "70%",
-  //   },
-  //   "@media (max-width: 1500px)": {
-  //     width: "80%",
-  //   },
-  //   "@media (max-width: 1268px)": {
-  //     width: "90%",
-  //   },
-  // },
 }));
 
 export default Home;
diff --git a/app/client-v2/packages/ui/components/temporary/DashboardLayout.tsx b/app/client-v2/apps/goat/app/(dashboard)/layout.tsx
similarity index 74%
rename from app/client-v2/packages/ui/components/temporary/DashboardLayout.tsx
rename to app/client-v2/apps/goat/app/(dashboard)/layout.tsx
index b0ed63d88..cf30f3773 100644
--- a/app/client-v2/packages/ui/components/temporary/DashboardLayout.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/layout.tsx
@@ -1,49 +1,44 @@
-import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import ForwardIcon from "@mui/icons-material/Forward";
-import React from "react";
+"use client";
 
-import { makeStyles } from "../../lib/ThemeProvider";
-import { DashboardSidebar } from "../DashboardSidebar";
-import Footer from "../Footer";
-import { createIcon } from "../Icon";
-import { Toolbar } from "../Toolbar";
-import type { IconId } from "../theme";
+import { makeStyles } from "@/lib/theme";
+
+import Footer from "@p4b/ui/components/Footer";
+import { Toolbar } from "@p4b/ui/components/Toolbar";
+import { Icon } from "@p4b/ui/components/theme";
+import type { IconId } from "@p4b/ui/components/theme";
+
+import { DashboardSidebar } from "./DashboardSidebar";
 
 interface DashboardLayoutProps {
   children: React.ReactNode;
 }
 
-const { Icon } = createIcon({
-  info: ForwardIcon,
-  profile: AccountCircleIcon,
-});
-
 const DashboardLayout = ({ children }: DashboardLayoutProps) => {
   const { classes, cx } = useStyles();
 
   const items = [
-    { link: "https://google.com", icon: () => <Icon iconId="profile" size="medium" iconVariant="gray2" /> },
-    { link: "https://google.com", icon: () => <Icon iconId="info" size="medium" iconVariant="gray2" /> },
+    { link: "https://google.com", icon: () => <Icon iconId="user" size="medium" iconVariant="gray2" /> },
+    { link: "https://google.com", icon: () => <Icon iconId="help" size="medium" iconVariant="gray2" /> },
   ];
 
   const sidebarItems: { link: string; icon: IconId; placeholder: string }[] = [
     {
-      link: "https://google.com",
+      link: "/home",
       icon: "home",
       placeholder: "Home",
     },
     {
-      link: "https://google.com",
+      link: "/content",
       icon: "folder",
       placeholder: "Content",
     },
     {
-      link: "https://google.com",
+      link: "/settings",
       icon: "settings",
       placeholder: "Settings",
     },
     {
-      link: "https://google.com",
+      link: "/help",
       icon: "help",
       placeholder: "Help",
     },
@@ -123,7 +118,7 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => {
   );
 };
 
-const useStyles = makeStyles({ name: { DashboardLayout } })((theme) => ({
+const useStyles = makeStyles({ name: { DashboardLayout } })(() => ({
   container: {
     width: "1344px",
     minHeight: "100vh",
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/layout.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/layout.tsx
new file mode 100644
index 000000000..a0e3e6f73
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/layout.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { makeStyles } from "@/lib/theme";
+import { Text } from "@/lib/theme";
+import { useState } from "react";
+
+import { Divider } from "@p4b/ui/components/Divider";
+
+import Organization from "./organization/page";
+import PrivacyPreferences from "./privacy-preference/page";
+import SubscriptionSettings from "./subscription/SubscriptionSettings";
+
+const Settings = () => {
+  const [currentSetting, setCurrentSetting] = useState<{ children: React.ReactNode; value: string }>({
+    children: <Organization />,
+    value: "Organization",
+  });
+
+  const { classes, cx } = useStyles();
+
+  return (
+    <div className={classes.wrapper}>
+      <div className={classes.sideBarSection}>
+        <span
+          onClick={() =>
+            setCurrentSetting({
+              children: <Organization />,
+              value: "Organization",
+            })
+          }>
+          <Text
+            typo="body 2"
+            className={
+              currentSetting.value === "Organization" ? classes.selectedSidebarText : classes.SidebarText
+            }>
+            Organization
+          </Text>
+        </span>
+        <Divider width="100%" color="main" className={classes.hr} />
+        <span
+          onClick={() =>
+            setCurrentSetting({
+              children: <SubscriptionSettings />,
+              value: "Subscription",
+            })
+          }>
+          <Text
+            typo="body 2"
+            className={
+              currentSetting.value === "Subscription" ? classes.selectedSidebarText : classes.SidebarText
+            }>
+            Subscription
+          </Text>
+        </span>
+        <Divider width="100%" color="main" className={classes.hr} />
+        <span
+          onClick={() =>
+            setCurrentSetting({
+              children: <PrivacyPreferences />,
+              value: "Privacy preferences",
+            })
+          }>
+          <Text
+            typo="body 2"
+            className={
+              currentSetting.value === "Privacy preferences"
+                ? classes.selectedSidebarText
+                : classes.SidebarText
+            }>
+            Privacy preferences
+          </Text>
+        </span>
+        <Divider width="100%" color="main" className={classes.hr} />
+      </div>
+      <div className={classes.mainSection}>{currentSetting.children}</div>
+    </div>
+  );
+};
+
+const useStyles = makeStyles({ name: { Settings } })((theme) => ({
+  wrapper: {
+    display: "flex",
+    gap: theme.spacing(4),
+  },
+  SidebarText: {
+    // padding: theme.spacing(1) theme.spacing(4),
+    padding: `${theme.spacing(1)}px ${theme.spacing(4)}px`,
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1 + "50",
+    },
+  },
+  selectedSidebarText: {
+    padding: `${theme.spacing(1)}px ${theme.spacing(4)}px`,
+    cursor: "pointer",
+    backgroundColor: theme.colors.palette.focus.light + "14",
+  },
+  hr: {
+    margin: `${theme.spacing(1)}px 0`,
+  },
+  mainSection: {
+    flexGrow: "1",
+  },
+  sideBarSection: {
+    minWidth: "268px",
+    "@media (max-width: 1268px)": {
+      minWidth: "168px",
+    },
+  },
+}));
+
+export default Settings;
diff --git a/app/client-v2/packages/ui/components/temporary/settings/organization/ManageUsers.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/ManageUsers.tsx
similarity index 94%
rename from app/client-v2/packages/ui/components/temporary/settings/organization/ManageUsers.tsx
rename to app/client-v2/apps/goat/app/(dashboard)/settings/organization/ManageUsers.tsx
index 648227589..5b580ad09 100644
--- a/app/client-v2/packages/ui/components/temporary/settings/organization/ManageUsers.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/ManageUsers.tsx
@@ -1,18 +1,20 @@
+"use client";
+
+import { makeStyles } from "@/lib/theme";
+import { Text } from "@/lib/theme";
 import { useState } from "react";
-import React from "react";
 
-import { makeStyles } from "../../../../lib/ThemeProvider";
-import Banner from "../../../Banner";
-import { Card } from "../../../Card";
-import Dialog from "../../../Dialog";
-import EnhancedTable from "../../../EnhancedTable";
-import Modal from "../../../Modal";
-import { SelectField } from "../../../SelectField";
-import Table from "../../../Table";
-import { TextField } from "../../../Text/TextField";
-import { Icon, Button, Text } from "../../../theme";
+import Banner from "@p4b/ui/components/Banner";
+import { Card } from "@p4b/ui/components/Card";
+import Dialog from "@p4b/ui/components/Dialog";
+import EnhancedTable from "@p4b/ui/components/EnhancedTable";
+import Modal from "@p4b/ui/components/Modal";
+import { SelectField } from "@p4b/ui/components/SelectField";
+import Table from "@p4b/ui/components/Table";
+import { TextField } from "@p4b/ui/components/Text/TextField";
+import { Icon, Button } from "@p4b/ui/components/theme";
 
-interface RowsType extends Object {
+interface RowsType {
   name: string;
   email: string;
   role: string;
@@ -24,7 +26,7 @@ const ManageUsers = () => {
   const { classes } = useStyles();
   const [userInDialog, setUserInDialog] = useState<RowsType | null>();
   const [addUserDialog, setAddUserDialog] = useState(false);
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const [ismodalVisible, setModalVisible] = useState<boolean>(false);
   // const open = Boolean(anchorEl);
   const columnNames = [
diff --git a/app/client-v2/packages/ui/components/temporary/settings/organization/Overview.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/Overview.tsx
similarity index 91%
rename from app/client-v2/packages/ui/components/temporary/settings/organization/Overview.tsx
rename to app/client-v2/apps/goat/app/(dashboard)/settings/organization/Overview.tsx
index 75ae8de43..4d304e10b 100644
--- a/app/client-v2/packages/ui/components/temporary/settings/organization/Overview.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/Overview.tsx
@@ -1,16 +1,16 @@
-import React, { useState, useRef } from "react";
+import { makeStyles } from "@/lib/theme";
+import React, { useRef } from "react";
+
+import Banner from "@p4b/ui/components/Banner";
+import Dialog from "@p4b/ui/components/Dialog";
+import { TextField } from "@p4b/ui/components/Text/TextField";
+import type { IconId } from "@p4b/ui/components/theme";
+import { Icon, Button, Text } from "@p4b/ui/components/theme";
 
-import { makeStyles } from "../../../../lib/ThemeProvider";
-import Banner from "../../../Banner";
-import Dialog from "../../../Dialog";
-import { TextField } from "../../../Text/TextField";
-import { Icon, Text, Button } from "../../../theme";
-import type { IconId } from "../../../theme";
 import SubscriptionStatusCard from "../subscription/SubscriptionStatusCard";
 
 const Overview = () => {
   // User state management
-  const [showOrganisationSettings, setShowOrganisationSettings] = useState(false);
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
 
   // styling related
diff --git a/app/client-v2/packages/ui/components/temporary/settings/organization/Organization.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/page.tsx
similarity index 90%
rename from app/client-v2/packages/ui/components/temporary/settings/organization/Organization.tsx
rename to app/client-v2/apps/goat/app/(dashboard)/settings/organization/page.tsx
index 49d056c5a..157843096 100644
--- a/app/client-v2/packages/ui/components/temporary/settings/organization/Organization.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/organization/page.tsx
@@ -1,5 +1,7 @@
-import { makeStyles } from "../../../../lib/ThemeProvider";
-import { Tabs } from "../../../Tabs";
+import { makeStyles } from "@/lib/theme";
+
+import { Tabs } from "@p4b/ui/components/Tabs";
+
 import ManageUsers from "./ManageUsers";
 import Overview from "./Overview";
 
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/page.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/page.tsx
new file mode 100644
index 000000000..50bd4bea7
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default async function Home({}) {
+  return redirect("/settings/organization");
+}
diff --git a/app/client-v2/apps/goat/app/(dashboard)/settings/privacy-preference/page.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/privacy-preference/page.tsx
new file mode 100644
index 000000000..db536f9d6
--- /dev/null
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/privacy-preference/page.tsx
@@ -0,0 +1,3 @@
+export default function PrivacyPreference() {
+  return <div>PrivacyPreferences</div>;
+}
diff --git a/app/client-v2/packages/ui/components/temporary/settings/subscription/Subscription.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/Subscription.tsx
similarity index 96%
rename from app/client-v2/packages/ui/components/temporary/settings/subscription/Subscription.tsx
rename to app/client-v2/apps/goat/app/(dashboard)/settings/subscription/Subscription.tsx
index 70aabe4bd..54b9ed1b5 100644
--- a/app/client-v2/packages/ui/components/temporary/settings/subscription/Subscription.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/Subscription.tsx
@@ -1,8 +1,9 @@
+import { makeStyles } from "@/lib/theme";
 import { useState } from "react";
 
-import { makeStyles } from "../../../../lib/ThemeProvider";
-import Banner from "../../../Banner";
-import { Button, Text } from "../../../theme";
+import Banner from "@p4b/ui/components/Banner";
+import { Button, Text } from "@p4b/ui/components/theme";
+
 import SubscriptionStatusCard from "./SubscriptionStatusCard";
 import type { SubscriptionStatusCardDataType } from "./SubscriptionStatusCard";
 
diff --git a/app/client-v2/packages/ui/components/temporary/settings/subscription/SubscriptionSettings.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/SubscriptionSettings.tsx
similarity index 86%
rename from app/client-v2/packages/ui/components/temporary/settings/subscription/SubscriptionSettings.tsx
rename to app/client-v2/apps/goat/app/(dashboard)/settings/subscription/SubscriptionSettings.tsx
index 41dd5edf8..dd02fd125 100644
--- a/app/client-v2/packages/ui/components/temporary/settings/subscription/SubscriptionSettings.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/SubscriptionSettings.tsx
@@ -1,7 +1,9 @@
-import { makeStyles } from "../../../../lib/ThemeProvider";
-import { Tabs } from "../../../Tabs";
-import Overview from "./Overview";
+import { makeStyles } from "@/lib/theme";
+
+import { Tabs } from "@p4b/ui/components/Tabs";
+
 import Subscription from "./Subscription";
+import Overview from "./page";
 
 const SubscriptionSettings = () => {
   const { classes, cx } = useStyles();
diff --git a/app/client-v2/packages/ui/components/temporary/settings/subscription/SubscriptionStatusCard.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/SubscriptionStatusCard.tsx
similarity index 90%
rename from app/client-v2/packages/ui/components/temporary/settings/subscription/SubscriptionStatusCard.tsx
rename to app/client-v2/apps/goat/app/(dashboard)/settings/subscription/SubscriptionStatusCard.tsx
index b6f836e57..c35049260 100644
--- a/app/client-v2/packages/ui/components/temporary/settings/subscription/SubscriptionStatusCard.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/SubscriptionStatusCard.tsx
@@ -1,7 +1,8 @@
-import { makeStyles } from "../../../../lib/ThemeProvider";
-import { Card } from "../../../Card";
-import { Icon, Text } from "../../../theme";
-import type { IconId } from "../../../theme";
+import { makeStyles } from "@/lib/theme";
+
+import { Card } from "@p4b/ui/components/Card";
+import { Icon, Text } from "@p4b/ui/components/theme";
+import type { IconId } from "@p4b/ui/components/theme";
 
 export interface SubscriptionStatusCardDataType {
   icon: IconId;
diff --git a/app/client-v2/packages/ui/components/temporary/settings/subscription/Overview.tsx b/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/page.tsx
similarity index 95%
rename from app/client-v2/packages/ui/components/temporary/settings/subscription/Overview.tsx
rename to app/client-v2/apps/goat/app/(dashboard)/settings/subscription/page.tsx
index be31a47b2..835d7cadc 100644
--- a/app/client-v2/packages/ui/components/temporary/settings/subscription/Overview.tsx
+++ b/app/client-v2/apps/goat/app/(dashboard)/settings/subscription/page.tsx
@@ -1,8 +1,9 @@
+import { makeStyles } from "@/lib/theme";
 import { useEffect, useState } from "react";
 
-import { makeStyles } from "../../../../lib/ThemeProvider";
-import Banner from "../../../Banner";
-import { Button, Text } from "../../../theme";
+import Banner from "@p4b/ui/components/Banner";
+import { Button, Text } from "@p4b/ui/components/theme";
+
 import SubscriptionStatusCard from "./SubscriptionStatusCard";
 import type { SubscriptionStatusCardDataType } from "./SubscriptionStatusCard";
 
diff --git a/app/client-v2/apps/goat/app/api/auth/[...nextauth]/options.ts b/app/client-v2/apps/goat/app/api/auth/[...nextauth]/options.ts
index 43f194637..3fdc9bc22 100644
--- a/app/client-v2/apps/goat/app/api/auth/[...nextauth]/options.ts
+++ b/app/client-v2/apps/goat/app/api/auth/[...nextauth]/options.ts
@@ -1,4 +1,5 @@
 import type { NextAuthOptions } from "next-auth";
+import type { JWT } from "next-auth/jwt";
 import KeycloakProvider from "next-auth/providers/keycloak";
 
 /**
@@ -9,148 +10,46 @@ import KeycloakProvider from "next-auth/providers/keycloak";
 /**
  * @param  {JWT} token
  */
-// const refreshAccessToken = async (token: JWT) => {
-//   try {
-//     if (Date.now() > token.refreshTokenExpired) throw Error;
-//     const details = {
-//       client_id: process.env.KEYCLOAK_CLIENT_ID,
-//       client_secret: process.env.KEYCLOAK_CLIENT_SECRET,
-//       grant_type: ["refresh_token"],
-//       refresh_token: token.refreshToken,
-//     };
-//     const formBody: string[] = [];
-//     Object.entries(details).forEach(([key, value]: [string, any]) => {
-//       const encodedKey = encodeURIComponent(key);
-//       const encodedValue = encodeURIComponent(value);
-//       formBody.push(encodedKey + "=" + encodedValue);
-//     });
-//     const formData = formBody.join("&");
-//     const url = `${process.env.KEYCLOAK_BASE_URL}/token`;
-//     const response = await fetch(url, {
-//       method: "POST",
-//       headers: {
-//         "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
-//       },
-//       body: formData,
-//     });
-//     const refreshedTokens = await response.json();
-//     if (!response.ok) throw refreshedTokens;
-//     return {
-//       ...token,
-//       accessToken: refreshedTokens.access_token,
-//       accessTokenExpired: Date.now() + (refreshedTokens.expires_in - 15) * 1000,
-//       refreshToken: refreshedTokens.refresh_token ?? token.refreshToken,
-//       refreshTokenExpired: Date.now() + (refreshedTokens.refresh_expires_in - 15) * 1000,
-//     };
-//   } catch (error) {
-//     return {
-//       ...token,
-//       error: "RefreshAccessTokenError",
-//     };
-//   }
-// };
-
-// export const options: NextAuthOptions = {
-//   providers: [
-//     {
-//       id: "keycloak",
-//       name: "Keycloak",
-//       type: "oauth",
-//       version: "2.0",
-//       params: { grant_type: "authorization_code" },
-//       scope: "openid email profile console-prosa basic-user-attribute",
-//       accessTokenUrl: `${process.env.KEYCLOAK_BASE_URL}/token`,
-//       requestTokenUrl: `${process.env.KEYCLOAK_BASE_URL}/auth`,
-//       authorizationUrl: `${process.env.KEYCLOAK_BASE_URL}/auth`,
-//       clientId: process.env.KEYCLOAK_CLIENT_ID,
-//       clientSecret: process.env.KEYCLOAK_CLIENT_SECRET,
-//       profileUrl: `${process.env.KEYCLOAK_BASE_URL}/userinfo`,
-//       profile: (profile) => {
-//         return {
-//           ...profile,
-//           id: profile.sub,
-//         };
-//       },
-//       authorizationParams: {
-//         response_type: "code",
-//       },
-//     },
-//   ],
-//   session: {
-//     jwt: true,
-//   },
-//   jwt: {
-//     secret: process.env.JWT_SECRET,
-//     signingKey: process.env.JWT_SIGNING_PRIVATE_KEY,
-//   },
-//   secret: process.env.NEXTAUTH_SECRET,
-//   callbacks: {
-//     /**
-//      * @param  {object} user     User object
-//      * @param  {object} account  Provider account
-//      * @param  {object} profile  Provider profile
-//      * @return {boolean|string}  Return `true` to allow sign in
-//      *                           Return `false` to deny access
-//      *                           Return `string` to redirect to (eg.: "/unauthorized")
-//      */
-//     async signIn(user, account) {
-//       if (account && user) {
-//         return true;
-//       } else {
-//         // TODO : Add unauthorized page
-//         return "/unauthorized";
-//       }
-//     },
-//     /**
-//      * @param  {string} url      URL provided as callback URL by the client
-//      * @param  {string} baseUrl  Default base URL of site (can be used as fallback)
-//      * @return {string}          URL the client will be redirect to
-//      */
-//     async redirect(url, baseUrl) {
-//       return url.startsWith(baseUrl) ? url : baseUrl;
-//     },
-//     /**
-//      * @param  {object} session      Session object
-//      * @param  {object} token        User object    (if using database sessions)
-//      *                               JSON Web Token (if not using database sessions)
-//      * @return {object}              Session that will be returned to the client
-//      */
-//     async session(session, token: JWT) {
-//       if (token) {
-//         session.user = token.user;
-//         session.error = token.error;
-//         session.accessToken = token.accessToken;
-//       }
-//       return session;
-//     },
-//     /**
-//      * @param  {object}  token     Decrypted JSON Web Token
-//      * @param  {object}  user      User object      (only available on sign in)
-//      * @param  {object}  account   Provider account (only available on sign in)
-//      * @param  {object}  profile   Provider profile (only available on sign in)
-//      * @param  {boolean} isNewUser True if new user (only available on sign in)
-//      * @return {object}            JSON Web Token that will be saved
-//      */
-//     async jwt(token, user, account) {
-//       // Initial sign in
-//       if (account && user) {
-//         // Add access_token, refresh_token and expirations to the token right after signin
-//         token.accessToken = account.accessToken;
-//         token.refreshToken = account.refreshToken;
-//         token.accessTokenExpired = Date.now() + (account.expires_in - 15) * 1000;
-//         token.refreshTokenExpired = Date.now() + (account.refresh_expires_in - 15) * 1000;
-//         token.user = user;
-//         return token;
-//       }
-
-//       // Return previous token if the access token has not expired yet
-//       if (Date.now() < token.accessTokenExpired) return token;
-
-//       // Access token has expired, try to update it
-//       return refreshAccessToken(token);
-//     },
-//   },
-// };
+const refreshAccessToken = async (token: JWT) => {
+  try {
+    if (Date.now() > token.refreshTokenExpired) throw Error;
+    const details = {
+      client_id: process.env.KEYCLOAK_CLIENT_ID,
+      client_secret: process.env.KEYCLOAK_CLIENT_SECRET,
+      grant_type: ["refresh_token"],
+      refresh_token: token.refreshToken,
+    };
+    const formBody: string[] = [];
+    Object.entries(details).forEach(([key, value]: [string, any]) => {
+      const encodedKey = encodeURIComponent(key);
+      const encodedValue = encodeURIComponent(value);
+      formBody.push(encodedKey + "=" + encodedValue);
+    });
+    const formData = formBody.join("&");
+    const url = `${process.env.KEYCLOAK_ISSUER}/protocol/openid-connect/token`;
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+      },
+      body: formData,
+    });
+    const refreshedTokens = await response.json();
+    if (!response.ok) throw refreshedTokens;
+    return {
+      ...token,
+      accessToken: refreshedTokens.access_token,
+      accessTokenExpired: Date.now() + (refreshedTokens.expires_in - 15) * 1000,
+      refreshToken: refreshedTokens.refresh_token ?? token.refreshToken,
+      refreshTokenExpired: Date.now() + (refreshedTokens.refresh_expires_in - 15) * 1000,
+    };
+  } catch (error) {
+    return {
+      ...token,
+      error: "RefreshAccessTokenError",
+    };
+  }
+};
 
 const keycloak = KeycloakProvider({
   id: "keycloak",
@@ -161,4 +60,43 @@ const keycloak = KeycloakProvider({
 
 export const options: NextAuthOptions = {
   providers: [keycloak],
+  callbacks: {
+    async signIn({ user, account }) {
+      if (account && user) {
+        return true;
+      } else {
+        // TODO : Add unauthorized page
+        return "/unauthorized";
+      }
+    },
+    async redirect({ url, baseUrl }) {
+      return url.startsWith(baseUrl) ? url : baseUrl;
+    },
+    async session({ session, token }) {
+      if (token) {
+        session.user = token.user;
+        session.error = token.error;
+        session.accessToken = token.accessToken;
+      }
+      return session;
+    },
+    async jwt({ token, user, account }) {
+      // Initial sign in
+      if (account && user) {
+        // Add access_token, refresh_token and expirations to the token right after signin
+        token.accessToken = account.access_token;
+        token.refreshToken = account.refresh_token;
+        token.accessTokenExpired = Date.now() + (account.expires_at - 15) * 1000;
+        token.refreshTokenExpired = Date.now() + (account.refresh_expires_in - 15) * 1000;
+        token.user = user;
+        return token;
+      }
+
+      // Return previous token if the access token has not expired yet
+      if (Date.now() < token.accessTokenExpired) return token;
+
+      // Access token has expired, try to update it
+      return refreshAccessToken(token);
+    },
+  },
 };
diff --git a/app/client-v2/apps/goat/app/components/Navbar.tsx b/app/client-v2/apps/goat/app/components/Navbar.tsx
deleted file mode 100644
index 4d59e9ed8..000000000
--- a/app/client-v2/apps/goat/app/components/Navbar.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import Link from "next/link";
-
-export default function Navbar() {
-  return (
-    <nav className="bg-blue-800 p-4">
-      <ul className="flex justify-evenly text-2xl font-bold">
-        <li>
-          <Link href="/">Home</Link>
-        </li>
-        <li>
-          <Link href="/api/auth/signin">Sign In</Link>
-        </li>
-        <li>
-          <Link href="/api/auth/signout">Sign Out</Link>
-        </li>
-        <li>
-          <Link href="/server">Server</Link>
-        </li>
-        <li>
-          <Link href="/client">Client</Link>
-        </li>
-        <li>
-          <Link href="/extra">Extra</Link>
-        </li>
-      </ul>
-    </nav>
-  );
-}
diff --git a/app/client-v2/apps/goat/app/extra/page.tsx b/app/client-v2/apps/goat/app/extra/page.tsx
deleted file mode 100644
index ed848e681..000000000
--- a/app/client-v2/apps/goat/app/extra/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default async function ExtraPage() {
-  return <h1 className="text-5xl">Extra Page!</h1>;
-}
diff --git a/app/client-v2/apps/goat/app/layout.tsx b/app/client-v2/apps/goat/app/layout.tsx
index ca62b97ce..7df53f7fd 100644
--- a/app/client-v2/apps/goat/app/layout.tsx
+++ b/app/client-v2/apps/goat/app/layout.tsx
@@ -1,24 +1,23 @@
-import { Inter } from "next/font/google";
+import ThemeRegistry from "@/lib/ThemeRegistry";
+import AuthProvider from "@/lib/context/AuthProvider";
+import Provider from "@/lib/context/StoreProvider";
+import type { Metadata } from "next";
 
-import Navbar from "./components/Navbar";
-import AuthProvider from "./context/AuthProvider";
-import Provider from "./context/StoreProvider";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata = {
-  title: "NextAuth Tutorial",
-  description: "Learn NextAuth.js by Dave Gray",
+export const metadata: Metadata = {
+  title: {
+    template: "%s | GOAT",
+    default: "GOAT",
+  },
+  description: "Geo Open Accessibiliy Tool",
 };
 
-export default function Layout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body>
         <Provider>
           <AuthProvider>
-            <Navbar />
-            <main className="flex justify-center items-start p-6 min-h-screen">{children}</main>
+            <ThemeRegistry>{children}</ThemeRegistry>
           </AuthProvider>
         </Provider>
       </body>
diff --git a/app/client-v2/apps/goat/app/styles/globals.css b/app/client-v2/apps/goat/app/map/[projectId]/page.tsx
similarity index 100%
rename from app/client-v2/apps/goat/app/styles/globals.css
rename to app/client-v2/apps/goat/app/map/[projectId]/page.tsx
diff --git a/app/client-v2/apps/goat/app/map/page.tsx b/app/client-v2/apps/goat/app/map/page.tsx
index d77a96024..e69de29bb 100644
--- a/app/client-v2/apps/goat/app/map/page.tsx
+++ b/app/client-v2/apps/goat/app/map/page.tsx
@@ -1,8 +0,0 @@
-"use client";
-
-import MapDemo from "../components/MapDemo";
-import "./../styles/map.css";
-
-export default function Map() {
-  return <MapDemo />;
-}
diff --git a/app/client-v2/packages/ui/components/temporary/auth/AuthTemplate.tsx b/app/client-v2/apps/goat/app/onboarding/auth/AuthTemplate.tsx
similarity index 93%
rename from app/client-v2/packages/ui/components/temporary/auth/AuthTemplate.tsx
rename to app/client-v2/apps/goat/app/onboarding/auth/AuthTemplate.tsx
index c2bd90f7b..66616dc3e 100644
--- a/app/client-v2/packages/ui/components/temporary/auth/AuthTemplate.tsx
+++ b/app/client-v2/apps/goat/app/onboarding/auth/AuthTemplate.tsx
@@ -1,8 +1,7 @@
-import { Box } from "@mui/material";
-import Grid from "@mui/material/Unstable_Grid2/Grid2";
-import React from "react";
+import { makeStyles } from "@/lib/theme";
 
-import { makeStyles } from "../../../lib/ThemeProvider";
+import Box from "@p4b/ui/components/Box";
+import Grid from "@p4b/ui/components/Grid";
 
 interface AuthTemplateProps {
   children: React.ReactNode;
diff --git a/app/client-v2/packages/ui/components/temporary/auth/OrganizationCreation.tsx b/app/client-v2/apps/goat/app/onboarding/auth/OrganizationCreation.tsx
similarity index 100%
rename from app/client-v2/packages/ui/components/temporary/auth/OrganizationCreation.tsx
rename to app/client-v2/apps/goat/app/onboarding/auth/OrganizationCreation.tsx
diff --git a/app/client-v2/packages/ui/components/temporary/auth/steps/Create.tsx b/app/client-v2/apps/goat/app/onboarding/auth/steps/Create.tsx
similarity index 100%
rename from app/client-v2/packages/ui/components/temporary/auth/steps/Create.tsx
rename to app/client-v2/apps/goat/app/onboarding/auth/steps/Create.tsx
diff --git a/app/client-v2/apps/goat/app/onboarding/page.tsx b/app/client-v2/apps/goat/app/onboarding/page.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/client-v2/apps/goat/app/page.tsx b/app/client-v2/apps/goat/app/page.tsx
index 75a8dd595..4de5e69af 100644
--- a/app/client-v2/apps/goat/app/page.tsx
+++ b/app/client-v2/apps/goat/app/page.tsx
@@ -1,18 +1,5 @@
-import { getServerSession } from "next-auth/next";
+import { redirect } from "next/navigation";
 
-import { options } from "./api/auth/[...nextauth]/options";
-import UserCard from "./components/UserCard";
-
-export default async function Home() {
-  const session = await getServerSession(options);
-
-  return (
-    <>
-      {session ? (
-        <UserCard user={session?.user} pagetype="Home" />
-      ) : (
-        <h1 className="text-5xl">You Shall Not Pass!</h1>
-      )}
-    </>
-  );
+export default async function Home({}) {
+  return redirect("/home");
 }
diff --git a/app/client-v2/apps/goat/app/server/page.tsx b/app/client-v2/apps/goat/app/server/page.tsx
deleted file mode 100644
index defc94e06..000000000
--- a/app/client-v2/apps/goat/app/server/page.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { getServerSession } from "next-auth/next";
-import { redirect } from "next/navigation";
-
-import { options } from "../api/auth/[...nextauth]/options";
-import UserCard from "../components/UserCard";
-
-export default async function ServerPage() {
-  const session = await getServerSession(options);
-
-  if (!session) {
-    redirect("/api/auth/signin?callbackUrl=/server");
-  }
-
-  return (
-    <section className="flex flex-col gap-6">
-      <UserCard user={session?.user} pagetype="Server" />
-    </section>
-  );
-}
diff --git a/app/client-v2/apps/goat/components/Copyright.tsx b/app/client-v2/apps/goat/components/Copyright.tsx
new file mode 100644
index 000000000..6b5d6fcc1
--- /dev/null
+++ b/app/client-v2/apps/goat/components/Copyright.tsx
@@ -0,0 +1,4 @@
+"use client";
+export default function ServerPage() {
+  return <div>Contents Page</div>;
+}
diff --git a/app/client-v2/apps/goat/app/components/MapByStyle.tsx b/app/client-v2/apps/goat/components/MapByStyle.tsx
similarity index 100%
rename from app/client-v2/apps/goat/app/components/MapByStyle.tsx
rename to app/client-v2/apps/goat/components/MapByStyle.tsx
diff --git a/app/client-v2/apps/goat/app/components/MapDemo.tsx b/app/client-v2/apps/goat/components/MapDemo.tsx
similarity index 100%
rename from app/client-v2/apps/goat/app/components/MapDemo.tsx
rename to app/client-v2/apps/goat/components/MapDemo.tsx
diff --git a/app/client-v2/apps/goat/components/Protip.tsx b/app/client-v2/apps/goat/components/Protip.tsx
new file mode 100644
index 000000000..692961f0c
--- /dev/null
+++ b/app/client-v2/apps/goat/components/Protip.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import type { SvgIconProps } from "@mui/material";
+import { SvgIcon, Typography, Link as MuiLink } from "@mui/material";
+
+const LightBulbIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
+    </SvgIcon>
+  );
+};
+
+export const ProTip = () => {
+  return (
+    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: "middle" }} />
+      Pro tip: See more <MuiLink href="https://mui.com/getting-started/templates/">templates</MuiLink> in the
+      MUI documentation.
+    </Typography>
+  );
+};
diff --git a/app/client-v2/apps/goat/app/components/UserCard.tsx b/app/client-v2/apps/goat/components/UserCard.tsx
similarity index 100%
rename from app/client-v2/apps/goat/app/components/UserCard.tsx
rename to app/client-v2/apps/goat/components/UserCard.tsx
diff --git a/app/client-v2/apps/goat/layouts/Home.tsx b/app/client-v2/apps/goat/layouts/Home.tsx
new file mode 100644
index 000000000..d7e934f42
--- /dev/null
+++ b/app/client-v2/apps/goat/layouts/Home.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { Container, Box, Typography } from "@mui/material";
+
+import { Copyright } from "../components/Copyright";
+import { ProTip } from "../components/Protip";
+
+export const Home = () => {
+  return (
+    <Container maxWidth="lg">
+      <Box
+        sx={{
+          my: 4,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+        }}>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Material UI - Next.js example using App Router in TypeScript
+        </Typography>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  );
+};
diff --git a/app/client-v2/apps/goat/lib/ThemeRegistry.tsx b/app/client-v2/apps/goat/lib/ThemeRegistry.tsx
new file mode 100644
index 000000000..6408d2432
--- /dev/null
+++ b/app/client-v2/apps/goat/lib/ThemeRegistry.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import CssBaseline from "@mui/material/CssBaseline";
+import React from "react";
+import { NextAppDirEmotionCacheProvider } from "tss-react/next/appDir";
+
+import { ThemeProvider } from "./theme";
+
+const ThemeRegistry = ({ children }: React.PropsWithChildren) => {
+  return (
+    <>
+      <CssBaseline />
+      <NextAppDirEmotionCacheProvider options={{ key: "mui" }}>
+        <ThemeProvider>{children}</ThemeProvider>
+      </NextAppDirEmotionCacheProvider>
+    </>
+  );
+};
+
+export default ThemeRegistry;
diff --git a/app/client-v2/apps/goat/app/configs/axios.ts b/app/client-v2/apps/goat/lib/configs/axios.ts
similarity index 100%
rename from app/client-v2/apps/goat/app/configs/axios.ts
rename to app/client-v2/apps/goat/lib/configs/axios.ts
diff --git a/app/client-v2/apps/goat/app/context/AuthProvider.tsx b/app/client-v2/apps/goat/lib/context/AuthProvider.tsx
similarity index 100%
rename from app/client-v2/apps/goat/app/context/AuthProvider.tsx
rename to app/client-v2/apps/goat/lib/context/AuthProvider.tsx
diff --git a/app/client-v2/apps/goat/app/context/StoreProvider.tsx b/app/client-v2/apps/goat/lib/context/StoreProvider.tsx
similarity index 100%
rename from app/client-v2/apps/goat/app/context/StoreProvider.tsx
rename to app/client-v2/apps/goat/lib/context/StoreProvider.tsx
diff --git a/app/client-v2/apps/goat/app/store/index.ts b/app/client-v2/apps/goat/lib/store/index.ts
similarity index 100%
rename from app/client-v2/apps/goat/app/store/index.ts
rename to app/client-v2/apps/goat/lib/store/index.ts
diff --git a/app/client-v2/apps/goat/app/store/map/actions.ts b/app/client-v2/apps/goat/lib/store/map/actions.ts
similarity index 100%
rename from app/client-v2/apps/goat/app/store/map/actions.ts
rename to app/client-v2/apps/goat/lib/store/map/actions.ts
diff --git a/app/client-v2/apps/goat/app/store/map/api.ts b/app/client-v2/apps/goat/lib/store/map/api.ts
similarity index 100%
rename from app/client-v2/apps/goat/app/store/map/api.ts
rename to app/client-v2/apps/goat/lib/store/map/api.ts
diff --git a/app/client-v2/apps/goat/app/store/map/slice.ts b/app/client-v2/apps/goat/lib/store/map/slice.ts
similarity index 100%
rename from app/client-v2/apps/goat/app/store/map/slice.ts
rename to app/client-v2/apps/goat/lib/store/map/slice.ts
diff --git a/app/client-v2/apps/goat/lib/theme.ts b/app/client-v2/apps/goat/lib/theme.ts
new file mode 100644
index 000000000..02dcfddaa
--- /dev/null
+++ b/app/client-v2/apps/goat/lib/theme.ts
@@ -0,0 +1,37 @@
+import "@p4b/ui/assets/fonts/mulish/font.css";
+import { createText } from "@p4b/ui/components/Text";
+import {
+  createThemeProvider,
+  defaultGetTypographyDesc,
+  defaultPalette,
+  createDefaultColorUseCases,
+} from "@p4b/ui/lib";
+import { createMakeAndWithStyles } from "@p4b/ui/lib/tss";
+
+export const { ThemeProvider, useTheme } = createThemeProvider({
+  getTypographyDesc: () => {
+    const typographyDesc = defaultGetTypographyDesc();
+
+    return {
+      fontFamily: '"Mulish", sans-serif',
+      rootFontSizePx: typographyDesc.rootFontSizePx,
+      variants: {
+        ...typographyDesc.variants,
+        "display heading": {
+          ...typographyDesc.variants["display heading"],
+          fontFamily: "Mulish, sans-serif",
+        },
+      },
+    };
+  },
+  palette: {
+    ...defaultPalette,
+  },
+  createColorUseCases: ({ isDarkModeEnabled, palette }) => ({
+    ...createDefaultColorUseCases({ isDarkModeEnabled, palette }),
+  }),
+});
+
+export const { makeStyles, useStyles } = createMakeAndWithStyles({ useTheme });
+export const { Text } = createText({ useTheme });
+export const logoContainerWidthInPercent = 4;
diff --git a/app/client-v2/apps/goat/app/utils/constants.js b/app/client-v2/apps/goat/lib/utils/constants.js
similarity index 100%
rename from app/client-v2/apps/goat/app/utils/constants.js
rename to app/client-v2/apps/goat/lib/utils/constants.js
diff --git a/app/client-v2/apps/goat/app/utils/layer_demo.json b/app/client-v2/apps/goat/lib/utils/layer_demo.json
similarity index 100%
rename from app/client-v2/apps/goat/app/utils/layer_demo.json
rename to app/client-v2/apps/goat/lib/utils/layer_demo.json
diff --git a/app/client-v2/apps/goat/next.config.js b/app/client-v2/apps/goat/next.config.js
index 928adbaa7..68a0b242d 100644
--- a/app/client-v2/apps/goat/next.config.js
+++ b/app/client-v2/apps/goat/next.config.js
@@ -2,4 +2,9 @@ module.exports = {
   output: "standalone",
   reactStrictMode: true,
   transpilePackages: ["@p4b/ui", "@p4b/tsconfig", "@p4b/config"],
+  modularizeImports: {
+    "@mui/icons-material": {
+      transform: "@mui/icons-material/{{member}}",
+    },
+  },
 };
diff --git a/app/client-v2/apps/goat/package.json b/app/client-v2/apps/goat/package.json
index bbc5c3d52..00dff3aae 100644
--- a/app/client-v2/apps/goat/package.json
+++ b/app/client-v2/apps/goat/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 1024",
+    "dev": "NODE_OPTIONS='--inspect' next dev -p 3000",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -16,14 +16,19 @@
     "geojson": "^0.5.0",
     "mapbox-gl": "^2.15.0",
     "maplibre-gl": "^3.1.0",
-    "next": "13.4.0",
+    "next": "v13.4.10-canary.8",
     "next-auth": "^4.22.1",
     "next-i18next": "^13.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.2",
     "react-redux": "^8.1.1",
-    "tss-react": "^4.8.3"
+    "@emotion/cache": "latest",
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest",
+    "@mui/icons-material": "latest",
+    "@mui/material": "latest",
+    "tss-react": "latest"
   },
   "devDependencies": {
     "@p4b/config": "workspace:*",
diff --git a/app/client-v2/apps/goat/styles/globals.css b/app/client-v2/apps/goat/styles/globals.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/client-v2/apps/goat/app/styles/map.css b/app/client-v2/apps/goat/styles/map.css
similarity index 100%
rename from app/client-v2/apps/goat/app/styles/map.css
rename to app/client-v2/apps/goat/styles/map.css
diff --git a/app/client-v2/apps/goat/tsconfig.json b/app/client-v2/apps/goat/tsconfig.json
index 045801021..de95127d9 100644
--- a/app/client-v2/apps/goat/tsconfig.json
+++ b/app/client-v2/apps/goat/tsconfig.json
@@ -1,13 +1,16 @@
 {
   "extends": "@p4b/tsconfig/nextjs.json",
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    "components/Map.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "../../packages/types/*.d.ts"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "exclude": ["node_modules"]
 }
diff --git a/app/client-v2/apps/goat/app/api/auth/[...nextauth]/next-auth.d.ts b/app/client-v2/apps/goat/types/next-auth.d.ts
similarity index 96%
rename from app/client-v2/apps/goat/app/api/auth/[...nextauth]/next-auth.d.ts
rename to app/client-v2/apps/goat/types/next-auth.d.ts
index 4becb89fc..3f9c7e602 100644
--- a/app/client-v2/apps/goat/app/api/auth/[...nextauth]/next-auth.d.ts
+++ b/app/client-v2/apps/goat/types/next-auth.d.ts
@@ -18,6 +18,7 @@ declare module "next-auth" {
       telephone?: string;
     };
     error: string;
+    accessToken: string;
   }
   /**
    * The shape of the user object returned in the OAuth providers' `profile` callback,
@@ -43,12 +44,11 @@ declare module "next-auth" {
     provider: string;
     type: string;
     id: string;
-    accessToken: string;
-    accessTokenExpires?: any;
-    refreshToken: string;
-    idToken: string;
     access_token: string;
-    expires_in: number;
+    accessTokenExpires?: any;
+    refresh_token: string;
+    id_token: string;
+    expires_at: number;
     refresh_expires_in: number;
     refresh_token: string;
     token_type: string;
diff --git a/app/client-v2/apps/storybook/package.json b/app/client-v2/apps/storybook/package.json
index 283e3750b..4f6599416 100644
--- a/app/client-v2/apps/storybook/package.json
+++ b/app/client-v2/apps/storybook/package.json
@@ -10,7 +10,7 @@
     "@mui/lab": "5.0.0-alpha.132",
     "@p4b/keycloak-theme": "workspace:*",
     "@p4b/ui": "workspace:*",
-    "next": "13.4.0",
+    "next": "v13.4.10-canary.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/app/client-v2/packages/keycloak-theme/src/login/Template.tsx b/app/client-v2/packages/keycloak-theme/src/login/Template.tsx
index 60aaceced..7afb1e68b 100644
--- a/app/client-v2/packages/keycloak-theme/src/login/Template.tsx
+++ b/app/client-v2/packages/keycloak-theme/src/login/Template.tsx
@@ -14,8 +14,7 @@ import { symToStr } from "tsafe/symToStr";
 
 import { Alert } from "@p4b/ui/components/Alert";
 import { Card } from "@p4b/ui/components/Card";
-import { useIsDarkModeEnabled } from "@p4b/ui/lib";
-import { useDomRect, useWindowInnerSize } from "@p4b/ui/lib";
+import { useDomRect } from "@p4b/ui/lib";
 
 import { ThemeProvider, makeStyles, Text } from "../theme";
 import type { I18n } from "./i18n";
@@ -36,14 +35,9 @@ function ContextualizedTemplate(props: TemplateProps) {
 
   const { ref: rootRef } = useDomRect();
 
-  const { windowInnerWidth, windowInnerHeight } = useWindowInnerSize();
-  const { isDarkModeEnabled } = useIsDarkModeEnabled();
+  const isDarkModeEnabled = false;
 
-  const { classes } = useStyles({
-    windowInnerWidth,
-    aspectRatio: windowInnerWidth / windowInnerHeight,
-    windowInnerHeight,
-  });
+  const { classes } = useStyles();
 
   const { getClassName } = useGetClassName({
     doUseDefaultCss,
@@ -114,11 +108,7 @@ function ContextualizedTemplate(props: TemplateProps) {
   );
 }
 
-const useStyles = makeStyles<{
-  windowInnerWidth: number;
-  aspectRatio: number;
-  windowInnerHeight: number;
-}>()((theme) => ({
+const useStyles = makeStyles()((theme) => ({
   main: {
     display: "flex",
     flex: "1 1 auto",
diff --git a/app/client-v2/packages/keycloak-theme/src/login/pages/RegisterUserProfile.tsx b/app/client-v2/packages/keycloak-theme/src/login/pages/RegisterUserProfile.tsx
index 6a89e4e50..09427a6f6 100644
--- a/app/client-v2/packages/keycloak-theme/src/login/pages/RegisterUserProfile.tsx
+++ b/app/client-v2/packages/keycloak-theme/src/login/pages/RegisterUserProfile.tsx
@@ -6,7 +6,6 @@ import { useRef, useState } from "react";
 import ReCAPTCHA from "react-google-recaptcha";
 
 import { Tooltip } from "@p4b/ui/components/Tooltip";
-import { useIsDarkModeEnabled } from "@p4b/ui/lib";
 
 import { makeStyles, Button, Text } from "../../theme";
 import type { I18n } from "../i18n";
@@ -26,7 +25,7 @@ const steps: Steps = {
 export default function RegisterUserProfile(
   props: PageProps<Extract<KcContext, { pageId: "register-user-profile.ftl" }>, I18n>
 ) {
-  const { isDarkModeEnabled } = useIsDarkModeEnabled();
+  const isDarkModeEnabled = false;
   const { kcContext, i18n, doUseDefaultCss, Template } = props;
   const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey } = kcContext;
   const { msg, msgStr } = i18n;
diff --git a/app/client-v2/packages/keycloak-theme/src/theme.tsx b/app/client-v2/packages/keycloak-theme/src/theme.tsx
index 81a84c974..226bd1f8f 100644
--- a/app/client-v2/packages/keycloak-theme/src/theme.tsx
+++ b/app/client-v2/packages/keycloak-theme/src/theme.tsx
@@ -14,12 +14,8 @@ import {
 import { createMakeAndWithStyles } from "@p4b/ui/lib/tss";
 
 export const { ThemeProvider, useTheme } = createThemeProvider({
-  getTypographyDesc: ({ windowInnerWidth, browserFontSizeFactor, windowInnerHeight }) => {
-    const typographyDesc = defaultGetTypographyDesc({
-      windowInnerWidth,
-      browserFontSizeFactor,
-      windowInnerHeight,
-    });
+  getTypographyDesc: () => {
+    const typographyDesc = defaultGetTypographyDesc();
 
     return {
       fontFamily: '"Mulish", sans-serif',
diff --git a/app/client-v2/packages/ui/assets/svg/GOATLogoDark.tsx b/app/client-v2/packages/ui/assets/svg/GOATLogoDark.tsx
index 45e0f5dcb..b051d2623 100644
--- a/app/client-v2/packages/ui/assets/svg/GOATLogoDark.tsx
+++ b/app/client-v2/packages/ui/assets/svg/GOATLogoDark.tsx
@@ -16,27 +16,27 @@ export const GOATLogoDarkSvg = memo((props: { className?: string; height: number
       <path
         d="M17.2564 21.0442H24.6662V29.7476C23.877 29.976 23.0643 30.1693 22.2203 30.3184C20.8476 30.5606 19.4515 30.6815 18.0315 30.6815C14.3183 30.6815 11.525 29.6085 9.65323 27.461C7.78003 25.3143 6.84426 22.1262 6.84426 17.8962C6.84426 13.7638 7.75625 10.6321 9.58051 8.50088C11.4042 6.37023 14.076 5.30477 17.5954 5.30477C19.436 5.30477 21.1308 5.58765 22.6805 6.15205C24.2304 6.71755 25.8282 7.62926 27.4749 8.88857L29.6058 4.33609C28.153 3.01263 26.3768 2.01159 24.2788 1.33355C22.1797 0.6555 19.9202 0.316477 17.4986 0.316477C14.0119 0.316477 10.9925 1.01886 8.44232 2.42307C5.89134 3.82755 3.93021 5.84593 2.55835 8.47682C1.18567 11.1085 0.499878 14.2482 0.499878 17.8962C0.499878 21.6091 1.18567 24.7815 2.55835 27.4123C3.93021 30.0443 5.91568 32.0616 8.51504 33.4661C11.1136 34.8706 14.2054 35.573 17.7892 35.573C19.3389 35.573 20.872 35.4759 22.3898 35.2823C23.9071 35.0885 25.344 34.8147 26.7001 34.4591C28.0562 34.1041 29.2671 33.6522 30.3323 33.103V16.5401H17.2564V21.0442Z"
         fill="#82A4D1"
-        fill-opacity="0.5"
+        fillOpacity="0.5"
       />
       <path
         d="M88.3583 22.2596L94.7149 7.52343L101.024 22.2596H88.3583ZM92.0787 0.708403L76.4847 35.1901H82.7805L86.2691 27.1024H103.097L106.559 35.1901H112.758L97.1641 0.708403H92.0787Z"
         fill="#82A4D1"
-        fill-opacity="0.5"
+        fillOpacity="0.5"
       />
       <path
         d="M114.733 0.706392V5.83986H125.969V35.1878H132.265V5.83986H143.5V0.706392H114.733Z"
         fill="#82A4D1"
-        fill-opacity="0.5"
+        fillOpacity="0.5"
       />
       <path
         d="M51.6691 15.3739C52.3383 15.3739 52.8805 15.9162 52.8805 16.5851C52.8805 17.2543 52.3383 17.7966 51.6691 17.7966C51.0002 17.7966 50.4579 17.2543 50.4579 16.5851C50.4579 15.9162 51.0002 15.3739 51.6691 15.3739Z"
         fill="#82A4D1"
-        fill-opacity="0.5"
+        fillOpacity="0.5"
       />
       <path
         d="M72.1441 15.5339C72.0015 14.7263 71.8592 13.9184 71.6212 13.1105C71.384 12.3025 71.0989 11.5422 70.7663 10.8291C70.4341 10.1163 70.1015 9.40365 69.6741 8.69069C68.8661 7.40779 67.964 6.26706 66.9188 5.2692C65.8736 4.2712 64.6859 3.4158 63.3558 2.60797C62.0261 1.84743 60.6483 1.2772 59.1756 0.897154C57.7036 0.516956 56.1831 0.326636 54.6157 0.326636C53.0482 0.326636 51.5279 0.516956 50.0553 0.897154C48.583 1.22977 47.2052 1.79999 45.875 2.60797C44.5925 3.36807 43.4049 4.2712 42.3125 5.2692C41.2673 6.26706 40.3647 7.40779 39.5574 8.69069C39.1299 9.40365 38.7972 10.1163 38.4645 10.8291C38.1323 11.5422 37.8474 12.3025 37.6095 13.1105C37.3721 13.9184 37.1819 14.7263 37.0872 15.5339C36.9447 16.3418 36.897 17.1972 36.897 18.0529C36.897 18.8604 36.9447 19.7161 37.0872 20.5239C37.1819 21.3316 37.3721 22.1396 37.6095 22.9476C37.8474 23.7554 38.1323 24.5158 38.4645 25.2288C38.7972 25.9413 39.1299 26.6541 39.5574 27.3198C40.3647 28.6028 41.2673 29.7433 42.3125 30.7411C43.4049 31.7391 44.5925 32.6421 45.875 33.4026C47.2052 34.2103 48.583 34.7805 50.0553 35.1135C51.5279 35.4934 53.0482 35.6835 54.6157 35.6835C55.4706 35.6835 56.3257 35.636 57.1329 35.4934C57.1534 35.4909 57.1732 35.4876 57.1936 35.4851C54.7201 31.9465 55.5433 24.9083 55.649 24.0911L51.026 29.0532C50.7251 29.3761 50.225 29.2936 50.0521 28.8924L49.3412 27.2428C47.782 27.464 46.2796 27.3496 45.058 26.9963C44.3082 26.7794 43.8148 26.3362 43.5089 25.7959C43.678 25.814 43.8614 25.8256 44.0626 25.8256C44.739 25.8256 45.597 25.7043 46.6432 25.3349C46.8064 25.2771 46.8921 25.0979 46.8346 24.9346C46.7767 24.7716 46.5983 24.6872 46.4346 24.7431C45.164 25.1921 44.2137 25.2392 43.5631 25.1671L44.3037 24.0296C44.4139 23.8603 44.2965 23.6356 44.0948 23.6294L43.1028 23.5992C43.1519 23.0376 43.2952 22.5327 43.4728 22.2004C44.4915 20.2925 45.9248 16.7001 48.7334 13.7663C51.2171 11.1719 53.7508 11.6735 54.2852 11.1719C61.4073 4.48517 67.8358 11.9028 67.8358 11.9028C60.8382 10.1448 58.7218 12.1881 58.2639 12.7991C63.0115 11.1807 66.6305 14.8991 66.6305 14.8991C60.3848 13.1817 59.3621 16.6895 59.3621 16.6895L59.3231 16.671C63.0893 24.7583 71.4934 18.6255 72.3327 17.985C72.3304 17.1521 72.2828 16.3205 72.1441 15.5339Z"
         fill="#82A4D1"
-        fill-opacity="0.5"
+        fillOpacity="0.5"
       />
     </svg>
   );
diff --git a/app/client-v2/packages/ui/assets/svg/GOATLogoGreen.tsx b/app/client-v2/packages/ui/assets/svg/GOATLogoGreen.tsx
index 0b3f8dac6..912b3393f 100644
--- a/app/client-v2/packages/ui/assets/svg/GOATLogoGreen.tsx
+++ b/app/client-v2/packages/ui/assets/svg/GOATLogoGreen.tsx
@@ -16,27 +16,27 @@ export const GOATLogoGreenSvg = memo((props: { className?: string; height?: numb
       <path
         d="M17.2564 21.0442H24.6662V29.7476C23.877 29.976 23.0643 30.1693 22.2203 30.3184C20.8476 30.5606 19.4515 30.6815 18.0315 30.6815C14.3183 30.6815 11.525 29.6085 9.65323 27.461C7.78003 25.3143 6.84426 22.1262 6.84426 17.8962C6.84426 13.7638 7.75625 10.6321 9.58051 8.50088C11.4042 6.37023 14.076 5.30477 17.5954 5.30477C19.436 5.30477 21.1308 5.58765 22.6805 6.15205C24.2304 6.71755 25.8282 7.62926 27.4749 8.88857L29.6058 4.33609C28.153 3.01263 26.3768 2.01159 24.2788 1.33355C22.1797 0.6555 19.9202 0.316477 17.4986 0.316477C14.0119 0.316477 10.9925 1.01886 8.44232 2.42307C5.89134 3.82755 3.93021 5.84593 2.55835 8.47682C1.18567 11.1085 0.499878 14.2482 0.499878 17.8962C0.499878 21.6091 1.18567 24.7815 2.55835 27.4123C3.93021 30.0443 5.91568 32.0616 8.51504 33.4661C11.1136 34.8706 14.2054 35.573 17.7892 35.573C19.3389 35.573 20.872 35.4759 22.3898 35.2823C23.9071 35.0885 25.344 34.8147 26.7001 34.4591C28.0562 34.1041 29.2671 33.6522 30.3323 33.103V16.5401H17.2564V21.0442Z"
         fill="#2BB381"
-        fill-opacity="0.5"
+        fillOpacity="0.5"
       />
       <path
         d="M88.3583 22.2596L94.7149 7.52343L101.024 22.2596H88.3583ZM92.0787 0.708403L76.4847 35.1901H82.7805L86.2691 27.1024H103.097L106.559 35.1901H112.758L97.1641 0.708403H92.0787Z"
         fill="#2BB381"
-        fill-opacity="0.5"
+        fillOpacity="0.5"
       />
       <path
         d="M114.733 0.706392V5.83986H125.969V35.1878H132.265V5.83986H143.5V0.706392H114.733Z"
         fill="#2BB381"
-        fill-opacity="0.5"
+        fillOpacity="0.5"
       />
       <path
         d="M51.6691 15.3739C52.3383 15.3739 52.8805 15.9162 52.8805 16.5851C52.8805 17.2543 52.3383 17.7966 51.6691 17.7966C51.0002 17.7966 50.4579 17.2543 50.4579 16.5851C50.4579 15.9162 51.0002 15.3739 51.6691 15.3739Z"
         fill="#2BB381"
-        fill-opacity="0.5"
+        fillOpacity="0.5"
       />
       <path
         d="M72.1441 15.5339C72.0015 14.7263 71.8592 13.9184 71.6212 13.1105C71.384 12.3025 71.0989 11.5422 70.7663 10.8291C70.4341 10.1163 70.1015 9.40365 69.6741 8.69069C68.8661 7.40779 67.964 6.26706 66.9188 5.2692C65.8736 4.2712 64.6859 3.4158 63.3558 2.60797C62.0261 1.84743 60.6483 1.2772 59.1756 0.897154C57.7036 0.516956 56.1831 0.326636 54.6157 0.326636C53.0482 0.326636 51.5279 0.516956 50.0553 0.897154C48.583 1.22977 47.2052 1.79999 45.875 2.60797C44.5925 3.36807 43.4049 4.2712 42.3125 5.2692C41.2673 6.26706 40.3647 7.40779 39.5574 8.69069C39.1299 9.40365 38.7972 10.1163 38.4645 10.8291C38.1323 11.5422 37.8474 12.3025 37.6095 13.1105C37.3721 13.9184 37.1819 14.7263 37.0872 15.5339C36.9447 16.3418 36.897 17.1972 36.897 18.0529C36.897 18.8604 36.9447 19.7161 37.0872 20.5239C37.1819 21.3316 37.3721 22.1396 37.6095 22.9476C37.8474 23.7554 38.1323 24.5158 38.4645 25.2288C38.7972 25.9413 39.1299 26.6541 39.5574 27.3198C40.3647 28.6028 41.2673 29.7433 42.3125 30.7411C43.4049 31.7391 44.5925 32.6421 45.875 33.4026C47.2052 34.2103 48.583 34.7805 50.0553 35.1135C51.5279 35.4934 53.0482 35.6835 54.6157 35.6835C55.4706 35.6835 56.3257 35.636 57.1329 35.4934C57.1534 35.4909 57.1732 35.4876 57.1936 35.4851C54.7201 31.9465 55.5433 24.9083 55.649 24.0911L51.026 29.0532C50.7251 29.3761 50.225 29.2936 50.0521 28.8924L49.3412 27.2428C47.782 27.464 46.2796 27.3496 45.058 26.9963C44.3082 26.7794 43.8148 26.3362 43.5089 25.7959C43.678 25.814 43.8614 25.8256 44.0626 25.8256C44.739 25.8256 45.597 25.7043 46.6432 25.3349C46.8064 25.2771 46.8921 25.0979 46.8346 24.9346C46.7767 24.7716 46.5983 24.6872 46.4346 24.7431C45.164 25.1921 44.2137 25.2392 43.5631 25.1671L44.3037 24.0296C44.4139 23.8603 44.2965 23.6356 44.0948 23.6294L43.1028 23.5992C43.1519 23.0376 43.2952 22.5327 43.4728 22.2004C44.4915 20.2925 45.9248 16.7001 48.7334 13.7663C51.2171 11.1719 53.7508 11.6735 54.2852 11.1719C61.4073 4.48517 67.8358 11.9028 67.8358 11.9028C60.8382 10.1448 58.7218 12.1881 58.2639 12.7991C63.0115 11.1807 66.6305 14.8991 66.6305 14.8991C60.3848 13.1817 59.3621 16.6895 59.3621 16.6895L59.3231 16.671C63.0893 24.7583 71.4934 18.6255 72.3327 17.985C72.3304 17.1521 72.2828 16.3205 72.1441 15.5339Z"
         fill="#2BB381"
-        fill-opacity="0.5"
+        fillOpacity="0.5"
       />
     </svg>
   );
diff --git a/app/client-v2/packages/ui/components/Box.tsx b/app/client-v2/packages/ui/components/Box.tsx
new file mode 100644
index 000000000..3fdf246ca
--- /dev/null
+++ b/app/client-v2/packages/ui/components/Box.tsx
@@ -0,0 +1,3 @@
+import { Box } from "@mui/material";
+
+export default Box;
diff --git a/app/client-v2/packages/ui/components/Button.tsx b/app/client-v2/packages/ui/components/Button.tsx
index c2c18a20a..e706784c9 100644
--- a/app/client-v2/packages/ui/components/Button.tsx
+++ b/app/client-v2/packages/ui/components/Button.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // Copyright (c) 2020 GitHub user u/garronej
 
 /* eslint-disable @typescript-eslint/no-namespace */
@@ -15,7 +17,6 @@ import { capitalize } from "tsafe/capitalize";
 import { id } from "tsafe/id";
 
 import { makeStyles } from "../lib/ThemeProvider";
-import { breakpointsValues } from "../lib/breakpoints";
 import { variantNameUsedForMuiButton } from "../lib/typography";
 import { pxToNumber } from "../tools/pxToNumber";
 import type { IconProps } from "./Icon/Icon";
@@ -258,10 +259,6 @@ export function createButton<IconId extends string = never>(params?: {
                 return 1;
               }
 
-              if (theme.windowInnerWidth >= breakpointsValues.xl) {
-                return 3;
-              }
-
               return 4;
             })()
           ),
diff --git a/app/client-v2/packages/ui/components/DashboardSidebar.tsx b/app/client-v2/packages/ui/components/DashboardSidebar.tsx
index 31e2f81ed..e69de29bb 100644
--- a/app/client-v2/packages/ui/components/DashboardSidebar.tsx
+++ b/app/client-v2/packages/ui/components/DashboardSidebar.tsx
@@ -1,89 +0,0 @@
-import { Fade, List, ListItem, ListItemButton, ListItemIcon } from "@mui/material";
-import { useState } from "react";
-
-import { makeStyles } from "../lib/ThemeProvider";
-import { Icon } from "./theme";
-import type { IconId } from "./theme";
-import { Text } from "./theme";
-import { useTheme } from "./theme";
-
-export type DashboardSidebarProps = {
-  items: { link: string; icon: IconId; placeholder: string }[];
-  width: number;
-  extended_width: number;
-  children: React.ReactNode;
-};
-
-export function DashboardSidebar(props: DashboardSidebarProps) {
-  const { items, children } = props;
-  const { classes, cx } = useStyles(props)();
-  const theme = useTheme();
-  console.log(theme);
-  const [hover, setHover] = useState(false);
-  const [active, setActive] = useState<string | null>(items[0].placeholder);
-
-  const handleHover = () => {
-    setHover((currHover) => !currHover);
-  };
-
-  return (
-    <>
-      <nav className={cx(classes.root)} onMouseEnter={handleHover} onMouseLeave={handleHover}>
-        <List>
-          {items?.map(({ link, icon, placeholder }, indx) => (
-            <ListItem onClick={() => setActive(placeholder)} disablePadding key={indx}>
-              <ListItemButton className={classes.itemList}>
-                <ListItemIcon sx={{ marginRight: "10px" }}>
-                  <Icon
-                    size="default"
-                    iconId={icon}
-                    iconVariant={
-                      active === placeholder ? "focus" : theme.isDarkModeEnabled ? "white" : "gray"
-                    }
-                  />
-                </ListItemIcon>
-                {hover ? (
-                  <Fade in={true}>
-                    <Text typo="body 2" color={active === placeholder ? "focus" : "primary"}>
-                      {placeholder}
-                    </Text>
-                  </Fade>
-                ) : (
-                  <></>
-                )}
-              </ListItemButton>
-            </ListItem>
-          ))}
-        </List>
-      </nav>
-      {children}
-    </>
-  );
-}
-
-const useStyles = (props: DashboardSidebarProps) =>
-  makeStyles({ name: { DashboardSidebar } })((theme) => ({
-    root: {
-      zIndex: "20",
-      paddingTop: "52px",
-      backgroundColor: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].light,
-      cursor: "pointer",
-      width: props.width,
-      left: 0,
-      top: 0,
-      bottom: 0,
-      position: "fixed",
-      transition: "width 0.4s ease",
-      display: "flex",
-      flexDirection: "column",
-      boxShadow: "0px 2px 4px -1px rgba(0, 0, 0, 0.12)",
-      "&:hover": {
-        width: props.extended_width,
-      },
-    },
-    itemList: {
-      "&:hover": {
-        backgroundColor: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1,
-      },
-    },
-  }));
diff --git a/app/client-v2/packages/ui/components/Footer.tsx b/app/client-v2/packages/ui/components/Footer.tsx
index b261206df..7a2cb6121 100644
--- a/app/client-v2/packages/ui/components/Footer.tsx
+++ b/app/client-v2/packages/ui/components/Footer.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, { forwardRef, memo } from "react";
 
 import { makeStyles } from "../lib/ThemeProvider";
diff --git a/app/client-v2/packages/ui/components/Grid.tsx b/app/client-v2/packages/ui/components/Grid.tsx
new file mode 100644
index 000000000..ec133b1fd
--- /dev/null
+++ b/app/client-v2/packages/ui/components/Grid.tsx
@@ -0,0 +1,3 @@
+import Grid from "@mui/material/Unstable_Grid2/Grid2";
+
+export default Grid;
diff --git a/app/client-v2/packages/ui/components/Icon/IconButton.tsx b/app/client-v2/packages/ui/components/Icon/IconButton.tsx
index c25b9b29b..3f80fc978 100644
--- a/app/client-v2/packages/ui/components/Icon/IconButton.tsx
+++ b/app/client-v2/packages/ui/components/Icon/IconButton.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // Copyright (c) 2020 GitHub user u/garronej
 
 /* eslint-disable @typescript-eslint/no-namespace */
diff --git a/app/client-v2/packages/ui/components/Lists/ChipList.tsx b/app/client-v2/packages/ui/components/Lists/ChipList.tsx
index 978401ee4..6faa0bc18 100644
--- a/app/client-v2/packages/ui/components/Lists/ChipList.tsx
+++ b/app/client-v2/packages/ui/components/Lists/ChipList.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { Chip } from "@mui/material";
 import { forwardRef, memo, useEffect, useRef } from "react";
 
diff --git a/app/client-v2/packages/ui/components/Text/TextField.tsx b/app/client-v2/packages/ui/components/Text/TextField.tsx
index eac8a5a06..a08ffb24f 100644
--- a/app/client-v2/packages/ui/components/Text/TextField.tsx
+++ b/app/client-v2/packages/ui/components/Text/TextField.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // Copyright (c) 2020 GitHub user u/garronej
 
 /* eslint-disable react-hooks/exhaustive-deps */
@@ -21,7 +23,6 @@ import type { Equals } from "tsafe";
 import { assert } from "tsafe/assert";
 
 import { makeStyles } from "../../lib/ThemeProvider";
-import { getBrowser } from "../../tools/getBrowser";
 import { useNonPostableEvtLike } from "../../tools/useNonPostableEvtLike";
 import { CircularProgress } from "../CircularProgress";
 import { createIcon } from "../Icon/Icon";
@@ -469,21 +470,6 @@ const useStyles = makeStyles<{
     "&:focus": {
       outline: "unset",
     },
-    "& input:-webkit-autofill": {
-      ...(() => {
-        switch (getBrowser()) {
-          case "chrome":
-          case "safari":
-            return {
-              WebkitTextFillColor:
-                theme.colors.useCases.typography[theme.isDarkModeEnabled ? "textPrimary" : "textSecondary"],
-              WebkitBoxShadow: `0 0 0 1000px ${theme.colors.useCases.surfaces.surface1} inset`,
-            };
-          default:
-            return {};
-        }
-      })(),
-    },
     "& .MuiInput-underline:hover:not(.Mui-disabled):before": {
       borderBottomWidth: filled ? 0 : 1,
     },
diff --git a/app/client-v2/packages/ui/components/temporary/home/index.ts b/app/client-v2/packages/ui/components/temporary/home/index.ts
deleted file mode 100644
index 5d792957c..000000000
--- a/app/client-v2/packages/ui/components/temporary/home/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Home";
diff --git a/app/client-v2/packages/ui/components/temporary/settings/Settings.tsx b/app/client-v2/packages/ui/components/temporary/settings/Settings.tsx
deleted file mode 100644
index e7633d129..000000000
--- a/app/client-v2/packages/ui/components/temporary/settings/Settings.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { useState } from "react";
-
-import { makeStyles } from "../../../lib/ThemeProvider";
-import { Divider } from "../../Divider";
-import { Text } from "../../theme";
-import DashboardLayout from "../DashboardLayout";
-import Organization from "./organization/Organization";
-import PrivacyPreferences from "./privacyPreferences/PrivacyPreferences";
-import SubscriptionSettings from "./subscription/SubscriptionSettings";
-
-const Settings = () => {
-  const [currentSetting, setCurrentSetting] = useState<{ children: React.ReactNode; value: string }>({
-    children: <Organization />,
-    value: "Organization",
-  });
-
-  const { classes, cx } = useStyles();
-
-  return (
-    <DashboardLayout>
-      <div className={classes.wrapper}>
-        <div className={classes.sideBarSection}>
-          <span
-            onClick={() =>
-              setCurrentSetting({
-                children: <Organization />,
-                value: "Organization",
-              })
-            }>
-            <Text
-              typo="body 2"
-              className={
-                currentSetting.value === "Organization" ? classes.selectedSidebarText : classes.SidebarText
-              }>
-              Organization
-            </Text>
-          </span>
-          <Divider width="100%" color="main" className={classes.hr} />
-          <span
-            onClick={() =>
-              setCurrentSetting({
-                children: <SubscriptionSettings />,
-                value: "Subscription",
-              })
-            }>
-            <Text
-              typo="body 2"
-              className={
-                currentSetting.value === "Subscription" ? classes.selectedSidebarText : classes.SidebarText
-              }>
-              Subscription
-            </Text>
-          </span>
-          <Divider width="100%" color="main" className={classes.hr} />
-          <span
-            onClick={() =>
-              setCurrentSetting({
-                children: <PrivacyPreferences />,
-                value: "Privacy preferences",
-              })
-            }>
-            <Text
-              typo="body 2"
-              className={
-                currentSetting.value === "Privacy preferences"
-                  ? classes.selectedSidebarText
-                  : classes.SidebarText
-              }>
-              Privacy preferences
-            </Text>
-          </span>
-          <Divider width="100%" color="main" className={classes.hr} />
-        </div>
-        <div className={classes.mainSection}>{currentSetting.children}</div>
-      </div>
-    </DashboardLayout>
-  );
-};
-
-const useStyles = makeStyles({ name: { Settings } })((theme) => ({
-  wrapper: {
-    display: "flex",
-    gap: theme.spacing(4),
-  },
-  SidebarText: {
-    // padding: theme.spacing(1) theme.spacing(4),
-    padding: `${theme.spacing(1)}px ${theme.spacing(4)}px`,
-    cursor: "pointer",
-    "&:hover": {
-      backgroundColor: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"].greyVariant1 + "50",
-    },
-  },
-  selectedSidebarText: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(4)}px`,
-    cursor: "pointer",
-    backgroundColor: theme.colors.palette.focus.light + "14",
-  },
-  hr: {
-    margin: `${theme.spacing(1)}px 0`,
-  },
-  mainSection: {
-    flexGrow: "1",
-  },
-  sideBarSection: {
-    minWidth: "268px",
-    "@media (max-width: 1268px)": {
-      minWidth: "168px",
-    },
-  },
-}));
-
-export default Settings;
diff --git a/app/client-v2/packages/ui/components/temporary/settings/privacyPreferences/PrivacyPreferences.tsx b/app/client-v2/packages/ui/components/temporary/settings/privacyPreferences/PrivacyPreferences.tsx
deleted file mode 100644
index 0ba8cfd14..000000000
--- a/app/client-v2/packages/ui/components/temporary/settings/privacyPreferences/PrivacyPreferences.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-const PrivacyPreferences = () => {
-  return <div>PrivacyPreferences</div>;
-};
-
-export default PrivacyPreferences;
diff --git a/app/client-v2/packages/ui/components/theme.ts b/app/client-v2/packages/ui/components/theme.ts
index 72d0f0a6b..22398f461 100644
--- a/app/client-v2/packages/ui/components/theme.ts
+++ b/app/client-v2/packages/ui/components/theme.ts
@@ -31,12 +31,8 @@ import { createThemeProvider, defaultGetTypographyDesc } from "../lib";
 
 export const { ThemeProvider, StoryProvider, useTheme } = createThemeProvider({
   isReactStrictModeEnabled: false,
-  getTypographyDesc: ({ windowInnerWidth, browserFontSizeFactor, windowInnerHeight }) => ({
-    ...defaultGetTypographyDesc({
-      windowInnerWidth,
-      browserFontSizeFactor,
-      windowInnerHeight,
-    }),
+  getTypographyDesc: () => ({
+    ...defaultGetTypographyDesc(),
     fontFamily: "'Mulish', sans-serif",
   }),
 });
diff --git a/app/client-v2/packages/ui/lib/ThemeProvider.tsx b/app/client-v2/packages/ui/lib/ThemeProvider.tsx
index ad2340c1a..cd89bae58 100644
--- a/app/client-v2/packages/ui/lib/ThemeProvider.tsx
+++ b/app/client-v2/packages/ui/lib/ThemeProvider.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 // Copyright (c) 2020 GitHub user u/garronej
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -5,17 +7,14 @@
 /* eslint-disable @typescript-eslint/no-namespace */
 import type { Theme as MuiTheme } from "@mui/material";
 import CssBaseline from "@mui/material/CssBaseline";
-import ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
 import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
 import { createTheme as createMuiTheme, unstable_createMuiStrictModeTheme } from "@mui/material/styles";
 import memoize from "memoizee";
 import "minimal-polyfills/Object.fromEntries";
 import { ViewPortAdapter, ViewPortOutOfRangeError } from "powerhooks/ViewPortAdapter";
 import type { ViewPortAdapterProps } from "powerhooks/ViewPortAdapter";
-import { useBrowserFontSizeFactor } from "powerhooks/useBrowserFontSizeFactor";
 import { useGuaranteedMemo } from "powerhooks/useGuaranteedMemo";
-import { useWindowInnerSize } from "powerhooks/useWindowInnerSize";
-import { useContext, createContext, useEffect } from "react";
+import { useContext, createContext } from "react";
 import type { ReactNode } from "react";
 import React from "react";
 import { capitalize } from "tsafe/capitalize";
@@ -23,8 +22,6 @@ import { id } from "tsafe/id";
 import { createMakeAndWithStyles } from "tss-react";
 
 import type { ReactComponent } from "../tools/ReactComponent";
-import { createSplashScreen } from "./SplashScreen";
-import type { SplashScreenProps } from "./SplashScreen";
 import { breakpointsValues } from "./breakpoints";
 import type { PaletteBase, ColorUseCasesBase, CreateColorUseCase } from "./color";
 import { defaultPalette, createDefaultColorUseCases } from "./color";
@@ -36,10 +33,8 @@ import { defaultSpacingConfig } from "./spacing";
 import type { SpacingConfig, Spacing } from "./spacing";
 import type { ComputedTypography, GetTypographyDesc } from "./typography";
 import { defaultGetTypographyDesc, createMuiTypographyOptions, getComputedTypography } from "./typography";
-import { useIsDarkModeEnabled, evtIsDarkModeEnabled } from "./useIsDarkModeEnabled";
 
 export { useDomRect } from "powerhooks/useDomRect";
-export { useWindowInnerSize, useBrowserFontSizeFactor };
 export { ViewPortOutOfRangeError };
 
 export type Theme<
@@ -57,11 +52,9 @@ export type Theme<
   spacing: Spacing;
   muiTheme: MuiTheme;
   iconSizesInPxByName: Record<IconSizeName, number>;
-  windowInnerWidth: number;
 };
 
 const themeBaseContext = createContext<Theme | undefined>(undefined);
-const isDarkModeEnabledOverrideContext = createContext<boolean | undefined>(undefined);
 
 /** Used internally, do not export globally */
 
@@ -91,7 +84,6 @@ export type ThemeProviderProps = {
    * the callback will be invoked again, it's best
    * a cont callback */
   getViewPortConfig?: ViewPortAdapterProps["getConfig"];
-  splashScreen?: Omit<SplashScreenProps, "children">;
 };
 
 export declare namespace ThemeProviderProps {
@@ -123,7 +115,6 @@ export function createThemeProvider<
   palette?: Palette;
   createColorUseCases?: CreateColorUseCase<Palette, ColorUseCases>;
   spacingConfig?: SpacingConfig;
-  defaultIsDarkModeEnabled?: boolean;
   getIconSizeInPx?: GetIconSizeInPx;
   /** Default true */
 }) {
@@ -135,27 +126,13 @@ export function createThemeProvider<
     getTypographyDesc = defaultGetTypographyDesc as NonNullable<(typeof params)["getTypographyDesc"]>,
     isReactStrictModeEnabled = false,
     spacingConfig = defaultSpacingConfig,
-    defaultIsDarkModeEnabled,
     getIconSizeInPx = defaultGetIconSizeInPx,
   } = params;
 
-  if (defaultIsDarkModeEnabled !== undefined) {
-    evtIsDarkModeEnabled.state = defaultIsDarkModeEnabled;
-  }
-
   const { useTheme } = (() => {
     const createTheme = memoize(
-      (
-        isDarkModeEnabled: boolean,
-        windowInnerWidth: number,
-        windowInnerHeight: number,
-        browserFontSizeFactor: number
-      ) => {
-        const typographyDesc = getTypographyDesc({
-          windowInnerWidth,
-          windowInnerHeight,
-          browserFontSizeFactor,
-        });
+      (isDarkModeEnabled: boolean) => {
+        const typographyDesc = getTypographyDesc();
         const useCases = createColorUseCases({
           palette,
           isDarkModeEnabled,
@@ -164,14 +141,13 @@ export function createThemeProvider<
         const spacing = (factorOrExplicitNumberOfPx: number | `${number}px`) =>
           spacingConfig({
             factorOrExplicitNumberOfPx,
-            windowInnerWidth,
             rootFontSizePx: typographyDesc.rootFontSizePx,
           });
 
         return id<Theme<Palette, ColorUseCases, CustomTypographyVariantName>>({
           colors: { palette, useCases },
-          typography: getComputedTypography({ typographyDesc }),
           isDarkModeEnabled,
+          typography: getComputedTypography({ typographyDesc }),
           shadows,
           ...(() => {
             const muiTheme = (isReactStrictModeEnabled ? unstable_createMuiStrictModeTheme : createMuiTheme)({
@@ -245,89 +221,42 @@ export function createThemeProvider<
           })(),
           iconSizesInPxByName: getIconSizesInPxByName({
             getIconSizeInPx,
-            windowInnerWidth,
             rootFontSizePx: typographyDesc.rootFontSizePx,
           }),
-          windowInnerWidth,
         });
       },
       { max: 1 }
     );
 
     function useTheme() {
-      const { isDarkModeEnabled } = useIsDarkModeEnabled();
-      const { windowInnerWidth, windowInnerHeight } = useWindowInnerSize();
-      const { browserFontSizeFactor } = useBrowserFontSizeFactor();
-
-      const isDarkModeEnabledOverride = useContext(isDarkModeEnabledOverrideContext);
+      const isDarkModeEnabled = false;
 
-      return createTheme(
-        isDarkModeEnabledOverride ?? isDarkModeEnabled,
-        windowInnerWidth,
-        windowInnerHeight,
-        browserFontSizeFactor
-      );
+      return createTheme(isDarkModeEnabled);
     }
 
     return { useTheme };
   })();
 
-  const { SplashScreen } = createSplashScreen({ useTheme });
-
   const { ThemeProvider } = (() => {
-    function ThemeProviderWithinViewPortAdapter(props: {
-      splashScreen: ThemeProviderProps["splashScreen"];
-      children: ReactNode;
-    }) {
-      const { splashScreen, children } = props;
+    function ThemeProviderWithinViewPortAdapter(props: { children: ReactNode }) {
+      const { children } = props;
 
       const theme = useTheme();
 
-      {
-        const backgroundColor = theme.colors.useCases.surfaces.background;
-
-        useEffect(() => {
-          document.querySelector("meta[name=theme-color]")?.remove();
-          document.head.insertAdjacentHTML(
-            "beforeend",
-            `<meta name="theme-color" content="${backgroundColor}">`
-          );
-        }, [backgroundColor]);
-      }
-
-      const isStoryProvider = useContext(isDarkModeEnabledOverrideContext) !== undefined;
-
-      // prettier-ignore
-      const CssBaselineOrScopedCssBaseline = useGuaranteedMemo(
-                (): ReactComponent<{ children: ReactNode }> =>
-                    isStoryProvider
-                        ? ({ children }) => (<ScopedCssBaseline>{children}</ScopedCssBaseline>)
-                        : ({ children }) => (<><CssBaseline />{children}</>),
-                [isStoryProvider],
-            );
-
-      // prettier-ignore
-      const SplashScreenOrId = useGuaranteedMemo(
-                (): ReactComponent<{ children: ReactNode }> =>
-                    splashScreen === undefined ?
-                        (({ children }) => <>{children}</>) :
-                        (({ children }) => <SplashScreen {...splashScreen}>{children}</SplashScreen>),
-                [splashScreen],
-            );
-
       return (
         <themeBaseContext.Provider value={theme}>
           <MuiThemeProvider theme={theme.muiTheme}>
-            <CssBaselineOrScopedCssBaseline>
-              <SplashScreenOrId>{children}</SplashScreenOrId>
-            </CssBaselineOrScopedCssBaseline>
+            <>
+              <CssBaseline />
+              {children}
+            </>
           </MuiThemeProvider>
         </themeBaseContext.Provider>
       );
     }
 
     function ThemeProvider(props: ThemeProviderProps) {
-      const { getViewPortConfig, children, splashScreen } = props;
+      const { getViewPortConfig, children } = props;
 
       // prettier-ignore
       const ViewPortAdapterOrId = useGuaranteedMemo(
@@ -339,9 +268,7 @@ export function createThemeProvider<
 
       return (
         <ViewPortAdapterOrId>
-          <ThemeProviderWithinViewPortAdapter splashScreen={splashScreen}>
-            {children}
-          </ThemeProviderWithinViewPortAdapter>
+          <ThemeProviderWithinViewPortAdapter>{children}</ThemeProviderWithinViewPortAdapter>
         </ViewPortAdapterOrId>
       );
     }
@@ -352,15 +279,7 @@ export function createThemeProvider<
   function StoryProvider(props: { dark?: boolean; children: ReactNode }) {
     const { dark = false, children } = props;
 
-    useEffect(() => {
-      evtIsDarkModeEnabled.state = dark;
-    }, [dark]);
-
-    return (
-      <isDarkModeEnabledOverrideContext.Provider value={dark}>
-        <ThemeProvider>{children}</ThemeProvider>
-      </isDarkModeEnabledOverrideContext.Provider>
-    );
+    return <ThemeProvider>{children}</ThemeProvider>;
   }
 
   const { makeStyles, useStyles, withStyles } = createMakeAndWithStyles({
diff --git a/app/client-v2/packages/ui/lib/icon.ts b/app/client-v2/packages/ui/lib/icon.ts
index 5927b1df3..91f756aaf 100644
--- a/app/client-v2/packages/ui/lib/icon.ts
+++ b/app/client-v2/packages/ui/lib/icon.ts
@@ -1,70 +1,43 @@
 // Copyright (c) 2020 GitHub user u/garronej
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { breakpointsValues } from "./breakpoints";
 
 export const iconSizeNames = ["extra small", "small", "default", "medium", "large"] as const;
 
 export type IconSizeName = (typeof iconSizeNames)[number];
 
-export type GetIconSizeInPx = (params: {
-  sizeName: IconSizeName;
-  windowInnerWidth: number;
-  rootFontSizePx: number;
-}) => number;
+export type GetIconSizeInPx = (params: { sizeName: IconSizeName; rootFontSizePx: number }) => number;
 
-export const defaultGetIconSizeInPx: GetIconSizeInPx = ({ sizeName, windowInnerWidth, rootFontSizePx }) =>
+export const defaultGetIconSizeInPx: GetIconSizeInPx = ({ sizeName, rootFontSizePx }) =>
   rootFontSizePx *
   (() => {
     switch (sizeName) {
       case "extra small":
         return 1;
       case "small":
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return 1.25;
-        }
-
         return 1;
 
       case "default":
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return 1.5;
-        }
-
         return 1.25;
       case "medium":
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return 2;
-        }
-
         return 1.25;
 
       case "large":
-        if (windowInnerWidth >= breakpointsValues.xl) {
-          return 2.5;
-        }
-
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return 2;
-        }
-
         return 1.5;
     }
   })();
 
 export function getIconSizesInPxByName(params: {
   getIconSizeInPx: GetIconSizeInPx;
-  windowInnerWidth: number;
   rootFontSizePx: number;
 }): Record<IconSizeName, number> {
-  const { getIconSizeInPx, windowInnerWidth, rootFontSizePx } = params;
+  const { getIconSizeInPx, rootFontSizePx } = params;
 
   const out: ReturnType<typeof getIconSizesInPxByName> = {} as any;
 
   iconSizeNames.forEach(
     (sizeName) =>
       (out[sizeName] = getIconSizeInPx({
-        windowInnerWidth,
         rootFontSizePx,
         sizeName,
       }))
diff --git a/app/client-v2/packages/ui/lib/icons.ts b/app/client-v2/packages/ui/lib/icons.ts
deleted file mode 100644
index 4818eee6a..000000000
--- a/app/client-v2/packages/ui/lib/icons.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import CloseSharp from "@mui/icons-material/CloseSharp";
-
-export { CloseSharp };
diff --git a/app/client-v2/packages/ui/lib/index.ts b/app/client-v2/packages/ui/lib/index.ts
index 92965f886..ecc04c443 100644
--- a/app/client-v2/packages/ui/lib/index.ts
+++ b/app/client-v2/packages/ui/lib/index.ts
@@ -4,10 +4,6 @@ export type { PaletteBase, ColorUseCasesBase, CreateColorUseCase } from "./color
 
 export { defaultPalette, createDefaultColorUseCases, changeColorOpacity } from "./color";
 
-export { getIsDarkModeEnabledOsDefault } from "../tools/getIsDarkModeEnabledOsDefault";
-
-export { useIsDarkModeEnabled, evtIsDarkModeEnabled } from "./useIsDarkModeEnabled";
-
 export type { TypographyDesc, ComputedTypography, GetTypographyDesc, ChromeFontSize } from "./typography";
 export { defaultGetTypographyDesc, chromeFontSizesFactors } from "./typography";
 
@@ -20,15 +16,7 @@ export { defaultSpacingConfig } from "./spacing";
 export type { IconSizeName, GetIconSizeInPx } from "./icon";
 export { defaultGetIconSizeInPx } from "./icon";
 
-export { useSplashScreen } from "./SplashScreen";
-
 export type { Theme, ThemeProviderProps } from "./ThemeProvider";
-export {
-  createThemeProvider,
-  useDomRect,
-  useWindowInnerSize,
-  useBrowserFontSizeFactor,
-  ViewPortOutOfRangeError,
-} from "./ThemeProvider";
+export { createThemeProvider, useDomRect, ViewPortOutOfRangeError } from "./ThemeProvider";
 
 export { pxToNumber } from "../tools/pxToNumber";
diff --git a/app/client-v2/packages/ui/lib/spacing.ts b/app/client-v2/packages/ui/lib/spacing.ts
index 6c459ea59..6c12aa5b5 100644
--- a/app/client-v2/packages/ui/lib/spacing.ts
+++ b/app/client-v2/packages/ui/lib/spacing.ts
@@ -1,8 +1,6 @@
 // Copyright (c) 2020 GitHub user u/garronej
 import { assert } from "tsafe/assert";
 
-import { breakpointsValues } from "./breakpoints";
-
 export interface Spacing {
   (value: number): number;
   (params: Record<"topBottom" | "rightLeft", number | string>): string;
@@ -20,15 +18,10 @@ export interface Spacing {
 export type SpacingConfig = (params: {
   /** Assert positive integer */
   factorOrExplicitNumberOfPx: number | `${number}px`;
-  windowInnerWidth: number;
   rootFontSizePx: number;
 }) => number;
 
-export const defaultSpacingConfig: SpacingConfig = ({
-  factorOrExplicitNumberOfPx,
-  windowInnerWidth,
-  rootFontSizePx,
-}) => {
+export const defaultSpacingConfig: SpacingConfig = ({ factorOrExplicitNumberOfPx, rootFontSizePx }) => {
   if (typeof factorOrExplicitNumberOfPx === "string") {
     const match = factorOrExplicitNumberOfPx.match(/^([+-]?([0-9]*[.])?[0-9]+)px$/);
 
@@ -54,40 +47,6 @@ export const defaultSpacingConfig: SpacingConfig = ({
         return (factor - 5) * callee(6);
       }
 
-      if (windowInnerWidth >= breakpointsValues.xl) {
-        switch (factor) {
-          case 1:
-            return 0.25;
-          case 2:
-            return 0.5;
-          case 3:
-            return 1;
-          case 4:
-            return 1.5;
-          case 5:
-            return 2;
-          case 6:
-            return 2.5;
-        }
-      }
-
-      if (windowInnerWidth >= breakpointsValues.lg) {
-        switch (factor) {
-          case 1:
-            return 0.25;
-          case 2:
-            return 0.5;
-          case 3:
-            return 1;
-          case 4:
-            return 1;
-          case 5:
-            return 1.5;
-          case 6:
-            return 2;
-        }
-      }
-
       switch (factor) {
         case 1:
           return 0.25;
diff --git a/app/client-v2/packages/ui/lib/typography.ts b/app/client-v2/packages/ui/lib/typography.ts
index bff67bfbc..af380a8a2 100644
--- a/app/client-v2/packages/ui/lib/typography.ts
+++ b/app/client-v2/packages/ui/lib/typography.ts
@@ -9,8 +9,6 @@ import type { TypographyOptions as MuiTypographyOptions } from "@mui/material/st
 import { id } from "tsafe/id";
 import { objectKeys } from "tsafe/objectKeys";
 
-import { breakpointsValues } from "./breakpoints";
-
 export type { ChromeFontSize } from "powerhooks/ViewPortAdapter";
 export { chromeFontSizesFactors } from "powerhooks/ViewPortAdapter";
 
@@ -77,37 +75,16 @@ export type ComputedTypography<CustomVariantName extends string> = {
   };
 };
 
-export type GetTypographyDesc<CustomVariantName extends string> = (params: {
-  windowInnerWidth: number;
-  windowInnerHeight: number;
-  browserFontSizeFactor: number;
-}) => TypographyDesc<CustomVariantName>;
+export type GetTypographyDesc<CustomVariantName extends string> = () => TypographyDesc<CustomVariantName>;
 
-export const defaultGetTypographyDesc: GetTypographyDesc<never> = ({
-  windowInnerWidth,
-  browserFontSizeFactor,
-}) => ({
+export const defaultGetTypographyDesc: GetTypographyDesc<never> = () => ({
   fontFamily: "sans-serif",
-  rootFontSizePx: 16 * browserFontSizeFactor,
+  rootFontSizePx: 16,
   variants: {
     "display heading": {
       htmlComponent: "h1",
       fontWeight: id<TypographyDesc.FontWeightProperty>("bold"),
       ...(() => {
-        if (windowInnerWidth >= breakpointsValues.xl) {
-          return {
-            fontSizeRem: 2.8,
-            lineHeightRem: 3.25,
-          };
-        }
-
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return {
-            fontSizeRem: 2.25,
-            lineHeightRem: 2.5,
-          };
-        }
-
         return {
           fontSizeRem: 1.75,
           lineHeightRem: 2.5,
@@ -118,20 +95,6 @@ export const defaultGetTypographyDesc: GetTypographyDesc<never> = ({
       htmlComponent: "h2",
       fontWeight: id<TypographyDesc.FontWeightProperty>("bold"),
       ...(() => {
-        if (windowInnerWidth >= breakpointsValues.xl) {
-          return {
-            fontSizeRem: 2.25,
-            lineHeightRem: 2.5,
-          };
-        }
-
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return {
-            fontSizeRem: 1.75,
-            lineHeightRem: 2.25,
-          };
-        }
-
         return {
           fontSizeRem: 1.125,
           lineHeightRem: 1.25,
@@ -142,20 +105,6 @@ export const defaultGetTypographyDesc: GetTypographyDesc<never> = ({
       htmlComponent: "h3",
       fontWeight: id<TypographyDesc.FontWeightProperty>("normal"),
       ...(() => {
-        if (windowInnerWidth >= breakpointsValues.xl) {
-          return {
-            fontSizeRem: 1.75,
-            lineHeightRem: 2.25,
-          };
-        }
-
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return {
-            fontSizeRem: 1.5,
-            lineHeightRem: 2,
-          };
-        }
-
         return {
           fontSizeRem: 1,
           lineHeightRem: 1.475,
@@ -166,20 +115,6 @@ export const defaultGetTypographyDesc: GetTypographyDesc<never> = ({
       htmlComponent: "h4",
       fontWeight: id<TypographyDesc.FontWeightProperty>("bold"),
       ...(() => {
-        if (windowInnerWidth >= breakpointsValues.xl) {
-          return {
-            fontSizeRem: 1.5,
-            lineHeightRem: 2,
-          };
-        }
-
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return {
-            fontSizeRem: 1.25,
-            lineHeightRem: 1.7,
-          };
-        }
-
         return {
           fontSizeRem: 0.875,
           lineHeightRem: 1.28,
@@ -190,20 +125,6 @@ export const defaultGetTypographyDesc: GetTypographyDesc<never> = ({
       htmlComponent: "h5",
       fontWeight: id<TypographyDesc.FontWeightProperty>(600),
       ...(() => {
-        if (windowInnerWidth >= breakpointsValues.xl) {
-          return {
-            fontSizeRem: 1.25,
-            lineHeightRem: 1.7,
-          };
-        }
-
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return {
-            fontSizeRem: 1.125,
-            lineHeightRem: 1.25,
-          };
-        }
-
         return {
           fontSizeRem: 0.875,
           lineHeightRem: 1.28,
@@ -214,20 +135,6 @@ export const defaultGetTypographyDesc: GetTypographyDesc<never> = ({
       htmlComponent: "h5",
       fontWeight: id<TypographyDesc.FontWeightProperty>(500),
       ...(() => {
-        if (windowInnerWidth >= breakpointsValues.xl) {
-          return {
-            fontSizeRem: 1.25,
-            lineHeightRem: 1.7,
-          };
-        }
-
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return {
-            fontSizeRem: 1.125,
-            lineHeightRem: 1.25,
-          };
-        }
-
         return {
           fontSizeRem: 0.875,
           lineHeightRem: 1.28,
@@ -238,20 +145,6 @@ export const defaultGetTypographyDesc: GetTypographyDesc<never> = ({
       htmlComponent: "h6",
       fontWeight: id<TypographyDesc.FontWeightProperty>(500),
       ...(() => {
-        if (windowInnerWidth >= breakpointsValues.xl) {
-          return {
-            fontSizeRem: 1,
-            lineHeightRem: 1.475,
-          };
-        }
-
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return {
-            fontSizeRem: 0.875,
-            lineHeightRem: 1.28,
-          };
-        }
-
         return {
           fontSizeRem: 0.75,
           lineHeightRem: 1,
@@ -262,20 +155,6 @@ export const defaultGetTypographyDesc: GetTypographyDesc<never> = ({
       htmlComponent: "h6",
       fontWeight: id<TypographyDesc.FontWeightProperty>(500),
       ...(() => {
-        if (windowInnerWidth >= breakpointsValues.xl) {
-          return {
-            fontSizeRem: 0.875,
-            lineHeightRem: 1.28,
-          };
-        }
-
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return {
-            fontSizeRem: 0.75,
-            lineHeightRem: 1,
-          };
-        }
-
         return {
           fontSizeRem: 0.625,
           lineHeightRem: 0.69,
@@ -286,20 +165,6 @@ export const defaultGetTypographyDesc: GetTypographyDesc<never> = ({
       htmlComponent: "p",
       fontWeight: id<TypographyDesc.FontWeightProperty>("normal"),
       ...(() => {
-        if (windowInnerWidth >= breakpointsValues.xl) {
-          return {
-            fontSizeRem: 1.063,
-            lineHeightRem: 1.625,
-          };
-        }
-
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return {
-            fontSizeRem: 1,
-            lineHeightRem: 1.5,
-          };
-        }
-
         return {
           fontSizeRem: 0.875,
           lineHeightRem: 1.313,
@@ -310,20 +175,6 @@ export const defaultGetTypographyDesc: GetTypographyDesc<never> = ({
       htmlComponent: "p",
       fontWeight: id<TypographyDesc.FontWeightProperty>("normal"),
       ...(() => {
-        if (windowInnerWidth >= breakpointsValues.xl) {
-          return {
-            fontSizeRem: 1,
-            lineHeightRem: 1.5,
-          };
-        }
-
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return {
-            fontSizeRem: 0.875,
-            lineHeightRem: 1.313,
-          };
-        }
-
         return {
           fontSizeRem: 0.688,
           lineHeightRem: 1.125,
@@ -334,20 +185,6 @@ export const defaultGetTypographyDesc: GetTypographyDesc<never> = ({
       htmlComponent: "p",
       fontWeight: "normal",
       ...(() => {
-        if (windowInnerWidth >= breakpointsValues.xl) {
-          return {
-            fontSizeRem: 0.875,
-            lineHeightRem: 1.313,
-          };
-        }
-
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return {
-            fontSizeRem: 0.688,
-            lineHeightRem: 1.125,
-          };
-        }
-
         return {
           fontSizeRem: 0.625,
           lineHeightRem: 0.69,
@@ -358,20 +195,6 @@ export const defaultGetTypographyDesc: GetTypographyDesc<never> = ({
       htmlComponent: "p",
       fontWeight: id<TypographyDesc.FontWeightProperty>("normal"),
       ...(() => {
-        if (windowInnerWidth >= breakpointsValues.xl) {
-          return {
-            fontSizeRem: 0.75,
-            lineHeightRem: 1,
-          };
-        }
-
-        if (windowInnerWidth >= breakpointsValues.lg) {
-          return {
-            fontSizeRem: 0.625,
-            lineHeightRem: 0.69,
-          };
-        }
-
         return {
           fontSizeRem: 0.45,
           lineHeightRem: 0.75,
diff --git a/app/client-v2/packages/ui/lib/useIsDarkModeEnabled.ts b/app/client-v2/packages/ui/lib/useIsDarkModeEnabled.ts
deleted file mode 100644
index b9d2e366b..000000000
--- a/app/client-v2/packages/ui/lib/useIsDarkModeEnabled.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-// Copyright (c) 2020 GitHub user u/garronej
-import type { StatefulEvt } from "evt";
-import { statefulObservableToStatefulEvt } from "powerhooks/tools/StatefulObservable/statefulObservableToStatefulEvt";
-import { updateSearchBarUrl, retrieveParamFromUrl } from "powerhooks/tools/urlSearchParams";
-import { createUseGlobalState } from "powerhooks/useGlobalState";
-
-const { useIsDarkModeEnabled, $isDarkModeEnabled } = createUseGlobalState({
-  name: "isDarkModeEnabled",
-  initialState: window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches,
-  doPersistAcrossReloads: true,
-});
-
-export { useIsDarkModeEnabled };
-
-export const evtIsDarkModeEnabled: StatefulEvt<boolean> = statefulObservableToStatefulEvt({
-  statefulObservable: $isDarkModeEnabled,
-});
-
-(() => {
-  const result = retrieveParamFromUrl({
-    url: window.location.href,
-    name: "theme",
-  });
-
-  if (!result.wasPresent) {
-    return;
-  }
-
-  updateSearchBarUrl(result.newUrl);
-
-  const isDarkModeEnabled = (() => {
-    switch (result.value) {
-      case "dark":
-        return true;
-      case "light":
-        return false;
-      default:
-        return undefined;
-    }
-  })();
-
-  if (isDarkModeEnabled === undefined) {
-    return;
-  }
-
-  evtIsDarkModeEnabled.state = isDarkModeEnabled;
-})();
-
-evtIsDarkModeEnabled.attach((isDarkModeEnabled) => {
-  const id = "root-color-scheme";
-
-  remove_existing_element: {
-    const element = document.getElementById(id);
-
-    if (element === null) {
-      break remove_existing_element;
-    }
-
-    element.remove();
-  }
-
-  const element = document.createElement("style");
-
-  element.id = id;
-
-  element.innerHTML = `
-				:root {
-					color-scheme: ${isDarkModeEnabled ? "dark" : "light"}
-				}
-		`;
-
-  document.getElementsByTagName("head")[0].appendChild(element);
-});
diff --git a/app/client-v2/packages/ui/stories/theme.ts b/app/client-v2/packages/ui/stories/theme.ts
index 9faaa9698..fb4106d3a 100644
--- a/app/client-v2/packages/ui/stories/theme.ts
+++ b/app/client-v2/packages/ui/stories/theme.ts
@@ -31,12 +31,8 @@ import { createThemeProvider, defaultGetTypographyDesc } from "../lib";
 
 export const { ThemeProvider, StoryProvider, useTheme } = createThemeProvider({
   isReactStrictModeEnabled: false,
-  getTypographyDesc: ({ windowInnerWidth, browserFontSizeFactor, windowInnerHeight }) => ({
-    ...defaultGetTypographyDesc({
-      windowInnerWidth,
-      browserFontSizeFactor,
-      windowInnerHeight,
-    }),
+  getTypographyDesc: () => ({
+    ...defaultGetTypographyDesc(),
     fontFamily: '"Mulish", sans-serif',
   }),
 });
diff --git a/app/client-v2/packages/ui/tools/getBrowser.ts b/app/client-v2/packages/ui/tools/getBrowser.ts
deleted file mode 100644
index 3e608104d..000000000
--- a/app/client-v2/packages/ui/tools/getBrowser.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Copyright (c) 2020 GitHub user u/garronej
-import memoize from "memoizee";
-
-export const getBrowser = memoize((): "chrome" | "safari" | "firefox" | undefined => {
-  const { userAgent } = navigator;
-
-  for (const id of ["chrome", "safari", "firefox"] as const) {
-    if (new RegExp(id, "i").test(userAgent)) {
-      return id;
-    }
-  }
-});
diff --git a/app/client-v2/packages/ui/tools/getIsDarkModeEnabledOsDefault.ts b/app/client-v2/packages/ui/tools/getIsDarkModeEnabledOsDefault.ts
deleted file mode 100644
index 964a7e289..000000000
--- a/app/client-v2/packages/ui/tools/getIsDarkModeEnabledOsDefault.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// Copyright (c) 2020 GitHub user u/garronej
-export function getIsDarkModeEnabledOsDefault() {
-  return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
diff --git a/app/client-v2/pnpm-lock.yaml b/app/client-v2/pnpm-lock.yaml
index 21dfdb0b8..605a5242d 100644
--- a/app/client-v2/pnpm-lock.yaml
+++ b/app/client-v2/pnpm-lock.yaml
@@ -32,6 +32,11 @@ importers:
 
   apps/goat:
     specifiers:
+      '@emotion/cache': latest
+      '@emotion/react': latest
+      '@emotion/styled': latest
+      '@mui/icons-material': latest
+      '@mui/material': latest
       '@p4b/config': workspace:*
       '@p4b/tsconfig': workspace:*
       '@p4b/ui': workspace:*
@@ -45,16 +50,21 @@ importers:
       geojson: ^0.5.0
       mapbox-gl: ^2.15.0
       maplibre-gl: ^3.1.0
-      next: 13.4.0
+      next: v13.4.10-canary.8
       next-auth: ^4.22.1
       next-i18next: ^13.2.2
       react: ^18.2.0
       react-dom: ^18.2.0
       react-map-gl: ^7.1.2
       react-redux: ^8.1.1
-      tss-react: ^4.8.3
+      tss-react: latest
       typescript: ^5.0.4
     dependencies:
+      '@emotion/cache': 11.11.0
+      '@emotion/react': 11.11.1_i73ekzlbntu7jol6ph2fvy4mga
+      '@emotion/styled': 11.11.0_rowjtfdjat7gur3v4vqpuckrf4
+      '@mui/icons-material': 5.14.0_bwp336wc6da36p45vaou7iclui
+      '@mui/material': 5.14.0_t72as5nkc72wvuzlfm5pknb3h4
       '@p4b/ui': link:../../packages/ui
       '@reduxjs/toolkit': 1.9.5_b74wrr2de7fkro4nxddtl5rd7q
       '@types/mapbox-gl': 2.7.11
@@ -62,14 +72,14 @@ importers:
       geojson: 0.5.0
       mapbox-gl: 2.15.0
       maplibre-gl: 3.2.0
-      next: 13.4.0_biqbaboplfbrettd7655fr4n2y
-      next-auth: 4.22.1_o36i5nnimpwjhlcn4bax4pcnvu
-      next-i18next: 13.3.0_pbucompijj23knaua6jkvbsvha
+      next: 13.4.10-canary.8_biqbaboplfbrettd7655fr4n2y
+      next-auth: 4.22.1_zy3h4xbwjjivwpgydy2qqot4ly
+      next-i18next: 13.3.0_yx5mqer56li5phymrh3os3enqa
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       react-map-gl: 7.1.2_dpimhpj3xwialnzqhpaxofqs74
       react-redux: 8.1.1_oh6ueir3je3gfvdwt5xbrbexr4
-      tss-react: 4.8.6_xo5t6f4ryb2nvjgwj2cxjowrye
+      tss-react: 4.8.7_xo5t6f4ryb2nvjgwj2cxjowrye
     devDependencies:
       '@p4b/config': link:../../packages/config
       '@p4b/tsconfig': link:../../packages/tsconfig
@@ -104,7 +114,7 @@ importers:
       '@types/react-dom': ^18.2.0
       eslint-plugin-storybook: ^0.6.12
       file-system-cache: 2.0.0
-      next: 13.4.0
+      next: v13.4.10-canary.8
       react: ^18.2.0
       react-dom: ^18.2.0
       storybook: ^7.0.9
@@ -115,7 +125,7 @@ importers:
       '@mui/lab': 5.0.0-alpha.132_ehvzdjtkyjfyn4ht3egxuqh5f4
       '@p4b/keycloak-theme': link:../../packages/keycloak-theme
       '@p4b/ui': link:../../packages/ui
-      next: 13.4.0_fe3dnxkyax5wguqewcrbc4wcza
+      next: 13.4.10-canary.8_fe3dnxkyax5wguqewcrbc4wcza
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
     devDependencies:
@@ -129,7 +139,7 @@ importers:
       '@storybook/addon-links': 7.0.27_biqbaboplfbrettd7655fr4n2y
       '@storybook/blocks': 7.0.27_biqbaboplfbrettd7655fr4n2y
       '@storybook/manager-api': 7.0.27_biqbaboplfbrettd7655fr4n2y
-      '@storybook/nextjs': 7.0.27_7fohiznbs5afdvhjeuqspqano4
+      '@storybook/nextjs': 7.0.27_y5eixsyqzu4hwfiwcsgqqlgm2u
       '@storybook/node-logger': 7.0.27
       '@storybook/react': 7.0.27_i4rjfizg7pnsmg7p6yi76gfzdq
       '@storybook/testing-library': 0.1.0
@@ -382,7 +392,7 @@ packages:
       '@babel/parser': 7.22.7
       '@babel/template': 7.22.5
       '@babel/traverse': 7.22.8
-      '@babel/types': 7.21.5
+      '@babel/types': 7.22.5
       convert-source-map: 1.9.0
       debug: 4.3.4
       gensync: 1.0.0-beta.2
@@ -2554,7 +2564,7 @@ packages:
       '@babel/plugin-transform-unicode-escapes': 7.22.5_@babel+core@7.21.8
       '@babel/plugin-transform-unicode-regex': 7.22.5_@babel+core@7.21.8
       '@babel/preset-modules': 0.1.5_@babel+core@7.21.8
-      '@babel/types': 7.21.5
+      '@babel/types': 7.22.5
       babel-plugin-polyfill-corejs2: 0.3.3_@babel+core@7.21.8
       babel-plugin-polyfill-corejs3: 0.6.0_@babel+core@7.21.8
       babel-plugin-polyfill-regenerator: 0.4.1_@babel+core@7.21.8
@@ -4402,8 +4412,8 @@ packages:
       tar-fs: 2.1.1
     dev: true
 
-  /@next/env/13.4.0:
-    resolution: {integrity: sha512-LKofmUuxwGXk2OZJSSJ2SlJE62s6z+56aRsze7chc5TPoVouLR9liTiSWxzYuVzuxk0ui2wtIjyR2tcgS1dIyw==}
+  /@next/env/13.4.10-canary.8:
+    resolution: {integrity: sha512-ZlpajpOr34zUyAQ+WMuuidA4MP4cBG/lo8Iw0+ypV/meRBHqkYECAGotjHWVIbddFroJst+WuuanlTNTKV0kbg==}
 
   /@next/eslint-plugin-next/13.4.9:
     resolution: {integrity: sha512-nDtGpa992tNyAkT/KmSMy7QkHfNZmGCBYhHtafU97DubqxzNdvLsqRtliQ4FU04CysRCtvP2hg8rRC1sAKUTUA==}
@@ -4411,72 +4421,72 @@ packages:
       glob: 7.1.7
     dev: false
 
-  /@next/swc-darwin-arm64/13.4.0:
-    resolution: {integrity: sha512-C39AGL3ANXA+P3cFclQjFZaJ4RHPmuBhskmyy0N3VyCntDmRrNkS4aXeNY4Xwure9IL1nuw02D8bM55I+FsbuQ==}
+  /@next/swc-darwin-arm64/13.4.10-canary.8:
+    resolution: {integrity: sha512-IiMj/+oo43uvTRjtNsEvuIrTsQt796ULASGu6SbWwZHTamUfxw68ReXRKHNmvTCdh3RqdcewkAFUIXB1tG443g==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     optional: true
 
-  /@next/swc-darwin-x64/13.4.0:
-    resolution: {integrity: sha512-nj6nx6o7rnBXjo1woZFWLk7OUs7y0SQ0k65SX62kc88GqXtYi3BCqbBznjOX8qtrO//NmtAde/Jd5qkjSgINUQ==}
+  /@next/swc-darwin-x64/13.4.10-canary.8:
+    resolution: {integrity: sha512-7r5Rju4DyPiWFpAvvXea092ejxyAsHpXcR3b318NVZBrY0l8pdpziHxmr511rkF6w+kYdL3pM/heESo7hAIJWw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     optional: true
 
-  /@next/swc-linux-arm64-gnu/13.4.0:
-    resolution: {integrity: sha512-FBYL7kpzI2KG3lv8gO4xVYmWcFohptjzD9RCLdXsAz+Kqz5VCJILF21DoRcz4Nwj/jMe0SO7l5kBVW4POl4EaQ==}
+  /@next/swc-linux-arm64-gnu/13.4.10-canary.8:
+    resolution: {integrity: sha512-F0KywNe3r/bY1LVFP6KDGYWvAMGFc+vdPzN4QG0A07KHoR39sOR51OUjm7scYQfrVebu997ElYzO0RWV7JOU9g==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@next/swc-linux-arm64-musl/13.4.0:
-    resolution: {integrity: sha512-S3htBbcovnLMgVn0z1ThrP1iAeEM43fw8B7S3KyHTAGe0I21ww4rvUkLdgPCqLNvMpv899lmG7NU5rs6rTkGvg==}
+  /@next/swc-linux-arm64-musl/13.4.10-canary.8:
+    resolution: {integrity: sha512-+/IXO6w+ldpMkQcfh6V/Fr+EvqATZn8TA0OozAQs9f6Ozj0pDUew6yaYxKWWV6sECiRDepPy8h7w5KK/tiqmRQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@next/swc-linux-x64-gnu/13.4.0:
-    resolution: {integrity: sha512-H8GhCgQwFl6iWJ6azQ2tG/GY8BUg1nhPtg4Tp2kIPljdyQypTGJe8oRnPDx0N48WWvB2fNeA7LNEwzVuSidH2w==}
+  /@next/swc-linux-x64-gnu/13.4.10-canary.8:
+    resolution: {integrity: sha512-tlF2bA8ptT3YL12dOa+W9j23UlFIWKzOFHc+Sq8H8nIY2F8YzZHMPQtGuQOGg5SgD/eDKyO4gikpEV9hyjwaLg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@next/swc-linux-x64-musl/13.4.0:
-    resolution: {integrity: sha512-mztVybRPY39NfPOA3QrRQKzYuw7A/D8ElR6ruvM1cBsXMEfF5xTzdZqfTtrE/gNTPUFug9FJPpiRpkZ4mDUl8w==}
+  /@next/swc-linux-x64-musl/13.4.10-canary.8:
+    resolution: {integrity: sha512-RENw0LE3SuShLSlDNK3mjcBuCxS5xmdwf073mrQbnmXivIZ9NHLgJv/Nc+75t7jag57MCDh1sPPPOXRiWZ/3LQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     optional: true
 
-  /@next/swc-win32-arm64-msvc/13.4.0:
-    resolution: {integrity: sha512-mdVh/n0QqT2uXqn8kaTywUoLxY1OYqTpiKbt5b51pDwOStqgbIbqBqG0A7XDaiqWa7RKwllOYxPlPm16EDfWUA==}
+  /@next/swc-win32-arm64-msvc/13.4.10-canary.8:
+    resolution: {integrity: sha512-YDDFvTHKElJSwORT7R93/Lhv27umZIgztMQR7jQ1APvtVu1gaBE1pZOl8mq5z1jXtvn7jqlBw7+5zi5hes5M6g==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
     optional: true
 
-  /@next/swc-win32-ia32-msvc/13.4.0:
-    resolution: {integrity: sha512-GNRqT2mqxxH0x9VthFqziBj8X8HsoBUougmLe3kOouRq/jF73LpKXG0Qs2MYkylqvv/Wg31EYjFNcJnBi1Nimg==}
+  /@next/swc-win32-ia32-msvc/13.4.10-canary.8:
+    resolution: {integrity: sha512-rLpKupv7EEwFjcokRVPA1BxyqsOnKBsNGghAgcEO6Ism1OtKTAKLpsVQXG69fz+NIQW8EmbQgUFoEX3Hhes/9Q==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
     optional: true
 
-  /@next/swc-win32-x64-msvc/13.4.0:
-    resolution: {integrity: sha512-0AkvhUBUqeb4WKN75IW1KjPkN3HazQFA0OpMuTK+6ptJUXMaMwDDcF3sIPCI741BJ2fpODB7BPM4C63hXWEypg==}
+  /@next/swc-win32-x64-msvc/13.4.10-canary.8:
+    resolution: {integrity: sha512-6r7nlQ6pexOo0Z5Log5CqoUVlkXd5m1ELce8uG8KI9nj2JysJ+OCQxBXQptZ1GZHNPawSSS+WQDH5eEvrd/bKA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -5659,7 +5669,7 @@ packages:
     resolution: {integrity: sha512-TXJJd5RAKakWx4BtpwvSNdgTDkKM6RkXU8GK34S/LhidQ5Pjz3wcnqb0TxEkfhK/ztbP8nKHqXFwLfa2CYkvQw==}
     dev: true
 
-  /@storybook/nextjs/7.0.27_7fohiznbs5afdvhjeuqspqano4:
+  /@storybook/nextjs/7.0.27_y5eixsyqzu4hwfiwcsgqqlgm2u:
     resolution: {integrity: sha512-WsoIPU+ThCIYxjf5p4vyJ/iVIcua0nOR4GI1AD3r+KclgVdBS+Byx69n86GFMXVAeJqn7dfvdIE2Na9FlAPY/A==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
@@ -5708,7 +5718,7 @@ packages:
       fs-extra: 11.1.1
       image-size: 1.0.2
       loader-utils: 3.2.1
-      next: 13.4.0_fe3dnxkyax5wguqewcrbc4wcza
+      next: 13.4.10-canary.8_fe3dnxkyax5wguqewcrbc4wcza
       node-polyfill-webpack-plugin: 2.0.1_webpack@5.88.1
       pnp-webpack-plugin: 1.7.0_typescript@5.1.6
       postcss: 8.4.25
@@ -10931,7 +10941,6 @@ packages:
 
   /glob-to-regexp/0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
-    dev: true
 
   /glob/10.3.3:
     resolution: {integrity: sha512-92vPiMb/iqpmEgsOoIDvTjc50wf9CCCvMzsi6W0JLPeUKE8TWP1a73PgqSrqy7iAZxaSD1YdzU7QZR5LF51MJw==}
@@ -13662,7 +13671,7 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
 
-  /next-auth/4.22.1_o36i5nnimpwjhlcn4bax4pcnvu:
+  /next-auth/4.22.1_zy3h4xbwjjivwpgydy2qqot4ly:
     resolution: {integrity: sha512-NTR3f6W7/AWXKw8GSsgSyQcDW6jkslZLH8AiZa5PQ09w1kR8uHtR9rez/E9gAq/o17+p0JYHE8QjF3RoniiObA==}
     peerDependencies:
       next: ^12.2.5 || ^13
@@ -13677,7 +13686,7 @@ packages:
       '@panva/hkdf': 1.1.1
       cookie: 0.5.0
       jose: 4.14.4
-      next: 13.4.0_biqbaboplfbrettd7655fr4n2y
+      next: 13.4.10-canary.8_biqbaboplfbrettd7655fr4n2y
       oauth: 0.9.15
       openid-client: 5.4.3
       preact: 10.16.0
@@ -13687,7 +13696,7 @@ packages:
       uuid: 8.3.2
     dev: false
 
-  /next-i18next/13.3.0_pbucompijj23knaua6jkvbsvha:
+  /next-i18next/13.3.0_yx5mqer56li5phymrh3os3enqa:
     resolution: {integrity: sha512-X4kgi51BCOoGdKbv87eZ8OU7ICQDg5IP+T5fNjqDY3os9ea0OKTY4YpAiVFiwcI9XimcUmSPbKO4a9jFUyYSgg==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -13702,7 +13711,7 @@ packages:
       hoist-non-react-statics: 3.3.2
       i18next: 22.5.1
       i18next-fs-backend: 2.1.5
-      next: 13.4.0_biqbaboplfbrettd7655fr4n2y
+      next: 13.4.10-canary.8_biqbaboplfbrettd7655fr4n2y
       react: 18.2.0
       react-i18next: 12.3.1_spyi3zqm3bqfobczid2f6jym6y
     dev: false
@@ -13711,14 +13720,13 @@ packages:
     resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
     dev: false
 
-  /next/13.4.0_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-y3E+2ZjiVrphkz7zcJvd2rEG6miOekI8krPfWV4AZZ9TaF0LDuFdP/f+RQ5M9wRvsz6GWw8k8+7jsO860GxSqg==}
+  /next/13.4.10-canary.8_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-DlNcKii+sD9snodax14lHhkn4zu5ZXYzH8bect66G1jElJN/k2Yp1Dmb2ecTpg2DO4ETb2MHc/RsarLPg8I1rg==}
     engines: {node: '>=16.8.0'}
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
       fibers: '>= 3.1.0'
-      node-sass: ^6.0.0 || ^7.0.0
       react: ^18.2.0
       react-dom: ^18.2.0
       sass: ^1.3.0
@@ -13727,12 +13735,10 @@ packages:
         optional: true
       fibers:
         optional: true
-      node-sass:
-        optional: true
       sass:
         optional: true
     dependencies:
-      '@next/env': 13.4.0
+      '@next/env': 13.4.10-canary.8
       '@swc/helpers': 0.5.1
       busboy: 1.6.0
       caniuse-lite: 1.0.30001515
@@ -13740,30 +13746,30 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       styled-jsx: 5.1.1_react@18.2.0
+      watchpack: 2.4.0
       zod: 3.21.4
     optionalDependencies:
-      '@next/swc-darwin-arm64': 13.4.0
-      '@next/swc-darwin-x64': 13.4.0
-      '@next/swc-linux-arm64-gnu': 13.4.0
-      '@next/swc-linux-arm64-musl': 13.4.0
-      '@next/swc-linux-x64-gnu': 13.4.0
-      '@next/swc-linux-x64-musl': 13.4.0
-      '@next/swc-win32-arm64-msvc': 13.4.0
-      '@next/swc-win32-ia32-msvc': 13.4.0
-      '@next/swc-win32-x64-msvc': 13.4.0
+      '@next/swc-darwin-arm64': 13.4.10-canary.8
+      '@next/swc-darwin-x64': 13.4.10-canary.8
+      '@next/swc-linux-arm64-gnu': 13.4.10-canary.8
+      '@next/swc-linux-arm64-musl': 13.4.10-canary.8
+      '@next/swc-linux-x64-gnu': 13.4.10-canary.8
+      '@next/swc-linux-x64-musl': 13.4.10-canary.8
+      '@next/swc-win32-arm64-msvc': 13.4.10-canary.8
+      '@next/swc-win32-ia32-msvc': 13.4.10-canary.8
+      '@next/swc-win32-x64-msvc': 13.4.10-canary.8
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
     dev: false
 
-  /next/13.4.0_fe3dnxkyax5wguqewcrbc4wcza:
-    resolution: {integrity: sha512-y3E+2ZjiVrphkz7zcJvd2rEG6miOekI8krPfWV4AZZ9TaF0LDuFdP/f+RQ5M9wRvsz6GWw8k8+7jsO860GxSqg==}
+  /next/13.4.10-canary.8_fe3dnxkyax5wguqewcrbc4wcza:
+    resolution: {integrity: sha512-DlNcKii+sD9snodax14lHhkn4zu5ZXYzH8bect66G1jElJN/k2Yp1Dmb2ecTpg2DO4ETb2MHc/RsarLPg8I1rg==}
     engines: {node: '>=16.8.0'}
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
       fibers: '>= 3.1.0'
-      node-sass: ^6.0.0 || ^7.0.0
       react: ^18.2.0
       react-dom: ^18.2.0
       sass: ^1.3.0
@@ -13772,12 +13778,10 @@ packages:
         optional: true
       fibers:
         optional: true
-      node-sass:
-        optional: true
       sass:
         optional: true
     dependencies:
-      '@next/env': 13.4.0
+      '@next/env': 13.4.10-canary.8
       '@swc/helpers': 0.5.1
       busboy: 1.6.0
       caniuse-lite: 1.0.30001515
@@ -13785,17 +13789,18 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       styled-jsx: 5.1.1_54vsopisd4sxme2ltbo2mwp3ci
+      watchpack: 2.4.0
       zod: 3.21.4
     optionalDependencies:
-      '@next/swc-darwin-arm64': 13.4.0
-      '@next/swc-darwin-x64': 13.4.0
-      '@next/swc-linux-arm64-gnu': 13.4.0
-      '@next/swc-linux-arm64-musl': 13.4.0
-      '@next/swc-linux-x64-gnu': 13.4.0
-      '@next/swc-linux-x64-musl': 13.4.0
-      '@next/swc-win32-arm64-msvc': 13.4.0
-      '@next/swc-win32-ia32-msvc': 13.4.0
-      '@next/swc-win32-x64-msvc': 13.4.0
+      '@next/swc-darwin-arm64': 13.4.10-canary.8
+      '@next/swc-darwin-x64': 13.4.10-canary.8
+      '@next/swc-linux-arm64-gnu': 13.4.10-canary.8
+      '@next/swc-linux-arm64-musl': 13.4.10-canary.8
+      '@next/swc-linux-x64-gnu': 13.4.10-canary.8
+      '@next/swc-linux-x64-musl': 13.4.10-canary.8
+      '@next/swc-win32-arm64-msvc': 13.4.10-canary.8
+      '@next/swc-win32-ia32-msvc': 13.4.10-canary.8
+      '@next/swc-win32-x64-msvc': 13.4.10-canary.8
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -17866,6 +17871,23 @@ packages:
       react: 18.2.0
     dev: false
 
+  /tss-react/4.8.7_xo5t6f4ryb2nvjgwj2cxjowrye:
+    resolution: {integrity: sha512-nF/A2U/uW3K3K5fDusmoEawPY0ioupBpeNZf6FLraUtki23OtqlkOyUWpWzKknYyWrXnSZnpujY9pJmgE8zPZA==}
+    peerDependencies:
+      '@emotion/react': ^11.4.1
+      '@emotion/server': ^11.4.0
+      react: ^16.8.0 || ^17.0.2 || ^18.0.0
+    peerDependenciesMeta:
+      '@emotion/server':
+        optional: true
+    dependencies:
+      '@emotion/cache': 11.11.0
+      '@emotion/react': 11.11.1_i73ekzlbntu7jol6ph2fvy4mga
+      '@emotion/serialize': 1.1.2
+      '@emotion/utils': 1.2.1
+      react: 18.2.0
+    dev: false
+
   /tsutils/3.21.0_typescript@5.1.6:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -18384,7 +18406,6 @@ packages:
     dependencies:
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
-    dev: true
 
   /wbuf/1.7.3:
     resolution: {integrity: sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==}