diff --git a/cypress/e2e/route/Oracle.cy.ts b/cypress/e2e/route/Oracle.cy.ts
index e4a0d3bc..f7953f14 100644
--- a/cypress/e2e/route/Oracle.cy.ts
+++ b/cypress/e2e/route/Oracle.cy.ts
@@ -4,7 +4,7 @@ describe("/oracle", () => {
   describe("Given I want to ask a question to the oracle", () => {
     it("should ask questions to the oracle ", () => {
       Fari.start();
-      Fari.getByText("Consult the Oracle").click();
+      Fari.visit("/oracle");
 
       askOracle();
 
diff --git a/lib/components/Page/NavLink.tsx b/lib/components/Page/NavLink.tsx
index 28a81a3f..a57c3114 100644
--- a/lib/components/Page/NavLink.tsx
+++ b/lib/components/Page/NavLink.tsx
@@ -23,7 +23,6 @@ export function NavLink(props: {
   endIcon?: React.ReactNode;
   children: React.ReactNode;
 }) {
-  const theme = useTheme();
   if (props.to) {
     return (
       <Tooltip title={props.tooltip ?? ""}>
diff --git a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx
index 921b2877..02741ab9 100644
--- a/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx
+++ b/lib/routes/Character/components/CharacterDialog/components/CircleTextField.tsx
@@ -6,12 +6,11 @@ import Fade from "@mui/material/Fade";
 import IconButton from "@mui/material/IconButton";
 import { useTheme } from "@mui/material/styles";
 import TextField from "@mui/material/TextField";
-import React, { useContext, useState } from "react";
+import React, { useState } from "react";
 import { ConditionalWrapper } from "../../../../../components/ConditionalWrapper/ConditionalWrapper";
 import { Delays } from "../../../../../constants/Delays";
 import { IDataCyProps } from "../../../../../domains/cypress/types/IDataCyProps";
 import { useLazyState } from "../../../../../hooks/useLazyState/useLazyState";
-import { MiniThemeContext } from "../MiniThemeContext";
 
 export function CircleTextField(
   props: {
@@ -27,8 +26,6 @@ export function CircleTextField(
     onContextMenu?(event: React.MouseEvent<HTMLElement, MouseEvent>): void;
   } & IDataCyProps
 ) {
-  const miniTheme = useContext(MiniThemeContext);
-
   const theme = useTheme();
   const [hover, setHover] = useState(false);
   const [focus, setFocus] = useState(false);
@@ -100,24 +97,18 @@ export function CircleTextField(
               setValue("");
             } else {
               const parsed = parseInt(e.target.value);
-              if (parsed > 999) {
-                setValue("999");
-              } else {
-                setValue(parsed.toString());
-              }
+              setValue(parsed.toString());
             }
           }}
           InputProps={{
             sx: {
               "cursor": cursor,
-              "width": "3rem",
+              "width": "5rem",
               "height": "3rem",
-              "borderRadius": "50%",
-              "border": `2px solid ${
-                props.borderColor ?? miniTheme.textPrimary
-              }`,
+              "px": "0.5rem",
+              "font-family": "monospace",
               "outline": "none",
-              "background": props.highlight ? miniTheme.textPrimary : "inherit",
+              "background": (theme) => theme.palette.action.hover,
               "&&": {
                 color: "inherit",
               },
@@ -164,7 +155,6 @@ export function CircleTextField(
       {!props.readonly && props.onDecrement && (
         <Fade in={areCounterButtonsVisible}>
           <IconButton
-            size="small"
             data-cy={`${props.dataCy}.decrement`}
             sx={{
               "position": "absolute",
@@ -177,7 +167,7 @@ export function CircleTextField(
             onClick={props.onDecrement}
           >
             <RemoveCircleOutlineOutlinedIcon
-              sx={{ width: "1.1rem", height: "1.1rem" }}
+              sx={{ width: "1.5rem", height: "1.5rem" }}
             />
           </IconButton>
         </Fade>
@@ -185,7 +175,6 @@ export function CircleTextField(
       {!props.readonly && props.onIncrement && (
         <Fade in={areCounterButtonsVisible}>
           <IconButton
-            size="small"
             data-cy={`${props.dataCy}.increment`}
             sx={{
               "position": "absolute",
@@ -198,7 +187,7 @@ export function CircleTextField(
             onClick={props.onIncrement}
           >
             <AddCircleOutlineOutlinedIcon
-              sx={{ width: "1.1rem", height: "1.1rem" }}
+              sx={{ width: "1.5rem", height: "1.5rem" }}
             />
           </IconButton>
         </Fade>
diff --git a/lib/routes/Home/HomeRoute.tsx b/lib/routes/Home/HomeRoute.tsx
index afcd68b4..0a7a5a86 100644
--- a/lib/routes/Home/HomeRoute.tsx
+++ b/lib/routes/Home/HomeRoute.tsx
@@ -1,41 +1,21 @@
-import GitHubIcon from "@mui/icons-material/GitHub";
 import { Link } from "@mui/material";
 import Box, { BoxProps } from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Container, { ContainerProps } from "@mui/material/Container";
-import Divider from "@mui/material/Divider";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import { ThemeProvider, useTheme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import React, { useContext, useEffect } from "react";
+import React, { useEffect } from "react";
 import { useNavigate } from "react-router";
-import discord from "../../../images/services/discord.png";
 import lokalise from "../../../images/services/lokalise.png";
-import { AppButtonLink } from "../../components/AppLink/AppLink";
 import { ConditionalWrapper } from "../../components/ConditionalWrapper/ConditionalWrapper";
-import { FateLabel } from "../../components/FateLabel/FateLabel";
-import { Kofi } from "../../components/Kofi/Kofi";
 import { FariToolbarMaxWidth, Page } from "../../components/Page/Page";
 import { PageMeta } from "../../components/PageMeta/PageMeta";
-import { Patreon } from "../../components/Patreon/Patreon";
 import { useLogger } from "../../contexts/InjectionsContext/hooks/useLogger";
-import { MyBinderContext } from "../../contexts/MyBinderContext/MyBinderContext";
 import { useHighlight } from "../../hooks/useHighlight/useHighlight";
 import { useLightBackground } from "../../hooks/useLightBackground/useLightBackground";
 import { useTranslate } from "../../hooks/useTranslate/useTranslate";
 
-const Patrons = [
-  "James Micu",
-  "Randy Oest",
-  "Ryan Singer",
-  "Aeife O'Brien",
-  "David Haslem",
-  "Fluffydumplin",
-  "Lynn Jones",
-  "Krister Svanlund",
-];
-
 const Sponsors: Array<{ image: string; name: string; link: string }> = [
   {
     name: "Netlify",
@@ -71,7 +51,7 @@ export const HomeRoute: React.FC<{}> = () => {
   const logger = useLogger();
   const lightBackground = useLightBackground();
   const theme = useTheme();
-  const myBinderManager = useContext(MyBinderContext);
+  // const myBinderManager = useContext(MyBinderContext);
 
   useEffect(() => {
     logger.track("view_home");
@@ -176,68 +156,68 @@ export const HomeRoute: React.FC<{}> = () => {
     </Page>
   );
 
-  function renderSupport() {
-    return (
-      <Box>
-        <Box mb="2rem">
-          <Typography
-            variant="subtitle1"
-            align="center"
-            sx={{ whiteSpace: "pre-line" }}
-          >
-            {t("home-route.support-fari.description")}
-          </Typography>
-        </Box>
-        <Box mb="1rem">
-          <Grid
-            container
-            justifyContent="center"
-            spacing={2}
-            alignItems="center"
-          >
-            <Grid item>
-              <Kofi />
-            </Grid>
-            <Grid item>
-              <Patreon />
-            </Grid>
-          </Grid>
-        </Box>
-      </Box>
-    );
-  }
+  // function renderSupport() {
+  //   return (
+  //     <Box>
+  //       <Box mb="2rem">
+  //         <Typography
+  //           variant="subtitle1"
+  //           align="center"
+  //           sx={{ whiteSpace: "pre-line" }}
+  //         >
+  //           {t("home-route.support-fari.description")}
+  //         </Typography>
+  //       </Box>
+  //       <Box mb="1rem">
+  //         <Grid
+  //           container
+  //           justifyContent="center"
+  //           spacing={2}
+  //           alignItems="center"
+  //         >
+  //           <Grid item>
+  //             <Kofi />
+  //           </Grid>
+  //           <Grid item>
+  //             <Patreon />
+  //           </Grid>
+  //         </Grid>
+  //       </Box>
+  //     </Box>
+  //   );
+  // }
 
-  function renderPatrons() {
-    return (
-      <Box textAlign="center">
-        <Box mb="2rem">
-          <Grid container spacing={1} justifyContent="center">
-            {Patrons.map((patron, i) => {
-              const isLast = i === Patrons.length - 1;
+  // function renderPatrons() {
+  //   return (
+  //     <Box textAlign="center">
+  //       <Box mb="2rem">
+  //         <Grid container spacing={1} justifyContent="center">
+  //           {Patrons.map((patron, i) => {
+  //             const isLast = i === Patrons.length - 1;
 
-              return (
-                <React.Fragment key={i}>
-                  <Grid item>
-                    <FateLabel>{patron}</FateLabel>
-                  </Grid>
-                  {!isLast && (
-                    <Grid item>
-                      <FateLabel>{"•"}</FateLabel>
-                    </Grid>
-                  )}
-                </React.Fragment>
-              );
-            })}
-          </Grid>
-        </Box>
-        <Box mb="2rem">
-          <Grid container item justifyContent="center">
-            <Patreon />
-          </Grid>
-        </Box>
-      </Box>
-    );
-  }
+  //             return (
+  //               <React.Fragment key={i}>
+  //                 <Grid item>
+  //                   <FateLabel>{patron}</FateLabel>
+  //                 </Grid>
+  //                 {!isLast && (
+  //                   <Grid item>
+  //                     <FateLabel>{"•"}</FateLabel>
+  //                   </Grid>
+  //                 )}
+  //               </React.Fragment>
+  //             );
+  //           })}
+  //         </Grid>
+  //       </Box>
+  //       <Box mb="2rem">
+  //         <Grid container item justifyContent="center">
+  //           <Patreon />
+  //         </Grid>
+  //       </Box>
+  //     </Box>
+  //   );
+  // }
 
   function renderSponsors() {
     return (
@@ -273,230 +253,231 @@ export const HomeRoute: React.FC<{}> = () => {
     );
   }
 
-  function renderFirstActionCards() {
-    const cards: Array<IHomeRouteCard> = [
-      {
-        label: t("home-route.cards.scenes.title"),
-        description: t("home-route.cards.scenes.description"),
-        ctaLabel: t("home-route.cards.scenes.cta"),
-        icon: (props: { className: string }) => (
-          // https://icons8.com/icons/plasticine
-          <img
-            className={props.className}
-            src="https://img.icons8.com/plasticine/100/000000/alps.png"
-          />
-        ),
-        onClick: () => {
-          myBinderManager.actions.open({ folder: "scenes" });
-        },
-      },
-      {
-        label: t("home-route.cards.characters.title"),
-        description: t("home-route.cards.characters.description"),
-        icon: (props: { className: string }) => (
-          // https://icons8.com/icons/plasticine
-          <img
-            className={props.className}
-            src="https://img.icons8.com/plasticine/100/000000/wizard.png"
-          />
-        ),
-        ctaLabel: t("home-route.cards.characters.cta"),
-        onClick: () => {
-          myBinderManager.actions.open({ folder: "characters" });
-        },
-      },
-      {
-        label: t("home-route.cards.dice-roller.title"),
-        description: t("home-route.cards.dice-roller.description"),
-        ctaLabel: t("home-route.cards.dice-roller.cta"),
-        icon: (props: { className: string }) => (
-          // https://icons8.com/icons/plasticine
-          <img
-            className={props.className}
-            src="https://img.icons8.com/plasticine/100/000000/dice.png"
-          />
-        ),
-        to: "/dice",
-      },
-    ];
-    return (
-      <Box>
-        <HomeRouteCards cards={cards} />
-      </Box>
-    );
-  }
-  function renderSecondActionCards() {
-    const cards: Array<IHomeRouteCard> = [
-      {
-        label: t("home-route.cards.data.title"),
-        description: t("home-route.cards.data.description"),
-        ctaLabel: t("home-route.cards.data.cta"),
-        icon: (props: { className: string }) => (
-          // https://icons8.com/icons/plasticine
-          <img
-            className={props.className}
-            src="https://img.icons8.com/plasticine/100/000000/cloud-backup-restore.png"
-          />
-        ),
-        to: "/data",
-      },
+  // function renderFirstActionCards() {
+  //   const cards: Array<IHomeRouteCard> = [
+  //     {
+  //       label: t("home-route.cards.scenes.title"),
+  //       description: t("home-route.cards.scenes.description"),
+  //       ctaLabel: t("home-route.cards.scenes.cta"),
+  //       icon: (props: { className: string }) => (
+  //         // https://icons8.com/icons/plasticine
+  //         <img
+  //           className={props.className}
+  //           src="https://img.icons8.com/plasticine/100/000000/alps.png"
+  //         />
+  //       ),
+  //       onClick: () => {
+  //         myBinderManager.actions.open({ folder: "scenes" });
+  //       },
+  //     },
+  //     {
+  //       label: t("home-route.cards.characters.title"),
+  //       description: t("home-route.cards.characters.description"),
+  //       icon: (props: { className: string }) => (
+  //         // https://icons8.com/icons/plasticine
+  //         <img
+  //           className={props.className}
+  //           src="https://img.icons8.com/plasticine/100/000000/wizard.png"
+  //         />
+  //       ),
+  //       ctaLabel: t("home-route.cards.characters.cta"),
+  //       onClick: () => {
+  //         myBinderManager.actions.open({ folder: "characters" });
+  //       },
+  //     },
+  //     {
+  //       label: t("home-route.cards.dice-roller.title"),
+  //       description: t("home-route.cards.dice-roller.description"),
+  //       ctaLabel: t("home-route.cards.dice-roller.cta"),
+  //       icon: (props: { className: string }) => (
+  //         // https://icons8.com/icons/plasticine
+  //         <img
+  //           className={props.className}
+  //           src="https://img.icons8.com/plasticine/100/000000/dice.png"
+  //         />
+  //       ),
+  //       to: "/dice",
+  //     },
+  //   ];
+  //   return (
+  //     <Box>
+  //       <HomeRouteCards cards={cards} />
+  //     </Box>
+  //   );
+  // }
 
-      {
-        label: t("home-route.cards.play-solo.title"),
-        description: t("home-route.cards.play-solo.description"),
-        ctaLabel: t("home-route.cards.play-solo.cta"),
+  // function renderSecondActionCards() {
+  //   const cards: Array<IHomeRouteCard> = [
+  //     {
+  //       label: t("home-route.cards.data.title"),
+  //       description: t("home-route.cards.data.description"),
+  //       ctaLabel: t("home-route.cards.data.cta"),
+  //       icon: (props: { className: string }) => (
+  //         // https://icons8.com/icons/plasticine
+  //         <img
+  //           className={props.className}
+  //           src="https://img.icons8.com/plasticine/100/000000/cloud-backup-restore.png"
+  //         />
+  //       ),
+  //       to: "/data",
+  //     },
 
-        icon: (props: { className: string }) => (
-          // https://icons8.com/icons/plasticine
-          <img
-            className={props.className}
-            src="https://img.icons8.com/plasticine/100/000000/crystal-ball.png"
-          />
-        ),
-        to: "/oracle",
-      },
-    ];
-    return (
-      <Box>
-        <HomeRouteCards cards={cards} />
-      </Box>
-    );
-  }
+  //     {
+  //       label: t("home-route.cards.play-solo.title"),
+  //       description: t("home-route.cards.play-solo.description"),
+  //       ctaLabel: t("home-route.cards.play-solo.cta"),
 
-  function renderThirdActionCards() {
-    const cards: Array<IHomeRouteCard> = [
-      {
-        label: t("home-route.cards.changelog.title"),
-        description: t("home-route.cards.changelog.description"),
-        ctaLabel: t("home-route.cards.changelog.cta"),
-        icon: (props: { className: string }) => (
-          // https://icons8.com/icons/plasticine
-          <img
-            className={props.className}
-            src="https://img.icons8.com/plasticine/100/000000/comments.png"
-          />
-        ),
-        to: "https://fari.canny.io/changelog",
-      },
-      {
-        label: t("home-route.cards.wiki.title"),
-        description: t("home-route.cards.wiki.description"),
-        ctaLabel: t("home-route.cards.wiki.cta"),
-        icon: (props: { className: string }) => (
-          // https://icons8.com/icons/plasticine
-          <img
-            className={props.className}
-            src="https://img.icons8.com/plasticine/100/000000/contract.png"
-          />
-        ),
-        to: "https://fari.games/en/resources/fari-rpgs/fari-app-wiki",
-      },
-      {
-        label: t("home-route.cards.fari-games.title"),
-        description: t("home-route.cards.fari-games.description"),
-        ctaLabel: t("home-route.cards.fari-games.cta"),
-        icon: (props: { className: string }) => (
-          // https://icons8.com/icons/plasticine
-          <img
-            className={props.className}
-            src="https://img.icons8.com/plasticine/100/000000/bookmark--v1.png"
-          />
-        ),
-        to: "https://fari.games",
-      },
-    ];
-    return (
-      <Box>
-        <HomeRouteCards cards={cards} />
-      </Box>
-    );
-  }
+  //       icon: (props: { className: string }) => (
+  //         // https://icons8.com/icons/plasticine
+  //         <img
+  //           className={props.className}
+  //           src="https://img.icons8.com/plasticine/100/000000/crystal-ball.png"
+  //         />
+  //       ),
+  //       to: "/oracle",
+  //     },
+  //   ];
+  //   return (
+  //     <Box>
+  //       <HomeRouteCards cards={cards} />
+  //     </Box>
+  //   );
+  // }
 
-  function renderCommunity() {
-    return (
-      <Grid container justifyContent="center" alignItems="baseline" spacing={2}>
-        {/* <Grid item md={6} xs={12} container justifyContent="center" spacing={2}>
-          <Grid item xs={12}>
-            <QuestionAnswerIcon
-              sx={{
-                width: "50px",
-                height: "auto",
-              }}
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <Button
-              color="primary"
-              variant="outlined"
-              size="large"
-              component={RouterLink}
-              to={"/feature-requests"}
-            >
-              {t("home-route.sections.request-a-feature.cta")}
-            </Button>
-          </Grid>
-        </Grid> */}
-        <Grid item md={6} xs={12} container justifyContent="center" spacing={2}>
-          <Grid item xs={12}>
-            <Box
-              component="img"
-              src={discord}
-              sx={{
-                width: "50px",
-                height: "auto",
-              }}
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <Button
-              color="primary"
-              variant="outlined"
-              size="large"
-              component="a"
-              href="https://farirpgs.com/discord"
-              target="_blank"
-              rel="noreferrer"
-            >
-              {t("home-route.sections.join-community.cta")}
-            </Button>
-          </Grid>
-        </Grid>
-      </Grid>
-    );
-  }
+  // function renderThirdActionCards() {
+  //   const cards: Array<IHomeRouteCard> = [
+  //     {
+  //       label: t("home-route.cards.changelog.title"),
+  //       description: t("home-route.cards.changelog.description"),
+  //       ctaLabel: t("home-route.cards.changelog.cta"),
+  //       icon: (props: { className: string }) => (
+  //         // https://icons8.com/icons/plasticine
+  //         <img
+  //           className={props.className}
+  //           src="https://img.icons8.com/plasticine/100/000000/comments.png"
+  //         />
+  //       ),
+  //       to: "https://fari.canny.io/changelog",
+  //     },
+  //     {
+  //       label: t("home-route.cards.wiki.title"),
+  //       description: t("home-route.cards.wiki.description"),
+  //       ctaLabel: t("home-route.cards.wiki.cta"),
+  //       icon: (props: { className: string }) => (
+  //         // https://icons8.com/icons/plasticine
+  //         <img
+  //           className={props.className}
+  //           src="https://img.icons8.com/plasticine/100/000000/contract.png"
+  //         />
+  //       ),
+  //       to: "https://fari.games/en/resources/fari-rpgs/fari-app-wiki",
+  //     },
+  //     {
+  //       label: t("home-route.cards.fari-games.title"),
+  //       description: t("home-route.cards.fari-games.description"),
+  //       ctaLabel: t("home-route.cards.fari-games.cta"),
+  //       icon: (props: { className: string }) => (
+  //         // https://icons8.com/icons/plasticine
+  //         <img
+  //           className={props.className}
+  //           src="https://img.icons8.com/plasticine/100/000000/bookmark--v1.png"
+  //         />
+  //       ),
+  //       to: "https://fari.games",
+  //     },
+  //   ];
+  //   return (
+  //     <Box>
+  //       <HomeRouteCards cards={cards} />
+  //     </Box>
+  //   );
+  // }
 
-  function renderOpenSource() {
-    return (
-      <Grid container justifyContent="center" spacing={2}>
-        <Grid item xs={12}>
-          <Typography>
-            {t("home-route.sections.open-source.description")}
-          </Typography>
-        </Grid>
-        <Grid item xs={12}>
-          <a
-            href="https://github.com/fariapp/fari"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <GitHubIcon sx={{ width: "5rem", height: "5rem" }} />
-          </a>
-        </Grid>
-        <Grid item xs={12}>
-          <Button
-            color="primary"
-            variant="outlined"
-            component="a"
-            href="https://github.com/fariapp/fari"
-            target="_blank"
-            rel="noreferrer"
-          >
-            {t("home-route.sections.open-source.cta")}
-          </Button>
-        </Grid>
-      </Grid>
-    );
-  }
+  // function renderCommunity() {
+  //   return (
+  //     <Grid container justifyContent="center" alignItems="baseline" spacing={2}>
+  //       {/* <Grid item md={6} xs={12} container justifyContent="center" spacing={2}>
+  //         <Grid item xs={12}>
+  //           <QuestionAnswerIcon
+  //             sx={{
+  //               width: "50px",
+  //               height: "auto",
+  //             }}
+  //           />
+  //         </Grid>
+  //         <Grid item xs={12}>
+  //           <Button
+  //             color="primary"
+  //             variant="outlined"
+  //             size="large"
+  //             component={RouterLink}
+  //             to={"/feature-requests"}
+  //           >
+  //             {t("home-route.sections.request-a-feature.cta")}
+  //           </Button>
+  //         </Grid>
+  //       </Grid> */}
+  //       <Grid item md={6} xs={12} container justifyContent="center" spacing={2}>
+  //         <Grid item xs={12}>
+  //           <Box
+  //             component="img"
+  //             src={discord}
+  //             sx={{
+  //               width: "50px",
+  //               height: "auto",
+  //             }}
+  //           />
+  //         </Grid>
+  //         <Grid item xs={12}>
+  //           <Button
+  //             color="primary"
+  //             variant="outlined"
+  //             size="large"
+  //             component="a"
+  //             href="https://farirpgs.com/discord"
+  //             target="_blank"
+  //             rel="noreferrer"
+  //           >
+  //             {t("home-route.sections.join-community.cta")}
+  //           </Button>
+  //         </Grid>
+  //       </Grid>
+  //     </Grid>
+  //   );
+  // }
+
+  // function renderOpenSource() {
+  //   return (
+  //     <Grid container justifyContent="center" spacing={2}>
+  //       <Grid item xs={12}>
+  //         <Typography>
+  //           {t("home-route.sections.open-source.description")}
+  //         </Typography>
+  //       </Grid>
+  //       <Grid item xs={12}>
+  //         <a
+  //           href="https://github.com/fariapp/fari"
+  //           target="_blank"
+  //           rel="noreferrer"
+  //         >
+  //           <GitHubIcon sx={{ width: "5rem", height: "5rem" }} />
+  //         </a>
+  //       </Grid>
+  //       <Grid item xs={12}>
+  //         <Button
+  //           color="primary"
+  //           variant="outlined"
+  //           component="a"
+  //           href="https://github.com/fariapp/fari"
+  //           target="_blank"
+  //           rel="noreferrer"
+  //         >
+  //           {t("home-route.sections.open-source.cta")}
+  //         </Button>
+  //       </Grid>
+  //     </Grid>
+  //   );
+  // }
 
   function renderHeading() {
     return (
@@ -759,92 +740,92 @@ function DarkBox(props: ILightBoxProps & { linear?: boolean }) {
   );
 }
 
-function HomeRouteCards(props: { cards: Array<IHomeRouteCard> }) {
-  const theme = useTheme();
-  const lightBackground = useLightBackground();
-  const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+// function HomeRouteCards(props: { cards: Array<IHomeRouteCard> }) {
+//   const theme = useTheme();
+//   const lightBackground = useLightBackground();
+//   const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 
-  return (
-    <>
-      <Grid container justifyContent="center" spacing={3}>
-        {props.cards.map((card, index) => {
-          return (
-            <Grid key={index} item xs={12} sm={6} md={4}>
-              <Box
-                sx={{
-                  "label": "HomeRouteCards-card",
-                  "padding": "2.5rem",
-                  "height": "100%",
-                  "borderRadius": "4px",
-                  "background": lightBackground,
-                  "border": `1px solid ${theme.palette.divider}`,
-                  "width": "100%",
-                  "transition": theme.transitions.create([
-                    "transform",
-                    "box-shadow",
-                  ]),
-                  "&:hover": {
-                    transform: isSmall ? undefined : "scale(1.005)",
-                    boxShadow: isSmall ? undefined : theme.shadows[1],
-                  },
-                }}
-              >
-                <Box display="flex" justifyContent="center" mb="1rem">
-                  <card.icon
-                    sx={{
-                      width: "4rem",
-                      height: "4rem",
-                    }}
-                  />
-                </Box>
-                <Box mb="1rem">
-                  <FateLabel
-                    variant="h5"
-                    align="center"
-                    color="textPrimary"
-                    uppercase={false}
-                  >
-                    {card.label}
-                  </FateLabel>
-                </Box>
-                <Box>
-                  <Typography sx={{ textAlign: "center" }}>
-                    {card.description}
-                  </Typography>
-                </Box>
-                <Box my="2rem">
-                  <Divider light />
-                </Box>
-                <Box display="flex" justifyContent="center">
-                  {card.onClick && (
-                    <Button
-                      color="secondary"
-                      variant="outlined"
-                      onClick={(e) => {
-                        e.preventDefault;
-                        card.onClick?.();
-                      }}
-                    >
-                      {card.ctaLabel}
-                    </Button>
-                  )}
-                  {card.to && (
-                    <Button
-                      color="secondary"
-                      variant="outlined"
-                      size="large"
-                      component={AppButtonLink}
-                      to={card.to}
-                    >
-                      {card.ctaLabel}
-                    </Button>
-                  )}
-                </Box>
-              </Box>
-            </Grid>
-          );
-        })}
-      </Grid>
-    </>
-  );
-}
+//   return (
+//     <>
+//       <Grid container justifyContent="center" spacing={3}>
+//         {props.cards.map((card, index) => {
+//           return (
+//             <Grid key={index} item xs={12} sm={6} md={4}>
+//               <Box
+//                 sx={{
+//                   "label": "HomeRouteCards-card",
+//                   "padding": "2.5rem",
+//                   "height": "100%",
+//                   "borderRadius": "4px",
+//                   "background": lightBackground,
+//                   "border": `1px solid ${theme.palette.divider}`,
+//                   "width": "100%",
+//                   "transition": theme.transitions.create([
+//                     "transform",
+//                     "box-shadow",
+//                   ]),
+//                   "&:hover": {
+//                     transform: isSmall ? undefined : "scale(1.005)",
+//                     boxShadow: isSmall ? undefined : theme.shadows[1],
+//                   },
+//                 }}
+//               >
+//                 <Box display="flex" justifyContent="center" mb="1rem">
+//                   <card.icon
+//                     sx={{
+//                       width: "4rem",
+//                       height: "4rem",
+//                     }}
+//                   />
+//                 </Box>
+//                 <Box mb="1rem">
+//                   <FateLabel
+//                     variant="h5"
+//                     align="center"
+//                     color="textPrimary"
+//                     uppercase={false}
+//                   >
+//                     {card.label}
+//                   </FateLabel>
+//                 </Box>
+//                 <Box>
+//                   <Typography sx={{ textAlign: "center" }}>
+//                     {card.description}
+//                   </Typography>
+//                 </Box>
+//                 <Box my="2rem">
+//                   <Divider light />
+//                 </Box>
+//                 <Box display="flex" justifyContent="center">
+//                   {card.onClick && (
+//                     <Button
+//                       color="secondary"
+//                       variant="outlined"
+//                       onClick={(e) => {
+//                         e.preventDefault;
+//                         card.onClick?.();
+//                       }}
+//                     >
+//                       {card.ctaLabel}
+//                     </Button>
+//                   )}
+//                   {card.to && (
+//                     <Button
+//                       color="secondary"
+//                       variant="outlined"
+//                       size="large"
+//                       component={AppButtonLink}
+//                       to={card.to}
+//                     >
+//                       {card.ctaLabel}
+//                     </Button>
+//                   )}
+//                 </Box>
+//               </Box>
+//             </Grid>
+//           );
+//         })}
+//       </Grid>
+//     </>
+//   );
+// }