diff --git a/preview/wwwroot/css/tailwind.css b/preview/wwwroot/css/tailwind.css
index 83a417b..513538d 100644
--- a/preview/wwwroot/css/tailwind.css
+++ b/preview/wwwroot/css/tailwind.css
@@ -578,6 +578,10 @@ video {
   display: flex;
 }
 
+.min-h-screen {
+  min-height: 100vh;
+}
+
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -590,18 +594,6 @@ video {
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
-}
-
-.space-y-3 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
-}
-
 @media (prefers-color-scheme: dark) {
   .dark\:bg-neutral-900 {
     --tw-bg-opacity: 1;
diff --git a/src/Components/DPCheckBox.razor b/src/Components/DPCheckBox.razor
index cab96db..08388ed 100644
--- a/src/Components/DPCheckBox.razor
+++ b/src/Components/DPCheckBox.razor
@@ -3,7 +3,10 @@
     <label for="@_id" class="@ActualLabelStyle">
         <input id="@_id" type="checkbox" disabled="@IsDisabled" hidden @bind="ActualValue" />
         <div class="@ActualContainerStyle">
-            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 30 30">
+             <svg class="sm:hidden" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 30 30">
+                <path d="M 26.980469 5.9902344 A 1.0001 1.0001 0 0 0 26.292969 6.2929688 L 11 21.585938 L 4.7070312 15.292969 A 1.0001 1.0001 0 1 0 3.2929688 16.707031 L 10.292969 23.707031 A 1.0001 1.0001 0 0 0 11.707031 23.707031 L 27.707031 7.7070312 A 1.0001 1.0001 0 0 0 26.980469 5.9902344 z"></path>
+            </svg>
+            <svg class="-sm:hidden" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0 0 30 30">
                 <path d="M 26.980469 5.9902344 A 1.0001 1.0001 0 0 0 26.292969 6.2929688 L 11 21.585938 L 4.7070312 15.292969 A 1.0001 1.0001 0 1 0 3.2929688 16.707031 L 10.292969 23.707031 A 1.0001 1.0001 0 0 0 11.707031 23.707031 L 27.707031 7.7070312 A 1.0001 1.0001 0 0 0 26.980469 5.9902344 z"></path>
             </svg>
         </div>
@@ -14,7 +17,10 @@ else
     <label for="@_id" class="@ActualLabelStyle">
         <input id="@_id" type="checkbox" disabled="@IsDisabled" hidden @bind="ActualValue" />
         <div class="@ActualContainerStyle">
-            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 30 30">
+             <svg class="sm:hidden" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 30 30">
+                <path d="M 26.980469 5.9902344 A 1.0001 1.0001 0 0 0 26.292969 6.2929688 L 11 21.585938 L 4.7070312 15.292969 A 1.0001 1.0001 0 1 0 3.2929688 16.707031 L 10.292969 23.707031 A 1.0001 1.0001 0 0 0 11.707031 23.707031 L 27.707031 7.7070312 A 1.0001 1.0001 0 0 0 26.980469 5.9902344 z"></path>
+            </svg>
+            <svg class="-sm:hidden" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16" height="16" viewBox="0 0 30 30">
                 <path d="M 26.980469 5.9902344 A 1.0001 1.0001 0 0 0 26.292969 6.2929688 L 11 21.585938 L 4.7070312 15.292969 A 1.0001 1.0001 0 1 0 3.2929688 16.707031 L 10.292969 23.707031 A 1.0001 1.0001 0 0 0 11.707031 23.707031 L 27.707031 7.7070312 A 1.0001 1.0001 0 0 0 26.980469 5.9902344 z"></path>
             </svg>
         </div>
diff --git a/src/Components/DPToggleSwitch.razor b/src/Components/DPToggleSwitch.razor
index 383b008..8634b9a 100644
--- a/src/Components/DPToggleSwitch.razor
+++ b/src/Components/DPToggleSwitch.razor
@@ -3,8 +3,8 @@
     <label for="@_id" class="@ActualLabelStyle">
         <input id="@_id" type="checkbox" disabled="@IsDisabled" hidden @bind="ActualValue" />
         <div class="@ActualContainerStyle">
-            <div class="@ActualDotStyle" style="transform: translateX(@(Value ? "115%" : "15%"));">
-            </div>
+            <div class="@ActualDotStyle sm:hidden" style="transform: translateX(@(Value ? "110%" : "15%"));" />
+            <div class="@ActualDotStyle -sm:hidden" style="transform: translateX(@(Value ? "140%" : "25%"));" />
         </div>
     </label>
 }
@@ -14,8 +14,8 @@ else
         <input id="@_id" type="checkbox" disabled="@IsDisabled" hidden @bind="ActualValue" />
         <span>@Label</span>
         <div class="@ActualContainerStyle">
-            <div class="@ActualDotStyle" style="transform: translateX(@(Value ? "115%" : "15%"));">
-            </div>
+            <div class="@ActualDotStyle sm:hidden" style="transform: translateX(@(Value ? "110%" : "15%"));" />
+            <div class="@ActualDotStyle -sm:hidden" style="transform: translateX(@(Value ? "140%" : "25%"));" />
         </div>
     </label>
 }
diff --git a/src/wwwroot/css/dopamine.css b/src/wwwroot/css/dopamine.css
index 496aa64..092faef 100644
--- a/src/wwwroot/css/dopamine.css
+++ b/src/wwwroot/css/dopamine.css
@@ -92,7 +92,7 @@
     }
 
     .switch-container-base {
-        @apply flex items-center h-8 transition-all duration-300 ease-in-out border rounded-full shadow-sm w-14;
+        @apply flex items-center h-8 transition-all duration-300 ease-in-out border rounded-full shadow-sm sm:h-6 w-14 sm:w-11;
     }
 
     .switch-container-off {
@@ -108,7 +108,7 @@
     }
 
     .switch-dot-base {
-        @apply w-6 h-6 transition-all duration-300 ease-in-out border rounded-full shadow-sm;
+        @apply w-6 h-6 transition-all duration-300 ease-in-out border rounded-full shadow-sm sm:w-4 sm:h-4;
     }
 
     .switch-dot-off {
@@ -136,7 +136,7 @@
     }
 
     .checkbox-container-base {
-        @apply flex items-center justify-center w-8 h-8 transition-all duration-300 ease-in-out border rounded-lg shadow-sm stroke-2;
+        @apply flex items-center justify-center w-8 h-8 transition-all duration-300 ease-in-out border rounded-md shadow-sm stroke-2 sm:w-6 sm:h-6;
     }
 
     .checkbox-container-off {
@@ -168,7 +168,7 @@
     }
 
     .radio-container-base {
-        @apply flex items-center justify-center w-8 h-8 transition-all duration-300 ease-in-out border rounded-full shadow-sm stroke-2;
+        @apply flex items-center justify-center w-8 h-8 transition-all duration-300 ease-in-out border rounded-full shadow-sm stroke-2 sm:w-6 sm:h-6;
     }
 
     .radio-container-off {
@@ -192,18 +192,18 @@
     }
 
     .radio-dot-off {
-        @apply w-4 h-4 radio-dot-base border-neutral-200 dark:border-neutral-700 group-hover:bg-neutral-500 group-active:bg-neutral-600 group-active:border-neutral-600 group-hover:border-neutral-500 dark:group-hover:bg-neutral-400 dark:group-hover:border-neutral-400 group-hover:shadow-sm dark:group-active:bg-neutral-300 dark:group-active:border-neutral-300;
+        @apply w-4 h-4 sm:w-3 sm:h-3 radio-dot-base border-neutral-200 dark:border-neutral-700 group-hover:bg-neutral-500 group-active:bg-neutral-600 group-active:border-neutral-600 group-hover:border-neutral-500 dark:group-hover:bg-neutral-400 dark:group-hover:border-neutral-400 group-hover:shadow-sm dark:group-active:bg-neutral-300 dark:group-active:border-neutral-300;
     }
 
     .radio-dot-on {
-        @apply w-5 h-5 bg-white border-blue-700 shadow-sm radio-dot-base group-hover:border-blue-800 dark:border-blue-700 dark:group-hover:border-blue-600;
+        @apply w-5 h-5 bg-white border-blue-700 shadow-sm sm:w-3 sm:h-3 radio-dot-base group-hover:border-blue-800 dark:border-blue-700 dark:group-hover:border-blue-600;
     }
 
     .radio-dot-disabled-off {
-        @apply w-5 h-5 radio-dot-base bg-neutral-100 border-neutral-100 dark:bg-neutral-800 dark:border-neutral-800;
+        @apply w-5 h-5 sm:w-3 sm:h-3 radio-dot-base bg-neutral-100 border-neutral-100 dark:bg-neutral-800 dark:border-neutral-800;
     }
 
     .radio-dot-disabled-on {
-        @apply w-5 h-5 radio-dot-base bg-neutral-300 switch-dot-base dark:bg-neutral-600 border-neutral-300 dark:border-neutral-600;
+        @apply w-5 h-5 sm:w-3 sm:h-3 radio-dot-base bg-neutral-300 switch-dot-base dark:bg-neutral-600 border-neutral-300 dark:border-neutral-600;
     }
 }
diff --git a/src/wwwroot/css/tailwind.css b/src/wwwroot/css/tailwind.css
index e6659ed..500d022 100644
--- a/src/wwwroot/css/tailwind.css
+++ b/src/wwwroot/css/tailwind.css
@@ -1274,6 +1274,16 @@ video {
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+  .switch-container-off {
+    height: 1.5rem;
+    width: 2.75rem;
+  }
+}
+
+.switch-container-off {
   --tw-border-opacity: 1;
   border-color: rgb(212 212 212 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
@@ -1332,6 +1342,16 @@ video {
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+  .switch-container-on {
+    height: 1.5rem;
+    width: 2.75rem;
+  }
+}
+
+.switch-container-on {
   --tw-border-opacity: 1;
   border-color: rgb(21 128 61 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
@@ -1394,6 +1414,16 @@ video {
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+  .switch-container-disabled {
+    height: 1.5rem;
+    width: 2.75rem;
+  }
+}
+
+.switch-container-disabled {
   --tw-border-opacity: 1;
   border-color: rgb(229 229 229 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
@@ -1420,6 +1450,16 @@ video {
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+  .switch-dot-off {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+.switch-dot-off {
   --tw-border-opacity: 1;
   border-color: rgb(229 229 229 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
@@ -1442,6 +1482,16 @@ video {
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+  .switch-dot-on {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+.switch-dot-on {
   --tw-border-opacity: 1;
   border-color: rgb(21 128 61 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
@@ -1476,6 +1526,16 @@ video {
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+  .switch-dot-disabled {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+.switch-dot-disabled {
   --tw-border-opacity: 1;
   border-color: rgb(245 245 245 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
@@ -1584,7 +1644,7 @@ video {
   width: 2rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.5rem;
+  border-radius: 0.375rem;
   border-width: 1px;
   stroke-width: 2;
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -1593,6 +1653,16 @@ video {
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+  .checkbox-container-off {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+.checkbox-container-off {
   --tw-border-opacity: 1;
   border-color: rgb(212 212 212 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
@@ -1656,7 +1726,7 @@ video {
   width: 2rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.5rem;
+  border-radius: 0.375rem;
   border-width: 1px;
   stroke-width: 2;
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -1665,6 +1735,16 @@ video {
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+  .checkbox-container-on {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+.checkbox-container-on {
   --tw-border-opacity: 1;
   border-color: rgb(29 78 216 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
@@ -1722,7 +1802,7 @@ video {
   width: 2rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.5rem;
+  border-radius: 0.375rem;
   border-width: 1px;
   stroke-width: 2;
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -1731,6 +1811,16 @@ video {
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+  .checkbox-container-disabled-off {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+.checkbox-container-disabled-off {
   --tw-border-opacity: 1;
   border-color: rgb(229 229 229 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
@@ -1756,7 +1846,7 @@ video {
   width: 2rem;
   align-items: center;
   justify-content: center;
-  border-radius: 0.5rem;
+  border-radius: 0.375rem;
   border-width: 1px;
   stroke-width: 2;
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -1765,6 +1855,16 @@ video {
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+  .checkbox-container-disabled-on {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+.checkbox-container-disabled-on {
   --tw-border-opacity: 1;
   border-color: rgb(229 229 229 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
@@ -1886,6 +1986,16 @@ video {
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+  .radio-container-off {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+.radio-container-off {
   --tw-border-opacity: 1;
   border-color: rgb(212 212 212 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
@@ -1958,6 +2068,16 @@ video {
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+  .radio-container-on {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+.radio-container-on {
   --tw-border-opacity: 1;
   border-color: rgb(29 78 216 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
@@ -2024,6 +2144,16 @@ video {
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+  .radio-container-disabled-off {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+.radio-container-disabled-off {
   --tw-border-opacity: 1;
   border-color: rgb(229 229 229 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
@@ -2058,6 +2188,16 @@ video {
   transition-property: all;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+  .radio-container-disabled-on {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+.radio-container-disabled-on {
   --tw-border-opacity: 1;
   border-color: rgb(229 229 229 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
@@ -2106,6 +2246,13 @@ video {
   background-color: rgb(82 82 82 / var(--tw-bg-opacity));
 }
 
+@media (min-width: 640px) {
+  .radio-dot-off {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .radio-dot-off {
     --tw-border-opacity: 1;
@@ -2149,6 +2296,13 @@ video {
   border-color: rgb(30 64 175 / var(--tw-border-opacity));
 }
 
+@media (min-width: 640px) {
+  .radio-dot-on {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .radio-dot-on {
     --tw-border-opacity: 1;
@@ -2175,6 +2329,13 @@ video {
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
 
+@media (min-width: 640px) {
+  .radio-dot-disabled-off {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .radio-dot-disabled-off {
     --tw-border-opacity: 1;
@@ -2185,9 +2346,26 @@ video {
 }
 
 .radio-dot-disabled-on {
+  height: 1.5rem;
+  width: 1.5rem;
+  border-radius: 9999px;
+  border-width: 1px;
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: all;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@media (min-width: 640px) {
+  .radio-dot-disabled-on {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+.radio-dot-disabled-on {
   border-radius: 9999px;
   border-width: 1px;
   transition-property: all;
@@ -2201,6 +2379,13 @@ video {
   background-color: rgb(212 212 212 / var(--tw-bg-opacity));
 }
 
+@media (min-width: 640px) {
+  .radio-dot-disabled-on {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .radio-dot-disabled-on {
     --tw-border-opacity: 1;
@@ -2278,22 +2463,12 @@ video {
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
 
-.bg-neutral-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(115 115 115 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(212 212 212 / var(--tw-bg-opacity));
+.rounded-lg {
+  border-radius: 0.5rem;
 }
 
 .bg-neutral-200 {
@@ -2473,6 +2648,12 @@ video {
   }
 }
 
+@media (max-width: 639px) {
+  .-sm\:hidden {
+    display: none;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   .dark\:bg-neutral-600 {
     --tw-bg-opacity: 1;