diff --git a/frontend/src/app/components/uikitBlock/UikitBlock.tsx b/frontend/src/app/components/uikitBlock/UikitBlock.tsx
index 865271e..f96474d 100644
--- a/frontend/src/app/components/uikitBlock/UikitBlock.tsx
+++ b/frontend/src/app/components/uikitBlock/UikitBlock.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
-import { Typography } from "@mui/material";
 import { Highlight, themes } from "prism-react-renderer";
 import "./uikit-block.scss";
+import Typography from "@components/typography/Typography";
 
 interface IUikitBlock {
   title: string;
@@ -16,7 +16,7 @@ export default function UikitBlock({
 }: IUikitBlock) {
   return (
     <div className="uikit-block">
-      <Typography variant="h4">{title}</Typography>
+      <Typography.Heading4>{title}</Typography.Heading4>
       {children}
       {codeBlock && (
         <Highlight theme={themes.vsDark} code={codeBlock} language="tsx">
diff --git a/frontend/src/app/components/uikitColor/UikitColor.tsx b/frontend/src/app/components/uikitColor/UikitColor.tsx
index f045998..7162ce1 100644
--- a/frontend/src/app/components/uikitColor/UikitColor.tsx
+++ b/frontend/src/app/components/uikitColor/UikitColor.tsx
@@ -1,5 +1,5 @@
 import { Grid, Palette, PaletteColor, useTheme } from "@mui/material";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 
 interface IUikitColor {
   color: keyof Palette;
@@ -7,7 +7,10 @@ interface IUikitColor {
 
 export default function UikitColor({ color }: IUikitColor) {
   const theme = useTheme();
-  const paletteColor = theme.palette[color] as PaletteColor;
+  const paletteColor = useMemo(
+    () => theme.palette[color] as PaletteColor,
+    [color, theme.palette],
+  );
 
   const colorItem = useCallback((bgColor: string, label: string) => {
     return (
diff --git a/frontend/src/app/pages/uikit/UiKit.tsx b/frontend/src/app/pages/uikit/UiKit.tsx
index e215222..af4b7ba 100644
--- a/frontend/src/app/pages/uikit/UiKit.tsx
+++ b/frontend/src/app/pages/uikit/UiKit.tsx
@@ -1,4 +1,4 @@
-import { Grid, TextField, Typography } from "@mui/material";
+import { Grid, TextField } from "@mui/material";
 import Layout from "@components/layout/Layout";
 import { useTranslation } from "react-i18next";
 import FieldHelperText from "@components/fieldHelperText/FieldHelperText";
@@ -7,21 +7,22 @@ import UikitBlock from "@components/uikitBlock/UikitBlock";
 import { ValidationError } from "yup";
 import Link from "@components/link/Link";
 import Spinner from "@components/spinner/Spinner";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import Button from "@components/button/Button";
 import UikitColor from "@components/uikitColor/UikitColor";
+import Typography from "@components/typography/Typography";
 
 export default function UiKit() {
   const [t] = useTranslation();
   const [showLoading, setShowLoading] = useState(false);
 
-  const onClickShowLoading = () => {
+  const onClickShowLoading = useCallback(() => {
     setShowLoading(true);
 
     setTimeout(() => {
       setShowLoading(false);
     }, 3000);
-  };
+  }, []);
 
   // this is for mocking, yup will format the error correctly for you
   const formErrors: ValidationError[] = [
@@ -57,48 +58,48 @@ export default function UiKit() {
 
   return (
     <Layout.Container className="mb-lg">
-      <Typography variant="h1">UiKit</Typography>
-      <Typography variant="body1">
+      <Typography.Heading1>UiKit</Typography.Heading1>
+      <Typography.Body1>
         This is where you can display all your custom components/containers.
-      </Typography>
-      <Typography variant="body1" className="flex gap-xxs">
+      </Typography.Body1>
+      <Typography.Body1 className="flex gap-xxs">
         For all the Styled MUI components, please refer to
         <Link href="https://mui.com/material-ui/all-components/">
           MUI documentation
         </Link>
-      </Typography>
+      </Typography.Body1>
 
       <div className="flex-column mt-lg gap-md">
         <UikitBlock title="Typographies">
-          <Typography variant="h1">H1. Heading</Typography>
-          <Typography variant="h2">H2. Heading</Typography>
-          <Typography variant="h3">H3. Heading</Typography>
-          <Typography variant="h4">H4. Heading</Typography>
-          <Typography variant="h5">H5. Heading</Typography>
-          <Typography variant="h6">H6. Heading</Typography>
-          <Typography variant="subtitle1">
+          <Typography.Heading1>H1. Heading</Typography.Heading1>
+          <Typography.Heading2>H2. Heading</Typography.Heading2>
+          <Typography.Heading3>H3. Heading</Typography.Heading3>
+          <Typography.Heading4>H4. Heading</Typography.Heading4>
+          <Typography.Heading5>H5. Heading</Typography.Heading5>
+          <Typography.Heading6>H6. Heading</Typography.Heading6>
+          <Typography.Subtitle1>
             subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
             Quos blanditiis tenetur
-          </Typography>
-          <Typography variant="subtitle2">
+          </Typography.Subtitle1>
+          <Typography.Subtitle2>
             subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
             Quos blanditiis tenetur
-          </Typography>
-          <Typography variant="body1">
+          </Typography.Subtitle2>
+          <Typography.Body1>
             body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
             Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore
             consectetur, neque doloribus, cupiditate numquam dignissimos laborum
             fugiat deleniti? Eum quasi quidem quibusdam.
-          </Typography>
-          <Typography variant="body2">
+          </Typography.Body1>
+          <Typography.Body2>
             body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
             Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore
             consectetur, neque doloribus, cupiditate numquam dignissimos laborum
             fugiat deleniti? Eum quasi quidem quibusdam.
-          </Typography>
-          <Typography variant="button">button text</Typography>
-          <Typography variant="caption">caption text</Typography>
-          <Typography variant="overline">overline text</Typography>
+          </Typography.Body2>
+          <Typography.ButtonMedium>button text</Typography.ButtonMedium>
+          <Typography.Caption>caption text</Typography.Caption>
+          <Typography.Overline>overline text</Typography.Overline>
         </UikitBlock>
 
         <UikitBlock title="Colors">
@@ -145,7 +146,7 @@ export default function UiKit() {
         </UikitBlock>
 
         <UikitBlock title="Spinner.tsx" codeBlock="<Spinner />">
-          {/* styling inline like this to prevent the spinner from changing the height of the page while spinning */}
+          {/* styling inline like this to prevent the spinner from changing the height of the page while spinning, do not style inline in projects */}
           <div style={{ height: "64px" }}>
             <Spinner />
           </div>