diff --git a/docs/App.vue b/docs/App.vue
index 54eb17c1d..a61c8f2bd 100644
--- a/docs/App.vue
+++ b/docs/App.vue
@@ -1,4 +1,6 @@
 <template>
+  <link ref="lightCss" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/styles/github.min.css">
+  <link ref="darkCss" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/styles/hybrid.min.css" disabled>
   <div
     :class="['evui-docs', docsTheme]"
   >
@@ -13,7 +15,7 @@
 </template>
 
 <script>
-import { ref } from 'vue';
+import { ref, watchEffect, onMounted } from 'vue';
 import MainHeader from './components/Header';
 import MainContent from './components/Content';
 import MainNav from './components/Menu';
@@ -27,8 +29,25 @@ export default {
   },
   setup() {
     const docsTheme = ref('light');
+    const lightCss = ref(null);
+    const darkCss = ref(null);
+
+    onMounted(() => {
+      watchEffect(() => {
+        if (docsTheme.value === 'light') {
+          lightCss.value.disabled = false;
+          darkCss.value.disabled = true;
+        } else {
+          lightCss.value.disabled = true;
+          darkCss.value.disabled = false;
+        }
+      });
+    });
+
     return {
       docsTheme,
+      lightCss,
+      darkCss,
     };
   },
 };
diff --git a/docs/components/Content.vue b/docs/components/Content.vue
index 18984e18b..2ec11692b 100644
--- a/docs/components/Content.vue
+++ b/docs/components/Content.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="evui-content">
+  <main class="evui-content">
     <router-view />
-  </div>
+  </main>
 </template>
 
 <script>
@@ -15,6 +15,6 @@ export default {
 
 .evui-content {
   position: relative;
-  padding: 30px;
+  padding: 30px 40px;
 }
 </style>
diff --git a/docs/components/Example.vue b/docs/components/Example.vue
index ac95fb5d0..8daa9dc9b 100644
--- a/docs/components/Example.vue
+++ b/docs/components/Example.vue
@@ -1,32 +1,46 @@
 <template>
-  <section>
-    <h2>{{ title }}</h2>
-    <br>
-    <p class="example-desc">
+  <article class="article-wrapper">
+    <h3 class="article-title">
+      {{ title }}
+    </h3>
+    <p class="article-description">
       {{ description }}
     </p>
-    <br><br>
-    <div
-      class="example-sample"
-    >
-      <component
-        :is="contents"
-      />
-      <hr class="example-splitter">
-      <div v-highlight>
-        <pre>
-          {{ content }}
-        </pre>
+    <div class="article-example">
+      <div class="view">
+        <component
+          :is="contents"
+        />
+      </div>
+      <div
+        v-highlight
+        :class="['code', { 'expend': codeExpend }]"
+      >
+        <div
+          ref="codeWrapper"
+          class="code-wrapper"
+        >
+          <pre
+            v-for="(code, key) in codeText"
+            :key="key"
+          >
+            {{ code }}
+          </pre>
+        </div>
+        <div
+          class="btn-show-more"
+          @click="clickExpend"
+        >
+          {{ codeExpend ? '▲ Fold the code' : '▼ Unfold the code' }}
+        </div>
       </div>
     </div>
-  </section>
+  </article>
 </template>
 
 <script>
-import { parseComponent } from 'vue-template-compiler';
+import { ref } from 'vue';
 import hljs from 'highlight.js';
-import CheckboxRaw from '!!raw-loader!../views/checkbox/example/Default';
-import 'highlight.js/styles/github.css';
 
 export default {
   name: 'Example',
@@ -40,8 +54,6 @@ export default {
       },
     },
   },
-  components: {
-  },
   props: {
     title: {
       type: String,
@@ -59,38 +71,110 @@ export default {
       type: String,
       default: '',
     },
+    codeText: {
+      type: Object,
+      default: () => {},
+    },
   },
   setup() {
-    const { template } = parseComponent(CheckboxRaw);
-    const { content } = template;
-
+    const codeExpend = ref(false);
+    const codeWrapper = ref(null);
+    const clickExpend = () => {
+      codeExpend.value = !codeExpend.value;
+      if (!codeExpend.value) {
+        codeWrapper.value.scrollTop = 0;
+      }
+    };
     return {
-      content,
-      template,
+      codeExpend,
+      codeWrapper,
+      clickExpend,
     };
   },
 };
 </script>
 
 <style lang="scss">
-.example-sample {
+@import '../style/index.scss';
+
+.content-title {
+  padding-bottom: 15px;
+  margin-bottom: 35px;
+  font-size: 28px;
+  font-weight: bold;
+
+  @include themify() {
+    border-bottom: 1px solid themed('border-color-base');
+  }
+}
+.article-wrapper {
+  margin-bottom: 55px;
+  font-size: 15px;
+}
+.article-title {
+  margin-bottom: 20px;
+  font-size: 23px;
+  font-weight: bold;
+}
+.article-description {
+  margin-bottom: 30px;
+  line-height: 1.5em;
+}
+.article-example {
   display: flex;
-  border: 1px solid #FFDD57;
+  border: 1px solid $color-yellow;
   border-radius: 4px;
-  div {
-    max-height: 600px;
-    flex-grow: 1;
-    padding: 15px;
-    overflow-y: auto;
+  .view {
+    flex: 1;
+    padding: 15px 20px;
+    border-right: 1px solid $color-yellow;
   }
-  div:last-child {
-    padding: 0;
+  .code {
+    position: relative;
+    width: 50%;
+    max-width: 700px;
+    .code-wrapper {
+      height: 400px;
+      overflow-y: hidden;
+    }
+    .btn-show-more {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 45px;
+      line-height: 45px;
+      background-color: rgba($color-yellow, 0.7);
+      color: $color-black;
+      text-align: center;
+      cursor: pointer;
+    }
+    &.expend {
+      .code-wrapper {
+        height: auto;
+        max-height: 600px;
+        padding-bottom: 45px;
+        overflow-y: auto;
+      }
+    }
+    * {
+      font-family: consolas, monospace;
+    }
   }
 }
 
-.example-splitter {
-  width: 1px;
-  background-color: #FFDD57;
-  border: none;
+@media all and (max-width: 1280px) {
+  .article-example {
+    display: block;
+    .view {
+      width: 100%;
+      border-right: 0;
+      border-bottom: 1px solid $color-yellow;
+    }
+    .code {
+      max-width: none;
+      width: 100%;
+    }
+  }
 }
 </style>
diff --git a/docs/components/Header.vue b/docs/components/Header.vue
index ef0588258..2de912c2b 100644
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -59,7 +59,7 @@ a {
   height: $header-height;
   padding: 0 10px;
   align-items: center;
-  background-color: #67A1F4;
+  background-color: $color-blue;
   z-index: 10;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 
diff --git a/docs/components/Menu.vue b/docs/components/Menu.vue
index 9a6f05a9e..fca353c52 100644
--- a/docs/components/Menu.vue
+++ b/docs/components/Menu.vue
@@ -149,7 +149,10 @@ export default {
   height: 100%;
   padding: 25px 12px;
   overflow: auto;
-  border-right: 1px solid #DDDDDD;
+
+  @include themify() {
+    border-right: 1px solid themed('border-color-base');
+  }
 
   ul, li {
     list-style: none;
@@ -161,7 +164,7 @@ export default {
     cursor: pointer;
 
     &:hover {
-      color: $color-main;
+      color: $color-blue;
     }
   }
 }
diff --git a/docs/style/index.scss b/docs/style/index.scss
index d668d92f5..307d98a6f 100644
--- a/docs/style/index.scss
+++ b/docs/style/index.scss
@@ -4,7 +4,3 @@
 @import 'mixins';
 @import 'variables';
 @import 'themes';
-
-body {
-  background: yellowgreen;
-}
diff --git a/docs/style/themes.scss b/docs/style/themes.scss
index 8c201240d..4a289fb56 100644
--- a/docs/style/themes.scss
+++ b/docs/style/themes.scss
@@ -5,6 +5,7 @@ $ev-themes: (
     /* common
     -------------------------- */
     background-color-base: $color-white,
+    border-color-base: #DDDDDD,
     font-color-base: $color-black,
     color-primary: #1A6AFE,
     color-info: #5AC8FA,
@@ -17,6 +18,7 @@ $ev-themes: (
     /* common
     -------------------------- */
     background-color-base: #2D2D2D,
+    border-color-base: #222222,
     font-color-base: $color-white,
     color-primary: #007AFF,
     color-info: #64D2FF,
diff --git a/docs/style/variables.scss b/docs/style/variables.scss
index 79cc701d2..effc790b5 100644
--- a/docs/style/variables.scss
+++ b/docs/style/variables.scss
@@ -10,12 +10,12 @@ $font-family-base: inherit !default;
 // Common Color
 $color-white: #FFFFFF !default;
 $color-black: #0D0D0D !default;
-$color-main: #67A1F4 !default;
+$color-blue: #3C81F6 !default;
+$color-red: #FF470E !default;
+$color-yellow: #FADE4C !default;
 
 // etc
 $border-radius-base: 2px;
-$border-solid: 1px solid;
-$border-dotted: 1px dotted;
 
 // layout
 $header-height: 55px;
diff --git a/docs/views/checkbox/index.vue b/docs/views/checkbox/index.vue
index c2a288c90..6c0c352ad 100644
--- a/docs/views/checkbox/index.vue
+++ b/docs/views/checkbox/index.vue
@@ -1,8 +1,7 @@
 <template>
-  <div class="article-title">
-    <h1> CHECK BOX </h1>
-  </div>
-  <br><hr><br>
+  <h2 class="content-title">
+    Checkbox
+  </h2>
   <Example
     v-for="(component, index) in components"
     :key="`${component.title}_${index}`"
@@ -10,13 +9,16 @@
     :description="component.description"
     :contents="component.component"
     :url="component.url"
+    :code-text="component.codeText"
   />
 </template>
 
 <script>
 import { ref, defineAsyncComponent } from 'vue';
+import { parseComponent } from 'vue-template-compiler';
 import Example from '../../components/Example';
 import Default from './example/Default';
+import DefaultRaw from '!!raw-loader!./example/Default';
 
 export default {
   name: 'Checkbox',
@@ -33,20 +35,27 @@ export default {
       console.log(`value: ${value}, e : ${e}`);
     };
 
+    const { template, script } = parseComponent(DefaultRaw);
+    const codeTextObj = {
+      template: template.content,
+      script: script.content,
+    };
+
     const components = [
       {
         title: 'Default',
         description: '여러 개의 선택 사항을 고르기 위한 단일 체크 박스의 기능입니다.',
         component: defineAsyncComponent(() => Promise.resolve(Default)),
         url: './docs/views/checkbox/example/Default.vue',
+        codeText: codeTextObj,
       },
     ];
 
     return {
+      components,
       checkVal1,
       checkVal2,
       checkVal3,
-      components,
       onChange,
     };
   },
diff --git a/src/components/radio/Radio.vue b/src/components/radio/Radio.vue
new file mode 100644
index 000000000..840bb07d6
--- /dev/null
+++ b/src/components/radio/Radio.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    :class="[{ disabled: disabled }, size]"
+    class="ev-radio"
+  >
+    <label
+      class="ev-radio-label"
+    >
+      <input
+        type="radio"
+        class="ev-radio-input"
+        :value="value"
+        :name="name"
+        :checked="modelValue"
+        :disabled="disabled"
+        @change="onChange"
+      >
+      <span class="ev-radio-label">
+        <slot />
+      </span>
+    </label>
+  </div>
+</template>
+
+<script>
+import { nextTick } from 'vue';
+
+export default {
+  name: 'EvRadio',
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: [String, Number, Symbol, Boolean],
+      default: '',
+    },
+    size: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: {
+    'update:modelValue': [Boolean],
+    change: val => typeof val === 'boolean',
+  },
+  setup(props, { emit }) {
+    const onChange = async (e) => {
+      await nextTick();
+      const value = !props.modelValue;
+      emit('update:modelValue', value);
+      emit('change', value, e);
+    };
+
+    return {
+      onChange,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.ev-radio {
+  display: inline-block;
+  cursor: pointer;
+  user-select: none;
+  input {
+    cursor: pointer;
+  }
+
+  &.disabled {
+    color: #C0C4CC;
+    cursor: not-allowed;
+    input {
+      cursor: not-allowed;
+    }
+  }
+}
+</style>
diff --git a/src/components/radio/index.js b/src/components/radio/index.js
new file mode 100644
index 000000000..02864cbc5
--- /dev/null
+++ b/src/components/radio/index.js
@@ -0,0 +1,7 @@
+import EvRadio from './Radio';
+
+EvRadio.install = (app) => {
+  app.component(EvRadio.name, EvRadio);
+};
+
+export default EvRadio;
diff --git a/src/main.js b/src/main.js
index 71318ae36..4831d3479 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,10 @@
 import EvCheckbox from '@/components/checkbox/Checkbox.vue';
+import EvRadio from '@/components/radio/Radio.vue';
 import { version } from '../package.json';
 
 const components = [
   EvCheckbox,
+  EvRadio,
 ];
 
 const install = (app) => {
diff --git a/src/style/index.scss b/src/style/index.scss
index 39e6d20eb..307d98a6f 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -4,7 +4,3 @@
 @import 'mixins';
 @import 'variables';
 @import 'themes';
-
-body {
-  color: red;
-}
diff --git a/tests/unit/example.spec.js b/tests/unit/example.spec.js
index 6879601cc..77c71725a 100644
--- a/tests/unit/example.spec.js
+++ b/tests/unit/example.spec.js
@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import Checkbox from '@/components/checkbox/Checkbox';
 
-describe('Checkbox.vue', () => {
+describe('Radio.vue', () => {
   it('renders props.msg when passed', () => {
     const msg = 'new message';
     const wrapper = shallowMount(Checkbox, {