diff --git a/src/components/OrderSummary/OrderSummary.tsx b/src/components/OrderSummary/OrderSummary.tsx
index baa55ec..b9364b2 100644
--- a/src/components/OrderSummary/OrderSummary.tsx
+++ b/src/components/OrderSummary/OrderSummary.tsx
@@ -18,6 +18,7 @@ import { useAppDispatch, useAppSelector } from "redux/hooks";
 import ProText from "../ProText";
 import ProTitle from "../ProTitle";
 import styles from "./OrderSummary.module.css";
+import { CSSProperties } from "react";
 
 export default function OrderSummary() {
   const { t } = useTranslation();
@@ -38,6 +39,15 @@ export default function OrderSummary() {
       (restaurant?.customer_loyalty_points ?? 0) <=
     0;
 
+  const titlesStyle: CSSProperties = {
+    fontWeight: 400,
+    fontStyle: "Regular",
+    fontSize: 16,
+    lineHeight: "140%",
+    letterSpacing: "0%",
+    textAlign: "center",
+  };
+
   return (
     <>
       <Card className={`${styles.orderSummary}`}>
@@ -45,37 +55,67 @@ export default function OrderSummary() {
         <Divider style={{ margin: "15px 0 15px 0" }} />
         <Space orientation="vertical" style={{ width: "100%" }}>
           <div className={styles.summaryRow}>
-            <ProText type="secondary">{t("cart.basketTotal")}</ProText>
-            <ArabicPrice price={subtotal} />
+            <ProText type="secondary" style={titlesStyle}>
+              {t("cart.basketTotal")}
+            </ProText>
+            <ArabicPrice price={subtotal} style={titlesStyle} />
           </div>
           {orderType === OrderType.Delivery && (
             <div className={styles.summaryRow}>
-              <ProText type="secondary">{t("cart.deliveryFee")}</ProText>
-              <ArabicPrice price={Number(restaurant?.delivery_fees || 0)} />
+              <ProText type="secondary" style={titlesStyle}>
+                {t("cart.deliveryFee")}
+              </ProText>
+              <ArabicPrice
+                price={Number(restaurant?.delivery_fees || 0)}
+                style={titlesStyle}
+              />
             </div>
           )}
           <div className={styles.summaryRow}>
-            <ProText type="secondary">{t("cart.discount")}</ProText>
-            <ArabicPrice price={discountAmount} />
+            <ProText type="secondary" style={titlesStyle}>
+              {t("cart.discount")}
+            </ProText>
+            <ArabicPrice price={discountAmount} style={titlesStyle} />
           </div>
           <div className={styles.summaryRow}>
-            <ProText type="secondary">{t("cart.tax")}</ProText>
-            <ArabicPrice price={taxAmount || 0} />
+            <ProText type="secondary" style={titlesStyle}>
+              {t("cart.tax")}
+            </ProText>
+            <ArabicPrice price={taxAmount || 0} style={titlesStyle} />
           </div>
           {splitBillAmount > 0 && (
             <div className={styles.summaryRow}>
-              <ProText type="secondary">
+              <ProText type="secondary" style={titlesStyle}>
                 {t("splitBill.splitBillAmount")}
               </ProText>
-              <ArabicPrice price={splitBillAmount} />
+              <ArabicPrice price={splitBillAmount} style={titlesStyle} />
             </div>
           )}
           <Divider className={styles.summaryDivider} />
           <div className={`${styles.summaryRow} ${styles.totalRow}`}>
-            <ProText strong type="secondary">
+            <ProText
+              style={{
+                fontWeight: 600,
+                fontStyle: "SemiBold",
+                fontSize: 18,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+              }}
+            >
               {t("cart.totalAmount")}
             </ProText>
-            <ArabicPrice price={grandTotal} />
+            <ArabicPrice
+              price={grandTotal}
+              style={{
+                fontWeight: 600,
+                fontStyle: "SemiBold",
+                fontSize: 18,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                textAlign: "center",
+              }}
+            />
           </div>
         </Space>
 
diff --git a/src/pages/checkout/components/Phone1Card.tsx b/src/pages/checkout/components/PhoneCard.tsx
similarity index 100%
rename from src/pages/checkout/components/Phone1Card.tsx
rename to src/pages/checkout/components/PhoneCard.tsx
diff --git a/src/pages/checkout/page.tsx b/src/pages/checkout/page.tsx
index 6844f65..8680a5e 100644
--- a/src/pages/checkout/page.tsx
+++ b/src/pages/checkout/page.tsx
@@ -15,7 +15,7 @@ import RewardWaiterCard from "pages/cart/components/RewardWaiterCard";
 import ProInputCard from "components/ProInputCard/ProInputCard";
 import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups";
 import CouponCard from "pages/cart/components/CouponCard";
-import PhoneCard from "./components/Phone1Card";
+import PhoneCard from "./components/PhoneCard";
 import BriefMenuCard from "./components/BriefMenuCard";
 
 export default function CheckoutPage() {
diff --git a/src/pages/pay/page.tsx b/src/pages/pay/page.tsx
index 1cc0120..5807b9d 100644
--- a/src/pages/pay/page.tsx
+++ b/src/pages/pay/page.tsx
@@ -7,7 +7,7 @@ import { selectCart } from "features/order/orderSlice";
 import { AddressSummary } from "pages/checkout/components/AddressSummary";
 import BriefMenu from "pages/checkout/components/BriefMenu";
 import { GiftCard } from "pages/checkout/components/GiftCard";
-import PhoneCard from "pages/checkout/components/Phone1Card";
+import PhoneCard from "pages/checkout/components/PhoneCard";
 import { OrderType } from "pages/checkout/hooks/types";
 import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks";