diff --git a/src/components/ItemTypeCategories.vue b/src/components/ItemTypeCategories.vue
new file mode 100644
index 0000000..3cf863b
--- /dev/null
+++ b/src/components/ItemTypeCategories.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import ItemTypeSearch from './ItemTypeSearch.vue';
+import { formatItemType } from '@/utilities/item-type-format';
+import { userStore } from '@/store/user-state';
+import { appStore } from '@/store/app-state';
+import { getItemInfo, type ItemInfo } from '@/models/item-info';
+
+interface Category {
+  name: string;
+  icon: string;
+  items: Item[];
+}
+
+interface Item {
+  type: string;
+  info: ItemInfo | null;
+}
+
+const categories = [
+  {
+    name: "Valuable Resources",
+    icon: "fa-regular fa-gem",
+    items: [
+      { type: "IRON_INGOT", info: getItemInfo("IRON_INGOT") },
+      { type: "IRON_BLOCK", info: getItemInfo("IRON_BLOCK") },
+      { type: "GOLD_INGOT", info: getItemInfo("GOLD_INGOT") },
+      { type: "GOLD_BLOCK", info: getItemInfo("GOLD_BLOCK") },
+      { type: "NETHERITE_INGOT", info: getItemInfo("NETHERITE_INGOT") },
+      { type: "EMERALD", info: getItemInfo("EMERALD") },
+      { type: "EMERALD_BLOCK", info: getItemInfo("EMERALD_BLOCK") },
+      { type: "RAW_COPPER_BLOCK", info: getItemInfo("RAW_COPPER_BLOCK") },
+      { type: "GUNPOWDER", info: getItemInfo("GUNPOWDER") },
+      { type: "HEAVY_CORE", info: getItemInfo("HEAVY_CORE") },
+      { type: "SHULKER_SHELL", info: getItemInfo("SHULKER_SHELL") },
+      { type: "TRIAL_KEY", info: getItemInfo("TRIAL_KEY") },
+      { type: "OMINOUS_TRIAL_KEY", info: getItemInfo("OMINOUS_TRIAL_KEY") },
+      { type: "NETHER_STAR", info: getItemInfo("NETHER_STAR") },
+    ]
+  },
+  {
+    name: "Equipment",
+    icon: "fa-solid fa-hammer",
+    items: [
+      { type: "BEACON", info: getItemInfo("BEACON") },
+      { type: "WAYSTONE", info: getItemInfo("WAYSTONE") },
+      { type: "WARP_PLATE", info: getItemInfo("WARP_PLATE") },
+      { type: "ELYTRA", info: getItemInfo("ELYTRA") },
+      { type: "TOTEM_OF_UNDYING", info: getItemInfo("TOTEM_OF_UNDYING") },
+      { type: "ENCHANTED_BOOK", info: getItemInfo("ENCHANTED_BOOK") },
+      { type: "POTION", info: getItemInfo("POTION") },
+      { type: "SPLASH_POTION", info: getItemInfo("SPLASH_POTION") },
+      { type: "LINGERING_POTION", info: getItemInfo("LINGERING_POTION") },
+      { type: "BEDROCK_DRILL", info: getItemInfo("BEDROCK_DRILL") },
+    ]
+  },
+  {
+    name: "Building Resources",
+    icon: "fa-solid fa-cubes",
+    items: [
+      { type: "OAK_LOG", info: getItemInfo("OAK_LOG") },
+      { type: "SPRUCE_LOG", info: getItemInfo("SPRUCE_LOG") },
+      { type: "PALE_OAK_LOG", info: getItemInfo("PALE_OAK_LOG") },
+      { type: "DARK_OAK_LOG", info: getItemInfo("DARK_OAK_LOG") },
+      { type: "BIRCH_LOG", info: getItemInfo("BIRCH_LOG") },
+      { type: "CHERRY_LOG", info: getItemInfo("CHERRY_LOG") },
+      { type: "JUNGLE_LOG", info: getItemInfo("JUNGLE_LOG") },
+      { type: "MANGROVE_LOG", info: getItemInfo("MANGROVE_LOG") },
+      { type: "ACACIA_LOG", info: getItemInfo("ACACIA_LOG") },
+      { type: "BONE_BLOCK", info: getItemInfo("BONE_BLOCK") },
+      { type: "STONE", info: getItemInfo("STONE") },
+      { type: "DIRT", info: getItemInfo("DIRT") },
+      { type: "COBBLED_DEEPSLATE", info: getItemInfo("COBBLED_DEEPSLATE") },
+    ]
+  },
+  {
+    name: "Art",
+    icon: "fa-solid fa-palette",
+    items: [
+      { type: "PAINTING", info: getItemInfo("PAINTING") },
+      { type: "PALETTE", info: getItemInfo("PALETTE") },
+      { type: "CAMERA_PICTURE", info: getItemInfo("CAMERA_PICTURE") },
+      { type: "CAMERA", info: getItemInfo("CAMERA") },
+      { type: "WRITTEN_BOOK", info: getItemInfo("WRITTEN_BOOK") },
+      { type: "CUSTOM_MUSIC_DISC", info: getItemInfo("CUSTOM_MUSIC_DISC") },
+      { type: "LUA_FISH_MUSIC_BOOK", info: getItemInfo("LUA_FISH_MUSIC_BOOK") },
+      { type: "FILLED_MAP", info: getItemInfo("FILLED_MAP") },
+      { type: "PLAYER_HEAD", info: getItemInfo("PLAYER_HEAD") },
+    ]
+  }
+] as Category[];
+
+if (appStore.selectedItemCategory == null)
+  appStore.selectedItemCategory = categories[0]!.name;
+
+const categoryItems = computed(() => {
+  if (appStore.selectedItemCategory == "Recent") {
+    return userStore.recentlyViewedItems
+      .reverse()
+      .map(i => ({
+        type: i,
+        info: getItemInfo(i)
+      })) as Item[];
+  }
+
+  let category = categories.find(c => c.name == appStore.selectedItemCategory);
+  return category?.items ?? [];
+});
+
+
+function selectCategory(name: string) {
+  appStore.selectedItemCategory = name;
+}
+
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <!-- Categories -->
+    <div class="flex flex-row gap-1 mb-1">
+      <div v-for="category in categories" class="item-button category"
+        :class="{ 'active': appStore.selectedItemCategory == category.name }" @click="selectCategory(category.name)">
+        <div class="text-2xl"><font-awesome-icon :icon="category.icon" /></div>
+      </div>
+
+      <div class="flex-grow"></div>
+
+      <!-- Recent items -->
+      <div class="item-button category" :class="{ 'active': appStore.selectedItemCategory == 'Recent' }"
+        @click="selectCategory('Recent')">
+        <div class="text-2xl"><font-awesome-icon icon="fa-solid fa-clock-rotate-left" /></div>
+      </div>
+    </div>
+
+    <!-- Body -->
+    <div class="flex flex-col p-2 gap-2 bg-gray-800 border border-gray-700 rounded">
+      <!-- Search -->
+      <div class="flex flex-col md:flex-row border-b-2 border-gray-700 pb-2">
+        <ItemTypeSearch @selection="
+          (itemType) => {
+            if (itemType) $router.push({ name: 'itemSales', params: { itemType: itemType } });
+          }
+        ">
+        </ItemTypeSearch>
+      </div>
+
+      <!-- Item types -->
+      <div class="flex flex-row flex-wrap gap-1 content-start justify-center max-h-48 h-auto overflow-x-scroll">
+        <RouterLink v-for="item in categoryItems" :to="{ name: 'itemSales', params: { itemType: item.type } }"
+          class="item-button" :title="formatItemType(item.type).toLocaleLowerCase()">
+
+          <!-- Item icon/picture -->
+          <div v-if="item.info?.icon" class="text-xl">
+            <font-awesome-icon :icon="item.info.icon" />
+          </div>
+          <div v-else-if="item.info?.picture">
+            <img :src="item.info.picture" class="size-6" />
+          </div>
+
+          <!-- Item name -->
+          <div class="text-xs capitalize overflow-hidden text-ellipsis">
+            {{ formatItemType(item.type).toLocaleLowerCase() }}
+          </div>
+        </RouterLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="css" scoped>
+@import "tailwindcss";
+
+.item-button {
+  @apply p-1 w-18 h-18 gap-1 bg-gray-700 hover:bg-gray-600 flex flex-col items-center text-center justify-center text-gray-300 rounded cursor-pointer;
+}
+
+.item-button.category {
+  @apply w-15 h-15;
+}
+
+.item-button.category.active {
+  @apply text-gray-700 bg-gray-300;
+}
+</style>
diff --git a/src/components/ItemTypeOverview.vue b/src/components/ItemTypeOverview.vue
index 419844d..033b95f 100644
--- a/src/components/ItemTypeOverview.vue
+++ b/src/components/ItemTypeOverview.vue
@@ -23,6 +23,7 @@ import { itemsStore } from "@/store/items-state";
 import { debounce } from "lodash";
 import { setPageTitle } from "@/router/pageTitle";
 import { capitalizeFirstLetter } from "@/utilities/text-format";
+import { userStore } from "@/store/user-state";
 
 interface Props {
   itemType: string;
@@ -80,6 +81,8 @@ watch(customDiscFilter, async (_, __) => {
 onMounted(async () => {
   initFlowbite(); // Include on any component where you need flowbite JS functionality
 
+  userStore.addRecentlyViewedItem(props.itemType);
+
   setPageTitle(capitalizeFirstLetter(formatItemType(props.itemType).toLocaleLowerCase()));
 
   // Load sales with any filters
@@ -144,10 +147,10 @@ async function loadEnchantments(): Promise<DropdownOption[]> {
   return uniqueItems
     .map(
       (i: string) =>
-        ({
-          text: formatEnchantment(i),
-          value: i,
-        } as DropdownOption)
+      ({
+        text: formatEnchantment(i),
+        value: i,
+      } as DropdownOption)
     )
     .sort((a, b) => a.text.localeCompare(b.text));
 }
@@ -174,10 +177,10 @@ async function loadPotions(): Promise<DropdownOption[]> {
   return uniqueItems
     .map(
       (i: string) =>
-        ({
-          text: formatPotionEffect(i),
-          value: i,
-        } as DropdownOption)
+      ({
+        text: formatPotionEffect(i),
+        value: i,
+      } as DropdownOption)
     )
     .sort((a, b) => a.text.localeCompare(b.text));
 }
@@ -241,7 +244,9 @@ function getWikiLink() {
     frags[i] = frags[i]!.charAt(0).toUpperCase() + frags[i]!.slice(1);
   }
 
-  return `https://minecraft.wiki/w/${frags.join("_")}`;
+  let itemName = frags.join("_").replace("Of", "of");
+
+  return `https://minecraft.wiki/w/${itemName}`;
 }
 </script>
 
@@ -249,42 +254,59 @@ function getWikiLink() {
   <div class="flex flex-col gap-8">
     <div class="mb-2 flex flex-col gap-4">
       <div class="flex flex-row items-center justify-center">
-        <ItemTypeSearch
-          @selection="
-            (itemType) => {
-              if (itemType) $router.push({ name: 'itemSales', params: { itemType: itemType } });
-            }
-          ">
+        <ItemTypeSearch @selection="
+          (itemType) => {
+            if (itemType) $router.push({ name: 'itemSales', params: { itemType: itemType } });
+          }
+        ">
         </ItemTypeSearch>
       </div>
     </div>
 
     <!-- Item info -->
     <div class="flex flex-col gap-4">
-      <div class="flex flex-col">
-        <!-- Item type and description -->
-        <h1 class="text-3xl font-bold capitalize">{{ formatItemType(itemType)?.toLocaleLowerCase() }}</h1>
-        <p class="text-gray-300" v-if="itemInfo?.description">{{ itemInfo.description }}</p>
-
-        <!-- Specific item type info -->
-        <p class="text-gray-300" v-if="numUndiscoveredMusicDiscs > 0">
-          {{ numUndiscoveredMusicDiscs }} custom discs have not been sold yet (possibly undiscovered).
-        </p>
+      <div class="flex flex-row justify-between gap-4 items-center">
+        <!-- Item Info -->
+        <div class="flex flex-col">
+          <!-- Item type -->
+          <h1 class="text-3xl font-bold capitalize">{{ formatItemType(itemType)?.toLocaleLowerCase() }}</h1>
 
-        <!-- More info -->
-        <p class="text-xs" v-if="itemInfo?.moreInfoLink">
-          <a :href="itemInfo.moreInfoLink" class="hyperlink" target="_blank">More info</a>
-        </p>
-        <p class="text-xs" v-else-if="!itemInfo?.hideWikiLink">
-          <a :href="getWikiLink()" class="hyperlink" target="_blank">Minecraft Wiki</a>
-        </p>
+
+
+          <!-- Description -->
+          <p class="text-gray-300" v-if="itemInfo?.description">{{ itemInfo.description }}</p>
+
+          <!-- Specific item type info -->
+          <p class="text-gray-300" v-if="numUndiscoveredMusicDiscs > 0">
+            {{ numUndiscoveredMusicDiscs }} custom discs have not been sold yet (possibly undiscovered).
+          </p>
+
+          <!-- More info -->
+          <p class="text-xs" v-if="itemInfo?.moreInfoLink">
+            <a :href="itemInfo.moreInfoLink" class="hyperlink" target="_blank">More info</a>
+          </p>
+          <p class="text-xs" v-else-if="!itemInfo?.hideWikiLink">
+            <a :href="getWikiLink()" class="hyperlink" target="_blank">Minecraft Wiki</a>
+          </p>
+        </div>
+
+        <!-- Item icon/picture -->
+        <div>
+          <div v-if="itemInfo?.icon" class="text-5xl">
+            <font-awesome-icon :icon="itemInfo.icon" />
+          </div>
+          <div v-else-if="itemInfo?.picture" class="size-[48px]">
+            <img :src="itemInfo.picture" />
+          </div>
+        </div>
       </div>
 
       <!-- Villager trades -->
       <div class="flex flex-col" v-if="villagerTrades.length > 0">
         <h2 class="text-xl font-bold capitalize">Villager Trade</h2>
         <p class="text-gray-300" v-for="villagerTrade in villagerTrades">
-          {{ villagerTrade.villager }}: {{ villagerTrade.price }} {{ villagerTrade.currency }} for {{ villagerTrade.quantity }}
+          {{ villagerTrade.villager }}: {{ villagerTrade.price }} {{ villagerTrade.currency }} for {{
+            villagerTrade.quantity }}
           {{ villagerTrade.itemType }} {{ villagerTrade.extraInfo ? `(${villagerTrade.extraInfo})` : "" }}
         </p>
         <p class="text-gray-300 text-xs">
@@ -302,31 +324,17 @@ function getWikiLink() {
         </div>
 
         <div class="flex flex-row flex-wrap gap-1 items-end">
-          <DropdownFilter
-            v-if="enchantments.length > 0"
-            :placeholder="'Enchantments'"
-            :icon="'fa-solid fa-wand-sparkles'"
-            :options="enchantments"
-            :single-selection="true"
+          <DropdownFilter v-if="enchantments.length > 0" :placeholder="'Enchantments'"
+            :icon="'fa-solid fa-wand-sparkles'" :options="enchantments" :single-selection="true"
             v-model="enchantmentFilter">
           </DropdownFilter>
 
-          <DropdownFilter
-            v-if="potionEffects.length > 0"
-            :placeholder="'Potion Effect'"
-            :icon="'fa-solid fa-flask'"
-            :options="potionEffects"
-            :single-selection="true"
-            v-model="potionEffectFilter">
+          <DropdownFilter v-if="potionEffects.length > 0" :placeholder="'Potion Effect'" :icon="'fa-solid fa-flask'"
+            :options="potionEffects" :single-selection="true" v-model="potionEffectFilter">
           </DropdownFilter>
 
-          <DropdownFilter
-            v-if="customDiscs.length > 0"
-            :placeholder="'Custom Discs'"
-            :icon="'fa-solid fa-record-vinyl'"
-            :options="customDiscs"
-            :single-selection="true"
-            v-model="customDiscFilter">
+          <DropdownFilter v-if="customDiscs.length > 0" :placeholder="'Custom Discs'" :icon="'fa-solid fa-record-vinyl'"
+            :options="customDiscs" :single-selection="true" v-model="customDiscFilter">
           </DropdownFilter>
 
           <SearchBox :placeholder="'Item Name'" v-model="nameFilter"></SearchBox>
@@ -351,39 +359,24 @@ function getWikiLink() {
         </div>
 
         <div class="flex flex-row flex-wrap gap-1 items-end">
-          <DropdownFilter
-            v-if="enchantments.length > 0"
-            :placeholder="'Enchantments'"
-            :icon="'fa-solid fa-wand-sparkles'"
-            :options="enchantments"
-            :single-selection="true"
+          <DropdownFilter v-if="enchantments.length > 0" :placeholder="'Enchantments'"
+            :icon="'fa-solid fa-wand-sparkles'" :options="enchantments" :single-selection="true"
             v-model="enchantmentFilter">
           </DropdownFilter>
 
-          <DropdownFilter
-            v-if="potionEffects.length > 0"
-            :placeholder="'Potion Effect'"
-            :icon="'fa-solid fa-flask'"
-            :options="potionEffects"
-            :single-selection="true"
-            v-model="potionEffectFilter">
+          <DropdownFilter v-if="potionEffects.length > 0" :placeholder="'Potion Effect'" :icon="'fa-solid fa-flask'"
+            :options="potionEffects" :single-selection="true" v-model="potionEffectFilter">
           </DropdownFilter>
 
-          <DropdownFilter
-            v-if="customDiscs.length > 0"
-            :placeholder="'Custom Discs'"
-            :icon="'fa-solid fa-record-vinyl'"
-            :options="customDiscs"
-            :single-selection="true"
-            v-model="customDiscFilter">
+          <DropdownFilter v-if="customDiscs.length > 0" :placeholder="'Custom Discs'" :icon="'fa-solid fa-record-vinyl'"
+            :options="customDiscs" :single-selection="true" v-model="customDiscFilter">
           </DropdownFilter>
 
           <SearchBox :placeholder="'Item Name'" v-model="nameFilter"></SearchBox>
         </div>
       </div>
 
-      <div
-        v-if="itemInfo?.shopCaveats"
+      <div v-if="itemInfo?.shopCaveats"
         class="p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300"
         role="alert">
         {{ itemInfo.shopCaveats }}
diff --git a/src/font-awesome.ts b/src/font-awesome.ts
index f00f9bc..18573e5 100644
--- a/src/font-awesome.ts
+++ b/src/font-awesome.ts
@@ -41,12 +41,16 @@ import {
   faPalette,
   faTrowel,
   faPhotoFilm,
+  faCubes,
+  faHammer,
+  faClockRotateLeft,
   // Don't forget to add it below too!
 } from "@fortawesome/free-solid-svg-icons";
 
 // Regular icons
 import {
   faHeart as farHeart,
+  faGem as farGem,
   // Don't forget to add it below too!
 } from "@fortawesome/free-regular-svg-icons";
 
@@ -91,4 +95,8 @@ library.add(
   faPalette,
   faTrowel,
   faPhotoFilm,
+  farGem,
+  faCubes,
+  faHammer,
+  faClockRotateLeft,
 );
diff --git a/src/models/item-info.ts b/src/models/item-info.ts
index 70edb8d..b61edb4 100644
--- a/src/models/item-info.ts
+++ b/src/models/item-info.ts
@@ -1,12 +1,10 @@
 export interface ItemInfo {
-  itemType: string;
-  displayName: string;
   description?: string;
   moreInfoLink?: string;
   hideWikiLink?: boolean;
-  isSpecialItem?: boolean;
-  icon?: string;
   shopCaveats?: string;
+  icon?: string | null;
+  picture?: string | null;
 }
 
 const itemInfo = {} as { [itemType: string]: ItemInfo };
@@ -16,127 +14,110 @@ export function getItemInfo(itemType?: string): ItemInfo | null {
   return itemInfo[itemType] ?? null;
 }
 
-export function getSpecialItems(): ItemInfo[] {
-  return specialItems;
-}
-
-// Item info
+// CUSTOM ITEMS
 itemInfo["ENCHANTED_BOOK"] = {
-  itemType: "ENCHANTED_BOOK",
-  displayName: "Enchanted Books",
-  icon: "fa-solid fa-book-bookmark",
-  isSpecialItem: true,
   description: "A book with one or more enchantments, used to enchant other items.",
+  picture: "https://minecraft.wiki/images/Enchanted_Book.gif?b21c4"
 };
 itemInfo["POTION"] = {
-  itemType: "POTION",
-  displayName: "Potions",
-  icon: "fa-solid fa-flask",
-  isSpecialItem: true,
   description: "A regular potion with a status effect that you have to drink.",
+  picture: "https://minecraft.wiki/images/Water_Bottle_JE2_BE2.png?acae5",
 };
 itemInfo["SPLASH_POTION"] = {
-  itemType: "SPLASH_POTION",
-  displayName: "Splash Potions",
-  icon: "fa-solid fa-flask",
-  isSpecialItem: true,
   description: "A throwable potion with a status effect.",
+  picture: "https://minecraft.wiki/images/Splash_Water_Bottle_JE2_BE2.png?7a92d",
 };
 itemInfo["LINGERING_POTION"] = {
-  itemType: "LINGERING_POTION",
-  displayName: "Lingering Potions",
-  icon: "fa-solid fa-flask",
-  isSpecialItem: true,
   description: "A throwable potion which creates a cloud with a status effect.",
+  picture: "https://minecraft.wiki/images/Lingering_Water_Bottle_JE2_BE2.png?ed26b",
 };
 itemInfo["CUSTOM_MUSIC_DISC"] = {
-  itemType: "CUSTOM_MUSIC_DISC",
-  displayName: "Custom Music Discs",
-  icon: "fa-solid fa-record-vinyl",
-  isSpecialItem: true,
   description: "Music discs with custom songs. They may sometimes be shown as music disc 11.",
-  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/custom-music-discs"
+  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/custom-music-discs",
+  icon: "fa-solid fa-record-vinyl"
 };
 itemInfo["LUA_FISH_MUSIC_BOOK"] = {
-  itemType: "LUA_FISH_MUSIC_BOOK",
-  displayName: "Custom Music Books",
-  icon: "fa-solid fa-file-audio",
-  isSpecialItem: true,
   description: "Written books that can be used on the Lua_Fish record player to play music.",
   hideWikiLink: true,
+  icon: "fa-solid fa-file-audio",
 };
 itemInfo["PAINTING"] = {
-  itemType: "PAINTING",
-  displayName: "Player Paintings",
-  icon: "fa-solid fa-image",
-  isSpecialItem: true,
   description: "Paintings created by the players of the server",
   moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/joy-of-painting",
+  icon: "fa-solid fa-image",
 };
 itemInfo["PALETTE"] = {
-  itemType: "PALETTE",
-  displayName: "Palette",
-  icon: "fa-solid fa-palette",
-  isSpecialItem: true,
   description: "Used with a blank canvas to create a painting.",
   moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/joy-of-painting",
+  icon: "fa-solid fa-palette",
 };
 itemInfo["FILLED_MAP"] = {
-  itemType: "FILLED_MAP",
-  displayName: "Map Artwork",
-  icon: "fa-solid fa-map",
-  isSpecialItem: true,
   description: "Maps used to display artwork. Includes regular maps too",
   shopCaveats: "Shop listings will include regular maps as well as map artwork.",
+  icon: "fa-solid fa-map",
 };
 itemInfo["WAYSTONE"] = {
-  itemType: "WAYSTONE",
-  displayName: "Waystones",
-  icon: "fa-solid fa-chess-rook",
-  isSpecialItem: true,
   description: "Makes it easier for players to teleport back to a location like a town.",
-  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/waystones"
+  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/waystones",
+  icon: "fa-solid fa-chess-rook"
 };
 itemInfo["WARP_PLATE"] = {
-  itemType: "WARP_PLATE",
-  displayName: "Warp Plates",
-  icon: "fa-solid fa-layer-group",
-  isSpecialItem: true,
   description: "Allows teleporting between two locations by linking two warp plates together.",
-  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/warp-plates"
+  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/warp-plates",
+  icon: "fa-solid fa-layer-group"
 };
 itemInfo["CAMERA"] = {
-  itemType: "CAMERA",
-  displayName: "Camera",
-  icon: "fa-solid fa-camera",
-  isSpecialItem: true,
   description: "Can be used with gunpowder to take in-game pictures!",
-  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/camerapture"
+  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/camerapture",
+  icon: "fa-solid fa-camera"
 };
 itemInfo["CAMERA_PICTURE"] = {
-  itemType: "CAMERA_PICTURE",
-  displayName: "Camera Picture",
-  icon: "fa-solid fa-photo-film",
-  isSpecialItem: true,
   description: "Pictures taken using the in-game camera",
-  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/camerapture"
+  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/camerapture",
+  icon: "fa-solid fa-photo-film"
 };
 itemInfo["PLAYER_HEAD"] = {
-  itemType: "PLAYER_HEAD",
-  displayName: "Player Heads",
-  icon: "fa-solid fa-cube",
-  isSpecialItem: true,
   description: "Can be used as decoration. Some have additional functionality through Figura.",
+  picture: "https://minecraft.wiki/images/Player_Head_%28S%29_JE2.png?6f81f",
 };
 itemInfo["BEDROCK_DRILL"] = {
-  itemType: "BEDROCK_DRILL",
-  displayName: "Bedrock Drill",
-  icon: "fa-solid fa-trowel",
-  isSpecialItem: true,
   description: "Destroys blocks of bedrock.",
-  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/fung-tech-bedrock-drill"
+  moreInfoLink: "https://docs.callmecarson.live/books/smp-online/page/fung-tech-bedrock-drill",
+  icon: "fa-solid fa-trowel",
 };
 
-const specialItems = Object.keys(itemInfo)
-  .map((itemType) => itemInfo[itemType]!)
-  .filter((i) => i != undefined && i.isSpecialItem);
+
+// VANILLA ITEMS
+itemInfo["IRON_INGOT"] = { picture: "https://minecraft.wiki/images/Iron_Ingot_JE3_BE2.png?849cb" };
+itemInfo["IRON_BLOCK"] = { picture: "https://minecraft.wiki/images/Block_of_Iron_JE4_BE3.png?18948" };
+itemInfo["GOLD_INGOT"] = { picture: "https://minecraft.wiki/images/Gold_Ingot_JE4_BE2.png?80cd6" };
+itemInfo["GOLD_BLOCK"] = { picture: "https://minecraft.wiki/images/Block_of_Gold_JE6_BE3.png?09478" };
+itemInfo["NETHERITE_INGOT"] = { picture: "https://minecraft.wiki/images/Netherite_Ingot_JE1_BE2.png?79364" };
+itemInfo["EMERALD"] = { picture: "https://minecraft.wiki/images/Emerald_JE3_BE3.png?4c5f3" };
+itemInfo["EMERALD_BLOCK"] = { picture: "https://minecraft.wiki/images/Block_of_Emerald_JE4_BE3.png?d5a3c" };
+itemInfo["RAW_COPPER_BLOCK"] = { picture: "https://minecraft.wiki/images/Block_of_Raw_Copper_JE2_BE2.png?a4e9a" };
+itemInfo["GUNPOWDER"] = { picture: "https://minecraft.wiki/images/Gunpowder_JE2_BE2.png?c4145" };
+itemInfo["HEAVY_CORE"] = { picture: "https://minecraft.wiki/images/Heavy_Core_JE1_BE1.png?57df9" };
+itemInfo["SHULKER_SHELL"] = { picture: "https://minecraft.wiki/images/Shulker_Shell_JE2_BE2.png?f3027" };
+itemInfo["TRIAL_KEY"] = { picture: "https://minecraft.wiki/images/Trial_Key_JE2_BE2.png?a203a" };
+itemInfo["OMINOUS_TRIAL_KEY"] = { picture: "https://minecraft.wiki/images/Ominous_Trial_Key_JE1_BE1.png?56dd6" };
+itemInfo["NETHER_STAR"] = { picture: "https://minecraft.wiki/images/Nether_Star.gif?fb01f" };
+itemInfo["BEACON"] = { picture: "https://minecraft.wiki/images/Beacon_JE6_BE2.png?684bf" };
+itemInfo["ELYTRA"] = { picture: "https://minecraft.wiki/images/Elytra_%28item%29_JE1_BE1.png?8f01d" };
+itemInfo["TOTEM_OF_UNDYING"] = { picture: "https://minecraft.wiki/images/Totem_of_Undying_JE2_BE2.png?d56eb" };
+itemInfo["OAK_LOG"] = { picture: "https://minecraft.wiki/images/Oak_Log_%28UD%29_JE8_BE3.png" };
+itemInfo["SPRUCE_LOG"] = { picture: "https://minecraft.wiki/images/Spruce_Log_(UD)_JE8_BE4.png" };
+itemInfo["PALE_OAK_LOG"] = { picture: "https://minecraft.wiki/images/Pale_Oak_Log_(UD)_JE1_BE1.png" };
+itemInfo["DARK_OAK_LOG"] = { picture: "https://minecraft.wiki/images/Dark_Oak_Log_(UD)_JE9_BE4.png" };
+itemInfo["BIRCH_LOG"] = { picture: "https://minecraft.wiki/images/Birch_Log_(UD)_JE8_BE4.png" };
+itemInfo["CHERRY_LOG"] = { picture: "https://minecraft.wiki/images/Cherry_Log_(UD)_JE1_BE1.png" };
+itemInfo["JUNGLE_LOG"] = { picture: "https://minecraft.wiki/images/Jungle_Log_(UD)_JE9_BE4.png" };
+itemInfo["MANGROVE_LOG"] = { picture: "https://minecraft.wiki/images/Mangrove_Log_(UD)_JE1_BE1.png" };
+itemInfo["ACACIA_LOG"] = { picture: "https://minecraft.wiki/images/Acacia_Log_(UD)_JE8_BE3.png" };
+itemInfo["BONE_BLOCK"] = { picture: "https://minecraft.wiki/images/Bone_Block_%28UD%29_JE2_BE2.png?21f6b" };
+itemInfo["STONE"] = { picture: "https://minecraft.wiki/images/Stone_JE5_BE3.png?5780c" };
+itemInfo["DIRT"] = { picture: "https://minecraft.wiki/images/Dirt_JE2_BE2.png?438ac" };
+itemInfo["COBBLED_DEEPSLATE"] = { picture: "https://minecraft.wiki/images/Cobbled_Deepslate.png?86523" };
+itemInfo["WRITTEN_BOOK"] = { picture: "https://minecraft.wiki/images/Written_Book_JE2_BE2.gif?c6510" };
+
+
diff --git a/src/store/app-state.ts b/src/store/app-state.ts
new file mode 100644
index 0000000..cfb001c
--- /dev/null
+++ b/src/store/app-state.ts
@@ -0,0 +1,5 @@
+import { reactive } from "vue";
+
+export const appStore = reactive({
+  selectedItemCategory: null as string | null
+});
diff --git a/src/store/user-state.ts b/src/store/user-state.ts
index 613191b..a80b67b 100644
--- a/src/store/user-state.ts
+++ b/src/store/user-state.ts
@@ -9,6 +9,7 @@ export interface User {
 export const userStore = reactive({
   user: null as User | null,
   jwt: null as string | null,
+  recentlyViewedItems: [] as string[],
 
   // Data management
   login(jwt: string, user: User) {
@@ -18,6 +19,17 @@ export const userStore = reactive({
   },
 
   load() {
+    // Load recently viewed items
+    let rawRecentItems = localStorage.getItem("recentlyViewedItems");
+    if (rawRecentItems != null) {
+      try {
+        this.recentlyViewedItems = JSON.parse(rawRecentItems);
+      } catch (error) {
+        localStorage.removeItem("recentlyViewedItems");
+      }
+    }
+
+    // Load JWT
     this.jwt = localStorage.getItem("userToken");
     if (this.jwt == null) return;
 
@@ -43,4 +55,18 @@ export const userStore = reactive({
     this.user = null;
     localStorage.removeItem("userToken");
   },
+
+  addRecentlyViewedItem(itemType: string) {
+    let existingIndex = this.recentlyViewedItems.findIndex(i => i == itemType);
+    if (existingIndex !== -1) {
+      this.recentlyViewedItems.splice(existingIndex, 1);
+    }
+
+    this.recentlyViewedItems.push(itemType);
+
+    let itemsToRemove = Math.max(0, this.recentlyViewedItems.length - 16);
+    this.recentlyViewedItems = this.recentlyViewedItems.slice(itemsToRemove);
+
+    localStorage.setItem("recentlyViewedItems", JSON.stringify(this.recentlyViewedItems));
+  }
 });
diff --git a/src/utilities/item-type-format.ts b/src/utilities/item-type-format.ts
index 800437b..b7044dd 100644
--- a/src/utilities/item-type-format.ts
+++ b/src/utilities/item-type-format.ts
@@ -1,5 +1,6 @@
 export function formatItemType(itemType: string | null | undefined, defaultValue?: string | null | undefined): string {
   if (!itemType) return defaultValue ?? "";
 
+  // TODO: Lowercase & capitalise first letter. Some places that use this want it uppercase; make them upper case it
   return itemType.replace(/_/g, " ");
 }
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 2eeeb08..f59fc1b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,10 +3,9 @@ import type { SaleSummary } from "@/api/sales/saleSummary";
 import { onMounted, ref } from "vue";
 import * as SalesAPI from "@/api/sales/api";
 import RecentSales from "@/components/RecentSales.vue";
-import ItemTypeSearch from "@/components/ItemTypeSearch.vue";
-import { getSpecialItems } from "@/models/item-info";
 import { serverStore } from "@/store/server-state";
 import { formatNumber } from "@/utilities/number-format";
+import ItemTypeCategories from "@/components/ItemTypeCategories.vue";
 
 const loading = ref(true);
 const recentSales = ref([] as SaleSummary[]);
@@ -29,6 +28,8 @@ async function loadSales() {
   noMoreResults.value = newSales.length === 0;
   loading.value = false;
 }
+
+
 </script>
 
 <template>
@@ -38,32 +39,8 @@ async function loadSales() {
       <div class="text-gray-300">See sales and shops for an item</div>
     </div>
 
-    <div class="flex flex-row items-center justify-center">
-      <ItemTypeSearch @selection="
-        (itemType) => {
-          if (itemType) $router.push({ name: 'itemSales', params: { itemType: itemType } });
-        }
-      ">
-      </ItemTypeSearch>
-    </div>
-  </div>
-
-  <div class="mb-8">
-    <div class="mb-3 flex flex-row justify-between items-end">
-      <div>
-        <h1 class="text-3xl font-bold">Special Items</h1>
-      </div>
-    </div>
-
-    <div class="flex flex-row flex-wrap gap-2 md:gap-3 mb-6">
-      <RouterLink v-for="item in getSpecialItems()" :to="{ name: 'itemSales', params: { itemType: item.itemType } }">
-        <div
-          class="p-1 w-20 h-20 gap-1 md:p-3 md:w-27 md:h-27 md:gap-2 bg-gray-800 flex flex-col items-center text-center justify-center text-gray-300 border-1 border-gray-700 rounded-lg">
-          <div class="text-xl md:text-3xl"><font-awesome-icon :icon="item.icon" /></div>
-          <div class="text-xs md:text-sm">{{ item.displayName }}</div>
-        </div>
-      </RouterLink>
-    </div>
+    <!-- Item type selector -->
+    <ItemTypeCategories></ItemTypeCategories>
   </div>
 
   <div class="mb-8">
diff --git a/src/views/ItemTypeView.vue b/src/views/ItemTypeView.vue
index dbe47e9..30fb40f 100644
--- a/src/views/ItemTypeView.vue
+++ b/src/views/ItemTypeView.vue
@@ -13,5 +13,6 @@ onMounted(async () => {
 </script>
 
 <template>
+  <!-- TODO: Bring ItemTypeOverview content into here -->
   <ItemTypeOverview :item-type="itemType"></ItemTypeOverview>
 </template>