diff --git a/public/css/pages/drive.css b/public/css/pages/drive.css
index 719c961..07198d3 100644
--- a/public/css/pages/drive.css
+++ b/public/css/pages/drive.css
@@ -8,6 +8,9 @@ main{
 /* dir bar start*/
 
 #dir_bar{
+    position:sticky;
+    top:0;
+    z-index:1;
     width:100%;
     background-color:var(--level-1);
     box-shadow:var(--shadow);
@@ -19,16 +22,6 @@ main{
     white-space:nowrap;
     scroll-behavior:smooth;
 }
-#dirs::-webkit-scrollbar{
-    height:.8rem;
-}
-#dirs::-webkit-scrollbar-thumb{
-    background-color:rgb(192,192,192);
-    border-radius:1rem;    
-}
-#dirs::-webkit-scrollbar-track{
-    background-color:rgba(0,0,0,0);
-}
 .dir{
     display:flex;
     font-size:2.4rem;
@@ -64,16 +57,6 @@ main{
     display:inline-block;
     overflow:auto;
 }
-#file_section::-webkit-scrollbar{
-    width:.8rem;
-}
-#file_section::-webkit-scrollbar-thumb{
-    background-color:rgb(192,192,192);
-    border-radius:1rem;    
-}
-#file_section::-webkit-scrollbar-track{
-    background-color:rgba(0,0,0,0);
-}
 #files {
     display:grid;
     grid-template-columns:repeat(auto-fill, minmax(25rem, 1fr));
@@ -139,7 +122,7 @@ main{
     filter:var(--bright);
 }
 
-@media screen and (min-width:0px) and (max-width:600px){
+@media screen and (min-width:0px) and (max-width:920px){
     #files{
         grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr));
     }
@@ -180,7 +163,7 @@ main{
 #file_info *{
     word-break:break-all;
 }
-@media screen and (min-width:0px) and (max-width:900px){
+@media screen and (min-width:0px) and (max-width:850px){
     #file_info_bar{
         min-width:35rem;
     }
diff --git a/public/css/style.css b/public/css/style.css
index 951f450..9499e8f 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -12,27 +12,27 @@ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, bo
 }
 :root{
   --black: #000;
-  --gray: #C0C0C0;
-  --light_gray:#AAAAAA;
-  --white: #FFF;
-  --red: #FA8072;
-  --yellow:#FFA500;
+  --gray: #c0c0c0;
+  --light_gray:#aaa;
+  --white: #fff;
+  --red: #e46b5d;
+  --yellow:#ffa500;
   --green: #7ee27e;
-
-  --main: #77a3f5;
+  
+  --main: #1188bb;
+  --accent: #1188bb;
   --text: #202124;
+  --accent-text: #e8eaed;
   --text-level-1: #505154;
   --text-level-2: #808184;
   --text-level-3: #b0b1b4;
-  --background: #f9f9f9;
+  --background: #ededed;
 
   --level-1: #f9f9f9;
-  --level-2: #DDD;
+  --level-2: #f9f9f9;
 
   --input: rgba(192, 192, 192, .3);
 
-  --menu-background: #FFFFFF88;
-
   --dim: rgba(0, 0, 0, .3);
   --shadow: .1rem .1rem 1rem rgba(0, 0, 0, .2);
   --hover: rgba(0, 0, 0, .2);
@@ -42,14 +42,16 @@ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, bo
 :root.dark{
   --black: #000;
   --gray: #525252;
-  --light_gray:#AAAAAA;
-  --white: #FFF;
-  --red: #e46b5d;
-  --yellow:#FF8C00;
+  --light_gray:#aaa;
+  --white: #fff;
+  --red: #fa8072;
+  --yellow:#ff8c00;
   --green: #72c472;
-
-  --main: #4682B4;
+  
+  --main: #62cdfe;
+  --accent: #62cdfe;
   --text: #e8eaed;
+  --accent-text: #202124;
   --text-level-1: #b8babd;
   --text-level-2: #888a8d;
   --text-level-3: #585a5d;
@@ -60,12 +62,9 @@ a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, bo
 
   --input: rgba(192, 192, 192, .3);
 
-  --menu-background: #20212488;
-
   --dim: rgba(0, 0, 0, .3);
   --shadow: .1rem .1rem 1rem rgba(0, 0, 0, .2);
-  --hover: #80808066;
-  --hover-level-2: #808080BB;
+  --hover: #a8aaad66;
   --bright: brightness(20);
   --visited: #f4a4ff;
 }
@@ -74,18 +73,35 @@ html{
   /* 1rem == 10px */
   scroll-behavior:smooth;
   height: calc(var(--vh, 1vh) * 100);
-  overflow:auto;
+  overflow:overlay;
   scroll-snap-type:y proximity;
 }
 html::-webkit-scrollbar{
-  width:.8rem;
+  width:2rem;
+  height:2rem;
 }
 html::-webkit-scrollbar-thumb{
-  background-color:rgb(192,192,192);
-  border-radius:1rem;    
+  background-color:var(--text-level-1);
+  border-radius:1rem;
+  border:.8rem solid transparent;
+  background-clip:padding-box;
 }
-html::-webkit-scrollbar-track{
-  background-color:rgba(0,0,0,0);
+.scroll_bar{
+  overflow:overlay;
+}
+.scroll_bar::-webkit-scrollbar{
+  width:2rem;
+  height:2rem;
+}
+.scroll_bar::-webkit-scrollbar-thumb{
+  background-color:var(--text-level-1);
+  border-radius:1rem;
+  border:.8rem solid transparent;
+  background-clip:padding-box;
+}
+body.no_scroll{
+  height:100%;
+  overflow:hidden;
 }
 body{
   background-color:var(--background);
@@ -197,6 +213,7 @@ summary{
   display: inline-block;
 }
 .dropdown_content {
+  transform:translateY(-1.5rem);
   right:0;
   opacity:0;
   pointer-events:none;
@@ -204,10 +221,13 @@ summary{
   text-align:center;
   font-size:1.6rem;
   font-weight:bold;
-  z-index: 100;
   border-radius:.5rem;
   box-shadow:var(--shadow);
-  background-color:var(--menu-background);
+  background-color:var(--level-1);
+  transition:all .25s;
+}
+.dropdown_content li{
+  transition:.25s;
 }
 .dropdown_content li:first-child{
   border-radius:.5rem .5rem 0rem 0rem;
@@ -225,27 +245,49 @@ summary{
   cursor:pointer;
 }
 .dropdown_menu:hover .dropdown_content{
-  opacity:1;pointer-events:unset;
+  transform:translateY(0);
+  opacity:1;
+  pointer-events:unset;
+}
+.dropdown_menu > .select::after{
+  content:' ▼';
+}
+.dropdown_menu > .select{
+  position:relative;
+  z-index:1;
+  padding-right:2rem;
 }
 
 .full{
   width:100% !important;
 }
 .input_text, textarea, .textarea{
-  border:none; color:var(--text); width:37.5rem; font-weight:bold; font-size:1.5rem; margin:1rem 0; outline:.2rem solid #00000000; padding:1.5rem; border-radius:.5rem;
+  border:none;
+  color:var(--text);
+  width:37.5rem;
+  font-weight:bold;
+  font-size:1.5rem;
+  margin:1rem 0;
+  outline:.2rem solid #00000000;
+  padding:1.5rem;
+  border-radius:.5rem;
   background-color:var(--input);
   text-align:left;
   transition:.25s;
 }
 input[type=number]{
+  width:5.5rem;
+  padding:1rem 0 1rem 1rem;
+}
+input[type=number].year{
   width:8rem;
-  padding:1rem .5rem 1rem 1rem;
+  padding:1rem 0 1rem 1rem;
 }
 .input_text::placeholder, input[type=number]::placeholder, textarea::placeholder, .textarea::placeholder{
   color:var(--text);
 }
 .input_text:hover, input[type=number]:hover, textarea:hover, .textarea:hover{
-  box-shadow:var(--shadow);
+  box-shadow:var(--shadow) inset;
   background-color:var(--hover) !important;
 }
 .popup .input_text:hover, input[type=number]:hover, textarea:hover, .textarea:hover{
@@ -264,9 +306,9 @@ input[type=file]{
 }
 .button{
   width:auto;
-  color:var(--white);
+  color:var(--text);
   border:none;
-  padding:1.5rem 2rem;
+  padding:1.5rem 2.5rem;
   text-align:center;
   text-decoration:none;
   display:inline-block;
@@ -274,13 +316,31 @@ input[type=file]{
   font-weight:bold;
   cursor:pointer;
   border-radius:.75rem;
-  background-color:var(--main);
+  background-color:var(--level-2);
   transition:.25s;
 }
 .button:hover{
   box-shadow:var(--shadow);
   background-color:var(--hover) !important;
 }
+.accent{
+  color:var(--accent-text);
+  background-color:var(--accent);
+}
+.delete, .button.off{
+  color:var(--accent-text);
+  background-color:var(--red) !important;
+}
+.button.on{
+  color:var(--accent-text);
+  background-color:var(--green) !important;
+}
+.inactive{
+  color:var(--text) !important;
+  background-color:var(--gray) !important;
+  opacity:.5;
+  cursor:not-allowed;
+}
 .clear_button{
   background:none;
   border:none;
@@ -299,21 +359,11 @@ input[type=file]{
   width:100%;
   flex:1;
 }
-.button_on{
-  background-color:var(--green) !important;
-}
-.button_off, .delete_button{
-  background-color:var(--red) !important;
-}
 
 .icon object{
   pointer-events:none;
   filter:var(--bright);
 }
-.none_active{
-  background-color:var(--gray);
-  cursor:not-allowed;
-}
 
 .popup{
   position:fixed;
@@ -325,7 +375,7 @@ input[type=file]{
   border-radius:2rem;
   box-shadow:var(--shadow);
   background-color:var(--level-1);
-  z-index:99;
+  z-index:101;
   display:none;
 }
 .popup.on{
@@ -361,7 +411,7 @@ input[type=file]{
   gap:2rem;
   margin-bottom:3rem;
 }
-.popup input[type=text]{
+.popup input:not([type=number]){
   display:block;
   margin-bottom:2rem;
 }
@@ -375,7 +425,7 @@ input[type=file]{
   position:fixed;
   bottom:2rem;
   right:1rem;
-  z-index:99;
+  z-index:102;
   display:flex;
   flex-direction:column-reverse;
   box-shadow:var(--shadow);
@@ -523,7 +573,18 @@ input[type=file]{
 
 @media screen and (min-width:0px) and (max-width:1023px){
   html::-webkit-scrollbar{
-    width:2px;
+    width:1rem;
+    height:1rem;
+  }
+  html::-webkit-scrollbar-thumb{
+    border:.4rem solid transparent;
+  }
+  .scroll_bar::-webkit-scrollbar{
+    width:1rem;
+    height:1rem;
+  }
+  .scroll_bar::-webkit-scrollbar-thumb{
+    border:.4rem solid transparent;
   }
   h1{
     font-size:3.2rem;
@@ -540,10 +601,7 @@ input[type=file]{
   main,.container{
     width:auto;
   }
-  .input_text{
-    width:32.5rem;
-  }
-  .popup.main{
+  .input_text, .popup.main{
     width:32.5rem;
   }
 }
\ No newline at end of file
diff --git a/src/drive/drive.service.ts b/src/drive/drive.service.ts
index 6a5fcf3..bbf9f62 100644
--- a/src/drive/drive.service.ts
+++ b/src/drive/drive.service.ts
@@ -181,6 +181,14 @@ export class DriveService {
             }
             throw new BadRequestException('No more storage space');
         }
+        if (inputFile.originalname.length > 255) {
+            try {
+                fs.promises.rm(inputFile.path); 
+            } catch (error) {
+                console.error(error);
+            }
+            throw new BadRequestException('File name is too long');
+        }
         let dirInfo: {folderId: Buffer, folderName: string}[] = [];
         let dir = '';
         if (folderId !== 'root') {
@@ -242,6 +250,14 @@ export class DriveService {
             }
             throw new BadRequestException('No more storage space');
         }
+        if (inputFile.originalname.length > 255) {
+            try {
+                fs.promises.rm(inputFile.path); 
+            } catch (error) {
+                console.error(error);
+            }
+            throw new BadRequestException('File name is too long');
+        }
         let dirInfo: {folderId: Buffer, folderName: string}[] = [];
         let dir = '';
         if (folderId !== 'root') {
@@ -456,6 +472,9 @@ export class DriveService {
         if (inputDriveId !== driveId) {
             throw new BadRequestException(`Drive doesn't match`);
         }
+        if (folderName.length > 255) {
+            throw new BadRequestException('Folder name is too long');
+        }
         let dirInfo: {folderId: Buffer, folderName: string}[] = [];
         let dir = '';
         if (parentId !== 'root') {
diff --git a/src/drive/entity/file.entity.ts b/src/drive/entity/file.entity.ts
index 7ada3b6..1209422 100644
--- a/src/drive/entity/file.entity.ts
+++ b/src/drive/entity/file.entity.ts
@@ -31,7 +31,7 @@ export class File {
     usercode: number;
 
     @Column({
-        length: 64,
+        length: 255,
         nullable: false
     })
     originalName: string;
diff --git a/src/drive/entity/folder.entity.ts b/src/drive/entity/folder.entity.ts
index 9fa8176..1cf850b 100644
--- a/src/drive/entity/folder.entity.ts
+++ b/src/drive/entity/folder.entity.ts
@@ -24,7 +24,7 @@ export class Folder {
     usercode: number;
 
     @Column({
-        length: 64,
+        length: 255,
         nullable: false
     })
     folderName: string;
diff --git a/views/pages/code.ejs b/views/pages/code.ejs
index ae8b8aa..d08bd06 100644
--- a/views/pages/code.ejs
+++ b/views/pages/code.ejs
@@ -16,7 +16,7 @@
             <p>파일 크기: {{formatBytes(file.size)}}</p>
             <p>수정된 날짜: {{new Date(file.created).toLocaleString()}}</p>
             <div id="file_menu" v-if="file.code">
-                <button class="button" :onclick="`downloadFile('${file.code}')`">파일 다운로드</button>
+                <button class="button accent" :onclick="`downloadFile('${file.code}')`">파일 다운로드</button>
             </div>
         </div>
     </main>
diff --git a/views/pages/drive.ejs b/views/pages/drive.ejs
index 598fb59..13cf62e 100644
--- a/views/pages/drive.ejs
+++ b/views/pages/drive.ejs
@@ -11,9 +11,9 @@
 </head>
 <body>
     <main>
-        <section id="file_section">
+        <section id="file_section" class="scroll_bar">
             <header id="dir_bar">
-                <ol id="dirs">
+                <ol id="dirs" class="scroll_bar">
                     <li v-for="(dir, idx) in dirs" class="dir">
                         <div class="arrow">
                             >
@@ -81,18 +81,18 @@
                     </details>
                 </div>
                 <div id="file_menu">
-                    <button class="button main_button" :onclick="`downloadFile('${file.fileId}')`">다운로드</button>
-                    <button class="button clear_button" onclick="$('#file_sub_menu').toggleAttribute('open')">더보기</button>
+                    <button class="button main_button accent" :onclick="`downloadFile('${file.fileId}')`">다운로드</button>
+                    <button class="button" onclick="$('#file_sub_menu').toggleAttribute('open')">더보기</button>
                 </div>
                 <details id="file_sub_menu">
                     <summary></summary>
                     <div>
-                        <button class="button delete_button" :onclick="`deleteFile('${file.fileId}')`">삭제</button>
-                        <label class="button clear_button">
+                        <button class="button delete" :onclick="`deleteFile('${file.fileId}')`">삭제</button>
+                        <label class="button">
                             업데이트
                             <input type="file" :onchange="`uploadFile(this.files[0], '${file.fileId}');this.value=''`">
                         </label>
-                        <button class="button clear_button" onclick="popupOpen($('#share_file_box'))">공유</button>
+                        <button class="button" onclick="popupOpen($('#share_file_box'))">공유</button>
                     </div>
                 </details>
             </div>
@@ -106,7 +106,7 @@
     </main>
     <div>
         <div id="create_drive_box" class="popup main center">
-            <form v-if="step==0" autocomplete="off" onsubmit="createDriveBoxView.changeStep(1);createDrive();return false;">
+            <form v-if="step==0" autocomplete="off" onsubmit="createDriveBoxView.changeStep(1);createDrive();event.preventDefault();">
                 <h2>환영합니다</h2>
                 <p>
                     BSM Cloud는 인터넷을 통해 언제 어디서나 접속할 수 있는 클라우드 서비스 입니다.
@@ -120,7 +120,7 @@
                         정보 제공에 동의합니다
                     </label>
                 </div>
-                <button type="submit" class="main_button button">드라이브 생성</button>
+                <button type="submit" class="button main_button accent">드라이브 생성</button>
             </form>
             <div v-if="step==1">
                 <h2>생성중...</h2>
@@ -138,8 +138,8 @@
             <h2>파일 공유</h2>
             <h4>일반 공유</h4><br>
             <p>파일을 공유할 수 있는 링크가 생성됩니다</p>
-            <button v-if="!file.isShare" class="button button_off" :onclick="`shareFile('${file.fileId}', true)`">공유 꺼짐</button>
-            <button v-else class="button button_on" :onclick="`shareFile('${file.fileId}', false)`">공유 켜짐</button>
+            <button v-if="!file.isShare" class="button off" :onclick="`shareFile('${file.fileId}', true)`">공유 꺼짐</button>
+            <button v-else class="button on" :onclick="`shareFile('${file.fileId}', false)`">공유 켜짐</button>
             <br><br>
             <h4>간편 공유</h4><br>
             <p>2분동안 사용할 수 있는 4자리의 코드가 발급되며 홈 화면에서 코드를 입력해 파일에 접근 할 수 있습니다</p>
@@ -169,7 +169,7 @@
             <form>
                 <h2>폴더 생성</h2>
                 <input id="create_folder_name" class="input_text" type="text" placeholder="폴더 이름" required>
-                <button type="submit" class="main_button button">폴더 생성</button>
+                <button type="submit" class="button main_button accent">폴더 생성</button>
             </form>
         </div>
     </div>
diff --git a/views/pages/home.ejs b/views/pages/home.ejs
index 27875fe..d8ae0c0 100644
--- a/views/pages/home.ejs
+++ b/views/pages/home.ejs
@@ -18,7 +18,7 @@
                 <input class="input_text" type="text" id="share_code" required placeholder="간편 공유 코드 4자리 입력" maxlength="4">
                 <button class="button" type="submit">입력</button>
             </form>
-            <a href="/drive/" class="button">BSM 계정으로 계속</a>
+            <a href="/drive/" class="button accent">BSM 계정으로 계속</a>
         </div>
     </main>
     <%- include('../common/common') %>
diff --git a/views/pages/share.ejs b/views/pages/share.ejs
index 6a641c3..82800f8 100644
--- a/views/pages/share.ejs
+++ b/views/pages/share.ejs
@@ -16,7 +16,7 @@
             <p>파일 크기: {{formatBytes(file.size)}}</p>
             <p>수정된 날짜: {{new Date(file.created).toLocaleString()}}</p>
             <div id="file_menu" v-if="file.fileId">
-                <button class="button" :onclick="`downloadFile('${file.fileId}')`">파일 다운로드</button>
+                <button class="button accent" :onclick="`downloadFile('${file.fileId}')`">파일 다운로드</button>
             </div>
         </div>
     </main>