diff --git a/app/components/Alert.tsx b/app/components/Alert.tsx
deleted file mode 100644
index 2a33736..0000000
--- a/app/components/Alert.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from "react";
-import { Bullet } from "./Bullet";
-import { Title } from "./Title";
-
-export function Alert(props: {
-  name: string;
-  headers: Array<string>;
-  routes: { [key: string]: { [key: string]: string } };
-  index: number;
-}) {
-  let name = props.name;
-  let headers = props.headers;
-  let routes = props.routes;
-  let index = props.index;
-
-  return (
-    <React.Fragment>
-      <div className="flex h-14 flex-row items-center rounded-lg bg-red-600">
-        {headers.length > 0 ? (
-          <Title name={name + " (" + (index + 1) + "/" + headers.length + ")"}></Title>
-        ) : (
-          <Title name={name}></Title>
-        )}
-      </div>
-
-      {headers.length > 0 ? (
-        <div className="flex h-51 w-full flex-row items-start rounded-lg bg-slate-100 px-4">
-          <h1 className="line-clamp-4 text-pretty font-semibold 2xl:text-5xl 2xl:leading-tight">
-            {headers[index].split(/(\[.*?\])/).map((text) => {
-              if (text.length == 0) return;
-              if (text.substring(0, 1) == "[" && text.substring(text.length - 1) == "]") {
-                return (
-                  <div className="mx-1 inline-flex -translate-y-1.5" key={Math.random()}>
-                    <Bullet
-                      short_name={text.substring(1, text.length - 1)}
-                      color={routes[text.substring(1, text.length - 1)].route_color}
-                      text_color={routes[text.substring(1, text.length - 1)].route_text_color}
-                      size={42}
-                    />
-                  </div>
-                );
-              }
-              return text;
-            })}
-          </h1>
-        </div>
-      ) : (
-        <div className="flex w-full grow flex-row items-center rounded-lg bg-slate-100">
-          <h1 className="w-full text-center font-bold text-black 2xl:text-5xl">No active alerts </h1>
-        </div>
-      )}
-    </React.Fragment>
-  );
-}
diff --git a/app/components/Bullet.tsx b/app/components/Bullet.tsx
index 0de3763..6e95fcf 100644
--- a/app/components/Bullet.tsx
+++ b/app/components/Bullet.tsx
@@ -1,67 +1,64 @@
 export function Bullet(props: { short_name: string; color: string; text_color: string; size: number }) {
-  let short_name = props.short_name;
-  let color = props.color;
-  let text_color = props.text_color;
-  let size = props.size;
+  if (props.short_name.length <= 0) {
+    return;
+  }
 
-  if (short_name.length <= 1) {
+  if (props.short_name.length <= 1) {
     return (
       <span
-        className="flex items-center justify-center rounded-full"
+        className="flex items-center justify-center"
         style={{
-          backgroundColor: `#${color}`,
-          height: `${size}px`,
-          width: `${size}px`,
+          height: `${props.size}px`,
+          width: `${props.size}px`,
         }}
       >
-        <h1
-          className="text-center font-bold "
+        <span
+          className="flex items-center justify-center rounded-full"
           style={{
-            fontSize: `${size * 0.65}px`,
-
-            color: `#FFFFFF`,
-            // Due to the MTA forgetting to add route_text_color to their GTFS static files,
-            // we'll have to manually set all the colors to white at the expense of the BMT Broadway Line bullets
-            // color: `#${text_color}`
-
-            minWidth: `${size}px`,
+            backgroundColor: `#${props.color}`,
+            height: `${props.size}px`,
+            width: `${props.size}px`,
           }}
         >
-          {short_name}
-        </h1>
+          <h1
+            className="text-center font-bold "
+            style={{
+              fontSize: `${props.size * 0.65}px`,
+              color: `#${props.text_color}`,
+            }}
+          >
+            {props.short_name}
+          </h1>
+        </span>
       </span>
     );
   }
 
-  if (short_name.length <= 2 && short_name.substring(1) == "X") {
+  if (props.short_name.length <= 2 && props.short_name.substring(1) == "X") {
     return (
       <span
         className="flex items-center justify-center"
         style={{
-          height: `${size}px`,
-          width: `${size}px`,
+          height: `${props.size}px`,
+          width: `${props.size}px`,
         }}
       >
         <span
           className="flex rotate-[45deg] items-center justify-center"
           style={{
-            backgroundColor: `#${color}`,
-            height: `${size / Math.sqrt(2)}px`,
-            width: `${size / Math.sqrt(2)}px`,
+            backgroundColor: `#${props.color}`,
+            height: `${props.size / Math.sqrt(2)}px`,
+            width: `${props.size / Math.sqrt(2)}px`,
           }}
         >
           <h1
             className="rotate-[-45deg] text-center font-bold"
             style={{
-              fontSize: `${size * 0.65}px`,
-
-              color: `#FFFFFF`,
-              // Due to the MTA forgetting to add route_text_color to their GTFS static files,
-              // we'll have to manually set all the colors to white at the expense of the BMT Broadway Line bullets
-              // color: `#${text_color}`
+              fontSize: `${props.size * 0.65}px`,
+              color: `#${props.text_color}`,
             }}
           >
-            {short_name.substring(0, 1)}
+            {props.short_name.substring(0, 1)}
           </h1>
         </span>
       </span>
@@ -72,21 +69,20 @@ export function Bullet(props: { short_name: string; color: string; text_color: s
     <span
       className="flex items-center justify-center rounded-2xl"
       style={{
-        backgroundColor: `#${color}`,
-        height: `${size}px`,
+        backgroundColor: `#${props.color}`,
+        height: `${props.size}px`,
       }}
     >
       <h1
         className="line-clamp-1 text-center font-bold"
         style={{
-          fontSize: `${size * 0.65}px`,
-          color: `#${text_color}`,
-          paddingLeft: `${size * 0.2}px`,
-          paddingRight: `${size * 0.2}px`,
-          minWidth: `${size}px`,
+          fontSize: `${props.size * 0.65}px`,
+          color: `#${props.text_color}`,
+          paddingLeft: `${props.size * 0.175}px`,
+          paddingRight: `${props.size * 0.175}px`,
         }}
       >
-        {short_name}
+        {props.short_name}
       </h1>
     </span>
   );
diff --git a/app/components/List.tsx b/app/components/List.tsx
deleted file mode 100644
index c86ee39..0000000
--- a/app/components/List.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { ReactNode } from "react";
-import { Vehicle } from "../types";
-import { Bullet } from "./Bullet";
-import { Title } from "./Title";
-
-export function List(props: {
-  name: string;
-  vehicles: { [key: string]: { [key: string]: Array<Vehicle> } };
-  routes: { [key: string]: { [key: string]: string } };
-}) {
-  let name = props.name;
-  let trips = props.vehicles;
-  let routes = props.routes;
-  let displays: Array<ReactNode> = [];
-
-  Object.values(trips).forEach((destinations) => {
-    Object.values(destinations).forEach((vehicles) => {
-      displays.push(
-        <div className="flex h-29 w-full flex-row items-center rounded-lg bg-slate-200 text-black" key={Math.random()}>
-          <div className="flex h-full w-4/5 flex-row items-center rounded-lg bg-slate-100 shadow-2xl">
-            <div className="flex h-full w-3/4 flex-row items-center justify-center gap-2 px-2">
-              <Bullet
-                short_name={vehicles[0].route_name}
-                color={routes[vehicles[0].route_id].route_color}
-                text_color={routes[vehicles[0].route_id].route_text_color}
-                size={72}
-              />
-              <h1 className="line-clamp-2 text-wrap font-bold 2xl:text-3xl">{vehicles[0].destination_name}</h1>
-            </div>
-            <div className="flex h-full w-1/4 flex-col items-center justify-center">
-              <h1 className="font-black 2xl:text-6xl">{vehicles[0].minutes_until_arrival}</h1>
-              <h1 className="font-semibold 2xl:text-2xl">min</h1>
-            </div>
-          </div>
-
-          <div className="flex h-full w-1/4 flex-col items-center justify-center">
-            {vehicles[1] ? (
-              <React.Fragment>
-                <h1 className="font-black 2xl:text-6xl">{vehicles[1].minutes_until_arrival}</h1>
-                <h1 className="font-semibold 2xl:text-2xl ">min</h1>
-              </React.Fragment>
-            ) : undefined}
-          </div>
-        </div>,
-      );
-    });
-  });
-
-  if (displays.length == 0) {
-    return (
-      <React.Fragment>
-        <div className="flex h-14 flex-row items-center rounded-lg bg-emerald-700">{<Title name={name}></Title>}</div>
-        <div className="flex grow flex-row items-center">
-          <div className="flex h-full w-full flex-row items-center rounded-lg bg-slate-100">
-            <h1 className="w-full text-center font-bold text-black 2xl:text-5xl">No vehicles scheduled</h1>
-          </div>
-        </div>
-      </React.Fragment>
-    );
-  }
-
-  return (
-    <React.Fragment>
-      <div className="flex h-14 flex-row items-center rounded-lg bg-emerald-700">{<Title name={name}></Title>}</div>
-      {displays}
-    </React.Fragment>
-  );
-}
diff --git a/app/config.ts b/app/config.ts
index 7e1cb0f..40bdd02 100644
--- a/app/config.ts
+++ b/app/config.ts
@@ -1,25 +1,23 @@
-module.exports = {
+import { Config } from "./types";
+
+export const config: Config = {
   subway: [
     {
       stop_ids: ["405S"],
-      display: "Countdown",
       walk_time: 10,
     },
     {
       stop_ids: ["D03S"],
-      display: "Countdown",
       walk_time: 14,
     },
   ],
   bus: [
     {
       stop_ids: ["100017", "103400"],
-      display: "List",
       walk_time: 3,
     },
     {
       stop_ids: ["100723"],
-      display: "List",
       walk_time: 3,
     },
   ],
diff --git a/app/page.tsx b/app/page.tsx
index 76564c0..a4f7cb0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,124 +2,63 @@
 
 import Image from "next/image";
 import { useEffect, useState } from "react";
-import { Alert } from "./components/Alert";
+import { Bulletin } from "./components/Bulletin";
 import { Countdown } from "./components/Countdown";
-import { List } from "./components/List";
-import { Vehicle } from "./types";
+import { Message } from "./components/Message";
+import { config } from "./config";
+import { Alert, Info } from "./types";
 
 export default function Home() {
   const [time, setTime] = useState<string>("");
-  const [jeromeNames, setJeromeNames] = useState<string>("");
-  const [jeromeTimes, setJeromeTimes] = useState<Array<Vehicle>>([]);
-  const [concourseNames, setConcourseNames] = useState<string>("");
-  const [concourseTimes, setConcourseTimes] = useState<Array<Vehicle>>([]);
+  const [status, setStatus] = useState(false);
+  const [info, setInfo] = useState<Info>({ stops_realtime: {}, service_alerts_realtime: [], routes_static: {} });
   const [serviceAlerts, setServiceAlerts] = useState<Array<string>>([]);
-  const [routes, setRoutes] = useState<{ [key: string]: { [key: string]: string } }>({});
-  const [paulNames, setPaulNames] = useState<string>("");
-  const [paulTimes, setPaulTimes] = useState<{ [key: string]: { [key: string]: Array<Vehicle> } }>({});
-  const [w205Names, setW205Names] = useState<string>("");
-  const [w205Times, setW205Times] = useState<{ [key: string]: { [key: string]: Array<Vehicle> } }>({});
   const [index, setIndex] = useState(0);
-  const [wsStatus, setWsStatus] = useState(false);
 
   useEffect(() => {
     const ws = new WebSocket("ws://127.0.0.1:9001");
 
-    const config = {
-      subway: [
-        {
-          stop_ids: ["405S"],
-          display: "Countdown",
-          walk_time: 10,
-        },
-        {
-          stop_ids: ["D03S"],
-          display: "Countdown",
-          walk_time: 14,
-        },
-      ],
-      bus: [
-        {
-          stop_ids: ["100017", "103400"],
-          display: "List",
-          walk_time: 3,
-        },
-        {
-          stop_ids: ["100723"],
-          display: "List",
-          walk_time: 3,
-        },
-      ],
-    };
-
     ws.onopen = () => {
+      setStatus(true);
       console.log("Websocket opened.");
+
       ws.send(JSON.stringify(config));
     };
 
     ws.onmessage = (event) => {
-      setWsStatus(true);
+      setStatus(true);
       console.log("Message recieved.");
 
       const message = JSON.parse(event.data);
+      setInfo(message);
 
-      const jeromeName: string = message["stops_realtime"]["405S"]["name"];
-      setJeromeNames(jeromeName);
-
-      const jeromeData: Vehicle[] = message["stops_realtime"]["405S"]["trips"];
-      setJeromeTimes(jeromeData);
-
-      const concouseName: string = message["stops_realtime"]["D03S"]["name"];
-      setConcourseNames(concouseName);
-
-      const concourseData: Vehicle[] = message["stops_realtime"]["D03S"]["trips"];
-      setConcourseTimes(concourseData);
-
-      const delayData: Array<string> = [];
-
-      const serviceData: Array<{ route_id: string; sort_order: number; header_text: string }> =
-        message["service_alerts_realtime"];
+      const headers: Array<string> = [];
+      const serviceData: Array<Alert> = message.service_alerts_realtime;
       serviceData
         .slice()
         .reverse()
         .forEach((alert) => {
-          if (delayData.indexOf(alert.header_text) !== -1) return;
+          if (headers.indexOf(alert.header_text) !== -1) return;
           if (alert.sort_order < 22) return;
-          delayData.push(alert.header_text);
+          headers.push(alert.header_text);
         });
-      setServiceAlerts(delayData);
-
-      if (delayData.length > 0) {
-        setIndex((i) => ((i % delayData.length) + delayData.length) % delayData.length);
+      setServiceAlerts(headers);
+      if (headers.length > 0) {
+        setIndex((i) => ((i % headers.length) + headers.length) % headers.length);
       } else {
         setIndex(0);
       }
-
-      const routeData: { [key: string]: { [key: string]: string } } = message["routes_static"];
-      setRoutes(routeData);
-
-      const paulName: string = message["stops_realtime"]["100017"]["name"];
-      setPaulNames(paulName);
-
-      const paulData: { [key: string]: { [key: string]: Array<Vehicle> } } =
-        message["stops_realtime"]["100017"]["routes"];
-      setPaulTimes(paulData);
-
-      const w205Name: string = message["stops_realtime"]["100723"]["name"];
-      setW205Names(w205Name);
-
-      const w205stData: { [key: string]: { [key: string]: Array<Vehicle> } } =
-        message["stops_realtime"]["100723"]["routes"];
-      setW205Times(w205stData);
     };
 
     ws.onclose = () => {
-      setWsStatus(false);
+      setStatus(false);
       console.log("Websocket closed.");
     };
 
     return () => {
+      setStatus(false);
       console.log("Closing old websocket...");
+
       ws.close();
     };
   }, []);
@@ -149,28 +88,54 @@ export default function Home() {
           dateStyle: "long",
         }),
       );
-    }, 1000);
-  }, []);
+
+      if (serviceAlerts.length > 0) {
+        setIndex((i) => (((i + 1) % serviceAlerts.length) + serviceAlerts.length) % serviceAlerts.length);
+      } else {
+        setIndex(0);
+      }
+    }, 5000);
+
+    return () => {
+      clearInterval(loop);
+    };
+  }, [serviceAlerts.length]);
 
   return (
     <div className="flex min-h-screen flex-col">
       <div className="grid grow grid-flow-dense grid-cols-3 grid-rows-3 gap-4 bg-emerald-700 p-2 text-black">
         <div className="col-span-2 row-span-2 flex flex-col gap-2 rounded-xl bg-black p-2">
-          <Countdown name={jeromeNames} vehicles={jeromeTimes} routes={routes}></Countdown>
-          <Countdown name={concourseNames} vehicles={concourseTimes} routes={routes}></Countdown>
+          <Countdown
+            name={info.stops_realtime["405S"] ? info.stops_realtime["405S"].name : ""}
+            vehicles={info.stops_realtime["405S"] ? info.stops_realtime["405S"].trips : []}
+            routes={info.routes_static}
+          ></Countdown>
+          <Countdown
+            name={info.stops_realtime["D03S"] ? info.stops_realtime["D03S"].name : ""}
+            vehicles={info.stops_realtime["D03S"] ? info.stops_realtime["D03S"].trips : []}
+            routes={info.routes_static}
+          ></Countdown>
         </div>
         <div className="col-span-2 row-span-1 flex flex-col gap-2 rounded-xl bg-black p-2">
-          <Alert name={"Service Alerts"} headers={serviceAlerts} routes={routes} index={index} />
+          <Message name={"Service Alerts"} headers={serviceAlerts} routes={info.routes_static} index={index} />
         </div>
         <div className="col-span-1 row-span-3 flex flex-col gap-2 rounded-xl bg-black p-2">
-          <List name={paulNames} vehicles={paulTimes} routes={routes}></List>
-          <List name={w205Names} vehicles={w205Times} routes={routes}></List>
+          <Bulletin
+            name={info.stops_realtime["100017"] ? info.stops_realtime["100017"].name : ""}
+            vehicles={info.stops_realtime["100017"] ? info.stops_realtime["100017"].routes : {}}
+            routes={info.routes_static}
+          ></Bulletin>
+          <Bulletin
+            name={info.stops_realtime["100723"] ? info.stops_realtime["100723"].name : ""}
+            vehicles={info.stops_realtime["100723"] ? info.stops_realtime["100723"].routes : {}}
+            routes={info.routes_static}
+          ></Bulletin>
         </div>
       </div>
       <div className="flex h-14 flex-row items-center rounded-lg bg-black">
         <h1 className="mx-2 flex-1 grow text-start font-bold text-white 2xl:text-3xl">
           {"Status: "}
-          {wsStatus ? (
+          {status ? (
             <span className="inline-flex items-baseline rounded-md bg-green-600 px-2">OK</span>
           ) : (
             <span className="inline-flex items-baseline rounded-md bg-red-600 px-2">ERROR</span>
@@ -200,7 +165,6 @@ export default function Home() {
             <span>David Wang</span>
           </span>
         </h1>
-
         <h1 className="mx-2 flex-1 grow text-end font-bold text-white 2xl:text-3xl">{time}</h1>
       </div>
     </div>
diff --git a/app/types.d.ts b/app/types.d.ts
index d109dda..1dd8253 100644
--- a/app/types.d.ts
+++ b/app/types.d.ts
@@ -5,3 +5,31 @@ export interface Vehicle {
   destination_name: string;
   minutes_until_arrival: number;
 }
+
+export interface Stop {
+  name: string;
+  trips: Array<Vehicle>;
+  routes: Record<string, Record<string, Array<Vehicle>>>;
+}
+
+export interface Alert {
+  route_id: string;
+  sort_order: number;
+  header_text: string;
+}
+
+export interface Info {
+  stops_realtime: Record<string, Stop>;
+  service_alerts_realtime: Array<Alert>;
+  routes_static: Record<String, unknown>;
+}
+
+export interface Config {
+  subway: Array<StopConfig>;
+  bus: Array<StopConfig>;
+}
+
+export interface StopConfig {
+  stop_ids: Array<string>;
+  walk_time: number;
+}
diff --git a/src/config.rs b/src/config.rs
index 40a4bfd..cc32f67 100644
--- a/src/config.rs
+++ b/src/config.rs
@@ -16,7 +16,6 @@ pub struct Config {
 #[derive(Debug, Serialize, Deserialize, Default)]
 pub struct StopConfig {
   pub stop_ids: Vec<String>,
-  pub display: String,
   pub walk_time: i32,
 }
 
diff --git a/src/main.rs b/src/main.rs
index bad0bab..b0cf075 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -106,7 +106,6 @@ fn main() {
         }
 
         let data = InfoJson {
-          online: true,
           stops_realtime: stops_map.to_owned(),
           service_alerts_realtime: service_alerts.subway.to_owned(),
           routes_static: routes_static.to_owned(),
@@ -135,7 +134,6 @@ fn main() {
 
 #[derive(Debug, Clone, Serialize, Deserialize, Default)]
 struct InfoJson {
-  online: bool,
   stops_realtime: BTreeMap<String, Stop>,
   service_alerts_realtime: Vec<Alert>,
   routes_static: HashMap<String, Route>,