diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx
index 1d5fd9ec..7aa0eb84 100644
--- a/components/UI/navbar.tsx
+++ b/components/UI/navbar.tsx
@@ -85,6 +85,8 @@ const Navbar: FunctionComponent = () => {
 
   const connectWallet = async (connector: Connector) => {
     try {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       await connectAsync({ connector });
       localStorage.setItem("SID-connectedWallet", connector.id);
       localStorage.setItem("SID-lastUsedConnector", connector.id);
diff --git a/components/domains/registerV3.tsx b/components/domains/registerV3.tsx
index 7b81ea1e..d48c726f 100644
--- a/components/domains/registerV3.tsx
+++ b/components/domains/registerV3.tsx
@@ -55,30 +55,30 @@ const RegisterV3: FunctionComponent<RegisterV3Props> = ({
     }
   };
 
-  return (
+  return currentStep === 1 ? (
     <>
-      {currentStep > 1 ? (
-        <RegisterSteps
-          currentStep={currentStep}
-          setStep={goToStep}
-          showPfp={userNfts && userNfts.length > 0}
-          isLoading={isLoadingNfts}
+      <div className="sm:w-2/5 w-4/5 mt-5 mb-5">
+        <SearchBar
+          onChangeTypedValue={(typeValue: string) => setDomain(typeValue)}
+          showHistory={false}
         />
-      ) : (
-        <div className="sm:w-2/5 w-4/5 mt-5 mb-5">
-          <SearchBar
-            onChangeTypedValue={(typeValue: string) => setDomain(typeValue)}
-            showHistory={false}
-          />
-        </div>
-      )}
-      {currentStep === 1 && (
-        <UserInfoForm
-          type={FormType.REGISTER}
-          goToNextStep={goToNextStep}
-          imageUrl="/visuals/register.webp"
-        />
-      )}
+      </div>
+      <UserInfoForm
+        type={FormType.REGISTER}
+        goToNextStep={goToNextStep}
+        imageUrl="/visuals/register.webp"
+      />
+    </>
+  ) : (
+    <div
+      className="w-full flex flex-col justify-center gap-4 px-8 py-4 lg:px-32 md:px-16 sm:py-12 sm:flex-row"
+    >
+      <RegisterSteps
+        currentStep={currentStep}
+        setStep={goToStep}
+        showPfp={userNfts && userNfts.length > 0}
+        isLoading={isLoadingNfts}
+      />
       {currentStep === 2 && <SelectPfp goToNextStep={goToNextStep} />}
       {currentStep === 3 && (
         <CheckoutCard
@@ -86,7 +86,7 @@ const RegisterV3: FunctionComponent<RegisterV3Props> = ({
           discount={evergreenDiscounts.registration}
         />
       )}
-    </>
+    </div>
   );
 };
 
diff --git a/components/domains/steps/checkoutCard.tsx b/components/domains/steps/checkoutCard.tsx
index 308da890..d5bc9088 100644
--- a/components/domains/steps/checkoutCard.tsx
+++ b/components/domains/steps/checkoutCard.tsx
@@ -34,6 +34,7 @@ import { usePriceManagement } from "@/hooks/checkout/usePriceManagement";
 import { useCheckoutState } from "@/hooks/checkout/useCheckoutState";
 import { useRegisterTxPrep } from "@/hooks/checkout/useRegisterTxPrep";
 import { useRenewalTxPrep } from "@/hooks/checkout/useRenewalTxPrep";
+import CloseIcon from "@/components/UI/iconsComponents/icons/closeIcon";
 
 type CheckoutCardProps = {
   type: FormType;
@@ -237,17 +238,6 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
 
   return (
     <>
-      {formState.durationInYears === 1 ? (
-        <UpsellCard
-          upsellData={discount as Upsell}
-          enabled={formState.isUpselled}
-          onUpsellChoice={onUpsellChoice}
-          invalidBalance={invalidBalance}
-          hasUserSelectedOffer={hasUserSelectedOffer}
-          setHasUserSelectedOffer={setHasUserSelectedOffer}
-          loadingPrice={loadingPrice}
-        />
-      ) : null}
       {reducedDuration > 0 &&
         invalidBalance &&
         reducedDuration !== formState.durationInYears * 365 ? (
@@ -260,6 +250,17 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
       ) : null}
 
       <div className={styles.container}>
+        {formState.durationInYears === 1 ? (
+          <UpsellCard
+            upsellData={discount as Upsell}
+            enabled={formState.isUpselled}
+            onUpsellChoice={onUpsellChoice}
+            invalidBalance={invalidBalance}
+            hasUserSelectedOffer={hasUserSelectedOffer}
+            setHasUserSelectedOffer={setHasUserSelectedOffer}
+            loadingPrice={loadingPrice}
+          />
+        ) : null}
         <div className={styles.checkout}>
           <RegisterSummary
             priceInEth={
@@ -281,7 +282,7 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
             discountedPrice={discountedPrice}
             discountedPriceInEth={discountedPriceInEth}
           />
-          <Divider className="w-full" />
+          <Divider className={styles.divider} />
           <div className={styles.checkoutSummary}>
             <RegisterCheckboxes
               onChangeTermsBox={onChangeTermsBox}
@@ -297,27 +298,46 @@ const CheckoutCard: FunctionComponent<CheckoutCardProps> = ({
               displayedCurrency={displayedCurrency}
               maxPriceRange={maxPriceRange}
             />
-            <div>
-              <Button
-                onClick={() =>
-                  execute().then(() => {
-                    setDomainsMinting(formState.selectedDomains);
-                  })
-                }
-                disabled={
-                  domainsMinting === formState.selectedDomains ||
-                  !account ||
-                  !formState.durationInYears ||
-                  formState.durationInYears < 1 ||
-                  invalidBalance ||
-                  !termsBox
-                }
+            <div className={styles.checkoutButton}>
+              <div
+                className={(!termsBox || invalidBalance) ? "flex flex-col-reverse gap-4" : "flex gap-4"}
               >
-                {getButtonText()}
-              </Button>
+                <div className="flex sm:hidden">
+                  <Button
+                    variation="white"
+                    onClick={() => router.push("/")}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+                <Button
+                  onClick={() =>
+                    execute().then(() => {
+                      setDomainsMinting(formState.selectedDomains);
+                    })
+                  }
+                  disabled={
+                    domainsMinting === formState.selectedDomains ||
+                    !account ||
+                    !formState.durationInYears ||
+                    formState.durationInYears < 1 ||
+                    invalidBalance ||
+                    !termsBox
+                  }
+                >
+                  {getButtonText()}
+                </Button>
+              </div>
             </div>
           </div>
         </div>
+        <div className="absolute right-0 top-0 w-5 h-5">
+          <button
+            onClick={() => router.push("/")}
+          >
+            <CloseIcon />
+          </button>
+        </div>
       </div>
       <Notification
         visible={currencyError}
diff --git a/components/domains/steps/registerSteps.tsx b/components/domains/steps/registerSteps.tsx
index 40295a13..975a6eaf 100644
--- a/components/domains/steps/registerSteps.tsx
+++ b/components/domains/steps/registerSteps.tsx
@@ -1,10 +1,12 @@
 import React, { FunctionComponent } from "react";
+import Image from "next/image";
 import styles from "../../../styles/components/registerV3.module.css";
 import ContactCardIcon from "@/components/UI/iconsComponents/icons/contactCardIcon";
 import PfpIcon from "@/components/UI/iconsComponents/icons/pfpIcon";
 import CartIcon from "@/components/UI/iconsComponents/icons/cartIcon";
 import theme from "@/styles/theme";
 import { Skeleton } from "@mui/material";
+import DoneFilledIcon from "@/components/UI/iconsComponents/icons/doneFilledIcon";
 
 type registerStepsProps = {
   currentStep: number;
@@ -31,6 +33,13 @@ const RegisterSteps: FunctionComponent<registerStepsProps> = ({
     </div>
   ) : (
     <div className={styles.stepsContainer}>
+      <div className={styles.stepsBackground}>
+        <Image
+          src="/register/grass.png"
+          alt="grass"
+          fill
+        />
+      </div>
       <div className={styles.progressSteps}>
         <div
           className={`${styles.progressStep} ${
@@ -38,21 +47,23 @@ const RegisterSteps: FunctionComponent<registerStepsProps> = ({
           }`}
           onClick={() => setStep(1)}
         >
-          <ContactCardIcon
-            width="30"
-            color={
-              currentStep >= 1
-                ? theme.palette.primary.main
-                : theme.palette.secondary.main
-            }
+          <div className={styles.progressStepName}>
+            <ContactCardIcon
+              width="30"
+              color={
+                currentStep >= 1
+                  ? theme.palette.primary.main
+                  : theme.palette.secondary.main
+              }
+            />
+            <p>Domain</p>
+          </div>
+          <DoneFilledIcon
+            width="12"
+            color={theme.palette.primary.light}
+            secondColor={theme.palette.primary.main}
           />
-          <p>Domain</p>
         </div>
-        <div
-          className={`${styles.progressLine} ${
-            currentStep >= 2 ? styles.primaryBg : ""
-          }`}
-        />
         {showPfp ? (
           <>
             <div
@@ -61,44 +72,55 @@ const RegisterSteps: FunctionComponent<registerStepsProps> = ({
               }`}
               onClick={() => setStep(2)}
             >
-              <PfpIcon
-                width="30"
-                secondColor={
-                  currentStep >= 2 ? "#FFF" : theme.palette.secondary.main
-                }
-                color={
-                  currentStep >= 2
-                    ? theme.palette.primary.main
-                    : theme.palette.secondary.light
-                }
+              <div className={styles.progressStepName}>
+                <PfpIcon
+                  width="30"
+                  secondColor={
+                    currentStep >= 2 ? "#FFF" : theme.palette.secondary.main
+                  }
+                  color={
+                    currentStep >= 2
+                      ? theme.palette.primary.main
+                      : theme.palette.secondary.light
+                  }
+                />
+                <p>PFP</p>
+              </div>
+              <DoneFilledIcon
+                width="12"
+                color={theme.palette.primary.main}
+                secondColor={theme.palette.primary.main}
               />
-              <p>PFP</p>
             </div>
-            <div
-              className={`${styles.progressLine} ${
-                currentStep >= 3 ? styles.primaryBg : ""
-              }`}
-            />
           </>
         ) : null}
         <div
           className={`${styles.progressStep} ${
-            currentStep >= 3 ? styles.activeStep : ""
+            currentStep > 3 ? styles.activeStep : ""
           }`}
           onClick={() => setStep(3)}
         >
-          <CartIcon
-            width="30"
-            secondColor={
-              currentStep >= 3 ? "#FFF" : theme.palette.secondary.main
-            }
-            color={
-              currentStep >= 3
-                ? theme.palette.primary.main
-                : theme.palette.secondary.light
-            }
-          />
-          <p>Checkout</p>
+          <div className={styles.progressStepName}>
+            <CartIcon
+              width="30"
+              secondColor={
+                currentStep > 3 ? "#FFF" : theme.palette.secondary.main
+              }
+              color={
+                currentStep > 3
+                  ? theme.palette.primary.main
+                  : theme.palette.secondary.light
+              }
+            />
+            <p>Checkout</p>
+          </div>
+          {currentStep > 3 && (
+            <DoneFilledIcon
+              width="12"
+              color={theme.palette.primary.main}
+              secondColor={theme.palette.primary.main}
+            />
+          )}
         </div>
       </div>
     </div>
diff --git a/components/domains/steps/upsellCard.tsx b/components/domains/steps/upsellCard.tsx
index c32aa3c7..7fc7f464 100644
--- a/components/domains/steps/upsellCard.tsx
+++ b/components/domains/steps/upsellCard.tsx
@@ -1,6 +1,6 @@
 import styles from "../../../styles/components/upsellCard.module.css";
 import React, { FunctionComponent, useEffect } from "react";
-import { FormControlLabel, Radio, RadioGroup } from "@mui/material";
+import { Divider, FormControlLabel, Radio, RadioGroup } from "@mui/material";
 import textFieldStyles from "../../../styles/components/textField.module.css";
 type UpsellCardProps = {
   upsellData: Upsell;
@@ -43,37 +43,34 @@ const UpsellCard: FunctionComponent<UpsellCardProps> = ({
   };
 
   return (
-    <div className={styles.container}>
-      <div className={styles.card}>
-        <div className="flex flex-col items-start gap-1 self-stretch">
-          <p className={styles.title}>{upsellData.title.desc}</p>
-          <h3 className={styles.catch}>{upsellData.title.catch}</h3>
-          <p className={styles.desc}>{upsellData.desc}</p>
-        </div>
-        <RadioGroup
-          aria-labelledby="demo-controlled-radio-buttons-group"
-          name="controlled-radio-buttons-group"
-          value={enabled}
-          onChange={handleUpsellChoice}
-          className={styles.radioGroupContainer}
-        >
-          <div className={styles.radioGroup}>
-            <FormControlLabel
-              control={<Radio />}
-              value={true}
-              label={
-                <p className={textFieldStyles.legend}>Yes, count me in!</p>
-              }
-            />
-            <FormControlLabel
-              control={<Radio />}
-              value={false}
-              label={<p className={textFieldStyles.legend}>No, thanks!</p>}
-            />
-          </div>
-        </RadioGroup>
+    <div className={styles.card}>
+      <div className="flex flex-col items-start gap-1 self-stretch">
+        <h3 className={styles.catch}>{upsellData.title.catch}</h3>
+        <p className={styles.desc}>{upsellData.desc}</p>
       </div>
-      <img className={styles.image} src={upsellData.imageUrl} />
+      <RadioGroup
+        aria-labelledby="demo-controlled-radio-buttons-group"
+        name="controlled-radio-buttons-group"
+        value={enabled}
+        onChange={handleUpsellChoice}
+        className={styles.radioGroupContainer}
+      >
+        <div className={styles.radioGroup}>
+          <FormControlLabel
+            control={<Radio />}
+            value={true}
+            label={
+              <p className={textFieldStyles.legend}>Yes, count on me!</p>
+            }
+          />
+          <FormControlLabel
+            control={<Radio />}
+            value={false}
+            label={<p className={textFieldStyles.legend}>No, thanks!</p>}
+          />
+        </div>
+      </RadioGroup>
+      <Divider className={styles.divider} />
     </div>
   );
 };
diff --git a/public/register/grass.png b/public/register/grass.png
new file mode 100644
index 00000000..eb3ad444
Binary files /dev/null and b/public/register/grass.png differ
diff --git a/styles/components/button.module.css b/styles/components/button.module.css
index a98fc6d2..5806c5c6 100644
--- a/styles/components/button.module.css
+++ b/styles/components/button.module.css
@@ -17,7 +17,6 @@
   min-width: 5rem;
   width: 100%;
   margin: 0.25rem;
-  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
   cursor: pointer;
   transition: transform 450ms var(--nimiq-ease),
     box-shadow 450ms var(--nimiq-ease);
diff --git a/styles/components/evmModalMessage.module.css b/styles/components/evmModalMessage.module.css
index af1c5b37..02a5effa 100644
--- a/styles/components/evmModalMessage.module.css
+++ b/styles/components/evmModalMessage.module.css
@@ -75,7 +75,7 @@
 }
 
 .cardDesc {
-  color: #8c8989;
+  color: var(--content-600);
   font-size: 12px;
 }
 
diff --git a/styles/components/icons.module.css b/styles/components/icons.module.css
index 2e497e90..0e295fe2 100644
--- a/styles/components/icons.module.css
+++ b/styles/components/icons.module.css
@@ -102,7 +102,7 @@
 }
 
 .tooltipSub {
-  color: var(--content-600, #8c8989);
+  color: var(--content-600);
   font-size: 10px;
   font-style: normal;
   font-weight: 400;
diff --git a/styles/components/registerV3.module.css b/styles/components/registerV3.module.css
index bad721be..88738160 100644
--- a/styles/components/registerV3.module.css
+++ b/styles/components/registerV3.module.css
@@ -1,371 +1,452 @@
-.container {
-  display: flex;
-  width: 1084px;
-  max-width: 100%;
-  background-color: white;
-  justify-content: space-between;
-  margin-bottom: 100px;
-  border-radius: 1rem;
-  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
-  margin-bottom: 3rem;
-  overflow: hidden;
-  position: relative;
-  z-index: 0;
-}
-
-.card {
-  display: flex;
-  width: 694px;
-  padding: 32px 0px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 48px;
-  flex-shrink: 0;
-  z-index: 1;
-  background-color: #fff;
-}
-
-.price {
-  color: rgb(31 41 55);
-  font-size: 1.25rem /* 20px */;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 1.5rem /* 24px */;
-  white-space: nowrap;
-}
-
-.priceCrossed {
-  font-size: 1.25rem /* 20px */;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 1.5rem /* 24px */;
-  white-space: nowrap;
-  color: #6d696a;
-  text-decoration: line-through;
-}
-
-.legend {
-  color: #6d696a;
-  /* Body/small/medium */
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px; /* 142.857% */
-}
-
-.domainsToRenew {
-  color: #6d696a;
-  /* Body/small/medium */
-  font-size: 11px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px; /* 142.857% */
-}
-
-.renewalBox {
-  display: flex;
-  padding: 19.159px;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 9.58px;
-  align-self: stretch;
-  border-radius: 7.983px;
-  border: 1.597px solid var(--content-400, #cdcccc);
-  background: var(--background-paper, #fff);
-
-  /* Small Shadow */
-  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
-}
-
-.domain {
-  color: #454545;
-  /* Title/H3 */
-  font-family: "QuickZap";
-  font-size: 30px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 32px; /* 106.667% */
-}
-
-.form {
-  display: flex;
-  padding: 0px 48px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 28px;
-  align-self: stretch;
-}
-
-.summary {
-  display: flex;
-  padding: 24px 48px 0px 48px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 24px;
-  align-self: stretch;
-  border-top: 1px solid var(--content-400, #cdcccc);
-}
-
-.pfpGallery {
-  display: flex;
-  flex-direction: column;
-  margin: 0 40px 20px;
-  border-radius: 20px;
-  background: #fffcf8;
-  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
-  width: -webkit-fill-available;
-  padding: 32px 64px;
-  text-align: left;
-  gap: 48px;
-}
-
-.pfpBtns {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  width: 300px;
-  margin: 0 auto;
-}
-
-.skipBtn {
-  text-align: center;
-  font-family: "QuickZap";
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 28px;
-  color: #454545;
-  cursor: pointer;
-}
-
-.checkout {
-  display: flex;
-  width: 100%;
-  padding: 48px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 48px;
-  flex-shrink: 0;
-  z-index: 1;
-  background-color: #fff;
-}
-
-.checkoutSummary {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 24px;
-}
-
-.pricesSummary {
-  display: flex;
-  align-items: flex-start;
-  gap: 48px;
-  align-self: stretch;
-}
-
-.totalDue {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 16px;
-  flex: 1 0 0;
-}
-
-.totalDueTitle {
-  font-family: "Poppins-Bold";
-  font-size: 20px;
-  line-height: 24px; /* 120% */
-  letter-spacing: 0.2px;
-}
-
-.priceContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-}
-
-.image {
-  max-height: 1200px;
-  position: absolute;
-  left: 50%;
-  z-index: -1;
-  border-radius: 0rem 1rem 1rem 0rem;
-}
-
-.currencySwitcher {
-  display: flex;
-  align-items: flex-start;
-  gap: 4px;
-  cursor: pointer;
-}
-
-.activeSwitch {
-  display: flex;
-  padding: 8px 20px;
-  align-items: flex-start;
-  gap: 10px;
-  border-radius: 52px;
-  background: var(--tertiary-600, #ccb297);
-  /* Small Shadow */
-  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
-}
-
-.inactiveSwitch {
-  display: flex;
-  padding: 8px 20px;
-  align-items: flex-start;
-  gap: 10px;
-  border-radius: 52px;
-}
-
-.backArrow {
-  width: fit-content;
-  flex-shrink: 0;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  cursor: pointer;
-  font-family: "Poppins-Bold";
-  transition: 0.3s ease-in-out;
-}
-
-.backArrow:hover {
-  opacity: 0.7;
-}
-
-.stepsContainer {
-  width: 100%;
-  display: flex;
-  justify-content: space-around;
-  padding: 24px;
-}
-
-.progressSteps {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  text-align: center;
-  max-width: 600px;
-  gap: 10px;
-}
-
-.progressStep {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  text-align: center;
-  gap: 5px;
-  cursor: pointer;
-  color: var(--secondary);
-}
-
-.activeStep {
-  color: var(--primary);
-  font-weight: 700;
-  line-height: 20px;
-  font-family: "Poppins-Bold";
-}
-
-.progressLine {
-  flex-grow: 1;
-  height: 2px;
-  background-color: var(--secondary300);
-  position: relative;
-  width: 50px;
-}
-
-.primaryBg {
-  background-color: var(--primary);
-}
-
-.gasMethods {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.gasMethod,
-.gasMethodSelected {
-  border: 1px solid #cdcccc;
-  border-radius: 8px;
-  padding: 0.5rem 1rem;
-}
-
-.gasMethod:disabled {
-  color: #666666;
-  background-color: #cdcccc;
-  cursor: not-allowed;
-}
-
-.gasMethodSelected {
-  background-color: var(--primary);
-  color: white;
-  border: 1px solid white;
-}
-
-@media (max-width: 1084px) {
-  .image {
-    visibility: hidden;
-  }
-
-  .container {
-    max-width: 90%;
-    margin: 1rem;
-  }
-
-  .card {
-    width: 100%;
-  }
-
-  .pricesSummary {
-    flex-direction: column-reverse;
-    gap: 1.5rem;
-  }
-
-  .pfpGallery {
-    margin: 10px;
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-
-  .pfpBtns {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    max-width: 100%;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .legend {
-    font-size: 12px;
-    letter-spacing: -0.3px;
-  }
-
-  .progressStep p {
-    display: none;
-  }
-}
-
-@media screen and (max-width: 400px) {
-  .legend {
-    font-size: 10px;
-    letter-spacing: -0.3px;
-  }
-  .price {
-    font-size: 1rem;
-  }
-}
-
-@media screen and (max-width: 350px) {
-  .legend {
-    font-size: 9px;
-    letter-spacing: -0.4px;
-  }
-  .price {
-    font-size: 0.8rem;
-  }
-}
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 1084px;
+  max-width: 100%;
+  background-color: var(--background);
+  justify-content: space-between;
+  border-radius: 1rem;
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+  padding: 0px 166px;
+}
+
+.card {
+  display: flex;
+  width: 694px;
+  padding: 32px 0px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 48px;
+  flex-shrink: 0;
+  z-index: 1;
+  background-color: #fff;
+}
+
+.price {
+  color: rgb(31 41 55);
+  font-size: 1.25rem /* 20px */;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.5rem /* 24px */;
+  white-space: nowrap;
+}
+
+.priceCrossed {
+  font-size: 1.25rem /* 20px */;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.5rem /* 24px */;
+  white-space: nowrap;
+  color: #6d696a;
+  text-decoration: line-through;
+}
+
+.legend {
+  color: #6d696a;
+  /* Body/small/medium */
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px; /* 142.857% */
+}
+
+.domainsToRenew {
+  color: #6d696a;
+  /* Body/small/medium */
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px; /* 142.857% */
+}
+
+.renewalBox {
+  display: flex;
+  padding: 19.159px;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 9.58px;
+  align-self: stretch;
+  border-radius: 7.983px;
+  border: 1.597px solid var(--content-400, #cdcccc);
+  background: var(--background-paper, #fff);
+
+  /* Small Shadow */
+  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
+}
+
+.domain {
+  color: #454545;
+  /* Title/H3 */
+  font-family: "QuickZap";
+  font-size: 30px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px; /* 106.667% */
+}
+
+.form {
+  display: flex;
+  padding: 0px 48px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 28px;
+  align-self: stretch;
+}
+
+.summary {
+  display: flex;
+  padding: 24px 48px 0px 48px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+  border-top: 1px solid var(--content-400, #cdcccc);
+}
+
+.pfpGallery {
+  display: flex;
+  flex-direction: column;
+  margin: 0 40px 20px;
+  border-radius: 20px;
+  background: #fffcf8;
+  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
+  width: -webkit-fill-available;
+  padding: 32px 64px;
+  text-align: left;
+  gap: 48px;
+}
+
+.pfpBtns {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 300px;
+  margin: 0 auto;
+}
+
+.skipBtn {
+  text-align: center;
+  font-family: "QuickZap";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 28px;
+  color: #454545;
+  cursor: pointer;
+}
+
+.checkout {
+  display: flex;
+  width: 100%;
+  margin-top: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  flex-shrink: 0;
+  z-index: 1;
+  background-color: var(--background);
+}
+
+.checkoutSummary {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+}
+
+.checkoutButton {
+  width: 100%;
+  display: flex;
+  justify-content: center
+}
+
+.divider {
+  width: 100%;
+  border-color: var(--background-light300)
+}
+
+.pricesSummary {
+  display: flex;
+  align-items: flex-start;
+  gap: 48px;
+  align-self: stretch;
+}
+
+.totalDue {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  flex: 1 0 0;
+}
+
+.totalDueTitle {
+  font-family: "Poppins-Bold";
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 24px; /* 120% */
+  letter-spacing: 0.2px;
+}
+
+.priceContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.image {
+  max-height: 1200px;
+  position: absolute;
+  left: 50%;
+  z-index: -1;
+  border-radius: 0rem 1rem 1rem 0rem;
+}
+
+.currencySwitcher {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  cursor: pointer;
+}
+
+.activeSwitch {
+  display: flex;
+  padding: 8px 20px;
+  align-items: flex-start;
+  gap: 10px;
+  border-radius: 52px;
+  background: var(--tertiary-600, #ccb297);
+  /* Small Shadow */
+  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
+}
+
+.inactiveSwitch {
+  display: flex;
+  padding: 8px 20px;
+  align-items: flex-start;
+  gap: 10px;
+  border-radius: 52px;
+}
+
+.backArrow {
+  width: fit-content;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  font-family: "Poppins-Bold";
+  transition: 0.3s ease-in-out;
+}
+
+.backArrow:hover {
+  opacity: 0.7;
+}
+
+.stepsContainer {
+  min-width: 220px;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  justify-content: space-between;
+  border: 1px solid #4545451A;
+  border-radius: 16px;
+  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
+  background-color: #FFFFFF
+}
+
+.stepsBackground {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 15%;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.progressSteps {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 24px;
+  gap: 24px;
+}
+
+.progressStep {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  gap: 5px;
+  cursor: pointer;
+  color: var(--secondary);
+}
+
+.progressStepName {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.activeStep {
+  color: var(--primary);
+  font-weight: 700;
+  line-height: 20px;
+  font-family: "Poppins-Bold";
+}
+
+.progressLine {
+  flex-grow: 1;
+  height: 2px;
+  background-color: var(--secondary300);
+  position: relative;
+  width: 50px;
+}
+
+.primaryBg {
+  background-color: var(--primary);
+}
+
+.gasMethods {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.gasMethod,
+.gasMethodSelected {
+  border: 1px solid #cdcccc;
+  border-radius: 8px;
+  padding: 0.5rem 1rem;
+}
+
+.gasMethod:disabled {
+  color: #666666;
+  background-color: #cdcccc;
+  cursor: not-allowed;
+}
+
+.gasMethodSelected {
+  background-color: var(--primary);
+  color: white;
+  border: 1px solid white;
+}
+
+@media (max-width: 1570px) {
+  .container {
+    padding: 0px 120px;
+  }
+}
+
+@media (max-width: 1084px) {
+  .image {
+    visibility: hidden;
+  }
+
+  .container {
+    max-width: 90%;
+    padding: 0px 64px;
+  }
+
+  .card {
+    width: 100%;
+  }
+
+  .totalDue {
+    align-items: center;
+  }
+
+  .priceContainer {
+    align-items: center;
+  }
+
+  .pricesSummary {
+    flex-direction: column;
+    gap: 1.5rem;
+    align-items: center;
+  }
+
+  .pfpGallery {
+    margin: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .pfpBtns {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    max-width: 100%;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .container {
+    padding: 0px 32px;
+  }
+
+  .stepsContainer {
+    min-width: 180px;
+  }
+
+  .legend {
+    font-size: 12px;
+    letter-spacing: -0.3px;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .container {
+    padding: 0px 4px;
+  }
+
+  .stepsBackground {
+    height: 50%;
+  }
+
+  .progressSteps {
+    width: 100%;
+    flex-direction: row;
+    height: 120px;
+    align-items: flex-start;
+    justify-content: space-around;
+  }
+
+  .progressStep {
+    width: auto;
+  }
+
+  .divider {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .legend {
+    font-size: 10px;
+    letter-spacing: -0.3px;
+  }
+  .price {
+    font-size: 1rem;
+  }
+}
+
+@media screen and (max-width: 350px) {
+  .legend {
+    font-size: 9px;
+    letter-spacing: -0.4px;
+  }
+  .price {
+    font-size: 0.8rem;
+  }
+}
diff --git a/styles/components/textField.module.css b/styles/components/textField.module.css
index 690112d9..2b0fe3f8 100644
--- a/styles/components/textField.module.css
+++ b/styles/components/textField.module.css
@@ -27,7 +27,7 @@
   /* Body/small/medium */
   font-size: 16px;
   font-style: normal;
-  font-weight: 500;
+  font-weight: 400;
   line-height: 20px; /* 142.857% */
   align-self: flex-start;
   max-width: 100%;
diff --git a/styles/components/upsellCard.module.css b/styles/components/upsellCard.module.css
index c6d9fba3..04c92f69 100644
--- a/styles/components/upsellCard.module.css
+++ b/styles/components/upsellCard.module.css
@@ -3,14 +3,8 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  width: 1084px;
-  max-width: 100%;
+  width: 100%;
   background-color: white;
-  justify-content: space-between;
-  margin-bottom: 100px;
-  border-radius: 1rem;
-  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
-  margin-bottom: 3rem;
   overflow: hidden;
   position: relative;
   z-index: 0;
@@ -18,15 +12,12 @@
 
 .card {
   display: flex;
-  width: 694px;
-  padding: 32px 0px;
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
   flex-shrink: 0;
   z-index: 1;
-  background-color: #fff;
-  padding: 64px 48px;
+  background-color: var(--background);
 }
 
 .image {
@@ -49,19 +40,27 @@
 }
 
 .catch {
-  color: var(--primary);
+  color: var(--dark-content);
   font-family: "QuickZap";
-  font-size: 36px;
+  font-size: 24px;
   font-style: normal;
   font-weight: 400;
-  line-height: 42px;
+  line-height: 32px;
 }
 
 .desc {
-  margin-top: 24px;
+  margin-top: 6px;
   text-align: left;
   font-size: 16px;
-  color: var(--secondary);
+  line-height: 24px;
+  color: var(--content-600);
+}
+
+.radioGroupContainer {
+  width: 100%;
+  border: 1px solid #45454533;
+  border-radius: 8px;
+  padding: 8px 20px;
 }
 
 .radioGroup {
@@ -70,6 +69,11 @@
   gap: 16px;
 }
 
+.divider {
+  width: 100%;
+  border-color: var(--background-light300);
+}
+
 @media (max-width: 1084px) {
   .container {
     max-width: 90%;
@@ -79,9 +83,7 @@
   }
 
   .card {
-    order: 2;
     width: 100%;
-    padding: 32px 24px;
   }
 
   .image {
@@ -117,6 +119,12 @@
   }
 }
 
+@media screen and (max-width: 640px) {
+  .divider {
+    display: none;
+  }
+}
+
 @media screen and (max-width: 400px) {
   .legend {
     font-size: 10px;
diff --git a/styles/discount.module.css b/styles/discount.module.css
index 0149cf30..c322e8e1 100644
--- a/styles/discount.module.css
+++ b/styles/discount.module.css
@@ -39,7 +39,7 @@
 }
 
 .description {
-  color: var(--content-600, #8c8989);
+  color: var(--content-600);
   font-size: 15px;
   font-style: normal;
   font-weight: 400;
diff --git a/styles/domain.module.css b/styles/domain.module.css
index f887ca2c..ebe9dab5 100644
--- a/styles/domain.module.css
+++ b/styles/domain.module.css
@@ -25,7 +25,7 @@
 }
 
 .description {
-  color: var(--content-600, #8c8989);
+  color: var(--content-600);
   font-size: 15px;
   font-style: normal;
   font-weight: 400;
diff --git a/styles/globals.css b/styles/globals.css
index 401cb6a0..3a42b49a 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -28,9 +28,10 @@
   --background: #fcfffe;
   --background-light: #fffcf8;
   --background-light300: #f8f7f7;
-  --background-white:#ffffff;
+  --background-white: #ffffff;
   --dark-content: #454545;
   --negative: #d32f2f;
+  --content-600: #8c8989;
   --nimiq-ease: cubic-bezier(0.25, 0, 0, 1);
   --small-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
   --large-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.1);
@@ -58,7 +59,7 @@ a {
 }
 
 .description {
-  color: var(--content-600, #8c8989);
+  color: var(--content-600);
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
@@ -79,7 +80,7 @@ a {
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
-  background: #402D28;
+  background: #402d28;
   border-radius: 10px;
 }
 
diff --git a/styles/verify.module.css b/styles/verify.module.css
index b697b32a..45d2e1a4 100644
--- a/styles/verify.module.css
+++ b/styles/verify.module.css
@@ -10,7 +10,7 @@
 
 .subtitle {
   margin-top: 16px;
-  color: var(--content-600, #8c8989);
+  color: var(--content-600);
   text-align: center;
 
   /* Body/default/regular */
diff --git a/utils/discounts/evergreen.ts b/utils/discounts/evergreen.ts
index 0dd99215..5faca1be 100644
--- a/utils/discounts/evergreen.ts
+++ b/utils/discounts/evergreen.ts
@@ -8,7 +8,7 @@ export const renewal: Upsell = {
     desc: "Unlock Extended Domain",
     catch: "3 Years for the Price of 2!",
   },
-  desc: "Take advantage of this exclusive offer! Secure your domain for three years at the price of two years.",
+  desc: "Don't miss out on this one-time offer! This is your chance to secure extended benefits and ensure a lasting digital presence.",
 };
 
 export const registration: Upsell = {
@@ -21,7 +21,7 @@ export const registration: Upsell = {
     desc: "Unlock Extended Domain",
     catch: "3 Years for the Price of 2!",
   },
-  desc: "Take advantage of this exclusive offer! Secure your domain for three years at the price of two years.",
+  desc: "Don't miss out on this one-time offer! This is your chance to secure extended benefits and ensure a lasting digital presence.",
 };
 
 const evergreenDiscounts = {