diff --git a/src/components/LoyaltyCard/LoyaltyCard.module.css b/src/components/LoyaltyCard/LoyaltyCard.module.css
index 248f0f7..c4e4038 100644
--- a/src/components/LoyaltyCard/LoyaltyCard.module.css
+++ b/src/components/LoyaltyCard/LoyaltyCard.module.css
@@ -36,9 +36,9 @@
   background-image: url(/empty-dish.png);
   background-size: cover;
   background-position: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
   border: none;
   margin-left: 0px;
 }
diff --git a/src/components/LoyaltyCard/LoyaltyCard.tsx b/src/components/LoyaltyCard/LoyaltyCard.tsx
index f5c3f30..5ac5f74 100644
--- a/src/components/LoyaltyCard/LoyaltyCard.tsx
+++ b/src/components/LoyaltyCard/LoyaltyCard.tsx
@@ -87,54 +87,41 @@ const LoyaltyCard = () => {
                 )}
               </ProText>
             </Col>
-            <Col>
-              {/* <PresentIcon /> */}
-            </Col>
+            <Col>{/* <PresentIcon /> */}</Col>
           </Row>
         )}
         {token && !isHasLoyaltyGift && (
-          <Row justify="space-between" align="middle">
-            <Col>
-              <div className={styles.presentIcon}>
-                <div style={{ display: "flex" }}>
-                  <Image
-                    className={styles.presentIconItem}
-                    preview={false}
-                    width={32}
-                    height={32}
-                    src={restaurant?.loyalty_stamp_image}
-                  />
-                  <ProText
-                    type="secondary"
-                    strong
-                    style={{
-                      fontSize: "1rem",
-                      fontWeight: 400,
-                      position: "relative",
-                      top: 3,
-                      margin: "0 2px",
-                    }}
-                  >
-                    x
-                    {(restaurant?.loyalty_stamps ?? 0) -
-                      (restaurant?.customer_loyalty_points ?? 0)}
-                  </ProText>{" "}
-                </div>
-              </div>
-            </Col>
-            {/* <Col>
-              <Button
-                style={{
-                  backgroundColor: colors.primary,
-                  color: "white",
-                  border: 0,
-                  height: 32,
-                }}
-              >
-                {t("menu.claim")}
-              </Button>
-            </Col> */}
-          </Row>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              gap: 10,
+              overflow: "auto",
+              scrollbarWidth: "none",
+            }}
+          >
+            {Array.from({ length: restaurant?.loyalty_stamps || 0 }).map(
+              (_, index) => {
+                const currentPoints = restaurant?.customer_loyalty_points || 0;
+                const isCollected = index < currentPoints;
+                return (
+                  <Col key={index}>
+                    <Image
+                      key={index}
+                      className={styles.presentIconItem}
+                      preview={false}
+                      width={40}
+                      height={40}
+                      src={restaurant?.loyalty_stamp_image}
+                      style={{
+                        opacity: isCollected ? 1 : 0.4,
+                      }}
+                    />
+                  </Col>
+                );
+              },
+            )}
+          </div>
         )}
       </Card>
     </div>