diff --git a/frontend/src/components/common/Card/Card.tsx b/frontend/src/components/common/Card/Card.tsx
index 263f31fb..4fed78ea 100644
--- a/frontend/src/components/common/Card/Card.tsx
+++ b/frontend/src/components/common/Card/Card.tsx
@@ -1,12 +1,14 @@
 import { CardProps } from './Card.interface';
 import { PropsWithChildren } from 'react';
-import {Typography} from "@app/components/common/Typography";
+import { Typography } from '@app/components/common/Typography';
 
 export const Card: React.FC<PropsWithChildren<CardProps>> = ({ title, children }) => {
   return (
     <div className="rounded-xl bg-white shadow-sm ring-1 ring-navy-200/5 lg:w-[750px]">
       <div className="px-4 py-6 sm:p-8">
-        <Typography as="h3" variant="head-s/semibold">{title}</Typography>
+        <Typography as="h3" variant="head-s/semibold">
+          {title}
+        </Typography>
         <div className="py-8">{children}</div>
       </div>
     </div>
diff --git a/frontend/src/components/modules/ProfileSetting/ProfileSettings.tsx b/frontend/src/components/modules/ProfileSetting/ProfileSettings.tsx
index 42200d4d..1a5b659e 100644
--- a/frontend/src/components/modules/ProfileSetting/ProfileSettings.tsx
+++ b/frontend/src/components/modules/ProfileSetting/ProfileSettings.tsx
@@ -10,7 +10,7 @@ import { useProfileSettings } from '@app/components/modules/ProfileSetting/Profi
 import { CropImageModal } from './modules/CropImageModal';
 import { ReactNode } from 'react';
 import { DeleteImageModal } from './modules/DeleteImageModal';
-import {Typography} from "@app/components/common/Typography";
+import { Typography } from '@app/components/common/Typography';
 
 export const ProfileSettings: React.FC<ProfileSettingsProps> = ({ data }) => {
   const { firstName, lastName, email, ladders, photo } = data;
@@ -54,7 +54,9 @@ export const ProfileSettings: React.FC<ProfileSettingsProps> = ({ data }) => {
       <Card title="Personal details">
         <div className="flex w-full flex-row border-b border-navy-200 px-4 py-6 sm:col-span-2 sm:px-0">
           <div className="grow">
-            <Typography variant="body-m/medium" className="mb-2">Profile photo</Typography>
+            <Typography variant="body-m/medium" className="mb-2">
+              Profile photo
+            </Typography>
             <Avatar firstName={firstName} lastName={lastName} imageUrl={photo} variant="72" />
           </div>
           <div className="flex flex-row gap-4">
diff --git a/frontend/src/components/modules/ProfileSetting/modules/CropImageModal/CropImageModal.tsx b/frontend/src/components/modules/ProfileSetting/modules/CropImageModal/CropImageModal.tsx
index 2ef29630..92be8b68 100644
--- a/frontend/src/components/modules/ProfileSetting/modules/CropImageModal/CropImageModal.tsx
+++ b/frontend/src/components/modules/ProfileSetting/modules/CropImageModal/CropImageModal.tsx
@@ -6,7 +6,7 @@ import { CropImageModalProps } from './CropImageModal.interface';
 import { useCropImageModal } from './CropImageModal.hooks';
 import { Button } from '@app/components/common/Button';
 import { ZOOM_SLIDER_MULTIPLIER } from './constants';
-import {Typography} from "@app/components/common/Typography";
+import { Typography } from '@app/components/common/Typography';
 
 export const CropImageModal: React.FC<CropImageModalProps> = ({ imageSrc, open, onClose, onSave }) => {
   const { crop, zoom, handleCropChange, handleZoomChange, handleCropComplete, handleZoomInputChange, handleSave } =
diff --git a/frontend/src/components/modules/ProfileSetting/modules/DeleteImageModal/DeleteImageModal.tsx b/frontend/src/components/modules/ProfileSetting/modules/DeleteImageModal/DeleteImageModal.tsx
index ab6a97cf..aef6c87f 100644
--- a/frontend/src/components/modules/ProfileSetting/modules/DeleteImageModal/DeleteImageModal.tsx
+++ b/frontend/src/components/modules/ProfileSetting/modules/DeleteImageModal/DeleteImageModal.tsx
@@ -1,7 +1,7 @@
 import { Modal } from '@app/components/common/Modal';
 import { Button } from '@app/components/common/Button';
 import { DeleteImageModalProps } from './DeleteImageModal.interface';
-import {Typography} from "@app/components/common/Typography";
+import { Typography } from '@app/components/common/Typography';
 
 export const DeleteImageModal: React.FC<DeleteImageModalProps> = ({ open, onClose, onDelete }) => {
   return (