diff --git a/app/_components/Page1.tsx b/app/_components/Page1.tsx
index 07cc9b8..d398b07 100644
--- a/app/_components/Page1.tsx
+++ b/app/_components/Page1.tsx
@@ -93,12 +93,12 @@ function BoardCard({ item, onPress }: BoardCardProps) {
         <View className="flex-row items-center justify-between">
           <View className="flex-row items-center gap-2">
             <View className="flex-row items-center gap-1">
-              <HeartIcon width={24} height={24} color="#8BC7FF" filled={Boolean(item.isPressed)} />
+              <HeartIcon size={24} className="text-blue-10" filled={Boolean(item.isPressed)} />
               <Text className="text-body05 text-grey-40">{item.likeCount}</Text>
             </View>
 
             <View className="flex-row items-center gap-1">
-              <ChatBubbleIcon width={24} height={24} color="#8BC7FF" />
+              <ChatBubbleIcon size={24} className="text-blue-10" />
               <Text className="text-body05 text-grey-40">{item.commentCount}</Text>
             </View>
           </View>
diff --git a/components/icons/arrow-back.tsx b/components/icons/arrow-back.tsx
deleted file mode 100644
index 3d9f125..0000000
--- a/components/icons/arrow-back.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { cssInterop } from 'nativewind';
-import Svg, { Path } from 'react-native-svg';
-
-const StyledSvg = cssInterop(Svg, {
-  className: { target: 'style', nativeStyleToProp: { color: true } },
-});
-
-interface ArrowBackIconProps {
-  width?: number;
-  height?: number;
-  className?: string;
-}
-
-export default function ArrowBackIcon({ width = 20, height = 20, className = 'text-[#000]' }: ArrowBackIconProps) {
-  return (
-    <StyledSvg width={width} height={height} viewBox="0 0 20 20" fill="none" className={className}>
-      <Path d="M13 16L7 10L13 4" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
-    </StyledSvg>
-  );
-}
diff --git a/components/icons/chevron-down.tsx b/components/icons/arrow-down.tsx
similarity index 57%
rename from components/icons/chevron-down.tsx
rename to components/icons/arrow-down.tsx
index 0d06e54..8dc5f21 100644
--- a/components/icons/chevron-down.tsx
+++ b/components/icons/arrow-down.tsx
@@ -5,15 +5,14 @@ const StyledSvg = cssInterop(Svg, {
   className: { target: 'style', nativeStyleToProp: { color: true } },
 });
 
-interface ChevronDownIconProps {
-  width?: number;
-  height?: number;
+interface ArrowDownIconProps {
+  size?: number;
   className?: string;
 }
 
-export default function ChevronDownIcon({ width = 24, height = 24, className = 'text-[#000]' }: ChevronDownIconProps) {
+export default function ArrowDownIcon({ size = 24, className = 'text-[#000]' }: ArrowDownIconProps) {
   return (
-    <StyledSvg width={width} height={height} viewBox="0 0 24 24" fill="none" className={className}>
+    <StyledSvg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
       <Path d="M17.999 9L11.999 15L5.99902 9" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
     </StyledSvg>
   );
diff --git a/components/icons/arrow-left.tsx b/components/icons/arrow-left.tsx
new file mode 100644
index 0000000..ae3bd98
--- /dev/null
+++ b/components/icons/arrow-left.tsx
@@ -0,0 +1,19 @@
+import { cssInterop } from 'nativewind';
+import Svg, { Path } from 'react-native-svg';
+
+const StyledSvg = cssInterop(Svg, {
+  className: { target: 'style', nativeStyleToProp: { color: true } },
+});
+
+interface ArrowLeftIconProps {
+  size?: number;
+  className?: string;
+}
+
+export default function ArrowLeftIcon({ size = 24, className = 'text-[#000]' }: ArrowLeftIconProps) {
+  return (
+    <StyledSvg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
+      <Path d="M15.6 19.2L8.4 12L15.6 4.8" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+    </StyledSvg>
+  );
+}
diff --git a/components/icons/arrow-right.tsx b/components/icons/arrow-right.tsx
new file mode 100644
index 0000000..ae10905
--- /dev/null
+++ b/components/icons/arrow-right.tsx
@@ -0,0 +1,19 @@
+import { cssInterop } from 'nativewind';
+import Svg, { Path } from 'react-native-svg';
+
+const StyledSvg = cssInterop(Svg, {
+  className: { target: 'style', nativeStyleToProp: { color: true } },
+});
+
+interface ArrowRightIconProps {
+  size?: number;
+  className?: string;
+}
+
+export default function ArrowRightIcon({ size = 24, className = 'text-[#000]' }: ArrowRightIconProps) {
+  return (
+    <StyledSvg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
+      <Path d="M8.4 4.8L15.6 12L8.4 19.2" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
+    </StyledSvg>
+  );
+}
diff --git a/components/icons/chat-bubble.tsx b/components/icons/chat-bubble.tsx
index 04ea8d7..461e6eb 100644
--- a/components/icons/chat-bubble.tsx
+++ b/components/icons/chat-bubble.tsx
@@ -6,14 +6,13 @@ const StyledSvg = cssInterop(Svg, {
 });
 
 interface ChatBubbleIconProps {
-  width?: number;
-  height?: number;
+  size?: number;
   className?: string;
 }
 
-export default function ChatBubbleIcon({ width = 24, height = 24, className = 'text-[#000]' }: ChatBubbleIconProps) {
+export default function ChatBubbleIcon({ size = 24, className = 'text-[#000]' }: ChatBubbleIconProps) {
   return (
-    <StyledSvg width={width} height={height} viewBox="0 0 24 24" fill="none" className={className}>
+    <StyledSvg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
       <Path
         d="M12 5.5C8.1514 5.5 5 8.38407 5 11.9875C5 13.1207 5.3094 14.2221 5.8967 15.1859C6.2124 15.7042 6.2418 16.4416 5.7658 17.4385C5.5495 17.8912 5.847 18.4275 6.3342 18.4751C7.2841 18.5681 8.0863 18.4037 9.1783 17.9344C10.0477 18.2833 11.0312 18.4751 12 18.4751C15.8486 18.4751 19 15.5903 19 11.9875C19 8.38407 15.8486 5.5 12 5.5ZM12 6.94167C15.1101 6.94167 17.6 9.22096 17.6 11.9875C17.6 14.7541 15.1101 17.0334 12 17.0334C11.1047 17.0334 10.2409 16.8503 9.4625 16.4928C9.2826 16.4099 9.07401 16.4113 8.89341 16.4928C8.24941 16.7833 7.88469 16.9419 7.40659 17.0111C7.67119 16.0704 7.4766 15.0742 7.0783 14.4204C6.6289 13.6829 6.4 12.8453 6.4 11.9875C6.4 9.22096 8.8899 6.94167 12 6.94167ZM9.2 11.2667C8.8136 11.2667 8.5 11.5889 8.5 11.9875C8.5 12.3854 8.8136 12.7084 9.2 12.7084C9.5864 12.7084 9.9 12.3854 9.9 11.9875C9.9 11.5889 9.5864 11.2667 9.2 11.2667ZM12 11.2667C11.6136 11.2667 11.3 11.5889 11.3 11.9875C11.3 12.3854 11.6136 12.7084 12 12.7084C12.3864 12.7084 12.7 12.3854 12.7 11.9875C12.7 11.5889 12.3864 11.2667 12 11.2667ZM14.8 11.2667C14.4136 11.2667 14.1 11.5889 14.1 11.9875C14.1 12.3854 14.4136 12.7084 14.8 12.7084C15.1864 12.7084 15.5 12.3854 15.5 11.9875C15.5 11.5889 15.1864 11.2667 14.8 11.2667Z"
         fill="currentColor"
diff --git a/components/icons/close.tsx b/components/icons/close.tsx
index 6b137de..4d1a000 100644
--- a/components/icons/close.tsx
+++ b/components/icons/close.tsx
@@ -1,18 +1,23 @@
+import { cssInterop } from 'nativewind';
 import Svg, { Circle, Path } from 'react-native-svg';
 
+const StyledSvg = cssInterop(Svg, {
+  className: { target: 'style', nativeStyleToProp: { color: true } },
+});
+
 interface CloseIconProps {
-  width?: number;
-  height?: number;
+  size?: number;
+  className?: string;
 }
 
-export default function CloseIcon({ width = 24, height = 24 }: CloseIconProps) {
+export default function CloseIcon({ size = 24, className = 'text-[#CDD0D4]' }: CloseIconProps) {
   return (
-    <Svg width={width} height={height} viewBox="0 0 24 24" fill="none">
-      <Circle cx={12} cy={12} r={12} fill="#CDD0D4" />
+    <StyledSvg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
+      <Circle cx={12} cy={12} r={12} fill="currentColor" />
       <Path
         d="M15.9599 6.38322C16.37 5.97317 17.0352 5.97219 17.4453 6.38225C17.8552 6.79231 17.8543 7.45759 17.4443 7.8676L13.3984 11.9135L17.4453 15.9604C17.8548 16.3704 17.855 17.0348 17.4453 17.4447C17.0352 17.8548 16.37 17.8548 15.9599 17.4447L11.913 13.3979L7.86714 17.4447C7.45709 17.8545 6.79274 17.8546 6.38276 17.4447C5.97279 17.0348 5.97295 16.3704 6.38276 15.9604L10.4287 11.9135L6.38276 7.8676C5.9729 7.45753 5.97277 6.79224 6.38276 6.38225C6.79282 5.97228 7.45809 5.9732 7.86811 6.38322L11.914 10.4291L15.9599 6.38322Z"
         fill="white"
       />
-    </Svg>
+    </StyledSvg>
   );
 }
diff --git a/components/icons/dining.tsx b/components/icons/dining.tsx
new file mode 100644
index 0000000..0f6f9cf
--- /dev/null
+++ b/components/icons/dining.tsx
@@ -0,0 +1,22 @@
+import { cssInterop } from 'nativewind';
+import Svg, { Path } from 'react-native-svg';
+
+const StyledSvg = cssInterop(Svg, {
+  className: { target: 'style', nativeStyleToProp: { color: true } },
+});
+
+interface DiningIconProps {
+  size?: number;
+  className?: string;
+}
+
+export default function DiningIcon({ size = 24, className = 'text-[#000]' }: DiningIconProps) {
+  return (
+    <StyledSvg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
+      <Path
+        d="M10.9896 4.28564C11.3445 4.28576 11.6323 4.57366 11.6325 4.9285V10.7418C11.6323 12.0435 10.577 13.0989 9.27532 13.099H8.60149V19.9277C8.60149 20.2827 8.31368 20.5705 7.95864 20.5705C7.6036 20.5705 7.31578 20.2827 7.31578 19.9277V13.099H6.64279C5.34105 13.099 4.28576 12.0436 4.28564 10.7418V4.9285C4.2858 4.57359 4.57355 4.28564 4.9285 4.28564C5.28345 4.28564 5.57121 4.57359 5.57136 4.9285V10.7418C5.57148 11.3335 6.05113 11.8133 6.64279 11.8133H7.31578V4.9285C7.31593 4.57359 7.60369 4.28564 7.95864 4.28564C8.31358 4.28564 8.60134 4.57359 8.60149 4.9285V11.8133H9.27532C9.86689 11.8132 10.3466 11.3334 10.3467 10.7418V4.9285C10.3469 4.57359 10.6347 4.28564 10.9896 4.28564ZM19.0697 4.28564C19.2401 4.28564 19.4037 4.35351 19.5242 4.47398C19.6447 4.59447 19.7125 4.75811 19.7125 4.9285V19.9277C19.7125 20.2827 19.4247 20.5705 19.0697 20.5705C18.7146 20.5705 18.4268 20.2827 18.4268 19.9277V14.8685H14.5236C14.1688 14.8683 13.8809 14.5805 13.8808 14.2257V7.9285C13.8809 5.91686 15.512 4.28584 17.5236 4.28564H19.0697ZM17.5236 5.57136C16.2221 5.57156 15.1667 6.62694 15.1665 7.9285V13.5828H18.4268V5.57136H17.5236Z"
+        fill="currentColor"
+      />
+    </StyledSvg>
+  );
+}
diff --git a/components/icons/hamburger.tsx b/components/icons/hamburger.tsx
index 78400fe..70fe119 100644
--- a/components/icons/hamburger.tsx
+++ b/components/icons/hamburger.tsx
@@ -6,14 +6,13 @@ const StyledSvg = cssInterop(Svg, {
 });
 
 interface HamburgerIconProps {
-  width?: number;
-  height?: number;
+  size?: number;
   className?: string;
 }
 
-export default function HamburgerIcon({ width = 24, height = 24, className = 'text-[#17171B]' }: HamburgerIconProps) {
+export default function HamburgerIcon({ size = 24, className = 'text-[#17171B]' }: HamburgerIconProps) {
   return (
-    <StyledSvg width={width} height={height} viewBox="0 0 24 24" fill="none" className={className}>
+    <StyledSvg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
       <Path
         d="M4.125 18.375H19.875M4.125 12.375H19.875M4.125 6.375H19.875"
         stroke="currentColor"
diff --git a/components/icons/heart.tsx b/components/icons/heart.tsx
index a280e62..7f59aeb 100644
--- a/components/icons/heart.tsx
+++ b/components/icons/heart.tsx
@@ -6,15 +6,14 @@ const StyledSvg = cssInterop(Svg, {
 });
 
 interface HeartIconProps {
-  width?: number;
-  height?: number;
+  size?: number;
   filled?: boolean;
   className?: string;
 }
 
-export default function HeartIcon({ width = 24, height = 24, filled = false, className = 'text-[#000]' }: HeartIconProps) {
+export default function HeartIcon({ size = 24, filled = false, className = 'text-[#000]' }: HeartIconProps) {
   return (
-    <StyledSvg width={width} height={height} viewBox="0 0 24 24" fill={filled ? 'currentColor' : 'none'} className={className}>
+    <StyledSvg width={size} height={size} viewBox="0 0 24 24" fill={filled ? 'currentColor' : 'none'} className={className}>
       <Path
         d="M15.1504 6.25C16.8404 6.25022 18.2498 7.67 18.25 9.47168C18.25 11.48 17.1411 13.4661 15.1162 15.3818C14.4353 16.0255 13.6956 16.5962 12.9502 17.1162C12.8182 17.2079 12.6924 17.2943 12.5732 17.374L12.2363 17.5928C12.1623 17.6392 12.1001 17.6796 12.0547 17.709C12.0316 17.7239 12.0141 17.7352 12 17.7441C11.9859 17.7352 11.9684 17.7239 11.9453 17.709C11.8999 17.6796 11.8377 17.6392 11.7637 17.5928C11.6585 17.5269 11.546 17.4538 11.4268 17.374L11.0498 17.1162C10.3044 16.5962 9.56466 16.0255 8.88379 15.3818C6.85887 13.4661 5.75 11.48 5.75 9.47168C5.75017 7.67 7.15963 6.25022 8.84961 6.25C9.86189 6.25 10.818 6.77823 11.4121 7.60645L12.0088 8.43848L12.6221 7.61914C13.2462 6.78512 14.2169 6.25 15.1504 6.25Z"
         stroke="currentColor"
diff --git a/components/icons/index.ts b/components/icons/index.ts
index 9474dbf..ec0ea32 100644
--- a/components/icons/index.ts
+++ b/components/icons/index.ts
@@ -1,12 +1,14 @@
-export { default as ArrowBackIcon } from './arrow-back';
+export { default as ArrowLeftIcon } from './arrow-left';
 export { default as HamburgerIcon } from './hamburger';
 export { default as ChatBubbleIcon } from './chat-bubble';
-export { default as ChevronDownIcon } from './chevron-down';
+export { default as ArrowDownIcon } from './arrow-down';
+export { default as ArrowRightIcon } from './arrow-right';
 export { default as CloseIcon } from './close';
 export { default as HeartIcon } from './heart';
 export { default as InfoCircleIcon } from './info-circle';
 export { default as InfoOutlineIcon } from './info-outline';
 export { default as InstagramIcon } from './instagram';
 export { default as SearchIcon } from './search';
+export { default as DiningIcon } from './dining';
 export { default as ThingoLogoLarge } from './thingo-logo-large';
 export { default as ThingoLogoSmall } from './thingo-logo-small';
diff --git a/components/icons/info-circle.tsx b/components/icons/info-circle.tsx
index 6aa16fd..b4e1f4e 100644
--- a/components/icons/info-circle.tsx
+++ b/components/icons/info-circle.tsx
@@ -6,14 +6,13 @@ const StyledSvg = cssInterop(Svg, {
 });
 
 interface InfoCircleIconProps {
-  width?: number;
-  height?: number;
+  size?: number;
   className?: string;
 }
 
-export default function InfoCircleIcon({ width = 24, height = 24, className = 'text-[#000]' }: InfoCircleIconProps) {
+export default function InfoCircleIcon({ size = 24, className = 'text-[#000]' }: InfoCircleIconProps) {
   return (
-    <StyledSvg width={width} height={height} viewBox="0 0 24 24" fill="none" className={className}>
+    <StyledSvg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
       <G opacity={0.8}>
         <Path
           fillRule="evenodd"
diff --git a/components/icons/info-outline.tsx b/components/icons/info-outline.tsx
index c81b019..cff7d64 100644
--- a/components/icons/info-outline.tsx
+++ b/components/icons/info-outline.tsx
@@ -6,14 +6,13 @@ const StyledSvg = cssInterop(Svg, {
 });
 
 interface InfoOutlineIconProps {
-  width?: number;
-  height?: number;
+  size?: number;
   className?: string;
 }
 
-export default function InfoOutlineIcon({ width = 24, height = 24, className = 'text-[#000]' }: InfoOutlineIconProps) {
+export default function InfoOutlineIcon({ size = 24, className = 'text-[#000]' }: InfoOutlineIconProps) {
   return (
-    <StyledSvg width={width} height={height} viewBox="0 0 24 24" fill="none" className={className}>
+    <StyledSvg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
       <Path d="M13.0737 18.2871H10.9482V16.1411H13.0737V18.2871Z" fill="currentColor" />
       <Path d="M12.898 8.55615L12.6636 14.6206H11.3584L11.124 8.55615L11.0464 4.5H12.9756L12.898 8.55615Z" fill="currentColor" />
       <Path
diff --git a/components/icons/instagram.tsx b/components/icons/instagram.tsx
index 62fad09..dd0e903 100644
--- a/components/icons/instagram.tsx
+++ b/components/icons/instagram.tsx
@@ -1,24 +1,30 @@
+import { cssInterop } from 'nativewind';
 import Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg';
 
+const StyledSvg = cssInterop(Svg, {
+  className: { target: 'style', nativeStyleToProp: { color: true } },
+});
+
 interface InstagramIconProps {
-  width?: number;
-  height?: number;
+  size?: number;
+  className?: string;
 }
 
-export default function InstagramIcon({ width = 12, height = 12 }: InstagramIconProps) {
+export default function InstagramIcon({ size = 24, className }: InstagramIconProps) {
+  const fill = className ? 'currentColor' : 'url(#paint0_linear_2067_970)';
   return (
-    <Svg width={width} height={height} viewBox="0 0 12 12" fill="none">
+    <StyledSvg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
       <Defs>
-        <LinearGradient id="paint0_linear_2067_970" x1="2.05263" y1="2.51875e-07" x2="13.2632" y2="12" gradientUnits="userSpaceOnUse">
+        <LinearGradient id="paint0_linear_2067_970" x1="4.10526" y1="0" x2="26.5264" y2="24" gradientUnits="userSpaceOnUse">
           <Stop stopColor="#FF7A00" />
           <Stop offset="0.427083" stopColor="#FA00FF" />
           <Stop offset="1" stopColor="#DBFF00" />
         </LinearGradient>
       </Defs>
       <Path
-        d="M6 1.0815C7.602 1.0815 7.792 1.0875 8.425 1.1165C10.051 1.1905 10.8105 1.962 10.8845 3.576C10.9135 4.2085 10.919 4.3985 10.919 6.0005C10.919 7.603 10.913 7.7925 10.8845 8.425C10.81 10.0375 10.0525 10.8105 8.425 10.8845C7.792 10.9135 7.603 10.9195 6 10.9195C4.398 10.9195 4.208 10.9135 3.5755 10.8845C1.9455 10.81 1.19 10.035 1.116 8.4245C1.087 7.792 1.081 7.6025 1.081 6C1.081 4.398 1.0875 4.2085 1.116 3.5755C1.1905 1.962 1.948 1.19 3.5755 1.116C4.2085 1.0875 4.398 1.0815 6 1.0815ZM6 0C4.3705 0 4.1665 0.007 3.5265 0.036C1.3475 0.136 0.1365 1.345 0.0365 3.526C0.007 4.1665 0 4.3705 0 6C0 7.6295 0.007 7.834 0.036 8.474C0.136 10.653 1.345 11.864 3.526 11.964C4.1665 11.993 4.3705 12 6 12C7.6295 12 7.834 11.993 8.474 11.964C10.651 11.864 11.865 10.655 11.9635 8.474C11.993 7.834 12 7.6295 12 6C12 4.3705 11.993 4.1665 11.964 3.5265C11.866 1.3495 10.6555 0.1365 8.4745 0.0365C7.834 0.007 7.6295 0 6 0ZM6 2.919C4.2985 2.919 2.919 4.2985 2.919 6C2.919 7.7015 4.2985 9.0815 6 9.0815C7.7015 9.0815 9.081 7.702 9.081 6C9.081 4.2985 7.7015 2.919 6 2.919ZM6 8C4.8955 8 4 7.105 4 6C4 4.8955 4.8955 4 6 4C7.1045 4 8 4.8955 8 6C8 7.105 7.1045 8 6 8ZM9.203 2.0775C8.805 2.0775 8.4825 2.4 8.4825 2.7975C8.4825 3.195 8.805 3.5175 9.203 3.5175C9.6005 3.5175 9.9225 3.195 9.9225 2.7975C9.9225 2.4 9.6005 2.0775 9.203 2.0775Z"
-        fill="url(#paint0_linear_2067_970)"
+        d="M12 2.163C15.204 2.163 15.584 2.175 16.85 2.233C20.102 2.381 21.621 3.924 21.769 7.152C21.827 8.417 21.838 8.797 21.838 12.001C21.838 15.206 21.826 15.585 21.769 16.85C21.62 20.075 20.105 21.621 16.85 21.769C15.584 21.827 15.206 21.839 12 21.839C8.796 21.839 8.416 21.827 7.151 21.769C3.891 21.62 2.38 20.07 2.232 16.849C2.174 15.584 2.162 15.205 2.162 12C2.162 8.796 2.175 8.417 2.232 7.151C2.381 3.924 3.896 2.38 7.151 2.232C8.417 2.175 8.796 2.163 12 2.163ZM12 0C8.741 0 8.333 0.014 7.053 0.072C2.695 0.272 0.273 2.69 0.073 7.052C0.014 8.333 0 8.741 0 12C0 15.259 0.014 15.668 0.072 16.948C0.272 21.306 2.69 23.728 7.052 23.928C8.333 23.986 8.741 24 12 24C15.259 24 15.668 23.986 16.948 23.928C21.302 23.728 23.73 21.31 23.927 16.948C23.986 15.668 24 15.259 24 12C24 8.741 23.986 8.333 23.928 7.053C23.732 2.699 21.311 0.273 16.949 0.073C15.668 0.014 15.259 0 12 0ZM12 5.838C8.597 5.838 5.838 8.597 5.838 12C5.838 15.403 8.597 18.163 12 18.163C15.403 18.163 18.162 15.404 18.162 12C18.162 8.597 15.403 5.838 12 5.838ZM12 16C9.791 16 8 14.21 8 12C8 9.791 9.791 8 12 8C14.209 8 16 9.791 16 12C16 14.21 14.209 16 12 16ZM18.406 4.155C17.61 4.155 16.965 4.8 16.965 5.595C16.965 6.39 17.61 7.035 18.406 7.035C19.201 7.035 19.845 6.39 19.845 5.595C19.845 4.8 19.201 4.155 18.406 4.155Z"
+        fill={fill}
       />
-    </Svg>
+    </StyledSvg>
   );
 }
diff --git a/components/icons/search.tsx b/components/icons/search.tsx
index a6a270f..3263440 100644
--- a/components/icons/search.tsx
+++ b/components/icons/search.tsx
@@ -6,14 +6,13 @@ const StyledSvg = cssInterop(Svg, {
 });
 
 interface SearchIconProps {
-  width?: number;
-  height?: number;
+  size?: number;
   className?: string;
 }
 
-export default function SearchIcon({ width = 24, height = 24, className = 'text-[#17171B]' }: SearchIconProps) {
+export default function SearchIcon({ size = 24, className = 'text-[#17171B]' }: SearchIconProps) {
   return (
-    <StyledSvg width={width} height={height} viewBox="0 0 24 24" fill="none" className={className}>
+    <StyledSvg width={size} height={size} viewBox="0 0 24 24" fill="none" className={className}>
       <Path
         fillRule="evenodd"
         clipRule="evenodd"