diff --git a/public/app.js b/public/app.js
index fd3e1b1..9739746 100644
--- a/public/app.js
+++ b/public/app.js
@@ -65,8 +65,16 @@ createApp({
         },
         {
           console: `
-          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z"/></svg>`
-        }
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z"/></svg>`,
+        },
+        {
+          console_hiddne: `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V8H4V18ZM7.5 17L6.1 15.6L8.675 13L6.075 10.4L7.5 9L11.5 13L7.5 17ZM12 17V15H18V17H12Z" fill="#5F6368"/>
+<rect x="3.43359" y="2" width="26.3532" height="2" transform="rotate(45.8073 3.43359 2)" fill="#5F6368"/>
+</svg>
+`,
+        },
       ],
       highlightedCode: {
         html: "",
@@ -167,44 +175,47 @@ createApp({
 
   methods: {
     loadPrismTheme() {
-      const existingTheme = document.querySelector('link[data-prism-theme]');
+      const existingTheme = document.querySelector("link[data-prism-theme]");
       if (existingTheme) {
         existingTheme.remove();
       }
-  
-      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      
-      const link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.setAttribute('data-prism-theme', ''); 
-      
+
+      const isDarkMode = window.matchMedia(
+        "(prefers-color-scheme: dark)"
+      ).matches;
+
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.setAttribute("data-prism-theme", "");
+
       if (isDarkMode) {
-        link.href = './libraries/prism/theme/prism-vsc-dark-plus.min.css';
+        link.href = "./libraries/prism/theme/prism-vsc-dark-plus.min.css";
       } else {
-        link.href = './libraries/prism/theme/prism.min.css';
+        link.href = "./libraries/prism/theme/prism.min.css";
       }
-      
+
       document.head.appendChild(link);
       this.rehighlightCode();
     },
 
-  rehighlightCode() {
-    this.highlightCode(this.html, 'html');
-    this.highlightCode(this.css, 'css');
-    this.highlightCode(this.js, 'js');
-  },
+    rehighlightCode() {
+      this.highlightCode(this.html, "html");
+      this.highlightCode(this.css, "css");
+      this.highlightCode(this.js, "js");
+    },
     initThemeListener() {
-      window.matchMedia('(prefers-color-scheme: dark)')
-        .addEventListener('change', () => {
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .addEventListener("change", () => {
           this.loadPrismTheme();
         });
-    },  
+    },
     handleScroll(event) {
       const textarea = event.target;
       const pre = textarea.nextElementSibling;
       if (pre) {
         pre.scrollTop = textarea.scrollTop;
-        pre.scrollLeft = textarea.scrollLeft
+        pre.scrollLeft = textarea.scrollLeft;
       }
     },
     toggleConsole() {
@@ -343,21 +354,21 @@ createApp({
 
     updatePreview() {
       if (this.isExecutionPaused) return;
-    
+
       const preview = document.getElementById("preview-frame");
       if (!preview) return;
-    
+
       // create a new iframe to replace the existing one
       const newFrame = document.createElement("iframe");
       newFrame.id = "preview-frame";
-    
+
       // replace the old frame with the new one
       preview.parentNode.replaceChild(newFrame, preview);
-    
+
       // write content to the new frame
       const doc = newFrame.contentDocument;
       doc.open();
-    
+
       const content = `
         <!DOCTYPE html>
         <html>
@@ -368,7 +379,9 @@ createApp({
           </head>
           <body>
             ${this.html || ""}
-            ${this.showConsole ? `<script>window.eruda && eruda.init({
+            ${
+              this.showConsole
+                ? `<script>window.eruda && eruda.init({
               useShadowDom: true,
               autoScale: true,
               defaults: {
@@ -379,13 +392,15 @@ createApp({
               
               });
               eruda.show();
-              </script>` : ''}
+              </script>`
+                : ""
+            }
             <script>
               ${this.js || ""}
             </script>
           </body>
         </html>`;
-    
+
       try {
         doc.write(content);
         doc.close();
diff --git a/public/index.html b/public/index.html
index 61ded63..428a4d5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -33,7 +33,7 @@
           </button>
 
           <button class="toggle-icon" @click="toggleConsole">
-            <span v-html="showConsole ? extraIcons[2].console : extraIcons[2].console"></span>
+            <span v-html="showConsole ? extraIcons[2].console : extraIcons[3].console_hiddne"></span>
             <span>console</span>
           </button>
         
@@ -43,7 +43,7 @@
             :class="{ 'toggle-active': isExecutionPaused }"
           >
             <span v-html="isExecutionPaused ? playIcon : pauseIcon"></span>
-            <span>{{ isExecutionPaused ? 'Resume' : 'Pause' }}</span>
+            <span>{{ isExecutionPaused ? 'live' : 'pause' }}</span>
           </button>
         </div>
         <div class="nav-actions">