diff --git a/src/components/layout/avatar-loading.tsx b/src/components/layout/avatar-loading.tsx
index 730038d..7a43cb1 100644
--- a/src/components/layout/avatar-loading.tsx
+++ b/src/components/layout/avatar-loading.tsx
@@ -1,27 +1,28 @@
 import { CircularProgress, Stack, Typography } from "@mui/joy";
 import { MockAvatar } from "../../api/mock-avatar";
+import { colors } from "../../utils/colors";
 
 export const AvatarLoading = () => {
   return (
-    <Stack
-      sx={{
-        alignItems: "center",
-        py: 10
-      }}
-    >
-      <Stack sx={{ bgcolor: "#038DEF", alignItems: "center", gap: 4, py: 12, px: 28, borderRadius: 32 }}>
-        <Stack component="section">
-          <Typography sx={{ fontSize: 48, color: "neutral.white" }}>Hang on, superhero.</Typography>
+    <Stack alignItems="center" py={10}>
+      <Stack bgcolor={colors.background.avatarLoading} alignItems="center" px={28} py={12} borderRadius={32} gap={4}>
+        <Stack>
+          <Typography level="h1" textColor="neutral.white">
+            Hang on, superhero.
+          </Typography>
         </Stack>
-        <Stack component="section">
+
+        <Stack>
           <CircularProgress variant="soft" />
         </Stack>
-        <Stack component="section">
-          <Typography sx={{ color: "neutral.white" }}>
+
+        <Stack>
+          <Typography level="body-md" textColor="neutral.white">
             We’re putting the final touches on your Avatar’s powers.
           </Typography>
         </Stack>
-        <Stack component="section">
+
+        <Stack>
           <MockAvatar sx={{ fontSize: 160 }} />
         </Stack>
       </Stack>
diff --git a/src/components/layout/card-top-strengths.tsx b/src/components/layout/card-top-strengths.tsx
index 14c8539..7b8404b 100644
--- a/src/components/layout/card-top-strengths.tsx
+++ b/src/components/layout/card-top-strengths.tsx
@@ -11,6 +11,8 @@ import {
 import { useState } from "react";
 import { mockTopStrengths } from "../../api/mock-data";
 import { PlusSignOutlined } from "../../assets/icons/plus-sign";
+import { addHexTransparency } from "../../utils/add-hex-transparency";
+import { colors } from "../../utils/colors";
 
 const AccordionItem = ({
   number,
@@ -40,43 +42,38 @@ const AccordionItem = ({
           button: {
             sx: {
               width: "100%",
-              bgcolor: "#F1F1F1",
-              py: 0.75,
-              pl: 0.75,
+              bgcolor: "neutral.lightest",
+              py: 0.5,
+              pl: 1,
               pr: 2.5,
               borderRadius: 20
             }
           }
         }}
       >
-        <Stack
-          sx={{
-            flexDirection: "row",
-            alignItems: "center",
-            gap: 2
-          }}
-        >
+        <Stack direction="row" alignItems="center" gap={2}>
           <Box
-            sx={{
-              bgcolor: bgColor,
-              textAlign: "center",
-              width: 40,
-              py: 0.25,
-              borderRadius: 20,
-              boxShadow: "0px 4px 4px 0px #0000001A"
-            }}
+            bgcolor={bgColor}
+            width={36}
+            textAlign="center"
+            py={0.5}
+            borderRadius={20}
+            boxShadow={`0px 4px 4px 0px ${addHexTransparency(colors.neutral.black, "10%")}`}
           >
-            <Typography sx={{ fontSize: 18, color: "neutral.white" }}>{number}</Typography>
+            <Typography level="body-md" textColor="neutral.white">
+              {number}
+            </Typography>
           </Box>
-          <Typography sx={{ fontSize: 18 }}>{label}</Typography>
+          <Typography level="body-md">{label}</Typography>
         </Stack>
       </AccordionSummary>
+
       <AccordionDetails
         slotProps={{
           content: {
             sx: {
+              bgcolor: "neutral.lightest",
               width: "100%",
-              bgcolor: "#F1F1F1",
               py: 2,
               px: 3,
               borderRadius: 20
@@ -84,16 +81,16 @@ const AccordionItem = ({
           }
         }}
       >
-        <Typography sx={{ fontSize: 12 }}>{details}</Typography>
+        <Typography level="body-sm">{details}</Typography>
       </AccordionDetails>
     </Accordion>
   );
 };
 
 const StrengthItem = ({ color, label, percentage }: { color: string; label: string; percentage: number }) => (
-  <Stack sx={{ flexDirection: "row", alignItems: "center", gap: 1 }}>
-    <Box sx={{ bgcolor: color, width: 15, height: 15, borderRadius: "50%" }} />
-    <Typography sx={{ fontSize: 12 }}>
+  <Stack direction="row" alignItems="center" gap={1}>
+    <Box bgcolor={color} height={16} width={16} borderRadius="50%" />
+    <Typography level="body-sm">
       {label} <strong>{percentage}%</strong>
     </Typography>
   </Stack>
@@ -101,28 +98,30 @@ const StrengthItem = ({ color, label, percentage }: { color: string; label: stri
 
 export const CardTopStrengths = () => {
   return (
-    <Stack sx={{ maxWidth: 440, bgcolor: "neutral.white", mb: 2, p: 4, gap: 4, borderRadius: 20 }}>
-      <Typography sx={{ fontSize: 24 }}>Your Top 10 Strengths</Typography>
+    <Stack bgcolor="neutral.white" maxWidth={440} mb={2} p={4} gap={4} borderRadius={20}>
+      <Typography level="h4">Your Top 10 Strengths</Typography>
 
-      <AccordionGroup disableDivider sx={{ gap: 0.75 }}>
-        {mockTopStrengths.map((item, index) => (
-          <AccordionItem
-            key={index}
-            number={item.number}
-            label={item.label}
-            bgColor={item.bgColor}
-            details={item.details}
-          />
-        ))}
+      <AccordionGroup disableDivider>
+        <Stack gap={0.75}>
+          {mockTopStrengths.map((item, index) => (
+            <AccordionItem
+              key={index}
+              number={item.number}
+              label={item.label}
+              bgColor={item.bgColor}
+              details={item.details}
+            />
+          ))}
+        </Stack>
       </AccordionGroup>
 
-      <Stack sx={{ width: "100%", flexDirection: "row", gap: 2.5 }}>
-        <Stack sx={{ width: "50%", gap: 1.5 }}>
+      <Stack width="100%" direction="row" gap={2.5}>
+        <Stack width="50%" gap={1.5}>
           <StrengthItem color="strengths.blue" label="Relationship Building" percentage={39} />
           <StrengthItem color="strengths.purple" label="Executing" percentage={23} />
         </Stack>
 
-        <Stack sx={{ width: "50%", gap: 1.5 }}>
+        <Stack width="50%" gap={1.5}>
           <StrengthItem color="strengths.orange" label="Influencing" percentage={27} />
           <StrengthItem color="strengths.green" label="Strategic Thinking" percentage={11} />
         </Stack>
diff --git a/src/components/navigation/navbar.tsx b/src/components/navigation/navbar.tsx
index f289e89..2c5139c 100644
--- a/src/components/navigation/navbar.tsx
+++ b/src/components/navigation/navbar.tsx
@@ -14,22 +14,20 @@ export const Navbar = ({ hasSubvisualIcon }: NavbarProps) => {
 
   return (
     <Stack
-      sx={{
-        flexDirection: "row",
-        justifyContent: hasSubvisualIcon ? "space-between" : "end",
-        alignItems: "center",
-        py: 2,
-        px: 3
-      }}
+      direction="row"
+      justifyContent={hasSubvisualIcon ? "space-between" : "end"}
+      alignItems="center"
+      px={3}
+      py={2}
     >
       {hasSubvisualIcon && <SubvisualLogo sx={{ fontSize: 48 }} />}
-      <Stack sx={{ flexDirection: "row", alignItems: "center", gap: 2 }}>
+      <Stack direction="row" alignItems="center" gap={2}>
         <IconButton size="sm">
           <NotificationsOutlined sx={{ fontSize: 18 }} />
         </IconButton>
-        <Stack sx={{ flexDirection: "row", alignItems: "center", gap: 1.5 }}>
+        <Stack direction="row" alignItems="center" gap={1.5}>
           <Avatar sx={{ fontSize: 48, border: "2px solid", borderColor: "subvisual.pink" }} />
-          <Stack sx={{ flexDirection: "row", alignItems: "center", gap: 1 }}>
+          <Stack direction="row" alignItems="center" gap={1}>
             <Typography>John</Typography>
             <Dropdown open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
               <MenuButton variant="plain" size="sm">
diff --git a/src/components/shared/containers.tsx b/src/components/shared/containers.tsx
index 8d42126..227d150 100644
--- a/src/components/shared/containers.tsx
+++ b/src/components/shared/containers.tsx
@@ -11,16 +11,16 @@ type LayoutProps = {
 
 export const Layout = ({ children, hasSideBar = false, alignCenter = false }: LayoutProps) => {
   const LayoutChildren = () => (
-    <Stack sx={{ flex: 1 }}>
+    <Stack flex={1}>
       <Navbar hasSubvisualIcon={hasSideBar ? false : true} />
-      <Stack sx={{ ...(alignCenter && { alignItems: "center" }) }}>{children}</Stack>
+      <Stack alignItems={alignCenter ? "center" : "baseline"}>{children}</Stack>
     </Stack>
   );
 
   return (
     <>
       {hasSideBar ? (
-        <Stack sx={{ flexDirection: "row" }}>
+        <Stack direction="row">
           <Sidebar />
           <LayoutChildren />
         </Stack>
diff --git a/src/pages/avatar-create.page.tsx b/src/pages/avatar-create.page.tsx
index e02434e..2b57d72 100644
--- a/src/pages/avatar-create.page.tsx
+++ b/src/pages/avatar-create.page.tsx
@@ -5,42 +5,32 @@ import { ArrowRightOutlined } from "../assets/icons/arrow-right";
 
 export const AvatarCreatePage = () => {
   return (
-    <Stack
-      sx={{
-        alignItems: "center"
-      }}
-    >
-      <Stack
-        component="main"
-        sx={{ minHeight: "100vh", maxWidth: 1136, justifyContent: "space-between", py: 10, gap: 4 }}
-      >
-        <Stack component="section" sx={{ maxWidth: 784, alignItems: "center", gap: 4 }}>
-          <Typography sx={{ fontSize: 48, textAlign: "center" }}>
+    <Stack alignItems="center">
+      <Stack minHeight="100vh" width={1120} justifyContent="space-between" py={10} gap={4}>
+        <Stack maxWidth={720} alignItems="center" alignSelf="center" gap={4}>
+          <Typography level="h1" textAlign="center" textColor="neutral.dark">
             Your Strength-Based Avatar is Almost Ready!
           </Typography>
 
-          <Typography>Now, let's customize the core features to bring your Avatar to life.</Typography>
+          <Typography level="body-md" textColor="neutral.dark">
+            Now, let's customize the core features to bring your Avatar to life.
+          </Typography>
         </Stack>
 
-        <Stack component="section" sx={{ alignItems: "center" }}>
+        <Stack alignItems="center">
           <MockAvatar sx={{ fontSize: 280 }} />
         </Stack>
 
-        <Stack
-          component="section"
-          sx={{ alignItems: "center", height: 128, bgcolor: "neutral.white", borderRadius: 8 }}
-        ></Stack>
+        <Stack bgcolor="neutral.white" height={128} alignItems="center" borderRadius={8}></Stack>
 
-        <Stack component="section" sx={{ alignItems: "end" }}>
+        <Stack alignItems="end">
           <JoyLink
             component={ReactLink}
             to="/avatar-results"
             underline="none"
             endDecorator={<ArrowRightOutlined sx={{ fontSize: 10 }} />}
-            sx={{
-              color: "neutral.black",
-              gap: 0.5
-            }}
+            textColor="neutral.black"
+            gap={0.5}
           >
             Next
           </JoyLink>
diff --git a/src/pages/avatar-results.page.tsx b/src/pages/avatar-results.page.tsx
index 3196bf8..d1dbce3 100644
--- a/src/pages/avatar-results.page.tsx
+++ b/src/pages/avatar-results.page.tsx
@@ -15,28 +15,25 @@ export const AvatarResultsPage = () => {
       {loading ? (
         <AvatarLoading />
       ) : (
-        <Layout>
-          <Stack sx={{ justifyContent: "center", flexDirection: "row", gap: 14 }}>
-            <Stack sx={{ maxWidth: 480 }}>
-              <Stack sx={{ alignItems: " center", gap: 7 }}>
-                <Stack sx={{ alignItems: " center", gap: 3 }}>
-                  <Typography sx={{ fontSize: 48, fontFamily: "Acta-Book" }}>
-                    Your <Typography sx={{ color: "subvisual.primary", fontFamily: "inherit" }}>Strengths</Typography>,
-                    brought to life.
+        <Layout alignCenter>
+          <Stack direction="row" justifyContent="center" gap={14}>
+            <Stack maxWidth={480}>
+              <Stack alignItems="center" gap={7}>
+                <Stack alignItems="center" gap={3}>
+                  <Typography level="h1" fontFamily="Acta-Book">
+                    Your <Typography textColor="subvisual.primary">Strengths</Typography>, brought to life.
                   </Typography>
 
-                  <Typography sx={{ fontSize: 20 }}>
+                  <Typography level="body-lg">
                     Meet your personalized avatar—a reflection of your unique talents and abilities.
                   </Typography>
                 </Stack>
 
-                <Stack sx={{ alignItems: " center", gap: 4 }}>
+                <Stack alignItems="center" gap={4}>
                   <MockAvatar sx={{ fontSize: 280 }} />
-
                   <IconButton>
                     <ArrowRotateOutlined sx={{ fontSize: 16 }} />
                   </IconButton>
-
                   <Button component={Link} to="/personal">
                     Go to dashboard
                   </Button>
diff --git a/src/pages/home.page.tsx b/src/pages/home.page.tsx
deleted file mode 100644
index 228ef30..0000000
--- a/src/pages/home.page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Typography } from "@mui/joy";
-import { Layout } from "../components/shared/containers";
-
-export const HomePage = () => {
-  return (
-    <Layout>
-      <Typography>Hello World</Typography>
-    </Layout>
-  );
-};
diff --git a/src/pages/signup.page.tsx b/src/pages/signup.page.tsx
index bc4e369..e1b8884 100644
--- a/src/pages/signup.page.tsx
+++ b/src/pages/signup.page.tsx
@@ -1,44 +1,38 @@
-import { Button, Input, Link, Stack, Typography } from "@mui/joy";
+import { Box, Button, Input, Link, Stack, Typography } from "@mui/joy";
 
 export const SignupPage = () => {
   return (
     <Stack
+      minHeight="100vh"
+      direction={{ xs: "column", lg: "row" }}
+      alignItems={{ xs: "center", lg: "stretch" }}
       sx={{
         background:
-          "linear-gradient(45deg, var(--joy-palette-subvisual-primaryDark), var(--joy-palette-subvisual-primary), var(--joy-palette-subvisual-primaryDark))",
-        minHeight: "100vh",
-        flexDirection: { xs: "column", lg: "row" },
-        alignItems: { xs: "center", lg: "stretch" }
+          "linear-gradient(45deg, var(--joy-palette-subvisual-primaryDark), var(--joy-palette-subvisual-primary), var(--joy-palette-subvisual-primaryDark))"
       }}
     >
-      <Stack
-        sx={{ width: { xs: "90%", lg: "50%" }, justifyContent: "center", alignItems: { xs: "center", lg: "end" } }}
-      >
-        <Stack sx={{ m: 4, gap: 1 }}>
-          <Typography sx={{ color: "neutral.white", fontSize: 56 }}>Subvisual Strengths</Typography>
-          <Typography sx={{ color: "neutral.white" }}>
+      <Stack width={{ xs: "90%", lg: "50%" }} justifyContent="center" alignItems={{ xs: "center", lg: "end" }}>
+        <Stack m={4} gap={1}>
+          <Typography level="h1" textColor={"neutral.white"} fontSize={56}>
+            Subvisual Strengths
+          </Typography>
+          <Typography level="body-md" textColor="neutral.white">
             Explore your top talents and how they shape your role in the team.
           </Typography>
         </Stack>
       </Stack>
 
-      <Stack sx={{ width: { xs: "90%", lg: "50%" }, alignItems: { xs: "center", lg: "start" } }}>
-        <Stack
-          sx={{
-            bgcolor: "neutral.white",
-            height: "100%",
-            m: 4,
-            p: 8,
-            pt: 40,
-            gap: 16,
-            borderRadius: 8
-          }}
-        >
-          <Stack sx={{ gap: 4 }}>
-            <Stack sx={{ gap: 1 }}>
-              <Typography sx={{ fontSize: 32 }}>Welcome to Subvisual Strengths!</Typography>
+      <Stack width={{ xs: "90%", lg: "50%" }} alignItems={{ xs: "center", lg: "start" }}>
+        <Stack bgcolor="neutral.white" height="100%" m={4} p={8} pt={40} gap={16} borderRadius={8}>
+          <Stack gap={4}>
+            <Stack gap={1}>
+              <Typography level="h3" textColor="neutral.dark" fontFamily="Acta-Book">
+                Welcome to Subvisual Strengths!
+              </Typography>
 
-              <Typography>You are one step away from seeing your strengths coming to life.</Typography>
+              <Typography level="body-md" textColor="neutral.baseLighter">
+                You are one step away from seeing your strengths coming to life.
+              </Typography>
             </Stack>
 
             <Stack gap={1.5}>
@@ -47,24 +41,11 @@ export const SignupPage = () => {
             </Stack>
           </Stack>
 
-          <Typography>
-            By signing up you're agreeing to our <br />
-            <Link
-              component="span"
-              underline="always"
-              sx={{ color: "neutral.black", textDecorationColor: "neutral.black" }}
-            >
-              Terms of service
-            </Link>{" "}
-            &{" "}
-            <Link
-              component="span"
-              underline="always"
-              sx={{ color: "neutral.black", textDecorationColor: "neutral.black" }}
-            >
-              Privacy Policy
-            </Link>
-            .
+          <Typography level="body-md" textColor="neutral.baseLighter">
+            By signing up you're agreeing to our{" "}
+            <Box display={{ xs: "inline", lg: "block" }}>
+              <Link underline="always">Terms of service</Link> & <Link underline="always">Privacy Policy</Link>.
+            </Box>
           </Typography>
         </Stack>
       </Stack>
diff --git a/src/theme.ts b/src/theme.ts
index 817c684..3b82062 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,32 +1,12 @@
 import { extendTheme } from "@mui/joy/styles";
 import { addHexTransparency } from "./utils/add-hex-transparency";
+import { colors } from "./utils/colors";
 
 declare module "@mui/joy/styles" {
   interface Palette {
-    subvisual: {
-      primary: `#${string}`;
-      primaryDark: `#${string}`;
-      purple: `#${string}`;
-      pink: `#${string}`;
-    };
-    strengths: {
-      purple: `#${string}`;
-      green: `#${string}`;
-      orange: `#${string}`;
-      blue: `#${string}`;
-    };
-    neutral: {
-      white: `#${string}`;
-      lightest: `#${string}`;
-      lighter: `#${string}`;
-      light: `#${string}`;
-      baseLighter: `#${string}`;
-      baseDarker: `#${string}`;
-      dark: `#${string}`;
-      darker: `#${string}`;
-      darkest: `#${string}`;
-      black: `#${string}`;
-    };
+    subvisual: typeof colors.subvisual;
+    strengths: typeof colors.strengths;
+    neutral: typeof colors.neutral;
   }
 }
 
@@ -34,41 +14,51 @@ export const theme = extendTheme({
   colorSchemes: {
     light: {
       palette: {
-        subvisual: {
-          primary: "#065BFB",
-          primaryDark: "#2521AB",
-          purple: "#FF7B9B",
-          pink: "#FF7B9B"
-        },
-        strengths: {
-          purple: "#7B2381", // executing
-          green: "#00945C", // strategic thinking
-          orange: "#E97101", // influencing
-          blue: "#0070CD" // relationship building
-        },
-        neutral: {
-          white: "#FFFFFF",
-          lightest: "#EAEAEA",
-          lighter: "#DDDDDF",
-          light: "#B5B6BA",
-          baseLighter: "#8F8F96",
-          baseDarker: "#6A6B73",
-          dark: "#48494F",
-          darker: "#29292D",
-          darkest: "#101113",
-          black: "#000000"
-        }
+        subvisual: colors.subvisual,
+        strengths: colors.strengths,
+        neutral: colors.neutral
       }
     }
   },
   fontFamily: {
-    body: "'Inter', sans-serif"
+    body: "'Inter', sans-serif",
+    display: "'Colfax', sans-serif"
+  },
+  typography: {
+    h1: {
+      fontSize: "48px"
+    },
+    h2: {
+      fontSize: "40px"
+    },
+    h3: {
+      fontSize: "36px"
+    },
+    h4: {
+      fontSize: "24px"
+    },
+    "title-lg": { fontSize: "20px", color: "neutral.black" },
+    "title-md": { fontSize: "16px" },
+    "title-sm": { fontSize: "12px" },
+    "body-lg": { fontSize: "20px" },
+    "body-md": { fontSize: "16px" },
+    "body-sm": { fontSize: "12px", color: "neutral.light" },
+    "body-xs": { fontSize: "10px" }
   },
   components: {
     JoyTypography: {
       styleOverrides: {
         root: () => ({
-          lineHeight: 1
+          lineHeight: 1,
+          fontWeight: 400
+        })
+      }
+    },
+    JoyLink: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          color: theme.palette.neutral.black,
+          textDecorationColor: theme.palette.neutral.black
         })
       }
     },
diff --git a/src/utils/add-hex-transparency.ts b/src/utils/add-hex-transparency.ts
index aa96993..0b50085 100644
--- a/src/utils/add-hex-transparency.ts
+++ b/src/utils/add-hex-transparency.ts
@@ -1,8 +1,8 @@
-export const addHexTransparency = (hex: `#${string}`, percentage: `${number}%`) => {
+export const addHexTransparency = (hex: string, percentage: `${number}%`) => {
   if (!hex.startsWith("#")) hex = `#${hex}`;
   const alphaValue = parseInt(percentage.replace("%", ""), 10);
   const alpha = Math.round((alphaValue / 100) * 255)
     .toString(16)
     .padStart(2, "0");
-  return `${hex}${alpha}`;
+  return `${hex}${alpha}` as string;
 };
diff --git a/src/utils/colors.ts b/src/utils/colors.ts
new file mode 100644
index 0000000..294bc45
--- /dev/null
+++ b/src/utils/colors.ts
@@ -0,0 +1,29 @@
+export const colors = {
+  subvisual: {
+    primary: "#065BFB",
+    primaryDark: "#2521AB",
+    purple: "#FF7B9B",
+    pink: "#FF7B9B"
+  },
+  strengths: {
+    purple: "#7B2381", // executing
+    green: "#00945C", // strategic thinking
+    orange: "#E97101", // influencing
+    blue: "#0070CD" // relationship building
+  },
+  neutral: {
+    white: "#FFFFFF",
+    lightest: "#EAEAEA",
+    lighter: "#DDDDDF",
+    light: "#B5B6BA",
+    baseLighter: "#8F8F96",
+    baseDarker: "#6A6B73",
+    dark: "#48494F",
+    darker: "#29292D",
+    darkest: "#101113",
+    black: "#000000"
+  },
+  background: {
+    avatarLoading: "#038DEF"
+  }
+};