diff --git a/client/public/images/pages/UnitTypes/1br-type-a.jpg b/client/public/images/pages/UnitTypes/1br-type-a.jpg
new file mode 100644
index 0000000..96dc462
Binary files /dev/null and b/client/public/images/pages/UnitTypes/1br-type-a.jpg differ
diff --git a/client/public/images/pages/UnitTypes/1br-type-b.jpg b/client/public/images/pages/UnitTypes/1br-type-b.jpg
new file mode 100644
index 0000000..b3570f6
Binary files /dev/null and b/client/public/images/pages/UnitTypes/1br-type-b.jpg differ
diff --git a/client/public/images/pages/UnitTypes/1br-type-c.jpg b/client/public/images/pages/UnitTypes/1br-type-c.jpg
new file mode 100644
index 0000000..4867a65
Binary files /dev/null and b/client/public/images/pages/UnitTypes/1br-type-c.jpg differ
diff --git a/client/public/images/pages/UnitTypes/1br-type-d.jpg b/client/public/images/pages/UnitTypes/1br-type-d.jpg
new file mode 100644
index 0000000..beb3648
Binary files /dev/null and b/client/public/images/pages/UnitTypes/1br-type-d.jpg differ
diff --git a/client/public/images/pages/UnitTypes/2br-type-a.jpg b/client/public/images/pages/UnitTypes/2br-type-a.jpg
new file mode 100644
index 0000000..e6f8a0e
Binary files /dev/null and b/client/public/images/pages/UnitTypes/2br-type-a.jpg differ
diff --git a/client/public/images/pages/UnitTypes/2br-type-b.jpg b/client/public/images/pages/UnitTypes/2br-type-b.jpg
new file mode 100644
index 0000000..32e1021
Binary files /dev/null and b/client/public/images/pages/UnitTypes/2br-type-b.jpg differ
diff --git a/client/public/images/pages/UnitTypes/studio-2.jpg b/client/public/images/pages/UnitTypes/studio-2.jpg
new file mode 100644
index 0000000..1ff76f8
Binary files /dev/null and b/client/public/images/pages/UnitTypes/studio-2.jpg differ
diff --git a/client/public/images/pages/UnitTypes/studio-flex.jpg b/client/public/images/pages/UnitTypes/studio-flex.jpg
new file mode 100644
index 0000000..e1a6281
Binary files /dev/null and b/client/public/images/pages/UnitTypes/studio-flex.jpg differ
diff --git a/client/public/images/sequence/179.jpg b/client/public/images/sequence/179.jpg
index ff80434..014a063 100644
Binary files a/client/public/images/sequence/179.jpg and b/client/public/images/sequence/179.jpg differ
diff --git a/client/public/images/sequence/250.jpg b/client/public/images/sequence/250.jpg
index ca4701d..651117a 100644
Binary files a/client/public/images/sequence/250.jpg and b/client/public/images/sequence/250.jpg differ
diff --git a/client/public/images/sequence/340.jpg b/client/public/images/sequence/340.jpg
index 7cc2478..8dc5e0d 100644
Binary files a/client/public/images/sequence/340.jpg and b/client/public/images/sequence/340.jpg differ
diff --git a/client/public/images/sequence/52.jpg b/client/public/images/sequence/52.jpg
index 96e9387..58efc6e 100644
Binary files a/client/public/images/sequence/52.jpg and b/client/public/images/sequence/52.jpg differ
diff --git a/client/public/images/sequenceWing.jpg b/client/public/images/sequenceWing.jpg
index 0c4d142..936740c 100644
Binary files a/client/public/images/sequenceWing.jpg and b/client/public/images/sequenceWing.jpg differ
diff --git a/client/public/images/sequenceWingOld.jpg b/client/public/images/sequenceWingOld.jpg
new file mode 100644
index 0000000..0c4d142
Binary files /dev/null and b/client/public/images/sequenceWingOld.jpg differ
diff --git a/client/src/components/UnitTypesPage/UnitTypeCard.tsx b/client/src/components/UnitTypesPage/UnitTypeCard.tsx
index a0f2c35..6c0614b 100644
--- a/client/src/components/UnitTypesPage/UnitTypeCard.tsx
+++ b/client/src/components/UnitTypesPage/UnitTypeCard.tsx
@@ -27,7 +27,7 @@ function UnitTypeCard({ wing, floor, name, desc, imageSrc, onClick }: Props) {
         </div> */}
       </div>
       <div className="flex justify-center">
-        <img src={imageSrc} alt="" className="h-[294px] pointer-events-none" />
+        <img src={imageSrc} alt="" className="aspect-square pointer-events-none" />
       </div>
       <div className="space-y-1">
         <p>{desc}</p>
diff --git a/client/src/pages/UnitTypesPage.tsx b/client/src/pages/UnitTypesPage.tsx
index 916802f..369dca4 100644
--- a/client/src/pages/UnitTypesPage.tsx
+++ b/client/src/pages/UnitTypesPage.tsx
@@ -24,18 +24,19 @@ function UnitTypesPage() {
   }, []);
 
   return (
-    <div className="pt-[calc(58px+24px)] p-6 space-y-6 bg-[#F3F3F2]">
+    <div className="mt-14 lg:p-6 sm:px-4 sm:py-6 p-4 pb-12 space-y-6 bg-[#F3F3F2]">
       <div className="text-2xl font-semibold pb-4 border-b border-[#E2E2DC] flex gap-4">
-        <p className="">Unit Types</p>
-        <p className="text-[#73787C]">8</p>
+        <p className="text-[#0D1922]">
+          Unit Types <span className="text-[#73787C]">8</span>
+        </p>
       </div>
-      <div className="grid grid-cols-4 gap-4">
+      <div className="grid xl:grid-cols-4 sm:grid-cols-2 lg:gap-4 sm:gap-3 gap-2">
         <UnitTypeCard
           wing="West Wing"
           floor="Floor 5-21"
           desc="Total Area: 341-366 Sqft"
           name="Studio Flex"
-          imageSrc="/images/layouts/studio_flex_left.png"
+          imageSrc="/images/pages/UnitTypes/studio-flex.jpg"
           onClick={() => navigate("studio-flex")}
         />
         <UnitTypeCard
@@ -43,7 +44,7 @@ function UnitTypesPage() {
           floor="Floor 5-21 / 24-31"
           desc="Total Area: 386-416 Sqft"
           name="Studio²"
-          imageSrc="/images/layouts/studio_left.png"
+          imageSrc="/images/pages/UnitTypes/studio-2.jpg"
           onClick={() => navigate("studio-2")}
         />
         <UnitTypeCard
@@ -51,7 +52,7 @@ function UnitTypesPage() {
           floor="Floor 5-31"
           desc="Total Area: 622 Sqft"
           name="1 Bedroom² Type A"
-          imageSrc="/images/layouts/1br_a_left.png"
+          imageSrc="/images/pages/UnitTypes/1br-type-a.jpg"
           onClick={() => navigate("1br-type-a")}
         />
         <UnitTypeCard
@@ -59,7 +60,7 @@ function UnitTypesPage() {
           floor="Floor 5-31"
           desc="Total Area: 751-770 Sqft"
           name="1 Bedroom² Type B"
-          imageSrc="/images/layouts/1br_b_left.png"
+          imageSrc="/images/pages/UnitTypes/1br-type-b.jpg"
           onClick={() => navigate("1br-type-b")}
         />
         <UnitTypeCard
@@ -67,7 +68,7 @@ function UnitTypesPage() {
           floor="Floor 5-31"
           desc="Total Area: 608-642 Sqft"
           name="1 Bedroom² Type C"
-          imageSrc="/images/layouts/1br_c_left.png"
+          imageSrc="/images/pages/UnitTypes/1br-type-c.jpg"
           onClick={() => navigate("1br-type-c")}
         />
         <UnitTypeCard
@@ -75,7 +76,7 @@ function UnitTypesPage() {
           floor="Floor 5-21 / 24-31"
           desc="Total Area: 607-619 Sqft"
           name="1 Bedroom² Type D"
-          imageSrc="/images/layouts/1br_d_left.png"
+          imageSrc="/images/pages/UnitTypes/1br-type-d.jpg"
           onClick={() => navigate("1br-type-d")}
         />
         <UnitTypeCard
@@ -83,7 +84,7 @@ function UnitTypesPage() {
           floor="Floor 5-31"
           desc="Total Area: 914 Sqft"
           name="2 Bedroom² Type A"
-          imageSrc="/images/layouts/2br_a_left.png"
+          imageSrc="/images/pages/UnitTypes/2br-type-a.jpg"
           onClick={() => navigate("2br-type-a")}
         />
         <UnitTypeCard
@@ -91,7 +92,7 @@ function UnitTypesPage() {
           floor="Floor 5-31"
           desc="Total Area: 1,058 Sqft"
           name="2 Bedroom² Type B"
-          imageSrc="/images/layouts/2br_b_left.png"
+          imageSrc="/images/pages/UnitTypes/2br-type-b.jpg"
           onClick={() => navigate("2br-type-b")}
         />
       </div>