diff --git a/public/items/blessingPowerItems.json b/public/items/blessingPowerItems.json
index 51aad0d..dfd1a23 100644
--- a/public/items/blessingPowerItems.json
+++ b/public/items/blessingPowerItems.json
@@ -3,66 +3,77 @@
       "iconURL": "",
       "itemName": "Flower Necklace",
       "minItemPower": 1,
-      "maxItemPower": 1
+      "maxItemPower": 1,
+      "rarity": 2
   },
   "facb5102-34d8-4813-ab06-ac2b8e9f3ed9": {
       "iconURL": "",
       "itemName": "Jewel Necklace",
       "minItemPower": 2,
-      "maxItemPower": 2
+      "maxItemPower": 2,
+      "rarity": 3
   },
   "ddd29671-ca7f-4132-8784-80346e154059": {
       "iconURL": "",
       "itemName": "Blessing Power Gachapon",
       "minItemPower": 10,
-      "maxItemPower": 30
+      "maxItemPower": 30,
+      "rarity": 4
   },
   "c1e029ff-b82c-48bd-a1f1-ea6291fad948": {
       "iconURL": "",
       "itemName": "Mandrake",
       "minItemPower": 1,
-      "maxItemPower": 3
+      "maxItemPower": 3,
+      "rarity": 1
   },
   "52cd4a48-ff8a-4493-8030-b4e7754cd227": {
       "iconURL": "",
       "itemName": "Muddled Mushroom",
       "minItemPower": 2,
-      "maxItemPower": 5
+      "maxItemPower": 5,
+      "rarity": 1
   },
   "636b7384-1389-4012-933c-9063baa7a38d": {
       "iconURL": "",
       "itemName": "Grassy Bunny",
       "minItemPower": 3,
-      "maxItemPower": 6
+      "maxItemPower": 6,
+      "rarity": 2
   },
   "2563b5f8-8fd5-4795-af86-33200605cf3e": {
       "iconURL": "",
       "itemName": "Chirping Chick",
       "minItemPower": 4,
-      "maxItemPower": 10
+      "maxItemPower": 10,
+      "rarity": 2
   },
   "54e9bcf5-f1a5-4350-a75d-88af02b4fc13": {
       "iconURL": "",
       "itemName": "Gorgeous Horse",
       "minItemPower": 5,
-      "maxItemPower": 16
+      "maxItemPower": 16,
+      "rarity": 3
   },
   "e736d2b9-a8ec-4a4e-a721-24880c8a6038": {
       "iconURL": "",
       "itemName": "Blooming Fox",
       "minItemPower": 7,
-      "maxItemPower": 24
+      "maxItemPower": 24,
+      "rarity": 3
   },
   "9fb7f9ba-e7ed-4e99-b161-386f48299443": {
       "iconURL": "",
       "itemName": "Frozen Dragon",
       "minItemPower": 10,
-      "maxItemPower": 32
+      "maxItemPower": 32,
+      "rarity": 4
   },
   "e2472929-1218-4cd6-a73b-b783c17bbc31": {
       "iconURL": "",
       "itemName": "Flaming Lion",
       "minItemPower": 14,
-      "maxItemPower": 48
+      "maxItemPower": 48,
+      "rarity": 4
   }
 }
\ No newline at end of file
diff --git a/public/items/fellowPowerItems.json b/public/items/fellowPowerItems.json
index 4c41ca8..eddd7a9 100644
--- a/public/items/fellowPowerItems.json
+++ b/public/items/fellowPowerItems.json
@@ -1,92 +1,163 @@
 {
-    "1f7aff96-030d-4007-9a70-82db7a8be3e3": {
-        "iconURL": "",
-        "itemName": "Contestant Portrait",
-        "minItemPower": 15000,
-        "maxItemPower": 40000
-    },
-    "2006c92e-8e32-4c9f-a913-3b2d1ed8dea0": {
-        "iconURL": "",
-        "itemName": "Potion of Bravery",
-        "minItemPower": 800,
-        "maxItemPower": 800
-    },
-    "30d05d98-a615-4e3a-94da-8aa6e4ad03a9": {
-        "iconURL": "",
-        "itemName": "Basic Elixir",
-        "minItemPower": 3000,
-        "maxItemPower": 3000
-    },
-    "3eccaaac-5afe-415a-ac8f-55df213cf015": {
-        "iconURL": "",
-        "itemName": "Potion of Freedom",
-        "minItemPower": 800,
-        "maxItemPower": 800
-    },
-    "68a7a68a-2123-4a8e-b64d-9dbdf0637521": {
-        "iconURL": "",
-        "itemName": "Potion of Erudition",
-        "minItemPower": 800,
-        "maxItemPower": 800
-    },
-    "7075da2f-a617-42a1-b142-fe2401ad87ec": {
-        "iconURL": "",
-        "itemName": "Potion of Inspiration",
-        "minItemPower": 800,
-        "maxItemPower": 800
-    },
-    "762a2775-ca50-4c13-8797-2f03b045ed10": {
-        "iconURL": "",
-        "itemName": "Red Contestant Portrait",
-        "minItemPower": 10000,
-        "maxItemPower": 25000
-    },
-    "9c95396d-e5d8-4f7d-9d37-1469e7dc0ee1": {
-        "iconURL": "",
-        "itemName": "Yellow Signed Towel",
-        "minItemPower": 4500,
-        "maxItemPower": 10000
-    },
-    "a351a27b-765b-46b5-95fc-99c47e63176d": {
-        "iconURL": "",
-        "itemName": "Potion of Diligence",
-        "minItemPower": 800,
-        "maxItemPower": 800
-    },
-    "a44b763b-833b-49d0-91d6-e5fcb8c6ce7c": {
-        "iconURL": "",
-        "itemName": "Yellow Signed Handkerchief",
-        "minItemPower": 2000,
-        "maxItemPower": 5000
-    },
-    "bc5fc5c6-65e1-41c8-822d-d6e06ec0894e": {
-        "iconURL": "",
-        "itemName": "Advanced Elixir",
-        "minItemPower": 30000,
-        "maxItemPower": 30000
-    },
-    "cd50f711-36a4-4b3b-b4ef-84b52c8a18e2": {
-        "iconURL": "",
-        "itemName": "Champion's Statue",
-        "minItemPower": 30000,
-        "maxItemPower": 80000
-    },
-    "ce522371-80bd-4266-b473-8f5ace7099c7": {
-        "iconURL": "",
-        "itemName": "Red Signed Handkerchief",
-        "minItemPower": 3000,
-        "maxItemPower": 8000
-    },
-    "d7d705d3-9562-4f03-98d8-3b0da81fcf47": {
-        "iconURL": "",
-        "itemName": "Champion's Belt",
-        "minItemPower": 20000,
-        "maxItemPower": 50000
-    },
-    "ed1663c2-aff0-41b4-b5ed-7f86463c1d69": {
-        "iconURL": "",
-        "itemName": "Red Signed Towel",
-        "minItemPower": 6000,
-        "maxItemPower": 15000
-    }
-}
\ No newline at end of file
+  "1f7aff96-030d-4007-9a70-82db7a8be3e3": {
+    "iconURL": "",
+    "itemName": "Contestant Portrait (Wolf)",
+    "minItemPower": 15000,
+    "maxItemPower": 40000,
+    "rarity": 3
+  },
+  "2006c92e-8e32-4c9f-a913-3b2d1ed8dea0": {
+    "iconURL": "",
+    "itemName": "Potion of Bravery",
+    "minItemPower": 800,
+    "maxItemPower": 800,
+    "rarity": 3
+  },
+  "30d05d98-a615-4e3a-94da-8aa6e4ad03a9": {
+    "iconURL": "",
+    "itemName": "Basic Elixir",
+    "minItemPower": 3000,
+    "maxItemPower": 3000,
+    "rarity": 3
+  },
+  "3eccaaac-5afe-415a-ac8f-55df213cf015": {
+    "iconURL": "",
+    "itemName": "Potion of Freedom",
+    "minItemPower": 800,
+    "maxItemPower": 800,
+    "rarity": 3
+  },
+  "68a7a68a-2123-4a8e-b64d-9dbdf0637521": {
+    "iconURL": "",
+    "itemName": "Potion of Erudition",
+    "minItemPower": 800,
+    "maxItemPower": 800,
+    "rarity": 3
+  },
+  "7075da2f-a617-42a1-b142-fe2401ad87ec": {
+    "iconURL": "",
+    "itemName": "Potion of Inspiration",
+    "minItemPower": 800,
+    "maxItemPower": 800,
+    "rarity": 3
+  },
+  "762a2775-ca50-4c13-8797-2f03b045ed10": {
+    "iconURL": "",
+    "itemName": "Contestant Portrait (Lion)",
+    "minItemPower": 10000,
+    "maxItemPower": 25000,
+    "rarity": 3
+  },
+  "9c95396d-e5d8-4f7d-9d37-1469e7dc0ee1": {
+    "iconURL": "",
+    "itemName": "Signed Towel (Yellow)",
+    "minItemPower": 4500,
+    "maxItemPower": 10000,
+    "rarity": 2
+  },
+  "a351a27b-765b-46b5-95fc-99c47e63176d": {
+    "iconURL": "",
+    "itemName": "Potion of Diligence",
+    "minItemPower": 800,
+    "maxItemPower": 800,
+    "rarity": 3
+  },
+  "a44b763b-833b-49d0-91d6-e5fcb8c6ce7c": {
+    "iconURL": "",
+    "itemName": "Signed Handkerchief (Yellow)",
+    "minItemPower": 2000,
+    "maxItemPower": 5000,
+    "rarity": 1
+  },
+  "bc5fc5c6-65e1-41c8-822d-d6e06ec0894e": {
+    "iconURL": "",
+    "itemName": "Advanced Elixir",
+    "minItemPower": 30000,
+    "maxItemPower": 30000,
+    "rarity": 4
+  },
+  "cd50f711-36a4-4b3b-b4ef-84b52c8a18e2": {
+    "iconURL": "",
+    "itemName": "Champion's Statue",
+    "minItemPower": 30000,
+    "maxItemPower": 80000,
+    "rarity": 4
+  },
+  "ce522371-80bd-4266-b473-8f5ace7099c7": {
+    "iconURL": "",
+    "itemName": "Signed Handkerchief (Red)",
+    "minItemPower": 3000,
+    "maxItemPower": 8000,
+    "rarity": 1
+  },
+  "d7d705d3-9562-4f03-98d8-3b0da81fcf47": {
+    "iconURL": "",
+    "itemName": "Champion's Belt",
+    "minItemPower": 20000,
+    "maxItemPower": 50000,
+    "rarity": 4
+  },
+  "ed1663c2-aff0-41b4-b5ed-7f86463c1d69": {
+    "iconURL": "",
+    "itemName": "Signed Towel (Red)",
+    "minItemPower": 6000,
+    "maxItemPower": 15000,
+    "rarity": 2
+  },
+  "472d229e-3541-4115-8104-53af579f24a4": {
+    "iconURL": "",
+    "itemName": "Demonic Exercise Bike",
+    "minItemPower": 20000,
+    "maxItemPower": 50000,
+    "rarity": 4
+  },
+  "6214eeeb-c77b-415c-a055-6d15b04ca026": {
+    "iconURL": "",
+    "itemName": "Steel Barbell",
+    "minItemPower": 15000,
+    "maxItemPower": 40000,
+    "rarity": 3
+  },
+  "732f16e3-6de7-4bc7-af77-9cdbaf68b695": {
+    "iconURL": "",
+    "itemName": "Pac-Ball",
+    "minItemPower": 4500,
+    "maxItemPower": 10000,
+    "rarity": 2
+  },
+  "a64b4819-5b32-41c5-8fe0-293ea8695a0c": {
+    "iconURL": "",
+    "itemName": "Stone Dumbbell",
+    "minItemPower": 3000,
+    "maxItemPower": 8000,
+    "rarity": 1
+  },
+  "b282b9cb-1802-4563-88a1-e7e267a0bcd4": {
+    "iconURL": "",
+    "itemName": "Rock Kettlebell",
+    "minItemPower": 6000,
+    "maxItemPower": 15000,
+    "rarity": 2
+  },
+  "bf1611c0-ddec-4ad8-8299-a2e19818186f": {
+    "iconURL": "",
+    "itemName": "Screaming Punching Bag",
+    "minItemPower": 30000,
+    "maxItemPower": 80000,
+    "rarity": 4
+  },
+  "daca4964-69c4-4167-b7bf-2e8eb49a8f1b": {
+    "iconURL": "",
+    "itemName": "Ivy Jump Rope",
+    "minItemPower": 2000,
+    "maxItemPower": 5000,
+    "rarity": 1
+  },
+  "fff5a89a-1691-47ea-af30-c811f1c1dbfc": {
+    "iconURL": "",
+    "itemName": "Fairy Shuttlecock",
+    "minItemPower": 10000,
+    "maxItemPower": 25000,
+    "rarity": 3
+  }
+}
diff --git a/public/items/intimacyPowerItems.json b/public/items/intimacyPowerItems.json
new file mode 100644
index 0000000..bb8ed44
--- /dev/null
+++ b/public/items/intimacyPowerItems.json
@@ -0,0 +1,86 @@
+{
+  "09b1fff4-c1a3-49d5-acf1-b996d93a7217": {
+    "iconURL": "",
+    "itemName": "Song: \"Unhappy Elder\"",
+    "minItemPower": 2,
+    "maxItemPower": 5,
+    "rarity": 1
+  },
+  "0dbbda4c-0e4c-4cc2-b204-0301178ae667": {
+    "iconURL": "",
+    "itemName": "Gold Ring",
+    "minItemPower": 1,
+    "maxItemPower": 1,
+    "rarity": 2
+  },
+  "590ebe99-0fdd-4216-bb51-88d48f07d518": {
+    "iconURL": "",
+    "itemName": "Song: \"Forbidden Love\"",
+    "minItemPower": 10,
+    "maxItemPower": 32,
+    "rarity": 4
+  },
+  "62c5fe6d-92d2-458d-8ce4-c206eeb6245a": {
+    "iconURL": "",
+    "itemName": "Song: \"Prince's Wish\"",
+    "minItemPower": 4,
+    "maxItemPower": 10,
+    "rarity": 2
+  },
+  "67e7598f-f687-4ea0-b9f5-f89aaa965d44": {
+    "iconURL": "",
+    "itemName": "Song: \"Otherworld Stars\"",
+    "minItemPower": 7,
+    "maxItemPower": 24,
+    "rarity": 3
+  },
+  "71c7537b-ef33-4f64-91d4-e7e9c3915cad": {
+    "iconURL": "",
+    "itemName": "Diamond Ring",
+    "minItemPower": 5,
+    "maxItemPower": 5,
+    "rarity": 4
+  },
+  "73ddfbbf-3071-4103-9893-b9b77af05ce9": {
+    "iconURL": "",
+    "itemName": "Song: \"Single Golden Mushroom\"",
+    "minItemPower": 5,
+    "maxItemPower": 16,
+    "rarity": 3
+  },
+  "910cfd8f-9e75-4ca1-b776-e6b4df78e80b": {
+    "iconURL": "",
+    "itemName": "Song: \"Starry Love\"",
+    "minItemPower": 1,
+    "maxItemPower": 3,
+    "rarity": 1
+  },
+  "b2536feb-7dcb-4cec-93e5-581bc64e693b": {
+    "iconURL": "",
+    "itemName": "Song: \"Princess's Wish\"",
+    "minItemPower": 3,
+    "maxItemPower": 6,
+    "rarity": 2
+  },
+  "b2ebc786-79c3-47df-b0d9-330bb8e85a5f": {
+    "iconURL": "",
+    "itemName": "Song: \"Unlucky Succubus\"",
+    "minItemPower": 14,
+    "maxItemPower": 48,
+    "rarity": 4
+  },
+  "d5eb513d-68e0-4cd3-bb44-e3e8d36cfecd": {
+    "iconURL": "",
+    "itemName": "Gemstone Ring",
+    "minItemPower": 2,
+    "maxItemPower": 2,
+    "rarity": 3
+  },
+  "bcd9068a-c3b1-4914-ac50-af3369a7a8e5": {
+    "iconURL": "",
+    "itemName": "Intamacy Gachapon",
+    "minItemPower": 10,
+    "maxItemPower": 30,
+    "rarity": 4
+  }
+}
diff --git a/src/App.vue b/src/App.vue
index ceac73c..5248187 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,21 +6,11 @@ import GlobalHeader from '@/components/GlobalHeader.vue'
 <template>
   <v-app>
     <GlobalHeader />
-    <v-navigation-drawer permanent absolute>
-      <v-list nav dense>
-        <v-list-item :to="{ name: 'blessing-power' }">
-          <v-list-item-title>Blessing Power</v-list-item-title>
-        </v-list-item>
-        <v-list-item :to="{ name: 'fellow-power' }">
-          <v-list-item-title>Fellow Power</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-main>
+    <v-main class="d-flex">
       <RouterView />
     </v-main>
-    <v-footer>
-      <div>The footer goes here</div>
+    <v-footer app>
+      <div>Copyright Annika Merris 2024</div>
     </v-footer>
   </v-app>
 </template>
diff --git a/src/assets/base.css b/src/assets/base.css
index a1b5026..5f38317 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,5 +1,5 @@
  body {
-  min-height: 100vh;
+  /* min-height: 100vh; */
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/src/assets/images/isl_logo.png b/src/assets/images/isl_logo.png
new file mode 100644
index 0000000..5564af0
Binary files /dev/null and b/src/assets/images/isl_logo.png differ
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
deleted file mode 100644
index 7565660..0000000
--- a/src/assets/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git a/src/assets/main.css b/src/assets/main.css
index 1e37676..323f92f 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,6 +1,6 @@
 @import './base.css';
 
-#app {
+/* #app {
   margin: 0 auto;
   padding: 2rem;
   font-weight: normal;
@@ -28,4 +28,4 @@ a,
   #app {
     padding: 0 2rem;
   }
-}
+} */
diff --git a/src/components/BlessingPower/SpecialItemsCard.vue b/src/components/BlessingPower/SpecialItemsCard.vue
index 8f369c3..6edcaf1 100644
--- a/src/components/BlessingPower/SpecialItemsCard.vue
+++ b/src/components/BlessingPower/SpecialItemsCard.vue
@@ -1,10 +1,77 @@
 <script setup lang="ts">
 import { usePowerItems } from '@/stores/powerItems'
 import { storeToRefs } from 'pinia'
-import SpecialItem from '@/components/SpecialItem.vue'
+import { computed, ref } from 'vue'
 
-const { specialBlessingItems, specialBlessingItemsMinTotal, specialBlessingItemsMaxTotal, specialBlessingItemsAveTotal } =
-  storeToRefs(usePowerItems())
+const {
+  specialBlessingItems,
+  specialBlessingItemsMinTotal,
+  specialBlessingItemsMaxTotal,
+  specialBlessingItemsAveTotal
+} = storeToRefs(usePowerItems())
+
+const headers = ref([
+  {
+    title: 'Name',
+    align: 'start',
+    sortable: true,
+    value: '1.itemName'
+  },
+  {
+    title: 'Min.',
+    align: ' d-none d-lg-table-cell',
+    sortable: true,
+    key: '1.minItemPower'
+  },
+  {
+    title: 'Max.',
+    align: ' d-none d-lg-table-cell',
+    sortable: true,
+    key: '1.maxItemPower'
+  },
+  {
+    title: 'Owned',
+    align: 'end',
+    sortable: true,
+    key: `1.owned`
+  },
+  {
+    title: 'Min. Total',
+    align: ' d-none d-lg-table-cell',
+    sortable: false,
+    key: `1.minTotalPower`
+  },
+  {
+    title: 'Max. Total',
+    align: ' d-none d-lg-table-cell',
+    sortable: false,
+    key: `1.maxTotalPower`
+  },
+  {
+    title: 'Mean Total Power',
+    align: 'end',
+    sortable: false,
+    key: `1.aveTotalPower`
+  }
+])
+const sortBy = ref([
+  {
+    key: '1.minItemPower',
+    order: 'asc'
+  }
+])
+
+const getColor = computed(() => (rarity: number): string => {
+  if (rarity === 4) {
+    return 'amber'
+  } else if (rarity === 3) {
+    return 'purple'
+  } else if (rarity === 2) {
+    return 'blue'
+  } else {
+    return 'green'
+  }
+})
 </script>
 
 <template>
@@ -12,44 +79,52 @@ const { specialBlessingItems, specialBlessingItemsMinTotal, specialBlessingItems
     <v-card-title>Special Items</v-card-title>
     <v-card-subtitle>Items from events</v-card-subtitle>
     <v-card-item>
-      <v-table density="compact">
-        <thead>
-          <tr>
-            <!-- <th></th> -->
-            <th class="text-left font-weight-bold">Name</th>
-            <th class="text-left font-weight-bold">Min. Power</th>
-            <th class="text-left font-weight-bold">Max. Power</th>
-            <th class="text-left font-weight-bold">Owned</th>
-            <th class="text-right font-weight-bold">Min. Total</th>
-            <th class="text-right font-weight-bold">Max. Total</th>
-            <th class="text-right font-weight-bold">Ave. Total</th>
-          </tr>
-        </thead>
-        <tbody>
-          <SpecialItem
-            v-for="[key, item] in specialBlessingItems"
-            :key="key"
-            :itemID="key"
-            :itemName="item.itemName"
-            :itemIcon="'none'"
-            :owned="item.owned"
-            :minPower="item.minItemPower"
-            :maxPower="item.maxItemPower"
-          />
-        </tbody>
-        <tfoot>
-          <tr>
-            <!-- <td></td> -->
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td class="px-0 text-right font-weight-bold">{{ specialBlessingItemsMinTotal }}</td>
-            <td class="px-0 text-right font-weight-bold">{{ specialBlessingItemsMaxTotal }}</td>
-            <td class="px-0 text-right font-weight-bold">{{ specialBlessingItemsAveTotal }}</td>
-          </tr>
-        </tfoot>
-      </v-table>
+      <v-data-table
+        density="compact"
+        v-model:sort-by="sortBy"
+        :items="[...specialBlessingItems.entries()]"
+        :headers="headers"
+      >
+        <template v-slot:item.1.itemName="{ item }">
+          <v-chip :color="`${getColor(item[1].rarity)}`">
+            {{ item[1].itemName }}
+          </v-chip>
+        </template>
+        <template v-slot:item.1.owned="{ item }">
+          <v-text-field
+            density="compact"
+            hide-details="auto"
+            v-model.number="item[1].owned"
+            @update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
+          ></v-text-field>
+        </template>
+        <template v-slot:item.1.minTotalPower="{ item }">
+          {{ item[1].minItemPower * item[1].owned }}
+        </template>
+        <template v-slot:item.1.maxTotalPower="{ item }">
+          {{ item[1].maxItemPower * item[1].owned }}
+        </template>
+        <template v-slot:item.1.aveTotalPower="{ item }">
+          {{ ((item[1].minItemPower + item[1].maxItemPower) / 2) * item[1].owned }}
+        </template>
+        <template v-slot:tfoot>
+          <tfoot>
+            <tr>
+              <td></td>
+              <td class="d-none d-lg-table-cell"></td>
+              <td class="d-none d-lg-table-cell"></td>
+              <td></td>
+              <td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
+                {{ specialBlessingItemsMinTotal }}
+              </td>
+              <td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
+                {{ specialBlessingItemsMaxTotal }}
+              </td>
+              <td class="px-0 text-right font-weight-bold">{{ specialBlessingItemsAveTotal }}</td>
+            </tr>
+          </tfoot>
+        </template>
+      </v-data-table>
     </v-card-item>
   </v-card>
 </template>
diff --git a/src/components/BlessingPower/StandardItemsCard.vue b/src/components/BlessingPower/StandardItemsCard.vue
index 32f068d..31fc76e 100644
--- a/src/components/BlessingPower/StandardItemsCard.vue
+++ b/src/components/BlessingPower/StandardItemsCard.vue
@@ -1,9 +1,54 @@
 <script setup lang="ts">
 import { usePowerItems } from '@/stores/powerItems'
 import { storeToRefs } from 'pinia'
-import StandardItem from '@/components/StandardItem.vue'
+import { computed, ref } from 'vue';
 
 const { standardBlessingItems, standardBlessingItemTotal } = storeToRefs(usePowerItems())
+const headers = ref([
+  {
+    title: 'Name',
+    align: 'start',
+    sortable: true,
+    value: '1.itemName'
+  },
+  {
+    title: 'Power',
+    align: 'end',
+    sortable: true,
+    key: '1.minItemPower'
+  },
+  {
+    title: 'Owned',
+    align: 'end',
+    sortable: true,
+    key: `1.owned`
+  },
+  {
+    title: 'Total Power',
+    align: 'end',
+    sortable: false,
+    key: `1.totalPower`
+  }
+])
+const sortBy = ref([
+  {
+    key: '1.minItemPower',
+    order: 'asc'
+  }
+])
+
+const getColor = computed(() => (rarity: number): string => {
+  console.log('getting rarity')
+  if (rarity === 4) {
+    return 'amber'
+  } else if (rarity === 3) {
+    return 'purple'
+  } else if (rarity === 2) {
+    return 'blue'
+  } else {
+    return 'green'
+  }
+})
 </script>
 
 <template>
@@ -11,38 +56,39 @@ const { standardBlessingItems, standardBlessingItemTotal } = storeToRefs(usePowe
     <v-card-title>Standard Items</v-card-title>
     <v-card-subtitle>Items that exist all the time</v-card-subtitle>
     <v-card-item>
-      <v-table density="compact">
-        <thead>
-          <tr>
-            <!-- <th></th> -->
-            <th class="text-left font-weight-bold">Name</th>
-            <th class="text-left font-weight-bold">Power</th>
-            <th class="text-left font-weight-bold">Owned</th>
-            <th class="text-right font-weight-bold">Total</th>
-          </tr>
-        </thead>
-        <tbody>
-          <StandardItem
-            v-for="[key, item] in standardBlessingItems"
-            :key="key"
-            :itemID="key"
-            :itemName="item.itemName"
-            :itemIcon="'none'"
-            :owned="item.owned"
-            :minPower="item.minItemPower"
-            :maxPower="item.maxItemPower"
-          />
-        </tbody>
-        <tfoot>
-          <tr>
-            <!-- <td></td> -->
-            <td></td>
-            <td></td>
-            <td></td>
-            <td class="px-0 text-right font-weight-bold">{{ standardBlessingItemTotal }}</td>
-          </tr>
-        </tfoot>
-      </v-table>
+      <v-data-table
+        density="compact"
+        v-model:sort-by="sortBy"
+        :items="[...standardBlessingItems.entries()]"
+        :headers="headers"
+      >
+        <template v-slot:item.1.itemName="{ item }">
+          <v-chip :color="`${getColor(item[1].rarity)}`">
+            {{ item[1].itemName }}
+          </v-chip>
+        </template>
+        <template v-slot:item.1.owned="{ item }">
+          <v-text-field
+            density="compact"
+            hide-details="auto"
+            v-model.number="item[1].owned"
+            @update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
+          ></v-text-field>
+        </template>
+        <template v-slot:item.1.totalPower="{ item }">
+          {{ item[1].minItemPower * item[1].owned }}
+        </template>
+        <template v-slot:tfoot>
+          <tfoot>
+            <tr>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td class="px-0 text-right font-weight-bold">{{ standardBlessingItemTotal }}</td>
+            </tr>
+          </tfoot>
+        </template>
+      </v-data-table>
     </v-card-item>
   </v-card>
 </template>
diff --git a/src/components/FellowPower/SpecialItemsCard.vue b/src/components/FellowPower/SpecialItemsCard.vue
index fb2765e..497720d 100644
--- a/src/components/FellowPower/SpecialItemsCard.vue
+++ b/src/components/FellowPower/SpecialItemsCard.vue
@@ -1,10 +1,77 @@
 <script setup lang="ts">
 import { usePowerItems } from '@/stores/powerItems'
 import { storeToRefs } from 'pinia'
-import SpecialItem from '@/components/SpecialItem.vue'
+import { computed, ref } from 'vue'
 
-const { specialFellowItems, specialFellowItemsMinTotal, specialFellowItemsMaxTotal, specialFellowItemsAveTotal } =
-  storeToRefs(usePowerItems())
+const {
+  specialFellowItems,
+  specialFellowItemsMinTotal,
+  specialFellowItemsMaxTotal,
+  specialFellowItemsAveTotal
+} = storeToRefs(usePowerItems())
+
+const headers = ref([
+  {
+    title: 'Name',
+    align: 'start',
+    sortable: true,
+    value: '1.itemName'
+  },
+  {
+    title: 'Min.',
+    align: ' d-none d-lg-table-cell',
+    sortable: true,
+    key: '1.minItemPower'
+  },
+  {
+    title: 'Max.',
+    align: ' d-none d-lg-table-cell',
+    sortable: true,
+    key: '1.maxItemPower'
+  },
+  {
+    title: 'Owned',
+    align: 'end',
+    sortable: true,
+    key: `1.owned`
+  },
+  {
+    title: 'Min. Total',
+    align: ' d-none d-lg-table-cell',
+    sortable: false,
+    key: `1.minTotalPower`
+  },
+  {
+    title: 'Max. Total',
+    align: ' d-none d-lg-table-cell',
+    sortable: false,
+    key: `1.maxTotalPower`
+  },
+  {
+    title: 'Mean Total',
+    align: 'end',
+    sortable: false,
+    key: `1.aveTotalPower`
+  }
+])
+const sortBy = ref([
+  {
+    key: '1.minItemPower',
+    order: 'asc'
+  }
+])
+
+const getColor = computed(() => (rarity: number): string => {
+  if (rarity === 4) {
+    return 'amber'
+  } else if (rarity === 3) {
+    return 'purple'
+  } else if (rarity === 2) {
+    return 'blue'
+  } else {
+    return 'green'
+  }
+})
 </script>
 
 <template>
@@ -12,44 +79,52 @@ const { specialFellowItems, specialFellowItemsMinTotal, specialFellowItemsMaxTot
     <v-card-title>Special Items</v-card-title>
     <v-card-subtitle>Items from events</v-card-subtitle>
     <v-card-item>
-      <v-table density="compact">
-        <thead>
-          <tr>
-            <!-- <th></th> -->
-            <th class="text-left font-weight-bold">Name</th>
-            <th class="text-left font-weight-bold">Min. Power</th>
-            <th class="text-left font-weight-bold">Max. Power</th>
-            <th class="text-left font-weight-bold">Owned</th>
-            <th class="text-right font-weight-bold">Min. Total</th>
-            <th class="text-right font-weight-bold">Max. Total</th>
-            <th class="text-right font-weight-bold">Ave. Total</th>
-          </tr>
-        </thead>
-        <tbody>
-          <SpecialItem
-            v-for="[key, item] in specialFellowItems"
-            :key="key"
-            :itemID="key"
-            :itemName="item.itemName"
-            :itemIcon="'none'"
-            :owned="item.owned"
-            :minPower="item.minItemPower"
-            :maxPower="item.maxItemPower"
-          />
-        </tbody>
-        <tfoot>
-          <tr>
-            <!-- <td></td> -->
-            <td></td>
-            <td></td>
-            <td></td>
-            <td></td>
-            <td class="px-0 text-right font-weight-bold">{{ specialFellowItemsMinTotal }}</td>
-            <td class="px-0 text-right font-weight-bold">{{ specialFellowItemsMaxTotal }}</td>
-            <td class="px-0 text-right font-weight-bold">{{ specialFellowItemsAveTotal }}</td>
-          </tr>
-        </tfoot>
-      </v-table>
+      <v-data-table
+        density="compact"
+        v-model:sort-by="sortBy"
+        :items="[...specialFellowItems.entries()]"
+        :headers="headers"
+      >
+        <template v-slot:item.1.itemName="{ item }">
+          <v-chip :color="`${getColor(item[1].rarity)}`">
+            {{ item[1].itemName }}
+          </v-chip>
+        </template>
+        <template v-slot:item.1.owned="{ item }">
+          <v-text-field
+            density="compact"
+            hide-details="auto"
+            v-model.number="item[1].owned"
+            @update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
+          ></v-text-field>
+        </template>
+        <template v-slot:item.1.minTotalPower="{ item }">
+          {{ item[1].minItemPower * item[1].owned }}
+        </template>
+        <template v-slot:item.1.maxTotalPower="{ item }">
+          {{ item[1].maxItemPower * item[1].owned }}
+        </template>
+        <template v-slot:item.1.aveTotalPower="{ item }">
+          {{ ((item[1].minItemPower + item[1].maxItemPower) / 2) * item[1].owned }}
+        </template>
+        <template v-slot:tfoot>
+          <tfoot>
+            <tr>
+              <td></td>
+              <td class="d-none d-lg-table-cell"></td>
+              <td class="d-none d-lg-table-cell"></td>
+              <td></td>
+              <td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
+                {{ specialFellowItemsMinTotal }}
+              </td>
+              <td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">
+                {{ specialFellowItemsMaxTotal }}
+              </td>
+              <td class="px-0 text-right font-weight-bold">{{ specialFellowItemsAveTotal }}</td>
+            </tr>
+          </tfoot>
+        </template>
+      </v-data-table>
     </v-card-item>
   </v-card>
 </template>
diff --git a/src/components/FellowPower/StandardItemsCard.vue b/src/components/FellowPower/StandardItemsCard.vue
index dd8a4f6..1346488 100644
--- a/src/components/FellowPower/StandardItemsCard.vue
+++ b/src/components/FellowPower/StandardItemsCard.vue
@@ -1,9 +1,54 @@
 <script setup lang="ts">
 import { usePowerItems } from '@/stores/powerItems'
 import { storeToRefs } from 'pinia'
-import StandardItem from '@/components/StandardItem.vue'
+import { computed, ref } from 'vue';
 
 const { standardFellowItems, standardFellowItemTotal } = storeToRefs(usePowerItems())
+const headers = ref([
+  {
+    title: 'Name',
+    align: 'start',
+    sortable: true,
+    value: '1.itemName'
+  },
+  {
+    title: 'Power',
+    align: 'end',
+    sortable: true,
+    key: '1.minItemPower'
+  },
+  {
+    title: 'Owned',
+    align: 'end',
+    sortable: true,
+    key: `1.owned`
+  },
+  {
+    title: 'Total Power',
+    align: 'end',
+    sortable: false,
+    key: `1.totalPower`
+  }
+])
+const sortBy = ref([
+  {
+    key: '1.minItemPower',
+    order: 'asc'
+  }
+])
+
+const getColor = computed(() => (rarity: number): string => {
+  console.log('getting rarity')
+  if (rarity === 4) {
+    return 'amber'
+  } else if (rarity === 3) {
+    return 'purple'
+  } else if (rarity === 2) {
+    return 'blue'
+  } else {
+    return 'green'
+  }
+})
 </script>
 
 <template>
@@ -11,38 +56,39 @@ const { standardFellowItems, standardFellowItemTotal } = storeToRefs(usePowerIte
     <v-card-title>Standard Items</v-card-title>
     <v-card-subtitle>Items that exist all the time</v-card-subtitle>
     <v-card-item>
-      <v-table density="compact">
-        <thead>
-          <tr>
-            <!-- <th></th> -->
-            <th class="text-left font-weight-bold">Name</th>
-            <th class="text-left font-weight-bold">Power</th>
-            <th class="text-left font-weight-bold">Owned</th>
-            <th class="text-right font-weight-bold">Total</th>
-          </tr>
-        </thead>
-        <tbody>
-          <StandardItem
-            v-for="[key, item] in standardFellowItems"
-            :key="key"
-            :itemID="key"
-            :itemName="item.itemName"
-            :itemIcon="'none'"
-            :owned="item.owned"
-            :minPower="item.minItemPower"
-            :maxPower="item.maxItemPower"
-          />
-        </tbody>
-        <tfoot>
-          <tr>
-            <!-- <td></td> -->
-            <td></td>
-            <td></td>
-            <td></td>
-            <td class="px-0 text-right font-weight-bold">{{ standardFellowItemTotal }}</td>
-          </tr>
-        </tfoot>
-      </v-table>
+      <v-data-table
+        density="compact"
+        v-model:sort-by="sortBy"
+        :items="[...standardFellowItems.entries()]"
+        :headers="headers"
+      >
+        <template v-slot:item.1.itemName="{ item }">
+          <v-chip :color="`${getColor(item[1].rarity)}`">
+            {{ item[1].itemName }}
+          </v-chip>
+        </template>
+        <template v-slot:item.1.owned="{ item }">
+          <v-text-field
+            density="compact"
+            hide-details="auto"
+            v-model.number="item[1].owned"
+            @update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
+          ></v-text-field>
+        </template>
+        <template v-slot:item.1.totalPower="{ item }">
+          {{ item[1].minItemPower * item[1].owned }}
+        </template>
+        <template v-slot:tfoot>
+          <tfoot>
+            <tr>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td class="px-0 text-right font-weight-bold">{{ standardFellowItemTotal }}</td>
+            </tr>
+          </tfoot>
+        </template>
+      </v-data-table>
     </v-card-item>
   </v-card>
 </template>
diff --git a/src/components/GlobalHeader.vue b/src/components/GlobalHeader.vue
index 35d9861..fd1edfb 100644
--- a/src/components/GlobalHeader.vue
+++ b/src/components/GlobalHeader.vue
@@ -1,7 +1,29 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const drawer = ref(false)
+</script>
 
 <template>
   <v-app-bar color="pink-lighten-3" scroll-behavior="elevate">
+    <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
     <v-app-bar-title>Isekai Slow Life Calculator</v-app-bar-title>
   </v-app-bar>
+  <v-navigation-drawer v-model="drawer" app bottom>
+    <v-list nav>
+      <v-list-item :to="{ name: 'home' }">
+        <v-list-item-title>Isekai: Slow Life Calc</v-list-item-title>
+      </v-list-item>
+      <v-divider></v-divider>
+      <v-list-item :to="{ name: 'blessing-power' }">
+        <v-list-item-title>Blessing Power</v-list-item-title>
+      </v-list-item>
+      <v-list-item :to="{ name: 'fellow-power' }">
+        <v-list-item-title>Fellow Power</v-list-item-title>
+      </v-list-item>
+      <v-list-item :to="{ name: 'intimacy-power' }">
+        <v-list-item-title>Intimacy Power</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-navigation-drawer>
 </template>
diff --git a/src/components/IntimacyPower/SpecialItemsCard.vue b/src/components/IntimacyPower/SpecialItemsCard.vue
new file mode 100644
index 0000000..7c705d3
--- /dev/null
+++ b/src/components/IntimacyPower/SpecialItemsCard.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { usePowerItems } from '@/stores/powerItems'
+import { storeToRefs } from 'pinia'
+import { computed, ref } from 'vue'
+
+const {
+  specialIntimacyItems,
+  specialIntimacyItemsMinTotal,
+  specialIntimacyItemsMaxTotal,
+  specialIntimacyItemsAveTotal
+} = storeToRefs(usePowerItems())
+
+const headers = ref([
+  {
+    title: 'Name',
+    align: 'start',
+    sortable: true,
+    value: '1.itemName'
+  },
+  {
+    title: 'Min.',
+    align: ' d-none d-lg-table-cell',
+    sortable: true,
+    key: '1.minItemPower'
+  },
+  {
+    title: 'Max.',
+    align: ' d-none d-lg-table-cell',
+    sortable: true,
+    key: '1.maxItemPower'
+  },
+  {
+    title: 'Owned',
+    align: 'end',
+    sortable: true,
+    key: `1.owned`
+  },
+  {
+    title: 'Min. Total',
+    align: ' d-none d-lg-table-cell',
+    sortable: false,
+    key: `1.minTotalPower`
+  },
+  {
+    title: 'Max. Total',
+    align: ' d-none d-lg-table-cell',
+    sortable: false,
+    key: `1.maxTotalPower`
+  },
+  {
+    title: 'Mean Total',
+    align: 'end',
+    sortable: false,
+    key: `1.aveTotalPower`
+  }
+])
+const sortBy = ref([
+  {
+    key: '1.minItemPower',
+    order: 'asc'
+  }
+])
+
+const getColor = computed(() => (rarity: number): string => {
+  if (rarity === 4) {
+    return 'amber'
+  } else if (rarity === 3) {
+    return 'purple'
+  } else if (rarity === 2) {
+    return 'blue'
+  } else {
+    return 'green'
+  }
+})
+</script>
+
+<template>
+  <v-card fluid>
+    <v-card-title>Special Items</v-card-title>
+    <v-card-subtitle>Items from events</v-card-subtitle>
+    <v-card-item>
+      <v-data-table
+        density="compact"
+        v-model:sort-by="sortBy"
+        :items="[...specialIntimacyItems.entries()]"
+        :headers="headers"
+      >
+        <template v-slot:item.1.itemName="{ item }">
+          <v-chip :color="`${getColor(item[1].rarity)}`">
+            {{ item[1].itemName }}
+          </v-chip>
+        </template>
+        <template v-slot:item.1.owned="{ item }">
+          <v-text-field
+            reverse
+            density="compact"
+            hide-details="auto"
+            v-model.number="item[1].owned"
+            @update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
+          ></v-text-field>
+        </template>
+        <template v-slot:item.1.minTotalPower="{ item }">
+          {{ item[1].minItemPower * item[1].owned }}
+        </template>
+        <template v-slot:item.1.maxTotalPower="{ item }">
+          {{ item[1].maxItemPower * item[1].owned }}
+        </template>
+        <template v-slot:item.1.aveTotalPower="{ item }">
+          {{ ((item[1].minItemPower + item[1].maxItemPower) / 2) * item[1].owned }}
+        </template>
+        <template v-slot:tfoot>
+          <tfoot>
+            <tr>
+              <td></td>
+              <td class="d-none d-lg-table-cell"></td>
+              <td class="d-none d-lg-table-cell"></td>
+              <td></td>
+              <td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">{{ specialIntimacyItemsMinTotal }}</td>
+              <td class="px-0 text-right font-weight-bold d-none d-lg-table-cell">{{ specialIntimacyItemsMaxTotal }}</td>
+              <td class="px-0 text-right font-weight-bold">{{ specialIntimacyItemsAveTotal }}</td>
+            </tr>
+          </tfoot>
+        </template>
+      </v-data-table>
+    </v-card-item>
+  </v-card>
+</template>
+
+<style lang="scss" scoped>
+@use '@/styles/settings.scss';
+.common {
+  background-color: map-get(settings.$green, 'lighten-4');
+}
+.rare {
+  background-color: map-get(settings.$blue, 'lighten-4');
+}
+.epic {
+  background-color: map-get(settings.$purple, 'lighten-4');
+}
+.legendary {
+  background-color: map-get(settings.$amber, 'lighten-4');
+}
+</style>
diff --git a/src/components/IntimacyPower/StandardItemsCard.vue b/src/components/IntimacyPower/StandardItemsCard.vue
new file mode 100644
index 0000000..bbc3d9c
--- /dev/null
+++ b/src/components/IntimacyPower/StandardItemsCard.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { usePowerItems } from '@/stores/powerItems'
+import { storeToRefs } from 'pinia'
+import { computed, ref } from 'vue';
+
+const { standardIntimacyItems, standardIntimacyItemTotal } = storeToRefs(usePowerItems())
+const headers = ref([
+  {
+    title: 'Name',
+    align: 'start',
+    sortable: true,
+    value: '1.itemName'
+  },
+  {
+    title: 'Power',
+    align: 'end',
+    sortable: true,
+    key: '1.minItemPower'
+  },
+  {
+    title: 'Owned',
+    align: 'end',
+    sortable: true,
+    key: `1.owned`
+  },
+  {
+    title: 'Total Power',
+    align: 'end',
+    sortable: false,
+    key: `1.totalPower`
+  }
+])
+const sortBy = ref([
+  {
+    key: '1.minItemPower',
+    order: 'asc'
+  }
+])
+
+const getColor = computed(() => (rarity: number): string => {
+  if (rarity === 4) {
+    return 'amber'
+  } else if (rarity === 3) {
+    return 'purple'
+  } else if (rarity === 2) {
+    return 'blue'
+  } else {
+    return 'green'
+  }
+})
+</script>
+
+<template>
+  <v-card>
+    <v-card-title>Standard Items</v-card-title>
+    <v-card-subtitle>Items that exist all the time</v-card-subtitle>
+    <v-card-item>
+      <v-data-table
+        density="compact"
+        v-model:sort-by="sortBy"
+        :items="[...standardIntimacyItems.entries()]"
+        :headers="headers"
+      >
+        <template v-slot:item.1.itemName="{ item }">
+          <v-chip :color="`${getColor(item[1].rarity)}`">
+            {{ item[1].itemName }}
+          </v-chip>
+        </template>
+        <template v-slot:item.1.owned="{ item }">
+          <v-text-field
+            density="compact"
+            hide-details="auto"
+            v-model.number="item[1].owned"
+            @update:model-value="usePowerItems().updateOwned(item[0], item[1].owned)"
+          ></v-text-field>
+        </template>
+        <template v-slot:item.1.totalPower="{ item }">
+          {{ item[1].minItemPower * item[1].owned }}
+        </template>
+        <template v-slot:tfoot>
+          <tfoot>
+            <tr>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td class="px-0 text-right font-weight-bold">{{ standardIntimacyItemTotal }}</td>
+            </tr>
+          </tfoot>
+        </template>
+      </v-data-table>
+    </v-card-item>
+  </v-card>
+</template>
diff --git a/src/components/IntimacyPower/SummaryCard.vue b/src/components/IntimacyPower/SummaryCard.vue
new file mode 100644
index 0000000..b533f01
--- /dev/null
+++ b/src/components/IntimacyPower/SummaryCard.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { usePowerItems } from '@/stores/powerItems';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+
+const { standardIntimacyItemTotal, specialIntimacyItemsMinTotal, specialIntimacyItemsMaxTotal, specialIntimacyItemsAveTotal} = storeToRefs(usePowerItems())
+
+const minIncrease = computed(() => standardIntimacyItemTotal.value + specialIntimacyItemsMinTotal.value)
+const maxIncrease = computed(() => standardIntimacyItemTotal.value + specialIntimacyItemsMaxTotal.value)
+const aveIncrease = computed(() => standardIntimacyItemTotal.value + specialIntimacyItemsAveTotal.value)
+</script>
+
+<template>
+  <v-card>
+    <v-card-title>Overall Intimacy Power Increase</v-card-title>
+    <v-card-item>
+      <v-list density="compact">
+        <v-list-item>
+            <v-list-item-title>Minimum: {{ minIncrease }}</v-list-item-title>
+        </v-list-item>
+        <v-list-item>
+            <v-list-item-title>Maximum: {{ maxIncrease }}</v-list-item-title>
+        </v-list-item>
+        <v-list-item>
+            <v-list-item-title>Mean: {{ aveIncrease }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-card-item>
+  </v-card>
+</template>
diff --git a/src/components/SpecialItem.vue b/src/components/SpecialItem.vue
deleted file mode 100644
index 6396933..0000000
--- a/src/components/SpecialItem.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { computed } from 'vue';
-import { usePowerItems } from '@/stores/powerItems'
-
-interface Props {
-  itemID: string
-  itemName: string
-  itemIcon: string
-  owned: number
-  minPower: number
-  maxPower: number
-}
-
-const props = defineProps<Props>()
-const itemsOwned = ref(props.owned)
-const { updateOwned } = usePowerItems()
-
-const minTotalValue = computed(() => itemsOwned.value * props.minPower)
-const maxTotalValue = computed(() => itemsOwned.value * props.maxPower)
-const aveTotalValue = computed(() => itemsOwned.value * ((props.minPower + props.maxPower) / 2))
-</script>
-
-<template>
-  <tr>
-    <!-- <td>ICON</td> -->
-    <td class="text-left">{{ props.itemName }}</td>
-    <td class="text-right">{{ props.minPower }}</td>
-    <td class="text-right">{{ props.maxPower }}</td>
-    <td>
-        <v-text-field density="compact" hide-details="auto" v-model.number="itemsOwned" @update:model-value="updateOwned(props.itemID, itemsOwned)"></v-text-field>
-    </td>
-    <td class="text-right">{{ minTotalValue }}</td>
-    <td class="text-right">{{ maxTotalValue }}</td>
-    <td class="text-right">{{ aveTotalValue }}</td>
-  </tr>
-</template>
-
-<style lang="scss">
-</style>
diff --git a/src/components/StandardItem.vue b/src/components/StandardItem.vue
deleted file mode 100644
index a6a002d..0000000
--- a/src/components/StandardItem.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-import { computed } from 'vue';
-import { usePowerItems } from '@/stores/powerItems'
-
-interface Props {
-  itemID: string
-  itemName: string
-  itemIcon: string
-  owned: number
-  minPower: number
-  maxPower: number
-}
-
-const props = defineProps<Props>()
-const itemsOwned = ref(props.owned)
-const { updateOwned } = usePowerItems()
-
-const totalValue = computed(() => itemsOwned.value * props.maxPower)
-</script>
-
-<template>
-  <tr>
-    <!-- <td>ICON</td> -->
-    <td class="text-left">{{ props.itemName }}</td>
-    <td class="text-right">{{ props.maxPower }}</td>
-    <td>
-        <v-text-field density="compact" hide-details="auto" v-model.number="itemsOwned" @update:model-value="updateOwned(props.itemID, itemsOwned)"></v-text-field>
-    </td>
-    <td class="text-right">{{ totalValue }}</td>
-  </tr>
-</template>
-
-<style lang="scss">
-</style>
diff --git a/src/main.ts b/src/main.ts
index b645d87..1ff243c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -18,6 +18,9 @@ const vuetify = createVuetify({
   directives,
   icons: {
     defaultSet: 'mdi',
+  },
+  theme: {
+    defaultTheme: 'dark'
   }
 })
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 65c6ea2..ca858c6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -18,6 +18,11 @@ const router = createRouter({
       path: "/fellow-power",
       name: "fellow-power",
       component: () => import('@/views/FellowPowerView.vue')
+    },
+    {
+      path: "/intimacy-power",
+      name: "intimacy-power",
+      component: () => import('@/views/IntimacyPowerView.vue')
     }
   ]
 })
diff --git a/src/stores/counter.ts b/src/stores/counter.ts
deleted file mode 100644
index b6757ba..0000000
--- a/src/stores/counter.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})
diff --git a/src/stores/powerItems.ts b/src/stores/powerItems.ts
index ab902b5..81dda2f 100644
--- a/src/stores/powerItems.ts
+++ b/src/stores/powerItems.ts
@@ -6,12 +6,20 @@ import { computed, ref, toRaw } from 'vue'
 export const usePowerItems = defineStore('powerItems', () => {
   const BLESSING_POWER_ITEM_STORAGE = 'BLESSING_POWER_ITEM_STORAGE'
   const FELLOW_POWER_ITEM_STORAGE = 'FELLOW_POWER_ITEM_STORAGE'
+  const INTIMACY_POWER_ITEM_STORAGE = 'INTIMACY_POWER_ITEM_STORAGE'
   const blessingPowerItems = ref(new Map<string, PowerItem>())
   const fellowPowerItems = ref(new Map<string, PowerItem>())
+  const intimacyPowerItems = ref(new Map<string, PowerItem>())
 
   async function fetchPowerItems() {
     axios
-      .get('/items/blessingPowerItems.json')
+      .get('/items/blessingPowerItems.json', {
+        headers: {
+          'Cache-Control': 'no-cache',
+          Pragma: 'no-cache',
+          Expires: '0'
+        }
+      })
       .then((resp) => {
         const plainMap = new Map<string, PowerItem>(
           Object.entries(JSON.parse(localStorage.getItem(BLESSING_POWER_ITEM_STORAGE) || '{}'))
@@ -27,7 +35,13 @@ export const usePowerItems = defineStore('powerItems', () => {
         console.log(err)
       })
     axios
-      .get('/items/fellowPowerItems.json')
+      .get('/items/fellowPowerItems.json', {
+        headers: {
+          'Cache-Control': 'no-cache',
+          Pragma: 'no-cache',
+          Expires: '0'
+        }
+      })
       .then((resp) => {
         const plainMap = new Map<string, PowerItem>(
           Object.entries(JSON.parse(localStorage.getItem(FELLOW_POWER_ITEM_STORAGE) || '{}'))
@@ -42,6 +56,28 @@ export const usePowerItems = defineStore('powerItems', () => {
       .catch((err) => {
         console.log(err)
       })
+    axios
+      .get('/items/intimacyPowerItems.json', {
+        headers: {
+          'Cache-Control': 'no-cache',
+          Pragma: 'no-cache',
+          Expires: '0'
+        }
+      })
+      .then((resp) => {
+        const plainMap = new Map<string, PowerItem>(
+          Object.entries(JSON.parse(localStorage.getItem(INTIMACY_POWER_ITEM_STORAGE) || '{}'))
+        )
+        Object.keys(resp.data).map((key) => {
+          const cur = resp.data[key]
+          if (cur['owned'] === undefined) cur['owned'] = 0
+          cur['owned'] = plainMap.get(key) !== undefined ? plainMap.get(key)?.owned : 0
+          intimacyPowerItems.value.set(key, resp.data[key])
+        })
+      })
+      .catch((err) => {
+        console.log(err)
+      })
   }
 
   function updateOwned(key: string, newOwned: number) {
@@ -64,6 +100,15 @@ export const usePowerItems = defineStore('powerItems', () => {
         JSON.stringify(mapToObj(toRaw(fellowPowerItems.value)))
       )
     }
+    cur = intimacyPowerItems.value.get(key)
+    if (cur !== undefined) {
+      cur.owned = newOwned
+      intimacyPowerItems.value.set(key, cur)
+      localStorage.setItem(
+        INTIMACY_POWER_ITEM_STORAGE,
+        JSON.stringify(mapToObj(toRaw(intimacyPowerItems.value)))
+      )
+    }
   }
 
   function mapToObj(map: Map<string, PowerItem>) {
@@ -217,6 +262,78 @@ export const usePowerItems = defineStore('powerItems', () => {
     )
   )
 
+  const totalIntimacyPower = computed(() =>
+    [...intimacyPowerItems.value.values()].reduce(
+      (accumulator: number, currentValue: PowerItem) => {
+        return currentValue !== undefined
+          ? accumulator +
+              ((currentValue.maxItemPower + currentValue.minItemPower) / 2) * currentValue.owned
+          : 0
+      },
+      0
+    )
+  )
+
+  const standardIntimacyItems = computed(
+    () =>
+      new Map(
+        [...intimacyPowerItems.value.entries()].filter(
+          (cur) => cur[1].maxItemPower === cur[1].minItemPower
+        )
+      )
+  )
+
+  const standardIntimacyItemTotal = computed(() =>
+    [...standardIntimacyItems.value.values()].reduce(
+      (accumulator: number, currentValue: PowerItem) =>
+        currentValue !== undefined
+          ? accumulator +
+            ((currentValue.maxItemPower + currentValue.minItemPower) / 2) * currentValue.owned
+          : 0,
+      0
+    )
+  )
+
+  const specialIntimacyItems = computed(
+    () =>
+      new Map(
+        [...intimacyPowerItems.value.entries()].filter(
+          (cur) => cur[1].maxItemPower !== cur[1].minItemPower
+        )
+      )
+  )
+
+  const specialIntimacyItemsMinTotal = computed(() =>
+    [...specialIntimacyItems.value.values()].reduce(
+      (accumulator: number, currentValue: PowerItem) =>
+        currentValue !== undefined
+          ? accumulator + currentValue.minItemPower * currentValue.owned
+          : 0,
+      0
+    )
+  )
+
+  const specialIntimacyItemsMaxTotal = computed(() =>
+    [...specialIntimacyItems.value.values()].reduce(
+      (accumulator: number, currentValue: PowerItem) =>
+        currentValue !== undefined
+          ? accumulator + currentValue.maxItemPower * currentValue.owned
+          : 0,
+      0
+    )
+  )
+
+  const specialIntimacyItemsAveTotal = computed(() =>
+    [...specialIntimacyItems.value.values()].reduce(
+      (accumulator: number, currentValue: PowerItem) =>
+        currentValue !== undefined
+          ? accumulator +
+            ((currentValue.maxItemPower + currentValue.minItemPower) / 2) * currentValue.owned
+          : 0,
+      0
+    )
+  )
+
   fetchPowerItems()
 
   return {
@@ -236,6 +353,13 @@ export const usePowerItems = defineStore('powerItems', () => {
     specialFellowItems,
     specialFellowItemsMinTotal,
     specialFellowItemsMaxTotal,
-    specialFellowItemsAveTotal
+    specialFellowItemsAveTotal,
+    totalIntimacyPower,
+    standardIntimacyItems,
+    standardIntimacyItemTotal,
+    specialIntimacyItems,
+    specialIntimacyItemsMinTotal,
+    specialIntimacyItemsMaxTotal,
+    specialIntimacyItemsAveTotal
   }
 })
diff --git a/src/types/PowerItem.ts b/src/types/PowerItem.ts
index 89f2b4e..5d08c56 100644
--- a/src/types/PowerItem.ts
+++ b/src/types/PowerItem.ts
@@ -4,4 +4,5 @@ export type PowerItem = {
   minItemPower: number
   maxItemPower: number
   owned: number
+  rarity: number
 }
diff --git a/src/views/BlessingPowerView.vue b/src/views/BlessingPowerView.vue
index 7c1b9d3..1c76bc3 100644
--- a/src/views/BlessingPowerView.vue
+++ b/src/views/BlessingPowerView.vue
@@ -5,22 +5,16 @@ import SummaryCard from '@/components/BlessingPower/SummaryCard.vue'
 </script>
 
 <template>
-  <v-container fluid>
-    <v-row justify="center">
-      <v-col><StandardItemsCard /></v-col>
-      <v-col><SpecialItemsCard /></v-col>
-    </v-row>
-    <v-row justify="center">
-      <v-col cols="6">
-        <SummaryCard />
-      </v-col>
-    </v-row>
-  </v-container>
+  <v-sheet class="d-flex flex-wrap flex-fill">
+    <StandardItemsCard class="ma-2 align-self-start" />
+    <SpecialItemsCard class="ma-2 align-self-start" />
+    <SummaryCard class="ma-2 align-self-start" />
+  </v-sheet>
 </template>
 
 <style lang="scss" scoped>
-@use "@/styles/settings.scss";
+@use '@/styles/settings.scss';
 :deep(tbody) tr:nth-of-type(even) {
-  background-color: map-get(settings.$purple, "lighten-5");
+  background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
 }
 </style>
diff --git a/src/views/FellowPowerView.vue b/src/views/FellowPowerView.vue
index 09bf8da..b6fae2b 100644
--- a/src/views/FellowPowerView.vue
+++ b/src/views/FellowPowerView.vue
@@ -5,22 +5,16 @@ import SummaryCard from '@/components/FellowPower/SummaryCard.vue'
 </script>
 
 <template>
-  <v-container fluid>
-    <v-row justify="center">
-      <v-col><StandardItemsCard /></v-col>
-      <v-col><SpecialItemsCard /></v-col>
-    </v-row>
-    <v-row justify="center">
-      <v-col cols="6">
-        <SummaryCard />
-      </v-col>
-    </v-row>
-  </v-container>
+  <v-sheet class="d-flex flex-wrap flex-fill">
+    <StandardItemsCard class="ma-2 align-self-start"/>
+    <SpecialItemsCard class="ma-2 align-self-start"/>
+    <SummaryCard class="ma-2 align-self-start" />
+  </v-sheet>
 </template>
 
 <style lang="scss" scoped>
 @use "@/styles/settings.scss";
 :deep(tbody) tr:nth-of-type(even) {
-  background-color: map-get(settings.$purple, "lighten-5");
+  background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
 }
 </style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 19edb9f..785668b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,10 +1,91 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <main>
-    <v-sheet>
-      Click one of the links to the left.
+  <v-sheet class="flex-fill pa-2">
+    <h1 class="pa-2">ISL Item Value Calculator</h1>
+    <v-sheet :elevation="1" class="ma-2 my-4">
+      <h2>How to Use</h2>
+      <p>
+        Select the type of items you want to add up from the menu, then add how many of each item
+        you have under the "owned" column. Totals will automatically be calculated for you as you
+        update. This also attempts to save your values in your browser automatically.
+      </p>
     </v-sheet>
-  </main>
+    <v-sheet :elevation="1" class="ma-2 my-4">
+      <h2>Missing Features</h2>
+      <v-list>
+        <v-list-item>
+          <v-list-item-title>Syncing</v-list-item-title>
+          <v-list-item-subtitle>
+            Currently all data is stored in your browser and cannot be moved to another device
+            easily.
+          </v-list-item-subtitle>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-title>Refreshing Data</v-list-item-title>
+          <v-list-item-subtitle>
+            The list of available items is only loaded when you first access the page. If they are
+            updated, you will need to manually refresh in order to fetch new items.
+          </v-list-item-subtitle>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-title>Missing Data</v-list-item-title>
+          <v-list-item-subtitle>
+            Some items may be missing! I'll figure out what to put to contact me with fixes soon!
+          </v-list-item-subtitle>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-title>Missing Icons</v-list-item-title>
+          <v-list-item-subtitle>
+            I'd love to add icons for everything
+          </v-list-item-subtitle>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-title>Sorting and Grouping</v-list-item-title>
+          <v-list-item-subtitle>
+            More grouping and sorting options will be added as I figure out how.
+          </v-list-item-subtitle>
+        </v-list-item>
+      </v-list>
+    </v-sheet>
+    <v-sheet :elevation="1" class="ma-2 my-4">
+      <h2>Changelog</h2>
+      <v-list lines="two">
+        <v-list-item>
+          <v-list-item-title>2024-01-16</v-list-item-title>
+          <v-list-item-subtitle>
+            <p>The inital build, looked like hell, but mostly worked</p>
+          </v-list-item-subtitle>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-title>2024-01-17</v-list-item-title>
+          <v-list-item-subtitle>
+            <p>Cleaned up my build process a bit, and fixed a few bugs</p>
+          </v-list-item-subtitle>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-title>2024-01-20</v-list-item-title>
+          <v-list-item-subtitle>
+            <p>First pass that I'm comfortable letting other people see</p>
+          </v-list-item-subtitle>
+        </v-list-item>
+        <v-list-item>
+          <v-list-item-title>2024-01-21</v-list-item-title>
+          <v-list-item-subtitle>
+            <p>Added text to the landing page</p>
+            <p>Cleaned up some styling across the site</p>
+            <p>Added a default sort to all of the tables</p>
+          </v-list-item-subtitle>
+        </v-list-item>
+      </v-list>
+    </v-sheet>
+    <v-sheet :elevation="1" class="ma-2 my-4">
+      <h2>Thanks</h2>
+      <p>
+        Special thanks to <span class="font-weight-bold">@marstache</span> from
+        <span class="font-weight-bold">S-183</span> for sharing his version of this in Google Sheets
+        and inspiring me to create this.
+      </p>
+    </v-sheet>
+  </v-sheet>
 </template>
diff --git a/src/views/IntimacyPowerView.vue b/src/views/IntimacyPowerView.vue
new file mode 100644
index 0000000..05c50e7
--- /dev/null
+++ b/src/views/IntimacyPowerView.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import SpecialItemsCard from '@/components/IntimacyPower/SpecialItemsCard.vue'
+import StandardItemsCard from '@/components/IntimacyPower/StandardItemsCard.vue'
+import SummaryCard from '@/components/IntimacyPower/SummaryCard.vue'
+</script>
+
+<template>
+  <v-sheet class="d-flex flex-wrap flex-fill">
+    <StandardItemsCard class="ma-2 align-self-start"/>
+    <SpecialItemsCard class="ma-2 align-self-start"/>
+    <SummaryCard class="ma-2 align-self-start" />
+  </v-sheet>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/settings.scss";
+:deep(tbody) tr:nth-of-type(even) {
+  background-color: rgba(var(--v-theme-primary-darken-1), 0.25);
+}
+</style>