diff --git a/public/fonts/Usual/Bold Italic.otf b/public/fonts/Usual/Bold Italic.otf
new file mode 100644
index 0000000..ec5e19a
Binary files /dev/null and b/public/fonts/Usual/Bold Italic.otf differ
diff --git a/public/fonts/Usual/Bold.otf b/public/fonts/Usual/Bold.otf
new file mode 100644
index 0000000..33a9528
Binary files /dev/null and b/public/fonts/Usual/Bold.otf differ
diff --git a/public/fonts/Usual/ExtraBold Italic.otf b/public/fonts/Usual/ExtraBold Italic.otf
new file mode 100644
index 0000000..e21bfc2
Binary files /dev/null and b/public/fonts/Usual/ExtraBold Italic.otf differ
diff --git a/public/fonts/Usual/ExtraBold.otf b/public/fonts/Usual/ExtraBold.otf
new file mode 100644
index 0000000..f23b8b8
Binary files /dev/null and b/public/fonts/Usual/ExtraBold.otf differ
diff --git a/public/fonts/Usual/Italic.otf b/public/fonts/Usual/Italic.otf
new file mode 100644
index 0000000..c1a15f0
Binary files /dev/null and b/public/fonts/Usual/Italic.otf differ
diff --git a/public/fonts/Usual/Light Italic.otf b/public/fonts/Usual/Light Italic.otf
new file mode 100644
index 0000000..b061656
Binary files /dev/null and b/public/fonts/Usual/Light Italic.otf differ
diff --git a/public/fonts/Usual/Light.otf b/public/fonts/Usual/Light.otf
new file mode 100644
index 0000000..f36bcd4
Binary files /dev/null and b/public/fonts/Usual/Light.otf differ
diff --git a/public/fonts/Usual/Medium Italic.otf b/public/fonts/Usual/Medium Italic.otf
new file mode 100644
index 0000000..e01b80c
Binary files /dev/null and b/public/fonts/Usual/Medium Italic.otf differ
diff --git a/public/fonts/Usual/Medium.otf b/public/fonts/Usual/Medium.otf
new file mode 100644
index 0000000..e5d44f0
Binary files /dev/null and b/public/fonts/Usual/Medium.otf differ
diff --git a/public/fonts/Usual/Regular.otf b/public/fonts/Usual/Regular.otf
new file mode 100644
index 0000000..bedbc56
Binary files /dev/null and b/public/fonts/Usual/Regular.otf differ
diff --git a/src/components/complexPage/ComplexTopPanel.tsx b/src/components/complexPage/ComplexTopPanel.tsx
index e079656..e6d7099 100644
--- a/src/components/complexPage/ComplexTopPanel.tsx
+++ b/src/components/complexPage/ComplexTopPanel.tsx
@@ -1,4 +1,4 @@
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import useModal from "../../store/useModal";
 import Button from "../Button";
 import FilterIcon from "../icons/FilterIcon";
@@ -19,6 +19,7 @@ const ComplexTopPanel = () => {
   const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen();
   const { setIsSidebar, isSidebar } = useWingSidebar();
   const navigate = useNavigate();
+  const { complexId } = useParams();
 
   const handleOnHelpClick = () => {
     setModal(<HelpModal />);
@@ -55,6 +56,10 @@ const ComplexTopPanel = () => {
     }
   };
 
+  const handleOnAboutComplexClick = () => {
+    navigate(`../aboutComplex/${complexId}`);
+  };
+
   return (
     <>
       <div className="absolute top-0 w-screen z-20 select-none pointer-events-none">
@@ -87,6 +92,7 @@ const ComplexTopPanel = () => {
             icon={<InfoIcon />}
             buttonType="primary"
             text="About Complex"
+            onClick={handleOnAboutComplexClick}
           />
         </div>
         <div className="flex flex-col sm:col-start-6 col-start-8 sm:col-span-4 col-span-4 text-white text-center items-start ">
diff --git a/src/components/favoritesPage/FavoriteApartmentCard.tsx b/src/components/favoritesPage/FavoriteApartmentCard.tsx
index 4d9ff37..2c0f7f1 100644
--- a/src/components/favoritesPage/FavoriteApartmentCard.tsx
+++ b/src/components/favoritesPage/FavoriteApartmentCard.tsx
@@ -1,3 +1,4 @@
+import { formatNumber } from "../../calc/formatNumber";
 import useModal from "../../store/useModal";
 import { ILayoutCard } from "../../types/layoutCard";
 import Button from "../Button";
@@ -62,7 +63,9 @@ const FavoriteAppartmentCard = ({ card }: FavoriteAppartmentCardProps) => {
           <p className="text[#0D1922] text-s">
             {apartmentType}, {square} Sqft
           </p>
-          <p className="text-[#00BED7] text-m font-bold">AED {cost}</p>
+          <p className="text-[#00BED7] text-m font-bold">
+            AED {formatNumber(cost, ",", 3, 1)}
+          </p>
         </div>
         <Button
           icon={<BookingIcon />}
diff --git a/src/components/favoritesPage/FavoriteSliderCard.tsx b/src/components/favoritesPage/FavoriteSliderCard.tsx
index 60288a0..82d7b11 100644
--- a/src/components/favoritesPage/FavoriteSliderCard.tsx
+++ b/src/components/favoritesPage/FavoriteSliderCard.tsx
@@ -1,3 +1,4 @@
+import { formatNumber } from "../../calc/formatNumber";
 import { ILayoutCard } from "../../types/layoutCard";
 import Button from "../Button";
 import BookingIcon from "../icons/BookingIcon";
@@ -28,7 +29,9 @@ const FavoriteSliderCard = ({ card, elementRef }: FavoriteSliderCardProps) => {
       </div>
       <div className="flex flex-col gap-1 pb-6 border-b">
         <p className="text-s text-[#73787C]">Price</p>
-        <p className="text-[#0D1922] text-m">AED {card.cost}</p>
+        <p className="text-[#0D1922] text-m">
+          AED {formatNumber(card.cost, ",", 3, 1)}
+        </p>
       </div>
       <div className="flex flex-col gap-1 pb-6 border-b">
         <p className="text-s text-[#73787C]">Total Area</p>
diff --git a/src/components/modals/SendEnquryModal.tsx b/src/components/modals/SendEnquryModal.tsx
index 902db28..64adc8b 100644
--- a/src/components/modals/SendEnquryModal.tsx
+++ b/src/components/modals/SendEnquryModal.tsx
@@ -3,6 +3,7 @@ import Button from "../Button";
 import CrossIcon from "../icons/CrossIcon";
 import MasterInput from "../MasterInput";
 import MasterSelector from "../MasterSelector";
+import { formatNumber } from "../../calc/formatNumber";
 
 const SendEnquiryModal = () => {
   const { setModal } = useModal();
@@ -32,7 +33,7 @@ const SendEnquiryModal = () => {
                   1 bedroom, 609 Sqft{" "}
                 </p>
                 <p className="text-subheadline-s font-semibold text-[#0D192266]">
-                  AED 1,668,888
+                  AED {formatNumber(1668888, ",", 3, 1)}
                 </p>
               </div>
               <div className="flex flex-col gap-1">
diff --git a/src/components/searchApartment/ApartmentSidebar.tsx b/src/components/searchApartment/ApartmentSidebar.tsx
index bf0c495..a81a5ba 100644
--- a/src/components/searchApartment/ApartmentSidebar.tsx
+++ b/src/components/searchApartment/ApartmentSidebar.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import Button from "../Button";
+import { formatNumber } from "../../calc/formatNumber";
 
 const ApartmentSidebar = () => {
   const navigate = useNavigate();
@@ -49,7 +50,7 @@ const ApartmentSidebar = () => {
         </div>
         <div className="rounded-2xl bg-white flex flex-col p-6 gap-4 flex-1 lg:flex-none justify-between">
           <p className="text-[#00BED7] font-semibold text-subheadline-s leading-7">
-            AED 1,668,888
+            AED {formatNumber(1668888, ",", 3, 1)}
           </p>
           <div className="flex gap-2">
             <Button
diff --git a/src/components/searchApartment/SimilarAppartmentCard.tsx b/src/components/searchApartment/SimilarAppartmentCard.tsx
index 5145d9a..8c2f334 100644
--- a/src/components/searchApartment/SimilarAppartmentCard.tsx
+++ b/src/components/searchApartment/SimilarAppartmentCard.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import { ILayoutCard } from "../../types/layoutCard";
+import { formatNumber } from "../../calc/formatNumber";
 
 interface LayoutCardProps {
   layoutCard: ILayoutCard;
@@ -54,7 +55,9 @@ const SimilarAppartmentCard = ({ layoutCard, elementRef }: LayoutCardProps) => {
         <p className="text[#0D1922] text-s">
           {apartmentType}, {square} Sqft
         </p>
-        <p className="text-[#00BED7] text-m font-bold">AED {cost}</p>
+        <p className="text-[#00BED7] text-m font-bold">
+          AED {formatNumber(cost, ",", 3, 1)}
+        </p>
       </div>
     </div>
   );
diff --git a/src/components/searchApartment/StudioDescriptionSection.tsx b/src/components/searchApartment/StudioDescriptionSection.tsx
index e39992c..4737d5f 100644
--- a/src/components/searchApartment/StudioDescriptionSection.tsx
+++ b/src/components/searchApartment/StudioDescriptionSection.tsx
@@ -1,3 +1,5 @@
+import { formatNumber } from "../../calc/formatNumber";
+
 const StudioDescriptionSection = () => {
   return (
     <section className="grid grid-cols-12 lg:gap-4 gap-3">
@@ -9,7 +11,7 @@ const StudioDescriptionSection = () => {
           <p className="text-[#00BED7] text-subheadline-s font-semibold">
             Live in the future, today.
           </p>
-          <div className="flex flex-col gap-[10px]">
+          <div className="flex flex-col gap-[10px] pt-6">
             <p className="text-m text-[#73787C]">
               Live in the future, today. In Studio Flex explore the ORI Cloud
               Bed, optimizing your living space with functionality and smart
@@ -24,7 +26,7 @@ const StudioDescriptionSection = () => {
         <div className="flex flex-col gap-1">
           <p className="text-[#0D1922B2] text-s">Up to 365,54 Sqft </p>
           <p className="text-subheadline-s font-semibold text-[#00BED7]">
-            from AED 1,668,888
+            from AED {formatNumber(1668888, ",", 3, 1)}
           </p>
         </div>
       </div>
diff --git a/src/components/searchPage/LayoutCard.tsx b/src/components/searchPage/LayoutCard.tsx
index 7604f47..1821e73 100644
--- a/src/components/searchPage/LayoutCard.tsx
+++ b/src/components/searchPage/LayoutCard.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import { ILayoutCard } from "../../types/layoutCard";
+import { formatNumber } from "../../calc/formatNumber";
 
 interface LayoutCardProps {
   layoutCard: ILayoutCard;
@@ -52,7 +53,9 @@ const LayoutCard = ({ layoutCard }: LayoutCardProps) => {
         <p className="text[#0D1922] text-s">
           {apartmentType}, {square} Sqft
         </p>
-        <p className="text-[#00BED7] text-m font-bold">AED {cost}</p>
+        <p className="text-[#00BED7] text-m font-bold">
+          AED {formatNumber(cost, ",", 3, 1)}
+        </p>
       </div>
     </div>
   );
diff --git a/src/components/searchParticularApartmentsPage/ApartmentSidebar.tsx b/src/components/searchParticularApartmentsPage/ApartmentSidebar.tsx
index dca12e9..4a99347 100644
--- a/src/components/searchParticularApartmentsPage/ApartmentSidebar.tsx
+++ b/src/components/searchParticularApartmentsPage/ApartmentSidebar.tsx
@@ -1,3 +1,4 @@
+import { formatNumber } from "../../calc/formatNumber";
 import Button from "../Button";
 import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
 import { useNavigate } from "react-router-dom";
@@ -44,7 +45,7 @@ const ApartmentSidebar = () => {
                   </p>
                 </div>
                 <p className="text-[#00BED7] text-subheadline-s font-bold pt-4">
-                  AED 1668888
+                  AED {formatNumber(1668888, ",", 3, 1)}
                 </p>
               </div>
               <div className="w-full aspect-square mt-4 pb-4">
diff --git a/src/components/virtualTour/VirtualTourSidebar.tsx b/src/components/virtualTour/VirtualTourSidebar.tsx
index 005093c..26a1dab 100644
--- a/src/components/virtualTour/VirtualTourSidebar.tsx
+++ b/src/components/virtualTour/VirtualTourSidebar.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import useSphere from "../../store/useSphere";
 import { IAppartmentSphere, ISphere } from "../../types/apartmentSphere";
 import Button from "../Button";
diff --git a/src/index.css b/src/index.css
index e1b1a06..57fd2c8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: "Usual";
+  src: url("/fonts/Usual/Regular.otf") format("opentype");
+}
+
 body {
   background-color: #f3f3f2;
 }
diff --git a/src/main.tsx b/src/main.tsx
index f40702c..23b0b66 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -31,7 +31,7 @@ const router = createBrowserRouter([
         element: <Complex />,
       },
       {
-        path: "/masterplan/:complexId/aboutComplex",
+        path: "/aboutComplex/:complexId",
         element: <AboutComplex />,
       },
       {
diff --git a/src/pages/AboutComplex.tsx b/src/pages/AboutComplex.tsx
index 39cd199..bd5f195 100644
--- a/src/pages/AboutComplex.tsx
+++ b/src/pages/AboutComplex.tsx
@@ -4,6 +4,7 @@ import Button from "../components/Button";
 import LeftArrowIcon from "../components/icons/LeftArrowIcon";
 import LivingSolutionSlider from "../components/aboutComplex/LivingSolutionSlider";
 import RoveHomeSlider from "../components/aboutComplex/RoveHomeSlider";
+import { useNavigate } from "react-router-dom";
 
 interface ICityItem {
   time: number;
@@ -118,6 +119,12 @@ const advStyles = [
 ];
 
 const AboutComplex = () => {
+  const navigate = useNavigate();
+
+  const handleOnBackClick = () => {
+    navigate(-1);
+  };
+
   return (
     <>
       <section
@@ -128,6 +135,7 @@ const AboutComplex = () => {
         <div className="flex px-6 py-4 col-span-full h-16 relative">
           <div className="fixed z-[100]">
             <Button
+              onClick={handleOnBackClick}
               text="Masterplan"
               icon={<LeftArrowIcon />}
               buttonType="cta"