diff --git a/frontend/index.css b/frontend/index.css
deleted file mode 100644
index b3697cf..0000000
--- a/frontend/index.css
+++ /dev/null
@@ -1,67 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
-  font-family: "pro-disp-sb";
-  src: url("app-status/frontend/public/SF-Pro-Display-Semibold.otf");
-}
-@font-face {
-  font-family: "pro-disp-md";
-  src: url("app-status/frontend/public/SF-Pro-Display-Medium.otf");
-}
-@font-face {
-  font-family: "pro-text-md";
-  src: url("app-status/frontend/public/SF-Pro-Text-Regular.otf");
-}
-@font-face {
-  font-family: "pro-text-rg";
-  src: url("app-status/frontend/public/SF-Pro-Text-Regular.otf");
-}
-
-@layer base {
-  h1 {
-    @apply font-pro-disp-sb text-[3rem] leading-[4rem]
-  }
-  h2 {
-    @apply font-pro-disp-sb text-[2.25rem] leading-[2.25rem]
-  }
-  h3 {
-    @apply font-pro-disp-sb text-[1.5rem] leading-[1.5rem]
-  }
-  h4 {
-    @apply font-pro-disp-md text-[1.5rem] leading-9
-  }
-  h5 {
-    @apply font-pro-disp-md text-[1.25rem] leading-7
-  }
-  h6 {
-    @apply font-pro-text-md text-[1rem] leading-6
-  }
-}
-@layer components {
-  .p1 {
-    @apply font-pro-text-rg text-[1rem] leading-6
-  }
-  .p2 {
-    @apply font-pro-text-rg text-[0.875rem] leading-5
-  }
-  .p3 {
-    @apply font-pro-text-rg text-[0.75rem] leading-5
-  }
-  .app-icon-shadow {
-    @apply shadow-[0px_0px_10px_0px_rgba(36, 41, 46, 0.05)]
-  } 
-  .selected-icon-highlight {
-    @apply border-solid border-highlight border-2 shadow-[0_0_20px_20px_rgba(74, 144, 226, 0.25)]
-  }
-  .border-warning {
-    @apply border-solid border-[1px] border-warning
-  }
-  .border-selected-highlight {
-    @apply border-solid border-2 border-highlight
-  }
-  .border-other {
-    @apply border-stroke-colors border-2 box-border
-  }
-}
\ No newline at end of file
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index fd81e88..c91251e 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -2,26 +2,66 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+@font-face {
+  font-family: "pro-disp-sb";
+  src: url("../../public/SF-Pro-Display-Semibold.otf");
+}
+@font-face {
+  font-family: "pro-disp-md";
+  src: url("../../public/SF-Pro-Display-Medium.otf");
+}
+@font-face {
+  font-family: "pro-text-md";
+  src: url("../../public/SF-Pro-Text-Regular.otf");
+}
+@font-face {
+  font-family: "pro-text-rg";
+  src: url("../../public/SF-Pro-Text-Regular.otf");
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+@layer base {
+  h1 {
+    @apply font-pro-disp-sb text-[3rem] leading-[4rem];
+  }
+  h2 {
+    @apply font-pro-disp-sb text-[2.25rem] leading-[2.25rem];
+  }
+  h3 {
+    @apply font-pro-disp-sb text-[1.5rem] leading-[1.5rem];
+  }
+  h4 {
+    @apply font-pro-disp-md text-[1.5rem] leading-9;
+  }
+  h5 {
+    @apply font-pro-disp-md text-[1.25rem] leading-7;
+  }
+  h6 {
+    @apply font-pro-text-md text-[1rem] leading-6;
   }
 }
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+@layer components {
+  .p1 {
+    @apply font-pro-text-rg text-[1rem] leading-6;
+  }
+  .p2 {
+    @apply font-pro-text-rg text-[0.875rem] leading-5;
+  }
+  .p3 {
+    @apply font-pro-text-rg text-[0.75rem] leading-5;
+  }
+  .app-icon-shadow {
+    @apply shadow-[0px_0px_10px_0px_rgba(36, 41, 46, 0.05)];
+  }
+  .selected-icon-highlight {
+    @apply border-solid border-highlight border-2 shadow-[0_0_20px_20px_rgba(74, 144, 226, 0.25)];
+  }
+  .border-warning {
+    @apply border-solid border-[1px] border-warning;
+  }
+  .border-selected-highlight {
+    @apply border-solid border-2 border-highlight;
+  }
+  .border-other {
+    @apply border-stroke-colors border-2 box-border;
+  }
 }
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 437d6d9..baab7cd 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,9 +1,9 @@
-import Timeline from "@/components/Timeline";
+import Overview from "@/components/Overview";
 
 export default function Home() {
   return (
-    <div className="background-black flex flex-col items-center justify-center h-screen">
-      <Timeline />
+    <div className="bg-black flex flex-col items-center justify-center h-screen">
+      <Overview />
     </div>
   );
 }
diff --git a/frontend/src/components/Overview.tsx b/frontend/src/components/Overview.tsx
new file mode 100644
index 0000000..34c1c9a
--- /dev/null
+++ b/frontend/src/components/Overview.tsx
@@ -0,0 +1,7 @@
+export default function Overview() {
+  return (
+    <div>
+      <h4>Overview</h4>
+    </div>
+  );
+}
diff --git a/frontend/src/components/Timeline.tsx b/frontend/src/components/Timeline.tsx
index 49a0bb5..902c150 100644
--- a/frontend/src/components/Timeline.tsx
+++ b/frontend/src/components/Timeline.tsx
@@ -1,22 +1,13 @@
+import { App } from "@/models/App";
 import { DownInterval } from "@/models/DownInterval";
 import React from "react";
 
-export default function Timeline({
-  appImgSrc,
-  appName,
-  lastUpdated,
-  downIntervals,
-}: {
-  appImgSrc: string;
-  appName: string;
-  lastUpdated: Date;
-  downIntervals: DownInterval;
-}) {
+export default function Timeline(app: App) {
   return (
     <div className="bg-white rounded-xl flex flex-col gap-6 items-stretch p-8">
       {/* Header row */}
       <div className="flex flex-row">
-        <img src={appImgSrc} className=" app-icon-shadow" />
+        <img src={app.iconSrc ?? ""} className=" app-icon-shadow" />
         <div className="flex flex-col"></div>
       </div>
     </div>
diff --git a/frontend/src/models/App.ts b/frontend/src/models/App.ts
new file mode 100644
index 0000000..a895f8b
--- /dev/null
+++ b/frontend/src/models/App.ts
@@ -0,0 +1,8 @@
+import { DownInterval } from "./DownInterval";
+
+export interface App {
+  name: string;
+  downIntervals: DownInterval[];
+  lastUpdated: Date;
+  imageUrl?: string;
+}
diff --git a/frontend/src/models/DownInterval.ts b/frontend/src/models/DownInterval.ts
index b3485f0..95928e6 100644
--- a/frontend/src/models/DownInterval.ts
+++ b/frontend/src/models/DownInterval.ts
@@ -1,5 +1,11 @@
 export interface DownInterval {
-  startDate: Date;
-  endDate: Date;
+  severity: Severity;
   description: string;
+  startTime: Date;
+  endTime?: Date;
+}
+
+enum Severity {
+  Medium,
+  High,
 }