diff --git a/frontend/src/components/Buttons/_Button.scss b/frontend/src/components/Buttons/_Button.scss
index 34908d93..ecdeb7d0 100644
--- a/frontend/src/components/Buttons/_Button.scss
+++ b/frontend/src/components/Buttons/_Button.scss
@@ -102,18 +102,18 @@ $theme-values: (
     ),
   ),
   "primary-dark": (
-    "background-color": $color-blue,
-    "color": $color-white,
+    "background-color": $color-white,
+    "color": $color-blue-dark,
     "focus": (
-      "background-color": $color-blue-focused,
+      "background-color": $color-blue-dark-focused,
     ),
     "hover": (
-      "background-color": $color-white,
+      "background-color": $color-blue-dark-hover,
       "box-shadow": 0 4px 4px rgb(0 0 0 / 20%),
-      "color": $color-charcoal,
+      "color": $color-white,
     ),
     "active": (
-      "background-color": $color-blue-focused,
+      "background-color": $color-blue-dark-focused,
     ),
   ),
 );
diff --git a/frontend/src/context/QualifiersContext.tsx b/frontend/src/context/QualifiersContext.tsx
index b0b32b20..6056a6a8 100644
--- a/frontend/src/context/QualifiersContext.tsx
+++ b/frontend/src/context/QualifiersContext.tsx
@@ -6,6 +6,8 @@ type QualifiersType = {
   COPs: {
     [copName: string]: string[];
   };
+  selectedCOP?: string;
+  skills_matrix?: { [skill: string]: string };
   // availabilityTimeSlots: string[];
 };
 
@@ -53,6 +55,7 @@ export const QualifiersProvider: React.FC<{ children: ReactNode }> = ({
   const [qualifiers, setQualifiers] = useState<QualifiersType>(initialState);
 
   const updateQualifiers = (newQualifiers: QualifiersType) => {
+    console.log("Updated Qualifiers:", newQualifiers); // Log the updated qualifiers TO DELETE
     setQualifiers(newQualifiers);
   };
 
diff --git a/frontend/src/pages/QualifierPage/components/ProgressIndicator.tsx b/frontend/src/pages/QualifierPage/components/ProgressIndicator.tsx
new file mode 100644
index 00000000..34f4e024
--- /dev/null
+++ b/frontend/src/pages/QualifierPage/components/ProgressIndicator.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+
+interface ProgressIndicatorProps {
+  currentPart: number;
+  totalParts: number;
+  title: string;
+  progressPercentage: number; // New prop
+}
+
+export const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({
+  currentPart,
+  totalParts,
+  title,
+  progressPercentage,
+}) => {
+  // Ensure progressPercentage is clamped between 0 and 100
+  const validProgressPercentage = Math.min(
+    Math.max(progressPercentage, 0),
+    100,
+  );
+  const strokeDashoffset = 62.8 - (62.8 * validProgressPercentage) / 100;
+
+  return (
+    <div className="flex items-center gap-2">
+      <svg
+        className="text-blue-dark"
+        width="40"
+        height="40"
+        viewBox="0 0 36 36"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle
+          cx="18"
+          cy="18"
+          r="10"
+          fill="none"
+          stroke="#e6e6e6"
+          strokeWidth="4"
+        />
+        <circle
+          cx="18"
+          cy="18"
+          r="10"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="4"
+          strokeDasharray="62.8, 62.8"
+          strokeDashoffset={strokeDashoffset}
+          transform="rotate(-90 18 18)"
+        />
+      </svg>
+      <div className="flex flex-col">
+        <span className="font-bold text-charcoal">
+          Part {currentPart} of {totalParts}
+        </span>
+        <span className="text-charcoal">{title}</span>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/pages/QualifierPage/components/QualifierNav.tsx b/frontend/src/pages/QualifierPage/components/QualifierNav.tsx
index eda178ed..9095b919 100644
--- a/frontend/src/pages/QualifierPage/components/QualifierNav.tsx
+++ b/frontend/src/pages/QualifierPage/components/QualifierNav.tsx
@@ -11,11 +11,13 @@ function QualifierNav({ className, children }: QualifierNavProps) {
   return (
     <div
       className={clsx(
-        "border-px sticky bottom-0 box-content flex h-20 w-4/5 flex-wrap items-center rounded-lg border-[#D8D8D8] bg-[#FDFDFD] px-6 opacity-80 shadow-[0_8px_25px_#00000014] hover:opacity-100",
+        "sticky bottom-0 box-content flex h-16 w-full flex-wrap items-center rounded-lg border border-[#E0E0E0] bg-[#FDFDFD] opacity-80 shadow-[0_8px_25px_#00000014] hover:opacity-100",
         className,
       )}
     >
-      {children}
+      <div className="flex w-full items-center justify-between px-6">
+        {children}
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/pages/QualifierPage/components/RadioButtonForm.tsx b/frontend/src/pages/QualifierPage/components/RadioButtonForm.tsx
index eb11157b..79c15eb2 100644
--- a/frontend/src/pages/QualifierPage/components/RadioButtonForm.tsx
+++ b/frontend/src/pages/QualifierPage/components/RadioButtonForm.tsx
@@ -3,7 +3,36 @@ import React from "react";
 // Internal Imports
 import Typography from "tw-components/Typography";
 
-function RadioButtonForm() {
+interface RadioButtonFormProps {
+  onSkillSelect: (skill: string, level: string) => void;
+  selectedSkillsLevel: Record<string, string>;
+}
+
+const skills = [
+  {
+    name: "User Research Methods",
+    description: "Interviews, surveys, and usability testing",
+  },
+  {
+    name: "User Personas & Journey Mapping",
+    description:
+      "Developing representative user profiles and mapping user journeys",
+  },
+  {
+    name: "Information Architecture",
+    description:
+      "E.g., creating site maps, navigation flows, or using card sorting",
+  },
+  {
+    name: "Wireframing & Sketching",
+    description: "low-fidelity layouts to visualize structure and flow",
+  },
+];
+
+function RadioButtonForm({
+  onSkillSelect,
+  selectedSkillsLevel,
+}: RadioButtonFormProps) {
   return (
     <table className="w-full table-fixed border-collapse text-charcoal">
       <thead>
@@ -29,22 +58,15 @@ function RadioButtonForm() {
         </tr>
       </thead>
       <tbody>
-        <SkillRow
-          skillName="User Research Methods"
-          description="Interviews, surveys, and usability testing"
-        />
-        <SkillRow
-          skillName="User Personas & Journey Mapping"
-          description="Developing representative user profiles and mapping user journeys"
-        />
-        <SkillRow
-          skillName="Information Architecture"
-          description="E.g., creating site maps, navigation flows, or using card sorting"
-        />
-        <SkillRow
-          skillName="Wireframing & Sketching"
-          description="low-fidelity layouts to visualize structure and flow"
-        />
+        {skills.map((skill) => (
+          <SkillRow
+            key={skill.name}
+            skillName={skill.name}
+            description={skill.description}
+            onSkillSelect={onSkillSelect}
+            selectedLevel={selectedSkillsLevel[skill.name]}
+          />
+        ))}
       </tbody>
     </table>
   );
@@ -53,9 +75,16 @@ function RadioButtonForm() {
 interface SkillRowProps {
   skillName: string;
   description: string;
+  onSkillSelect: (skill: string, level: string) => void;
+  selectedLevel?: string;
 }
 
-function SkillRow({ skillName, description }: SkillRowProps) {
+function SkillRow({
+  skillName,
+  description,
+  onSkillSelect,
+  selectedLevel,
+}: SkillRowProps) {
   return (
     <tr className="border-b-2 border-grey last:border-0">
       <td className="pb-7 pt-6">
@@ -65,13 +94,28 @@ function SkillRow({ skillName, description }: SkillRowProps) {
         </Typography.Paragraph3>
       </td>
       <td>
-        <RadioButton name={skillName} value="0-2yrs" />
+        <RadioButton
+          name={skillName}
+          value="0-2yrs"
+          checked={selectedLevel === "0-2yrs"}
+          onChange={() => onSkillSelect(skillName, "0-2yrs")}
+        />
       </td>
       <td>
-        <RadioButton name={skillName} value="2-4yrs" />
+        <RadioButton
+          name={skillName}
+          value="2-4yrs"
+          checked={selectedLevel === "2-4yrs"}
+          onChange={() => onSkillSelect(skillName, "2-4yrs")}
+        />
       </td>
       <td>
-        <RadioButton name={skillName} value="4+yrs" />
+        <RadioButton
+          name={skillName}
+          value="4+yrs"
+          checked={selectedLevel === "4+yrs"}
+          onChange={() => onSkillSelect(skillName, "4+yrs")}
+        />
       </td>
     </tr>
   );
@@ -80,14 +124,18 @@ function SkillRow({ skillName, description }: SkillRowProps) {
 interface RadioButtonProps {
   value: string;
   name: string;
+  checked?: boolean;
+  onChange: () => void;
 }
 
-function RadioButton({ value, name }: RadioButtonProps) {
+function RadioButton({ value, name, checked, onChange }: RadioButtonProps) {
   return (
     <input
       type="radio"
       name={name}
       value={value}
+      checked={checked}
+      onChange={onChange}
       className="size-8 border-2 border-grey-dark checked:bg-blue-dark"
     />
   );
diff --git a/frontend/src/pages/QualifierPage/pages/QualifierPage1.tsx b/frontend/src/pages/QualifierPage/pages/QualifierPage1.tsx
index 0093643b..f9eca4e6 100644
--- a/frontend/src/pages/QualifierPage/pages/QualifierPage1.tsx
+++ b/frontend/src/pages/QualifierPage/pages/QualifierPage1.tsx
@@ -1,21 +1,22 @@
 // External Imports
-import React, { useState, useEffect } from "react";
+import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import clsx from "clsx";
 
 // Internal Imports
 import { copDatum, fetchAllCopData } from "api_data/copData";
 import Typography from "tw-components/Typography";
-import { Button } from "components/components";
+import { Button } from "tw-components/Buttons";
 import { QualifierNav } from "../components/QualifierNav";
+import { IconCheckMark } from "assets/images/images";
+import { useQualifiersContext } from "context/QualifiersContext";
 
 function QualifierPage1() {
   const navigate = useNavigate();
-  const [copData, setCopData] = useState<copDatum[]>([] as copDatum[]);
-  const [selectedCOP, setSelectedCOP] = useState<number>(-1);
+  const { copData, qualifiers, updateQualifiers } = useQualifiersContext();
 
   useEffect(() => {
-    setCopData(fetchAllCopData());
+    fetchAllCopData();
   }, []);
 
   const handleSelectCOP = (
@@ -23,12 +24,17 @@ function QualifierPage1() {
     cop: copDatum,
   ) => {
     e.stopPropagation();
-    setSelectedCOP(cop.id);
+
+    const newQualifiers = {
+      ...qualifiers,
+      selectedCOP: cop.title,
+    };
+    updateQualifiers(newQualifiers);
   };
 
   return (
     <>
-      <div className="flex h-full w-full flex-col items-center px-5 pb-10">
+      <div className="flex h-full w-full flex-col items-center justify-between px-5 pb-10">
         <Typography.Title2 className="mt-8 text-charcoal">
           What type of Practice Area are you looking for?
         </Typography.Title2>
@@ -37,54 +43,70 @@ function QualifierPage1() {
         </Typography.Paragraph3>
 
         {/* COP Cards */}
-        <div className="flex min-w-fit flex-wrap gap-10">
-          {copData.map((cop) => {
-            const isSelected = selectedCOP === cop.id;
+        <div className="w-4/5">
+          <div className="grid w-full grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
+            {copData.map((cop) => {
+              const isSelected = qualifiers.selectedCOP === cop.title;
 
-            return (
-              <div
-                key={cop.id}
-                className={clsx(
-                  "flex min-w-80 flex-col rounded-lg border px-5 py-6 shadow-[0_5px_15px_#00000026] hover:cursor-pointer hover:border-blue-dark",
-                  isSelected
-                    ? "border-blue-dark bg-[#EDF2FF]"
-                    : "border-transparent",
-                )}
-                onClick={(e) => handleSelectCOP(e, cop)}
-                role="button"
-                tabIndex={0}
-              >
+              return (
                 <div
+                  key={cop.id}
                   className={clsx(
-                    "ml-auto flex size-16 items-center justify-center rounded-full  text-blue-dark",
-                    isSelected ? "bg-white" : "bg-[#EFF3FF]",
+                    "flex min-w-60 flex-col rounded-lg border px-5 py-6 shadow-[0_5px_15px_#00000026] hover:cursor-pointer hover:border-blue-dark",
+                    isSelected
+                      ? "border-blue-dark bg-[#EDF2FF]"
+                      : "border-transparent",
                   )}
+                  onClick={(e) => handleSelectCOP(e, cop)}
+                  role="button"
+                  tabIndex={0}
                 >
-                  <cop.icon strokeWidth="0.2" height="25" aria-hidden="true" />
+                  <div
+                    className={clsx(
+                      "ml-auto flex size-12 items-center justify-center rounded-full  text-blue-dark",
+                      isSelected ? "bg-white" : "bg-[#EFF3FF]",
+                    )}
+                  >
+                    <cop.icon
+                      strokeWidth="0.2"
+                      height="25"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <Typography.Title5 className="mt-10 text-charcoal">
+                    {cop.title}
+                  </Typography.Title5>
+                  <Typography.Paragraph5 className="mt-2 text-grey-dark">
+                    {cop.subtitle}
+                  </Typography.Paragraph5>
                 </div>
-                <Typography.Title5 className="mt-10 text-charcoal">
-                  {cop.title}
-                </Typography.Title5>
-                <Typography.Paragraph5 className="mt-2 text-grey-dark">
-                  {cop.subtitle}
-                </Typography.Paragraph5>
+              );
+            })}
+          </div>
+          <QualifierNav
+            className={`mt-20 justify-between ${
+              !qualifiers.selectedCOP && "hidden"
+            }`}
+          >
+            <div className="ml-4 flex items-center">
+              <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-dark">
+                <IconCheckMark height="12" width="12" aria-hidden="true" />
               </div>
-            );
-          })}
+              <Typography.Paragraph3 className="ml-2 font-bold text-charcoal">
+                Practice Area: Complete
+              </Typography.Paragraph3>
+            </div>
+            <Button
+              size="medium"
+              onClick={() => {
+                navigate("../2", { relative: "path" });
+              }}
+            >
+              Continue
+            </Button>
+          </QualifierNav>
         </div>
       </div>
-      <QualifierNav className={`justify-end ${selectedCOP === -1 && "hidden"}`}>
-        <Button
-          size="lg"
-          length="long"
-          color="primary"
-          onClick={() => {
-            navigate("../2", { relative: "path" });
-          }}
-        >
-          Continue
-        </Button>
-      </QualifierNav>
     </>
   );
 }
diff --git a/frontend/src/pages/QualifierPage/pages/QualifierPage2.tsx b/frontend/src/pages/QualifierPage/pages/QualifierPage2.tsx
index c88370f5..dae77188 100644
--- a/frontend/src/pages/QualifierPage/pages/QualifierPage2.tsx
+++ b/frontend/src/pages/QualifierPage/pages/QualifierPage2.tsx
@@ -4,15 +4,29 @@ import { useNavigate } from "react-router-dom";
 
 // Internal Imports
 import Typography from "tw-components/Typography";
-import { Button, IconButton } from "components/components";
-import { iconArrowLeft } from "assets/images/images";
+import { Button } from "tw-components/Buttons";
 import { QualifierNav } from "../components/QualifierNav";
-
 import { RadioButtonForm } from "../components/RadioButtonForm";
-// import { ChipsSelection } from "../components/ChipsSelection";
+import { ProgressIndicator } from "../components/ProgressIndicator";
+import { useQualifiersContext } from "context/QualifiersContext";
 
 function QualifierPage2() {
   const navigate = useNavigate();
+  const { qualifiers, updateQualifiers } = useQualifiersContext();
+
+  const handleSkillSelect = (skill: string, level: string) => {
+    const newSkillsMatrix = {
+      ...qualifiers.skills_matrix,
+      [skill]: level,
+    };
+
+    const newQualifiers = {
+      ...qualifiers,
+      skills_matrix: newSkillsMatrix,
+    };
+
+    updateQualifiers(newQualifiers);
+  };
 
   return (
     <>
@@ -23,27 +37,38 @@ function QualifierPage2() {
         <Typography.Paragraph3 className="my-5 text-grey-dark">
           Evaluate each skill based on your experience
         </Typography.Paragraph3>
-
-        <RadioButtonForm />
-        {/* <ChipsSelection /> */}
-      </div>
-      <QualifierNav className="justify-between">
-        <IconButton
-          label="previous page"
-          iconUrl={iconArrowLeft}
-          onClick={() => navigate("../1", { relative: "path" })}
+        <RadioButtonForm
+          onSkillSelect={handleSkillSelect}
+          selectedSkillsLevel={qualifiers.skills_matrix || {}}
         />
-        <Button
-          size="lg"
-          length="long"
-          color="primary"
-          onClick={() => {
-            navigate("../3", { relative: "path" });
-          }}
-        >
-          Next
-        </Button>
-      </QualifierNav>
+      </div>
+      <div className="w-4/5">
+        <QualifierNav className="items-center justify-between">
+          <ProgressIndicator
+            currentPart={1}
+            totalParts={5}
+            title="INSERT TITLE"
+            progressPercentage={10}
+          />
+          <div className="flex gap-4">
+            <Button
+              size="medium-long"
+              variant="primary-dark"
+              onClick={() => navigate("../1", { relative: "path" })}
+            >
+              Back
+            </Button>
+            <Button
+              size="medium-long"
+              onClick={() => {
+                navigate("../3", { relative: "path" });
+              }}
+            >
+              Next
+            </Button>
+          </div>
+        </QualifierNav>
+      </div>
     </>
   );
 }
diff --git a/frontend/src/tw-components/Buttons.tsx b/frontend/src/tw-components/Buttons.tsx
index 3a5fb91d..4f30901f 100644
--- a/frontend/src/tw-components/Buttons.tsx
+++ b/frontend/src/tw-components/Buttons.tsx
@@ -52,7 +52,6 @@ const variantStyles: Record<ButtonVariant, string> = {
   `,
 };
 
-// Base Button, no text, just styling
 const BaseButton: React.FC<BaseButtonProps> = ({
   size = "medium",
   disabled = false,
diff --git a/frontend/src/tw-components/Dialog.tsx b/frontend/src/tw-components/Dialog.tsx
index 9a4b4fa4..59da9f7b 100644
--- a/frontend/src/tw-components/Dialog.tsx
+++ b/frontend/src/tw-components/Dialog.tsx
@@ -28,7 +28,6 @@ function Dialog({ open = false, ...props }: DialogProps) {
     }
   }, [isBackdropOpen]);
 
-
   useEffect(() => {
     if (open) {
       setIsBackdropOpen(true);