diff --git a/src/pages/main_page/assets/arrowleft.png b/src/pages/main_page/assets/arrowleft.png
new file mode 100644
index 0000000..fa57149
Binary files /dev/null and b/src/pages/main_page/assets/arrowleft.png differ
diff --git a/src/pages/main_page/internal_apps/apps/file_system.css b/src/pages/main_page/internal_apps/apps/file_system.css
index 46e403b..3fa1537 100644
--- a/src/pages/main_page/internal_apps/apps/file_system.css
+++ b/src/pages/main_page/internal_apps/apps/file_system.css
@@ -1,5 +1,3 @@
-
-
 .frametest2 {
     display: flex;
     flex-direction: column;
@@ -8,7 +6,7 @@
 }
 
 .file_img {
-    margin-top: 1svh; /* Adjust as needed */
+    margin-top: 1svh;
     height: 3.5svh;
     width: 2svw;
 }
@@ -24,17 +22,13 @@
     background-color: #F3F3F3;
     border-radius: 5px;
     transition: all 0.5s;
-  }
-  
-  .editing:hover, .editing:focus {
+}
+
+.editing:hover, .editing:focus {
     border: 2px solid #52525234;
     box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, 0.2);
     background-color: white;
-  }
-
-
-
-
+}
 
 .file_grid {
     display:grid;
@@ -48,8 +42,9 @@
 }
 
 .ApplicationDirectory {
-    position:relative;
-    display: block;
+    position: relative;
+    display: flex;
+    align-items: center;
     margin-bottom: 1px;
     border-top: 2px #0202022f;
     border-left: 2px #0202022f;
@@ -61,12 +56,10 @@
     border-style: solid;
     cursor: move;
     font-size: 1em;
-    color: white    ;
+    color: white;
     width: 873px;
     max-width: 100%;
-    display: flex;
-    align-items: flex-start;
-    background-color: #2f2f2f;   
+    background-color: #2f2f2f;
 }
 
 .frametest2 {
@@ -86,26 +79,30 @@
     background-color: #333333df;
     height: 50svh;    
     backdrop-filter: blur(10px);
-
 }
 
 .buttoncontextmenu {
     display: flex;
     margin-left: 3svh;
     flex-direction: column;
-    justify-content: center; /* Horizontally centers the context menu */
-    align-items: center; /* Vertically centers the buttons */
+    justify-content: center;
+    align-items: center;
     margin-top: 1svh;
 }
 
-
-
 .linecontextmenu::after {
     content: "";
     display: block;
     margin-top: 10px;
-    width: 100%; /* Adjust width as needed */
-    height: 2px; /* Adjust height as needed */
-    background-color: rgba(167, 167, 167, 0.474); /* Change color as desired */
-    margin-right: 100%; /* This pushes the line to the left */
-  }
+    width: 100%;
+    height: 2px;
+    background-color: rgba(167, 167, 167, 0.474);
+    margin-right: 100%;
+}
+
+.backdir {
+    height: 3vh;
+    width: 2vw;
+    margin-bottom: 0.7svh;
+    margin-right: 0.5svh;
+}
diff --git a/src/pages/main_page/internal_apps/apps/file_system.tsx b/src/pages/main_page/internal_apps/apps/file_system.tsx
index 3ae59ac..d9596cf 100644
--- a/src/pages/main_page/internal_apps/apps/file_system.tsx
+++ b/src/pages/main_page/internal_apps/apps/file_system.tsx
@@ -5,6 +5,7 @@ import img from '../../assets/folder.png';
 import { open } from '@tauri-apps/api/dialog';
 import folder from '../../assets/folder.png';
 import alpha from '../../assets/image-solid.svg'
+import arrowleft from '../../assets/arrowleft.png'
 import './file_system.css';
 
 async function upload_file(update_fs: () => Promise<void>, set_files: React.Dispatch<React.SetStateAction<React.JSX.Element[]>>){
@@ -120,7 +121,9 @@ function file_system() : [JSX.Element, React.Dispatch<React.SetStateAction<strin
     <button className='buttoncontextmenu' >Copy</button>
     </div>;
     let Application = <div className='ApplicationDirectory'>
-            <button onClick={async () => {await invoke('cd_back', {});await update_fs();}}>go back</button>
+            <button onClick={async () => {await invoke('cd_back', {});await update_fs();}}>
+                <img className='backdir' src={arrowleft} alt="arrowleft" />
+            </button>
             <h1 className='filesystemtxt2'>{location}</h1>
         </div>
     let app_html = <div className='frametest2' onContextMenu={right_click}>