diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 726f646e..dc2acc6c 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,11 +1,121 @@
 <style type="text/css">
-  /*
-  Place to add custom fonts that only affect the storybook preview
-  @font-face {
-    font-family: Inter;
-    src: url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
-  }
-  */
+    /* Add Inter font */
+    @font-face {
+        font-family: Inter;
+        font-weight: 100;
+        font-style: normal;
+        src: url(/fonts/Inter/Inter-Thin.ttf) format('truetype');
+    }
+    @font-face {
+        font-family: Inter;
+        font-weight: 200;
+        font-style: normal;
+        src: url(/fonts/Inter/Inter-ExtraLight.ttf) format('truetype');
+    }
+    @font-face {
+        font-family: Inter;
+        font-weight: 300;
+        font-style: normal;
+        src: url(/fonts/Inter/Inter-Light.ttf) format('truetype');
+    }
+    @font-face {
+        font-family: Inter;
+        font-weight: 400;
+        font-style: normal;
+        src: url(/fonts/Inter/Inter-Regular.ttf) format('truetype');
+    }
+    @font-face {
+        font-family: Inter;
+        font-weight: 500;
+        font-style: normal;
+        src: url(/fonts/Inter/Inter-Medium.ttf) format('truetype');
+    }
+    @font-face {
+        font-family: Inter;
+        font-weight: 600;
+        font-style: normal;
+        src: url(/fonts/Inter/Inter-SemiBold.ttf) format('truetype');
+    }
+    @font-face {
+        font-family: Inter;
+        font-weight: 700;
+        font-style: normal;
+        src: url(/fonts/Inter/Inter-Bold.ttf) format('truetype');
+    }
+    @font-face {
+        font-family: Inter;
+        font-weight: 800;
+        font-style: normal;
+        src: url(/fonts/Inter/Inter-ExtraBold.ttf) format('truetype');
+    }
+    @font-face {
+        font-family: Inter;
+        font-weight: 900;
+        font-style: normal;
+        src: url(/fonts/Inter/Inter-Black.ttf) format('truetype');
+    }
+
+    /* Add Fabriga font */
+    @font-face {
+        font-family: Fabriga;
+        font-weight: 300;
+        font-style: normal;
+        src: url(/fonts/Fabriga/Fabriga-Light.otf) format('opentype');
+    }
+    @font-face {
+        font-family: Fabriga;
+        font-weight: 300;
+        font-style: italic;
+        src: url(/fonts/Fabriga/Fabriga-LightItalic.otf) format('opentype');
+    }
+    @font-face {
+        font-family: Fabriga;
+        font-weight: 400;
+        font-style: normal;
+        src: url(/fonts/Fabriga/Fabriga-Regular.otf) format('opentype');
+    }
+    @font-face {
+        font-family: Fabriga;
+        font-weight: 400;
+        font-style: italic;
+        src: url(/fonts/Fabriga/Fabriga-Italic.otf) format('opentype');
+    }
+    @font-face {
+        font-family: Fabriga;
+        font-weight: 500;
+        font-style: normal;
+        src: url(/fonts/Fabriga/Fabriga-Medium.otf) format('opentype');
+    }
+    @font-face {
+        font-family: Fabriga;
+        font-weight: 500;
+        font-style: italic;
+        src: url(/fonts/Fabriga/Fabriga-MediumItalic.otf) format('opentype');
+    }
+    @font-face {
+        font-family: Fabriga;
+        font-weight: 700;
+        font-style: normal;
+        src: url(/fonts/Fabriga/Fabriga-Bold.otf) format('opentype');
+    }
+    @font-face {
+        font-family: Fabriga;
+        font-weight: 700;
+        font-style: italic;
+        src: url(/fonts/Fabriga/Fabriga-BoldItalic.otf) format('opentype');
+    }
+    @font-face {
+        font-family: Fabriga;
+        font-weight: 900;
+        font-style: normal;
+        src: url(/fonts/Fabriga/Fabriga-Black.otf) format('opentype');
+    }
+    @font-face {
+        font-family: Fabriga;
+        font-weight: 900;
+        font-style: italic;
+        src: url(/fonts/Fabriga/Fabriga-BlackItalic.otf) format('opentype');
+    }
 </style>
 <script>
   window.global = window;
diff --git a/assets/fonts/Fabriga/Fabriga-Black.otf b/assets/fonts/Fabriga/Fabriga-Black.otf
new file mode 100644
index 00000000..e19685be
Binary files /dev/null and b/assets/fonts/Fabriga/Fabriga-Black.otf differ
diff --git a/assets/fonts/Fabriga/Fabriga-BlackItalic.otf b/assets/fonts/Fabriga/Fabriga-BlackItalic.otf
new file mode 100644
index 00000000..292e2f5a
Binary files /dev/null and b/assets/fonts/Fabriga/Fabriga-BlackItalic.otf differ
diff --git a/assets/fonts/Fabriga/Fabriga-Bold.otf b/assets/fonts/Fabriga/Fabriga-Bold.otf
new file mode 100644
index 00000000..a8a41e65
Binary files /dev/null and b/assets/fonts/Fabriga/Fabriga-Bold.otf differ
diff --git a/assets/fonts/Fabriga/Fabriga-BoldItalic.otf b/assets/fonts/Fabriga/Fabriga-BoldItalic.otf
new file mode 100644
index 00000000..d520d46c
Binary files /dev/null and b/assets/fonts/Fabriga/Fabriga-BoldItalic.otf differ
diff --git a/assets/fonts/Fabriga/Fabriga-Italic.otf b/assets/fonts/Fabriga/Fabriga-Italic.otf
new file mode 100644
index 00000000..30c760c3
Binary files /dev/null and b/assets/fonts/Fabriga/Fabriga-Italic.otf differ
diff --git a/assets/fonts/Fabriga/Fabriga-Light.otf b/assets/fonts/Fabriga/Fabriga-Light.otf
new file mode 100644
index 00000000..b86d7f78
Binary files /dev/null and b/assets/fonts/Fabriga/Fabriga-Light.otf differ
diff --git a/assets/fonts/Fabriga/Fabriga-LightItalic.otf b/assets/fonts/Fabriga/Fabriga-LightItalic.otf
new file mode 100644
index 00000000..3037952a
Binary files /dev/null and b/assets/fonts/Fabriga/Fabriga-LightItalic.otf differ
diff --git a/assets/fonts/Fabriga/Fabriga-Medium.otf b/assets/fonts/Fabriga/Fabriga-Medium.otf
new file mode 100644
index 00000000..1c4b6421
Binary files /dev/null and b/assets/fonts/Fabriga/Fabriga-Medium.otf differ
diff --git a/assets/fonts/Fabriga/Fabriga-MediumItalic.otf b/assets/fonts/Fabriga/Fabriga-MediumItalic.otf
new file mode 100644
index 00000000..78dd0839
Binary files /dev/null and b/assets/fonts/Fabriga/Fabriga-MediumItalic.otf differ
diff --git a/assets/fonts/Fabriga/Fabriga-Regular.otf b/assets/fonts/Fabriga/Fabriga-Regular.otf
new file mode 100644
index 00000000..cd27664b
Binary files /dev/null and b/assets/fonts/Fabriga/Fabriga-Regular.otf differ
diff --git a/assets/fonts/Inter/Inter-Black.ttf b/assets/fonts/Inter/Inter-Black.ttf
new file mode 100644
index 00000000..5aecf7dc
Binary files /dev/null and b/assets/fonts/Inter/Inter-Black.ttf differ
diff --git a/assets/fonts/Inter/Inter-Bold.ttf b/assets/fonts/Inter/Inter-Bold.ttf
new file mode 100644
index 00000000..8e82c70d
Binary files /dev/null and b/assets/fonts/Inter/Inter-Bold.ttf differ
diff --git a/assets/fonts/Inter/Inter-ExtraBold.ttf b/assets/fonts/Inter/Inter-ExtraBold.ttf
new file mode 100644
index 00000000..cb4b8217
Binary files /dev/null and b/assets/fonts/Inter/Inter-ExtraBold.ttf differ
diff --git a/assets/fonts/Inter/Inter-ExtraLight.ttf b/assets/fonts/Inter/Inter-ExtraLight.ttf
new file mode 100644
index 00000000..64aee30a
Binary files /dev/null and b/assets/fonts/Inter/Inter-ExtraLight.ttf differ
diff --git a/assets/fonts/Inter/Inter-Light.ttf b/assets/fonts/Inter/Inter-Light.ttf
new file mode 100644
index 00000000..9e265d89
Binary files /dev/null and b/assets/fonts/Inter/Inter-Light.ttf differ
diff --git a/assets/fonts/Inter/Inter-Medium.ttf b/assets/fonts/Inter/Inter-Medium.ttf
new file mode 100644
index 00000000..b53fb1c4
Binary files /dev/null and b/assets/fonts/Inter/Inter-Medium.ttf differ
diff --git a/assets/fonts/Inter/Inter-Regular.ttf b/assets/fonts/Inter/Inter-Regular.ttf
new file mode 100644
index 00000000..8d4eebf2
Binary files /dev/null and b/assets/fonts/Inter/Inter-Regular.ttf differ
diff --git a/assets/fonts/Inter/Inter-SemiBold.ttf b/assets/fonts/Inter/Inter-SemiBold.ttf
new file mode 100644
index 00000000..c6aeeb16
Binary files /dev/null and b/assets/fonts/Inter/Inter-SemiBold.ttf differ
diff --git a/assets/fonts/Inter/Inter-Thin.ttf b/assets/fonts/Inter/Inter-Thin.ttf
new file mode 100644
index 00000000..7aed55d5
Binary files /dev/null and b/assets/fonts/Inter/Inter-Thin.ttf differ
diff --git a/src/components/form-field/form-field.tsx b/src/components/form-field/form-field.tsx
index 1cfc8c17..27d9dfe9 100644
--- a/src/components/form-field/form-field.tsx
+++ b/src/components/form-field/form-field.tsx
@@ -12,6 +12,7 @@ import { MultiCombobox } from "./multi-combobox/multi-combobox";
 import { SingleCombobox } from "./single-combobox/single-combobox";
 import { FormFieldGroup } from "./form-field-group";
 import { SearchInput } from "./search-input/search-input";
+import { RadioBox } from "./radio-box/radio-box";
 
 interface FormFieldProps {
     children: React.ReactNode;
@@ -34,5 +35,6 @@ FormField.MultiCombobox = MultiCombobox;
 FormField.SingleCombobox = SingleCombobox;
 FormField.Group = FormFieldGroup;
 FormField.SearchInput = SearchInput;
+FormField.RadioBox = RadioBox;
 
 export { FormField };
diff --git a/src/components/form-field/radio-box/radio-box-option.tsx b/src/components/form-field/radio-box/radio-box-option.tsx
new file mode 100644
index 00000000..2fedaf37
--- /dev/null
+++ b/src/components/form-field/radio-box/radio-box-option.tsx
@@ -0,0 +1,72 @@
+import { RadioGroup } from "@headlessui/react";
+import React from "react";
+import { classNames } from "../../../util/class-names";
+import { RecommendationTag } from "../../recommendation-tag/recommendation-tag";
+
+export interface RadioBoxOptionProps {
+    children: React.ReactNode;
+    value: string;
+    disabled?: boolean;
+    recommendationText?: string;
+}
+
+export const RadioBoxOption = ({
+    children,
+    value,
+    disabled,
+    recommendationText,
+}: RadioBoxOptionProps) => {
+    return (
+        <RadioGroup.Option
+            value={value}
+            className="w-full cursor-pointer focus:outline-none"
+            disabled={disabled}
+        >
+            {({ checked, disabled: optionDisabled }) => (
+                <div
+                    className={classNames(
+                        "group relative flex items-center gap-3 rounded-lg border p-4",
+                        checked
+                            ? "border-primary-500 bg-primary-500"
+                            : "border-neutral-300 hover:border-primary-500 hover:bg-primary-50",
+                        optionDisabled &&
+                            "cursor-not-allowed bg-neutral-100 hover:border-neutral-300 hover:bg-neutral-100"
+                    )}
+                >
+                    {recommendationText && (
+                        <RecommendationTag>{recommendationText}</RecommendationTag>
+                    )}
+
+                    <span
+                        className={classNames(
+                            "relative inline-block h-4 w-4 shrink-0 rounded-full bg-neutral-0",
+                            !checked &&
+                                "border border-neutral-400 group-hover:border-primary-500 group-hover:bg-neutral-0",
+                            optionDisabled &&
+                                "border border-neutral-400 bg-neutral-100 group-hover:border-neutral-400 group-hover:bg-neutral-100"
+                        )}
+                    >
+                        {checked && (
+                            <span
+                                className={classNames(
+                                    "absolute inset-0 m-auto block h-2 w-2 rounded-full bg-primary-500",
+                                    optionDisabled && "bg-neutral-500"
+                                )}
+                            />
+                        )}
+                    </span>
+
+                    <p
+                        className={classNames(
+                            "paragraph-200",
+                            checked && "text-neutral-0",
+                            optionDisabled && "text-neutral-600"
+                        )}
+                    >
+                        {children}
+                    </p>
+                </div>
+            )}
+        </RadioGroup.Option>
+    );
+};
diff --git a/src/components/form-field/radio-box/radio-box.stories.tsx b/src/components/form-field/radio-box/radio-box.stories.tsx
new file mode 100644
index 00000000..0278e275
--- /dev/null
+++ b/src/components/form-field/radio-box/radio-box.stories.tsx
@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
+import { FormField } from "../form-field";
+import { RadioBox } from "./radio-box";
+
+const meta: Meta<typeof RadioBox> = {
+    title: "Input/RadioBox",
+    component: RadioBox,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioBox>;
+
+const RadioBoxWithHooks = () => {
+    const [value, setValue] = useState("value_1");
+
+    return (
+        <FormField>
+            <FormField.RadioBox id="value" value={value} onChange={setValue}>
+                <FormField.RadioBox.Option value="value_1" recommendationText="Recommended">
+                    <div className="flex flex-col gap-2">
+                        <h2 className="headline-500">Option 1</h2>
+                        <p>
+                            To be, or not to be, that is the question: Whether ’tis nobler in the
+                            mind to suffer The slings and arrows of outrageous fortune, …
+                        </p>
+                    </div>
+                </FormField.RadioBox.Option>
+
+                <FormField.RadioBox.Option value="value_2">
+                    <div className="flex flex-col gap-2">
+                        <h2 className="headline-500">Option 2</h2>
+                        <p>
+                            To be, or not to be, that is the question: Whether ’tis nobler in the
+                            mind to suffer The slings and arrows of outrageous fortune, …
+                        </p>
+                    </div>
+                </FormField.RadioBox.Option>
+
+                <FormField.RadioBox.Option value="value_3" disabled>
+                    <div className="flex flex-col gap-2">
+                        <h2 className="headline-500">Option 3</h2>
+                        <p>
+                            To be, or not to be, that is the question: Whether ’tis nobler in the
+                            mind to suffer The slings and arrows of outrageous fortune, …
+                        </p>
+                    </div>
+                </FormField.RadioBox.Option>
+            </FormField.RadioBox>
+        </FormField>
+    );
+};
+
+export const Default: Story = {
+    render: () => (
+        <div className="w-96">
+            <RadioBoxWithHooks />
+        </div>
+    ),
+};
diff --git a/src/components/form-field/radio-box/radio-box.tsx b/src/components/form-field/radio-box/radio-box.tsx
new file mode 100644
index 00000000..ac81b133
--- /dev/null
+++ b/src/components/form-field/radio-box/radio-box.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { RadioGroup } from "@headlessui/react";
+import { RadioBoxOption } from "./radio-box-option";
+
+export interface RadioBoxProps {
+    id: string;
+    children: React.ReactNode;
+    value: string;
+    onChange: (value: string) => void;
+}
+
+export const RadioBox = ({ id, value, children, onChange }: RadioBoxProps) => {
+    return (
+        <RadioGroup id={id} value={value} onChange={onChange} className="flex flex-col gap-2">
+            {children}
+        </RadioGroup>
+    );
+};
+
+RadioBox.Option = RadioBoxOption;
diff --git a/src/components/recommendation-tag/recommendation-tag.stories.tsx b/src/components/recommendation-tag/recommendation-tag.stories.tsx
new file mode 100644
index 00000000..ee216287
--- /dev/null
+++ b/src/components/recommendation-tag/recommendation-tag.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
+import { RecommendationTag } from "./recommendation-tag";
+import { Panel } from "../panel";
+import { FormField } from "../form-field";
+
+const meta: Meta<typeof RecommendationTag> = {
+    title: "Input/RecommendationTag",
+    component: RecommendationTag,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RecommendationTag>;
+
+const RadioBoxWithRecommendationTag = () => {
+    const [value, setValue] = useState("value_1");
+
+    return (
+        <div className="w-96">
+            <FormField>
+                <FormField.RadioBox
+                    value={value}
+                    onChange={(newValue) => {
+                        setValue(newValue);
+                    }}
+                    id="value"
+                >
+                    <FormField.RadioBox.Option value="option_1">
+                        Option 1<RecommendationTag>Recommended!</RecommendationTag>
+                    </FormField.RadioBox.Option>
+
+                    <FormField.RadioBox.Option value="option_2">Option 2</FormField.RadioBox.Option>
+
+                    <FormField.RadioBox.Option value="option_3">Option 3</FormField.RadioBox.Option>
+                </FormField.RadioBox>
+            </FormField>
+        </div>
+    );
+};
+
+export const Default: Story = {
+    render: () => {
+        return <RadioBoxWithRecommendationTag />;
+    },
+};
+
+export const PanelExample: Story = {
+    render: () => (
+        <div className="w-96">
+            <Panel className="relative">
+                <p>This example uses a Panel component</p>
+                <RecommendationTag>Recommended!</RecommendationTag>
+            </Panel>
+        </div>
+    ),
+};
diff --git a/src/components/recommendation-tag/recommendation-tag.tsx b/src/components/recommendation-tag/recommendation-tag.tsx
new file mode 100644
index 00000000..ac77efdf
--- /dev/null
+++ b/src/components/recommendation-tag/recommendation-tag.tsx
@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+import { classNames } from "../../util/class-names";
+
+interface RecommendationTagProps {
+    children: ReactNode;
+    className?: string;
+}
+
+export const RecommendationTag = ({ children, className }: RecommendationTagProps) => {
+    return (
+        <span
+            className={classNames(
+                "absolute right-6 top-0 z-10 -translate-y-1/2 rounded border border-primary-500 bg-primary-100 px-1 text-xs uppercase tracking-wide text-primary-500",
+                className
+            )}
+        >
+            {children}
+        </span>
+    );
+};