diff --git a/package-lock.json b/package-lock.json
index 5231166..01d1a59 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,8 @@
         "natural-orderby": "^3.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.7.1",
+        "react-router-dom": "^6.4.4",
         "react-scripts": "^5.0.1",
         "react-table": "^7.8.0",
         "typescript": "^4.9.3",
@@ -3028,6 +3030,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz",
+      "integrity": "sha512-gTL8H5USTAKOyVA4xczzDJnC3HMssdFa3tRlwBicXynx9XfiXwneHnYQogwSKpdCkjXISrEKSTtX62rLpNEVQg==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -13956,6 +13966,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -13969,6 +13987,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.4.tgz",
+      "integrity": "sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q==",
+      "dependencies": {
+        "@remix-run/router": "1.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4.tgz",
+      "integrity": "sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA==",
+      "dependencies": {
+        "@remix-run/router": "1.0.4",
+        "react-router": "6.4.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -18821,6 +18869,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.4.tgz",
+      "integrity": "sha512-gTL8H5USTAKOyVA4xczzDJnC3HMssdFa3tRlwBicXynx9XfiXwneHnYQogwSKpdCkjXISrEKSTtX62rLpNEVQg=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -26594,6 +26647,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-icons": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
+      "integrity": "sha512-yHd3oKGMgm7zxo3EA7H2n7vxSoiGmHk5t6Ou4bXsfcgWyhfDKMpyKfhHR6Bjnn63c+YXBLBPUql9H4wPJM6sXw==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -26604,6 +26663,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.4.tgz",
+      "integrity": "sha512-SA6tSrUCRfuLWeYsTJDuriRqfFIsrSvuH7SqAJHegx9ZgxadE119rU8oOX/rG5FYEthpdEaEljdjDlnBxvfr+Q==",
+      "requires": {
+        "@remix-run/router": "1.0.4"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.4.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.4.tgz",
+      "integrity": "sha512-0Axverhw5d+4SBhLqLpzPhNkmv7gahUwlUVIOrRLGJ4/uwt30JVajVJXqv2Qr/LCwyvHhQc7YyK1Do8a9Jj7qA==",
+      "requires": {
+        "@remix-run/router": "1.0.4",
+        "react-router": "6.4.4"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index b2d88f8..526ab42 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
     "natural-orderby": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
+    "react-router-dom": "^6.4.4",
     "react-scripts": "^5.0.1",
     "react-table": "^7.8.0",
     "typescript": "^4.9.3",
diff --git a/src/App.css b/src/App.css
index 4c9169e..b3072e1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -37,6 +37,26 @@
   }
 }
 
+@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'Lato', sans-serif;
+}
+
+.home,
+.flights,
+.seasons {
+  display: flex;
+  height: 90vh;
+  align-items: center;
+  justify-content: center;
+  font-size: 3rem;
+}
+
+
 .sort-button {
   background-color: transparent;
   border: none;
diff --git a/src/App.test.tsx b/src/App.test.tsx
deleted file mode 100644
index 2a68616..0000000
--- a/src/App.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/App.tsx b/src/App.tsx
index 1e37044..3645e0d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,34 +1,25 @@
 import React from "react";
 import "./App.css";
-import FlightsTable from "./components/FlightsTable";
-import SeasonTable from "./components/SeasonTable";
-import {groupByMap} from './global/tools';
-import flights from './data/HoPe_all_flights.json';
-import {CFlight} from './classes/CFlight';
-import {CSeason} from './classes/CSeason';
+import Navbar from './components/Navbar';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Home from './pages/Home';
+import Flights from './pages/Flights';
+import Seasons from './pages/Seasons';
 
-const data_raw = flights.data;
-const data: CFlight[] = [];
-const seasondata: CSeason[] = [];
 
-for (let fl of data_raw) 
-{
-  data.push(new CFlight(fl));
-}
-
-const seasondata_raw = groupByMap(data, i => i.FKSeason);
-
-for (let [key, value] of seasondata_raw) 
-{
-  seasondata.push(new CSeason(key, value));
-}
 
 export default function App() 
 {
   return(
-<div className='App'>
-  <SeasonTable seasondata = {seasondata} />
-  <FlightsTable flightdata = {data}/>
-</div>
+    <>
+      <Router>
+        <Navbar />
+        <Routes>
+          <Route path='/'  element={<Home/>} />
+          <Route path='/flights' element={<Flights/>} />
+          <Route path='/seasons' element={<Seasons/>} />
+        </Routes>
+      </Router>
+    </>
   );
 }
diff --git a/src/components/Data.tsx b/src/components/Data.tsx
new file mode 100644
index 0000000..84edd14
--- /dev/null
+++ b/src/components/Data.tsx
@@ -0,0 +1,20 @@
+import flights from '../data/HoPe_all_flights.json';
+import {CFlight} from '../classes/CFlight';
+import {CSeason} from '../classes/CSeason';
+import {groupByMap} from '../global/tools';
+
+const data_raw = flights.data;
+export const g_data: CFlight[] = [];
+export const g_seasondata: CSeason[] = [];
+
+for (let fl of data_raw) 
+{
+  g_data.push(new CFlight(fl));
+}
+
+const seasondata_raw = groupByMap(g_data, i => i.FKSeason);
+
+for (let [key, value] of seasondata_raw) 
+{
+  g_seasondata.push(new CSeason(key, value));
+}
diff --git a/src/components/Navbar.ts b/src/components/Navbar.tsx
similarity index 96%
rename from src/components/Navbar.ts
rename to src/components/Navbar.tsx
index b8a3e08..1e8eced 100644
--- a/src/components/Navbar.ts
+++ b/src/components/Navbar.tsx
@@ -6,7 +6,7 @@ import { SidebarData } from './SidebarData';
 import './Navbar.css';
 import { IconContext } from 'react-icons';
 
-function Navbar() 
+export default function Navbar() 
 {
   const [sidebar, setSidebar] = useState(false);
 
@@ -42,6 +42,4 @@ function Navbar()
       </IconContext.Provider>
     </>
   );
-}
-
-export default Navbar;
+}
\ No newline at end of file
diff --git a/src/components/SidebarData.ts b/src/components/SidebarData.ts
deleted file mode 100644
index 3a29732..0000000
--- a/src/components/SidebarData.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import * as FaIcons from 'react-icons/fa';
-import * as AiIcons from 'react-icons/ai';
-import * as IoIcons from 'react-icons/io';
-
-export const SidebarData = [
-  {
-    title: 'Home',
-    path: '/',
-    icon: <AiIcons.AiFillHome />,
-    cName: 'nav-text'
-  },
-  {
-    title: 'Reports',
-    path: '/reports',
-    icon: <IoIcons.IoIosPaper />,
-    cName: 'nav-text'
-  },
-  {
-    title: 'Products',
-    path: '/products',
-    icon: <FaIcons.FaCartPlus />,
-    cName: 'nav-text'
-  },
-  {
-    title: 'Team',
-    path: '/team',
-    icon: <IoIcons.IoMdPeople />,
-    cName: 'nav-text'
-  },
-  {
-    title: 'Messages',
-    path: '/messages',
-    icon: <FaIcons.FaEnvelopeOpenText />,
-    cName: 'nav-text'
-  },
-  {
-    title: 'Support',
-    path: '/support',
-    icon: <IoIcons.IoMdHelpCircle />,
-    cName: 'nav-text'
-  }
-];
diff --git a/src/components/SidebarData.tsx b/src/components/SidebarData.tsx
new file mode 100644
index 0000000..573fd3e
--- /dev/null
+++ b/src/components/SidebarData.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import * as FaIcons from 'react-icons/fa';
+import * as AiIcons from 'react-icons/ai';
+import * as IoIcons from 'react-icons/io';
+
+export const SidebarData = [
+  {
+    title: 'Home',
+    path: '/',
+    icon: <AiIcons.AiFillHome />,
+    cName: 'nav-text'
+  },
+  {
+    title: 'Flights',
+    path: '/flights',
+    icon: <IoIcons.IoIosPaper />,
+    cName: 'nav-text'
+  },
+  {
+    title: 'Seasons',
+    path: '/seasons',
+    icon: <FaIcons.FaCartPlus />,
+    cName: 'nav-text'
+  }
+];
diff --git a/src/pages/Flights.tsx b/src/pages/Flights.tsx
new file mode 100644
index 0000000..dfd6fa5
--- /dev/null
+++ b/src/pages/Flights.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+import {g_data} from '../components/Data';
+import FlightsTable from "../components/FlightsTable";
+
+export default function Flights() {
+  return (
+    <FlightsTable flightdata = {g_data}/>
+    );
+}
diff --git a/src/pages/Home.js b/src/pages/Home.js
deleted file mode 100644
index 24222d3..0000000
--- a/src/pages/Home.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-function Home() {
-  return (
-    <div className='home'>
-      <h1>Home</h1>
-    </div>
-  );
-}
-
-export default Home;
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index e69de29..5a1a6b2 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Home() {
+  return (
+    <div>
+      <h1>HOME</h1>
+    </div>
+  );
+}
diff --git a/src/pages/Products.js b/src/pages/Products.js
deleted file mode 100644
index 4a4467b..0000000
--- a/src/pages/Products.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-function Products() {
-  return (
-    <div className='products'>
-      <h1>Products</h1>
-    </div>
-  );
-}
-
-export default Products;
diff --git a/src/pages/Reports.js b/src/pages/Reports.js
deleted file mode 100644
index 8c61abc..0000000
--- a/src/pages/Reports.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-function Reports() {
-  return (
-    <div className='reports'>
-      <h1>Reports</h1>
-    </div>
-  );
-}
-
-export default Reports;
diff --git a/src/pages/Seasons.tsx b/src/pages/Seasons.tsx
new file mode 100644
index 0000000..fa58621
--- /dev/null
+++ b/src/pages/Seasons.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import {g_seasondata} from '../components/Data';
+import SeasonTable from "../components/SeasonTable";
+
+export default function Seasons() {
+  return (
+    <SeasonTable seasondata = {g_seasondata}/>  
+    );
+}
\ No newline at end of file
diff --git a/thirdParty/react-sidebar-v1-master/src/components/Navbar.css b/thirdParty/react-sidebar-v1-master/src/components/Navbar.css
deleted file mode 100644
index 2876737..0000000
--- a/thirdParty/react-sidebar-v1-master/src/components/Navbar.css
+++ /dev/null
@@ -1,72 +0,0 @@
-.navbar {
-  background-color: #060b26;
-  height: 80px;
-  display: flex;
-  justify-content: start;
-  align-items: center;
-}
-
-.menu-bars {
-  margin-left: 2rem;
-  font-size: 2rem;
-  background: none;
-}
-
-.nav-menu {
-  background-color: #060b26;
-  width: 250px;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  position: fixed;
-  top: 0;
-  left: -100%;
-  transition: 850ms;
-}
-
-.nav-menu.active {
-  left: 0;
-  transition: 350ms;
-}
-
-.nav-text {
-  display: flex;
-  justify-content: start;
-  align-items: center;
-  padding: 8px 0px 8px 16px;
-  list-style: none;
-  height: 60px;
-}
-
-.nav-text a {
-  text-decoration: none;
-  color: #f5f5f5;
-  font-size: 18px;
-  width: 95%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  border-radius: 4px;
-}
-
-.nav-text a:hover {
-  background-color: #1a83ff;
-}
-
-.nav-menu-items {
-  width: 100%;
-}
-
-.navbar-toggle {
-  background-color: #060b26;
-  width: 100%;
-  height: 80px;
-  display: flex;
-  justify-content: start;
-  align-items: center;
-}
-
-span {
-  margin-left: 16px;
-}
diff --git a/thirdParty/react-sidebar-v1-master/src/components/Navbar.js b/thirdParty/react-sidebar-v1-master/src/components/Navbar.js
deleted file mode 100644
index 525ccc7..0000000
--- a/thirdParty/react-sidebar-v1-master/src/components/Navbar.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { useState } from 'react';
-import * as FaIcons from 'react-icons/fa';
-import * as AiIcons from 'react-icons/ai';
-import { Link } from 'react-router-dom';
-import { SidebarData } from './SidebarData';
-import './Navbar.css';
-import { IconContext } from 'react-icons';
-
-function Navbar() {
-  const [sidebar, setSidebar] = useState(false);
-
-  const showSidebar = () => setSidebar(!sidebar);
-
-  return (
-    <>
-      <IconContext.Provider value={{ color: '#fff' }}>
-        <div className='navbar'>
-          <Link to='#' className='menu-bars'>
-            <FaIcons.FaBars onClick={showSidebar} />
-          </Link>
-        </div>
-        <nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
-          <ul className='nav-menu-items' onClick={showSidebar}>
-            <li className='navbar-toggle'>
-              <Link to='#' className='menu-bars'>
-                <AiIcons.AiOutlineClose />
-              </Link>
-            </li>
-            {SidebarData.map((item, index) => {
-              return (
-                <li key={index} className={item.cName}>
-                  <Link to={item.path}>
-                    {item.icon}
-                    <span>{item.title}</span>
-                  </Link>
-                </li>
-              );
-            })}
-          </ul>
-        </nav>
-      </IconContext.Provider>
-    </>
-  );
-}
-
-export default Navbar;
diff --git a/thirdParty/react-sidebar-v1-master/src/components/SidebarData.js b/thirdParty/react-sidebar-v1-master/src/components/SidebarData.js
deleted file mode 100644
index 3a29732..0000000
--- a/thirdParty/react-sidebar-v1-master/src/components/SidebarData.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import * as FaIcons from 'react-icons/fa';
-import * as AiIcons from 'react-icons/ai';
-import * as IoIcons from 'react-icons/io';
-
-export const SidebarData = [
-  {
-    title: 'Home',
-    path: '/',
-    icon: <AiIcons.AiFillHome />,
-    cName: 'nav-text'
-  },
-  {
-    title: 'Reports',
-    path: '/reports',
-    icon: <IoIcons.IoIosPaper />,
-    cName: 'nav-text'
-  },
-  {
-    title: 'Products',
-    path: '/products',
-    icon: <FaIcons.FaCartPlus />,
-    cName: 'nav-text'
-  },
-  {
-    title: 'Team',
-    path: '/team',
-    icon: <IoIcons.IoMdPeople />,
-    cName: 'nav-text'
-  },
-  {
-    title: 'Messages',
-    path: '/messages',
-    icon: <FaIcons.FaEnvelopeOpenText />,
-    cName: 'nav-text'
-  },
-  {
-    title: 'Support',
-    path: '/support',
-    icon: <IoIcons.IoMdHelpCircle />,
-    cName: 'nav-text'
-  }
-];
diff --git a/thirdParty/react-sidebar-v1-master/src/pages/Home.js b/thirdParty/react-sidebar-v1-master/src/pages/Home.js
deleted file mode 100644
index 24222d3..0000000
--- a/thirdParty/react-sidebar-v1-master/src/pages/Home.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-function Home() {
-  return (
-    <div className='home'>
-      <h1>Home</h1>
-    </div>
-  );
-}
-
-export default Home;
diff --git a/thirdParty/react-sidebar-v1-master/src/pages/Products.js b/thirdParty/react-sidebar-v1-master/src/pages/Products.js
deleted file mode 100644
index 4a4467b..0000000
--- a/thirdParty/react-sidebar-v1-master/src/pages/Products.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-function Products() {
-  return (
-    <div className='products'>
-      <h1>Products</h1>
-    </div>
-  );
-}
-
-export default Products;
diff --git a/thirdParty/react-sidebar-v1-master/src/pages/Reports.js b/thirdParty/react-sidebar-v1-master/src/pages/Reports.js
deleted file mode 100644
index 8c61abc..0000000
--- a/thirdParty/react-sidebar-v1-master/src/pages/Reports.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-function Reports() {
-  return (
-    <div className='reports'>
-      <h1>Reports</h1>
-    </div>
-  );
-}
-
-export default Reports;