diff --git a/README.md b/README.md
index 9045c0d..b37888d 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,18 @@
-# smarphy
+# smarpy
 
-smartupcorp web design
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/smartupcorp/smarpy/blob/main/LICENSE)
+[![NPM Version](https://img.shields.io/npm/v/@smartupcorp/smarpy)](https://www.npmjs.com/package/@smartupcorp/smarpy)
+[![npm downloads](https://img.shields.io/npm/dm/@smartupcorp/smarpy)](https://www.npmjs.com/package/@smartupcorp/smarpy)
+
+[![NPM](https://nodei.co/npm/@smartupcorp/smarpy.png)](https://nodei.co/npm/@smartupcorp/smarpy/)
+
+## Overview
+
+smarpy is an open-source web design sass library.
+
+It uses `oklch()` to declare color palette.
+
+If you want to use in React Project, you can use [react-smarpy](https://github.com/smartupcorp/react-smarpy).
 
 ## Installation
 
@@ -9,3 +21,25 @@ smartupcorp web design
 ```node
 npm install @smartupcorp/smarpy
 ```
+
+### Use in CSS
+
+#### From CDN
+
+```html
+<link
+  rel="stylesheet"
+  type="text/css"
+  media="all"
+  href="https://unpkg.com/@smartupcorp/smarpy/dist/css/smarpy.min.css"
+/>
+```
+
+```html
+<link
+  rel="stylesheet"
+  type="text/css"
+  media="all"
+  href="https://unpkg.com/@smartupcorp/smarpy/dist/css/smarpy-utilities.min.css"
+/>
+```
diff --git a/docs/index.html b/docs/index.html
index b418ab9..581da4a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1331,7 +1331,7 @@
           <div class="modal">
             <div class="modal-content">
               <div class="container">
-                <div class="my-1rem">
+                <div class="p-1rem">
                   <div class="message">
                     <div class="message-header">.message</div>
                     <div class="message-body">
diff --git a/package-lock.json b/package-lock.json
index 2fc3e8b..19c17b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@smartupcorp/smarpy",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@smartupcorp/smarpy",
-      "version": "0.0.1",
+      "version": "0.0.2",
       "license": "MIT",
       "devDependencies": {
         "autoprefixer": "^10.4.21",
diff --git a/package.json b/package.json
index 940714b..6098f97 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@smartupcorp/smarpy",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "smartupcorp web design library written by scss.",
   "main": "index.js",
   "scripts": {
diff --git a/src/sass/components/modal.scss b/src/sass/components/modal.scss
index 7942680..1c890d9 100644
--- a/src/sass/components/modal.scss
+++ b/src/sass/components/modal.scss
@@ -7,13 +7,13 @@
   background-color: oklch(var(--#{variables.$prefix}color-default-back-oklch) / 0.75);
   display: none;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
   justify-content: center;
   left: 0;
   overflow: hidden;
   position: fixed;
   top: 0;
-  width: 100vw;
+  width: 100%;
   z-index: var(--#{variables.$prefix}z-index-modal);
   &.is-active {
     display: flex;