diff --git a/frontend/src/app/(app)/(peopleFlow)/people/add-new/personal-details/page.tsx b/frontend/src/app/(app)/(peopleFlow)/people/add-new/personal-details/page.tsx
index add61605..a894ea09 100644
--- a/frontend/src/app/(app)/(peopleFlow)/people/add-new/personal-details/page.tsx
+++ b/frontend/src/app/(app)/(peopleFlow)/people/add-new/personal-details/page.tsx
@@ -2,6 +2,7 @@
 import { Button } from '@app/components/common/Button';
 import { FormProvider } from '@app/components/common/FormProvider';
 import { Input } from '@app/components/common/Input';
+import { Typography } from '@app/components/common/Typography';
 import { routes } from '@app/constants';
 import { usePeopleStore } from '@app/store/peopleStore';
 import { useEffect, useState } from 'react';
@@ -43,7 +44,9 @@ export default function PersonalDetails() {
 
   return (
     <FormProvider<PersonalDetailsForm> form={form}>
-      <div className="mb-6 text-2xl font-semibold leading-7">Personal details</div>
+      <Typography variant="head-m/semibold" className="mb-6">
+        Personal details
+      </Typography>
       <div className="mb-6 grid w-full grid-cols-2 gap-x-8 gap-y-6 rounded-[20px] border border-navy-200 bg-white p-8">
         <Input
           name={PersonalDetailsFormNames.firstName}
diff --git a/frontend/src/app/(app)/people/my-profile/page.tsx b/frontend/src/app/(app)/(root)/people/my-profile/page.tsx
similarity index 100%
rename from frontend/src/app/(app)/people/my-profile/page.tsx
rename to frontend/src/app/(app)/(root)/people/my-profile/page.tsx
diff --git a/frontend/src/components/modules/SideStepper/SideStepper.tsx b/frontend/src/components/modules/SideStepper/SideStepper.tsx
index d1bfcaea..5f0acbae 100644
--- a/frontend/src/components/modules/SideStepper/SideStepper.tsx
+++ b/frontend/src/components/modules/SideStepper/SideStepper.tsx
@@ -2,6 +2,7 @@ import { CheckMarkIcon } from '@app/static/icons/CheckMarkIcon';
 import { generateClassNames } from '@app/utils';
 import { SideStepperProps, StepStates } from './SideStepper.interface';
 import { Fragment } from 'react';
+import { Typography } from '@app/components/common/Typography';
 
 const Completed = () => {
   return (
@@ -37,11 +38,12 @@ export const SideStepper = <T extends string>({ steps }: SideStepperProps<T>) =>
             <Fragment key={label}>
               <div className="flex items-center gap-x-3">
                 {stepsMap[state]}
-                <div
-                  className={generateClassNames('font-semibold leading-6', current ? 'text-navy-900' : 'text-navy-600')}
+                <Typography
+                  variant="body-m/semibold"
+                  className={generateClassNames(current ? 'text-navy-900' : 'text-navy-600')}
                 >
                   {label}
-                </div>
+                </Typography>
               </div>
               {!last && (
                 <div className="flex w-7 justify-center py-2">