diff --git a/src/app/new-match/new-match-client.tsx b/src/app/new-match/new-match-client.tsx
index 01eaf22..1b5d835 100644
--- a/src/app/new-match/new-match-client.tsx
+++ b/src/app/new-match/new-match-client.tsx
@@ -520,60 +520,75 @@ export default function NewMatchClient() {
     return (
       <>
         <PageBackground />
-        <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} />
+        <main
+          style={{
+            paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 16 + bottom}px`,
+            paddingTop: `${Math.max(12, top + 4)}px`,
+          }}
+          className="-mx-[17px] flex h-dvh flex-col overflow-hidden px-4 text-center"
+        >
+          <div className="shrink-0">
+            <PageHeader profile={profile} />
+          </div>
 
-          <div className="flex flex-1 flex-col justify-between gap-4 pt-2">
+          <div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain flex flex-col justify-between">
             {/* Header Section Skeleton */}
-            <section className="flex flex-col items-center">
+            <section className="flex flex-col items-center mt-3.5 sm:mt-5 shrink-0">
               <LoadingSkeleton className="h-[60px] w-[60px] rounded-full" />
-              <LoadingSkeleton className="h-6 w-[220px] mt-3" />
+              <LoadingSkeleton className="h-6 w-[220px] mt-2.5 sm:mt-3" />
               <LoadingSkeleton className="h-4 w-[280px] mt-2" />
               <LoadingSkeleton className="h-4 w-[240px] mt-1" />
             </section>
 
-            {/* 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>
-
-              {/* Button skeleton */}
-              <LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
-            </section>
+            <div className="flex flex-col justify-between shrink-0">
+              {/* Match Card Skeleton */}
+              <section className="mt-4 sm:mt-6 rounded-[15px] border border-white/80 bg-white px-[17px] pt-[16px] pb-[16px] shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center">
+                {/* Name line */}
+                <LoadingSkeleton className="h-5 w-[140px]" />
 
-            {/* 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]" />
+                {/* Subtitle / Details lines */}
+                <div className="mt-2 w-full flex flex-col items-center gap-2 min-h-[40px]">
+                  <LoadingSkeleton className="h-3 w-[180px]" />
+                  <LoadingSkeleton className="h-3 w-[150px]" />
                 </div>
 
-                <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" />
+                {/* Button skeleton */}
+                <LoadingSkeleton className="mt-3 sm:mt-3.5 h-[40px] w-full rounded-[10px]" />
+              </section>
+
+              {/* Advisor Card Skeleton */}
+              <section className="mt-4 sm:mt-6">
+                <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>
                 </div>
-              </div>
-            </section>
+              </section>
+            </div>
           </div>
         </main>
       </>
     );
   }
+
+  const pairedPersonalFields = [
+    matchDisplay.age,
+    matchDisplay.residence,
+  ].filter((field): field is DisplayField => Boolean(field));
+
   const pairedEduFields = [
     matchDisplay.educationLevel,
     matchDisplay.fieldOfStudy,
@@ -602,11 +617,19 @@ export default function NewMatchClient() {
     <>
       <PageBackground />
 
-      <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} />
+      <main
+        style={{
+          paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 16 + bottom}px`,
+          paddingTop: `${Math.max(12, top + 4)}px`,
+        }}
+        className="-mx-[17px] flex h-dvh flex-col overflow-hidden px-4 text-center"
+      >
+        <div className="shrink-0">
+          <PageHeader profile={profile} />
+        </div>
 
-        <div className="flex flex-1 flex-col justify-between gap-4 pt-2">
-          <section className="flex flex-col items-center">
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain flex flex-col justify-between">
+          <section className="flex flex-col items-center mt-3.5 sm:mt-5 shrink-0">
             <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)]"
@@ -618,118 +641,129 @@ export default function NewMatchClient() {
                 alt="notification"
               />
             </div>
-            <h1 className="mt-3 text-center text-[20px] font-bold leading-[1.25] text-[#1A1A1A]">
+            <h2 className="text-[22px] font-bold mt-2.5 sm:mt-3">
               {matchHeadingTitle}
-            </h1>
-            <p className="mt-2 max-w-[315px] text-center text-[12px] leading-[1.35] font-semibold text-[#7C7C7C]">
+            </h2>
+            <p className="mt-2 max-w-[322px] text-[12px] leading-[1.35] font-semibold text-[#7C7C7C]">
               {matchHeadingDescription}
             </p>
           </section>
 
-          {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]" />
+          <div className="flex flex-col justify-between shrink-0">
+            {isLoading ? (
+              <section className="mt-4 sm:mt-6 rounded-[15px] border border-white/80 bg-white px-[17px] pt-[16px] pb-[16px] 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-2 w-full flex flex-col items-center gap-2 min-h-[40px]">
+                    <LoadingSkeleton className="h-3 w-[180px]" />
+                    <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]" />
+                  {/* Button skeleton */}
+                  <LoadingSkeleton className="mt-3 sm:mt-3.5 h-[40px] w-full rounded-[10px]" />
                 </div>
-
-                {/* 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}:{" "}
+              </section>
+            ) : (
+              <section className="mt-4 sm:mt-6 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-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-1.5 min-h-[40px] space-y-0.5 text-left">
+                      {pairedPersonalFields.length ? (
+                        <p className="break-words text-[11px] leading-[1.65] font-medium text-white">
+                          {pairedPersonalFields.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>
                             </span>
-                            <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>
+                          ))}
+                        </p>
+                      ) : 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>
+                            </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-[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}
-          />
+                    <button
+                      type="button"
+                      onClick={() => {
+                        if (isMale && !hasActiveSub) {
+                          setIsPaymentSheetOpen(true);
+                        } else {
+                          openProfile();
+                        }
+                      }}
+                      className="mt-3 sm:mt-3.5 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-4 sm:mt-6"
+                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>
         </div>
       </main>