diff --git a/cypress/e2e/design-system-page.cy.ts b/cypress/e2e/design-system-page.cy.ts
new file mode 100644
index 000000000..4b37f18cf
--- /dev/null
+++ b/cypress/e2e/design-system-page.cy.ts
@@ -0,0 +1,72 @@
+import { BASE_COMMANDS, SELECT_COMMANDS } from '../utils/commands';
+import { gherkin } from '../utils/gherkin';
+
+describe(`Design System Components`, () => {
+  const buttonVariantsContainerId = `button-variants-container`;
+
+  const given = gherkin({
+    ...BASE_COMMANDS,
+    ...SELECT_COMMANDS,
+    'I navigate to design system page': () => {
+      cy.visit(`/design-system`);
+    },
+    'I take screenshot of button variants': () => {
+      cy.get(`[data-testid="${buttonVariantsContainerId}"]`).scrollIntoView();
+      BASE_COMMANDS[`System takes element picture`](
+        `[data-testid="${buttonVariantsContainerId}"]`,
+        `button-variants-screenshot`,
+      );
+    },
+    'I take screenshot of individual button': (label: string) => {
+      cy.contains(label).scrollIntoView();
+      cy.contains(label)
+        .parent()
+        .find(`button`)
+        .should(`be.visible`)
+        .then(($button) => {
+          const buttonId = `button-${label.replace(/[^a-zA-Z0-9]/g, `-`).toLowerCase()}`;
+          cy.wrap($button).invoke(`attr`, `data-test-button-id`, buttonId);
+          BASE_COMMANDS[`System takes element picture`](
+            `[data-test-button-id="${buttonId}"]`,
+            `button-variant-${label.replace(/[^a-zA-Z0-9]/g, `-`).toLowerCase()}`,
+          );
+          cy.wrap($button).invoke(`removeAttr`, `data-test-button-id`);
+        });
+    },
+  });
+
+  it(`captures screenshots of all button variants`, () => {
+    given(`System has accepted cookies`)
+      .and(`I set white theme`)
+      .when(`I navigate to design system page`)
+      .then(`I take screenshot of button variants`);
+
+    const buttonLabels = [
+      `s=1, i=1`,
+      `s=1, i=2`,
+      `s=2, i=1`,
+      `s=2, i=2`,
+      `auto s=1, i=1`,
+      `auto s=1, i=2`,
+      `auto s=2, i=1`,
+      `auto s=2, i=2`,
+      `pill s=1, i=2`,
+      `pill s=2, i=2`,
+      `disabled`,
+    ];
+
+    buttonLabels.forEach((label) => {
+      given(`I take screenshot of individual button`, label);
+    });
+  });
+
+  it(`verifies select component behavior`, () => {
+    given(`System has accepted cookies`)
+      .and(`I set white theme`)
+      .when(`I navigate to design system page`)
+      .and(`I select from`, `combobox`, `Banana`)
+      .then(`I verify select value`, `combobox`, `Banana`)
+      .when(`I select from`, `combobox`, `Apple`)
+      .then(`I verify select value`, `combobox`, `Apple`);
+  });
+});
diff --git a/cypress/snapshots/design-system-button.cy.ts/button-variant-auto-s-1--i-1.snap.png b/cypress/snapshots/design-system-button.cy.ts/button-variant-auto-s-1--i-1.snap.png
new file mode 100644
index 000000000..6c07a6e20
Binary files /dev/null and b/cypress/snapshots/design-system-button.cy.ts/button-variant-auto-s-1--i-1.snap.png differ
diff --git a/cypress/snapshots/design-system-button.cy.ts/button-variant-auto-s-1--i-2.snap.png b/cypress/snapshots/design-system-button.cy.ts/button-variant-auto-s-1--i-2.snap.png
new file mode 100644
index 000000000..079480a13
Binary files /dev/null and b/cypress/snapshots/design-system-button.cy.ts/button-variant-auto-s-1--i-2.snap.png differ
diff --git a/cypress/snapshots/design-system-button.cy.ts/button-variant-auto-s-2--i-1.snap.png b/cypress/snapshots/design-system-button.cy.ts/button-variant-auto-s-2--i-1.snap.png
new file mode 100644
index 000000000..dc6e1d176
Binary files /dev/null and b/cypress/snapshots/design-system-button.cy.ts/button-variant-auto-s-2--i-1.snap.png differ
diff --git a/cypress/snapshots/design-system-button.cy.ts/button-variant-auto-s-2--i-2.snap.png b/cypress/snapshots/design-system-button.cy.ts/button-variant-auto-s-2--i-2.snap.png
new file mode 100644
index 000000000..68b01b0ad
Binary files /dev/null and b/cypress/snapshots/design-system-button.cy.ts/button-variant-auto-s-2--i-2.snap.png differ
diff --git a/cypress/snapshots/design-system-button.cy.ts/button-variant-disabled.snap.png b/cypress/snapshots/design-system-button.cy.ts/button-variant-disabled.snap.png
new file mode 100644
index 000000000..2ad1eb779
Binary files /dev/null and b/cypress/snapshots/design-system-button.cy.ts/button-variant-disabled.snap.png differ
diff --git a/cypress/snapshots/design-system-button.cy.ts/button-variant-pill-s-1--i-2.snap.png b/cypress/snapshots/design-system-button.cy.ts/button-variant-pill-s-1--i-2.snap.png
new file mode 100644
index 000000000..c35083d38
Binary files /dev/null and b/cypress/snapshots/design-system-button.cy.ts/button-variant-pill-s-1--i-2.snap.png differ
diff --git a/cypress/snapshots/design-system-button.cy.ts/button-variant-pill-s-2--i-2.snap.png b/cypress/snapshots/design-system-button.cy.ts/button-variant-pill-s-2--i-2.snap.png
new file mode 100644
index 000000000..a21dcb291
Binary files /dev/null and b/cypress/snapshots/design-system-button.cy.ts/button-variant-pill-s-2--i-2.snap.png differ
diff --git a/cypress/snapshots/design-system-button.cy.ts/button-variant-s-1--i-1.snap.png b/cypress/snapshots/design-system-button.cy.ts/button-variant-s-1--i-1.snap.png
new file mode 100644
index 000000000..55a6909a9
Binary files /dev/null and b/cypress/snapshots/design-system-button.cy.ts/button-variant-s-1--i-1.snap.png differ
diff --git a/cypress/snapshots/design-system-button.cy.ts/button-variant-s-1--i-2.snap.png b/cypress/snapshots/design-system-button.cy.ts/button-variant-s-1--i-2.snap.png
new file mode 100644
index 000000000..24591e43e
Binary files /dev/null and b/cypress/snapshots/design-system-button.cy.ts/button-variant-s-1--i-2.snap.png differ
diff --git a/cypress/snapshots/design-system-button.cy.ts/button-variant-s-2--i-1.snap.png b/cypress/snapshots/design-system-button.cy.ts/button-variant-s-2--i-1.snap.png
new file mode 100644
index 000000000..2b3ef7ee8
Binary files /dev/null and b/cypress/snapshots/design-system-button.cy.ts/button-variant-s-2--i-1.snap.png differ
diff --git a/cypress/snapshots/design-system-button.cy.ts/button-variant-s-2--i-2.snap.png b/cypress/snapshots/design-system-button.cy.ts/button-variant-s-2--i-2.snap.png
new file mode 100644
index 000000000..2fe6172f7
Binary files /dev/null and b/cypress/snapshots/design-system-button.cy.ts/button-variant-s-2--i-2.snap.png differ
diff --git a/cypress/snapshots/design-system-button.cy.ts/button-variants-screenshot.snap.png b/cypress/snapshots/design-system-button.cy.ts/button-variants-screenshot.snap.png
new file mode 100644
index 000000000..8b4dd9931
Binary files /dev/null and b/cypress/snapshots/design-system-button.cy.ts/button-variants-screenshot.snap.png differ
diff --git a/cypress/snapshots/design-system-page.cy.ts/button-variant-auto-s-1--i-1.snap.png b/cypress/snapshots/design-system-page.cy.ts/button-variant-auto-s-1--i-1.snap.png
new file mode 100644
index 000000000..6c07a6e20
Binary files /dev/null and b/cypress/snapshots/design-system-page.cy.ts/button-variant-auto-s-1--i-1.snap.png differ
diff --git a/cypress/snapshots/design-system-page.cy.ts/button-variant-auto-s-1--i-2.snap.png b/cypress/snapshots/design-system-page.cy.ts/button-variant-auto-s-1--i-2.snap.png
new file mode 100644
index 000000000..a4b385f84
Binary files /dev/null and b/cypress/snapshots/design-system-page.cy.ts/button-variant-auto-s-1--i-2.snap.png differ
diff --git a/cypress/snapshots/design-system-page.cy.ts/button-variant-auto-s-2--i-1.snap.png b/cypress/snapshots/design-system-page.cy.ts/button-variant-auto-s-2--i-1.snap.png
new file mode 100644
index 000000000..727b52460
Binary files /dev/null and b/cypress/snapshots/design-system-page.cy.ts/button-variant-auto-s-2--i-1.snap.png differ
diff --git a/cypress/snapshots/design-system-page.cy.ts/button-variant-auto-s-2--i-2.snap.png b/cypress/snapshots/design-system-page.cy.ts/button-variant-auto-s-2--i-2.snap.png
new file mode 100644
index 000000000..68b01b0ad
Binary files /dev/null and b/cypress/snapshots/design-system-page.cy.ts/button-variant-auto-s-2--i-2.snap.png differ
diff --git a/cypress/snapshots/design-system-page.cy.ts/button-variant-disabled.snap.png b/cypress/snapshots/design-system-page.cy.ts/button-variant-disabled.snap.png
new file mode 100644
index 000000000..2ad1eb779
Binary files /dev/null and b/cypress/snapshots/design-system-page.cy.ts/button-variant-disabled.snap.png differ
diff --git a/cypress/snapshots/design-system-page.cy.ts/button-variant-pill-s-1--i-2.snap.png b/cypress/snapshots/design-system-page.cy.ts/button-variant-pill-s-1--i-2.snap.png
new file mode 100644
index 000000000..dc32b2b3a
Binary files /dev/null and b/cypress/snapshots/design-system-page.cy.ts/button-variant-pill-s-1--i-2.snap.png differ
diff --git a/cypress/snapshots/design-system-page.cy.ts/button-variant-pill-s-2--i-2.snap.png b/cypress/snapshots/design-system-page.cy.ts/button-variant-pill-s-2--i-2.snap.png
new file mode 100644
index 000000000..cdbcebb14
Binary files /dev/null and b/cypress/snapshots/design-system-page.cy.ts/button-variant-pill-s-2--i-2.snap.png differ
diff --git a/cypress/snapshots/design-system-page.cy.ts/button-variant-s-1--i-1.snap.png b/cypress/snapshots/design-system-page.cy.ts/button-variant-s-1--i-1.snap.png
new file mode 100644
index 000000000..3e0253e34
Binary files /dev/null and b/cypress/snapshots/design-system-page.cy.ts/button-variant-s-1--i-1.snap.png differ
diff --git a/cypress/snapshots/design-system-page.cy.ts/button-variant-s-1--i-2.snap.png b/cypress/snapshots/design-system-page.cy.ts/button-variant-s-1--i-2.snap.png
new file mode 100644
index 000000000..24591e43e
Binary files /dev/null and b/cypress/snapshots/design-system-page.cy.ts/button-variant-s-1--i-2.snap.png differ
diff --git a/cypress/snapshots/design-system-page.cy.ts/button-variant-s-2--i-1.snap.png b/cypress/snapshots/design-system-page.cy.ts/button-variant-s-2--i-1.snap.png
new file mode 100644
index 000000000..c4d704331
Binary files /dev/null and b/cypress/snapshots/design-system-page.cy.ts/button-variant-s-2--i-1.snap.png differ
diff --git a/cypress/snapshots/design-system-page.cy.ts/button-variant-s-2--i-2.snap.png b/cypress/snapshots/design-system-page.cy.ts/button-variant-s-2--i-2.snap.png
new file mode 100644
index 000000000..9f26e0218
Binary files /dev/null and b/cypress/snapshots/design-system-page.cy.ts/button-variant-s-2--i-2.snap.png differ
diff --git a/cypress/snapshots/design-system-page.cy.ts/button-variants-screenshot.snap.png b/cypress/snapshots/design-system-page.cy.ts/button-variants-screenshot.snap.png
new file mode 100644
index 000000000..5b7c4f216
Binary files /dev/null and b/cypress/snapshots/design-system-page.cy.ts/button-variants-screenshot.snap.png differ
diff --git a/cypress/utils/commands.ts b/cypress/utils/commands.ts
index 4f74a494e..8ac373542 100644
--- a/cypress/utils/commands.ts
+++ b/cypress/utils/commands.ts
@@ -249,5 +249,24 @@ const BASE_COMMANDS = {
   },
 } as const;
 
+export const SELECT_COMMANDS = {
+  'I select from': (selectRole: string, optionLabel: string) => {
+    cy.get(`[role="${selectRole}"]`).first().click();
+    cy.get(`[role="listbox"]`).contains(optionLabel).click();
+  },
+  'I verify select value': (selectRole: string, value: string) => {
+    cy.get(`[role="${selectRole}"]`).contains(value).should(`be.visible`);
+  },
+  'I press key on': (selectRole: string, key: string) => {
+    cy.get(`[role="${selectRole}"]`).type(key);
+  },
+  'I verify select option': (option: string) => {
+    cy.get(`[role="listbox"]`).contains(option).should(`be.visible`);
+  },
+  'I verify disabled select': () => {
+    cy.get(`[role="combobox"][aria-disabled="true"]`).should(`exist`);
+  },
+} as const;
+
 export type { Element, ClickableControls };
 export { BASE_COMMANDS };
diff --git a/meta.ts b/meta.ts
index 6b09134ff..ef8a24421 100644
--- a/meta.ts
+++ b/meta.ts
@@ -39,5 +39,6 @@ export const meta = {
     },
     notFound: `/404/`,
     privacyPolicy: `/privacy-policy/`,
+    designSystem: `/design-system/`,
   },
 } as const;
diff --git a/src/containers/app-footer.container.tsx b/src/containers/app-footer.container.tsx
index 4b2a92314..7ad1c110f 100644
--- a/src/containers/app-footer.container.tsx
+++ b/src/containers/app-footer.container.tsx
@@ -136,6 +136,13 @@ const AppFooterContainer = () => {
             >
               Education Zone
             </Link>
+            <Link
+              activeClassName="active-link"
+              className="hover:underline underline-offset-2"
+              to={meta.routes.designSystem}
+            >
+              Design System
+            </Link>
             <Link
               activeClassName="active-link"
               className="hover:underline underline-offset-2"
diff --git a/src/containers/design-system-link.container.tsx b/src/containers/design-system-link.container.tsx
new file mode 100644
index 000000000..4f8e76788
--- /dev/null
+++ b/src/containers/design-system-link.container.tsx
@@ -0,0 +1,19 @@
+import { AppNavLink } from 'components/app-nav-link';
+import React from 'react';
+import { BiPalette } from 'react-icons/bi';
+import { meta } from '../../meta';
+
+const DesignSystemLinkContainer = () => {
+  return (
+    <AppNavLink
+      title="Go to design system page"
+      className="hidden md:flex"
+      to={meta.routes.designSystem}
+    >
+      <BiPalette size={20} className="mr-2 shrink-0" />
+      <span className="font-semibold">Design System</span>
+    </AppNavLink>
+  );
+};
+
+export { DesignSystemLinkContainer };
diff --git a/src/design-system/select.tsx b/src/design-system/select.tsx
new file mode 100644
index 000000000..0b3c0d0df
--- /dev/null
+++ b/src/design-system/select.tsx
@@ -0,0 +1,255 @@
+'use client';
+
+import React, {
+  type HTMLAttributes,
+  type DetailedHTMLProps,
+  type ReactNode,
+} from 'react';
+import c from 'classnames';
+import { BiChevronDown, BiChevronUp, BiCheck } from 'react-icons/bi';
+import { useSimpleFeature } from '@greenonsoftware/react-kit';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+interface SelectProps
+  extends Omit<
+    DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    'onChange' | 'value'
+  > {
+  options: SelectOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+const Select = ({
+  className,
+  options,
+  value,
+  onChange,
+  placeholder = `Select an option`,
+  disabled,
+  ...props
+}: SelectProps) => {
+  const dropdownMenu = useSimpleFeature();
+  const [highlightedIndex, setHighlightedIndex] = React.useState(0);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const listboxRef = React.useRef<HTMLUListElement>(null);
+
+  const selectedOption = options.find((option) => option.value === value);
+
+  const toggleOpen = React.useCallback(
+    (_: React.MouseEvent<HTMLDivElement>): void => {
+      if (!disabled) {
+        dropdownMenu.toggle();
+      }
+    },
+    [disabled, dropdownMenu],
+  );
+
+  const handleOptionClick = React.useCallback(
+    (option: SelectOption) => {
+      onChange?.(option.value);
+      dropdownMenu.off();
+    },
+    [onChange, dropdownMenu],
+  );
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>): void => {
+      if (disabled) return;
+
+      switch (e.key) {
+        case `Enter`:
+        case ` `:
+          if (!dropdownMenu.isOn) {
+            dropdownMenu.on();
+          } else {
+            const option = options[highlightedIndex];
+            if (option) {
+              handleOptionClick(option);
+            }
+          }
+          e.preventDefault();
+          break;
+        case `ArrowDown`:
+        case `ArrowRight`:
+          if (dropdownMenu.isOn) {
+            setHighlightedIndex((prev) =>
+              prev < options.length - 1 ? prev + 1 : prev,
+            );
+          } else {
+            dropdownMenu.on();
+          }
+          e.preventDefault();
+          break;
+        case `ArrowUp`:
+        case `ArrowLeft`:
+          if (dropdownMenu.isOn) {
+            setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+          } else {
+            dropdownMenu.on();
+          }
+          e.preventDefault();
+          break;
+        case `Escape`:
+          dropdownMenu.off();
+          e.preventDefault();
+          break;
+        case `Tab`:
+          if (dropdownMenu.isOn) {
+            dropdownMenu.off();
+          }
+          break;
+      }
+    },
+    [options, highlightedIndex, disabled, handleOptionClick, dropdownMenu],
+  );
+
+  React.useEffect(() => {
+    if (dropdownMenu.isOn && listboxRef.current) {
+      const highlightedElement = listboxRef.current.children[
+        highlightedIndex
+      ] as HTMLElement;
+      if (highlightedElement) {
+        highlightedElement.scrollIntoView({ block: `nearest` });
+      }
+    }
+  }, [dropdownMenu.isOn, highlightedIndex]);
+
+  // Close dropdown when clicking outside
+  React.useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        dropdownMenu.off();
+      }
+    };
+
+    if (dropdownMenu.isOn) {
+      document.addEventListener(`mousedown`, handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener(`mousedown`, handleClickOutside);
+    };
+  }, [dropdownMenu.isOn, dropdownMenu]);
+
+  React.useEffect(() => {
+    if (dropdownMenu.isOn) {
+      const selectedIndex = options.findIndex(
+        (option) => option.value === value,
+      );
+      setHighlightedIndex(selectedIndex >= 0 ? selectedIndex : 0);
+    }
+  }, [dropdownMenu.isOn, options, value]);
+
+  return (
+    <div ref={containerRef} className={c(`relative w-full`, className)}>
+      <div
+        tabIndex={disabled ? -1 : 0}
+        className={c(
+          `flex items-center justify-between w-full px-3 py-2 text-sm rounded-md`,
+          `bg-gray-300 dark:bg-slate-800`,
+          `border-[2.5px] border-transparent`,
+          `focus:border-black focus:dark:border-white outline-none`,
+          `select-none`,
+          {
+            'cursor-pointer': !disabled,
+            'opacity-50 cursor-not-allowed': disabled,
+          },
+        )}
+        onClick={toggleOpen}
+        onKeyDown={handleKeyDown}
+        aria-haspopup="listbox"
+        aria-expanded={dropdownMenu.isOn}
+        aria-labelledby="select-label"
+        role="combobox"
+        {...props}
+      >
+        <span
+          className={c(`block truncate`, {
+            'text-gray-600 dark:text-gray-300': !selectedOption,
+          })}
+        >
+          {selectedOption ? selectedOption.label : placeholder}
+        </span>
+        <span className="flex items-center pointer-events-none">
+          {dropdownMenu.isOn ? (
+            <BiChevronUp className="w-4 h-4" />
+          ) : (
+            <BiChevronDown className="w-4 h-4" />
+          )}
+        </span>
+      </div>
+
+      {dropdownMenu.isOn && (
+        <ul
+          ref={listboxRef}
+          className={c(
+            `absolute z-10 w-full mt-1 max-h-[300px] overflow-auto`,
+            `bg-gray-300 dark:bg-slate-800 rounded-md`,
+            `border-[2.5px] border-black dark:border-white`,
+            `py-1 shadow-lg`,
+          )}
+          role="listbox"
+          aria-labelledby="select-label"
+        >
+          {options.map((option, index) => (
+            <li
+              key={option.value}
+              className={c(
+                `px-3 py-2 cursor-pointer select-none relative`,
+                `hover:bg-gray-400/50 dark:hover:bg-slate-700`,
+                {
+                  'bg-gray-400/50 dark:bg-slate-700':
+                    highlightedIndex === index || option.value === value,
+                  'font-medium': option.value === value,
+                },
+              )}
+              onClick={() => handleOptionClick(option)}
+              role="option"
+              aria-selected={option.value === value}
+            >
+              <div className="flex items-center justify-between">
+                <span className="block truncate">{option.label}</span>
+                {option.value === value && <BiCheck className="w-4 h-4" />}
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export const SelectField = ({
+  className,
+  label,
+  hint,
+  ...props
+}: {
+  className?: string;
+  label?: ReactNode;
+  hint?: ReactNode;
+} & SelectProps) => {
+  return (
+    <fieldset className={c(`flex flex-col gap-1.5`, className)}>
+      {label && (
+        <label id="select-label" className="text-sm font-medium">
+          {label}
+        </label>
+      )}
+      <Select {...props} />
+      {hint}
+    </fieldset>
+  );
+};
+
+export { Select };
diff --git a/src/pages/design-system.tsx b/src/pages/design-system.tsx
new file mode 100644
index 000000000..badf0d3a5
--- /dev/null
+++ b/src/pages/design-system.tsx
@@ -0,0 +1,152 @@
+import type { HeadFC } from 'gatsby';
+import React from 'react';
+import { meta } from '../../meta';
+import Meta from 'components/meta';
+import LogoThumbnail from 'images/logo-thumbnail.png';
+import { Button, type ButtonProps } from 'design-system/button';
+import { AppNavigation } from 'components/app-navigation';
+import { AppFooterContainer } from 'containers/app-footer.container';
+import { CreationLinkContainer } from 'containers/creation-link.container';
+import { EducationRankLinkContainer } from 'containers/education-rank-link.container';
+import { EducationZoneLinkContainer } from 'containers/education-zone-link.container';
+import { DesignSystemLinkContainer } from 'containers/design-system-link.container';
+import { Select, SelectField, type SelectOption } from 'design-system/select';
+import { Field } from 'design-system/field';
+
+// TODO: Add more button variants, like icon buttons, loading buttons, etc.
+// TODO: Think about the labels
+const buttonVariants: Array<ButtonProps & { label: string }> = [
+  { s: 1, i: 1, label: `s=1, i=1` },
+  { s: 1, i: 2, label: `s=1, i=2` },
+  { s: 2, i: 1, label: `s=2, i=1` },
+  { s: 2, i: 2, label: `s=2, i=2` },
+
+  { s: 1, i: 1, auto: true, label: `auto s=1, i=1` },
+  { s: 1, i: 2, auto: true, label: `auto s=1, i=2` },
+  { s: 2, i: 1, auto: true, label: `auto s=2, i=1` },
+  { s: 2, i: 2, auto: true, label: `auto s=2, i=2` },
+
+  { s: 1, i: 2, rounded: true, label: `pill s=1, i=2` },
+  { s: 2, i: 2, rounded: true, label: `pill s=2, i=2` },
+
+  { s: 2, i: 2, disabled: true, label: `disabled` },
+];
+
+type ButtonVariantsProps = {
+  buttonVariants: Array<ButtonProps & { label: string }>;
+};
+
+const DesignSystemButtonPreview = ({ buttonVariants }: ButtonVariantsProps) => {
+  return (
+    <div className="p-8 space-y-8">
+      <section className="max-w-4xl mx-auto">
+        <h2 className="text-2xl font-semibold mb-6 text-center">
+          Button Variants
+        </h2>
+
+        <div
+          className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-8"
+          data-testid="button-variants-container"
+        >
+          {buttonVariants.map(({ label, ...props }) => (
+            <div key={label} className="flex flex-col items-center space-y-2">
+              <Button {...props}>{props.auto ? `Button Text` : `A`}</Button>
+              <span className="text-sm text-gray-600 dark:text-gray-400">
+                {label}
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+const DesignSystemSelectPreview = () => {
+  const [value, setValue] = React.useState<string>(``);
+
+  const options: SelectOption[] = [
+    { value: `apple`, label: `Apple` },
+    { value: `banana`, label: `Banana` },
+    { value: `orange`, label: `Orange` },
+    { value: `grape`, label: `Grape` },
+    { value: `strawberry`, label: `Strawberry` },
+    { value: `blueberry`, label: `Blueberry` },
+    { value: `raspberry`, label: `Raspberry` },
+    { value: `blackberry`, label: `Blackberry` },
+    { value: `kiwi`, label: `Kiwi` },
+    { value: `mango`, label: `Mango` },
+  ];
+
+  return (
+    <div className="p-8 max-w-md mx-auto space-y-8">
+      <h1 className="text-2xl font-bold">Select Component Demo</h1>
+
+      <div className="space-y-6">
+        <SelectField
+          label="Select a fruit"
+          options={options}
+          value={value}
+          onChange={setValue}
+          hint={
+            <p className="text-xs text-gray-600 dark:text-gray-300">
+              Choose your favorite fruit
+            </p>
+          }
+        />
+
+        <Field label="Disabled Select">
+          <Select
+            options={options}
+            value={value}
+            onChange={setValue}
+            disabled
+          />
+        </Field>
+      </div>
+
+      <div className="p-4 bg-gray-300 dark:bg-slate-800 rounded-md">
+        <p className="font-medium">Selected value: {value || `None`}</p>
+        <p className="text-sm mt-2">Try using keyboard navigation:</p>
+        <ul className="text-sm list-disc list-inside mt-1">
+          <li>Tab to focus the select</li>
+          <li>Space/Enter to open dropdown</li>
+          <li>Arrow keys to navigate options</li>
+          <li>Enter to select an option</li>
+          <li>Escape to close dropdown</li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+const DesignSystemPage = () => {
+  return (
+    <>
+      <AppNavigation>
+        <CreationLinkContainer />
+        <EducationRankLinkContainer />
+        <EducationZoneLinkContainer />
+        <DesignSystemLinkContainer />
+      </AppNavigation>
+      <DesignSystemButtonPreview buttonVariants={buttonVariants} />
+      <DesignSystemSelectPreview />
+      <AppFooterContainer />
+    </>
+  );
+};
+export default DesignSystemPage;
+
+export const Head: HeadFC = () => {
+  return (
+    <Meta
+      appName={meta.appName}
+      title={meta.title}
+      description={meta.description}
+      url={meta.siteUrl + meta.routes.creator.preview}
+      lang={meta.lang}
+      image={meta.siteUrl + LogoThumbnail}
+      robots="noindex, nofollow"
+    />
+  );
+};