diff --git a/src/app/new-match/new-match-client.tsx b/src/app/new-match/new-match-client.tsx
index de34131..01eaf22 100644
--- a/src/app/new-match/new-match-client.tsx
+++ b/src/app/new-match/new-match-client.tsx
@@ -520,63 +520,55 @@ export default function NewMatchClient() {
     return (
       <>
         <PageBackground />
-        <main
-          style={{
-            paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 16}px`,
-            paddingTop: `${Math.max(12, top + 4)}px`,
-          }}
-          className="-mx-[17px] flex h-full min-h-full flex-col justify-between overflow-hidden text-center px-4"
-        >
-          <PageHeader profile={profile} />
+        <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))] text-center">
+          <PageHeader className="-mx-[6px]" profile={profile} />
 
-          <div className="flex flex-1 flex-col justify-between">
+          <div className="flex flex-1 flex-col justify-between gap-4 pt-2">
             {/* Header Section Skeleton */}
-            <section className="flex flex-col items-center mt-9">
+            <section className="flex flex-col items-center">
               <LoadingSkeleton className="h-[60px] w-[60px] rounded-full" />
-              <LoadingSkeleton className="h-6 w-[220px] mt-4" />
-              <LoadingSkeleton className="h-4 w-[280px] mt-3" />
-              <LoadingSkeleton className="h-4 w-[240px] mt-1.5" />
+              <LoadingSkeleton className="h-6 w-[220px] mt-3" />
+              <LoadingSkeleton className="h-4 w-[280px] mt-2" />
+              <LoadingSkeleton className="h-4 w-[240px] mt-1" />
             </section>
 
-            <div className="flex flex-col justify-between">
-              {/* Match Card Skeleton */}
-              <section className="mt-[36px] rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center">
-                {/* Name line */}
-                <LoadingSkeleton className="h-5 w-[140px]" />
+            {/* Match Card Skeleton */}
+            <section className="rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center">
+              {/* Name line */}
+              <LoadingSkeleton className="h-5 w-[140px]" />
 
-                {/* Subtitle / Details lines */}
-                <div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
-                  <LoadingSkeleton className="h-3 w-[180px]" />
-                  <LoadingSkeleton className="h-3 w-[120px]" />
-                  <LoadingSkeleton className="h-3 w-[150px]" />
-                </div>
+              {/* Subtitle / Details lines */}
+              <div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
+                <LoadingSkeleton className="h-3 w-[180px]" />
+                <LoadingSkeleton className="h-3 w-[120px]" />
+                <LoadingSkeleton className="h-3 w-[150px]" />
+              </div>
 
-                {/* Button skeleton */}
-                <LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
-              </section>
-
-              {/* Advisor Card Skeleton */}
-              <section className="mt-[36px]">
-                <div className="rounded-[13px] border border-white/80 bg-white px-3 py-3.5 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
-                  <LoadingSkeleton className="h-[16px] w-[140px]" />
-                  <div className="mt-2 space-y-1">
-                    <LoadingSkeleton className="h-[10px] w-[260px]" />
-                    <LoadingSkeleton className="h-[10px] w-[180px]" />
-                  </div>
+              {/* Button skeleton */}
+              <LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
+            </section>
 
-                  <div className="mt-4 flex items-center justify-between gap-3">
-                    <div className="flex items-center pl-1">
-                      <LoadingSkeleton className="h-[30px] w-[30px] rounded-full border-2 border-white" />
-                      <LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
-                      <LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
-                      <LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
-                    </div>
+            {/* Advisor Card Skeleton */}
+            <section>
+              <div className="rounded-[13px] border border-white/80 bg-white px-3 py-3.5 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
+                <LoadingSkeleton className="h-[16px] w-[140px]" />
+                <div className="mt-2 space-y-1">
+                  <LoadingSkeleton className="h-[10px] w-[260px]" />
+                  <LoadingSkeleton className="h-[10px] w-[180px]" />
+                </div>
 
-                    <LoadingSkeleton className="h-[38px] w-[120px] rounded-[9px]" />
+                <div className="mt-4 flex items-center justify-between gap-3">
+                  <div className="flex items-center pl-1">
+                    <LoadingSkeleton className="h-[30px] w-[30px] rounded-full border-2 border-white" />
+                    <LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
+                    <LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
+                    <LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
                   </div>
+
+                  <LoadingSkeleton className="h-[38px] w-[120px] rounded-[9px]" />
                 </div>
-              </section>
-            </div>
+              </div>
+            </section>
           </div>
         </main>
       </>
@@ -610,17 +602,11 @@ export default function NewMatchClient() {
     <>
       <PageBackground />
 
-      <main
-        style={{
-          paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 16}px`,
-          paddingTop: `${Math.max(12, top + 4)}px`,
-        }}
-        className="-mx-[17px] flex h-full min-h-full flex-col justify-between overflow-hidden text-center px-4"
-      >
-        <PageHeader profile={profile} />
-
-        <div className="flex flex-1 flex-col justify-between">
-          <section className="flex flex-col items-center mt-9">
+      <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))] text-center">
+        <PageHeader className="-mx-[6px]" profile={profile} />
+
+        <div className="flex flex-1 flex-col justify-between gap-4 pt-2">
+          <section className="flex flex-col items-center">
             <div
               aria-hidden="true"
               className="relative flex h-[60px] w-[60px] items-center justify-center rounded-full bg-[#FF4E67] shadow-[0_12px_28px_rgba(240,68,91,0.22)]"
@@ -632,122 +618,118 @@ export default function NewMatchClient() {
                 alt="notification"
               />
             </div>
-            <h2 className="text-[22px] font-bold mt-3.5">
+            <h1 className="mt-3 text-center text-[20px] font-bold leading-[1.25] text-[#1A1A1A]">
               {matchHeadingTitle}
-            </h2>
-            <p className="mt-[11px] max-w-[322px] text-[12px] leading-[1.35] font-semibold text-[#7C7C7C]">
+            </h1>
+            <p className="mt-2 max-w-[315px] text-center text-[12px] leading-[1.35] font-semibold text-[#7C7C7C]">
               {matchHeadingDescription}
             </p>
           </section>
 
-          <div className="flex flex-col justify-between">
-            {isLoading ? (
-              <section className="mt-[36px] rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)]">
-                <div className="flex flex-col items-center py-2">
-                  {/* Name line */}
-                  <LoadingSkeleton className="h-5 w-[140px]" />
-
-                  {/* Subtitle / Details lines */}
-                  <div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
-                    <LoadingSkeleton className="h-3 w-[180px]" />
-                    <LoadingSkeleton className="h-3 w-[120px]" />
-                    <LoadingSkeleton className="h-3 w-[150px]" />
-                  </div>
+          {isLoading ? (
+            <section className="rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)]">
+              <div className="flex flex-col items-center py-2">
+                {/* Name line */}
+                <LoadingSkeleton className="h-5 w-[140px]" />
 
-                  {/* Button skeleton */}
-                  <LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
+                {/* Subtitle / Details lines */}
+                <div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
+                  <LoadingSkeleton className="h-3 w-[180px]" />
+                  <LoadingSkeleton className="h-3 w-[120px]" />
+                  <LoadingSkeleton className="h-3 w-[150px]" />
                 </div>
-              </section>
-            ) : (
-              <section className="mt-[36px] rounded-[15px] bg-[linear-gradient(180deg,#F0445B_0%,#F4556E_100%)] px-[17px] pt-[18px] pb-[17px] text-white shadow-[0_18px_38px_rgba(240,68,91,0.25)]">
-                {isError ? (
-                  <p className="py-8 text-[13px] font-semibold">
-                    Unable to load match summary.
-                  </p>
-                ) : matchSummary ? (
-                  <>
-                    <h2 className="break-words text-[14px] leading-[1.4] font-bold">
-                      <span>{matchDisplay.name}</span>
-                    </h2>
-
-                    <div className="mt-[6px] min-h-[48px] space-y-0.5 text-left">
-                      {matchDisplay.age ? (
-                        <FieldLine field={matchDisplay.age} />
-                      ) : null}
-
-                      {matchDisplay.residence ? (
-                        <FieldLine field={matchDisplay.residence} />
-                      ) : null}
-
-                      {pairedEduFields.length ? (
-                        <p className="break-words text-[11px] leading-[1.65] font-medium text-white">
-                          {pairedEduFields.map((field, index) => (
-                            <span key={field.id}>
-                              {index > 0 ? (
-                                <span className="opacity-75"> | </span>
-                              ) : null}
-                              <span className="font-semibold">
-                                {field.label}:{" "}
-                              </span>
-                              <span>{field.value}</span>
+
+                {/* Button skeleton */}
+                <LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
+              </div>
+            </section>
+          ) : (
+            <section className="rounded-[15px] bg-[linear-gradient(180deg,#F0445B_0%,#F4556E_100%)] px-[17px] pt-[16px] pb-[16px] text-white shadow-[0_18px_38px_rgba(240,68,91,0.25)]">
+              {isError ? (
+                <p className="py-6 text-[13px] font-semibold">
+                  Unable to load match summary.
+                </p>
+              ) : matchSummary ? (
+                <>
+                  <h2 className="break-words text-[14px] leading-[1.4] font-bold">
+                    <span>{matchDisplay.name}</span>
+                  </h2>
+
+                  <div className="mt-[6px] min-h-[44px] space-y-0.5 text-left">
+                    {matchDisplay.age ? (
+                      <FieldLine field={matchDisplay.age} />
+                    ) : null}
+
+                    {matchDisplay.residence ? (
+                      <FieldLine field={matchDisplay.residence} />
+                    ) : null}
+
+                    {pairedEduFields.length ? (
+                      <p className="break-words text-[11px] leading-[1.65] font-medium text-white">
+                        {pairedEduFields.map((field, index) => (
+                          <span key={field.id}>
+                            {index > 0 ? (
+                              <span className="opacity-75"> | </span>
+                            ) : null}
+                            <span className="font-semibold">
+                              {field.label}:{" "}
                             </span>
-                          ))}
-                        </p>
-                      ) : null}
-
-                      {matchDisplay.job ? (
-                        <FieldLine field={matchDisplay.job} />
-                      ) : null}
-
-                      {matchDisplay.hobbies ? (
-                        <FieldLine field={matchDisplay.hobbies} />
-                      ) : null}
-
-                      {matchDisplay.maritalStatus ? (
-                        <FieldLine field={matchDisplay.maritalStatus} />
-                      ) : null}
-                      {matchDisplay.cityPreference ? (
-                        <FieldLine field={matchDisplay.cityPreference} />
-                      ) : null}
-                    </div>
+                            <span>{field.value}</span>
+                          </span>
+                        ))}
+                      </p>
+                    ) : null}
+
+                    {matchDisplay.job ? (
+                      <FieldLine field={matchDisplay.job} />
+                    ) : null}
+
+                    {matchDisplay.hobbies ? (
+                      <FieldLine field={matchDisplay.hobbies} />
+                    ) : null}
+
+                    {matchDisplay.maritalStatus ? (
+                      <FieldLine field={matchDisplay.maritalStatus} />
+                    ) : null}
+                    {matchDisplay.cityPreference ? (
+                      <FieldLine field={matchDisplay.cityPreference} />
+                    ) : null}
+                  </div>
 
-                    <button
-                      type="button"
-                      onClick={() => {
-                        if (isMale && !hasActiveSub) {
-                          setIsPaymentSheetOpen(true);
-                        } else {
-                          openProfile();
-                        }
-                      }}
-                      className="mt-[15px] inline-flex w-full items-center justify-center rounded-[10px] border-none bg-white h-[40px] text-[16px] font-semibold text-[#F0445B] no-underline shadow-none hover:bg-white/95 transition-colors cursor-pointer"
-                    >
-                      {t["View more details"]}
-                    </button>
-                  </>
-                ) : (
-                  <p className="py-8 text-[13px] font-semibold">
-                    No match summary is available yet.
-                  </p>
-                )}
-              </section>
-            )}
-            <div className="w-full space-y-3">
-              <AdvisorActionsCard
-                className="mt-[36px]"
-                title={t["Get an advisor"]}
-                description={
-                  t[
-                    "Not sure what to do next? Our psychology section is here to guide you at every step."
-                  ]
-                }
-                avatars={advisorAvatars}
-                extraCount={7}
-                getAdvisorLabel={t["Get Advisor"]}
-                onGetAdvisor={openAdvisors}
-              />
-            </div>
-          </div>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (isMale && !hasActiveSub) {
+                        setIsPaymentSheetOpen(true);
+                      } else {
+                        openProfile();
+                      }
+                    }}
+                    className="mt-[14px] inline-flex w-full items-center justify-center rounded-[10px] border-none bg-white h-[40px] text-[16px] font-semibold text-[#F0445B] no-underline shadow-none hover:bg-white/95 transition-colors cursor-pointer"
+                  >
+                    {t["View more details"]}
+                  </button>
+                </>
+              ) : (
+                <p className="py-6 text-[13px] font-semibold">
+                  No match summary is available yet.
+                </p>
+              )}
+            </section>
+          )}
+
+          <AdvisorActionsCard
+            title={t["Get an advisor"]}
+            description={
+              t[
+                "Not sure what to do next? Our psychology section is here to guide you at every step."
+              ]
+            }
+            avatars={advisorAvatars}
+            extraCount={7}
+            getAdvisorLabel={t["Get Advisor"]}
+            onGetAdvisor={openAdvisors}
+          />
         </div>
       </main>