diff --git a/constants/Commands.js b/constants/Commands.js
index 639757f..b7e7deb 100644
--- a/constants/Commands.js
+++ b/constants/Commands.js
@@ -1,10 +1,62 @@
 export default {
     EXAMPLE_COMMAND: [
         { argument: "tree", description: null},
-        { argument: "-h", description: "Human readable size" },
+        { argument: "-hpugD", description: "Add more data to output" },
         { argument: "--du", description: "Calculate total folder size" },
-        { argument: "-L 2", description: "Max depth" },
-        { argument: "> tree.json", description: "Save output into file" },
-    ]
+        { argument: "-J", description: "Output as JSON" },
+        { argument: "-o tree.json", description: "Save output into file" },
+    ],
+    MINIMUN_COMMAND: [
+        { argument: "tree", description: null},
+        { argument: "-J", description: null},
+        { argument: "-o tree.json", description: null},
+    ],
+    ONLY_DIRECTORIES_COMMAND: [
+        { argument: "tree", description: null},
+        { argument: "-d", description: null},
+    ],
+    ALL_FILES_COMMAND: [
+        { argument: "tree", description: null},
+        { argument: "-a", description: null},
+    ],
+    PERMISSIONS_COMMNAND: [
+        { argument: "tree", description: null},
+        { argument: "-p", description: null},
+    ],
+    USERNAME_COMMAND: [
+        { argument: "tree", description: null},
+        { argument: "-u", description: null},
+    ],
+    GROUP_COMMAND: [
+        { argument: "tree", description: null},
+        { argument: "-g", description: null},
+    ],
+    DATE_COMMAND: [
+        { argument: "tree", description: null},
+        { argument: "-D", description: null},
+    ],
+    SIZE_COMMAND: [
+        { argument: "tree", description: null},
+        { argument: "-s", description: null},
+    ],
+    HUMAN_SIZE_COMMAND: [
+        { argument: "tree", description: null},
+        { argument: "-h", description: null},
+    ],
+    TOTAL_FOLDER_SIZE_COMMAND: [
+        { argument: "tree", description: null},
+        { argument: "--du", description: null},
+    ],
+    MAX_DEPTH_COMMAND: [
+        { argument: "tree", description: null},
+        { argument: "-L 1", description: null},
+    ],
+    CAT_NON_VALID_NAMES: [
+        { argument: "cat", description: null},
+        { argument: "tree.json", description: null},
+        { argument: "|", description: null},
+        { argument: "grep", description: null},
+        { argument: "\"\\\\\"", description: null},
+    ],
 }
 
diff --git a/package-lock.json b/package-lock.json
index 3ab1088..1fcc4cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -177,6 +177,11 @@
         "@vue/shared": "3.2.26"
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.0.0-beta.21.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.21.1.tgz",
+      "integrity": "sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw=="
+    },
     "@vue/reactivity": {
       "version": "3.2.26",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.26.tgz",
@@ -1889,6 +1894,14 @@
         "@vue/shared": "3.2.26"
       }
     },
+    "vue-router": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz",
+      "integrity": "sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.18"
+      }
+    },
     "vue-svg-loader": {
       "version": "0.16.0",
       "resolved": "https://registry.npmjs.org/vue-svg-loader/-/vue-svg-loader-0.16.0.tgz",
diff --git a/package.json b/package.json
index 0f429fd..86ac33b 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.25"
+    "vue": "^3.2.25",
+    "vue-router": "^4.0.12"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.0.0",
diff --git a/src/App.vue b/src/App.vue
index 3c6670c..e59ca1c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,57 +1,12 @@
 <script setup>
-import { ref } from 'vue'
-
 import Navbar from './components/Navbar.vue'
-import Directory from './components/Directory.vue'
-
-import Input from './components/Input.vue'
-import Command from './components/Command.vue'
-
-import Commands from './../constants/Commands.js'
-
-const fileUploaded = ref(false)
-const fileInfo = ref(null)
-const fileData = ref(null)
-
-const fileChanged = (file) => {
-    fileInfo.value = file[1]
-    fileData.value = file[0]
-    fileUploaded.value = true
-}
 </script>
 
 <template>
-    <div class="bg-black">
-        <div class="min-h-screen min-w-screen flex flex-col items-center bg-blue-100 dark:bg-blue-800/10 gap-10 py-10">
+    <div class="bg-white dark:bg-black">
+        <div class="min-h-screen min-w-screen flex flex-col items-center bg-gray-100 dark:bg-blue-800/10 gap-10 py-10">
             <Navbar />
-            <div v-if="!fileUploaded" class="flex-grow flex flex-col items-center justify-center w-full">
-                <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-900 gap-8 p-12 rounded-xl border-gray-200 shadow w-[500px]">
-                    <div class="space-y-3 text-center">
-                        <div class="text-3xl font-semibold text-gray-800 dark:text-gray-100">
-                            VisualTREE
-                        </div>
-                        <div class="text-gray-500 dark:text-gray-400 text-sm">
-                            A tool that allows you to visualize and interact with the output of your
-                            <a class="text-blue-300" href="https://linux.die.net/man/1/tree">tree</a> command.
-                        </div>
-                    </div>
-                    <Input @file-upload="fileChanged"/>
-                    <div class="space-y-4">
-                        <div class="text-gray-500 dark:text-gray-400 text-sm">
-                            Example of a valid tree command:
-                        </div>
-                        <Command :command="Commands.EXAMPLE_COMMAND" />
-                        <div class="text-gray-500 dark:text-gray-400 text-sm">
-                            For a more detailed explanation of the tree command and
-                            the valid list of options, please refer to the
-                            <a class="text-blue-300" href="">guide</a> page.
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div v-else class="flex-grow flex flex-col items-center justify-start w-full">
-                <Directory :fileInfo="fileInfo" :fileData="fileData" @upload-another="fileUploaded = false" />
-            </div>
+            <router-view></router-view>
         </div>
     </div>
 </template>
diff --git a/src/components/About.vue b/src/components/About.vue
new file mode 100644
index 0000000..ac25e36
--- /dev/null
+++ b/src/components/About.vue
@@ -0,0 +1,20 @@
+<script setup>
+</script>
+
+<template>
+    <div class="flex-grow flex flex-col items-center justify-center w-full">
+        <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-900 gap-8 p-12 rounded-xl border-gray-200 shadow w-[650px]">
+            <div class="space-y-3 w-full text-center">
+                <div class="text-3xl font-semibold text-gray-800 dark:text-gray-100">
+                    About
+                </div>
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    A tool made by <a class="text-blue-300" href="https://github.com/xyvs" target="_blank">xyvs</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</template>
+
+
diff --git a/src/components/Directory.vue b/src/components/Directory.vue
index 562210d..d853b9f 100644
--- a/src/components/Directory.vue
+++ b/src/components/Directory.vue
@@ -12,13 +12,13 @@ const props = defineProps({
         <div class="w-full space-y-4">
             <div v-if="fileInfo" class="text-center">
                 <div class="flex items-center justify-center gap-4 text-sm">
-                    <div class="flex items-center gap-2 bg-gray-900 px-4 py-2 rounded cursor-pointer"
+                    <div class="flex items-center gap-2 bg-white dark:bg-gray-900 px-4 py-2 rounded cursor-pointer"
                         @click="$emit('upload-another')">
-                        <div class="text-gray-200" >
+                        <div class="text-gray-800 dark:text-gray-200 font-medium" >
                             Upload another file
                         </div>
                     </div>
-                    <div class="flex items-center gap-2 bg-gray-900 px-4 py-2 rounded">
+                    <div class="flex items-center gap-2 bg-white dark:bg-gray-900 px-4 py-2 rounded">
                         <div class="font-medium text-gray-500">
                             Number of directories: 
                         </div>
@@ -26,7 +26,7 @@ const props = defineProps({
                             {{ fileInfo.directories }}
                         </span>
                     </div>
-                    <div class="flex items-center gap-2 bg-gray-900 px-4 py-2 rounded">
+                    <div class="flex items-center gap-2 bg-white dark:bg-gray-900 px-4 py-2 rounded">
                         <div class="font-medium text-gray-500">
                             Number of files: 
                         </div>
@@ -36,7 +36,7 @@ const props = defineProps({
                     </div>
                 </div>
             </div>
-            <div v-if="fileData" class="bg-gray-900 p-10 rounded-lg text-center">
+            <div v-if="fileData" class="bg-white dark:bg-gray-900 p-10 rounded-lg text-center">
                 <Node :node="fileData" />
             </div>
         </div>
diff --git a/src/components/Guide.vue b/src/components/Guide.vue
new file mode 100644
index 0000000..c629ce4
--- /dev/null
+++ b/src/components/Guide.vue
@@ -0,0 +1,284 @@
+<script setup>
+import Command from './Command.vue'
+
+import Commands from './../../constants/Commands.js'
+</script>
+
+<template>
+    <div class="flex-grow flex flex-col items-center justify-center w-full">
+        <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-900 gap-8 p-12 rounded-xl border-gray-200 shadow w-[650px]">
+            <div class="space-y-3">
+                <div class="text-3xl font-semibold text-gray-800 dark:text-gray-100">
+                    Guide
+                </div>
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    For a more detailed guide please refer to the
+                    <a class="text-blue-300" href="https://linux.die.net/man/1/tree">manual</a>,
+                    on this guide I will overview the features this tool can work with.
+                </div>
+            </div>
+            <div class="space-y-4">
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    The minimun you need for this tool to work is to output the tree
+                    command as JSON and save it to a file, the command below show how to do this.
+                </div>
+                <Command :command="Commands.MINIMUN_COMMAND" />
+            </div>
+            <div class="space-y-3 w-full">
+                <div class="text-xl font-semibold text-gray-800 dark:text-gray-100">
+                    Other Arguments
+                </div>
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    You can use other arguments to add more data to the output in the
+                    following example I will show a few and what's the default output of some of them.
+                </div>
+            </div>
+            <div class="space-y-4 w-full">
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    <span class="py-1 px-1 dark:bg-gray-800 rounded">-a</span>:
+                    All files are printed.  By default tree does not print hidden files (those beginning with a dot `.').  In no event does tree print the file system constructs `.'
+                </div>
+                <Command :command="Commands.ALL_FILES_COMMAND" />
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    Output:
+                </div>
+                <div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
+                    <pre>
+.
+├── .secret
+├── File\ 0.txt
+└── Folder\ 1
+    ├── File\ 1.txt
+    ├── File\ 2.pdf
+    ├── File\ 3.mp4
+    └── Folder\ 2
+        ├── File\ 4.json
+        └── File\ 5.py
+
+2 directories, 7 files</pre>
+                </div>
+            </div>
+            <div class="space-y-4 w-full">
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    <span class="py-1 px-1 dark:bg-gray-800 rounded">-d</span>:
+                    List directories only.
+                </div>
+                <Command :command="Commands.ONLY_DIRECTORIES_COMMAND" />
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    Output:
+                </div>
+                <div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
+                    <pre>
+.
+└── Folder\ 1
+└── Folder\ 2
+
+2 directories</pre>
+                </div>
+            </div>
+            <div class="space-y-4 w-full">
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    <span class="py-1 px-1 dark:bg-gray-800 rounded">-p</span>:
+                    Print the file type and permissions for each file (as per ls -l).
+                </div>
+                <Command :command="Commands.PERMISSIONS_COMMNAND" />
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    Output:
+                </div>
+                <div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
+                    <pre>
+.
+├── [-rw-r--r--]  File\ 0.txt
+└── [drwxr-xr-x]  Folder\ 1
+    ├── [-rw-r--r--]  File\ 1.txt
+    ├── [-rw-r--r--]  File\ 2.pdf
+    ├── [-rw-r--r--]  File\ 3.mp4
+    └── [drwxr-xr-x]  Folder\ 2
+        ├── [-rw-r--r--]  File\ 4.json
+        └── [-rw-r--r--]  File\ 5.py
+
+2 directories, 6 files</pre>
+                </div>
+            </div>
+            <div class="space-y-4 w-full">
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    <span class="py-1 px-1 dark:bg-gray-800 rounded">-u</span>:
+                    Print the username, or UID # if no username is available, of the file.
+                </div>
+                <Command :command="Commands.USERNAME_COMMAND" />
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    Output:
+                </div>
+                <div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
+                    <pre>
+.
+├── [username]  File\ 0.txt
+└── [username]  Folder\ 1
+    ├── [username]  File\ 1.txt
+    ├── [username]  File\ 2.pdf
+    ├── [username]  File\ 3.mp4
+    └── [username]  Folder\ 2
+        ├── [username]  File\ 4.json
+        └── [username]  File\ 5.py
+
+2 directories, 6 files</pre>
+                </div>
+            </div>
+            <div class="space-y-4 w-full">
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    <span class="py-1 px-1 dark:bg-gray-800 rounded">-g</span>:
+                    Print the group name, or GID # if no group name is available, of the file.
+                </div>
+                <Command :command="Commands.GROUP_COMMAND" />
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    Output:
+                </div>
+                <div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
+                    <pre>
+.
+├── [staff   ]  File\ 0.txt
+└── [staff   ]  Folder\ 1
+    ├── [staff   ]  File\ 1.txt
+    ├── [staff   ]  File\ 2.pdf
+    ├── [staff   ]  File\ 3.mp4
+    └── [staff   ]  Folder\ 2
+        ├── [staff   ]  File\ 4.json
+        └── [staff   ]  File\ 5.py
+
+2 directories, 6 files</pre>
+                </div>
+            </div>
+            <div class="space-y-4 w-full">
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    <span class="py-1 px-1 dark:bg-gray-800 rounded">-D</span>:
+                    Print the date of the last modification time or if -c is used, the last status change time for the file listed.
+                </div>
+                <Command :command="Commands.DATE_COMMAND" />
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    Output:
+                </div>
+                <div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
+                    <pre>
+.
+├── [Dec 28 21:24]  File\ 0.txt
+└── [Dec 28 21:26]  Folder\ 1
+    ├── [Dec 28 21:25]  File\ 1.txt
+    ├── [Dec 28 21:25]  File\ 2.pdf
+    ├── [Dec 28 21:25]  File\ 3.mp4
+    └── [Dec 28 21:26]  Folder\ 2
+        ├── [Dec 28 21:25]  File\ 4.json
+        └── [Dec 28 21:26]  File\ 5.py
+
+2 directories, 6 files</pre>
+                </div>
+            </div>
+            <div class="space-y-4 w-full">
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    <span class="py-1 px-1 dark:bg-gray-800 rounded">-s</span>:
+                    Print the size of each file in bytes along with the name.
+                </div>
+                <Command :command="Commands.SIZE_COMMAND" />
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    Output:
+                </div>
+                <div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
+                    <pre>
+.
+├── [          0]  File\ 0.txt
+└── [        192]  Folder\ 1
+    ├── [          0]  File\ 1.txt
+    ├── [          0]  File\ 2.pdf
+    ├── [          0]  File\ 3.mp4
+    └── [        128]  Folder\ 2
+        ├── [          0]  File\ 4.json
+        └── [          0]  File\ 5.py
+
+2 directories, 6 files</pre>
+                </div>
+            </div>
+            <div class="space-y-4 w-full">
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    <span class="py-1 px-1 dark:bg-gray-800 rounded">-h</span>:
+                    Print the size of each file but in a more human readable way, e.g. appending a size letter for kilobytes (K), megabytes (M), gigabytes (G), terabytes (T), petabytes (P) and exabytes (E).
+                </div>
+                <Command :command="Commands.HUMAN_SIZE_COMMAND" />
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    Output:
+                </div>
+                <div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
+                    <pre>
+.
+├── [   0]  File\ 0.txt
+└── [ 192]  Folder\ 1
+    ├── [   0]  File\ 1.txt
+    ├── [   0]  File\ 2.pdf
+    ├── [   0]  File\ 3.mp4
+    └── [ 128]  Folder\ 2
+        ├── [   0]  File\ 4.json
+        └── [   0]  File\ 5.py
+
+2 directories, 6 files</pre>
+                </div>
+            </div>
+            <div class="space-y-4 w-full">
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    <span class="py-1 px-1 dark:bg-gray-800 rounded">--du</span>:
+                    For each directory report its size as the accumulation of sizes of all its files and sub-directories (and their files, and so on).
+                </div>
+                <Command :command="Commands.TOTAL_FOLDER_SIZE_COMMAND" />
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    Output:
+                </div>
+                <div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
+                    <pre>
+.
+├── [          0]  File\ 0.txt
+└── [        320]  Folder\ 1
+    ├── [          0]  File\ 1.txt
+    ├── [          0]  File\ 2.pdf
+    ├── [          0]  File\ 3.mp4
+    └── [        128]  Folder\ 2
+        ├── [          0]  File\ 4.json
+        └── [          0]  File\ 5.py
+
+480 bytes used in 2 directories, 6 files</pre>
+                </div>
+            </div>
+            <div class="space-y-4 w-full">
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    <span class="py-1 px-1 dark:bg-gray-800 rounded">-L level</span>:
+                    Max display depth of the directory tree.
+                </div>
+                <Command :command="Commands.MAX_DEPTH_COMMAND" />
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    Output:
+                </div>
+                <div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all relative">
+                    <pre>
+.
+├── File\ 0.txt
+└── Folder\ 1
+
+1 directory, 1 file</pre>
+                </div>
+            </div>
+            <div class="text-xl font-semibold text-gray-800 dark:text-gray-100 w-full">
+                Troubleshooting
+            </div>
+            <div class="space-y-4">
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    If for some reason you have a file that has a "\" in the name,
+                    the tool will fail. You can validate your file doesn't contain any "\"
+                    with the command below
+                </div>
+                <Command :command="Commands.CAT_NON_VALID_NAMES" />
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    If your file shows at least one line with 
+                    the character, delete that line before uploading the file.
+                </div>
+            </div>
+        </div>
+    </div>
+
+</template>
+
diff --git a/src/components/Home.vue b/src/components/Home.vue
new file mode 100644
index 0000000..f890934
--- /dev/null
+++ b/src/components/Home.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { ref } from 'vue'
+
+import Directory from './Directory.vue'
+
+import Input from './Input.vue'
+import Command from './Command.vue'
+
+import Commands from './../../constants/Commands.js'
+
+const fileUploaded = ref(false)
+const fileInfo = ref(null)
+const fileData = ref(null)
+
+const fileChanged = (file) => {
+    fileInfo.value = file[1]
+    fileData.value = file[0]
+    fileUploaded.value = true
+}
+
+</script>
+
+<template>
+    <div v-if="!fileUploaded" class="flex-grow flex flex-col items-center justify-center w-full">
+        <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-900 gap-8 p-12 rounded-xl border-gray-200 shadow w-[500px]">
+            <div class="space-y-3 text-center">
+                <div class="text-3xl font-semibold text-gray-800 dark:text-gray-100">
+                    VisualTREE
+                </div>
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    A tool that allows you to visualize and interact with the output of your
+                    <a class="text-blue-300" href="https://linux.die.net/man/1/tree">tree</a> command.
+                </div>
+            </div>
+            <Input @file-upload="fileChanged"/>
+            <div class="space-y-4">
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    Example of a valid tree command:
+                </div>
+                <Command :command="Commands.EXAMPLE_COMMAND" />
+                <div class="text-gray-500 dark:text-gray-400 text-sm">
+                    For a more detailed explanation of the tree command and
+                    the valid list of options, please refer to the
+                    <router-link :to="{ name: 'guide' }"><span class="text-blue-300">guide</span></router-link>
+                     page.
+                </div>
+            </div>
+        </div>
+    </div>
+    <div v-else class="flex-grow flex flex-col items-center justify-start w-full">
+        <Directory :fileInfo="fileInfo" :fileData="fileData" @upload-another="fileUploaded = false" />
+    </div>
+</template>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index b2397b0..53bd962 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,18 +1,26 @@
 <template>
     <div class="w-full text-center flex items-center justify-center">
         <div class="flex items-center justify-center bg-white dark:bg-gray-900 rounded-lg overflow-hidden text-sm">
-            <div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
-                Home
-            </div>
-            <div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
-                Guide
-            </div>
-            <div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
-                Code
-            </div>
-            <div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
-                About
-            </div>
+            <router-link :to="{ name: 'home' }">
+                <div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
+                    Home
+                </div>
+            </router-link>
+            <router-link :to="{ name: 'guide' }">
+                <div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
+                    Guide
+                </div>
+            </router-link>
+            <a href="https://github.com/xyvs/visualtree" target="_blank">
+                <div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
+                    Code
+                </div>
+            </a>
+            <router-link :to="{ name: 'about' }">
+                <div class="px-4 py-2 dark:text-white hover:text-blue-300 dark:hover:text-white dark:hover:bg-gray-700 cursor-pointer">
+                    About
+                </div>
+            </router-link>
         </div>
     </div>
 </template>
diff --git a/src/components/Node.vue b/src/components/Node.vue
index 68ee088..0198287 100644
--- a/src/components/Node.vue
+++ b/src/components/Node.vue
@@ -18,19 +18,19 @@ const props = defineProps({
 
 <template>
     <div class="space-y-3 node">
-        <div class="bg-gray-800 flex items-center justify-between px-3 py-3 rounded gap-2">
-            <div class="flex items-center gap-2">
+        <div class="bg-gray-200 dark:bg-gray-800 flex items-center justify-between pl-3 pr-5 py-3 rounded gap-2 overflow-x-auto text-gray-800 dark:text-white">
+            <div class="flex items-center gap-3">
                 <NodeIcon :name="node.name" :type="node.type" :open="open" />
-                <div class="text-xs select-none">
+                <div class="text-xs select-none whitespace-nowrap">
                     {{ node.name }}
                 </div>
                 <NodeInfo :node="node" />
             </div>
             <div v-if="node.type === 'directory' && node.contents.length" @click="toggleOpen">
-                <div v-if="!open" class="text-xs bg-gray-900 rounded flex items-center justify-center cursor-pointer px-2 py-1">
+                <div v-if="!open" class="text-xs bg-gray-400 dark:bg-gray-900 rounded flex items-center justify-center cursor-pointer px-2 py-1 text-white">
                     Open
                 </div>
-                <div v-else class="text-xs bg-red-900 rounded flex items-center justify-center cursor-pointer px-2 py-1">
+                <div v-else class="text-xs bg-red-400 dark:bg-red-900 rounded flex items-center justify-center cursor-pointer px-2 py-1 text-white">
                     Close
                 </div>
             </div>
diff --git a/src/components/NodeInfo.vue b/src/components/NodeInfo.vue
index 3fb01f1..01f0f98 100644
--- a/src/components/NodeInfo.vue
+++ b/src/components/NodeInfo.vue
@@ -5,23 +5,75 @@ const props = defineProps({
 </script>
 
 <template>
-    <div v-if="node.size" class="bg-gray-900 rounded px-2 py-1">
-        <div class="text-xs flex items-center gap-1">
-            <div class="font-medium text-gray-400">
-                Size: 
-            </div>
-            <div class="text-gray-500">
-                {{ node.size }}
+    <div class="flex items-center gap-2 whitespace-nowrap">
+        <div v-if="node.size" class="bg-gray-500 dark:bg-gray-900 rounded px-2 py-1">
+            <div class="text-xs flex items-center gap-1">
+                <div class="font-medium text-gray-200 dark:text-gray-400">
+                    Size: 
+                </div>
+                <div class="text-gray-300 dark:text-gray-500">
+                    {{ node.size }}
+                </div>
             </div>
         </div>
-    </div>
-    <div v-if="node.contents" class="bg-gray-900 rounded px-2 py-1">
-        <div class="text-xs flex items-center gap-1">
-            <div class="font-medium text-gray-400">
-                Items: 
+        <div v-if="node.contents" class="bg-gray-500 dark:bg-gray-900 rounded px-2 py-1">
+            <div class="text-xs flex items-center gap-1">
+                <div class="font-medium text-gray-200 dark:text-gray-400">
+                    Items: 
+                </div>
+                <div class="text-gray-300 dark:text-gray-500">
+                    {{ node.contents.length }}
+                </div>
             </div>
-            <div class="text-gray-500">
-                {{ node.contents.length }}
+        </div>
+        <div v-if="node.mode" class="bg-gray-500 dark:bg-gray-900 rounded px-2 py-1">
+            <div class="text-xs flex items-center gap-1">
+                <div class="font-medium text-gray-200 dark:text-gray-400">
+                    Mode: 
+                </div>
+                <div class="text-gray-300 dark:text-gray-500">
+                    {{ node.mode }}
+                </div>
+            </div>
+        </div>
+        <div v-if="node.prot" class="bg-gray-500 dark:bg-gray-900 rounded px-2 py-1">
+            <div class="text-xs flex items-center gap-1">
+                <div class="font-medium text-gray-200 dark:text-gray-400">
+                    Permissions: 
+                </div>
+                <div class="text-gray-300 dark:text-gray-500">
+                    {{ node.prot }}
+                </div>
+            </div>
+        </div>
+        <div v-if="node.user" class="bg-gray-500 dark:bg-gray-900 rounded px-2 py-1">
+            <div class="text-xs flex items-center gap-1">
+                <div class="font-medium text-gray-200 dark:text-gray-400">
+                    User:
+                </div>
+                <div class="text-gray-300 dark:text-gray-500">
+                    {{ node.user }}
+                </div>
+            </div>
+        </div>
+        <div v-if="node.group" class="bg-gray-500 dark:bg-gray-900 rounded px-2 py-1">
+            <div class="text-xs flex items-center gap-1">
+                <div class="font-medium text-gray-200 dark:text-gray-400">
+                    Group: 
+                </div>
+                <div class="text-gray-300 dark:text-gray-500">
+                    {{ node.group }}
+                </div>
+            </div>
+        </div>
+        <div v-if="node.time" class="bg-gray-500 dark:bg-gray-900 rounded px-2 py-1">
+            <div class="text-xs flex items-center gap-1">
+                <div class="font-medium text-gray-200 dark:text-gray-400">
+                    Date: 
+                </div>
+                <div class="text-gray-300 dark:text-gray-500">
+                    {{ node.time }}
+                </div>
             </div>
         </div>
     </div>
diff --git a/src/index.css b/src/index.css
index cfa1a86..e1ea642 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,21 +7,18 @@
 }
 
 ::-webkit-scrollbar {
-  @apply bg-transparent w-2;
+  @apply bg-transparent w-2 h-1;
 }
 
-/* Track */
 ::-webkit-scrollbar-track {
-  @apply bg-gray-900;
+  @apply bg-gray-200 dark:bg-gray-900;
 }
 
-/* Handle */
 ::-webkit-scrollbar-thumb {
-  @apply bg-gray-800 rounded;
+  @apply bg-gray-300 dark:bg-gray-800 rounded;
 }
 
-/* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  @apply bg-gray-700 rounded;
+  @apply bg-gray-400 dark:bg-gray-700 rounded;
 }
 
diff --git a/src/main.js b/src/main.js
index 50a4dab..5e9decf 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,8 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 import './index.css'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..f4388f0
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,16 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import Home from './../components/Home.vue'
+import Guide from './../components/Guide.vue'
+import About from './../components/About.vue'
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        { path: '/', name: "home", component: Home },
+        { path: '/guide', name: "guide", component: Guide },
+        { path: '/about', name: "about", component: About },
+    ]
+})
+
+export default router