diff --git a/packages/vlossom/playground/App.vue b/packages/vlossom/playground/App.vue
index ccc40e29b..3d54add8c 100644
--- a/packages/vlossom/playground/App.vue
+++ b/packages/vlossom/playground/App.vue
@@ -2,10 +2,11 @@
     <vs-layout>
         <vs-header
             class="header"
-            position="fixed"
+            fixed
             primary
-            height="60px"
+            height="72px"
             :style-set="{ backgroundColor: 'black', fontColor: 'white' }"
+            :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }"
         >
             <div class="logo">
                 <vs-image src="/assets/vlossom-logo.png" :style-set="{ height: '40px', width: '40px' }" />
@@ -21,8 +22,9 @@
         <vs-footer
             class="footer"
             :style-set="{ backgroundColor: 'black', fontColor: '#dfdfdf' }"
-            height="30px"
-            position="fixed"
+            height="40px"
+            fixed
+            :style="{ display: 'flex', justifyContent: 'center', alignItems: 'center' }"
         >
             <span>&copy; {{ currentYear }} Vlossom</span>
         </vs-footer>
diff --git a/packages/vlossom/src/components/vs-table/VsTable.vue b/packages/vlossom/src/components/vs-table/VsTable.vue
index f59d3bf05..0cd6d5f8b 100644
--- a/packages/vlossom/src/components/vs-table/VsTable.vue
+++ b/packages/vlossom/src/components/vs-table/VsTable.vue
@@ -28,6 +28,7 @@
                             :id="utils.string.createID()"
                             type="checkbox"
                             :color-scheme="computedColorScheme"
+                            :indeterminate="!isSelectedAll && selectedItems.length > 0"
                             :checked="isSelectedAll"
                             aria-label="select-all"
                             @toggle="onToggleCheck"
diff --git a/packages/vlossom/src/icons/icons.ts b/packages/vlossom/src/icons/icons.ts
index 96ed85f8f..841a34575 100644
--- a/packages/vlossom/src/icons/icons.ts
+++ b/packages/vlossom/src/icons/icons.ts
@@ -11,21 +11,6 @@ export const iconSvgs = {
             <path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/>
         </svg>
 	`,
-    // check_box (fill)
-    checkboxChecked: `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-            <path d="m424-312 282-282-56-56-226 226-114-114-56 56 170 170ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z"/>
-        </svg>`,
-    // indeterminate_check_box (fill)
-    checkboxIndeterminate: `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-            <path d="M280-440h400v-80H280v80Zm-80 320q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z"/>
-        </svg>`,
-    // check_box_outline_blank
-    checkboxUnchecked: `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
-            <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Z"/>
-        </svg>`,
     close: `
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
             <path
diff --git a/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.scss b/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.scss
index 6f55e1afa..b6b21f344 100644
--- a/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.scss
+++ b/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.scss
@@ -1,75 +1,110 @@
 @use '@/styles/mixin' as *;
 
-$checkbox-size: var(--vs-checkbox-node-checkboxSize, 2.4rem);
+$checkbox-size: var(--vs-checkbox-node-checkboxSize, 2rem);
 
 .vs-checkbox-node {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    flex-wrap: nowrap;
-    user-select: none;
-    height: var(--vs-checkbox-node-height, var(--vs-input-comp-height));
+    min-height: var(--vs-checkbox-node-height, var(--vs-input-comp-height));
 
     .vs-checkbox-wrap {
         position: relative;
         display: flex;
+        justify-content: flex-start;
         align-items: center;
-        color: var(--vs-checkbox-node-checkboxColor, var(--vs-primary-comp-bg));
-        border-radius: var(--vs-checkbox-node-borderRadius, calc(var(--vs-radius-ratio) * var(--vs-radius-sm)));
-        overflow: hidden;
+        flex-wrap: nowrap;
+        user-select: none;
 
-        .vs-check-icon {
+        .vs-checkbox-input {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            appearance: none;
+            margin: 0;
             width: $checkbox-size;
             height: $checkbox-size;
+            border: 0.1rem solid var(--vs-checkbox-node-checkboxColor, var(--vs-primary-comp-bg));
+            border-radius: var(--vs-checkbox-node-borderRadius, calc(var(--vs-radius-ratio) * var(--vs-radius-sm)));
+            cursor: pointer;
+            background-color: transparent;
+
+            &.vs-state-box {
+                @include state-box;
+            }
+
+            &:focus-within {
+                @include focus-outline;
+            }
+
+            &:before {
+                content: '';
+                display: block;
+                width: calc($checkbox-size * 0.6);
+                height: calc($checkbox-size * 0.6);
+                transform: scale(0);
+                transform-origin: center center;
+                transition: 120ms all linear;
+            }
         }
 
-        .vs-checkbox-input {
-            position: absolute;
-            top: 0;
-            left: 0;
-            opacity: 0;
-            width: 100%;
-            height: 100%;
+        .vs-checkbox-label {
+            user-select: none;
+            padding-left: 0.5rem;
             cursor: pointer;
+            white-space: nowrap;
+            color: var(--vs-checkbox-node-labelFontColor, var(--vs-font-color));
+            font-size: var(--vs-checkbox-node-labelFontSize, var(--vs-font-size));
         }
+    }
 
-        &.vs-state-box {
-            @include state-box;
-            outline-offset: 0;
-        }
+    &.vs-indeterminate {
+        .vs-checkbox-wrap {
+            .vs-checkbox-input {
+                background-color: var(--vs-checkbox-node-checkboxColor, var(--vs-primary-comp-bg));
 
-        &:focus-within {
-            @include focus-outline;
-            outline-offset: 0;
+                &:before {
+                    clip-path: polygon(0% 38%, 100% 38%, 100% 62%, 0% 62%);
+                    background-color: var(--vs-primary-comp-font);
+                    transform: scale(1);
+                }
+            }
         }
     }
 
-    .vs-checkbox-label {
-        user-select: none;
-        padding-left: 0.5rem;
-        cursor: pointer;
-        white-space: nowrap;
-        color: var(--vs-checkbox-node-labelFontColor, var(--vs-font-color));
-        font-size: var(--vs-checkbox-node-labelFontSize, var(--vs-font-size));
+    &.vs-checked {
+        .vs-checkbox-wrap {
+            .vs-checkbox-input {
+                background-color: var(--vs-checkbox-node-checkboxColor, var(--vs-primary-comp-bg));
+
+                &:before {
+                    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+                    background-color: var(--vs-primary-comp-font);
+                    transform: scale(1) rotate(10deg) translateX(-3%);
+                }
+            }
+            .vs-checkbox-label {
+                color: var(--vs-checkbox-node-selectedLabelFontColor, var(--vs-primary-comp-bg));
+            }
+        }
     }
 
     &.vs-dense {
-        height: var(--vs-checkbox-node-height, var(--vs-input-comp-height-dense));
+        min-height: var(--vs-checkbox-node-height, var(--vs-input-comp-height-dense));
 
-        .vs-checkbox-label {
-            font-size: var(--vs-checkbox-node-labelFontSize, var(--vs-font-size-sm));
+        .vs-checkbox-input {
+            width: var(--vs-checkbox-node-checkboxSize, 1.8rem);
+            height: var(--vs-checkbox-node-checkboxSize, 1.8rem);
         }
-    }
-
-    &.vs-checked {
         .vs-checkbox-label {
-            color: var(--vs-checkbox-node-selectedLabelFontColor, var(--vs-primary-comp-bg));
+            font-size: var(--vs-checkbox-node-labelFontSize, var(--vs-font-size-sm));
         }
     }
 
     &.vs-disabled {
         @include disabled;
+        cursor: default;
     }
 
     &.vs-readonly {
diff --git a/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.vue b/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.vue
index a9e8cf38f..3b6761bee 100644
--- a/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.vue
+++ b/packages/vlossom/src/nodes/vs-checkbox-node/VsCheckboxNode.vue
@@ -1,25 +1,24 @@
 <template>
     <div :class="['vs-checkbox-node', colorSchemeClass, classObj]" :style="computedStyleSet">
-        <div :class="['vs-checkbox-wrap', stateClasses]">
-            <vs-icon class="vs-check-icon" :icon="icon" />
+        <label class="vs-checkbox-wrap" :for="computedId">
             <input
                 ref="checkboxRef"
                 type="checkbox"
-                class="vs-checkbox-input"
+                :class="['vs-checkbox-input', stateClasses]"
                 :aria-label="ariaLabel"
-                :id="id"
+                :id="computedId"
                 :disabled="disabled || readonly"
                 :name="name"
                 :value="convertToString(value)"
                 :checked="checked"
                 :aria-required="required"
-                @click.prevent.stop="onClick"
+                @click.prevent.stop="toggle"
                 @focus.stop="onFocus"
                 @blur.stop="onBlur"
             />
-        </div>
-        <label v-if="label || $slots['label']" :for="id" class="vs-checkbox-label">
-            <slot name="label">{{ label }}</slot>
+            <div v-if="label || $slots['label']" class="vs-checkbox-label">
+                <slot name="label">{{ label }}</slot>
+            </div>
         </label>
     </div>
 </template>
@@ -29,13 +28,11 @@ import { computed, defineComponent, nextTick, PropType, Ref, ref, toRefs, watch
 import { ColorScheme, UIState, VsNode } from '@/declaration';
 import { useColorScheme, useStateClass, useStyleSet } from '@/composables';
 import { utils } from '@/utils';
-import { VsIcon } from '@/icons';
 import { VsCheckboxNodeStyleSet } from './types';
 
 const name = VsNode.VsCheckboxNode;
 export default defineComponent({
     name,
-    components: { VsIcon },
     props: {
         colorScheme: { type: String as PropType<ColorScheme> },
         styleSet: { type: [String, Object] as PropType<string | VsCheckboxNodeStyleSet> },
@@ -43,7 +40,7 @@ export default defineComponent({
         checked: { type: Boolean, default: false },
         dense: { type: Boolean, default: false },
         disabled: { type: Boolean, default: false },
-        id: { type: String, required: true },
+        id: { type: String, default: '' },
         indeterminate: { type: Boolean, default: false },
         label: { type: String, default: '' },
         name: { type: String, default: '' },
@@ -55,7 +52,7 @@ export default defineComponent({
     emits: ['change', 'toggle', 'focus', 'blur'],
     // expose: ['focus', 'blur'],
     setup(props, { emit }) {
-        const { colorScheme, styleSet, checked, indeterminate, dense, disabled, readonly, state } = toRefs(props);
+        const { colorScheme, styleSet, checked, id, indeterminate, dense, disabled, readonly, state } = toRefs(props);
 
         const { colorSchemeClass } = useColorScheme(name, colorScheme);
 
@@ -70,21 +67,13 @@ export default defineComponent({
             'vs-dense': dense.value,
             'vs-disabled': disabled.value,
             'vs-readonly': readonly.value,
+            'vs-indeterminate': indeterminate.value,
         }));
 
-        const icon = computed(() => {
-            if (checked.value) {
-                return 'checkboxChecked';
-            }
+        const innerId = utils.string.createID();
+        const computedId = computed(() => id.value || innerId);
 
-            if (indeterminate.value) {
-                return 'checkboxIndeterminate';
-            }
-
-            return 'checkboxUnchecked';
-        });
-
-        function onClick(event: Event) {
+        function toggle(event: Event) {
             emit('change', event);
             emit('toggle', !checked.value);
         }
@@ -121,8 +110,6 @@ export default defineComponent({
             checkboxRef,
             colorSchemeClass,
             classObj,
-            icon,
-            onClick,
             onFocus,
             onBlur,
             focus,
@@ -130,6 +117,8 @@ export default defineComponent({
             convertToString: utils.string.convertToString,
             stateClasses,
             computedStyleSet,
+            computedId,
+            toggle,
         };
     },
 });
diff --git a/packages/vlossom/src/nodes/vs-checkbox-node/__tests__/vs-checkbox-node.test.ts b/packages/vlossom/src/nodes/vs-checkbox-node/__tests__/vs-checkbox-node.test.ts
index 958edd447..3041e481b 100644
--- a/packages/vlossom/src/nodes/vs-checkbox-node/__tests__/vs-checkbox-node.test.ts
+++ b/packages/vlossom/src/nodes/vs-checkbox-node/__tests__/vs-checkbox-node.test.ts
@@ -3,81 +3,15 @@ import { mount } from '@vue/test-utils';
 import VsCheckboxNode from './../VsCheckboxNode.vue';
 
 describe('vs-checkbox-node', () => {
-    describe('icon', () => {
-        it('선택 상태가 아니면 unchecked icon이 표시된다', () => {
-            // given
-            const wrapper = mount(VsCheckboxNode, {
-                props: {
-                    id: 'test',
-                    checked: false,
-                },
-            });
-
-            // then
-            expect(wrapper.find('input').element.checked).toBe(false);
-            expect(wrapper.vm.icon).toBe('checkboxUnchecked');
-        });
-
-        it('선택 상태이면 checked icon이 표시된다', () => {
-            // given
-            const wrapper = mount(VsCheckboxNode, {
-                props: {
-                    id: 'test',
-                    checked: true,
-                },
-            });
-
-            // then
-            expect(wrapper.find('input').element.checked).toBe(true);
-            expect(wrapper.vm.icon).toBe('checkboxChecked');
-        });
-
-        it('indeterminate 상태이면 indeterminate icon이 표시된다', () => {
-            // given
-            const wrapper = mount(VsCheckboxNode, {
-                props: {
-                    id: 'test',
-                    checked: false,
-                    indeterminate: true,
-                },
-            });
-
-            // then
-            expect(wrapper.find('input').element.checked).toBe(false);
-            expect(wrapper.vm.icon).toBe('checkboxIndeterminate');
-        });
-
-        it('indeterminate가 true라도 checked가 true이면 checked icon이 표시된다', () => {
-            // given
-            const wrapper = mount(VsCheckboxNode, {
-                props: {
-                    id: 'test',
-                    checked: true,
-                    indeterminate: true,
-                },
-            });
-
-            // then
-            expect(wrapper.find('input').element.checked).toBe(true);
-            expect(wrapper.vm.icon).toBe('checkboxChecked');
-        });
-    });
-
     it('checked 속성을 설정할 수 있다', async () => {
         // given
-        const wrapper = mount(VsCheckboxNode, {
-            props: {
-                id: 'test',
-                checked: false,
-            },
-        });
+        const wrapper = mount(VsCheckboxNode);
 
         // when
         await wrapper.setProps({ checked: true });
 
         // then
         expect(wrapper.find('input').element.checked).toBe(true);
-        expect(wrapper.vm.icon).toBe('checkboxChecked');
     });
 
     describe('label', () => {
@@ -85,8 +19,6 @@ describe('vs-checkbox-node', () => {
             // given
             const wrapper = mount(VsCheckboxNode, {
                 props: {
-                    id: 'test',
-                    checked: false,
                     label: 'test label',
                 },
             });
@@ -98,10 +30,6 @@ describe('vs-checkbox-node', () => {
         it('label slot에 원하는 내용을 넣을 수 있다', () => {
             // given
             const wrapper = mount(VsCheckboxNode, {
-                props: {
-                    id: 'test',
-                    checked: false,
-                },
                 slots: {
                     label: 'test label',
                 },
@@ -115,12 +43,7 @@ describe('vs-checkbox-node', () => {
     describe('events', () => {
         it('toggle 이벤트를 발생시킬 수 있다', async () => {
             // given
-            const wrapper = mount(VsCheckboxNode, {
-                props: {
-                    id: 'test',
-                    checked: true,
-                },
-            });
+            const wrapper = mount(VsCheckboxNode);
 
             // when
             await wrapper.find('input').trigger('click');
@@ -128,17 +51,11 @@ describe('vs-checkbox-node', () => {
             // then
             expect(wrapper.emitted('change')).toHaveLength(1);
             expect(wrapper.emitted('toggle')).toHaveLength(1);
-            expect(wrapper.emitted('toggle')).toEqual([[false]]);
         });
 
         it('focus 이벤트를 발생시킬 수 있다', async () => {
             // given
-            const wrapper = mount(VsCheckboxNode, {
-                props: {
-                    id: 'test',
-                    checked: false,
-                },
-            });
+            const wrapper = mount(VsCheckboxNode);
 
             // when
             await wrapper.find('input').trigger('focus');
@@ -149,12 +66,7 @@ describe('vs-checkbox-node', () => {
 
         it('blur 이벤트를 발생시킬 수 있다', async () => {
             // given
-            const wrapper = mount(VsCheckboxNode, {
-                props: {
-                    id: 'test',
-                    checked: false,
-                },
-            });
+            const wrapper = mount(VsCheckboxNode);
 
             // when
             await wrapper.find('input').trigger('blur');
diff --git a/packages/vlossom/src/nodes/vs-radio-node/VsRadioNode.scss b/packages/vlossom/src/nodes/vs-radio-node/VsRadioNode.scss
index 6b4ffb079..bcf7f30d0 100644
--- a/packages/vlossom/src/nodes/vs-radio-node/VsRadioNode.scss
+++ b/packages/vlossom/src/nodes/vs-radio-node/VsRadioNode.scss
@@ -9,12 +9,14 @@ $radio-selected-inset-box-shadow: inset 0 0 0 calc($radio-size / 3) $radio-color
     position: relative;
     display: flex;
     align-items: center;
-    height: var(--vs-radio-node-height, var(--vs-input-comp-height));
+    min-height: var(--vs-radio-node-height, var(--vs-input-comp-height));
 
     .vs-radio-wrap {
         position: relative;
         display: flex;
+        justify-content: flex-start;
         align-items: center;
+        flex-wrap: nowrap;
         user-select: none;
         cursor: pointer;
 
@@ -66,7 +68,7 @@ $radio-selected-inset-box-shadow: inset 0 0 0 calc($radio-size / 3) $radio-color
     }
 
     &.vs-dense {
-        height: var(--vs-rado-height, var(--vs-input-comp-height-dense));
+        min-height: var(--vs-rado-height, var(--vs-input-comp-height-dense));
 
         .vs-radio-label {
             font-size: var(--vs-rado-labelFontSize, var(--vs-font-size-sm));
diff --git a/packages/vlossom/src/nodes/vs-radio-node/VsRadioNode.vue b/packages/vlossom/src/nodes/vs-radio-node/VsRadioNode.vue
index 86e748d76..392c68f3d 100644
--- a/packages/vlossom/src/nodes/vs-radio-node/VsRadioNode.vue
+++ b/packages/vlossom/src/nodes/vs-radio-node/VsRadioNode.vue
@@ -1,12 +1,12 @@
 <template>
     <div :class="['vs-radio-node', colorSchemeClass, classObj, stateClasses]" :style="computedStyleSet">
-        <label class="vs-radio-wrap">
+        <label class="vs-radio-wrap" :for="computedId">
             <input
                 ref="radioRef"
                 type="radio"
                 class="vs-radio-input"
                 :aria-label="ariaLabel"
-                :id="id"
+                :id="computedId"
                 :disabled="disabled || readonly"
                 :name="name"
                 :value="convertToString(value)"
@@ -41,7 +41,7 @@ export default defineComponent({
         checked: { type: Boolean, default: false },
         dense: { type: Boolean, default: false },
         disabled: { type: Boolean, default: false },
-        id: { type: String, required: true },
+        id: { type: String, default: '' },
         label: { type: String, default: '' },
         name: { type: String, default: '' },
         readonly: { type: Boolean, default: false },
@@ -52,7 +52,7 @@ export default defineComponent({
     emits: ['change', 'toggle', 'focus', 'blur'],
     // expose: ['focus', 'blur'],
     setup(props, { emit }) {
-        const { colorScheme, styleSet, dense, disabled, readonly, state } = toRefs(props);
+        const { colorScheme, styleSet, dense, disabled, readonly, state, id } = toRefs(props);
 
         const { colorSchemeClass } = useColorScheme(name, colorScheme);
 
@@ -68,6 +68,9 @@ export default defineComponent({
             'vs-readonly': readonly.value,
         }));
 
+        const innerId = utils.string.createID();
+        const computedId = computed(() => id.value || innerId);
+
         function toggle(event: Event) {
             emit('change', event);
             emit('toggle', (event.target as HTMLInputElement).checked);
@@ -100,6 +103,7 @@ export default defineComponent({
             colorSchemeClass,
             computedStyleSet,
             stateClasses,
+            computedId,
             convertToString: utils.string.convertToString,
         };
     },