diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css
index e644e5e..262752e 100644
--- a/src/assets/tailwind.css
+++ b/src/assets/tailwind.css
@@ -9,26 +9,51 @@
 @layer base {
   html {
     font-family: 'Roboto', sans-serif, system-ui;
-    color: #1A1A1A;
+    color: #0f172a;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    line-height: 1;
+  }
+}
+
+/* Scrollbar */
+@layer utilities {
+  .scrollbar::-webkit-scrollbar {
+    @apply w-2 h-2
+  }
+
+  .scrollbar::-webkit-scrollbar-track {
+    @apply bg-neutral-300 rounded-full
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb {
+    @apply bg-primary rounded-full
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb:hover {
+    @apply bg-primary
   }
 }
 
 /* components */
 /* button */
 .btn {
-@apply inline-block rounded-full text-base font-medium text-center align-middle transition-colors
+@apply inline-block rounded-full text-base font-medium text-center align-middle transition-colors duration-300
 }
 .btn-sm {
 @apply px-5 py-2
 }
 .btn-lg {
-  @apply px-5 py-3
+  @apply px-4 py-2.5
 }
 .btn-c-primary {
-  @apply bg-neutral border border-neutral hover:bg-[#FFFFFF] hover:text-primary hover:border  hover:border-primary active:bg-primary active:text-[#FFFFFF] active:border
+  @apply text-neutral-50 bg-primary border border-primary hover:bg-neutral-50 hover:text-primary hover:border  hover:border-primary active:border active:ring focus:outline-none focus:border-primary focus:ring
 }
 .btn-disable {
-  @apply border border-neutral bg-[#FFFFFF] text-neutral
+  @apply border border-neutral-200 bg-neutral-50 text-neutral-200
+}
+.btn-neutral {
+  @apply text-neutral-700 bg-neutral-100 border border-neutral-500  hover:bg-neutral-500 hover:text-neutral-100 hover:border-neutral-300 focus:outline-none focus:border-neutral-500 focus:ring active:ring
 }
 
 /* invalid */
@@ -40,3 +65,8 @@
 .h-screen-main {
   height: calc(100vh - 104px);
 }
+
+/* Navbar */
+nav ul>li {
+  @apply px-2 py-3.5 duration-300 hover:bg-neutral-900 hover:text-neutral-10 active:bg-neutral-900 active:text-neutral-10;
+}
diff --git a/src/components/Header.vue b/src/components/Header.vue
index d0f618e..387c3f7 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="mx-auto px-8 w-full">
-      <div class="flex justify-between items-center py-2">
+  <div class="mx-auto px-4 h-14">
+    <div class="flex justify-between items-center h-full">
+      <figure>
+          <DspLogo />
+      </figure>
+      <div class="flex justify-between items-center" v-show="showMember">
+        <button class="btn btn-sm btn-neutral mr-2" @click.prevent="logOut">
+          log out
+        </button>
         <figure>
-            <DspLogo />
+          <router-link :to="'/member-area'">
+            <IconMember class="w-8 h-8 fill-neutral-500"/>
+          </router-link>
         </figure>
-        <div class="flex justify-between items-center" v-show="showMember">
-          <button class="btn btn-sm bg-neutral mr-2" @click.prevent="logOut">
-            log out
-          </button>
-          <figure>
-            <router-link :to="'/member-area'">
-              <IconMember class="w-8 h-8" />
-            </router-link>
-          </figure>
-        </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 13b090f..4b647de 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,22 +1,61 @@
 <template>
-  <nav class="bg-neutral">
-    <div class="mx-auto px-8 w-full h-12">
-      <div class="flex justify-between items-center py-2 h-full" v-show="showNavbarBreadcrumb">
-        files
+  <nav class="bg-neutral-700">
+    <div class="mx-auto px-4" :class="[showNavbarBreadcrumb? 'min-h-12': 'h-12']">
+      <div class="flex justify-between items-center flex-wrap" v-show="showNavbarBreadcrumb">
+        <div class="flex flex-1 items-center">
+            <h2 class="mr-28 text-2xl font-black text-neutral-10">FILES</h2>
+            <ul class="flex justify-center items-center space-x-4 text-xl font-semibold text-neutral-300">
+              <li class="px-2 py-3.5">ALL</li>
+              <li>DISCOVER</li>
+              <li>COMPARE</li>
+            <li>DESIGN</li>
+          </ul>
+        </div>
+        <div class="flex justify-end items-center">
+          <form role="search">
+            <label for="searchFiles" class="mr-4 relative">
+              <input type="search" id="searchFiles" placeholder="Search" class="px-5 py-2 w-72 rounded-full text-sm align-middle duration-300 border border-neutral-500 hover:border-neutral-300 focus:outline-none focus:ring focus:border-neutral-300">
+              <span class="absolute top-2 bottom-1.5 right-0.5 flex justify-center items-center gap-2">
+                <IconSetting class="w-6 h-6 cursor-pointer"></IconSetting>
+                <span class="w-px h-6 block after:border after:border-neutral-300 after:content-['']"></span>
+                <button class="pr-2 py-1 rounded-r-full">
+                  <IconSearch class="w-6 h-6"></IconSearch>
+                </button>
+              </span>
+            </label>
+          </form>
+          <label class="btn btn-sm btn-neutral cursor-pointer">
+            <input id="uploadFiles" class="hidden" type="file">
+            upload
+          </label>
+        </div>
       </div>
     </div>
   </nav>
 </template>
 
 <script>
+import IconSearch from '@/components/icons/IconSearch.vue';
+import IconSetting from '@/components/icons/IconSetting.vue';
+
 export default {
   data() {
     return {
       showNavbarBreadcrumb: false,
     };
   },
+  components: {
+    IconSearch,
+    IconSetting
+  },
   mounted() {
     this.showNavbarBreadcrumb = this.$route.matched[0].name !== ('AuthContainer')? true : false;
   },
 }
 </script>
+
+<style scoped>
+#searchFiles::-webkit-search-cancel-button{
+  appearance: none;
+}
+</style>
diff --git a/src/components/icons/IconDataFormat.vue b/src/components/icons/IconDataFormat.vue
new file mode 100644
index 0000000..65edd87
--- /dev/null
+++ b/src/components/icons/IconDataFormat.vue
@@ -0,0 +1,8 @@
+<template>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="black" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.8571 31H3.14286C2.57471 30.9994 2.03 30.7735 1.62825 30.3717C1.22651 29.97 1.00057 29.4253 1 28.8571V3.14286C1.00057 2.57471 1.22651 2.03 1.62825 1.62825C2.03 1.22651 2.57471 1.00057 3.14286 1H28.8571C29.4253 1.00057 29.97 1.22651 30.3717 1.62825C30.7735 2.03 30.9994 2.57471 31 3.14286V28.8571C30.9994 29.4253 30.7735 29.97 30.3717 30.3717C29.97 30.7735 29.4253 30.9994 28.8571 31ZM3.14286 3.14286V28.8571H28.8571V3.14286H3.14286Z"/>
+<path d="M11.1092 19.1541V20.2689H7.01401V19.1541H11.1092ZM7.40616 12.112V20.2689H6V12.112H7.40616Z"/>
+<path d="M18.3305 15.9664V16.4146C18.3305 17.0308 18.2502 17.5836 18.0896 18.0728C17.929 18.5621 17.6993 18.9785 17.4006 19.3221C17.1055 19.6657 16.7507 19.929 16.3361 20.112C15.9216 20.2913 15.4622 20.381 14.958 20.381C14.4575 20.381 14 20.2913 13.5854 20.112C13.1746 19.929 12.8179 19.6657 12.5154 19.3221C12.2129 18.9785 11.9776 18.5621 11.8095 18.0728C11.6452 17.5836 11.563 17.0308 11.563 16.4146V15.9664C11.563 15.3501 11.6452 14.7993 11.8095 14.3137C11.9739 13.8245 12.2054 13.408 12.5042 13.0644C12.8067 12.7171 13.1634 12.4538 13.5742 12.2745C13.9888 12.0915 14.4463 12 14.9468 12C15.451 12 15.9104 12.0915 16.3249 12.2745C16.7395 12.4538 17.0962 12.7171 17.395 13.0644C17.6937 13.408 17.9234 13.8245 18.084 14.3137C18.2484 14.7993 18.3305 15.3501 18.3305 15.9664ZM16.9244 16.4146V15.9552C16.9244 15.4995 16.8796 15.098 16.7899 14.7507C16.704 14.3996 16.5752 14.1064 16.4034 13.8711C16.2353 13.6321 16.028 13.4528 15.7815 13.3333C15.535 13.2101 15.2568 13.1485 14.9468 13.1485C14.6368 13.1485 14.3604 13.2101 14.1176 13.3333C13.8749 13.4528 13.6676 13.6321 13.4958 13.8711C13.3277 14.1064 13.1989 14.3996 13.1092 14.7507C13.0196 15.098 12.9748 15.4995 12.9748 15.9552V16.4146C12.9748 16.8702 13.0196 17.2736 13.1092 17.6247C13.1989 17.9757 13.3296 18.2726 13.5014 18.5154C13.6769 18.7544 13.8861 18.9356 14.1289 19.0588C14.3716 19.1783 14.648 19.2381 14.958 19.2381C15.2717 19.2381 15.55 19.1783 15.7927 19.0588C16.0355 18.9356 16.2409 18.7544 16.409 18.5154C16.577 18.2726 16.704 17.9757 16.7899 17.6247C16.8796 17.2736 16.9244 16.8702 16.9244 16.4146Z"/>
+<path d="M26 16.1008V19.2157C25.8842 19.3688 25.7031 19.5369 25.4566 19.7199C25.2138 19.8992 24.8908 20.0542 24.4874 20.1849C24.084 20.3156 23.5817 20.381 22.9804 20.381C22.4687 20.381 22 20.2951 21.5742 20.1233C21.1485 19.9477 20.7806 19.6919 20.4706 19.3557C20.1643 19.0196 19.9272 18.6106 19.7591 18.1289C19.591 17.6433 19.507 17.0906 19.507 16.4706V15.9048C19.507 15.2885 19.5836 14.7395 19.7367 14.2577C19.8936 13.7722 20.1176 13.3613 20.409 13.0252C20.7003 12.6891 21.0514 12.4351 21.4622 12.2633C21.8768 12.0878 22.3455 12 22.8683 12C23.5369 12 24.0896 12.112 24.5266 12.3361C24.9673 12.5565 25.3072 12.8627 25.5462 13.2549C25.7852 13.6471 25.9365 14.0952 26 14.5994H24.6218C24.577 14.3156 24.4893 14.0616 24.3585 13.8375C24.2316 13.6134 24.0486 13.4379 23.8095 13.3109C23.5742 13.1802 23.268 13.1148 22.8908 13.1148C22.5658 13.1148 22.2801 13.1765 22.0336 13.2997C21.7871 13.423 21.5817 13.6041 21.4174 13.8431C21.2568 14.0822 21.1354 14.3735 21.0532 14.7171C20.9711 15.0607 20.93 15.4528 20.93 15.8936V16.4706C20.93 16.9188 20.9767 17.3165 21.07 17.6639C21.1671 18.0112 21.3053 18.3044 21.4846 18.5434C21.6676 18.7824 21.8898 18.9636 22.1513 19.0868C22.4127 19.2063 22.7078 19.2661 23.0364 19.2661C23.3576 19.2661 23.6209 19.24 23.8263 19.1877C24.0317 19.1317 24.1942 19.0663 24.3137 18.9916C24.437 18.9132 24.5322 18.8385 24.5994 18.7675V17.1485H22.902V16.1008H26Z"/>
+</svg>
+</template>
diff --git a/src/components/icons/IconFlowChart.vue b/src/components/icons/IconFlowChart.vue
new file mode 100644
index 0000000..371cdd2
--- /dev/null
+++ b/src/components/icons/IconFlowChart.vue
@@ -0,0 +1,12 @@
+<template>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2381_1348)">
+<path d="M5.67116 32C4.61918 31.9997 3.58801 31.7069 2.69286 31.1544C1.79771 30.6018 1.07385 29.8111 0.60217 28.8708C0.130493 27.9305 -0.0704207 26.8776 0.0218796 25.8297C0.11418 24.7818 0.496058 23.7802 1.12484 22.9368C1.75362 22.0934 2.60454 21.4415 3.5825 21.0539C4.56046 20.6663 5.62695 20.5582 6.66277 20.7419C7.69859 20.9255 8.66295 21.3935 9.44809 22.0937C10.2332 22.7938 10.8082 23.6985 11.1088 24.7066H20.2579V21.4652H23.4994V12.1329L19.864 8.49919H10.5334V11.7407H0.80892V2.01621H10.5334V5.2577H19.864L25.1201 0L31.9969 6.87844L26.7408 12.1313V21.4652H29.9823V31.1896H20.2579V27.9481H11.1088C10.7594 29.1189 10.0415 30.1457 9.06182 30.8757C8.08212 31.6057 6.89294 32.0001 5.67116 32ZM5.67116 23.8963C5.35179 23.8964 5.03557 23.9594 4.74056 24.0817C4.44555 24.204 4.17751 24.3832 3.95176 24.6091C3.72601 24.835 3.54697 25.1032 3.42485 25.3983C3.30273 25.6934 3.23993 26.0096 3.24004 26.329C3.24014 26.6484 3.30315 26.9646 3.42547 27.2596C3.54778 27.5546 3.72701 27.8227 3.95291 28.0484C4.17881 28.2742 4.44696 28.4532 4.74206 28.5753C5.03715 28.6974 5.35341 28.7602 5.67278 28.7601C6.31776 28.7599 6.93625 28.5035 7.39217 28.0473C7.8481 27.591 8.10411 26.9724 8.1039 26.3274C8.10368 25.6824 7.84725 25.0639 7.39103 24.608C6.9348 24.1521 6.31614 23.8961 5.67116 23.8963ZM26.7408 24.7066H23.4994V27.9481H26.7408V24.7066ZM25.1201 4.58671L22.8284 6.87844L25.1201 9.17018L27.4118 6.87844L25.1201 4.58671ZM7.2919 5.2577H4.05041V8.49919H7.2919V5.2577Z" fill="#191C21" stroke="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2381_1348">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+</template>
diff --git a/src/components/icons/IconGrid.vue b/src/components/icons/IconGrid.vue
new file mode 100644
index 0000000..44eddda
--- /dev/null
+++ b/src/components/icons/IconGrid.vue
@@ -0,0 +1,5 @@
+<template>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 3.58929C1.5 3.03517 1.72012 2.50375 2.11194 2.11194C2.50375 1.72012 3.03517 1.5 3.58929 1.5H7.76786C8.32197 1.5 8.85339 1.72012 9.24521 2.11194C9.63702 2.50375 9.85714 3.03517 9.85714 3.58929V7.76786C9.85714 8.32197 9.63702 8.85339 9.24521 9.24521C8.85339 9.63702 8.32197 9.85714 7.76786 9.85714H3.58929C3.03517 9.85714 2.50375 9.63702 2.11194 9.24521C1.72012 8.85339 1.5 8.32197 1.5 7.76786V3.58929ZM3.58929 2.89286C3.40458 2.89286 3.22744 2.96623 3.09684 3.09684C2.96623 3.22744 2.89286 3.40458 2.89286 3.58929V7.76786C2.89286 7.95256 2.96623 8.1297 3.09684 8.26031C3.22744 8.39091 3.40458 8.46429 3.58929 8.46429H7.76786C7.95256 8.46429 8.1297 8.39091 8.26031 8.26031C8.39091 8.1297 8.46429 7.95256 8.46429 7.76786V3.58929C8.46429 3.40458 8.39091 3.22744 8.26031 3.09684C8.1297 2.96623 7.95256 2.89286 7.76786 2.89286H3.58929ZM12.6429 3.58929C12.6429 3.03517 12.863 2.50375 13.2548 2.11194C13.6466 1.72012 14.178 1.5 14.7321 1.5H18.9107C19.4648 1.5 19.9962 1.72012 20.3881 2.11194C20.7799 2.50375 21 3.03517 21 3.58929V7.76786C21 8.32197 20.7799 8.85339 20.3881 9.24521C19.9962 9.63702 19.4648 9.85714 18.9107 9.85714H14.7321C14.178 9.85714 13.6466 9.63702 13.2548 9.24521C12.863 8.85339 12.6429 8.32197 12.6429 7.76786V3.58929ZM14.7321 2.89286C14.5474 2.89286 14.3703 2.96623 14.2397 3.09684C14.1091 3.22744 14.0357 3.40458 14.0357 3.58929V7.76786C14.0357 7.95256 14.1091 8.1297 14.2397 8.26031C14.3703 8.39091 14.5474 8.46429 14.7321 8.46429H18.9107C19.0954 8.46429 19.2726 8.39091 19.4032 8.26031C19.5338 8.1297 19.6071 7.95256 19.6071 7.76786V3.58929C19.6071 3.40458 19.5338 3.22744 19.4032 3.09684C19.2726 2.96623 19.0954 2.89286 18.9107 2.89286H14.7321ZM1.5 14.7321C1.5 14.178 1.72012 13.6466 2.11194 13.2548C2.50375 12.863 3.03517 12.6429 3.58929 12.6429H7.76786C8.32197 12.6429 8.85339 12.863 9.24521 13.2548C9.63702 13.6466 9.85714 14.178 9.85714 14.7321V18.9107C9.85714 19.4648 9.63702 19.9962 9.24521 20.3881C8.85339 20.7799 8.32197 21 7.76786 21H3.58929C3.03517 21 2.50375 20.7799 2.11194 20.3881C1.72012 19.9962 1.5 19.4648 1.5 18.9107V14.7321ZM3.58929 14.0357C3.40458 14.0357 3.22744 14.1091 3.09684 14.2397C2.96623 14.3703 2.89286 14.5474 2.89286 14.7321V18.9107C2.89286 19.0954 2.96623 19.2726 3.09684 19.4032C3.22744 19.5338 3.40458 19.6071 3.58929 19.6071H7.76786C7.95256 19.6071 8.1297 19.5338 8.26031 19.4032C8.39091 19.2726 8.46429 19.0954 8.46429 18.9107V14.7321C8.46429 14.5474 8.39091 14.3703 8.26031 14.2397C8.1297 14.1091 7.95256 14.0357 7.76786 14.0357H3.58929ZM12.6429 14.7321C12.6429 14.178 12.863 13.6466 13.2548 13.2548C13.6466 12.863 14.178 12.6429 14.7321 12.6429H18.9107C19.4648 12.6429 19.9962 12.863 20.3881 13.2548C20.7799 13.6466 21 14.178 21 14.7321V18.9107C21 19.4648 20.7799 19.9962 20.3881 20.3881C19.9962 20.7799 19.4648 21 18.9107 21H14.7321C14.178 21 13.6466 20.7799 13.2548 20.3881C12.863 19.9962 12.6429 19.4648 12.6429 18.9107V14.7321ZM14.7321 14.0357C14.5474 14.0357 14.3703 14.1091 14.2397 14.2397C14.1091 14.3703 14.0357 14.5474 14.0357 14.7321V18.9107C14.0357 19.0954 14.1091 19.2726 14.2397 19.4032C14.3703 19.5338 14.5474 19.6071 14.7321 19.6071H18.9107C19.0954 19.6071 19.2726 19.5338 19.4032 19.4032C19.5338 19.2726 19.6071 19.0954 19.6071 18.9107V14.7321C19.6071 14.5474 19.5338 14.3703 19.4032 14.2397C19.2726 14.1091 19.0954 14.0357 18.9107 14.0357H14.7321Z" fill="#86909C"/>
+</svg>
+</template>
diff --git a/src/components/icons/IconList.vue b/src/components/icons/IconList.vue
new file mode 100644
index 0000000..22ab357
--- /dev/null
+++ b/src/components/icons/IconList.vue
@@ -0,0 +1,5 @@
+<template>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 18C3.75 17.8011 3.82902 17.6103 3.96967 17.4697C4.11032 17.329 4.30109 17.25 4.5 17.25H19.5C19.6989 17.25 19.8897 17.329 20.0303 17.4697C20.171 17.6103 20.25 17.8011 20.25 18C20.25 18.1989 20.171 18.3897 20.0303 18.5303C19.8897 18.671 19.6989 18.75 19.5 18.75H4.5C4.30109 18.75 4.11032 18.671 3.96967 18.5303C3.82902 18.3897 3.75 18.1989 3.75 18ZM3.75 12C3.75 11.8011 3.82902 11.6103 3.96967 11.4697C4.11032 11.329 4.30109 11.25 4.5 11.25H19.5C19.6989 11.25 19.8897 11.329 20.0303 11.4697C20.171 11.6103 20.25 11.8011 20.25 12C20.25 12.1989 20.171 12.3897 20.0303 12.5303C19.8897 12.671 19.6989 12.75 19.5 12.75H4.5C4.30109 12.75 4.11032 12.671 3.96967 12.5303C3.82902 12.3897 3.75 12.1989 3.75 12ZM3.75 6C3.75 5.80109 3.82902 5.61032 3.96967 5.46967C4.11032 5.32902 4.30109 5.25 4.5 5.25H19.5C19.6989 5.25 19.8897 5.32902 20.0303 5.46967C20.171 5.61032 20.25 5.80109 20.25 6C20.25 6.19891 20.171 6.38968 20.0303 6.53033C19.8897 6.67098 19.6989 6.75 19.5 6.75H4.5C4.30109 6.75 4.11032 6.67098 3.96967 6.53033C3.82902 6.38968 3.75 6.19891 3.75 6Z" fill="#86909C"/>
+</svg>
+</template>
diff --git a/src/components/icons/IconRule.vue b/src/components/icons/IconRule.vue
new file mode 100644
index 0000000..01e2e04
--- /dev/null
+++ b/src/components/icons/IconRule.vue
@@ -0,0 +1,6 @@
+<template>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 16H22V18H10V16ZM10 10H22V12H10V10Z" fill="#191C21"/>
+<path d="M16 30L9.82401 26.707C8.06334 25.7703 6.59097 24.3719 5.56493 22.6617C4.53888 20.9516 3.99789 18.9943 4.00001 17V4C4.00054 3.46973 4.21142 2.96133 4.58638 2.58637C4.96134 2.21141 5.46974 2.00053 6.00001 2H26C26.5303 2.00053 27.0387 2.21141 27.4136 2.58637C27.7886 2.96133 27.9995 3.46973 28 4V17C28.0021 18.9943 27.4611 20.9516 26.4351 22.6617C25.409 24.3719 23.9367 25.7703 22.176 26.707L16 30ZM6.00001 4V17C5.99835 18.6318 6.44111 20.2333 7.28077 21.6325C8.12043 23.0317 9.32528 24.1758 10.766 24.942L16 27.733L21.234 24.943C22.6749 24.1767 23.8798 23.0324 24.7195 21.633C25.5592 20.2336 26.0018 18.632 26 17V4H6.00001Z" fill="#191C21"/>
+</svg>
+</template>
diff --git a/src/components/icons/IconSearch.vue b/src/components/icons/IconSearch.vue
new file mode 100644
index 0000000..406e6e7
--- /dev/null
+++ b/src/components/icons/IconSearch.vue
@@ -0,0 +1,6 @@
+<template>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 19C15.1944 19 19 15.1944 19 10.5C19 5.80558 15.1944 2 10.5 2C5.80558 2 2 5.80558 2 10.5C2 15.1944 5.80558 19 10.5 19Z" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 21L17 17" stroke="#4E5969" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>
diff --git a/src/components/icons/IconSetting.vue b/src/components/icons/IconSetting.vue
new file mode 100644
index 0000000..4a822a5
--- /dev/null
+++ b/src/components/icons/IconSetting.vue
@@ -0,0 +1,5 @@
+<template>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.5 6H19.425C19.05 4.275 17.55 3 15.75 3C13.95 3 12.45 4.275 12.075 6H1.5V7.5H12.075C12.45 9.225 13.95 10.5 15.75 10.5C17.55 10.5 19.05 9.225 19.425 7.5H22.5V6ZM15.75 9C14.475 9 13.5 8.025 13.5 6.75C13.5 5.475 14.475 4.5 15.75 4.5C17.025 4.5 18 5.475 18 6.75C18 8.025 17.025 9 15.75 9ZM1.5 18H4.575C4.95 19.725 6.45 21 8.25 21C10.05 21 11.55 19.725 11.925 18H22.5V16.5H11.925C11.55 14.775 10.05 13.5 8.25 13.5C6.45 13.5 4.95 14.775 4.575 16.5H1.5V18ZM8.25 15C9.525 15 10.5 15.975 10.5 17.25C10.5 18.525 9.525 19.5 8.25 19.5C6.975 19.5 6 18.525 6 17.25C6 15.975 6.975 15 8.25 15Z" fill="#64748B"/>
+</svg>
+</template>
diff --git a/src/components/icons/IconVector.vue b/src/components/icons/IconVector.vue
new file mode 100644
index 0000000..89ea679
--- /dev/null
+++ b/src/components/icons/IconVector.vue
@@ -0,0 +1,5 @@
+<template>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="" xmlns="http://www.w3.org/2000/svg">black
+<path d="M7.9999 16C7.71657 16 7.47924 15.904 7.2879 15.712C7.0959 15.5207 6.9999 15.2833 6.9999 15V3.82499L2.1249 8.69999C1.9249 8.89999 1.68724 8.99999 1.4119 8.99999C1.13724 8.99999 0.899902 8.89999 0.699902 8.69999C0.499902 8.49999 0.399902 8.26665 0.399902 7.99999C0.399902 7.73332 0.499902 7.49999 0.699902 7.29999L7.2999 0.699987C7.3999 0.599987 7.50824 0.528988 7.6249 0.486988C7.74157 0.445654 7.86657 0.424988 7.9999 0.424988C8.13324 0.424988 8.26257 0.445654 8.3879 0.486988C8.51257 0.528988 8.61657 0.599987 8.6999 0.699987L15.2999 7.29999C15.4999 7.49999 15.5999 7.73332 15.5999 7.99999C15.5999 8.26665 15.4999 8.49999 15.2999 8.69999C15.0999 8.89999 14.8622 8.99999 14.5869 8.99999C14.3122 8.99999 14.0749 8.89999 13.8749 8.69999L8.9999 3.82499V15C8.9999 15.2833 8.90424 15.5207 8.7129 15.712C8.5209 15.904 8.28324 16 7.9999 16Z"/>
+</svg>
+</template>
diff --git a/src/components/icons/IconsFilter.vue b/src/components/icons/IconsFilter.vue
new file mode 100644
index 0000000..e778ad9
--- /dev/null
+++ b/src/components/icons/IconsFilter.vue
@@ -0,0 +1,6 @@
+<template>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 9.33333C22.6274 9.33333 28 8.13943 28 6.66667C28 5.19391 22.6274 4 16 4C9.37258 4 4 5.19391 4 6.66667C4 8.13943 9.37258 9.33333 16 9.33333Z" stroke="#191C21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 6.66666C4 9.63999 9.16133 15.5653 11.808 18.4067C12.7789 19.4358 13.3239 20.7945 13.3333 22.2093V25.3333C13.3333 26.0406 13.6143 26.7188 14.1144 27.2189C14.6145 27.719 15.2928 28 16 28C16.7072 28 17.3855 27.719 17.8856 27.2189C18.3857 26.7188 18.6667 26.0406 18.6667 25.3333V22.2093C18.6667 20.7947 19.228 19.4427 20.192 18.4067C22.84 15.5653 28 9.64132 28 6.66666" stroke="#191C21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+</template>
diff --git a/src/views/Files/index.vue b/src/views/Files/index.vue
index 4fd5a13..9a820f2 100644
--- a/src/views/Files/index.vue
+++ b/src/views/Files/index.vue
@@ -1,14 +1,402 @@
 <template>
-  <h1>This is Files page.</h1>
-  </template>
+  <div class="container pt-4 2xl:max-w-none">
+    <!-- Recently Used -->
+    <section class="mb-4">
+      <h2 class="font-bold py-4 mb-4 border-b border-neutral-500">Recently Used</h2>
+      <!-- card group 最多六個-->
+      <ul class="flex justify-start items-center gap-4 overflow-x-auto w-full scrollbar whitespace-nowrap pb-4">
+        <!-- card item v-for -->
+        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
+          <a href="" class="h-full flex flex-col justify-between">
+            <div>
+              <figure class="mb-2">
+                <IconDataFormat class="w-8 h-8 hover:fill-primary"></IconDataFormat>
+              </figure>
+              <h3 class="text-sm font-medium mb-2">
+                File type
+              </h3>
+              <p class="text-sm text-neutral-500">
+                Daily operation records of......
+              </p>
+            </div>
+            <p class="text-sm text-neutral-500">
+              Edited just now
+            </p>
+          </a>
+        </li>
+        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
+          <a href="" class="h-full flex flex-col justify-between">
+            <div>
+              <figure class="mb-2">
+                <IconDataFormat class="w-8 h-8"></IconDataFormat>
+              </figure>
+              <h3 class="text-sm font-medium mb-2">
+                File type
+              </h3>
+              <p class="text-sm text-neutral-500">
+                Daily operation records of......
+              </p>
+            </div>
+            <p class="text-sm text-neutral-500">
+              Edited just now
+            </p>
+          </a>
+        </li>
+        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
+          <a href="" class="h-full flex flex-col justify-between">
+            <div>
+              <figure class="mb-2">
+                <IconDataFormat class="w-8 h-8"></IconDataFormat>
+              </figure>
+              <h3 class="text-sm font-medium mb-2">
+                File type
+              </h3>
+              <p class="text-sm text-neutral-500">
+                Daily operation records of......
+              </p>
+            </div>
+            <p class="text-sm text-neutral-500">
+              Edited just now
+            </p>
+          </a>
+        </li>
+        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
+          <a href="" class="h-full flex flex-col justify-between">
+            <div>
+              <figure class="mb-2">
+                <IconDataFormat class="w-8 h-8"></IconDataFormat>
+              </figure>
+              <h3 class="text-sm font-medium mb-2">
+                File type
+              </h3>
+              <p class="text-sm text-neutral-500">
+                Daily operation records of......
+              </p>
+            </div>
+            <p class="text-sm text-neutral-500">
+              Edited just now
+            </p>
+          </a>
+        </li>
+        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
+          <a href="" class="h-full flex flex-col justify-between">
+            <div>
+              <figure class="mb-2">
+                <IconDataFormat class="w-8 h-8"></IconDataFormat>
+              </figure>
+              <h3 class="text-sm font-medium mb-2">
+                File type
+              </h3>
+              <p class="text-sm text-neutral-500">
+                Daily operation records of......
+              </p>
+            </div>
+            <p class="text-sm text-neutral-500">
+              Edited just now
+            </p>
+          </a>
+        </li>
+        <li class="w-[216px] h-[168px] p-4 border rounded border-neutral-300 hover:text-primary hover:bg-primary/50 hover:border-primary duration-300">
+          <a href="" class="h-full flex flex-col justify-between">
+            <div>
+              <figure class="mb-2">
+                <IconDataFormat class="w-8 h-8"></IconDataFormat>
+              </figure>
+              <h3 class="text-sm font-medium mb-2">
+                File type
+              </h3>
+              <p class="text-sm text-neutral-500">
+                Daily operation records of......
+              </p>
+            </div>
+            <p class="text-sm text-neutral-500">
+              Edited just now
+            </p>
+          </a>
+        </li>
+      </ul>
+    </section>
+    <!-- All Files type of List -->
+    <section>
+      <div class="py-4 mb-4 border-b flex justify-between items-center border-neutral-500">
+        <h2 class="font-bold">All Files</h2>
+        <figure class="flex items-center">
+          <IconList class="mr-4"></IconList>
+          <IconGrid></IconGrid>
+        </figure>
+      </div>
+      <div style="margin-left: -16px; margin-right: -16px;" class="overflow-y-scroll overflow-x-hidden h-[calc(100vh_-_480px)]  scrollbar">
+        <table class="w-full border-separate border-spacing-x-4 text-sm ">
+        <thead class="sticky top-0 bg-neutral-10">
+            <tr>
+              <th>
+                Name
+                <IconVector class="inline-block ml-2 fill-neutral-500" ></IconVector>
+            </th>
+            <th>
+              Parent log
+              <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
+            </th>
+            <th>
+              File type
+              <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
+            </th>
+            <th>
+              Owner
+              <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
+            </th>
+            <th>
+              Last update
+              <IconVector class="inline-block ml-2 fill-neutral-500"></IconVector>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">-</td>
+            <td class="text-neutral-500">Log</td>
+            <td class="text-neutral-500">Ivory Liao</td>
+            <td class="text-neutral-500"></td>
+          </tr>
+          <tr>
+            <td>filter 1109</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Filter</td>
+            <td class="text-neutral-500">Chia-Kai Liu</td>
+            <td class="text-neutral-500">37 minutes ago</td>
+          </tr>
+          <tr>
+            <td>Rule 0327</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Rule</td>
+            <td class="text-neutral-500">Elizabeth Alexandra Mary</td>
+            <td class="text-neutral-500">22 hours ago</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+          <tr>
+            <td>Process 1225</td>
+            <td class="text-neutral-500">Daily operation records of wind turbines of...</td>
+            <td class="text-neutral-500">Design</td>
+            <td class="text-neutral-500">Sun Moon Lake Reservoir...</td>
+            <td class="text-neutral-500">2022/08/20</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    </section>
+    <!-- All Files type of grid -->
+    <!-- <section>
+      <h2 class="font-bold py-4 mb-4 border-b">All Files</h2>
+      <ul class="grid grid-cols-6 gap-4">
+        <li class="w-[216px] h-[168px] p-4 border rounded">
+          <a href="" class="h-full flex flex-col justify-between">
+            <div>
+              <figure class="mb-2">
+                <IconDataFormat class="w-8 h-8"></IconDataFormat>
+              </figure>
+              <h3 class="text-sm font-medium mb-2">
+                File type
+              </h3>
+              <p class="text-sm">
+                Daily operation records of......
+              </p>
+            </div>
+            <p class="text-sm">
+              Edited just now
+            </p>
+          </a>
+        </li>
+      </ul>
+    </section> -->
+  </div>
+</template>
 
-  <script >
-  // export default {
-  //   created() {
-  //     // get cookie token
-  //     const cookieToken =  document.cookie.replace(/(?:(?:^|.*;\s*)luciaToken\s*=\s*([^;]*).*$)|^.*$/, "$1");
-  //     console.log(cookieToken);
-  //     this.$http.defaults.headers.common['Authorization'] = cookieToken;
-  //   }
-  // }
-  </script>
+<script>
+  import IconDataFormat from '@/components/icons/IconDataFormat.vue';
+  import IconRule from '@/components/icons/IconRule.vue';
+  import IconsFilter from '@/components/icons/IconsFilter.vue';
+  import IconFlowChart from '@/components/icons/IconFlowChart.vue';
+  import IconVector from '@/components/icons/IconVector.vue';
+  import IconList from '@/components/icons/IconList.vue';
+  import IconGrid from '@/components/icons/IconGrid.vue';
+
+  export default {
+    data() {
+      return {
+
+      }
+    },
+    setup() {},
+    components: {
+      IconDataFormat,
+      IconRule,
+      IconsFilter,
+      IconFlowChart,
+      IconVector,
+      IconList,
+      IconGrid
+    }
+  }
+
+</script>
+
+<style scoped lang="scss">
+table {
+  th {
+    @apply border-b border-neutral-500 p-3 text-left font-black
+  }
+  td {
+    @apply border-b border-neutral-300 p-3 font-medium break-all
+  }
+  tr {
+    @apply hover:bg-primary/50 duration-300
+  }
+}
+</style>
diff --git a/src/views/Login/index.vue b/src/views/Login/index.vue
index 9716c08..b2571d2 100644
--- a/src/views/Login/index.vue
+++ b/src/views/Login/index.vue
@@ -6,23 +6,23 @@
         <form action="#" method="post" class="w-full grid gap-2" @submit.prevent="signIn">
           <label for="account" class="relative">
             <p class="text-sm font-normal mb-2">Account</p>
-            <span class="absolute bottom-2 left-0 flex items-center pl-2 pr-2 border-r border-neutral">
-              <IconMember class="h-5 w-5 fill-default"/>
+            <span class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]">
+              <IconMember class="h-5 w-5 fill-current"/>
             </span>
-            <input type="text" id="account" class="w-full border border-neutral rounded py-1 pl-10 pr-2 focus:outline-none  focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required autofocus v-model.trim="auth.username" @change="changeHandler($event)"/>
+            <input type="text" id="account" class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none  focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required autofocus v-model.trim="auth.username" @change="changeHandler($event)"/>
           </label>
           <label for="passwordt" class="relative block">
             <p class="text-sm font-normal mb-2">Password</p>
-            <span class="absolute bottom-2 left-0 flex items-center pl-2 pr-2 border-r border-neutral">
-              <IconLockKey class="h-5 w-5"/>
+            <span class="absolute flex bottom-1 left-0 items-center pl-2 pr-2 border-r border-neutral-300 h-[26px]">
+              <IconLockKey class="h-5 w-5 fill-current"/>
             </span>
-            <input :type="showPassword ? 'text' : 'password'" id="password" aria-describedby="password-addon" class="w-full border border-neutral rounded py-1 pl-10 pr-2 focus:outline-none   focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required v-model.trim="auth.password" @change="changeHandler($event)"/>
+            <input :type="showPassword ? 'text' : 'password'" id="password" aria-describedby="password-addon" class="w-full border border-neutral-300 rounded py-1 pl-10 pr-2 focus:outline-none   focus:border-primary focus:ring-1 " :class="{'border-danger':isInvalid}" required v-model.trim="auth.password" @change="changeHandler($event)"/>
             <span class="absolute bottom-2 right-4 inline-flex items-center cursor-pointer" v-show="auth.password" @click="showPassword = !showPassword">
               <IconEyeClose class="h-5 w-5" v-if="showPassword"/>
               <IconEyeOpen class="h-5 w-5" v-else/>
             </span>
           </label>
-          <p class="mb-6 text-danger">
+          <p class="my-4 text-danger">
             <span v-show="isInvalid">
               <IconWarnTriangle class="h-4 w-5 mx-2 mb-[2px] inline-block text-danger"/>Incorrect account or password.
             </span>
diff --git a/tailwind.config.js b/tailwind.config.js
index db065f1..4772ac9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+
 module.exports = {
   content: [
     "./index.html",
@@ -6,14 +7,28 @@ module.exports = {
     "./src/**/**/*.{js,ts,jsx,tsx,vue}"],
   theme: {
     colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
       'primary': '#0099FF',
       // 'secondary': '',
-      'neutral': '#C4C4C4',
+      'neutral': {
+        10: '#ffffff',
+        50: '#f8fafc',
+        100: '#f1f5f9',
+        200: '#e2e8f0',
+        300: '#cbd5e1',
+        400: '#94a3b8',
+        500: '#64748b',
+        600: '#475569',
+        700: '#334155',
+        800: '#1e293b',
+        900: '#0f172a'
+      },
       'danger': '#FF3366',
     },
     container: {
       center: true,
-      padding: '32px',
+      padding: '16px',
     },
     fontSize: {
       xs: ['12px', 1],
@@ -25,5 +40,12 @@ module.exports = {
       '3xl': ['30px', 1],
       '4xl': ['36px', 1],
     },
+    screens: {
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+    }
   },
 };