diff --git a/src/components/Checkbox/Checkbox.stories.ts b/src/components/Checkbox/Checkbox.stories.ts
index 6e74748e25dd8ee10cd59461151e96a718b40c5e..e8ee599a3be05417bc5c9495d226e93de0d08288 100644
--- a/src/components/Checkbox/Checkbox.stories.ts
+++ b/src/components/Checkbox/Checkbox.stories.ts
@@ -14,6 +14,7 @@ const meta: Meta = {
     },
   },
   argTypes: {
+    active: { control: 'boolean' },
     invalid: { control: 'boolean' },
     disabled: { control: 'boolean' },
     label: { control: 'text' },
diff --git a/src/components/Checkbox/Checkbox.vue b/src/components/Checkbox/Checkbox.vue
index b1224269343c07cbcdc4209fd284a49173b1c47c..38bb0376a4b92e5135453206ad3d71c74cb6dd67 100644
--- a/src/components/Checkbox/Checkbox.vue
+++ b/src/components/Checkbox/Checkbox.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ICheckboxProps } from '@interfaces/componentsProps';
-import { computed } from 'vue';
+import { computed, watch } from 'vue';
 import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
 import CheckMarkIcon from '@icons/Mono/CheckMarkIcon.vue';
 
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<ICheckboxProps>(), {
   darknessBorder: '500',
 });
 const active = defineModel();
-// watch(, () => {});
+
 const themeColor = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
 const activeThemeColor = computed(() => convertThemeToColor(props.activeTheme, props.darknessActiveTheme));
 const iconColor = computed(() =>
@@ -46,6 +46,12 @@ const gap = computed(() => {
 });
 const borderWidth = computed(() => (props.size === 'large' || props.size === 'huge' ? 2 : 1));
 const borderRadius = computed(() => `${elSize.value / 7 - borderWidth.value}px`);
+
+const activeProp = computed(() => props.active);
+
+watch(activeProp, () => (active.value = activeProp.value), {
+  immediate: true,
+});
 </script>
 
 <template>
@@ -60,7 +66,7 @@ const borderRadius = computed(() => `${elSize.value / 7 - borderWidth.value}px`)
   >
     <div class="main" :style="`width: ${elSize}px; height: ${elSize}px; border: ${borderWidth}px solid ${borderColor}`">
       <input
-        :style="`width: ${elSize}px; height: ${elSize}px; position: absolute; z-index: 100; cursor: ${disabled ? 'initial' : 'pointer'}`"
+        :style="`width: ${elSize}px; height: ${elSize}px; position: absolute; top: 0; left: 0; z-index: 100; cursor: ${disabled ? 'initial' : 'pointer'}`"
         v-model="active"
         type="checkbox"
         :name="name"
@@ -77,7 +83,7 @@ const borderRadius = computed(() => `${elSize.value / 7 - borderWidth.value}px`)
         ]"
       >
         <CheckMarkIcon
-          :style="`transition: all 0.3s ease-in-out; opacity: ${active ? 1 : 0}; position: absolute;`"
+          :style="`transition: all 0.3s ease-in-out; opacity: ${active ? 1 : 0}; position: absolute; top: 0; left: 0`"
           :color="iconColor"
           :size="elSize"
         />
diff --git a/src/components/Select/Select.stories.ts b/src/components/Select/Select.stories.ts
index 427a2b366a7119faf0a8c95d152ec638bf5bf444..8e2ba8df52b86930a70df03c20b7069c5b5c0e80 100644
--- a/src/components/Select/Select.stories.ts
+++ b/src/components/Select/Select.stories.ts
@@ -138,10 +138,43 @@ export const Full: Story = {
     ],
 
     groups: [
-      { name: 'Group', background: 'white', iconLeft: 'Archive' },
-      { name: 'Group 2', background: 'red', iconLeft: 'Badge' },
-    ],
+      {
+        name: 'Group',
+        background: 'white',
+        iconLeft: 'Archive',
 
+        items: [
+          {
+            value: 'First',
+            iconLeft: 'At',
+            color: 'purple',
+            darknessColor: '800',
+            group: 'Group',
+          },
+          {
+            value: 'Second',
+            iconRightColor: 'red',
+            iconRight: 'Age18',
+            group: 'Group',
+          },
+        ],
+      },
+      {
+        name: 'Group 2',
+        background: 'red',
+        iconLeft: 'Badge',
+
+        items: [
+          {
+            iconLeft: 'Calendar',
+            value: 'Third',
+            iconRight: 'CheckMark',
+            group: 'Group 2',
+          },
+        ],
+      },
+    ],
+    selected: 'First',
     placeholder: 'Select a city',
     size: 'normal',
     width: '250px',