diff --git a/src/pages/cart/components/CartDesktopLayout.tsx b/src/pages/cart/components/CartDesktopLayout.tsx
index c17e29c..a1f9806 100644
--- a/src/pages/cart/components/CartDesktopLayout.tsx
+++ b/src/pages/cart/components/CartDesktopLayout.tsx
@@ -15,7 +15,7 @@ import { selectCart } from "features/order/orderSlice.ts";
 import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
 import CouponCard from "pages/cart/components/CouponCard.tsx";
 import RewardWaiterCard from "pages/cart/components/RewardWaiterCard.tsx";
-import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
+import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequestCard.tsx";
 import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
 import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx";
 import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
diff --git a/src/pages/cart/components/CartMobileTabletLayout.tsx b/src/pages/cart/components/CartMobileTabletLayout.tsx
index f806992..0a3727c 100644
--- a/src/pages/cart/components/CartMobileTabletLayout.tsx
+++ b/src/pages/cart/components/CartMobileTabletLayout.tsx
@@ -21,7 +21,7 @@ import OrderSummary from "components/OrderSummary/OrderSummary.tsx";
 import { useAppSelector } from "redux/hooks.ts";
 
 import { useTranslation } from "react-i18next";
-import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
+import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequestCard.tsx";
 import useBreakPoint from "hooks/useBreakPoint.ts";
 import CouponCard from "pages/cart/components/CouponCard.tsx";
 import RewardWaiterCard from "pages/cart/components/RewardWaiterCard.tsx";
diff --git a/src/components/CustomBottomSheet/SpecialRequestBottomSheet.tsx b/src/pages/cart/components/specialRequest/BottomSheet.tsx
similarity index 92%
rename from src/components/CustomBottomSheet/SpecialRequestBottomSheet.tsx
rename to src/pages/cart/components/specialRequest/BottomSheet.tsx
index 72bb065..8d155d0 100644
--- a/src/components/CustomBottomSheet/SpecialRequestBottomSheet.tsx
+++ b/src/pages/cart/components/specialRequest/BottomSheet.tsx
@@ -1,7 +1,7 @@
 import { Button, Input } from "antd";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
 
 const { TextArea } = Input;
 
@@ -12,7 +12,7 @@ interface SpecialRequestBottomSheetProps {
   onSave: (value: string) => void;
 }
 
-export function SpecialRequestBottomSheet({
+export function BottomSheet({
   isOpen,
   onClose,
   initialValue,
diff --git a/src/components/CustomBottomSheet/SpecialRequestDialog.tsx b/src/pages/cart/components/specialRequest/Dialog.tsx
similarity index 97%
rename from src/components/CustomBottomSheet/SpecialRequestDialog.tsx
rename to src/pages/cart/components/specialRequest/Dialog.tsx
index 95f12e6..fc14cb8 100644
--- a/src/components/CustomBottomSheet/SpecialRequestDialog.tsx
+++ b/src/pages/cart/components/specialRequest/Dialog.tsx
@@ -11,7 +11,7 @@ interface SpecialRequestDialogProps {
   onSave: (value: string) => void;
 }
 
-export function SpecialRequestDialog({
+export function Dialog({
   isOpen,
   onClose,
   initialValue,
diff --git a/src/pages/cart/components/specialRequest/SpecialRequestCard.module.css b/src/pages/cart/components/specialRequest/SpecialRequestCard.module.css
new file mode 100644
index 0000000..4411ef5
--- /dev/null
+++ b/src/pages/cart/components/specialRequest/SpecialRequestCard.module.css
@@ -0,0 +1,9 @@
+.inputField {
+  height: 50px;
+}
+
+.editButton {
+  color: var(--primary, #FFB700);
+  font-size: 14px;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/pages/cart/components/SpecialRequestCard.tsx b/src/pages/cart/components/specialRequest/SpecialRequestCard.tsx
similarity index 79%
rename from src/pages/cart/components/SpecialRequestCard.tsx
rename to src/pages/cart/components/specialRequest/SpecialRequestCard.tsx
index a76e856..b5cf388 100644
--- a/src/pages/cart/components/SpecialRequestCard.tsx
+++ b/src/pages/cart/components/specialRequest/SpecialRequestCard.tsx
@@ -3,12 +3,12 @@ import { message, Input } from "antd";
 import { useTranslation } from "react-i18next";
 import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
-import { colors } from "ThemeConstants.ts";
 import { RightOutlined } from "@ant-design/icons";
-import { SpecialRequestBottomSheet } from "components/CustomBottomSheet/SpecialRequestBottomSheet.tsx";
+import { BottomSheet } from "pages/cart/components/specialRequest/BottomSheet.tsx";
 import { useState } from "react";
 import useBreakPoint from "hooks/useBreakPoint.ts";
-import { SpecialRequestDialog } from "components/CustomBottomSheet/SpecialRequestDialog.tsx";
+import { Dialog } from "pages/cart/components/specialRequest/Dialog.tsx";
+import styles from "./SpecialRequestCard.module.css";
 
 export default function SpecialRequestCard() {
   const { t } = useTranslation();
@@ -34,14 +34,10 @@ export default function SpecialRequestCard() {
           placeholder={t("cart.specialRequest")}
           size="large"
           autoFocus={false}
-          style={{ height: 50 }}
+          className={styles.inputField}
           suffix={
             <div
-              style={{
-                color: colors.primary,
-                fontSize: 14,
-                cursor: "pointer",
-              }}
+              className={styles.editButton}
               onClick={() => setIsSpecialRequestOpen(true)}
             >
               <u>{t("cart.editNote")}</u> <RightOutlined />
@@ -50,14 +46,14 @@ export default function SpecialRequestCard() {
         />
       </ProInputCard>
       {isDesktop ? (
-        <SpecialRequestDialog
+        <Dialog
           isOpen={isSpecialRequestOpen}
           onClose={handleSpecialRequestClose}
           initialValue={specialRequest}
           onSave={handleSpecialRequestSave}
         />
       ) : (
-        <SpecialRequestBottomSheet
+        <BottomSheet
           isOpen={isSpecialRequestOpen}
           onClose={handleSpecialRequestClose}
           initialValue={specialRequest}
diff --git a/src/pages/product/components/ProductFooter.tsx b/src/pages/product/components/ProductFooter.tsx
index 5afd67b..b19cd30 100644
--- a/src/pages/product/components/ProductFooter.tsx
+++ b/src/pages/product/components/ProductFooter.tsx
@@ -1,6 +1,6 @@
 import { ShoppingCartOutlined } from "@ant-design/icons";
 import { Button, Grid, message, Row } from "antd";
-import { SpecialRequestBottomSheet } from "components/CustomBottomSheet/SpecialRequestBottomSheet";
+import { BottomSheet } from "pages/cart/components/specialRequest/BottomSheet.tsx";
 import {
   addItem,
   selectCart,
@@ -59,7 +59,7 @@ export default function ProductFooter({
             extrasgroup: selectedGroups,
           },
           quantity: quantity,
-        })
+        }),
       );
       // Navigate back to menu - scroll position will be restored automatically
       window.history.back();
@@ -132,7 +132,7 @@ export default function ProductFooter({
         </div>
       </Row>
 
-      <SpecialRequestBottomSheet
+      <BottomSheet
         isOpen={isSpecialRequestOpen}
         onClose={handleSpecialRequestClose}
         initialValue={specialRequest}