diff --git a/src/core/styles/Forms.stories.tsx b/src/core/styles/Forms.stories.tsx
index 990e38df7..da6a6844f 100644
--- a/src/core/styles/Forms.stories.tsx
+++ b/src/core/styles/Forms.stories.tsx
@@ -20,7 +20,7 @@ const exampleOptionFields = (
 export const Inputs = {
   render: () => (
     <div className="grid sm:grid-cols-2 gap-16">
-      <div>
+      <div className="grid sm:grid-cols-2 gap-16">
         <p className="mb-16 text-neutral-800">Default</p>
         <input
           type="search"
@@ -29,16 +29,7 @@ export const Inputs = {
           autoComplete="off"
         />
       </div>
-      <div>
-        <p className="mb-16 text-neutral-800">Default (dark)</p>
-        <input
-          type="search"
-          className="ui-input ui-input-dark"
-          placeholder="Dark mode input"
-          autoComplete="off"
-        />
-      </div>
-      <div>
+      <div className="grid sm:grid-cols-2 gap-16">
         <p className="mb-16 text-neutral-800">Disabled</p>
         <input
           type="search"
@@ -48,16 +39,6 @@ export const Inputs = {
           disabled
         />
       </div>
-      <div>
-        <p className="mb-16 text-neutral-800">Disabled (dark)</p>
-        <input
-          type="search"
-          className="ui-input ui-input-dark"
-          placeholder="Dark mode input"
-          autoComplete="off"
-          disabled
-        />
-      </div>
       <div>
         <p className="mb-16 text-neutral-800">Invalid</p>
         <input
@@ -69,17 +50,6 @@ export const Inputs = {
         />
         <p className="ui-text-p3 text-gui-error-red mt-8">Oof, what an input</p>
       </div>
-      <div>
-        <p className="mb-16 text-neutral-800">Invalid (dark)</p>
-        <input
-          type="search"
-          className="ui-input ui-input-dark"
-          placeholder="Dark mode input"
-          autoComplete="off"
-          required
-        />
-        <p className="ui-text-p3 text-gui-error-red mt-8">Oof, what an input</p>
-      </div>
       <div>
         <p className="mb-16 text-neutral-800">With character insert</p>
         <div className="relative">
@@ -125,17 +95,6 @@ export const Dropdowns = {
           Select language
         </div>
       </div>
-      <div>
-        <p className="mb-16 text-neutral-800">Dark mode</p>
-        <div className="bg-neutral-1300 p-24">
-          <select
-            className="ui-dropdown ui-dropdown-dark"
-            defaultValue="select"
-          >
-            {exampleOptionFields}
-          </select>
-        </div>
-      </div>
     </div>
   ),
 };
@@ -194,6 +153,118 @@ export const Checkboxes = {
   ),
 };
 
+export const RadioButtons = {
+  render: () => (
+    <div className="grid sm:grid-cols-2 gap-16">
+      <div className="flex flex-col gap-8">
+        <p className="mb-16 text-neutral-800">Default</p>
+        <div className="flex items-center gap-8">
+          <input
+            data-ui-radio-native=""
+            type="radio"
+            id="radio-example-1"
+            name="radio-example"
+            value="option1"
+            className="ui-radio"
+          />
+          <label
+            className="text-neutral-1300 dark:text-neutral-000"
+            htmlFor="radio-example-1"
+          >
+            Best option
+          </label>
+        </div>
+        <div className="flex items-center gap-8">
+          <input
+            data-ui-radio-native=""
+            type="radio"
+            id="radio-example-2"
+            name="radio-example"
+            value="option1"
+            className="ui-radio"
+          />
+          <label
+            className="text-neutral-1300 dark:text-neutral-000"
+            htmlFor="radio-example-2"
+          >
+            Advisable option
+          </label>
+        </div>
+        <div className="flex items-center gap-8">
+          <input
+            data-ui-radio-native=""
+            type="radio"
+            id="radio-example-3"
+            name="radio-example"
+            value="option1"
+            className="ui-radio"
+          />
+          <label
+            className="text-neutral-1300 dark:text-neutral-000"
+            htmlFor="radio-example-3"
+          >
+            Finest option
+          </label>
+        </div>
+      </div>
+      <div className="flex flex-col gap-8">
+        <p className="mb-16 text-neutral-800">Disabled</p>
+        <div className="flex items-center gap-8">
+          <input
+            data-ui-radio-native=""
+            type="radio"
+            id="radio-example-4"
+            name="radio-example"
+            value="option1"
+            className="ui-radio"
+            disabled
+          />
+          <label
+            className="text-neutral-1300 dark:text-neutral-000"
+            htmlFor="radio-example-4"
+          >
+            Best option
+          </label>
+        </div>
+        <div className="flex items-center gap-8">
+          <input
+            data-ui-radio-native=""
+            type="radio"
+            id="radio-example-5"
+            name="radio-example"
+            value="option1"
+            className="ui-radio"
+            disabled
+          />
+          <label
+            className="text-neutral-1300 dark:text-neutral-000"
+            htmlFor="radio-example-5"
+          >
+            Advisable option
+          </label>
+        </div>
+        <div className="flex items-center gap-8">
+          <input
+            data-ui-radio-native=""
+            type="radio"
+            id="radio-example-6"
+            name="radio-example"
+            value="option1"
+            className="ui-radio"
+            disabled
+          />
+          <label
+            className="text-neutral-1300 dark:text-neutral-000"
+            htmlFor="radio-example-6"
+          >
+            Finest option
+          </label>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
 export const Textareas = {
   render: () => (
     <div className="mb-40">
diff --git a/src/core/styles/__snapshots__/Forms.stories.tsx.snap b/src/core/styles/__snapshots__/Forms.stories.tsx.snap
index 192031d39..f3b9a0ff6 100644
--- a/src/core/styles/__snapshots__/Forms.stories.tsx.snap
+++ b/src/core/styles/__snapshots__/Forms.stories.tsx.snap
@@ -153,39 +153,12 @@ exports[`Styles/Forms Dropdowns smoke-test 1`] = `
       Select language
     </div>
   </div>
-  <div>
-    <p class="mb-16 text-neutral-800">
-      Dark mode
-    </p>
-    <div class="bg-neutral-1300 p-24">
-      <select class="ui-dropdown ui-dropdown-dark">
-        <option value="select"
-                disabled
-                selected
-        >
-          Select language
-        </option>
-        <option value="javascript">
-          Javascript
-        </option>
-        <option value="ruby">
-          Ruby
-        </option>
-        <option value="python">
-          Python
-        </option>
-        <option value="java">
-          Java
-        </option>
-      </select>
-    </div>
-  </div>
 </div>
 `;
 
 exports[`Styles/Forms Inputs smoke-test 1`] = `
 <div class="grid sm:grid-cols-2 gap-16">
-  <div>
+  <div class="grid sm:grid-cols-2 gap-16">
     <p class="mb-16 text-neutral-800">
       Default
     </p>
@@ -195,17 +168,7 @@ exports[`Styles/Forms Inputs smoke-test 1`] = `
            autocomplete="off"
     >
   </div>
-  <div>
-    <p class="mb-16 text-neutral-800">
-      Default (dark)
-    </p>
-    <input type="search"
-           class="ui-input ui-input-dark"
-           placeholder="Dark mode input"
-           autocomplete="off"
-    >
-  </div>
-  <div>
+  <div class="grid sm:grid-cols-2 gap-16">
     <p class="mb-16 text-neutral-800">
       Disabled
     </p>
@@ -216,17 +179,6 @@ exports[`Styles/Forms Inputs smoke-test 1`] = `
            disabled
     >
   </div>
-  <div>
-    <p class="mb-16 text-neutral-800">
-      Disabled (dark)
-    </p>
-    <input type="search"
-           class="ui-input ui-input-dark"
-           placeholder="Dark mode input"
-           autocomplete="off"
-           disabled
-    >
-  </div>
   <div>
     <p class="mb-16 text-neutral-800">
       Invalid
@@ -241,20 +193,6 @@ exports[`Styles/Forms Inputs smoke-test 1`] = `
       Oof, what an input
     </p>
   </div>
-  <div>
-    <p class="mb-16 text-neutral-800">
-      Invalid (dark)
-    </p>
-    <input type="search"
-           class="ui-input ui-input-dark"
-           placeholder="Dark mode input"
-           autocomplete="off"
-           required
-    >
-    <p class="ui-text-p3 text-gui-error-red mt-8">
-      Oof, what an input
-    </p>
-  </div>
   <div>
     <p class="mb-16 text-neutral-800">
       With character insert
@@ -273,6 +211,108 @@ exports[`Styles/Forms Inputs smoke-test 1`] = `
 </div>
 `;
 
+exports[`Styles/Forms RadioButtons smoke-test 1`] = `
+<div class="grid sm:grid-cols-2 gap-16">
+  <div class="flex flex-col gap-8">
+    <p class="mb-16 text-neutral-800">
+      Default
+    </p>
+    <div class="flex items-center gap-8">
+      <input data-ui-radio-native
+             type="radio"
+             id="radio-example-1"
+             name="radio-example"
+             class="ui-radio"
+             value="option1"
+      >
+      <label class="text-neutral-1300 dark:text-neutral-000"
+             for="radio-example-1"
+      >
+        Best option
+      </label>
+    </div>
+    <div class="flex items-center gap-8">
+      <input data-ui-radio-native
+             type="radio"
+             id="radio-example-2"
+             name="radio-example"
+             class="ui-radio"
+             value="option1"
+      >
+      <label class="text-neutral-1300 dark:text-neutral-000"
+             for="radio-example-2"
+      >
+        Advisable option
+      </label>
+    </div>
+    <div class="flex items-center gap-8">
+      <input data-ui-radio-native
+             type="radio"
+             id="radio-example-3"
+             name="radio-example"
+             class="ui-radio"
+             value="option1"
+      >
+      <label class="text-neutral-1300 dark:text-neutral-000"
+             for="radio-example-3"
+      >
+        Finest option
+      </label>
+    </div>
+  </div>
+  <div class="flex flex-col gap-8">
+    <p class="mb-16 text-neutral-800">
+      Disabled
+    </p>
+    <div class="flex items-center gap-8">
+      <input data-ui-radio-native
+             type="radio"
+             id="radio-example-4"
+             name="radio-example"
+             class="ui-radio"
+             disabled
+             value="option1"
+      >
+      <label class="text-neutral-1300 dark:text-neutral-000"
+             for="radio-example-4"
+      >
+        Best option
+      </label>
+    </div>
+    <div class="flex items-center gap-8">
+      <input data-ui-radio-native
+             type="radio"
+             id="radio-example-5"
+             name="radio-example"
+             class="ui-radio"
+             disabled
+             value="option1"
+      >
+      <label class="text-neutral-1300 dark:text-neutral-000"
+             for="radio-example-5"
+      >
+        Advisable option
+      </label>
+    </div>
+    <div class="flex items-center gap-8">
+      <input data-ui-radio-native
+             type="radio"
+             id="radio-example-6"
+             name="radio-example"
+             class="ui-radio"
+             disabled
+             value="option1"
+      >
+      <label class="text-neutral-1300 dark:text-neutral-000"
+             for="radio-example-6"
+      >
+        Finest option
+      </label>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Styles/Forms Textareas smoke-test 1`] = `
 <div class="mb-40">
   <label class="ui-text-p1 block"
diff --git a/src/core/styles/__snapshots__/Typography.stories.tsx.snap b/src/core/styles/__snapshots__/Typography.stories.tsx.snap
index 60dde2d7f..f6ecf5b67 100644
--- a/src/core/styles/__snapshots__/Typography.stories.tsx.snap
+++ b/src/core/styles/__snapshots__/Typography.stories.tsx.snap
@@ -60,68 +60,68 @@ exports[`Styles/Typography Decorative smoke-test 1`] = `
 
 exports[`Styles/Typography GUI smoke-test 1`] = `
 <div class="grid sm:grid-cols-3 gap-16">
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-button1">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-button1">
     <div>
       Button label 1
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-button1
+      .ui-text-button1
     </code>
   </div>
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-button2">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-button2">
     <div>
       Button label 2
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-button2
+      .ui-text-button2
     </code>
   </div>
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-button3">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-button3">
     <div>
       Button label 3
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-button3
+      .ui-text-button3
     </code>
   </div>
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-button4">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-button4">
     <div>
       Button label 4
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-button4
+      .ui-text-button4
     </code>
   </div>
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-menu1">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-menu1">
     <div>
       Menu label 1
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-menu1
+      .ui-text-menu1
     </code>
   </div>
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-menu2">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-menu2">
     <div>
       Menu label 2
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-menu2
+      .ui-text-menu2
     </code>
   </div>
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-menu3">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-menu3">
     <div>
       Menu label 3
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-menu3
+      .ui-text-menu3
     </code>
   </div>
-  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-gui-menu4">
+  <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text-menu4">
     <div>
       Menu label 4
     </div>
     <code class="font-mono ui-text-code2 bg-neutral-200 text-neutral-1200 dark:bg-neutral-1100 dark:text-neutral-100 rounded-lg p-8">
-      .ui-gui-menu4
+      .ui-text-menu4
     </code>
   </div>
   <div class="rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000 ui-text">
diff --git a/src/core/styles/dropdowns.css b/src/core/styles/dropdowns.css
index ca8e56034..09e3178de 100644
--- a/src/core/styles/dropdowns.css
+++ b/src/core/styles/dropdowns.css
@@ -1,11 +1,15 @@
 @layer components {
   .ui-dropdown-base {
-    @apply rounded-lg border border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 text-p2 flex font-medium bg-transparent;
+    @apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 focus:outline-offset-0;
+    @apply bg-no-repeat text-p2 flex font-medium bg-neutral-100 transition-colors;
     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
-    background-repeat: no-repeat;
     background-position: center right 16px;
   }
 
+  .ui-theme-dark .ui-dropdown-base {
+    @apply text-neutral-000 bg-neutral-1200 border-neutral-900 hover:border-neutral-700 active:border-neutral-800;
+  }
+
   .ui-dropdown-base option:disabled {
     @apply text-neutral-800;
   }
diff --git a/src/core/styles/forms.css b/src/core/styles/forms.css
index 75d577f4d..3d85baf5d 100644
--- a/src/core/styles/forms.css
+++ b/src/core/styles/forms.css
@@ -87,6 +87,10 @@
     @apply absolute cursor-pointer inset-0 transition-all bg-neutral-600 rounded-full;
   }
 
+  .ui-theme-dark .ui-toggle-slider {
+    @apply bg-neutral-700;
+  }
+
   .ui-toggle-slider:before {
     @apply absolute h-[28px] w-[28px] left-2 bottom-2 bg-white rounded-full transition-transform drop-shadow-toggle;
     content: "";
@@ -110,12 +114,12 @@
 
   .ui-input {
     @apply ui-text-p2 font-medium bg-neutral-100 rounded p-input w-full leading-none appearance-none border border-neutral-400 transition-colors placeholder-neutral-600;
-    @apply hover:border-neutral-700 focus:bg-white focus:outline-gui-focus;
+    @apply hover:border-neutral-700 focus:bg-white focus:outline-gui-focus focus:outline-offset-0 focus:outline-4;
     @apply max-w-screen-sm invalid:border-gui-error-red;
   }
 
   .ui-theme-dark .ui-input {
-    @apply bg-neutral-1200 hover:bg-neutral-1000 focus:bg-neutral-1000 text-neutral-300 border-neutral-900 placeholder-neutral-700;
+    @apply bg-neutral-1200 hover:bg-neutral-1000 focus:bg-neutral-1000 text-neutral-300 border-neutral-900 placeholder-neutral-700 invalid:border-gui-error-red;
   }
 
   .ui-input:disabled {
@@ -125,4 +129,24 @@
   .ui-theme-dark .ui-input:disabled {
     @apply bg-gui-unavailable-dark text-neutral-800 placeholder-neutral-800;
   }
+
+  .ui-radio {
+    @apply border border-neutral-600 w-20 h-20 appearance-none cursor-pointer rounded-full focus:outline-gui-blue-focus focus:outline-4;
+  }
+
+  .ui-radio:checked {
+    @apply bg-orange-600 border-orange-600 border;
+  }
+
+  .ui-radio:checked::after {
+    @apply content-[''] mt-[5px] w-8 h-8 block bg-white rounded-full m-auto;
+  }
+
+  .ui-radio:disabled {
+    @apply bg-neutral-300;
+  }
+
+  .ui-theme-dark .ui-radio:disabled {
+    @apply bg-neutral-1100;
+  }
 }