diff --git a/src/static/index.html b/src/static/index.html
index 9de3f6d..32263fe 100644
--- a/src/static/index.html
+++ b/src/static/index.html
@@ -11,17 +11,22 @@
 
 <body>
     <div class="container">
-        <div class="hide files">
-        </div>
+        <div class="hide files"></div>
         <div class="sidebar">
-            <div class="documents icon"></div>
-            <div class="run icon"></div>
-            <div class="add icon"></div>
+            <button id="documents" class="icon">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 24 24"><path d="M2 4.75C2 3.784 2.784 3 3.75 3h4.971c.58 0 1.12.286 1.447.765l1.404 2.063c.046.069.124.11.207.11h8.471c.966 0 1.75.783 1.75 1.75V19.25A1.75 1.75 0 0 1 20.25 21H3.75A1.75 1.75 0 0 1 2 19.25Zm1.75-.25a.25.25 0 0 0-.25.25v14.5c0 .138.112.25.25.25h16.5a.25.25 0 0 0 .25-.25V7.687a.25.25 0 0 0-.25-.25h-8.471a1.75 1.75 0 0 1-1.447-.765L8.928 4.61a.252.252 0 0 0-.208-.11Z" stroke="#fff"></path></svg>
+            </button>
+            <button id="run" class="icon">
+                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 4.98951C5 4.01835 5 3.53277 5.20249 3.2651C5.37889 3.03191 5.64852 2.88761 5.9404 2.87018C6.27544 2.85017 6.67946 3.11953 7.48752 3.65823L18.0031 10.6686C18.6708 11.1137 19.0046 11.3363 19.1209 11.6168C19.2227 11.8621 19.2227 12.1377 19.1209 12.383C19.0046 12.6635 18.6708 12.886 18.0031 13.3312L7.48752 20.3415C6.67946 20.8802 6.27544 21.1496 5.9404 21.1296C5.64852 21.1122 5.37889 20.9679 5.20249 20.7347C5 20.467 5 19.9814 5 19.0103V4.98951Z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </button>
+            <button id="add" class="icon">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.75 4.5a.75.75 0 0 1 .75.75V11h5.75a.75.75 0 0 1 0 1.5H12.5v5.75a.75.75 0 0 1-1.5 0V12.5H5.25a.75.75 0 0 1 0-1.5H11V5.25a.75.75 0 0 1 .75-.75Z" fill="#fff"></path></svg>
+            </button>
         </div>
         <div class="editorarea">
             <div class="title-bar">
                 <input class="title" placeholder="new file"></input>
-                <button class="title-btn">
+                <button id="title_btn">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
                       <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
                     </svg>
diff --git a/src/static/main.css b/src/static/main.css
index 7b6e9c5..e355805 100644
--- a/src/static/main.css
+++ b/src/static/main.css
@@ -26,13 +26,6 @@ body {
     border-right: #444 solid 0.1rem;
 }
 
-.sidebar > div {
-    background-size: 1rem;
-    background-repeat: no-repeat;
-    background-position: center;
-    padding: 1rem;
-}
-
 .logs {
     height: calc(30vh - 2rem);
     background: #000;
@@ -60,33 +53,20 @@ body {
     font-size: 1rem;
 }
 
-.run {
-    background: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUgNC45ODk1MUM1IDQuMDE4MzUgNSAzLjUzMjc3IDUuMjAyNDkgMy4yNjUxQzUuMzc4ODkgMy4wMzE5MSA1LjY0ODUyIDIuODg3NjEgNS45NDA0IDIuODcwMThDNi4yNzU0NCAyLjg1MDE3IDYuNjc5NDYgMy4xMTk1MyA3LjQ4NzUyIDMuNjU4MjNMMTguMDAzMSAxMC42Njg2QzE4LjY3MDggMTEuMTEzNyAxOS4wMDQ2IDExLjMzNjMgMTkuMTIwOSAxMS42MTY4QzE5LjIyMjcgMTEuODYyMSAxOS4yMjI3IDEyLjEzNzcgMTkuMTIwOSAxMi4zODNDMTkuMDA0NiAxMi42NjM1IDE4LjY3MDggMTIuODg2IDE4LjAwMzEgMTMuMzMxMkw3LjQ4NzUyIDIwLjM0MTVDNi42Nzk0NiAyMC44ODAyIDYuMjc1NDQgMjEuMTQ5NiA1Ljk0MDQgMjEuMTI5NkM1LjY0ODUyIDIxLjExMjIgNS4zNzg4OSAyMC45Njc5IDUuMjAyNDkgMjAuNzM0N0M1IDIwLjQ2NyA1IDE5Ljk4MTQgNSAxOS4wMTAzVjQuOTg5NTFaIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+Cg==');
-}
-
-.documents {
-    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIgNC43NUMyIDMuNzg0IDIuNzg0IDMgMy43NSAzaDQuOTcxYy41OCAwIDEuMTIuMjg2IDEuNDQ3Ljc2NWwxLjQwNCAyLjA2M2MuMDQ2LjA2OS4xMjQuMTEuMjA3LjExaDguNDcxYy45NjYgMCAxLjc1Ljc4MyAxLjc1IDEuNzVWMTkuMjVBMS43NSAxLjc1IDAgMCAxIDIwLjI1IDIxSDMuNzVBMS43NSAxLjc1IDAgMCAxIDIgMTkuMjVabTEuNzUtLjI1YS4yNS4yNSAwIDAgMC0uMjUuMjV2MTQuNWMwIC4xMzguMTEyLjI1LjI1LjI1aDE2LjVhLjI1LjI1IDAgMCAwIC4yNS0uMjVWNy42ODdhLjI1LjI1IDAgMCAwLS4yNS0uMjVoLTguNDcxYTEuNzUgMS43NSAwIDAgMS0xLjQ0Ny0uNzY1TDguOTI4IDQuNjFhLjI1Mi4yNTIgMCAwIDAtLjIwOC0uMTFaIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L3N2Zz4K');
-}
-
-
 .delete {
     background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTkuMDM2IDcuOTc2YS43NS43NSAwIDAgMC0xLjA2IDEuMDZMMTAuOTM5IDEybC0yLjk2MyAyLjk2M2EuNzUuNzUgMCAxIDAgMS4wNiAxLjA2TDEyIDEzLjA2bDIuOTYzIDIuOTY0YS43NS43NSAwIDAgMCAxLjA2MS0xLjA2TDEzLjA2MSAxMmwyLjk2My0yLjk2NGEuNzUuNzUgMCAxIDAtMS4wNi0xLjA2TDEyIDEwLjkzOSA5LjAzNiA3Ljk3NloiIGZpbGw9IiNmZmYiPjwvcGF0aD48cGF0aCBkPSJNMTIgMWM2LjA3NSAwIDExIDQuOTI1IDExIDExcy00LjkyNSAxMS0xMSAxMVMxIDE4LjA3NSAxIDEyIDUuOTI1IDEgMTIgMVpNMi41IDEyYTkuNSA5LjUgMCAwIDAgOS41IDkuNSA5LjUgOS41IDAgMCAwIDkuNS05LjVBOS41IDkuNSAwIDAgMCAxMiAyLjUgOS41IDkuNSAwIDAgMCAyLjUgMTJaIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+Cg==');
     background-repeat: no-repeat;
 }
 
-.icon {
-    width: 1rem;
-    height: 1rem;
-    cursor: pointer;
-}
-
-.icon:active {
-    background-color: #444;
-    transition: 0.25s background-color;
+button {
+    width: 2rem;
+    height: 2rem;
+    border: 0.5rem solid transparent;
+    background: #222;
 }
 
-.add {
-    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTExLjc1IDQuNWEuNzUuNzUgMCAwIDEgLjc1Ljc1VjExaDUuNzVhLjc1Ljc1IDAgMCAxIDAgMS41SDEyLjV2NS43NWEuNzUuNzUgMCAwIDEtMS41IDBWMTIuNUg1LjI1YS43NS43NSAwIDAgMSAwLTEuNUgxMVY1LjI1YS43NS43NSAwIDAgMSAuNzUtLjc1WiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPgo=');
+button:hover {
+    background: #555;
 }
 
  .editorarea {
@@ -112,9 +92,9 @@ body {
     padding: 0.5rem 1rem;
 }
 
-.editorarea > .title-bar > .title-btn {
+#title_btn {
     border: none;
-    background: #222;
+    display: none;
     padding: 0 0.4rem 0 0.4rem;
 }
 
@@ -156,4 +136,4 @@ body {
     .show {
         width: calc(100vw - 3rem);
     }
-}
\ No newline at end of file
+}
diff --git a/src/static/script.js b/src/static/script.js
index b818b35..78bee67 100644
--- a/src/static/script.js
+++ b/src/static/script.js
@@ -8,11 +8,7 @@ const waitTime = 500
 const files = document.querySelector(".files")
 const editor = document.querySelector('.editor')
 const logs = document.querySelector('.logs')
-const documents_icon = document.querySelector('.documents')
-const run_icon = document.querySelector('.run')
-const add_icon = document.querySelector('.add')
 const title = document.querySelector('.editorarea > .title-bar > .title')
-const title_button = document.querySelector('.editorarea > .title-bar > .title-btn')
 let timer
 
 function doApi(message) {
@@ -35,8 +31,8 @@ editor.addEventListener('keyup', (_) => {
 function reload_logs() {
     doApi({'action':'logs'}).then(r => r.json()).then(body => {
         body.map(entry => {
-        logs.innerText += entry + '\n'
-        logs.scrollTo(0, logs.scrollHeight)
+            logs.innerText += entry + '\n'
+            logs.scrollTo(0, logs.scrollHeight)
         })
     })
 }
@@ -73,26 +69,33 @@ function create_file() {
     doApi({"action": "create", "filename": title.value})
 }
 
-title_button.addEventListener('click', create_file);
+title_btn.addEventListener('click', create_file);
 title.addEventListener('keypress', (e) => {
     if (e.keyCode==13) {
         create_file()
     }
 })
+title.addEventListener('keyup', (_) => {
+    if (title.value == "") {
+        title_btn.style.display = 'none'
+    } else {
+        title_btn.style.display = 'block'
+    }
+})
 
-add_icon.addEventListener('click', () => {
+add.addEventListener('click', () => {
     editor.value = ''
     title.value = ''
     title.readOnly = false
     title.focus()
 })
 
-documents_icon.addEventListener('click', () => {
+documents.addEventListener('click', () => {
     files.classList.toggle("show");
     files.classList.toggle("hide");
 });
 
-run_icon.addEventListener('click', () => {
+run.addEventListener('click', () => {
     if (title.value != "") {
         doApi({"action": "run", "filename": title.value})
     } else {
