diff --git a/README.md b/README.md
index 604ef22..0720d9c 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,8 @@
 # jakeswestcoast
 Website HTML for www.jakeswestcoast.com.
-</br>
-Note: `data/greyscale_banner.gif` is too large for Github. Gonna have to store it on egn.
+
+## Running
+```
+docker compose down && docker system prune -af && docker compose build && docker compose up -d && docker logs -f jakeswestcoast
+```
+
diff --git a/static/index.css b/static/index.css
index ded463c..5e99346 100644
--- a/static/index.css
+++ b/static/index.css
@@ -1,6 +1,62 @@
-/****************************************************
- * index.css
- * @author Jake Runyan
- * @desc Main CSS
- *//*************************************************/
- 
+/* Fullscreen video background */
+.fullscreen-video-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100vh; /* Fullscreen height */
+    overflow: hidden;
+}
+
+.fullscreen-video-wrapper iframe {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100vw;
+    height: 100vh;
+    transform: translate(-50%, -50%);
+    object-fit: cover; /* Ensures the video covers the entire screen */
+    z-index: -1; /* Puts the iframe behind the text */
+}
+
+/* Centered overlay text */
+.overlay-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: #f0f0f0;
+    z-index: 1; /* Ensures the text is on top of the video */
+}
+
+.titletext {
+    font-size: 8vw;
+    font-weight: bolder;
+}
+
+.subtext {
+    font-size: 4vw;
+    font-weight: bolder;
+}
+
+/* Responsive styling */
+@media (max-width: 768px) {
+    .titletext {
+        font-size: 10vw;
+    }
+
+    .subtext {
+        font-size: 5vw;
+    }
+}
+
+/* Scrollable content below the fullscreen section */
+#about {
+    padding-top: 100vh; /* Ensures content starts below the fullscreen section */
+}
+
+/* Make images responsive */
+.responsive-img {
+    max-width: 100%;
+    height: auto;
+}
+
diff --git a/templates/index.html b/templates/index.html
index f98df3e..e8a0c27 100755
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,30 +1,35 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Jake's West Coast</title>
-    <link rel="stylesheet" href="css/index.css">
     <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="static/index.css">
   </head>
   <body>
-<!--    <iframe class="imgur-embed" width="1920" height="1080" frameborder="0" src="https://i.imgur.com/S7p301A.gifv#embed"></iframe>-->
-    <iframe src="https://giphy.com/embed/F86jaFeIpE55nvF8M5" width="1920" height="1080" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
-    <div class="textoutline w3-display-middle w3-padding-large w3-border w3-wide w3-text-light-grey w3-center" style="white-space:nowrap;">
-      <h1 class="titletext w3-xxxlarge" style="font-weight:bolder;">Jake's West Coast</h1>
-      <h3 class="subtext" style="font-weight:bolder;">My Mountaineering Diary!</h3>
+    <!-- Fullscreen Video Background -->
+    <div class="fullscreen-video-wrapper">
+      <iframe src="https://giphy.com/embed/F86jaFeIpE55nvF8M5" frameborder="0" class="giphy-embed" allowfullscreen></iframe>
+      <div class="overlay-text">
+        <h1 class="titletext">Jake's West Coast</h1>
+        <h3 class="subtext">My Mountaineering Diary!</h3>
+      </div>
     </div>
+
+    <!-- Scrollable content below -->
     <div class="w3-black" id="about">
       <div class="w3-container w3-content w3-padding-64" style="max-width:800px">
         <h2 class="w3-wide w3-center">Who Am I?</h2>
-        <div class="w3-row-padding w3-padding-32 w3-light-grey w3-round-large" style="margin:0 -16px">
+        <div class="w3-row-padding w3-padding-32 w3-light-grey w3-round-large">
           <div class="w3-third w3-margin-bottom">
-            <img src="data/jakeswestcoast_warm_logo_square.png" style="width:100%" class="w3-hover-opacity w3-round-large">
+            <img src="data/jakeswestcoast_warm_logo_square.png" class="responsive-img w3-hover-opacity w3-round-large">
           </div>
           <div class="w3-twothird w3-margin-bottom">
             <div class="w3-container w3-light-grey w3-round-large">
-              <p>I'm Jake, a rider from the Bay Area. I enjoy being in the mountains and riding new trails! Catch me riding in the Santa Cruz mountains on the weekend. </p>
-              <p>Check out my social media and Youtube to see what I've been riding! Links are below. </p>
+              <p>I'm Jake, a rider from the Bay Area. I enjoy being in the mountains and riding new trails!</p>
+              <p>Check out my social media and Youtube to see what I've been riding! Links are below.</p>
               <button class="w3-round-large w3-button w3-black w3-margin-bottom fa fa-youtube" onclick=" window.open('https://www.youtube.com/channel/UCRuRbPZ67qkJvGyxbNUHj4w');"></button>
               <button class="w3-round-large w3-button w3-black w3-margin-bottom fa fa-instagram" onclick=" window.open('https://www.instagram.com/jakeswestcoast/');"></button>
             </div>
@@ -33,5 +38,5 @@
       </div>
     </div>
   </body>
-
 </html>
+
