diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 00000000..de49fc5e
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import HomePage from "./pages/HomePage";
+import { Button, Nav, Navbar, NavLink } from "react-bootstrap";
+
+import "./css/App.css"
+import DownloadPage from "./pages/DownloadPage";
+
+function App() {
+    return (
+        <BrowserRouter>
+            <Navbar bg={"dark"} variant={"dark"}>
+                <Navbar.Brand className={"ms-5"} href={"/"}>SCISSORS</Navbar.Brand>
+                <Nav className={"me-auto"}>
+                    <NavLink href={"https://github.com/AtlasMediaGroup/Scissors"}>Source</NavLink>
+                    <NavLink href={"https://status.scissors.gg"}>Status</NavLink>
+                </Nav>
+                <Button variant={"light"} className={"me-5 download-button"} href={"/downloads"} style={{borderRadius: "2vh"}}><img src={"https://cdn3.iconfinder.com/data/icons/download-buttons-outline-collection/70/Download-13-512.png"} width={"50px"} alt={"download"}/>  DOWNLOAD</Button>
+            </Navbar>
+            <Routes>
+                <Route path={"/"} element={<HomePage/>}/>
+                <Route path={"/downloads"} element={<DownloadPage/>}/>
+            </Routes>
+        </BrowserRouter>
+    );
+}
+
+export default App;
diff --git a/src/index.tsx b/src/index.tsx
index 2bb11b55..f9133920 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,27 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-// import App from './App';
-import { Button, Nav, Navbar, NavLink } from "react-bootstrap";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import HomePage from "./pages/HomePage";
-import DownloadPage from "./pages/DownloadPage";
+import App from './App';
 
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
 );
 root.render(
-    <BrowserRouter>
-        <Navbar bg={"dark"} variant={"dark"}>
-            <Navbar.Brand className={"ms-5"} href={"/"}>SCISSORS</Navbar.Brand>
-            <Nav className={"me-auto"}>
-                <NavLink href={"https://github.com/AtlasMediaGroup/Scissors"}>Source</NavLink>
-                <NavLink href={"https://status.scissors.gg"}>Status</NavLink>
-            </Nav>
-            <Button variant={"light"} className={"me-5 download-button"} href={"/downloads"} style={{borderRadius: "2vh"}}><img src={"https://cdn3.iconfinder.com/data/icons/download-buttons-outline-collection/70/Download-13-512.png"} width={"50px"} alt={"download"}/>  DOWNLOAD</Button>
-        </Navbar>
-        <Routes>
-            <Route path={"/"} element={<HomePage/>}/>
-            <Route path={"/downloads"} element={<DownloadPage/>}/>
-        </Routes>
-    </BrowserRouter>
+    <App/>
 );