diff --git a/MTG/index.html b/MTG/index.html
index 74547aa..af85791 100644
--- a/MTG/index.html
+++ b/MTG/index.html
@@ -18,6 +18,7 @@
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" type="text/css" href="/menu/menu.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="manifest" href="mainfest.json" />
 
 </head>
 <body>
@@ -26,6 +27,22 @@
         <div id="nav_menu">
    </div>    
    </nav>
+   <script>
+    if('serviceWorker' in navigator) {
+        window.addEventListiner('load', () => {
+            navigator.serviceWorker.register('sw.js')
+                .then((registration) => { 
+                    console.log(`service worker registered succesfully ${registration}`) 
+                })
+                .catch((err) => {
+                    console.log(`Error registring ${err}`) 
+                })
+        })
+    } else {
+        console.log(`Service worker is not supported in this browser.`)
+    }
+</script>
+
    <div id="buttonWrapper">
                                                 <div onclick="removePlayer()" id="removePlayer" class="buttons"><i class="fas fa-minus-circle"></i></div>
                                             <div onclick="reset()" id="reset" class="buttons"><i class="fas fa-undo-alt"></i><span class="buttonText"></span></div>
diff --git a/MTG/manifest.json b/MTG/manifest.json
new file mode 100644
index 0000000..b33c0cf
--- /dev/null
+++ b/MTG/manifest.json
@@ -0,0 +1,25 @@
+{
+    "short_name": "MTG Life Counter",
+    "name": "MTG Life Counter",
+    "icons": [
+        {
+            "src": "icons/favicon.ico",
+            "sizes": "64x64",
+            "type": "image/x-icon"
+        },
+        {
+            "src": "icons/android-chrome-192x192.png",
+            "type": "image/png",
+            "sizes": "192x192"
+        },
+        {
+            "src": "icons/android-chrome-512x512.png",
+            "type": "image/png",
+            "sizes": "512x512"
+        }
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
+}
diff --git a/MTG/style.css b/MTG/style.css
index db34ea4..da17ad9 100644
--- a/MTG/style.css
+++ b/MTG/style.css
@@ -16,26 +16,30 @@ background: radial-gradient(circle, #792f22 0%, #4f644f 47%, rgb(108, 127, 131)
   height: 100vh
 
 }
+html{
+  height: 100vh;
+}
 #full{
   color:rgb(165, 162, 162);
 
 }
 main {
   display: flex;
+  flex-shrink: 1;
   justify-content: space-evenly;
   font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva,
     Verdana, sans-serif;
   flex-wrap: wrap;
   width: 100vw;
-
+ height: 100vh;
   position: relative;
   margin-top: 70px;
 }
 
 .name {
-  font-size: 3em;
+  font-size: 2rem;
   display: flex;
-  margin: 0 0 20px;
+  margin: 0 0 10px;
   padding: 10px 0;
   opacity: 0.9;
   background-color: #eee;
@@ -57,7 +61,7 @@ main {
   text-shadow: 0 1px 0 #eee;
   background-color: #eee;
   width: auto;
-  min-height: 75px;
+  /* min-height: px; */
   justify-content: center;
   align-content: center;
 }
@@ -83,13 +87,16 @@ main {
   /* padding: 10px 0; */
   text-shadow: 0 1px 0 #eee;
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  /* height:250px; */
+  /* height:2rem; */
+  height: calc(100%-35px);
   min-width: auto;
   font-size: 3em;
   user-select: none;
-  height:fit-content
+  /* margin-bottom: -50px; */
+
 }
 
 .life div {
@@ -102,6 +109,7 @@ main {
   flex-direction: column;
   flex-wrap: wrap;
   margin: min(1rem, 1rem);
+  margin-bottom: -100px;
   /* max-width: max-content; */
   width: clamp(min-content, max-content, max-content+1rem);
   /* max-width: 25%; */
diff --git a/MTG/sw.js b/MTG/sw.js
new file mode 100644
index 0000000..dd8de10
--- /dev/null
+++ b/MTG/sw.js
@@ -0,0 +1,12 @@
+self.addEventListener('install', () => {
+    console.log(`installing service worker`);
+})
+
+self.addEventListener('activate', () => {
+    console.log(`activating service worker`);
+})
+
+self.addEventListener('fetch', event => {
+    console.log(`fetching...
+    ${event.request.url}`);
+})
