diff --git a/VoidCat/spa/package.json b/VoidCat/spa/package.json
index adc822d..676e650 100644
--- a/VoidCat/spa/package.json
+++ b/VoidCat/spa/package.json
@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.0"
   },
diff --git a/VoidCat/spa/src/Admin/Admin.js b/VoidCat/spa/src/Admin/Admin.js
new file mode 100644
index 0000000..b4cc759
--- /dev/null
+++ b/VoidCat/spa/src/Admin/Admin.js
@@ -0,0 +1,5 @@
+export function Admin(props) {
+    return (
+        <h1>Admin</h1>
+    );
+}
\ No newline at end of file
diff --git a/VoidCat/spa/src/App.js b/VoidCat/spa/src/App.js
index 6ee9b8b..a7dce3d 100644
--- a/VoidCat/spa/src/App.js
+++ b/VoidCat/spa/src/App.js
@@ -1,23 +1,20 @@
-import { Fragment } from 'react';
-import { FilePreview } from "./FilePreview";
-import { Dropzone } from "./Dropzone";
-import { GlobalStats } from "./GlobalStats";
-import {FooterLinks} from "./FooterLinks";
+import {BrowserRouter, Routes, Route} from "react-router-dom";
+import {FilePreview} from "./FilePreview";
+import {HomePage} from "./HomePage";
+import {Admin} from "./Admin/Admin";
 
 import './App.css';
 
 function App() {
-    let hasPath = window.location.pathname !== "/";
     return (
         <div className="app">
-            {hasPath ? <FilePreview id={window.location.pathname.substring(1)} />
-                : (
-                    <Fragment>
-                        <Dropzone />
-                        <GlobalStats />
-                        <FooterLinks />
-                    </Fragment>
-                )}
+            <BrowserRouter>
+                <Routes>
+                    <Route exact path="/" element={<HomePage/>}/>
+                    <Route path="/admin" element={<Admin/>}/>
+                    <Route exact path="/:id" element={<FilePreview/>}/>
+                </Routes>
+            </BrowserRouter>
         </div>
     );
 }
diff --git a/VoidCat/spa/src/FilePreview.js b/VoidCat/spa/src/FilePreview.js
index 35ca3f5..55b3f92 100644
--- a/VoidCat/spa/src/FilePreview.js
+++ b/VoidCat/spa/src/FilePreview.js
@@ -1,19 +1,21 @@
-import { Fragment, useEffect, useState } from "react";
-
-import "./FilePreview.css";
+import {Fragment, useEffect, useState} from "react";
+import {useParams} from "react-router-dom";
 import {TextPreview} from "./TextPreview";
 
-export function FilePreview(props) {
-    let [info, setInfo] = useState();
+import "./FilePreview.css";
+
+export function FilePreview() {
+    const params = useParams();
+    const [info, setInfo] = useState();
 
     async function loadInfo() {
-        let req = await fetch(`/upload/${props.id}`);
+        let req = await fetch(`/upload/${params.id}`);
         if (req.ok) {
             let info = await req.json();
             setInfo(info);
         }
     }
-    
+
     function renderTypes() {
         let link = `/d/${info.id}`;
         if (info.metadata) {
@@ -21,17 +23,17 @@ export function FilePreview(props) {
                 case "image/jpg":
                 case "image/jpeg":
                 case "image/png": {
-                    return <img src={link} alt={info.metadata.name} />;
+                    return <img src={link} alt={info.metadata.name}/>;
                 }
                 case "video/mp4":
                 case "video/matroksa":
                 case "video/x-matroska":
-                case "video/webm": 
+                case "video/webm":
                 case "video/quicktime": {
-                    return <video src={link} controls />;
+                    return <video src={link} controls/>;
                 }
-                case "text/plain":{
-                    return <TextPreview link={link}></TextPreview>;
+                case "text/plain": {
+                    return <TextPreview link={link}/>;
                 }
                 case "application/pdf": {
                     return <object data={link}/>;
@@ -49,8 +51,7 @@ export function FilePreview(props) {
         <div className="preview">
             {info ? (
                 <Fragment>
-                    this.Download(
-                    <a className="btn" href={`/d/${info.id}`}>{info.metadata?.name ?? info.id}</a>)
+                    this.Download(<a className="btn" href={`/d/${info.id}`}>{info.metadata?.name ?? info.id}</a>)
                     {renderTypes()}
                 </Fragment>
             ) : "Not Found"}
diff --git a/VoidCat/spa/src/HomePage.js b/VoidCat/spa/src/HomePage.js
new file mode 100644
index 0000000..6d049d4
--- /dev/null
+++ b/VoidCat/spa/src/HomePage.js
@@ -0,0 +1,14 @@
+import {Fragment} from "react";
+import {Dropzone} from "./Dropzone";
+import {GlobalStats} from "./GlobalStats";
+import {FooterLinks} from "./FooterLinks";
+
+export function HomePage(props) {
+    return (
+        <Fragment>
+            <Dropzone/>
+            <GlobalStats/>
+            <FooterLinks/>
+        </Fragment>
+    );
+}
\ No newline at end of file
diff --git a/VoidCat/spa/yarn.lock b/VoidCat/spa/yarn.lock
index 4e73703..e2c720b 100644
--- a/VoidCat/spa/yarn.lock
+++ b/VoidCat/spa/yarn.lock
@@ -1022,6 +1022,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.7.6":
+  version "7.17.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
+  integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.16.7", "@babel/template@^7.3.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -4370,6 +4377,13 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+history@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/history/-/history-5.2.0.tgz#7cdd31cf9bac3c5d31f09c231c9928fad0007b7c"
+  integrity sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==
+  dependencies:
+    "@babel/runtime" "^7.7.6"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -6899,6 +6913,21 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+react-router-dom@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.2.1.tgz#32ec81829152fbb8a7b045bf593a22eadf019bec"
+  integrity sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==
+  dependencies:
+    history "^5.2.0"
+    react-router "6.2.1"
+
+react-router@6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.2.1.tgz#be2a97a6006ce1d9123c28934e604faef51448a3"
+  integrity sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==
+  dependencies:
+    history "^5.2.0"
+
 react-scripts@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.0.tgz#6547a6d7f8b64364ef95273767466cc577cb4b60"