diff --git a/src/components/tagItem.svelte b/src/components/tagItem.svelte
index a22c1d0..ec99587 100644
--- a/src/components/tagItem.svelte
+++ b/src/components/tagItem.svelte
@@ -4,5 +4,5 @@
 </script>
 
 <a class="list-none p-6 bg-gray-100 text-gray-800 text-center rounded-md shadow-sm hover:shadow-md flex flex-col items-center" href={`/tag/${tag}`} transition:fade>
-    <h2 class="lowercase text-2xl">{tag}</h2>
+    <h2 class="lowercase text-xl">{tag}</h2>
 </a>
diff --git a/src/datastore.js b/src/datastore.js
index 4100127..a008e22 100644
--- a/src/datastore.js
+++ b/src/datastore.js
@@ -13,8 +13,9 @@ export const fetchData = async () => {
         const res = await fetch(data_source);
         const data_json = await res.json();
 
-        console.log('data_json ', data_json);
-        tagslist.set(data.tags);
+        data.set(data_json);
+        tagslist.set(data_json.tags);
+        tagslist.subscribe(array => console.log('tagslist: ', array));
         loaded = true;
     } catch (err) {
         console.log(err);
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 3081299..fb623f1 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -5,17 +5,33 @@
 
     let searchTerm = "";
     let filteredTags = [];
+    let num_tags = 0;
+    let tag = "";
+
+	function saveTag() {
+		console.log('running saveTag with tag: '+ tag);
+        if (filteredTags.includes(tag)) {
+            console.log('We already have tag ', tag);
+            return;
+        }
+		$tagslist = [...$tagslist, tag].sort();
+		console.log('tags: ', $tagslist);
+	}
 
     $: {
         if (searchTerm) {
             //console.log('$tagslist: ', $tagslist);
-            filteredTags = $tagslist.filter(tag => tag.toLowerCast().includes(searchTerm.toLowerCase()));
+            filteredTags = $tagslist.filter(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
         } else {
-            console.log('$tagslist: ', $tagslist);
-            filteredTags = [... $tagslist];
+            //console.log('$tagslist: ', $tagslist);
+            filteredTags = [...$tagslist];
         }
     }
+    $: {
+        num_tags = $tagslist.length;
+    }
     fetchData();
+    //tagslist.subscribe(tags => sortTags(tags));
     //console.log('$tagslist: ', $tagslist);
 </script>
 
@@ -25,9 +41,22 @@
 
 <h1 class="text-4xl my-8 uppercase">WEnotes Course Tag Manager</h1>
 
-<input class="w-full rounded-md text-lg p-4 border-2 border-gray-200" bind:value={searchTerm} placeholder="Search Tags">
+<p>Number of tags: {num_tags}</p>
 
-<div class="py-4 grid gap-4 md:grid-cols-2 grid-cols-1">
+<div class="py-4">
+    <form on:submit|preventDefault={saveTag}>
+    	<label>Add a tag:
+    		<input class="max-w-sm rounded-md text-md p-4 border-2 border-gray-200" bind:value={tag}>
+            <button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700" disabled={!tag}>Save</button>
+    	</label>
+    </form>
+</div>
+
+<label>Filter tags:
+    <input class="max-w-sm rounded-md text-md p-4 border-2 border-gray-200" bind:value={searchTerm} placeholder="Type to filter tags">
+</label>
+
+<div class="py-4 grid gap-4 lg:grid-cols-6 md:grid-cols-4 sm:grid-cols-2 grid-cols-1">
     {#each filteredTags as tag}
         <TagItem tag={tag}/>
     {/each}