diff --git a/src/components/AppLogo.tsx b/src/components/AppLogo.tsx
index 208bb173..3d736a35 100644
--- a/src/components/AppLogo.tsx
+++ b/src/components/AppLogo.tsx
@@ -1,19 +1,20 @@
 import {StaticAssetPath} from "@/utils/util"
 import {type FC} from "react"
 import {ReactSVG} from "react-svg"
-import Typography, {TypographyVariant} from "./Typography"
+import {Heading} from "./ui/typography"
 
 const AppLogo: FC = () => {
   return (
     <div className="flex w-max flex-col items-center">
       <ReactSVG src={StaticAssetPath.NewAppLogo} className="drop-shadow-sm" />
 
-      <Typography
-        className="font-unbounded font-bold"
-        variant={TypographyVariant.BodyMedium}
+      <Heading
+        level="h6"
+        weight="bold"
+        className="font-unbounded uppercase"
         style={{color: "#D64DF4", textShadow: "#d54df433 0 1px 0"}}>
-        MIRAGE
-      </Typography>
+        Mirage
+      </Heading>
     </div>
   )
 }
diff --git a/src/containers/NavigationSection/NavigationSection.tsx b/src/containers/NavigationSection/NavigationSection.tsx
index 2e7e1eb9..ed96d3da 100644
--- a/src/containers/NavigationSection/NavigationSection.tsx
+++ b/src/containers/NavigationSection/NavigationSection.tsx
@@ -69,14 +69,14 @@ const NavigationSection: FC<{className?: string; onLogOut: () => void}> = ({
             <ReactSVG src={StaticAssetPath.NewAppLogo} />
 
             <Text
-              className="font-unbounded"
+              className="font-unbounded uppercase"
               weight="semibold"
               style={{
                 color: "#D64DF4",
                 fontSize: "0.70rem",
                 lineHeight: "0.75rem",
               }}>
-              MIRAGE
+              Mirage
             </Text>
 
             <div className="mt-2 h-0.5 w-12 rounded-full bg-neutral-300" />