diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 27d637d..c329545 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,10 +2,13 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="03fafda4-e2c1-4602-a731-a2f96e84badd" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/src/components/IncidentCard.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/UptimeCard.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/Footer.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/StatusPage.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/App.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -69,7 +72,7 @@
       <workItem from="1648500425230" duration="246000" />
       <workItem from="1658028513357" duration="2964000" />
       <workItem from="1666469240565" duration="7361000" />
-      <workItem from="1666543043382" duration="439000" />
+      <workItem from="1666543043382" duration="1855000" />
     </task>
     <servers />
   </component>
diff --git a/package-lock.json b/package-lock.json
index a03bb6f..687d00a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,9 +16,10 @@
         "@types/react": "^17.0.39",
         "@types/react-dom": "^17.0.11",
         "bootstrap": "^5.1.3",
-        "react": "^17.0.2",
+        "react": "^18.2.0",
         "react-bootstrap": "^2.4.0",
-        "react-dom": "^17.0.2",
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.4.2",
         "react-scripts": "5.0.0",
         "react-tooltip": "^4.4.3",
         "typescript": "^4.5.5",
@@ -2774,9 +2775,9 @@
       }
     },
     "node_modules/@react-aria/ssr": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.2.0.tgz",
-      "integrity": "sha512-wwJFdkl+Q8NU5yJ4NvdAOqx5LM3QtUVoSjuK7Ey8jZ4WS4bB0EqT3Kr3IInBs257HzZ5nXCiKXKE4NGXXuIRWA==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.3.0.tgz",
+      "integrity": "sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==",
       "dependencies": {
         "@babel/runtime": "^7.6.2"
       },
@@ -2784,6 +2785,14 @@
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz",
+      "integrity": "sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@restart/hooks": {
       "version": "0.4.7",
       "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
@@ -2796,9 +2805,9 @@
       }
     },
     "node_modules/@restart/ui": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.3.0.tgz",
-      "integrity": "sha512-VRb330/6tDaHAHRkqe0GOawuj+hcZM7Zp5piWk/3AVwW18+0sQxGqqFeiH1ZeEMdn7w+D8bZPaY3QoLTmDKcGg==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.0.tgz",
+      "integrity": "sha512-5dDj5uDzUgK1iijWPRg6AnxjkHM04XhTQDJirM1h/8tIc7KyLtF9YyjcCpNEn259hPMXswpkfXKNgiag0skPFg==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@popperjs/core": "^2.11.5",
@@ -13070,12 +13079,11 @@
       }
     },
     "node_modules/react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       },
       "engines": {
         "node": ">=0.10.0"
@@ -13244,16 +13252,15 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.23.0"
       },
       "peerDependencies": {
-        "react": "17.0.2"
+        "react": "^18.2.0"
       }
     },
     "node_modules/react-error-overlay": {
@@ -13279,6 +13286,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.2.tgz",
+      "integrity": "sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==",
+      "dependencies": {
+        "@remix-run/router": "1.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.2.tgz",
+      "integrity": "sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==",
+      "dependencies": {
+        "@remix-run/router": "1.0.2",
+        "react-router": "6.4.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -13376,9 +13413,9 @@
       }
     },
     "node_modules/react-transition-group": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
-      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
       "dependencies": {
         "@babel/runtime": "^7.5.5",
         "dom-helpers": "^5.0.1",
@@ -13863,12 +13900,11 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "node_modules/schema-utils": {
@@ -18074,13 +18110,18 @@
       "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
     },
     "@react-aria/ssr": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.2.0.tgz",
-      "integrity": "sha512-wwJFdkl+Q8NU5yJ4NvdAOqx5LM3QtUVoSjuK7Ey8jZ4WS4bB0EqT3Kr3IInBs257HzZ5nXCiKXKE4NGXXuIRWA==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.3.0.tgz",
+      "integrity": "sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==",
       "requires": {
         "@babel/runtime": "^7.6.2"
       }
     },
+    "@remix-run/router": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz",
+      "integrity": "sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ=="
+    },
     "@restart/hooks": {
       "version": "0.4.7",
       "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
@@ -18090,9 +18131,9 @@
       }
     },
     "@restart/ui": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.3.0.tgz",
-      "integrity": "sha512-VRb330/6tDaHAHRkqe0GOawuj+hcZM7Zp5piWk/3AVwW18+0sQxGqqFeiH1ZeEMdn7w+D8bZPaY3QoLTmDKcGg==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.4.0.tgz",
+      "integrity": "sha512-5dDj5uDzUgK1iijWPRg6AnxjkHM04XhTQDJirM1h/8tIc7KyLtF9YyjcCpNEn259hPMXswpkfXKNgiag0skPFg==",
       "requires": {
         "@babel/runtime": "^7.18.3",
         "@popperjs/core": "^2.11.5",
@@ -25460,12 +25501,11 @@
       }
     },
     "react": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
-      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "react-app-polyfill": {
@@ -25587,13 +25627,12 @@
       }
     },
     "react-dom": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
-      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "requires": {
         "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "^0.20.2"
+        "scheduler": "^0.23.0"
       }
     },
     "react-error-overlay": {
@@ -25616,6 +25655,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.2.tgz",
+      "integrity": "sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==",
+      "requires": {
+        "@remix-run/router": "1.0.2"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.2.tgz",
+      "integrity": "sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==",
+      "requires": {
+        "@remix-run/router": "1.0.2",
+        "react-router": "6.4.2"
+      }
+    },
     "react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -25688,9 +25744,9 @@
       }
     },
     "react-transition-group": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
-      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
       "requires": {
         "@babel/runtime": "^7.5.5",
         "dom-helpers": "^5.0.1",
@@ -26020,12 +26076,11 @@
       }
     },
     "scheduler": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
-      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
       "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.1.0"
       }
     },
     "schema-utils": {
diff --git a/package.json b/package.json
index 0a8c972..e5e078b 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,10 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "bootstrap": "^5.1.3",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-bootstrap": "^2.4.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.0",
     "react-tooltip": "^4.4.3",
     "typescript": "^4.5.5",
diff --git a/src/App.tsx b/src/App.tsx
index d56d704..aa23dce 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,97 +1,15 @@
 import React, {useEffect, useState} from 'react';
-import NWSLogo from './static/images/NWS_Logo.png';
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
-import {Incident, UptimeResponse} from "./nws-api/types";
-import {getIncidents, getUptime} from "./nws-api/calls";
-import ReactTooltip from 'react-tooltip';
-import UptimeCard from "./components/UptimeCard";
-import IncidentCard from "./components/IncidentCard";
+import StatusPage from "./components/StatusPage";
+import Footer from "./components/Footer";
+import { BrowserRouter, Route, Outlet, Link } from "react-router-dom";
 
 function App() {
 
-    const [uptime, setUptime] = useState<UptimeResponse>({datacenters: [], services:[], lastUpdated: ""});
-    const [incidents, setIncidents] = useState<Incident[]>([]);
 
-    const fetchUptime = async () => {
-        let resp: UptimeResponse = await getUptime();
-        setUptime(resp);
-    }
-
-    const fetchIncidents = async () => {
-        let resp: Incident[] = await getIncidents();
-        setIncidents(resp);
-    }
-
-    useEffect(() => {
-        fetchUptime();
-        fetchIncidents();
-    }, []);
-
-    // @ts-ignore
     return (
-        <div className="App">
-
-
-                <div className={"w-100 row"}>
-                    <div className={"col-md-6 d-flex justify-content-center flex-column align-items-center"}>
-                        <img src={NWSLogo} alt="nws-logo" style={{width: "70%"}}/>
-                    </div>
-                    <div className={"col-md-6 text-center d-flex justify-content-center flex-column align-items-center"}>
-                        <h1>Nick Web Services</h1>
-                        <p style={{ maxWidth: 500 }} className={"col-md-6 text-center"}>
-                            Nick Web Services is a hosting service based out of
-                            Austin, Texas. It is committed
-                            to achieving maximum uptime with better performance and a lower cost than any of the major cloud
-                            services.
-                        </p>
-                    </div>
-                </div>
-            <div style={{width: '75vw'}}>
-                <hr/>
-            </div>
-
-            <div className={"text-left row"} style={{width: '75vw'}}>
-                <h2>NWS System Status</h2>
-                <p>Last updated at {new Date(uptime.lastUpdated).toLocaleString()}</p>
-                <div className={"col-md-6 col-12"}>
-                     <h3>Service Status</h3>
-                        {uptime.services.map((e) => {
-                            return (
-                                <UptimeCard uptime={e}/>
-                            );
-                        })}
-                </div>
-                <div className={"col-md-6 col-12"}>
-                    <h3>Datacenter Status</h3>
-                    {uptime.datacenters.map((e) => {
-                        return (
-                            <UptimeCard uptime={e}/>
-                        );
-                    })}
-                </div>
-            </div>
-
-            <div style={{width: '75vw'}}>
-                <hr/>
-            </div>
-            <div>
-                <h3>Service Alerts</h3>
-                {incidents.map((e) => {
-                    return (
-                        <IncidentCard incident={e}/>
-                    );
-                })}
-                {incidents.length == 0 &&  <div className={`row text-center`} style={{width: '75vw'}}>
-                    <h5 className={"col-12"}>No service alerts.</h5>
-                </div>}
-            </div>
-
-
-            <footer style={{margin: 25}}>
-                NWS is owned and operated by <a href={"http://nickorlow.com"}>Nicholas Orlowsky</a>.
-            </footer>
-        </div>
+        <div/>
     );
 }
 
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..82a12bd
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function Footer() {
+    return (
+        <footer style={{margin: 25}}>
+            NWS is owned and operated by <a href={"http://nickorlow.com"}>Nicholas Orlowsky</a>.
+        </footer>
+    );
+}
diff --git a/src/components/StatusPage.tsx b/src/components/StatusPage.tsx
new file mode 100644
index 0000000..2b0949b
--- /dev/null
+++ b/src/components/StatusPage.tsx
@@ -0,0 +1,93 @@
+import NWSLogo from "../static/images/NWS_Logo.png";
+import UptimeCard from "./UptimeCard";
+import IncidentCard from "./IncidentCard";
+import Footer from "./Footer";
+import React, {useEffect, useState} from "react";
+import {Incident, UptimeResponse} from "../nws-api/types";
+import {getIncidents, getUptime} from "../nws-api/calls";
+import "../App.css";
+
+
+export default function StatusPage() {
+
+    const [uptime, setUptime] = useState<UptimeResponse>({datacenters: [], services: [], lastUpdated: ""});
+    const [incidents, setIncidents] = useState<Incident[]>([]);
+
+    const fetchUptime = async () => {
+        let resp: UptimeResponse = await getUptime();
+        setUptime(resp);
+    }
+
+    const fetchIncidents = async () => {
+        let resp: Incident[] = await getIncidents();
+        setIncidents(resp);
+    }
+
+    useEffect(() => {
+        fetchUptime();
+        fetchIncidents();
+    }, []);
+
+    return(
+        <div className="App">
+
+            <div className={"w-100 row"}>
+                <div className={"col-md-6 d-flex justify-content-center flex-column align-items-center"}>
+                    <img src={NWSLogo} alt="nws-logo" style={{width: "70%"}}/>
+                </div>
+                <div className={"col-md-6 text-center d-flex justify-content-center flex-column align-items-center"}>
+                    <h1>Nick Web Services</h1>
+                    <p style={{maxWidth: 500}} className={"col-md-6 text-center"}>
+                        Nick Web Services is a hosting service based out of
+                        Austin, Texas. It is committed
+                        to achieving maximum uptime with better performance and a lower cost than any of the major cloud
+                        services.
+                    </p>
+                </div>
+            </div>
+
+            <div style={{width: '75vw'}}>
+                <hr/>
+            </div>
+
+            <div className={"text-left row"} style={{width: '75vw'}}>
+                <h2>NWS System Status</h2>
+                <p>Last updated at {new Date(uptime.lastUpdated).toLocaleString()}</p>
+                <div className={"col-md-6 col-12"}>
+                    <h3>Service Status</h3>
+                    {uptime.services.map((e) => {
+                        return (
+                            <UptimeCard uptime={e}/>
+                        );
+                    })}
+                </div>
+                <div className={"col-md-6 col-12"}>
+                    <h3>Datacenter Status</h3>
+                    {uptime.datacenters.map((e) => {
+                        return (
+                            <UptimeCard uptime={e}/>
+                        );
+                    })}
+                </div>
+            </div>
+
+            <div style={{width: '75vw'}}>
+                <hr/>
+            </div>
+
+            <div>
+                <h3>Service Alerts</h3>
+                {incidents.map((e) => {
+                    return (
+                        <IncidentCard incident={e}/>
+                    );
+                })}
+                {incidents.length == 0 &&
+                    <div className={`row text-center`} style={{width: '75vw'}}>
+                        <h5 className={"col-12"}>No service alerts.</h5>
+                    </div>
+                }
+            </div>
+        </div>
+    );
+}
diff --git a/src/index.tsx b/src/index.tsx
index ef2edf8..7ea6178 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,14 +1,59 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {
+    createBrowserRouter,
+    RouterProvider,
+} from "react-router-dom";
+import StatusPage from "./components/StatusPage";
+import reportWebVitals from "./reportWebVitals";
+import "./index.css";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import UptimeCard from "./components/UptimeCard";
+import Footer from "./components/Footer";
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+function Layout (props: {children: any}) {
+    return (
+        <div>
+            {props.children}
+            <Footer/>
+        </div>
+    );
+}
+
+const router = createBrowserRouter([
+    {
+        path: "/",
+        element:
+            <Layout>
+                <StatusPage/>
+            </Layout>
+    },
+    {
+        path: "blog",
+        element:
+            <Layout>
+                <StatusPage/>
+            </Layout>
+    },
+    {
+        path: "blogs",
+        element:
+            <Layout>
+                <StatusPage/>
+            </Layout>
+    },
+    {
+        path: "*",
+        element:
+            <Layout>
+                <StatusPage/>
+            </Layout>
+    },
+]);
+
+// @ts-ignore
+ReactDOM.createRoot(document.getElementById("root")).render(
+    <RouterProvider router={router} />
 );
 
 // If you want to start measuring performance in your app, pass a function