diff --git a/package.json b/package.json
index edf5ef7..98db269 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "path": "^0.12.7",
     "url": "^0.11.4",
     "vue": "^3.5.13",
+    "vue-router": "^4.5.1",
     "vuetify": "^3.8.0-beta.0"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 7d92469..518be91 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,7 @@
 <template>
   <v-app>
     <v-main>
-      <download-list />
+      <router-view />
     </v-main>
   </v-app>
 </template>
-
-<script setup lang="ts">
-import DownloadList from './components/DownloadList.vue'
-</script>
diff --git a/src/components/DownloadList.vue b/src/components/DownloadList.vue
index 5c6200a..b3b5d41 100644
--- a/src/components/DownloadList.vue
+++ b/src/components/DownloadList.vue
@@ -47,12 +47,17 @@
           <span
             v-if="item.isDir"
             class="blue--text text--darken-2"
-            @click="enterFolder(item.path)"
             style="cursor: pointer"
           >
             <v-icon small class="me-2">mdi-folder-outline</v-icon>
 
-            {{ item.name }}
+            <a
+              :href="`${API_BASE_URL}/${item.path}`"
+              class="blue--text text--darken-2"
+              style="text-decoration: none"
+            >
+              {{ item.name }}
+            </a>
           </span>
           <span v-else>
             <v-icon small class="me-2">mdi-file-outline</v-icon>
@@ -86,8 +91,6 @@
 <script lang="ts">
 import { defineComponent, ref, nextTick } from "vue";
 
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
-
 interface FolderItem {
   name: string;
   path: string;
@@ -128,7 +131,8 @@ export default defineComponent({
         { title: "Size", key: "size", width: "120px" },
         { title: "Last Modified", key: "lastModified", width: "200px" },
       ],
-      DOWNLOAD_BASE_URL: import.meta.env.VITE_DOWNLOAD_BASE_URL
+      DOWNLOAD_BASE_URL: import.meta.env.VITE_DOWNLOAD_BASE_URL,
+      API_BASE_URL: import.meta.env.VITE_API_BASE_URL,
     };
   },
   computed: {
@@ -169,12 +173,17 @@ export default defineComponent({
   methods: {
     async fetchList(reset = false) {
       if (this.loading) return;
+
       this.loading = true;
 
-      const url = new URL(`${API_BASE_URL}/api/list`);
+      const url = new URL(`${this.API_BASE_URL}/api/list`);
+
+      console.log(this.currentPath);
       url.searchParams.set("prefix", this.currentPath);
       url.searchParams.set("limit", "50");
+
       if (this.search) url.searchParams.set("search", this.search);
+
       if (this.nextToken && !reset) {
         url.searchParams.set("token", this.nextToken);
       }
@@ -200,14 +209,9 @@ export default defineComponent({
       this.nextToken = null;
       this.fetchList(true);
     },
-    enterFolder(path: string) {
-      this.currentPath = path;
-      this.nextToken = null;
-      this.fetchList(true);
-    },
     goToBreadcrumb(path: string) {
       this.currentPath = path;
-      this.nextToken = null;
+      this.$router.push("/" + path);
       this.fetchList(true);
     },
     extractFolderName(path: string): string {
@@ -220,6 +224,19 @@ export default defineComponent({
       return size + " B";
     },
   },
+  created() {
+    // Remove leading slash if it exists
+    this.currentPath = this.$route?.path.replace(/^\/+/, "") || "";
+
+    // Check if the path ends in `.bz2` (case-sensitive)
+    if (this.currentPath.endsWith(".bz2")) {
+      window.open(`${this.DOWNLOAD_BASE_URL}${this.currentPath}`, '_blank', 'popup');
+      this.currentPath = "";
+    }
+
+    // Only add trailing slash if there's something left
+    this.currentPath = this.currentPath ? this.currentPath.replace(/\/?$/, "/") : "";
+  },
   mounted() {
     this.fetchList(true);
   },
diff --git a/src/main.ts b/src/main.ts
index 12d4697..eed0852 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,9 +1,12 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import { vuetify } from './plugins/vuetify'
+import router from './router'
 import '@mdi/font/css/materialdesignicons.css'
 import './main.css';
 
 const app = createApp(App)
 app.use(vuetify)
+app.use(router) 
+
 app.mount('#app')
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..8108a0c
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import DownloadList from '../components/DownloadList.vue'
+
+const routes = [
+  {
+    path: '/:catchAll(.*)*', // catches anything
+    name: 'DownloadList',
+    component: DownloadList,
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router
\ No newline at end of file
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo
index d44e1c8..a354934 100644
--- a/tsconfig.tsbuildinfo
+++ b/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/app.vue","./src/main.ts","./src/vite-env.d.ts","./src/components/downloadlist.vue","./src/plugins/vuetify.ts"],"version":"5.8.3"}
\ No newline at end of file
+{"root":["./src/app.vue","./src/main.ts","./src/vite-env.d.ts","./src/components/downloadlist.vue","./src/plugins/vuetify.ts","./src/router/index.ts"],"version":"5.8.3"}
\ No newline at end of file