diff --git a/frontend/cntr/CopyButton/CopyButton.test.tsx b/frontend/cntr/CopyButton/CopyButton.test.tsx
new file mode 100644
index 0000000..ce3addb
--- /dev/null
+++ b/frontend/cntr/CopyButton/CopyButton.test.tsx
@@ -0,0 +1,116 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import CopyButton from './CopyButton';
+
+describe('CopyButton', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: jest.fn().mockResolvedValue(undefined),
+      },
+    });
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+  });
+
+  it('renders default Copy label', () => {
+    render(<CopyButton text="hello" />);
+
+    expect(
+      screen.getByRole('button', { name: /copy/i }),
+    ).toBeInTheDocument();
+  });
+
+  it('renders custom label', () => {
+    render(
+      <CopyButton
+        text="hello"
+        label="Copy API Key"
+      />,
+    );
+
+    expect(
+      screen.getByRole('button', {
+        name: /copy api key/i,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('copies text using clipboard api', async () => {
+    render(<CopyButton text="workspace-123" />);
+
+    fireEvent.click(
+      screen.getByRole('button'),
+    );
+
+    await waitFor(() => {
+      expect(
+        navigator.clipboard.writeText,
+      ).toHaveBeenCalledWith(
+        'workspace-123',
+      );
+    });
+  });
+
+  it('shows copied confirmation', async () => {
+    render(<CopyButton text="abc" />);
+
+    fireEvent.click(
+      screen.getByRole('button'),
+    );
+
+    expect(
+      await screen.findByText(/copied!/i),
+    ).toBeInTheDocument();
+  });
+
+  it('returns to default label after 2000ms', async () => {
+    render(<CopyButton text="abc" />);
+
+    fireEvent.click(
+      screen.getByRole('button'),
+    );
+
+    expect(
+      await screen.findByText(/copied!/i),
+    ).toBeInTheDocument();
+
+    jest.advanceTimersByTime(2000);
+
+    expect(
+      screen.getByRole('button', {
+        name: /copy/i,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('falls back to execCommand when clipboard api is unavailable', () => {
+    Object.defineProperty(
+      navigator,
+      'clipboard',
+      {
+        value: undefined,
+        configurable: true,
+      },
+    );
+
+    const execSpy = jest
+      .spyOn(document, 'execCommand')
+      .mockImplementation(() => true);
+
+    render(<CopyButton text="fallback-text" />);
+
+    fireEvent.click(
+      screen.getByRole('button'),
+    );
+
+    expect(execSpy).toHaveBeenCalledWith(
+      'copy',
+    );
+  });
+});
\ No newline at end of file
diff --git a/frontend/cntr/CopyButton/CopyButton.tsx b/frontend/cntr/CopyButton/CopyButton.tsx
new file mode 100644
index 0000000..e409023
--- /dev/null
+++ b/frontend/cntr/CopyButton/CopyButton.tsx
@@ -0,0 +1,95 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+interface CopyButtonProps {
+  text: string;
+  label?: string;
+}
+
+const COPY_TIMEOUT_MS = 2000;
+
+export default function CopyButton({
+  text,
+  label = 'Copy',
+}: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<number | null>(null);
+
+  const fallbackCopy = (value: string) => {
+    const textarea = document.createElement('textarea');
+
+    textarea.value = value;
+    textarea.setAttribute('readonly', '');
+    textarea.style.position = 'absolute';
+    textarea.style.left = '-9999px';
+
+    document.body.appendChild(textarea);
+
+    textarea.select();
+
+    try {
+      document.execCommand('copy');
+    } finally {
+      document.body.removeChild(textarea);
+    }
+  };
+
+  const copyToClipboard = async () => {
+    try {
+      if (
+        typeof navigator !== 'undefined' &&
+        navigator.clipboard &&
+        navigator.clipboard.writeText
+      ) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        fallbackCopy(text);
+      }
+
+      setCopied(true);
+
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = window.setTimeout(() => {
+        setCopied(false);
+      }, COPY_TIMEOUT_MS);
+    } catch {
+      fallbackCopy(text);
+
+      setCopied(true);
+
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = window.setTimeout(() => {
+        setCopied(false);
+      }, COPY_TIMEOUT_MS);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <button
+      type="button"
+      onClick={copyToClipboard}
+      aria-label={copied ? 'Copied!' : label}
+    >
+      {copied ? (
+        <>
+          ✓ Copied!
+        </>
+      ) : (
+        label
+      )}
+    </button>
+  );
+}
\ No newline at end of file
diff --git a/frontend/cntr/CountdownTimer/CountdownTimer.test.tsx b/frontend/cntr/CountdownTimer/CountdownTimer.test.tsx
new file mode 100644
index 0000000..dbc06b6
--- /dev/null
+++ b/frontend/cntr/CountdownTimer/CountdownTimer.test.tsx
@@ -0,0 +1,165 @@
+import React from "react";
+
+import {
+  render,
+  screen,
+  act,
+} from "@testing-library/react";
+
+import {
+  CountdownTimer,
+} from "./CountdownTimer";
+
+describe(
+  "CountdownTimer",
+  () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+
+      jest.setSystemTime(
+        new Date(
+          "2026-01-01T12:00:00Z",
+        ),
+      );
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    it(
+      "renders HH:MM:SS format",
+      () => {
+        render(
+          <CountdownTimer
+            endsAt={
+              new Date(
+                "2026-01-01T13:01:05Z",
+              )
+            }
+          />,
+        );
+
+        expect(
+          screen.getByText(
+            "01:01:05",
+          ),
+        ).toBeInTheDocument();
+      },
+    );
+
+    it(
+      "turns red when 5 minutes remain",
+      () => {
+        render(
+          <CountdownTimer
+            endsAt={
+              new Date(
+                "2026-01-01T12:05:00Z",
+              )
+            }
+          />,
+        );
+
+        expect(
+          screen.getByTestId(
+            "countdown-timer",
+          ),
+        ).toHaveClass(
+          "text-red-600",
+        );
+      },
+    );
+
+    it(
+      "calls onExpire exactly once",
+      () => {
+        const onExpire =
+          jest.fn();
+
+        render(
+          <CountdownTimer
+            endsAt={
+              new Date(
+                "2026-01-01T12:00:02Z",
+              )
+            }
+            onExpire={
+              onExpire
+            }
+          />,
+        );
+
+        act(() => {
+          jest.advanceTimersByTime(
+            5000,
+          );
+        });
+
+        expect(
+          onExpire,
+        ).toHaveBeenCalledTimes(
+          1,
+        );
+      },
+    );
+
+    it(
+      "updates every second",
+      () => {
+        render(
+          <CountdownTimer
+            endsAt={
+              new Date(
+                "2026-01-01T12:00:10Z",
+              )
+            }
+          />,
+        );
+
+        act(() => {
+          jest.advanceTimersByTime(
+            1000,
+          );
+        });
+
+        expect(
+          screen.getByText(
+            "00:00:09",
+          ),
+        ).toBeInTheDocument();
+      },
+    );
+
+    it(
+      "clears interval on unmount",
+      () => {
+        const clearSpy =
+          jest.spyOn(
+            window,
+            "clearInterval",
+          );
+
+        const {
+          unmount,
+        } = render(
+          <CountdownTimer
+            endsAt={
+              new Date(
+                "2026-01-01T12:00:10Z",
+              )
+            }
+          />,
+        );
+
+        unmount();
+
+        expect(
+          clearSpy,
+        ).toHaveBeenCalled();
+
+        clearSpy.mockRestore();
+      },
+    );
+  },
+);
\ No newline at end of file
diff --git a/frontend/cntr/CountdownTimer/CountdownTimer.tsx b/frontend/cntr/CountdownTimer/CountdownTimer.tsx
new file mode 100644
index 0000000..3dc4e09
--- /dev/null
+++ b/frontend/cntr/CountdownTimer/CountdownTimer.tsx
@@ -0,0 +1,151 @@
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+export interface CountdownTimerProps {
+  endsAt: Date | string;
+  onExpire?: () => void;
+}
+
+const WARNING_THRESHOLD_SECONDS = 300;
+
+function getRemainingSeconds(
+  endsAt: Date | string,
+): number {
+  const endTime =
+    new Date(endsAt).getTime();
+
+  const now = Date.now();
+
+  return Math.max(
+    0,
+    Math.floor(
+      (endTime - now) / 1000,
+    ),
+  );
+}
+
+function formatTime(
+  totalSeconds: number,
+): string {
+  const hours = Math.floor(
+    totalSeconds / 3600,
+  );
+
+  const minutes = Math.floor(
+    (totalSeconds % 3600) / 60,
+  );
+
+  const seconds =
+    totalSeconds % 60;
+
+  return [
+    hours,
+    minutes,
+    seconds,
+  ]
+    .map((value) =>
+      String(value).padStart(
+        2,
+        "0",
+      ),
+    )
+    .join(":");
+}
+
+export const CountdownTimer =
+  ({
+    endsAt,
+    onExpire,
+  }: CountdownTimerProps) => {
+    const [
+      remainingSeconds,
+      setRemainingSeconds,
+    ] = useState(() =>
+      getRemainingSeconds(
+        endsAt,
+      ),
+    );
+
+    const hasExpiredRef =
+      useRef(false);
+
+    useEffect(() => {
+      setRemainingSeconds(
+        getRemainingSeconds(
+          endsAt,
+        ),
+      );
+
+      hasExpiredRef.current =
+        false;
+    }, [endsAt]);
+
+    useEffect(() => {
+      const tick = () => {
+        const remaining =
+          getRemainingSeconds(
+            endsAt,
+          );
+
+        setRemainingSeconds(
+          remaining,
+        );
+
+        if (
+          remaining === 0 &&
+          !hasExpiredRef.current
+        ) {
+          hasExpiredRef.current =
+            true;
+
+          onExpire?.();
+        }
+      };
+
+      tick();
+
+      const intervalId =
+        window.setInterval(
+          tick,
+          1000,
+        );
+
+      return () => {
+        window.clearInterval(
+          intervalId,
+        );
+      };
+    }, [endsAt, onExpire]);
+
+    const formattedTime =
+      useMemo(
+        () =>
+          formatTime(
+            remainingSeconds,
+          ),
+        [remainingSeconds],
+      );
+
+    const isWarning =
+      remainingSeconds <=
+      WARNING_THRESHOLD_SECONDS;
+
+    return (
+      <span
+        data-testid="countdown-timer"
+        className={
+          isWarning
+            ? "text-red-600 font-semibold"
+            : ""
+        }
+      >
+        {formattedTime}
+      </span>
+    );
+  };
+
+export default CountdownTimer;
\ No newline at end of file
diff --git a/frontend/cntr/CountdownTimer/index.ts b/frontend/cntr/CountdownTimer/index.ts
new file mode 100644
index 0000000..b0c8bc5
--- /dev/null
+++ b/frontend/cntr/CountdownTimer/index.ts
@@ -0,0 +1,4 @@
+export * from "./CountdownTimer";
+export {
+  default,
+} from "./CountdownTimer";
\ No newline at end of file
diff --git a/frontend/cntr/ReferralWidget/ReferralWidget.test.tsx b/frontend/cntr/ReferralWidget/ReferralWidget.test.tsx
new file mode 100644
index 0000000..dcfb9cb
--- /dev/null
+++ b/frontend/cntr/ReferralWidget/ReferralWidget.test.tsx
@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import ReferralWidget from './ReferralWidget';
+
+describe('ReferralWidget', () => {
+  const referralCode = 'ABC123';
+  const referralLink =
+    'https://example.com/ref/ABC123';
+
+  it('renders referral code', () => {
+    render(
+      <ReferralWidget
+        referralCode={referralCode}
+        referralLink={referralLink}
+      />,
+    );
+
+    expect(
+      screen.getByText(referralCode),
+    ).toBeInTheDocument();
+  });
+
+  it('renders CopyButton', () => {
+    render(
+      <ReferralWidget
+        referralCode={referralCode}
+        referralLink={referralLink}
+      />,
+    );
+
+    expect(
+      screen.getByRole('button', {
+        name: /copy/i,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('creates whatsapp share link', () => {
+    render(
+      <ReferralWidget
+        referralCode={referralCode}
+        referralLink={referralLink}
+      />,
+    );
+
+    const whatsappLink =
+      screen.getByRole('link', {
+        name: /share via whatsapp/i,
+      });
+
+    expect(
+      whatsappLink.getAttribute('href'),
+    ).toBe(
+      `https://wa.me/?text=${encodeURIComponent(
+        `Join using my referral link: ${referralLink}`,
+      )}`,
+    );
+  });
+
+  it('creates email share link', () => {
+    render(
+      <ReferralWidget
+        referralCode={referralCode}
+        referralLink={referralLink}
+      />,
+    );
+
+    const emailLink =
+      screen.getByRole('link', {
+        name: /share via email/i,
+      });
+
+    expect(
+      emailLink.getAttribute('href'),
+    ).toBe(
+      `mailto:?subject=${encodeURIComponent(
+        'Join Me',
+      )}&body=${encodeURIComponent(
+        `Use my referral link: ${referralLink}`,
+      )}`,
+    );
+  });
+});
\ No newline at end of file
diff --git a/frontend/cntr/ReferralWidget/ReferralWidget.tsx b/frontend/cntr/ReferralWidget/ReferralWidget.tsx
new file mode 100644
index 0000000..3e4a222
--- /dev/null
+++ b/frontend/cntr/ReferralWidget/ReferralWidget.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import CopyButton from '../CopyButton/CopyButton';
+
+interface ReferralWidgetProps {
+  referralCode: string;
+  referralLink: string;
+}
+
+export default function ReferralWidget({
+  referralCode,
+  referralLink,
+}: ReferralWidgetProps) {
+  const whatsappText = `Join using my referral link: ${referralLink}`;
+
+  const whatsappUrl =
+    `https://wa.me/?text=${encodeURIComponent(
+      whatsappText,
+    )}`;
+
+  const emailSubject = 'Join Me';
+  const emailBody = `Use my referral link: ${referralLink}`;
+
+  const emailUrl =
+    `mailto:?subject=${encodeURIComponent(
+      emailSubject,
+    )}&body=${encodeURIComponent(
+      emailBody,
+    )}`;
+
+  return (
+    <div>
+      <h3>Referral Code</h3>
+
+      <div
+        style={{
+          display: 'flex',
+          gap: '8px',
+          alignItems: 'center',
+        }}
+      >
+        <div
+          role="textbox"
+          aria-label="Referral Code"
+          style={{
+            padding: '8px 12px',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+            minWidth: '220px',
+          }}
+        >
+          {referralCode}
+        </div>
+
+        <CopyButton
+          text={referralCode}
+          label="Copy"
+        />
+      </div>
+
+      <div
+        style={{
+          marginTop: '12px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+        }}
+      >
+        <a
+          href={whatsappUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Share via WhatsApp
+        </a>
+
+        <a href={emailUrl}>
+          Share via Email
+        </a>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/cntr/StepProgress/StepProgress.test.tsx b/frontend/cntr/StepProgress/StepProgress.test.tsx
new file mode 100644
index 0000000..526c78a
--- /dev/null
+++ b/frontend/cntr/StepProgress/StepProgress.test.tsx
@@ -0,0 +1,196 @@
+import React from "react";
+
+import {
+  render,
+  screen,
+} from "@testing-library/react";
+
+import {
+  StepProgress,
+} from "./StepProgress";
+
+describe(
+  "StepProgress",
+  () => {
+    const steps = [
+      {
+        label:
+          "Details",
+      },
+      {
+        label:
+          "Payment",
+      },
+      {
+        label:
+          "Review",
+      },
+      {
+        label:
+          "Complete",
+      },
+    ];
+
+    it(
+      "renders all step labels",
+      () => {
+        render(
+          <StepProgress
+            steps={steps}
+            currentStep={1}
+          />,
+        );
+
+        expect(
+          screen.getByText(
+            "Details",
+          ),
+        ).toBeInTheDocument();
+
+        expect(
+          screen.getByText(
+            "Payment",
+          ),
+        ).toBeInTheDocument();
+
+        expect(
+          screen.getByText(
+            "Review",
+          ),
+        ).toBeInTheDocument();
+
+        expect(
+          screen.getByText(
+            "Complete",
+          ),
+        ).toBeInTheDocument();
+      },
+    );
+
+    it(
+      "renders completed state",
+      () => {
+        render(
+          <StepProgress
+            steps={steps}
+            currentStep={1}
+          />,
+        );
+
+        expect(
+          screen.getByLabelText(
+            "Details - Completed",
+          ),
+        ).toBeInTheDocument();
+      },
+    );
+
+    it(
+      "renders current state",
+      () => {
+        render(
+          <StepProgress
+            steps={steps}
+            currentStep={1}
+          />,
+        );
+
+        expect(
+          screen.getByLabelText(
+            "Payment - Current",
+          ),
+        ).toBeInTheDocument();
+      },
+    );
+
+    it(
+      "renders upcoming state",
+      () => {
+        render(
+          <StepProgress
+            steps={steps}
+            currentStep={1}
+          />,
+        );
+
+        expect(
+          screen.getByLabelText(
+            "Review - Upcoming",
+          ),
+        ).toBeInTheDocument();
+
+        expect(
+          screen.getByLabelText(
+            "Complete - Upcoming",
+          ),
+        ).toBeInTheDocument();
+      },
+    );
+
+    it(
+      "renders connectors",
+      () => {
+        render(
+          <StepProgress
+            steps={steps}
+            currentStep={1}
+          />,
+        );
+
+        expect(
+          screen.getByTestId(
+            "connector-0",
+          ),
+        ).toBeInTheDocument();
+
+        expect(
+          screen.getByTestId(
+            "connector-1",
+          ),
+        ).toBeInTheDocument();
+
+        expect(
+          screen.getByTestId(
+            "connector-2",
+          ),
+        ).toBeInTheDocument();
+      },
+    );
+
+    it(
+      "renders proper aria labels",
+      () => {
+        render(
+          <StepProgress
+            steps={steps}
+            currentStep={2}
+          />,
+        );
+
+        expect(
+          screen.getByLabelText(
+            "Details - Completed",
+          ),
+        ).toBeInTheDocument();
+
+        expect(
+          screen.getByLabelText(
+            "Payment - Completed",
+          ),
+        ).toBeInTheDocument();
+
+        expect(
+          screen.getByLabelText(
+            "Review - Current",
+          ),
+        ).toBeInTheDocument();
+
+        expect(
+          screen.getByLabelText(
+            "Complete - Upcoming",
+          ),
+        ).toBeInTheDocument();
+      },
+    );
+  },
+);
\ No newline at end of file
diff --git a/frontend/cntr/StepProgress/StepProgress.tsx b/frontend/cntr/StepProgress/StepProgress.tsx
new file mode 100644
index 0000000..fac2c89
--- /dev/null
+++ b/frontend/cntr/StepProgress/StepProgress.tsx
@@ -0,0 +1,148 @@
+import React from "react";
+
+export interface Step {
+  label: string;
+}
+
+export interface StepProgressProps {
+  steps: Step[];
+  currentStep: number;
+}
+
+type StepState =
+  | "completed"
+  | "current"
+  | "upcoming";
+
+export const StepProgress = ({
+  steps,
+  currentStep,
+}: StepProgressProps) => {
+  const getState = (
+    index: number,
+  ): StepState => {
+    if (index < currentStep) {
+      return "completed";
+    }
+
+    if (index === currentStep) {
+      return "current";
+    }
+
+    return "upcoming";
+  };
+
+  return (
+    <div
+      className="w-full"
+      data-testid="step-progress"
+    >
+      <div className="flex items-start justify-between">
+        {steps.map(
+          (step, index) => {
+            const state =
+              getState(index);
+
+            const isCompleted =
+              state ===
+              "completed";
+
+            const isCurrent =
+              state ===
+              "current";
+
+            const isUpcoming =
+              state ===
+              "upcoming";
+
+            return (
+              <React.Fragment
+                key={step.label}
+              >
+                <div
+                  className="
+                    flex
+                    flex-col
+                    items-center
+                    flex-1
+                  "
+                >
+                  <div
+                    aria-label={`${step.label} - ${
+                      isCompleted
+                        ? "Completed"
+                        : isCurrent
+                        ? "Current"
+                        : "Upcoming"
+                    }`}
+                    data-testid={`step-${index}`}
+                    className={[
+                      "flex",
+                      "h-10",
+                      "w-10",
+                      "items-center",
+                      "justify-center",
+                      "rounded-full",
+                      "border-2",
+                      "transition-all",
+                      isCompleted &&
+                        "bg-blue-600 border-blue-600 text-white",
+                      isCurrent &&
+                        "bg-blue-600 border-blue-600 ring-4 ring-blue-200 text-white",
+                      isUpcoming &&
+                        "border-gray-300 bg-white text-gray-400",
+                    ]
+                      .filter(Boolean)
+                      .join(" ")}
+                  >
+                    {isCompleted
+                      ? "✓"
+                      : index + 1}
+                  </div>
+
+                  <span
+                    className="
+                      mt-2
+                      text-center
+                      text-xs
+                      sm:text-sm
+                    "
+                  >
+                    {step.label}
+                  </span>
+                </div>
+
+                {index <
+                  steps.length -
+                    1 && (
+                  <div
+                    data-testid={`connector-${index}`}
+                    className="
+                      mt-5
+                      h-0.5
+                      flex-1
+                    "
+                  >
+                    <div
+                      className={[
+                        "h-full",
+                        index <
+                        currentStep
+                          ? "bg-blue-600"
+                          : "bg-gray-300",
+                      ]
+                        .filter(Boolean)
+                        .join(" ")}
+                    />
+                  </div>
+                )}
+              </React.Fragment>
+            );
+          },
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default StepProgress;
\ No newline at end of file
diff --git a/frontend/cntr/StepProgress/index.ts b/frontend/cntr/StepProgress/index.ts
new file mode 100644
index 0000000..c0563e4
--- /dev/null
+++ b/frontend/cntr/StepProgress/index.ts
@@ -0,0 +1,5 @@
+export * from "./StepProgress";
+
+export {
+  default,
+} from "./StepProgress"; 
\ No newline at end of file