diff --git a/frontend/src/app/(public)/invite/[slug]/page.tsx b/frontend/src/app/(public)/invite/[slug]/page.tsx
index 86251cf..288175f 100644
--- a/frontend/src/app/(public)/invite/[slug]/page.tsx
+++ b/frontend/src/app/(public)/invite/[slug]/page.tsx
@@ -252,61 +252,27 @@ const InvitationPage = () => {
         )}
         {/* Gift Registry with Lion */}
         {event.gift_registry_enabled && (
-          <div className="mb-10 flex flex-col items-center md:flex-row md:items-center md:space-x-6">
-            <div>
-              <div
-                className="flex h-24 w-24 items-center justify-center rounded-full border-2 md:h-28 md:w-28"
-                style={{ borderColor: colors.accent3 }}
-              >
-                {getAssetUrl("lion") ? (
-                  <div className="relative h-20 w-20 md:h-24 md:w-24">
-                    <Image
-                      src={getAssetUrl("lion") || ""}
-                      alt="Lion"
-                      fill
-                      className="object-contain"
-                    />
-                  </div>
-                ) : (
-                  <p className="text-center text-sm">Lion</p>
-                )}
-              </div>
-            </div>
-            <Card
-              className="mt-4 flex-1 p-6 md:mt-0"
-              style={{
-                backgroundColor: "rgba(240, 233, 214, 0.7)",
-                borderColor: colors.accent3,
-                boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
-              }}
-            >
-              <h3
-                className="mb-2 text-center text-2xl font-bold md:text-left"
-                style={headingStyle}
-              >
-                Gift Registry
-              </h3>
-              <p
-                style={{ color: colors.text }}
-                className="text-center md:text-left"
-              >
-                View Emma's Wishes
-              </p>
-              <div className="mt-4 text-center md:text-left">
-                <Link href={`/gifts/${event.slug}`}>
-                  <Button
-                    className="rounded-full"
-                    style={{
-                      backgroundColor: colors.accent3,
-                      color: "white",
-                    }}
-                  >
-                    View Gifts
-                  </Button>
-                </Link>
-              </div>
-            </Card>
-          </div>
+          <InfoCard
+            imageSrc={getAssetUrl("lion")}
+            imageAlt="Lion"
+            imagePosition="right"
+            borderColor={colors.accent3}
+            backgroundColor="rgba(240, 233, 214, 0.7)"
+            boxShadow="0 2px 4px rgba(0, 0, 0, 0.05)"
+            headingText="Gift Registry"
+            headingStyle={{
+              fontFamily: eventTheme?.fonts?.heading || "sans-serif",
+              color: colors.text,
+            }}
+            bodyText="View Emma's Wishes"
+            bodyTextColor={colors.text}
+            buttonProps={{
+              text: "View Gifts",
+              href: `/gifts/${event.slug}`,
+              backgroundColor: colors.accent3,
+              textColor: "#ffffff",
+            }}
+          />
         )}
         {/* View Map Button */}
         {event.location_url && (
diff --git a/frontend/src/components/info-card.tsx b/frontend/src/components/info-card.tsx
index af74b42..3b204c0 100644
--- a/frontend/src/components/info-card.tsx
+++ b/frontend/src/components/info-card.tsx
@@ -75,12 +75,13 @@ const InfoCard: React.FC<InfoCardProps> = ({
         imagePosition === "right"
           ? "md:flex-row-reverse md:space-x-reverse"
           : "md:flex-row",
+        "w-full",
       )}
     >
       {imageElement}
 
       <Card
-        className="flex-1 relative overflow-hidden p-6"
+        className="flex-1 relative overflow-hidden p-6 w-full"
         style={{ backgroundColor, borderColor, boxShadow }}
       >
         {imageSrc && (