diff --git a/index.html b/index.html
index 030a6ff..092be61 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>VisualTREE</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/App.vue b/src/App.vue
index 7422330..8310e65 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,21 +1,53 @@
 <script setup>
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from './components/HelloWorld.vue'
+import Input from './components/Input.vue'
 </script>
 
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + Vite" />
+    <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">
+            <div class="p-10 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">
+                        Source 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">
+                        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">
+                        About
+                    </div>
+                </div>
+            </div>
+            <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-1/3">
+                    <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 />
+                    <div class="space-y-4">
+                        <div class="text-gray-500 dark:text-gray-400 text-sm">
+                            Example of a valid tree command:
+                        </div>
+                        <div class="w-full rounded-lg bg-gray-600 dark:bg-gray-800 text-white px-5 py-3 text-sm select-all">
+                            tree -h -J -L 2 . > tree.json
+                        </div>
+                        <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>
+    </div>
 </template>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 48a5ca9..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <p>
-    Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
-    +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-  </p>
-
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Documentation
-    </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
-  </p>
-
-  <button type="button" @click="count++">count is: {{ count }}</button>
-  <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
-  </p>
-</template>
-
-<style scoped>
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/Input.vue b/src/components/Input.vue
new file mode 100644
index 0000000..3b2c159
--- /dev/null
+++ b/src/components/Input.vue
@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div>
+        <input type="file" id="treeFile" class="hidden">
+        <label for="treeFile" class="p-12 border border-blue-500 bg-blue-100/30 dark:bg-blue-900/20 border-dashed rounded-xl text-blue-400 text cursor-pointer block">
+                Drop a file here or click to select a file
+        </label>
+    </div>
+</template>
+
