diff --git a/pages/index.vue b/pages/index.vue
index 407c7be..5aa5c8a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,10 +6,20 @@ import { SearchResult } from '~~/models/search-result';
 
 const router = useRouter();
 
+const searchHistory = useCookie<SearchResult[]>('searchHistory');
+searchHistory.value = searchHistory.value || [];
+
 const searchText = ref('');
 const suggestions = ref([]);
 
+// For some odd reason, if you don't do JSON.parse(JSON.stringify),
+// suggestions ref won't get populated.
+const displaySearchHistory = () =>
+  (suggestions.value = JSON.parse(JSON.stringify(searchHistory.value)));
+
 const findPlaylists = async () => {
+  if (searchText.value.length === 0) return displaySearchHistory();
+
   try {
     const urlObject = new URL(searchText.value);
     const [collectionName, playlistId] = urlObject.pathname
@@ -36,7 +46,7 @@ const findPlaylists = async () => {
         }
       ).catch((e) => e.data);
 
-      suggestions.value = searchResults;
+      return (suggestions.value = searchResults);
     } else {
       throw new Error('This is not a valid playlist link');
     }
@@ -47,7 +57,7 @@ const findPlaylists = async () => {
       `/api/playlists/search?title=${searchText.value}`
     );
 
-    suggestions.value = searchResults;
+    return (suggestions.value = searchResults);
   }
 };
 
@@ -56,18 +66,27 @@ const openSnapshotsCalendar = async ({
 }: {
   value: SearchResult;
 }) => {
+  const existingHistoryEntry = searchHistory.value.find(
+    (e) => e.id === entry.id
+  );
+
+  if (searchHistory.value.length === 0 || !existingHistoryEntry) {
+    searchHistory.value.unshift(entry);
+    searchHistory.value = searchHistory.value.slice(0, 10);
+  }
+
   await router.push(`/playlists/${entry.id}/snapshots`);
 };
 </script>
 
 <template>
   <NuxtLayout name="centered-content">
-    <h1 class="m-0 text-5xl">Spotify Playlist Archive</h1>
+    <h1 class="m-0 md:text-5xl text-4xl">Spotify Playlist Archive</h1>
     <div class="flex flex-column justify-content-center text-center">
       <p class="text-xl text-gray-300">
         Browse past versions of thousands of playlists saved over time
       </p>
-      <div class="w-full">
+      <div class="w-full md:px-0 px-3">
         <AutoComplete
           v-model="searchText"
           :suggestions="suggestions"
@@ -75,6 +94,7 @@ const openSnapshotsCalendar = async ({
           placeholder="Type in at least 3 characters, or paste a playlist link"
           field="title"
           :min-length="3"
+          complete-on-focus
           @complete="findPlaylists"
           @item-select="openSnapshotsCalendar"
         />