upd

client/src/components/Button2.tsx

@@ -32,7 +32,7 @@ function Button2({
 }: Props) {
   return (
     <button
-      className={`flex items-center transition-colors w-fit ${
+      className={`flex items-center justify-center transition-colors w-fit ${
         variantClasses[variant]
       } ${sizeClasses[size]} ${
         roundedFull ? "rounded-full" : "rounded-lg"

client/src/components/Header.tsx

@@ -7,10 +7,12 @@ import useModal from "../store/useModal";
 import NavbarModal from "./modals/NavbarModal";
 import { useState } from "react";
 import CloseIcon from "./icons/CloseIcon";
+import useFavoritesStore from "../store/useFavoritesStore";
 
 function Header() {
   const [showNavbar, setShowNavbar] = useState<boolean>(false);
   const { setModal } = useModal();
+  const { favoriteUnits } = useFavoritesStore();
 
   function handleClick() {
     setShowNavbar((prev) => !prev);
@@ -46,8 +48,13 @@ function Header() {
           About IRTH
         </NavLink>
         <div className="w-px h-3 bg-[#E2E2DC]"></div>
-        <NavLink to="/favorites" className="p-4">
-          Favorites
+        <NavLink to="/favorites" className="p-4 relative">
+          Favorites{" "}
+          {favoriteUnits.length > 0 && (
+            <div className="absolute right-0 top-2 w-4 h-4 bg-[#00BED7] rounded-full flex items-center justify-center">
+              <p className="text-white text-[10px] font-mono font-semibold -ml-[0.5px]">{favoriteUnits.length}</p>
+            </div>
+          )}
         </NavLink>
         <div className="w-px h-3 bg-[#E2E2DC]"></div>
         <NavLink to="#" className="p-4">

client/src/components/UnitTypesPage/UnitTypeCard.tsx

@@ -30,7 +30,7 @@ function UnitTypeCard({ wing, floor, name, desc, imageSrc, onClick }: Props) {
         <img src={imageSrc} alt="" className="aspect-square pointer-events-none" />
       </div>
       <div className="space-y-1">
-        <p>{desc}</p>
+        <p className="text-sm">{desc}</p>
         <p className="text-xl text-[#0D1922] font-semibold">{name}</p>
         {/* <p className="text-xl text-[#00BED7] font-semibold">Unavailable</p> */}
       </div>

client/src/components/icons/SearchIcon.tsx

@@ -1,4 +1,8 @@
-const SearchIcon = () => {
+interface Props {
+  className?: string;
+}
+
+const SearchIcon = ({ className }: Props) => {
   return (
     <svg
       width="20"
@@ -6,6 +10,7 @@ const SearchIcon = () => {
       viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       <path
         d="M15.8332 15.8334L12.973 12.9785M12.973 12.9785C13.9084 12.0445 14.487 10.7533 14.487 9.327C14.487 6.47707 12.1767 4.16675 9.32676 4.16675C6.47683 4.16675 4.1665 6.47707 4.1665 9.327C4.1665 12.1769 6.47683 14.4873 9.32676 14.4873C10.7504 14.4873 12.0394 13.9108 12.973 12.9785Z"