diff --git a/README.md b/README.md
index 788ab5a..7ddc17b 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,28 @@
-# đź“Š Project: Simple API 2
-
-### Goal: Display data returned from an api
-
-### How to submit your code for review:
-
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
- - (1 to 5 no 3) I completed the challenge
- - (1 to 5 no 3) I feel good about my code
- - Anything specific on which you want feedback!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+# MBTA Alerts API
+
+> View the MBTA's active alerts for all modes of transit.
+
+>
\ No newline at end of file
diff --git a/images/screenshot.png b/images/screenshot.png
new file mode 100644
index 0000000..b938654
Binary files /dev/null and b/images/screenshot.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..16b9a93
--- /dev/null
+++ b/index.html
@@ -0,0 +1,22 @@
+
+
+
+ MBTA Alerts
+ ${header}
+
+ Effect: ${service_effect}
+
+ (last updated: ${new Date(updated_at).toLocaleDateString()})
+
+
+ ${description ?? ""}
+ `;
+ ul.appendChild(li);
+ });
+
+ document.getElementById("container").appendChild(ul);
+ })
+ .catch((err) => console.error(err));
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..9674dfd
--- /dev/null
+++ b/style.css
@@ -0,0 +1,75 @@
+* {
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+ font-weight: unset;
+ font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+}
+
+:root {
+ --mbta-blue: rgba(44, 91, 146, 1);
+ --black: rgba(51, 51, 51, 1);
+ --white: rgba(246, 246, 246, 1);
+ --3d-effect: -webkit-linear-gradient(
+ top,
+ rgba(0, 0, 0, 0),
+ rgba(0, 0, 0, 0.15)
+ );
+}
+
+body {
+ max-width: 90vw;
+ margin: auto;
+ color: var(--black);
+ background-color: var(--white);
+ padding-bottom: 4em;
+}
+
+h1 {
+ background-color: var(--mbta-blue);
+ color: var(--white);
+ width: 100vw;
+ margin: 0 -5vw 1em;
+ padding: 1em 5vw;
+ background-image: var(--3d-effect);
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 0.25em;
+}
+
+h1 img {
+ height: 36px;
+}
+
+ul {
+ list-style: none;
+}
+
+li {
+ margin-bottom: 3em;
+}
+
+h3 {
+ font-weight: 600;
+ color: var(--mbta-blue);
+ font-size: 1.25rem;
+ margin-bottom: 8px;
+}
+
+p {
+ letter-spacing: 0.4px;
+}
+
+li > p + p {
+ font-style: italic;
+ margin: 8px 20px;
+ text-align: justify;
+}
+
+@media screen and (max-width: 768px) {
+ li {
+ margin-bottom: 2em;
+ }
+}
MBTA Alerts
+
+## Table of Contents
+
+1. [Tech Stack](#tech-stack)
+1. [Development](#development)
+ 1. [MBTA API](#mbta-api)
+ 1. [Notes](#notes)
+
+## Tech Stack
+
+- **HTML**
+- **CSS**
+- **JavaScript**
+
+## Development
+
+### MBTA API
+
+- No API key required. Open the app in your browser and instantly see active MBTA alerts!
+
+### Notes
+
+Visit the official documentation at https://www.mbta.com/developers/v3-api and https://api-v3.mbta.com/docs/swagger/index.html#/Alert/ApiWeb_AlertController_index for more information on API use, copyright, and rate limitations.
diff --git a/images/logo.svg b/images/logo.svg
new file mode 100644
index 0000000..0613fe8
--- /dev/null
+++ b/images/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/images/screenshot.png b/images/screenshot.png
new file mode 100644
index 0000000..b938654
Binary files /dev/null and b/images/screenshot.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..16b9a93
--- /dev/null
+++ b/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+