diff --git a/src/pages/ComponentsDemo.tsx b/src/pages/ComponentsDemo.tsx
index 032d4e8..4019db6 100644
--- a/src/pages/ComponentsDemo.tsx
+++ b/src/pages/ComponentsDemo.tsx
@@ -1,8 +1,140 @@
 import { Component } from 'solid-js';
+import Check from '../components/Check';
+import Radio from '../components/Radio';
+import RadioGroup from '../components/RadioGroup';
+import ScrollArea from '../components/ScrollArea';
+import Segments from '../components/Segments';
+import Select from '../components/Select';
+import Switcher from '../components/Switch';
 
 const ComponentsDemo: Component = () => {
   return (
-    <div class="workspace flex flex-col items-stretch gap-2 rounded-sm bg-swatch-neutral-20"></div>
+    <div class="workspace flex flex-col items-stretch gap-2 rounded-sm bg-swatch-neutral-20 p-4">
+      <ScrollArea enableY flexExtended>
+        <div class="flex flex-col items-stretch gap-2">
+          <div class="flex flex-row gap-1">
+            <Radio name="t_radio_1" defaultChecked>
+              Test Radio button
+            </Radio>
+          </div>
+          <div class="flex flex-row items-center gap-3">
+            <RadioGroup
+              name="t_radio_group_1"
+              options={[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+                { label: 'Option 3', value: '3' },
+              ]}
+              defalutValue="2"
+            />
+          </div>
+          <div class="flex flex-row gap-1">
+            <Check name="t_check_1">Test Checkbox</Check>
+          </div>
+          <div class="flex flex-row gap-1 items-center">
+            <Segments
+              options={[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+                { label: 'Option 3', value: '3' },
+              ]}
+            />
+            <Select
+              placeholder="Select an option"
+              options={[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+                { label: 'Option 3', value: '3' },
+              ]}
+            />
+            <Select
+              placeholder="Select an option"
+              variant="underlined"
+              options={[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+                { label: 'Option 3', value: '3' },
+              ]}
+            />
+            <Select
+              placeholder="Select an option"
+              variant="immersive"
+              options={[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+                { label: 'Option 3', value: '3' },
+                { label: 'Option 4', value: '4' },
+                { label: 'Option 5', value: '5' },
+                { label: 'Option 6', value: '6' },
+                { label: 'Option 7', value: '7' },
+                { label: 'Option 8', value: '8' },
+                { label: 'Option 9', value: '9' },
+                { label: 'Option 1', value: 'a' },
+                { label: 'Option 2', value: 'b' },
+                { label: 'Option 3', value: 'c' },
+                { label: 'Option 4', value: 'd' },
+                { label: 'Option 5', value: 'e' },
+                { label: 'Option 6', value: 'f' },
+                { label: 'Option 7', value: 'g' },
+              ]}
+            />
+          </div>
+          <div class="flex flex-row gap-1 items-center">
+            <Segments
+              disabled
+              options={[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+                { label: 'Option 3', value: '3' },
+              ]}
+            />
+            <Select
+              placeholder="Select an option"
+              disabled
+              options={[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+                { label: 'Option 3', value: '3' },
+              ]}
+            />
+            <Select
+              placeholder="Select an option"
+              variant="underlined"
+              disabled
+              options={[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+                { label: 'Option 3', value: '3' },
+              ]}
+            />
+            <Select
+              placeholder="Select an option"
+              variant="immersive"
+              disabled
+              options={[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+                { label: 'Option 3', value: '3' },
+              ]}
+            />
+          </div>
+          <div class="flex flex-row gap-1 text-xs">
+            <Segments
+              direction="vertical"
+              options={[
+                { label: 'Option 1', value: '1' },
+                { label: 'Option 2', value: '2' },
+                { label: 'Option 3', value: '3' },
+              ]}
+              defaultValue="3"
+            />
+          </div>
+          <div class="flex flex-row gap-1">
+            <Switcher />
+          </div>
+        </div>
+      </ScrollArea>
+    </div>
   );
 };