diff --git a/components/UI/iconsComponents/clickableAction.tsx b/components/UI/iconsComponents/clickableAction.tsx
index 8156ba58..cd2c6be3 100644
--- a/components/UI/iconsComponents/clickableAction.tsx
+++ b/components/UI/iconsComponents/clickableAction.tsx
@@ -20,7 +20,7 @@ const ClickableAction: FunctionComponent<ClickableActionProps> = ({
 }) => {
   return (
     <div
-      className={` mx-auto -space-x-1 
+      className={`
         ${
           style === "secondary"
             ? styles.clickableActionSecondary
@@ -31,9 +31,9 @@ const ClickableAction: FunctionComponent<ClickableActionProps> = ({
     >
       <div
         className={
-          ` ${style === "secondary"
+          style === "secondary"
             ? styles.clickableIconSecondary
-            : styles.clickableIconPrimary}`
+            : styles.clickableIconPrimary
         }
       >
         {icon}
diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx
index 215e265c..fb8dae3b 100644
--- a/components/UI/navbar.tsx
+++ b/components/UI/navbar.tsx
@@ -6,7 +6,9 @@ import React, {
   useContext,
 } from "react";
 import { AiOutlineMenu } from "react-icons/ai";
-import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
+import TwitterIcon from "./iconsComponents/icons/twitterIcon";
+import DiscordIcon from "./iconsComponents/icons/discordIcon";
+import GitHubIcon2 from "./iconsComponents/icons/githubIcon2";
 import styles from "../../styles/components/navbar.module.css";
 import connectStyles from "../../styles/components/walletConnect.module.css";
 import Button from "./button";
@@ -289,7 +291,7 @@ const Navbar: FunctionComponent = () => {
           }
         >
           <div
-            className={`fixed left-0 top-0 w-full sm:w-[60%] lg:w-[45%] h-screen bg-background px-5 ease-in flex justify-between flex-col overflow-auto
+            className={`fixed left-0 top-0 w-full sm:w-[60%] lg:w-[45%] h-screen bg-[#FCFFFE] px-5 ease-in flex justify-between flex-col overflow-auto
               ${nav ? styles.mobileNavbarShown : styles.mobileNavbarHidden}`}
           >
             <div className="h-full flex flex-col">
@@ -378,25 +380,25 @@ const Navbar: FunctionComponent = () => {
 
             <div className="flex flex-col items-center my-4 w-full">
               <div className="text-background">
-                <Button onClick={onTopButtonClick}>{topButtonText()}</Button>
+                <Button className="!text-lg" onClick={onTopButtonClick}>{topButtonText()}</Button>
               </div>
               <div className="flex">
-                <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300 mt-2">
+                <div className="rounded-full shadow-gray-400 p-4 cursor-pointer">
                   <Link href="https://twitter.com/Starknet_id" target="_blank">
-                    <FaTwitter size={28} color={theme.palette.grey[800]} />
+                    <TwitterIcon width="28" color="black" />{" "}
                   </Link>
                 </div>
-                <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300 mt-2">
+                <div className="rounded-full shadow-gray-400 p-4 cursor-pointer">
                   <Link
                     href="https://discord.com/invite/8uS2Mgcsza"
                     target="_blank"
                   >
-                    <FaDiscord size={28} color={theme.palette.grey[800]} />
+                    <DiscordIcon width="28" color="#5865F2" />
                   </Link>
                 </div>
-                <div className="rounded-full shadow-gray-400 p-3 cursor-pointer hover:scale-105 ease-in duration-300 mt-2">
+                <div className="rounded-full shadow-gray-400 p-4">
                   <Link href="https://github.com/lfglabs-dev" target="_blank">
-                    <FaGithub size={28} color={theme.palette.grey[800]} />
+                    <GitHubIcon2 width="28" color="black" />
                   </Link>
                 </div>
               </div>
diff --git a/components/UI/numberTextField.tsx b/components/UI/numberTextField.tsx
index d296fa57..f426d915 100644
--- a/components/UI/numberTextField.tsx
+++ b/components/UI/numberTextField.tsx
@@ -34,7 +34,7 @@ const NumberTextField: FunctionComponent<NumberTextFieldProps> = ({
 }) => {
   return (
     <div className="flex flex-col w-full">
-      <div className="flex gap-1 my-[8px]">
+      <div className="flex gap-1 my-[8px] justify-center md:justify-start lg:justify-start">
         {helperText ? (
           <Tooltip
             className="cursor-pointer"
diff --git a/components/UI/timer.tsx b/components/UI/timer.tsx
index c9f7171c..8c4fd407 100644
--- a/components/UI/timer.tsx
+++ b/components/UI/timer.tsx
@@ -30,7 +30,7 @@ const Timer: FunctionComponent<TimerProps> = ({ expiry, fixed = true }) => {
   const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
 
   return (
-    <div className={`${fixed ? `${styles.timerFixed}` : `${styles.timer}`}`}>
+    <div className={fixed ? styles.timerFixed : styles.timer}>
       <div className={styles.title}>Expires in</div>
       <div className={styles.categories}>
         <div>days</div>
diff --git a/components/domains/registerV3.tsx b/components/domains/registerV3.tsx
index d200e805..73a20edb 100644
--- a/components/domains/registerV3.tsx
+++ b/components/domains/registerV3.tsx
@@ -55,7 +55,7 @@ const RegisterV3: FunctionComponent<RegisterV3Props> = ({ domain }) => {
   return (
     <>
       <div className="w-full flex flex-col xl:flex-row justify-center gap-4 px-3 py-4 lg:px-32 md:px-16 sm:py-12 xl:h-[88vh]">
-        <aside className={`${styles.purchaseStepNav}`} role="navigation">
+        <aside className={styles.purchaseStepNav} role="navigation">
           <RegisterSteps
             currentStep={currentStep}
             setStep={goToStep}
@@ -69,7 +69,7 @@ const RegisterV3: FunctionComponent<RegisterV3Props> = ({ domain }) => {
           />
         </aside>
 
-        <div className={`${styles.purchaseStepNavMobile}`} role="navigation">
+        <div className={styles.purchaseStepNavMobile} role="navigation">
           <RegisterSteps
             currentStep={currentStep}
             setStep={goToStep}
diff --git a/components/domains/renewalV2.tsx b/components/domains/renewalV2.tsx
index 389c73fb..f22cee00 100644
--- a/components/domains/renewalV2.tsx
+++ b/components/domains/renewalV2.tsx
@@ -76,7 +76,7 @@ const RenewalV2: FunctionComponent = () => {
   return (
     <>
       <div className="w-full flex flex-col xl:flex-row justify-center gap-4 px-3 py-3 lg:px-32 md:px-16 sm:pb-12 xl:min-h-[88vh] ">
-        <aside className={`${styles.purchaseStepNav}`} role="navigation">
+        <aside className={styles.purchaseStepNav} role="navigation">
           <RegisterSteps
             currentStep={currentStep}
             setStep={goToStep}
@@ -89,7 +89,7 @@ const RenewalV2: FunctionComponent = () => {
           />
         </aside>
 
-        <div className={`${styles.purchaseStepNavMobile}`} role="navigation">
+        <div className={styles.purchaseStepNavMobile} role="navigation">
           <RegisterSteps
             currentStep={currentStep}
             setStep={goToStep}
diff --git a/components/domains/selectIdentity.tsx b/components/domains/selectIdentity.tsx
index a01c0e3a..21af15ea 100644
--- a/components/domains/selectIdentity.tsx
+++ b/components/domains/selectIdentity.tsx
@@ -28,8 +28,7 @@ const SelectIdentity: FunctionComponent<SelectIdentityProps> = ({
   useEffect(() => {
     if (account) {
       fetch(
-        `${
-          process.env.NEXT_PUBLIC_SERVER_LINK
+        `${process.env.NEXT_PUBLIC_SERVER_LINK
         }/addr_to_available_ids?addr=${hexToDecimal(account.address)}`
       )
         .then((response) => response.json())
@@ -46,7 +45,7 @@ const SelectIdentity: FunctionComponent<SelectIdentityProps> = ({
 
   return (
     <div className="flex flex-col w-full">
-      <div className="grid place-content-center my-2 ">
+      <div className="grid place-content-center my-2 md:justify-start lg:justify-start ">
         <p className={textFieldStyles.legend}>
           Select an identity to link with your domain*
         </p>
diff --git a/components/domains/steps/getStepColor.tsx b/components/domains/steps/getStepColor.tsx
new file mode 100644
index 00000000..907ce1ab
--- /dev/null
+++ b/components/domains/steps/getStepColor.tsx
@@ -0,0 +1,7 @@
+import theme from "@/styles/theme";
+
+export const getStepColor = (currentStep: number, step: number): string => {
+  if (currentStep > step) return theme.palette.primary.main;
+  if (currentStep === step) return theme.palette.secondary.main;
+  return theme.palette.grey[200];
+};
\ No newline at end of file
diff --git a/components/domains/steps/registerSteps.tsx b/components/domains/steps/registerSteps.tsx
index 9491d8bf..23a8029f 100644
--- a/components/domains/steps/registerSteps.tsx
+++ b/components/domains/steps/registerSteps.tsx
@@ -3,9 +3,8 @@ 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";
+import Step from "./step";
 
 type registerStepsProps = {
   currentStep: number;
@@ -14,18 +13,6 @@ type registerStepsProps = {
   isLoading?: boolean;
 };
 
-const getStep = (currentStep: number, stepIndex: number): string => {
-  if (currentStep > stepIndex) return styles.passedStep;
-  if (currentStep === stepIndex) return styles.activeStep;
-  return styles.disabledStep;
-};
-
-const getStepColor = (currentStep: number, step: number): string => {
-  if (currentStep > step) return theme.palette.primary.main;
-  if (currentStep === step) return theme.palette.secondary.main;
-  return theme.palette.grey[200];
-};
-
 const RegisterSteps: FunctionComponent<registerStepsProps> = ({
   currentStep,
   setStep,
@@ -33,87 +20,56 @@ const RegisterSteps: FunctionComponent<registerStepsProps> = ({
   isLoading = false,
 }) => {
   return isLoading ? (
-    <div className={styles.stepsContainer} role="status" aria-label="Loading registration steps">
-<div className="flex gap-2 items-center p-2">
-  <Skeleton variant="circular" width={24} height={24} />
-  <div className="w-12 sm:w-16 md:w-24 lg:w-36">
-    <Skeleton variant="text" height={20} />
-  </div>
-</div>
-<div className="flex gap-2 items-center p-2">
-  <Skeleton variant="circular" width={24} height={24} />
-  <div className="w-12 sm:w-16 md:w-24 lg:w-36">
-    <Skeleton variant="text" height={20} />
-  </div>
-</div>
-<div className="flex gap-2 items-center p-2">
-  <Skeleton variant="circular" width={24} height={24} />
-  <div className="w-12 sm:w-16 md:w-24 lg:w-36">
-    <Skeleton variant="text" height={20} />
-  </div>
-</div>
-
-    </div>
-  ) : (
-    <div className={styles.stepsContainer} aria-label="Registration steps">
-      <div
-        className={`${styles.step} ${getStep(currentStep, 1)}`}
-        onClick={() => currentStep >= 1 && setStep(1)}
-      >
-        <div className={styles.stepContent}>
-          <ContactCardIcon
-            width="20"
-            color={getStepColor(currentStep, 1)}
-          />
-          <p className={styles.stepText}>Domain</p>
+    <div
+      className={styles.stepsContainer}
+      role="status"
+      aria-label="Loading registration steps"
+    >
+      <div className="flex gap-2 items-center p-2">
+        <Skeleton variant="circular" width={24} height={24} />
+        <div className="w-12 sm:w-16 md:w-24 lg:w-36">
+          <Skeleton variant="text" height={20} />
         </div>
-        {currentStep > 1 && (
-          <DoneFilledIcon
-            width="16"
-            secondColor={theme.palette.primary.main}
-            color="#FFF"
-          />
-        )}
       </div>
-
-      {showPfp && (
-        <div
-          className={`${styles.step} ${getStep(currentStep, 2)}`}
-          onClick={() => currentStep >= 2 && setStep(2)}
-        >
-          <div className={styles.stepContent}>
-            <PfpIcon
-              width="20"
-              color={getStepColor(currentStep, 2)}
-            />
-            <p className={styles.stepText}>PFP</p>
-          </div>
-          {currentStep > 2 && (
-            <DoneFilledIcon
-              width="16"
-              secondColor={theme.palette.primary.main}
-              color="#FFF"
-            />
-          )}
+      <div className="flex gap-2 items-center p-2">
+        <Skeleton variant="circular" width={24} height={24} />
+        <div className="w-12 sm:w-16 md:w-24 lg:w-36">
+          <Skeleton variant="text" height={20} />
         </div>
-      )}
-
-      <div
-        className={`${styles.step} ${getStep(currentStep, 3)}`}
-        onClick={() => currentStep >= 3 && setStep(3)}
-      >
-        <div className={styles.stepContent}>
-          <CartIcon
-            width="20"
-            color={getStepColor(currentStep, 3)}
-          />
-          <p className={styles.stepText}>Checkout</p>
+      </div>
+      <div className="flex gap-2 items-center p-2">
+        <Skeleton variant="circular" width={24} height={24} />
+        <div className="w-12 sm:w-16 md:w-24 lg:w-36">
+          <Skeleton variant="text" height={20} />
         </div>
-        {currentStep > 3 && (
-          <DoneFilledIcon width="16" color={theme.palette.primary.main} />
-        )}
       </div>
     </div>
+  ) : (
+    <div className={styles.stepsContainer} aria-label="Registration steps">
+      <Step
+        stepIndex={1}
+        currentStep={currentStep}
+        setStep={setStep}
+        icon={<ContactCardIcon color={""} width={""} />}
+        label="Domain"
+      />
+      {showPfp && (
+        <Step
+          stepIndex={2}
+          currentStep={currentStep}
+          setStep={setStep}
+          icon={<PfpIcon color={""} width={""} />}
+          label="PFP"
+        />
+      )}
+      <Step
+        stepIndex={3}
+        currentStep={currentStep}
+        setStep={setStep}
+        icon={<CartIcon color={""} width={""} />}
+        label="Checkout"
+      />
+    </div>
   );
 };
 
diff --git a/components/domains/steps/step.tsx b/components/domains/steps/step.tsx
new file mode 100644
index 00000000..b10df4a6
--- /dev/null
+++ b/components/domains/steps/step.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import styles from "../../../styles/components/registerV3.module.css";
+import DoneFilledIcon from "@/components/UI/iconsComponents/icons/doneFilledIcon";
+import theme from "@/styles/theme";
+
+type StepProps = {
+  stepIndex: number;
+  currentStep: number;
+  setStep: (step: number) => void;
+  icon: React.ReactNode;
+  label: string;
+  showDoneIcon?: boolean;
+  allowSwitchAnytime?: boolean;
+};
+
+const Step: React.FC<StepProps> = ({
+  stepIndex,
+  currentStep,
+  setStep,
+  icon,
+  label,
+  showDoneIcon = true,
+  allowSwitchAnytime = false,
+}) => {
+  const getStep = (currentStep: number, stepIndex: number): string => {
+    if (currentStep > stepIndex)
+      return allowSwitchAnytime ? styles.unselectedStep : styles.passedStep;
+    if (currentStep === stepIndex) return styles.activeStep;
+    return allowSwitchAnytime ? styles.unselectedStep : styles.disabledStep;
+  };
+
+  const getStepColor = (currentStep: number, step: number): string => {
+    if (currentStep > step)
+      return allowSwitchAnytime ? "" : theme.palette.primary.main;
+    if (currentStep === step)
+      return allowSwitchAnytime ? "" : theme.palette.secondary.main;
+    return theme.palette.grey[200];
+  };
+
+  return (
+    <div
+      className={`${styles.step} ${getStep(currentStep, stepIndex)}`}
+      onClick={() =>
+        (allowSwitchAnytime || currentStep >= stepIndex) && setStep(stepIndex)
+      }
+    >
+      <div className={styles.stepContent}>
+        {React.cloneElement(icon as React.ReactElement, {
+          width: "20",
+          color: getStepColor(currentStep, stepIndex),
+        })}
+        <p className={styles.stepText}>{label}</p>
+      </div>
+      {showDoneIcon && currentStep > stepIndex && (
+        <DoneFilledIcon
+          width="16"
+          secondColor={theme.palette.primary.main}
+          color="#FFF"
+        />
+      )}
+    </div>
+  );
+};
+
+export default Step;
diff --git a/components/domains/steps/userInfoForm.tsx b/components/domains/steps/userInfoForm.tsx
index 028656ca..057e6160 100644
--- a/components/domains/steps/userInfoForm.tsx
+++ b/components/domains/steps/userInfoForm.tsx
@@ -1,152 +1,182 @@
-import React, {FunctionComponent, useContext, useEffect, useState} from "react";
+import React, {
+  FunctionComponent,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import styles from "../../../styles/components/registerV3.module.css";
-import {FormContext} from "@/context/FormProvider";
-import {FormType} from "@/utils/constants";
-import {getDomainWithStark} from "@/utils/stringService";
+import { FormContext } from "@/context/FormProvider";
+import { FormType } from "@/utils/constants";
+import { getDomainWithStark } from "@/utils/stringService";
 import SwissForm from "../swissForm";
 import SelectIdentity from "../selectIdentity";
 import NumberTextField from "@/components/UI/numberTextField";
-import {useAccount} from "@starknet-react/core";
+import { useAccount } from "@starknet-react/core";
 import Button from "@/components/UI/button";
 import RenewalDomainsBox from "../renewalDomainsBox";
-import {areDomainSelected} from "@/utils/priceService";
+import { areDomainSelected } from "@/utils/priceService";
 import CloseIcon from "@/components/UI/iconsComponents/icons/closeIcon";
 import ConnectButton from "@/components/UI/connectButton";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
 
 type UserInfoFormProps = {
-   type: FormType;
-   goToNextStep: () => void;
-   canUpdateDuration?: boolean;
-   minDuration?: number;
+  type: FormType;
+  goToNextStep: () => void;
+  canUpdateDuration?: boolean;
+  minDuration?: number;
 };
 
 export enum IncrementType {
-   INCREMENT,
-   DECREMENT,
-   SET,
+  INCREMENT,
+  DECREMENT,
+  SET,
 }
 
-const UserInfoForm: FunctionComponent<UserInfoFormProps> = ({type, goToNextStep}) => {
-   const router = useRouter();
-   const maxYearsToRegister = 25;
-   const {address} = useAccount();
-   const {formState, updateFormState} = useContext(FormContext);
-   const [selectedDomains, setSelectedDomains] = useState<Record<string, boolean>>();
+const UserInfoForm: FunctionComponent<UserInfoFormProps> = ({
+  type,
+  goToNextStep,
+}) => {
+  const router = useRouter();
+  const maxYearsToRegister = 25;
+  const { address } = useAccount();
+  const { formState, updateFormState } = useContext(FormContext);
+  const [selectedDomains, setSelectedDomains] =
+    useState<Record<string, boolean>>();
 
-   useEffect(() => {
-      if (type === FormType.REGISTER) return;
-      updateFormState({selectedDomains});
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-   }, [selectedDomains, type]); // Don't call updateFromState on every render
+  useEffect(() => {
+    if (type === FormType.REGISTER) return;
+    updateFormState({ selectedDomains });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedDomains, type]); // Don't call updateFromState on every render
 
-   function changeTokenId(value: number): void {
-      updateFormState({tokenId: value});
-   }
+  function changeTokenId(value: number): void {
+    updateFormState({ tokenId: value });
+  }
 
-   function changeDuration(type: IncrementType, value: number = formState.durationInYears): void {
-      let newValue = value;
+  function changeDuration(
+    type: IncrementType,
+    value: number = formState.durationInYears
+  ): void {
+    let newValue = value;
 
-      switch (type) {
-         case IncrementType.INCREMENT:
-            newValue = value < maxYearsToRegister ? value + 1 : value;
-            break;
-         case IncrementType.DECREMENT:
-            newValue = value > 1 ? value - 1 : value;
-            break;
-         case IncrementType.SET:
-            break;
-      }
+    switch (type) {
+      case IncrementType.INCREMENT:
+        newValue = value < maxYearsToRegister ? value + 1 : value;
+        break;
+      case IncrementType.DECREMENT:
+        newValue = value > 1 ? value - 1 : value;
+        break;
+      case IncrementType.SET:
+        break;
+    }
 
-      if (isNaN(newValue) || newValue > maxYearsToRegister || newValue < 1) return;
-      updateFormState({
-         durationInYears: newValue,
-         isUpselled: newValue === 1 ? true : false,
-      });
-   }
+    if (isNaN(newValue) || newValue > maxYearsToRegister || newValue < 1)
+      return;
+    updateFormState({
+      durationInYears: newValue,
+      isUpselled: newValue === 1 ? true : false,
+    });
+  }
 
-   const getTitle = () => {
-      switch (type) {
-         case FormType.REGISTER:
-            // Fetch the domain name from the selectedDomains object in context for the title of the section
-            return getDomainWithStark(Object.keys(formState.selectedDomains)[0]);
-         case FormType.RENEW:
-            return "Renew Your domain(s)";
-         default:
-            return "";
-      }
-   };
+  const getTitle = () => {
+    switch (type) {
+      case FormType.REGISTER:
+        // Fetch the domain name from the selectedDomains object in context for the title of the section
+        return getDomainWithStark(Object.keys(formState.selectedDomains)[0]);
+      case FormType.RENEW:
+        return "Renew Your domain(s)";
+      default:
+        return "";
+    }
+  };
 
-   const getButtonText = (): string => {
-      return type === FormType.RENEW && !areDomainSelected(formState.selectedDomains) ? "Select a domain to renew" : "Next step";
-   };
+  const getButtonText = (): string => {
+    return type === FormType.RENEW &&
+      !areDomainSelected(formState.selectedDomains)
+      ? "Select a domain to renew"
+      : "Next step";
+  };
 
-   const isDisabled = (): boolean => {
-      return !formState.durationInYears || formState.durationInYears < 1 || (type === FormType.RENEW && !areDomainSelected(formState.selectedDomains));
-   };
+  const isDisabled = (): boolean => {
+    return (
+      !formState.durationInYears ||
+      formState.durationInYears < 1 ||
+      (type === FormType.RENEW && !areDomainSelected(formState.selectedDomains))
+    );
+  };
 
-   const handleClose = () => {
-      router.push("/");
-   };
+  const handleClose = () => {
+    router.push("/");
+  };
 
-   return (
-      <div className={styles.container}>
-         <div className={styles.card}>
-            <div className={styles.closeIcon} onClick={handleClose}>
-               <CloseIcon />
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <div className={styles.closeIcon} onClick={handleClose}>
+          <CloseIcon />
+        </div>
+        <div className={styles.form}>
+          <div className="flex flex-col items-center self-stretch pt-[30px] xl:pt-[60px]">
+            <h3 className={styles.domain}>{getTitle()}</h3>
+          </div>
+          <div className="flex flex-col items-start gap-6 self-stretch">
+            <SwissForm
+              isSwissResident={formState.isSwissResident}
+              onSwissResidentChange={() =>
+                updateFormState({
+                  isSwissResident: !formState.isSwissResident,
+                })
+              }
+            />
+            {type === FormType.REGISTER ? (
+              <SelectIdentity
+                tokenId={formState.tokenId}
+                changeTokenId={changeTokenId}
+              />
+            ) : null}
+            <NumberTextField
+              value={formState.durationInYears}
+              label="Years to register (max 25 years)"
+              placeholder="years"
+              onChange={(e) =>
+                changeDuration(IncrementType.SET, Number(e.target.value))
+              }
+              incrementValue={() => changeDuration(IncrementType.INCREMENT)}
+              decrementValue={() => changeDuration(IncrementType.DECREMENT)}
+              color="secondary"
+              required
+            />
+            <div className="w-full">
+              {type === FormType.RENEW ? (
+                <RenewalDomainsBox
+                  helperText="Check the box of the domains you want to renew"
+                  setSelectedDomains={setSelectedDomains}
+                  selectedDomains={formState.selectedDomains}
+                />
+              ) : null}
             </div>
-            <div className={`${styles.form}`}>
-               <div className="flex flex-col items-center self-stretch pt-[30px] xl:pt-[60px]">
-                  <h3 className={styles.domain}>{getTitle()}</h3>
-               </div>
-               <div className="flex flex-col items-start gap-6 self-stretch">
-                  <SwissForm
-                     isSwissResident={formState.isSwissResident}
-                     onSwissResidentChange={() =>
-                        updateFormState({
-                           isSwissResident: !formState.isSwissResident,
-                        })
-                     }
-                  />
-                  {type === FormType.REGISTER ? <SelectIdentity tokenId={formState.tokenId} changeTokenId={changeTokenId} /> : null}
-                  <NumberTextField
-                     value={formState.durationInYears}
-                     label="Years to register (max 25 years)"
-                     placeholder="years"
-                     onChange={(e) => changeDuration(IncrementType.SET, Number(e.target.value))}
-                     incrementValue={() => changeDuration(IncrementType.INCREMENT)}
-                     decrementValue={() => changeDuration(IncrementType.DECREMENT)}
-                     color="secondary"
-                     required
-                  />
-                  <div className="w-full">
-                     {type === FormType.RENEW ? (
-                        <RenewalDomainsBox
-                           helperText="Check the box of the domains you want to renew"
-                           setSelectedDomains={setSelectedDomains}
-                           selectedDomains={formState.selectedDomains}
-                        />
-                     ) : null}
-                  </div>
-               </div>
+          </div>
+        </div>
+        <div className={styles.summary}>
+          <div className="flex justify-between gap-8">
+            <div
+              onClick={handleClose}
+              className={`${styles.cancelBtn} xl:hidden `}
+            >
+              Cancel
             </div>
-            <div className={styles.summary}>
-               <div className="flex justify-between gap-8">
-                  <div onClick={handleClose} className={`${styles.cancelBtn} xl:hidden `}>
-                     Cancel
-                  </div>
-                  {address ? (
-                     <Button onClick={goToNextStep} disabled={isDisabled()}>
-                        {getButtonText()}
-                     </Button>
-                  ) : (
-                     <ConnectButton />
-                  )}
-               </div>
-            </div>
-         </div>
+            {address ? (
+              <Button onClick={goToNextStep} disabled={isDisabled()}>
+                {getButtonText()}
+              </Button>
+            ) : (
+              <ConnectButton />
+            )}
+          </div>
+        </div>
       </div>
-   );
+    </div>
+  );
 };
 
 export default UserInfoForm;
diff --git a/components/domains/swissForm.tsx b/components/domains/swissForm.tsx
index b6853f35..31655793 100644
--- a/components/domains/swissForm.tsx
+++ b/components/domains/swissForm.tsx
@@ -26,7 +26,7 @@ const SwissForm: FunctionComponent<SwissFormProps> = ({
   return (
     <FormControl className="flex gap-4 w-full">
       <div className="flex flex-col">
-        <div className="flex gap-1 my-[8px]">
+        <div className="flex gap-1 my-[8px] justify-center md:justify-start lg:justify-start">
           <p className={textFieldStyles.legend}>
             Do you live in Switzerland ?*
           </p>
@@ -45,7 +45,7 @@ const SwissForm: FunctionComponent<SwissFormProps> = ({
               value={isSwissResident}
               onChange={onSwissResidentChange}
             >
-              <div className="flex flex-row gap-4">
+              <div className="flex flex-row gap-4 justify-center md:justify-start lg:justify-start">
                 <FormControlLabel
                   value={true}
                   control={<Radio />}
diff --git a/components/identities/actions/identityActions.tsx b/components/identities/actions/identityActions.tsx
index d53afb45..3d3fea06 100644
--- a/components/identities/actions/identityActions.tsx
+++ b/components/identities/actions/identityActions.tsx
@@ -181,6 +181,12 @@ const IdentityActions: FunctionComponent<IdentityActionsProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [autoRenewalData, isAutoRenewalEnabled]); // We don't add callDataEncodedDomain because it would create an infinite loop
 
+  const isExpired = useMemo(() => {
+    return identity?.domainExpiry
+      ? identity.domainExpiry < Math.floor(Date.now() / 1000)
+      : false;
+  }, [identity]);
+
   useEffect(() => {
     if (!disableRenewalData?.transaction_hash) return;
     addTransaction({
@@ -243,9 +249,9 @@ const IdentityActions: FunctionComponent<IdentityActionsProps> = ({
                 <ClickableAction
                   title="RENEW YOUR DOMAIN"
                   style="primary"
-                  description={`Will expire on ${timestampToReadableDate(
-                    identity?.domainExpiry ?? 0
-                  )}`}
+                  description={`${
+                    isExpired ? "Expired" : "Will expire"
+                  } on ${timestampToReadableDate(identity?.domainExpiry ?? 0)}`}
                   icon={
                     <RenewalIcon
                       width="18"
diff --git a/components/identities/availableIdentities.tsx b/components/identities/availableIdentities.tsx
index e73724ba..7ff60498 100644
--- a/components/identities/availableIdentities.tsx
+++ b/components/identities/availableIdentities.tsx
@@ -148,7 +148,8 @@ const AvailableIdentities = ({ tokenId }: { tokenId: string }) => {
     if (address) {
       // Our Indexer
       fetch(
-        `${process.env.NEXT_PUBLIC_SERVER_LINK
+        `${
+          process.env.NEXT_PUBLIC_SERVER_LINK
         }/addr_to_full_ids?addr=${hexToDecimal(address)}`
       )
         .then((response) => response.json())
@@ -166,14 +167,6 @@ const AvailableIdentities = ({ tokenId }: { tokenId: string }) => {
     localStorage.setItem("SID-lastUsedConnector", connector.id);
   };
 
-  const handleIdentityClick = useCallback((e: React.MouseEvent, domainId: string) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (domainId !== tokenId) {
-      router.push(`/identities/${domainId}`, undefined, { shallow: true });
-    }
-  }, [router, tokenId]);
-
   return (
     <>
       <div className="min-h-[88vh]">
@@ -189,17 +182,17 @@ const AvailableIdentities = ({ tokenId }: { tokenId: string }) => {
               {ownedIdentities.length !== 1 && (
                 <div
                   className={`
-                         ${"border w-[100%] md:w-auto h-[319px] xl:h-auto"} ${styles.sideNav
-                    } relative flex flex-col items-center justify-between sm:px-[24px]  md:pt-[24px] m-auto shadow-sm rounded-2xl `}
+                         ${styles.sideNav} border w-[100%] md:w-auto h-[319px] xl:h-auto relative flex flex-col items-center justify-between sm:px-[24px]  md:pt-[24px] m-auto shadow-sm rounded-2xl `}
                 >
                   <div className="h-full md:min-h-[80%] w-full overflow-y-auto hide-scrollbar flex flex-col gap-[2px] ">
                     {ownedIdentities.map((domain, index) => (
                       <button
-                        className={`${domain.id === router.query.tokenId ||
-                            domain.id === tokenId
+                        className={`${
+                          domain.id === router.query.tokenId ||
+                          domain.id === tokenId
                             ? "text-[#402D28]"
                             : " text-[#CDCCCC] hover:text-[#402D28]"
-                          } font-medium text-lg sm:text-md lg:text-lg leading-5 cursor-pointer border-[#4545451A] border-b-[1px] md:border-none md:py-0 py-6 md:my-3 block w-full text-center xl:text-left`}
+                        } font-medium text-lg sm:text-md lg:text-lg leading-5 cursor-pointer border-[#4545451A] border-b-[1px] md:border-none md:py-0 py-6 md:my-3 block w-full text-center xl:text-left`}
                         key={index}
                         onClick={() => router.push(`/identities/${domain.id}`)}
                       >
diff --git a/components/identities/identityCard.tsx b/components/identities/identityCard.tsx
index d2e2d760..07fb6939 100644
--- a/components/identities/identityCard.tsx
+++ b/components/identities/identityCard.tsx
@@ -45,7 +45,7 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
   return (
     <div className={styles.wrapper}>
       <div className={styles.container}>
-        <div className="lg:mt-10 flex items-center lg:justify-between justify-center sm:text-center gap-3 sm:gap-5 my-2 flex-wrap lg:flex-row sm:flex-col">
+        <div className="lg:mt-10 flex-col flex items-center lg:justify-between justify-center sm:text-center gap-3 sm:gap-5 my-2 flex-wrap lg:flex-row sm:flex-col">
           <div className="my-2 text-center">
             <div
               className={styles.pfpSection}
@@ -199,9 +199,11 @@ const IdentityCard: FunctionComponent<IdentityCardProps> = ({
         </div>
       </div>
       <div className={styles.cardCode}>
-        <p>{convertNumberToFixedLengthString(tokenId)}</p>
+        <p>
+          <span >{convertNumberToFixedLengthString(tokenId)}</span>
+        </p>
         <svg
-          width="300"
+          className="w-full hidden sm:block sm:w-[200px] md:w-[300px]"
           height="6"
           viewBox="0 0 380 6"
           fill="none"
diff --git a/package-lock.json b/package-lock.json
index 97482917..94ffe117 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
         "lottie-react": "^2.4.0",
         "mongodb": "^4.12.1",
         "next": "^14.2.3",
-        "next-axiom": "^1.1.1",
+        "next-axiom": "^1.9.1",
         "nextjs-cors": "^2.1.2",
         "posthog-js": "^1.68.4",
         "qs": "^6.12.1",
@@ -15632,6 +15632,7 @@
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/next-axiom/-/next-axiom-1.9.1.tgz",
       "integrity": "sha512-aSvfZHtGlcaSAGf+5IFTEgDIvqFaHkCUoFu9sNCy5bc8NxEl1v6cYhPZ54X0W9OQ9FyPRiHeD4DjxM/3p3yVRw==",
+      "license": "MIT",
       "dependencies": {
         "use-deep-compare": "^1.2.1",
         "whatwg-fetch": "^3.6.2"
diff --git a/package.json b/package.json
index f1ce7e62..d34561ae 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": " next dev",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "eslint '**/*.{jsx,ts,tsx}'",
@@ -38,7 +38,7 @@
     "lottie-react": "^2.4.0",
     "mongodb": "^4.12.1",
     "next": "^14.2.3",
-    "next-axiom": "^1.1.1",
+    "next-axiom": "^1.9.1",
     "nextjs-cors": "^2.1.2",
     "posthog-js": "^1.68.4",
     "qs": "^6.12.1",
diff --git a/pages/pfpcollections.tsx b/pages/pfpcollections.tsx
index 9d280470..691ec962 100644
--- a/pages/pfpcollections.tsx
+++ b/pages/pfpcollections.tsx
@@ -1,41 +1,135 @@
-import React from "react";
+import React, { useState } from "react";
 import type { NextPage } from "next";
 import styles from "../styles/pfpcollections.module.css";
 import PfpNftCard from "../components/pfpcollections/pfpNftCard";
 import { ourNfts, NftCollections } from "../utils/constants";
+import Step from "@/components/domains/steps/step";
 
 const PFPCollections: NextPage = () => {
+  const [tab, setTab] = useState(0);
+
   return (
-    <div className={styles.container}>
-      <div className={styles.gallery}>
-        <section>
-          <p className={styles.subtitle}>Starknet ID Ecosystem</p>
-          <h2 className={styles.title}>PFP collections</h2>
-          <div className={styles.nfts}>
-            {ourNfts.map((collection, index) => (
-              <PfpNftCard
-                key={index}
-                image={collection.imageUri}
-                name={collection.name}
-                onClick={() => window.open(collection.infoPage)}
+    <div className="w-full flex flex-col xl:flex-row justify-center gap-4 px-3 py-4 lg:px-32 md:px-16 sm:py-12 xl:h-[88vh] mt-[12vh] xl:mt-[calc(12vh + 1rem)]">
+      <aside className={styles.purchaseStepNav} role="navigation">
+        <div>
+          <Step
+            stepIndex={0}
+            currentStep={tab}
+            setStep={setTab}
+            icon={
+              <img
+                src={
+                  tab === 0
+                    ? "/icons/ecosystem-active.svg"
+                    : "/icons/ecosystem-inactive.svg"
+                }
+                alt="Starknet ID Ecosystem"
               />
-            ))}
-          </div>
-        </section>
-        <section>
-          <p className={styles.subtitle}>Overall Starknet Ecosystem</p>
-          <h2 className={styles.title}>Our suggestions</h2>
-          <div className={styles.nfts}>
-            {NftCollections.map((collection, index) => (
-              <PfpNftCard
-                key={index}
-                image={collection.imageUri}
-                name={collection.name}
-                onClick={() => window.open(collection.externalLink)}
+            }
+            label="Starknet ID Ecosystem"
+            showDoneIcon={false}
+            allowSwitchAnytime={true}
+          />
+          <Step
+            stepIndex={1}
+            currentStep={tab}
+            setStep={setTab}
+            icon={
+              <img
+                src={
+                  tab === 1
+                    ? "/icons/starknet-active.svg"
+                    : "/icons/starknet-inactive.svg"
+                }
+                alt="Overall Starknet Ecosystem"
               />
-            ))}
-          </div>
-        </section>
+            }
+            label="Overall Starknet Ecosystem"
+            showDoneIcon={false}
+            allowSwitchAnytime={true}
+          />
+        </div>
+
+        <img
+          src="/visuals/purchaseStepVisual.svg"
+          alt="Domain purchase steps visualization"
+        />
+      </aside>
+
+      <div className={styles.purchaseStepNavMobile} role="navigation">
+        <Step
+          stepIndex={0}
+          currentStep={tab}
+          setStep={setTab}
+          icon={
+            <img
+              src={
+                tab === 0
+                  ? "/icons/ecosystem-active.svg"
+                  : "/icons/ecosystem-inactive.svg"
+              }
+              alt="Starknet ID Ecosystem"
+            />
+          }
+          label="Starknet ID Ecosystem"
+          showDoneIcon={false}
+          allowSwitchAnytime={true}
+        />
+        <Step
+          stepIndex={1}
+          currentStep={tab}
+          setStep={setTab}
+          icon={
+            <img
+              src={
+                tab === 1
+                  ? "/icons/starknet-active.svg"
+                  : "/icons/starknet-inactive.svg"
+              }
+              alt="Overall Starknet Ecosystem"
+            />
+          }
+          label="Overall Starknet Ecosystem"
+          showDoneIcon={false}
+          allowSwitchAnytime={true}
+        />
+
+        <div className="flex justify-center">
+          <img
+            src="/visuals/purchaseStepVisualMobile.svg"
+            alt="Domain purchase steps visualization"
+          />
+        </div>
+      </div>
+
+      <div className="flex-1">
+        {tab === 0 ? (
+          <section>
+            <div className={styles.nfts}>
+              {ourNfts.map((collection, index) => (
+                <PfpNftCard
+                  key={index}
+                  image={collection.imageUri}
+                  name={collection.name}
+                  onClick={() => window.open(collection.infoPage)}
+                />
+              ))}
+            </div>
+          </section>
+        ) : (
+          <section>
+            <div className={styles.nfts}>
+              {NftCollections.map((collection, index) => (
+                <PfpNftCard
+                  key={index}
+                  image={collection.imageUri}
+                  name={collection.name}
+                  onClick={() => window.open(collection.externalLink)}
+                />
+              ))}
+            </div>
+          </section>
+        )}
       </div>
     </div>
   );
diff --git a/pages/search.tsx b/pages/search.tsx
index dbce0497..1376cac5 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -79,8 +79,11 @@ const SearchPage: NextPage = () => {
 
   return (
     <div className={homeStyles.screen}>
-      <div className={styles.container}>
-        <div className="sm:w-2/5 w-4/5 mb-5 mt-2">
+      <div style={{
+        justifyContent:"start",
+        padding:'1rem'
+      }} className={styles.container}>
+        <div className="sm:w-3/5 md:w-2/5 w-4/5 mb-5 mt-2 ">
           <SearchBar
             onChangeTypedValue={(typeValue: string) => setDomain(typeValue)}
             showHistory={false}
diff --git a/public/icons/avatar.svg b/public/icons/avatar.svg
new file mode 100644
index 00000000..87f91e0d
--- /dev/null
+++ b/public/icons/avatar.svg
@@ -0,0 +1,6 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2718 6.21351C14.0275 4.52776 13.0235 3.36201 11.344 2.69601C11.6302 2.54476 11.8153 2.46901 11.8153 2.46901C11.0063 2.18401 10.304 2.01801 9.696 1.94251C10.0157 1.70176 10.2292 1.61026 10.2292 1.61026C5.29125 0.913758 2.85625 3.66026 2.70325 6.21726C1.73575 6.38701 1 7.22776 1 8.24251C1 9.24676 1.72075 10.081 2.674 10.2625C2.783 12.6163 5.349 14.5003 8.49975 14.5003C11.651 14.5003 14.217 12.6163 14.326 10.2625C15.279 10.0808 16 9.24626 16 8.24251C16 7.21951 15.2513 6.37301 14.2718 6.21351ZM2.72525 9.53451C2.14775 9.38451 1.7195 8.86576 1.7195 8.24251C1.7195 7.63851 2.12275 7.13301 2.6735 6.96601C2.68575 7.50651 2.828 8.02326 3.077 8.49951C2.90742 8.82445 2.78879 9.17353 2.72525 9.53451ZM11.637 9.98126C11.969 10.3953 12.1635 10.8788 12.1635 11.3975C12.1635 12.918 10.523 14.15 8.49975 14.15C6.4765 14.15 4.83625 12.918 4.83625 11.3975C4.83625 10.8788 5.0305 10.3953 5.363 9.98126C4.22375 9.29176 3.4945 8.23626 3.4945 7.05151C3.4945 2.81801 8.49975 5.51501 8.49975 5.51501C8.49975 5.51501 13.5052 2.81826 13.5052 7.05151C13.5052 8.23601 12.776 9.29176 11.637 9.98126ZM14.2747 9.53451C14.2111 9.17351 14.0926 8.82438 13.9233 8.49926C14.1722 8.02301 14.3142 7.50626 14.3265 6.96576C14.8772 7.13301 15.2802 7.63826 15.2802 8.24226C15.2802 8.86576 14.8523 9.38451 14.2747 9.53451Z" fill="#CDCCCC"/>
+<path d="M9.03784 10.2014C9.17609 10.2014 9.28784 9.97161 9.28784 9.68711C9.28784 9.40386 9.17609 9.17236 9.03784 9.17236C8.89934 9.17236 8.78784 9.40386 8.78784 9.68711C8.78784 9.97161 8.89934 10.2014 9.03784 10.2014ZM7.96484 10.2014C8.10309 10.2014 8.21484 9.97161 8.21484 9.68711C8.21484 9.40386 8.10309 9.17236 7.96484 9.17236C7.82634 9.17236 7.71484 9.40386 7.71484 9.68711C7.71484 9.97161 7.82634 10.2014 7.96484 10.2014Z" fill="#CDCCCC"/>
+<path d="M10.6719 9.06201C11.1551 9.06201 11.5469 8.55833 11.5469 7.93701C11.5469 7.31569 11.1551 6.81201 10.6719 6.81201C10.1886 6.81201 9.79688 7.31569 9.79688 7.93701C9.79688 8.55833 10.1886 9.06201 10.6719 9.06201Z" fill="#CDCCCC"/>
+<path d="M6.32812 9.06201C6.81137 9.06201 7.20312 8.55833 7.20312 7.93701C7.20312 7.31569 6.81137 6.81201 6.32812 6.81201C5.84488 6.81201 5.45312 7.31569 5.45312 7.93701C5.45312 8.55833 5.84488 9.06201 6.32812 9.06201Z" fill="#CDCCCC"/>
+</svg>
diff --git a/public/icons/ecosystem-active.svg b/public/icons/ecosystem-active.svg
new file mode 100644
index 00000000..edd50f37
--- /dev/null
+++ b/public/icons/ecosystem-active.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00353 3.7431C8.94573 2.70952 8.94573 1.03407 8.00353 0.000488281C7.06132 1.03407 7.06132 2.70983 8.00353 3.7431Z" fill="#402D28"/>
+<path d="M3.74229 8.00017C2.70879 7.05789 1.03349 7.05789 0 8.00017C1.03349 8.94245 2.7091 8.94245 3.74229 8.00017Z" fill="#402D28"/>
+<path d="M8.0033 12.2573C7.0614 13.2909 7.0614 14.9664 8.0033 15.9999C8.94519 14.9664 8.94519 13.2906 8.0033 12.2573Z" fill="#402D28"/>
+<path d="M16.0001 8.00017C14.9666 7.05789 13.2913 7.05789 12.2578 8.00017C13.291 8.94245 14.9666 8.94245 16.0001 8.00017Z" fill="#402D28"/>
+<path d="M11.5776 8.52881H9.9945H8.5317H7.476H4.43041C3.0148 8.52881 1.86719 9.67651 1.86719 11.0923V14.1381H4.91277C6.32839 14.1381 7.476 12.9904 7.476 11.5747V9.3653C7.476 9.07382 7.71224 8.83725 8.004 8.83725C8.29545 8.83725 8.532 9.07351 8.532 9.3653V11.5747C8.532 12.9904 9.67961 14.1381 11.0952 14.1381H14.1408V11.0923C14.1405 9.67621 12.9932 8.52881 11.5776 8.52881Z" fill="#402D28"/>
+<path d="M11.0946 1.86377C9.67899 1.86377 8.53139 3.01147 8.53139 4.42721V6.63657C8.53139 6.92805 8.29514 7.16462 8.00338 7.16462C7.71193 7.16462 7.47538 6.92835 7.47538 6.63657V4.42721C7.47538 3.01147 6.32777 1.86377 4.91216 1.86377H1.86719V4.90961C1.86719 6.32535 3.01479 7.47306 4.43041 7.47306H6.0135H7.4763H8.532H9.99481H11.5779C12.9935 7.47306 14.1411 6.32535 14.1411 4.90961V1.86377H11.0946Z" fill="#402D28"/>
+<path opacity="0.2" d="M5.63939 7.47275H4.4301C3.01449 7.47275 1.86719 6.32535 1.86719 4.90961V1.86377H3.07617V4.90961C3.07617 6.32535 4.22377 7.47275 5.63939 7.47275Z" fill="#402D28"/>
+<path opacity="0.2" d="M10.3672 7.47275H11.5765C12.9921 7.47275 14.1394 6.32535 14.1394 4.90961V1.86377H12.9304V4.90961C12.9304 6.32535 11.7828 7.47275 10.3672 7.47275Z" fill="#402D28"/>
+<path opacity="0.2" d="M5.63939 8.52881H4.4301C3.01449 8.52881 1.86719 9.6762 1.86719 11.0919V14.1378H3.07617V11.0919C3.07617 9.6762 4.22377 8.52881 5.63939 8.52881Z" fill="#402D28"/>
+<path opacity="0.2" d="M10.3672 8.52881H11.5765C12.9921 8.52881 14.1394 9.6762 14.1394 11.0919V14.1378H12.9304V11.0919C12.9304 9.6762 11.7828 8.52881 10.3672 8.52881Z" fill="#402D28"/>
+</svg>
diff --git a/public/icons/ecosystem-inactive.svg b/public/icons/ecosystem-inactive.svg
new file mode 100644
index 00000000..db86920b
--- /dev/null
+++ b/public/icons/ecosystem-inactive.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00353 3.7431C8.94573 2.70952 8.94573 1.03407 8.00353 0.000488281C7.06132 1.03407 7.06132 2.70983 8.00353 3.7431Z" fill="#CDCCCC"/>
+<path d="M3.74229 8.00017C2.70879 7.05789 1.03349 7.05789 0 8.00017C1.03349 8.94245 2.7091 8.94245 3.74229 8.00017Z" fill="#CDCCCC"/>
+<path d="M8.0033 12.2573C7.0614 13.2909 7.0614 14.9664 8.0033 15.9999C8.94519 14.9664 8.94519 13.2906 8.0033 12.2573Z" fill="#CDCCCC"/>
+<path d="M16.0001 8.00017C14.9666 7.05789 13.2913 7.05789 12.2578 8.00017C13.291 8.94245 14.9666 8.94245 16.0001 8.00017Z" fill="#CDCCCC"/>
+<path d="M11.5776 8.52881H9.9945H8.5317H7.476H4.43041C3.0148 8.52881 1.86719 9.67651 1.86719 11.0923V14.1381H4.91277C6.32839 14.1381 7.476 12.9904 7.476 11.5747V9.3653C7.476 9.07382 7.71224 8.83725 8.004 8.83725C8.29545 8.83725 8.532 9.07351 8.532 9.3653V11.5747C8.532 12.9904 9.67961 14.1381 11.0952 14.1381H14.1408V11.0923C14.1405 9.67621 12.9932 8.52881 11.5776 8.52881Z" fill="#CDCCCC"/>
+<path d="M11.0946 1.86377C9.67899 1.86377 8.53139 3.01147 8.53139 4.42721V6.63657C8.53139 6.92805 8.29514 7.16462 8.00338 7.16462C7.71193 7.16462 7.47538 6.92835 7.47538 6.63657V4.42721C7.47538 3.01147 6.32777 1.86377 4.91216 1.86377H1.86719V4.90961C1.86719 6.32535 3.01479 7.47306 4.43041 7.47306H6.0135H7.4763H8.532H9.99481H11.5779C12.9935 7.47306 14.1411 6.32535 14.1411 4.90961V1.86377H11.0946Z" fill="#CDCCCC"/>
+<path opacity="0.2" d="M5.63939 7.47275H4.4301C3.01449 7.47275 1.86719 6.32535 1.86719 4.90961V1.86377H3.07617V4.90961C3.07617 6.32535 4.22377 7.47275 5.63939 7.47275Z" fill="#CDCCCC"/>
+<path opacity="0.2" d="M10.3672 7.47275H11.5765C12.9921 7.47275 14.1394 6.32535 14.1394 4.90961V1.86377H12.9304V4.90961C12.9304 6.32535 11.7828 7.47275 10.3672 7.47275Z" fill="#CDCCCC"/>
+<path opacity="0.2" d="M5.63939 8.52881H4.4301C3.01449 8.52881 1.86719 9.6762 1.86719 11.0919V14.1378H3.07617V11.0919C3.07617 9.6762 4.22377 8.52881 5.63939 8.52881Z" fill="#CDCCCC"/>
+<path opacity="0.2" d="M10.3672 8.52881H11.5765C12.9921 8.52881 14.1394 9.6762 14.1394 11.0919V14.1378H12.9304V11.0919C12.9304 9.6762 11.7828 8.52881 10.3672 8.52881Z" fill="#CDCCCC"/>
+</svg>
diff --git a/public/icons/starknet-active.svg b/public/icons/starknet-active.svg
new file mode 100644
index 00000000..84083590
--- /dev/null
+++ b/public/icons/starknet-active.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.005 1.00003C11.8757 1.01172 15.0003 4.1374 15 7.99759C14.9997 11.8715 11.8464 15.018 7.98248 15C4.11515 14.9823 0.98976 11.8444 1.00003 7.98904C1.01001 4.12571 4.1545 0.988625 8.005 1.00003Z" fill="#402D28"/>
+<path d="M3.40705 7.19203C4.11875 7.04917 4.74606 7.16694 5.27099 7.54218C5.59291 7.77228 5.89602 8.02634 6.17174 8.29694C6.80418 8.91768 7.50619 9.55896 8.35447 10.0437C9.07273 10.4546 9.77246 10.6944 10.4939 10.7776C11.9526 10.9461 13.3244 10.1597 13.9067 8.82159C13.9281 8.77255 13.9805 8.63539 14.0318 8.49539C14.0843 8.35254 14.1257 8.2037 14.1553 8.05314L14.2377 7.63142C13.8314 7.80536 13.4467 7.9753 13.057 8.12899C12.6623 8.28467 12.2534 8.38219 11.8223 8.35026C11.4009 8.31918 11.0288 8.14581 10.6946 7.912C10.0453 7.45778 9.40977 6.98331 8.7799 6.50228C8.19394 6.0549 7.62652 5.58414 6.94047 5.28759C6.24189 4.98535 5.51735 4.8271 4.75832 4.92575C3.6363 5.07146 2.7749 5.63746 2.18694 6.6055C1.96283 6.97475 1.80343 7.37024 1.75781 7.80308C2.23029 7.56641 2.78916 7.31606 3.40733 7.19203H3.40705Z" fill="white"/>
+<path d="M10.8854 11.0836C10.7451 11.0836 10.604 11.0756 10.4614 11.0591C9.70125 10.9715 8.96617 10.7197 8.21397 10.2898C7.33774 9.78905 6.6192 9.13323 5.97336 8.49909C5.70818 8.23876 5.41649 7.99439 5.10654 7.77284C4.64148 7.44037 4.104 7.34114 3.46358 7.47003C2.96972 7.56925 2.51065 7.75602 2.10547 7.94906C2.16307 7.9616 2.22038 7.97529 2.27655 7.99297C2.82459 8.16519 3.3002 8.47485 3.74216 8.82899C4.41508 9.36847 5.06491 9.93675 5.73613 10.4785C6.80482 11.3419 7.98586 11.9621 9.3819 12.087C10.3092 12.17 11.1843 11.9912 11.9861 11.5141C12.7505 11.0591 13.306 10.4437 13.7043 9.71035C13.0337 10.5715 12.0023 11.0836 10.8857 11.0836H10.8854Z" fill="white"/>
+<path d="M11.4223 3.95996C11.4662 4.02554 11.5013 4.06118 11.5164 4.10367C11.5686 4.25194 11.6165 4.40164 11.6613 4.55248C11.7074 4.70788 11.8055 4.80539 11.9612 4.85045C12.1166 4.89521 12.2717 4.94226 12.4246 4.9953C12.4625 5.00841 12.4907 5.0489 12.5232 5.07685C12.4902 5.10935 12.4628 5.15611 12.4229 5.17151C12.2894 5.22312 12.1531 5.27045 12.0148 5.3061C11.8201 5.35628 11.7029 5.47005 11.6558 5.66737C11.6216 5.81107 11.5731 5.95165 11.523 6.09079C11.5098 6.12672 11.4662 6.15153 11.4363 6.18175C11.4066 6.15124 11.3636 6.12587 11.3502 6.08965C11.294 5.93796 11.2432 5.78427 11.1971 5.62916C11.1509 5.47347 11.0548 5.37595 10.8974 5.33233C10.7414 5.28927 10.5863 5.24165 10.4337 5.18862C10.3958 5.1755 10.3684 5.13302 10.3359 5.10393C10.369 5.07086 10.3961 5.02238 10.436 5.00756C10.5832 4.95281 10.7337 4.90633 10.8845 4.86185C11.0448 4.81452 11.1466 4.71643 11.1908 4.55276C11.2316 4.40107 11.2795 4.25109 11.3299 4.10224C11.3445 4.06004 11.3795 4.02469 11.4226 3.95996H11.4223Z" fill="white"/>
+<path d="M4.53363 11.53C4.53505 11.7442 4.37309 11.9087 4.1601 11.9104C3.9394 11.9121 3.77174 11.7464 3.77345 11.5283C3.77516 11.3162 3.93969 11.1548 4.15468 11.1548C4.36996 11.1548 4.53249 11.3159 4.53391 11.53H4.53363Z" fill="white"/>
+</svg>
diff --git a/public/icons/starknet-inactive.svg b/public/icons/starknet-inactive.svg
new file mode 100644
index 00000000..218cc335
--- /dev/null
+++ b/public/icons/starknet-inactive.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.005 1.00003C11.8757 1.01172 15.0003 4.1374 15 7.99759C14.9997 11.8715 11.8464 15.018 7.98248 15C4.11515 14.9823 0.98976 11.8444 1.00003 7.98904C1.01001 4.12571 4.1545 0.988625 8.005 1.00003Z" fill="#CDCCCC"/>
+<path d="M3.40705 7.19203C4.11875 7.04917 4.74606 7.16694 5.27099 7.54218C5.59291 7.77228 5.89602 8.02634 6.17174 8.29694C6.80418 8.91768 7.50619 9.55896 8.35447 10.0437C9.07273 10.4546 9.77246 10.6944 10.4939 10.7776C11.9526 10.9461 13.3244 10.1597 13.9067 8.82159C13.9281 8.77255 13.9805 8.63539 14.0318 8.49539C14.0843 8.35254 14.1257 8.2037 14.1553 8.05314L14.2377 7.63142C13.8314 7.80536 13.4467 7.9753 13.057 8.12899C12.6623 8.28467 12.2534 8.38219 11.8223 8.35026C11.4009 8.31918 11.0288 8.14581 10.6946 7.912C10.0453 7.45778 9.40977 6.98331 8.7799 6.50228C8.19394 6.0549 7.62652 5.58414 6.94047 5.28759C6.24189 4.98535 5.51735 4.8271 4.75832 4.92575C3.6363 5.07146 2.7749 5.63746 2.18694 6.6055C1.96283 6.97475 1.80343 7.37024 1.75781 7.80308C2.23029 7.56641 2.78916 7.31606 3.40733 7.19203H3.40705Z" fill="white"/>
+<path d="M10.8854 11.0836C10.7451 11.0836 10.604 11.0756 10.4614 11.0591C9.70125 10.9715 8.96617 10.7197 8.21397 10.2898C7.33774 9.78905 6.6192 9.13323 5.97336 8.49909C5.70818 8.23876 5.41649 7.99439 5.10654 7.77284C4.64148 7.44037 4.104 7.34114 3.46358 7.47003C2.96972 7.56925 2.51065 7.75602 2.10547 7.94906C2.16307 7.9616 2.22038 7.97529 2.27655 7.99297C2.82459 8.16519 3.3002 8.47485 3.74216 8.82899C4.41508 9.36847 5.06491 9.93675 5.73613 10.4785C6.80482 11.3419 7.98586 11.9621 9.3819 12.087C10.3092 12.17 11.1843 11.9912 11.9861 11.5141C12.7505 11.0591 13.306 10.4437 13.7043 9.71035C13.0337 10.5715 12.0023 11.0836 10.8857 11.0836H10.8854Z" fill="white"/>
+<path d="M11.4223 3.95996C11.4662 4.02554 11.5013 4.06118 11.5164 4.10367C11.5686 4.25194 11.6165 4.40164 11.6613 4.55248C11.7074 4.70788 11.8055 4.80539 11.9612 4.85045C12.1166 4.89521 12.2717 4.94226 12.4246 4.9953C12.4625 5.00841 12.4907 5.0489 12.5232 5.07685C12.4902 5.10935 12.4628 5.15611 12.4229 5.17151C12.2894 5.22312 12.1531 5.27045 12.0148 5.3061C11.8201 5.35628 11.7029 5.47005 11.6558 5.66737C11.6216 5.81107 11.5731 5.95165 11.523 6.09079C11.5098 6.12672 11.4662 6.15153 11.4363 6.18175C11.4066 6.15124 11.3636 6.12587 11.3502 6.08965C11.294 5.93796 11.2432 5.78427 11.1971 5.62916C11.1509 5.47347 11.0548 5.37595 10.8974 5.33233C10.7414 5.28927 10.5863 5.24165 10.4337 5.18862C10.3958 5.1755 10.3684 5.13302 10.3359 5.10393C10.369 5.07086 10.3961 5.02238 10.436 5.00756C10.5832 4.95281 10.7337 4.90633 10.8845 4.86185C11.0448 4.81452 11.1466 4.71643 11.1908 4.55276C11.2316 4.40107 11.2795 4.25109 11.3299 4.10224C11.3445 4.06004 11.3795 4.02469 11.4226 3.95996H11.4223Z" fill="white"/>
+<path d="M4.53363 11.53C4.53505 11.7442 4.37309 11.9087 4.1601 11.9104C3.9394 11.9121 3.77174 11.7464 3.77345 11.5283C3.77516 11.3162 3.93969 11.1548 4.15468 11.1548C4.36996 11.1548 4.53249 11.3159 4.53391 11.53H4.53363Z" fill="white"/>
+</svg>
diff --git a/styles/components/identityCard.module.css b/styles/components/identityCard.module.css
index 1cfbc773..cec34bca 100644
--- a/styles/components/identityCard.module.css
+++ b/styles/components/identityCard.module.css
@@ -80,7 +80,7 @@
 .cardCode {
   /* Placement */
   background-color: var(--background-white);
-  height: 83px;
+  min-height: 83px;
   width: 650px;
   max-width: 650px;
   border-width: 0px 6px 4px 2px;
@@ -101,6 +101,7 @@
   font-size: 18px;
   line-height: 32px;
   letter-spacing: 0.8em;
+  text-indent: 0.9em;
   color: var(--identity-card-footer-text);
 }
 
@@ -362,3 +363,4 @@
     padding-bottom: 0;
   }
 }
+
diff --git a/styles/components/pfpNftCard.module.css b/styles/components/pfpNftCard.module.css
index afacf86d..99ddcf63 100644
--- a/styles/components/pfpNftCard.module.css
+++ b/styles/components/pfpNftCard.module.css
@@ -1,58 +1,53 @@
 .nftCard {
   display: flex;
-  padding: 1rem;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   cursor: pointer;
+  gap: 10px;
 
-  border-radius: 20px;
-  background: var(--background-light);
-  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.06);
-  width: 296px;
-  border: 1px solid var(--background-light);
-  transition: all 0.2s ease-in-out;
-  gap: 1rem;
+  width: 156px;
+  padding: 8px;
+  border-radius: 16px;
+  background: #fff;    
+  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.06);
+  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
 }
 
 .nftCard:hover {
-  border: 1px solid #eae0d5;
-  box-shadow: var(--large-shadow);
+  transform: translateY(-2px); 
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
 }
 
 .nftCardImg {
-  width: 264px;
-  height: 200px;
-  border-radius: 20px;
-  object-fit: contain;
-  background-size: 100% auto;
+  width: 100%;
+  height: 106px;
+  border-radius: 12px;
   background-position: center;
-  transition: 0.2s ease-in-out;
   background-repeat: no-repeat;
+  background-size: 100%;
+  transition: background-size 0.2s ease-in-out;
 }
 
 .nftCard:hover .nftCardImg {
-  background-size: 110% auto;
+  background-size: 110%; 
 }
 
 .nftCollectionName {
-  color: var(--secondary);
-  font-family: "QuickZap";
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px; /* 111.111% */
-  width: 100%;
+  color: #444;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
 }
 
 @media (max-width: 768px) {
   .nftCard {
-    width: calc(100% - 2rem);
-    margin-left: auto;
-    margin-right: auto;
+    width: 100%;
+    max-width: 200px; 
+    height: auto;
   }
+
   .nftCardImg {
     width: 100%;
-    aspect-ratio: 264 / 200;
+    height: 120px;
   }
 }
diff --git a/styles/components/registerV3.module.css b/styles/components/registerV3.module.css
index a69622a2..2a8b8cdf 100644
--- a/styles/components/registerV3.module.css
+++ b/styles/components/registerV3.module.css
@@ -263,6 +263,7 @@
   overflow: hidden;
   margin-left: auto;
   margin-right: auto;
+  padding-top: 1rem;
 }
 
 @media (min-width: 1280px) {
@@ -317,11 +318,16 @@
   font-family: "Poppins-Bold";
 }
 
-.disabledStep {
+.disabledStep,
+.unselectedStep {
   color: var(--border-color);
   cursor: not-allowed;
 }
 
+.unselectedStep {
+  cursor: pointer;
+}
+
 .stepText {
   font-size: 14px;
   font-weight: 500;
@@ -463,7 +469,8 @@
     padding: 5px;
   }
 
-  .disabledStep {
+  .disabledStep,
+  .unselectedStep {
     padding: 5px;
   }
 
@@ -526,7 +533,8 @@
     padding: 0px;
   }
 
-  .disabledStep {
+  .disabledStep,
+  .unselectedStep {
     padding: 0px;
   }
 }
@@ -552,7 +560,8 @@
     padding: 0px;
   }
 
-  .disabledStep {
+  .disabledStep,
+  .unselectedStep {
     padding: 0px;
   }
 }
diff --git a/styles/pfpcollections.module.css b/styles/pfpcollections.module.css
index 3b5977c1..a1d2b56a 100644
--- a/styles/pfpcollections.module.css
+++ b/styles/pfpcollections.module.css
@@ -1,25 +1,13 @@
 .container {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  max-width: 90%;
-  width: -webkit-fill-available;
-  margin: 12vh auto 0 auto;
-  height: 100%;
-  overflow-y: auto;
-}
-
-.gallery {
-  margin: 3rem 40px 4rem;
-  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;
-  display: flex;
-  flex-direction: column;
-  gap: 4rem;
+  width: 100%;
+  background-color: var(--background);
+  justify-content: space-between;
+  border-radius: 1rem;
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
 }
 
 .subtitle {
@@ -44,7 +32,26 @@
 .nfts {
   display: flex;
   flex-wrap: wrap;
-  gap: 2rem;
+  gap: 10px;
+  justify-content: center;
+}
+
+.purchaseStepNav {
+  display: none;
+}
+
+.purchaseStepNavMobile {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  border: 1px solid #4545451a;
+  border-radius: 16px;
+  overflow: hidden;
+  margin-left: auto;
+  margin-right: auto;
+  justify-content: center;
+  align-items: center;
+  padding-top: 1rem;
 }
 
 @media (max-width: 768px) {
@@ -60,12 +67,37 @@
     width: 100%;
     padding-right: 0;
   }
-  .gallery {
-    margin: 0;
-    padding: 2rem 1rem;
-    width: calc(100% - 2rem);
-    margin-left: 1rem;
-    margin-bottom: 3rem;
-    gap: 3rem;
+  .nfts {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    padding: 1rem;
+  }
+  .purchaseStepNavMobile {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+@media (min-width: 1280px) {
+  .purchaseStepNav {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 200px;
+    flex-shrink: 0;
+    background-color: white;
+    border: 1px solid #4545451a;
+    border-radius: 16px;
+    overflow: hidden;
+  }
+
+  .purchaseStepNavMobile {
+    display: none;
+  }
+
+  .step {
+    padding: 12px;
   }
 }
diff --git a/styles/search.module.css b/styles/search.module.css
index 4918ce6c..833c5420 100644
--- a/styles/search.module.css
+++ b/styles/search.module.css
@@ -5,6 +5,7 @@
   text-align: center;
   justify-content: center;
   position: relative;
+  width: 100%;
   min-height: 100vh;
   height: auto;
   justify-items: center;
@@ -17,6 +18,12 @@
   }
 }
 
+@media (max-width: 1280px) {
+  .container {
+    justify-content: flex-start;
+  }
+}
+
 .searchContainer {
   display: flex;
   flex-direction: column;
@@ -287,8 +294,4 @@
     margin: 0 1.5rem;
     max-width: calc(100% - 3rem);
   }
-
-  .container {
-    justify-content: flex-start;
-  }
 }