diff --git a/Mars Web App/PIA25214.png b/Mars Web App/PIA25214.png
new file mode 100644
index 0000000..4fe123a
Binary files /dev/null and b/Mars Web App/PIA25214.png differ
diff --git a/Mars Web App/index.html b/Mars Web App/index.html
new file mode 100644
index 0000000..f043025
--- /dev/null
+++ b/Mars Web App/index.html	
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mars Weather</title>
+    <link rel="stylesheet" href="./style.css">
+    <script src="./script.js" defer></script>
+</head>
+
+
+
+<body>
+
+
+
+    <div class= "card">
+        <div class = "weather">
+            <h2 class = "city">Date on Mars</h2>
+            <h1 class="Day">Sol 
+                <span cursol></span>
+            </h1>
+        </div>
+    </div>
+
+    <div class= "card">
+        <div class = "weather">
+            <h2 class = "city">Weather on Mars</h2>
+            <h1 class="Day">High: --</div>
+            <h1 class="Day">Low: --</div>
+        </div>
+    </div>
+
+    <div class= "card">
+        <div class = "weather">
+            <h2 class = "city">Wind Speed on Mars</h2>
+            <h1 class="Day">--</div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/Mars Web App/script.js b/Mars Web App/script.js
new file mode 100644
index 0000000..b39f713
--- /dev/null
+++ b/Mars Web App/script.js	
@@ -0,0 +1,37 @@
+const API_KEY = ''
+const API_URL = 'https://api.nasa.gov/insight_weather/?api_key=DEMO_KEY&feedtype=json&ver=1.0'
+
+const cursolelem = document.querySelector('[cursol]')
+
+let selectedSol
+getWeather().then(sols => {
+    selectedSol = 0
+    displaySol(sols)
+})
+
+function displaySol(sols){
+    const selected = sols[selectedSol]
+    cursolelem.innerText = selected.sol // accessing the value
+}
+
+function getWeather() {
+    return fetch(API_URL)
+        .then(res => res.json())
+        .then(data => {
+            const {
+                sol_keys,
+                validity_checks,
+                ...solData
+            } = data
+            return Object.entries(validity_checks).map(([sol,data]) => {
+                return {
+                    sol: sol, 
+                    //maxTemp: data.AT.mx,
+                    //minTemp: data.AT.mn,
+                    //windSpeed: data.HWS.av,
+                }
+            })
+            
+        })
+
+}
\ No newline at end of file
diff --git a/Mars Web App/style.css b/Mars Web App/style.css
new file mode 100644
index 0000000..313b209
--- /dev/null
+++ b/Mars Web App/style.css	
@@ -0,0 +1,55 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    font-family: 'Open Sans', sans-serif;
+    background: #222;
+    background-image: url('./PIA25214.png');
+    background-size: cover;
+    background-repeat: no-repeat;
+    height: 100vh;
+}
+
+.card {
+    background: #eaeaead0;
+    color:dimgrey;
+    padding: 2em;
+    border-radius: 30px;
+    width: 100%;
+    max-width: 420px;
+    margin: 1em;
+    
+}
+
+
+button {
+    margin: .5em;
+    border-radius: 50%;
+    border: none;
+    height: 40px;
+    width: 46px;
+    outline: none;
+    background: white;
+    color: dimgray;
+    cursor: pointer;
+    transition: 0.2s ease-in-out;
+}
+
+
+button:hover {
+    background: #bebebebe;
+}
+
+h1.temp {
+    margin: 0;
+    margin-bottom: .4em;
+}
+
+
+
