diff --git a/addPet/index.html b/addPet/index.html
index 4a29915..97b4a0c 100644
--- a/addPet/index.html
+++ b/addPet/index.html
@@ -4,10 +4,67 @@
 <head>
   <meta charset="UTF-8">
   <title>GoodBoi Care - Add Pets</title>
+  <meta name="viewport">
+  <meta name="description" content="Join other pet lovers in managing your pet's health and happiness with ease. Track their daily activities, manage their medication and feeding records, set reminders for important events, and share this information with other caretakers—all in one place.">
+  <link rel="icon" type="image/x-icon" href="/public/images/favicon.ico">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Nunito+Sans:ital,opsz,wght@1,6..12,700&family=Nunito:wght@700&family=Roboto:wght@300;900&display=swap" rel="stylesheet">
+  <style>
+    body { margin: 0px; min-width: 1200px; }
+    header { height: 100px; padding: 0px 20px; display: flex; flex: 1; flex-direction: row; align-items: center; background-color: #fff; position: sticky;}
+    header > h1 { margin-left: 40px;}
+    h1, h2, h3 { font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal;}
+    p, a, span { font-family: "Lato", sans-serif; font-weight: 400; font-style: normal; }
+    a { display: inline-block; width: 100px; margin: 0px 20px; text-decoration: none; color: #131316 }
+    .flex-space { flex: 1; }
+    .hero { padding: 0px 20px; }
+    .hero__contents-wrapper { background-color: #DDDAE7; border-radius: 64px; display: flex; flex-direction: row; }
+    .hero__contents-text { display: flex; flex: 6; flex-direction: column; min-width: 500px; padding-left: 40px; }
+    .hero__contents-text > h2 { font-size: 74px; margin-bottom: 0px; }
+    .hero__contents-text > p { display: flex; max-width: 680px; font-size: 22px}
+    .hero__contents-image { display: flex; flex: 4; padding-right: 20px;}
+    .hero__contents-image > img { margin-top: 60px; margin-bottom: 40px;}
+    .hero__contents-buttons { display: flex; flex-direction: row; row-gap: 40px;}
+    .hero__contents-buttons > a { width: 200px; margin: 0px; margin-right: 20px }
+  </style>
 </head>
 
 <body>
-  <p>To be implemented</p>
+  <!-- HEADER SECTION -->
+  <header>
+    <img src="/public/images/icon.png" alt="App Icon" width="65px" height="65px" />
+    <h1>GoodBoi Care</h1>
+    <div class="flex-space"></div>
+    <a href="https://goodboicare.com/terms">Terms of Use</a>
+    <a href="https://goodboicare.com/privacy">Privacy Policy</a>
+  </header>
+
+  <!-- MAIN SECTION -->
+  <main>
+    <div role="group" aria-label="Caring for your pets, simplified." class="hero">
+      <div class="hero__contents-wrapper">
+        <div class="hero__contents-text">
+          <h2>Caring for Your Pets, Simplified.</h2>
+          <p>Join other pet lovers in managing your pet's health and happiness with ease. Track their daily activities, manage their medication and feeding records, set reminders for important events, and share this information with other caretakers—all in one place.</p>
+          <div class="hero__contents-buttons">
+            <a href="#" aria-label="Download from App Store">
+              <img src="/public/images/app_store_button.png" width="200px" alt="App Store image button" />
+            </a>
+            <a href="#" aria-label="Download from Google Play Store">
+              <img src="/public/images/play_store_button.png" width="200px" alt="Play Store image button" />
+            </a>
+          </div>
+        </div>
+        <div class="hero__contents-image">
+          <img src="/public/images/hero_image.png" height="500px" alt="Hero image with app screenshots" />
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <!-- FOOTER SECTION -->
+  <footer></footer>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/tasks/index.html b/tasks/index.html
index 503a7df..961a8c1 100644
--- a/tasks/index.html
+++ b/tasks/index.html
@@ -4,10 +4,67 @@
 <head>
   <meta charset="UTF-8">
   <title>GoodBoi Care - Tasks</title>
+  <meta name="viewport">
+  <meta name="description" content="Join other pet lovers in managing your pet's health and happiness with ease. Track their daily activities, manage their medication and feeding records, set reminders for important events, and share this information with other caretakers—all in one place.">
+  <link rel="icon" type="image/x-icon" href="/public/images/favicon.ico">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Lato&family=Nunito+Sans:ital,opsz,wght@1,6..12,700&family=Nunito:wght@700&family=Roboto:wght@300;900&display=swap" rel="stylesheet">
+  <style>
+    body { margin: 0px; min-width: 1200px; }
+    header { height: 100px; padding: 0px 20px; display: flex; flex: 1; flex-direction: row; align-items: center; background-color: #fff; position: sticky;}
+    header > h1 { margin-left: 40px;}
+    h1, h2, h3 { font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal;}
+    p, a, span { font-family: "Lato", sans-serif; font-weight: 400; font-style: normal; }
+    a { display: inline-block; width: 100px; margin: 0px 20px; text-decoration: none; color: #131316 }
+    .flex-space { flex: 1; }
+    .hero { padding: 0px 20px; }
+    .hero__contents-wrapper { background-color: #DDDAE7; border-radius: 64px; display: flex; flex-direction: row; }
+    .hero__contents-text { display: flex; flex: 6; flex-direction: column; min-width: 500px; padding-left: 40px; }
+    .hero__contents-text > h2 { font-size: 74px; margin-bottom: 0px; }
+    .hero__contents-text > p { display: flex; max-width: 680px; font-size: 22px}
+    .hero__contents-image { display: flex; flex: 4; padding-right: 20px;}
+    .hero__contents-image > img { margin-top: 60px; margin-bottom: 40px;}
+    .hero__contents-buttons { display: flex; flex-direction: row; row-gap: 40px;}
+    .hero__contents-buttons > a { width: 200px; margin: 0px; margin-right: 20px }
+  </style>
 </head>
 
 <body>
-  <p>To be implemented</p>
+  <!-- HEADER SECTION -->
+  <header>
+    <img src="/public/images/icon.png" alt="App Icon" width="65px" height="65px" />
+    <h1>GoodBoi Care</h1>
+    <div class="flex-space"></div>
+    <a href="https://goodboicare.com/terms">Terms of Use</a>
+    <a href="https://goodboicare.com/privacy">Privacy Policy</a>
+  </header>
+
+  <!-- MAIN SECTION -->
+  <main>
+    <div role="group" aria-label="Caring for your pets, simplified." class="hero">
+      <div class="hero__contents-wrapper">
+        <div class="hero__contents-text">
+          <h2>Caring for Your Pets, Simplified.</h2>
+          <p>Join other pet lovers in managing your pet's health and happiness with ease. Track their daily activities, manage their medication and feeding records, set reminders for important events, and share this information with other caretakers—all in one place.</p>
+          <div class="hero__contents-buttons">
+            <a href="#" aria-label="Download from App Store">
+              <img src="/public/images/app_store_button.png" width="200px" alt="App Store image button" />
+            </a>
+            <a href="#" aria-label="Download from Google Play Store">
+              <img src="/public/images/play_store_button.png" width="200px" alt="Play Store image button" />
+            </a>
+          </div>
+        </div>
+        <div class="hero__contents-image">
+          <img src="/public/images/hero_image.png" height="500px" alt="Hero image with app screenshots" />
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <!-- FOOTER SECTION -->
+  <footer></footer>
 </body>
 
 </html>
\ No newline at end of file
