diff --git a/components/InfinityTester.vue b/components/InfinityTester.vue
index 68aec17..5451d64 100644
--- a/components/InfinityTester.vue
+++ b/components/InfinityTester.vue
@@ -1,35 +1,33 @@
 <template>
   <div>
-    <button @click="add"> add {{addIncrement}} </button>
-    <button @click="stepup"> add to the adding </button>
-    <div> big value = {{ bigvalue }} </div>
+    <button @click="add">add {{ addIncrement }}</button>
+    <button @click="stepup">add to the adding</button>
+    <div>big value = {{ bigvalue }}</div>
   </div>
 </template>
 
 <script>
-
 // import Decimal from "break_infinity.js";
 
 export default {
   name: 'InfinityTester',
-  data () {
+  data() {
     return {
       addIncrement: 0,
       bigvalue: 0,
     }
   },
   methods: {
-      add () {
-          // eslint-disable-next-line no-console
-          console.log("!")
-          this.bigvalue = 0;
-      },
+    add() {
+      // eslint-disable-next-line no-console
+      console.log('!')
+      this.bigvalue = 0
+    },
 
-     stepup () {
-        this.addIncrement += 100;
-
-     }
-  }
+    stepup() {
+      this.addIncrement += 100
+    },
+  },
 }
 </script>
 
diff --git a/components/JohnHacks.vue b/components/JohnHacks.vue
index af90c65..3d4c13d 100644
--- a/components/JohnHacks.vue
+++ b/components/JohnHacks.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-    <button @click="button_clicky()"> Click Me </button>
-    <div> clicks = {{ clicks }} </div>
+    <button @click="button_clicky()">Click Me</button>
+    <div>clicks = {{ clicks }}</div>
     <ul>
-        <li v-for="value in testvalues.slice(0, clicks)" :key="value">{{value}}</li>
+      <li v-for="value in testvalues.slice(0, clicks)" :key="value">
+        {{ value }}
+      </li>
     </ul>
   </div>
 </template>
@@ -12,7 +14,7 @@
 <script>
 export default {
   name: 'JohnHacks',
-  data () {
+  data() {
     return {
       msg: 'John copies files and makes a mess',
       testvalues: [1, 1, 2, 3, 5, 8, 13, 21],
@@ -20,12 +22,12 @@ export default {
     }
   },
   methods: {
-      button_clicky () {
-          // eslint-disable-next-line no-console
-          console.log("!")
-          this.clicks += 1
-      }
-  }
+    button_clicky() {
+      // eslint-disable-next-line no-console
+      console.log('!')
+      this.clicks += 1
+    },
+  },
 }
 </script>
 
diff --git a/components/TabNav.vue b/components/TabNav.vue
index ad5b6e5..477ee2a 100644
--- a/components/TabNav.vue
+++ b/components/TabNav.vue
@@ -1,59 +1,75 @@
 <template>
-<div class="bg-white grid place-content-center border-2 w-3/4 mx-auto">
+  <div class="bg-white grid place-content-center border-2 w-3/4 mx-auto">
     <nav class="flex flex-col sm:flex-row">
-        <button id="tab1" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500" @click="tabclicked(1)">
-            Tab 1
-        </button><button id="tab2" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" @click="tabclicked(2)">
-            Tab 2
-        </button><button id="tab3" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" @click="tabclicked(3)">
-            Tab 3
-        </button><button id="tab4" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" @click="tabclicked(4)">
-            Tab 4
-        </button>
+      <button
+        id="tab1"
+        class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500"
+        @click="tabclicked(1)"
+      >
+        Tab 1</button
+      ><button
+        id="tab2"
+        class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
+        @click="tabclicked(2)"
+      >
+        Tab 2</button
+      ><button
+        id="tab3"
+        class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
+        @click="tabclicked(3)"
+      >
+        Tab 3</button
+      ><button
+        id="tab4"
+        class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
+        @click="tabclicked(4)"
+      >
+        Tab 4
+      </button>
     </nav>
 
     <JohnHacks id="tabcontents1" class="tabshown" />
     <InfinityTester id="tabcontents2" class="tabhidden" />
     <JohnHacks id="tabcontents3" class="tabhidden" />
     <JohnHacks id="tabcontents4" class="tabhidden" />
-</div>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'TabNav',
-    data () {
-        return {}
-    },
-    methods: {
-        tabclicked (tabnumber) {
-            const tabSelected = "text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500"
-            const tabDeselected = "text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
-            console.log("clicked " + tabnumber)
-            for (let i = 1; i <= 4; i++) {
-                const tabE = document.getElementById("tab" + i)
-                const viewE = document.getElementById("tabcontents" + i)
-                if (i === tabnumber) {
-                    tabE.className = tabSelected
-                    viewE.className = "tabshown"
-                }
-                else {
-                    tabE.className = tabDeselected
-                    viewE.className = "tabhidden"
-                }
-            }
+  name: 'TabNav',
+  data() {
+    return {}
+  },
+  methods: {
+    tabclicked(tabnumber) {
+      const tabSelected =
+        'text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500'
+      const tabDeselected =
+        'text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none'
+      console.log('clicked ' + tabnumber)
+      for (let i = 1; i <= 4; i++) {
+        const tabE = document.getElementById('tab' + i)
+        const viewE = document.getElementById('tabcontents' + i)
+        if (i === tabnumber) {
+          tabE.className = tabSelected
+          viewE.className = 'tabshown'
+        } else {
+          tabE.className = tabDeselected
+          viewE.className = 'tabhidden'
         }
-    }
+      }
+    },
+  },
 }
 </script>
 
 <style scoped>
 .tabshown {
-    display: show;
+  display: show;
 }
 
 .tabhidden {
-    display: none;
+  display: none;
 }
 </style>
-
diff --git a/pages/index.vue b/pages/index.vue
index 863245f..67ae33c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,12 +1,8 @@
 <template>
   <div class="gridcontainer container mx-auto bg-red-500">
-    <header>
-        I'm a header. Check this box
-    </header>
-    <TabNav/>
-    <footer>
-        This is a game jam game.
-    </footer>
+    <header>I'm a header. Check this box</header>
+    <TabNav />
+    <footer>This is a game jam game.</footer>
   </div>
 </template>
 
@@ -18,19 +14,18 @@ export default {
 
 <style scoped>
 .gridcontainer {
-    display: grid | inline-grid;
+  display: grid;
 }
 
 header {
-    grid-row: 1;
+  grid-row: 1;
 }
 
 .gridcenter {
-    grid-row: 2;
+  grid-row: 2;
 }
 
 footer {
-    grid-row: 3;
+  grid-row: 3;
 }
-
 </style>