diff --git a/index.js b/index.js
index 9270e8c..4dc2f5b 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,48 @@
+self.addEventListener('fetch', function(event) {
+  event.respondWith(
+      caches.match(event.request)
+          .then(function(response) {
+              // Cache hit - return response
+              if (response) {
+                  return response;
+              }
+
+              // IMPORTANT: Clone the request. A request is a stream and
+              // can only be consumed once. Since we are consuming this
+              // once by cache and once by the browser for fetch, we need
+              // to clone the response.
+              var fetchRequest = event.request.clone();
+
+              return fetch(fetchRequest).then(
+                  function(response) {
+                      // Check if we received a valid response
+                      if(!response || response.status !== 200 || response.type !== 'basic') {
+                          return response;
+                      }
+
+                      // IMPORTANT: Clone the response. A response is a stream
+                      // and because we want the browser to consume the response
+                      // as well as the cache consuming the response, we need
+                      // to clone it so we have two streams.
+                      var responseToCache = response.clone();
+
+                      caches.open(CACHE_NAME)
+                          .then(function(cache) {
+                              cache.put(event.request, responseToCache);
+                          });
+
+                      return response;
+                  }
+              );
+          })
+          .catch(function() {
+              // If both the network and cache fail, show a generic fallback:
+              return caches.match('/fallback.html');
+              // Alternatively, you could return a custom error response here
+          })
+  );
+});
+
 const db = new Dexie("Team Tracking App");
 db.version(1).stores({ teams: "++id, teamname, globalid, teamnumber, teamschool, alliancescore, moreinfo, startingpos, Leaveszone, scores1amp, scores1speaker, picksup, scores2amp, scores2speaker, preferredScoringMethod, preferredIntakeMethod, prefintake, spotlight, trap, alone, hangsWithAnother, attemptsSpotlight, coop" });
 
diff --git a/pages/teamdetails.html b/pages/teamdetails.html
index 6352451..cba60af 100644
--- a/pages/teamdetails.html
+++ b/pages/teamdetails.html
@@ -90,7 +90,7 @@ <h2> Abilities </h2><br>
             <input type="checkbox" id="scores2speaker" name="scores2speaker" value="scores2speaker">
             <label for="action4.1"> Scores 2nd in speaker</label><br>
             <br>
-            
+
     <!-- Teleop Survey-->
     <p>Preferred scoring method:</p>
     <input type="radio" id="amp" name="score" value="amp">
diff --git a/pages/teamdetails.js b/pages/teamdetails.js
index 89e209f..fa4b479 100644
--- a/pages/teamdetails.js
+++ b/pages/teamdetails.js
@@ -1,3 +1,49 @@
+self.addEventListener('fetch', function(event) {
+    event.respondWith(
+        caches.match(event.request)
+            .then(function(response) {
+                // Cache hit - return response
+                if (response) {
+                    return response;
+                }
+
+                // IMPORTANT: Clone the request. A request is a stream and
+                // can only be consumed once. Since we are consuming this
+                // once by cache and once by the browser for fetch, we need
+                // to clone the response.
+                var fetchRequest = event.request.clone();
+
+                return fetch(fetchRequest).then(
+                    function(response) {
+                        // Check if we received a valid response
+                        if(!response || response.status !== 200 || response.type !== 'basic') {
+                            return response;
+                        }
+
+                        // IMPORTANT: Clone the response. A response is a stream
+                        // and because we want the browser to consume the response
+                        // as well as the cache consuming the response, we need
+                        // to clone it so we have two streams.
+                        var responseToCache = response.clone();
+
+                        caches.open(CACHE_NAME)
+                            .then(function(cache) {
+                                cache.put(event.request, responseToCache);
+                            });
+
+                        return response;
+                    }
+                );
+            })
+            .catch(function() {
+                // If both the network and cache fail, show a generic fallback:
+                return caches.match('/fallback.html');
+                // Alternatively, you could return a custom error response here
+            })
+    );
+});
+
+
 // Global Dexie database initialization
 const db = new Dexie("Team Tracking App");
 db.version(1).stores({ teams: "++id, teamname, globalid, teamnumber, teamschool, alliancescore, moreinfo, startingpos, Leaveszone, scores1amp, scores1speaker, picksup, scores2amp, scores2speaker, preferredScoringMethod, preferredIntakeMethod, prefintake, spotlight, trap, alone, hangsWithAnother, attemptsSpotlight, coop" });