diff --git a/package-lock.json b/package-lock.json
index 2907c04..cda3e00 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -109,6 +109,70 @@
         "fastq": "^1.6.0"
       }
     },
+    "@rollup/plugin-commonjs": {
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-20.0.0.tgz",
+      "integrity": "sha512-5K0g5W2Ol8hAcTHqcTBHiA7M58tfmYi1o9KxeJuuRNpGaTa5iLjcyemBitCBcKXaHamOBBEH2dGom6v6Unmqjg==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "commondir": "^1.0.1",
+        "estree-walker": "^2.0.1",
+        "glob": "^7.1.6",
+        "is-reference": "^1.2.1",
+        "magic-string": "^0.25.7",
+        "resolve": "^1.17.0"
+      },
+      "dependencies": {
+        "@rollup/pluginutils": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+          "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+          "dev": true,
+          "requires": {
+            "@types/estree": "0.0.39",
+            "estree-walker": "^1.0.1",
+            "picomatch": "^2.2.2"
+          },
+          "dependencies": {
+            "estree-walker": {
+              "version": "1.0.1",
+              "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+              "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+              "dev": true
+            }
+          }
+        }
+      }
+    },
+    "@rollup/plugin-json": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
+      "integrity": "sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.8"
+      },
+      "dependencies": {
+        "@rollup/pluginutils": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+          "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+          "dev": true,
+          "requires": {
+            "@types/estree": "0.0.39",
+            "estree-walker": "^1.0.1",
+            "picomatch": "^2.2.2"
+          }
+        },
+        "estree-walker": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+          "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+          "dev": true
+        }
+      }
+    },
     "@rollup/pluginutils": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.1.tgz",
@@ -145,6 +209,12 @@
         "svelte-hmr": "^0.14.7"
       }
     },
+    "@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "dev": true
+    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -446,6 +516,12 @@
       "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
       "dev": true
     },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
+      "dev": true
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1056,6 +1132,15 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true
     },
+    "is-reference": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+      "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "*"
+      }
+    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
diff --git a/package.json b/package.json
index 4c12921..9e1bbf5 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-json": "^4.1.0",
     "@sveltejs/kit": "next",
     "autoprefixer": "^10.3.2",
     "eslint": "^7.22.0",
diff --git a/src/datastore.js b/src/datastore.js
index 6b1db3b..4100127 100644
--- a/src/datastore.js
+++ b/src/datastore.js
@@ -8,7 +8,8 @@ let loaded = false;
 export const fetchData = async () => {
     try {
         if (loaded) return;
-        const data_source = '../tags.json';
+        //const data_source = '../tags.json';
+        const data_source = `https://wenotes.oeru.org/resources/feed-sources.json`;
         const res = await fetch(data_source);
         const data_json = await res.json();
 
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index e03bf37..3081299 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,18 +1,22 @@
 <script>
     import "../styles/tailwind.css";
-    import {tagslist, data, fetchData} from "../datastore";
+    import TagItem from "../components/tagItem.svelte";
+    import {tagslist, data, fetchData} from "../datastore.js";
 
     let searchTerm = "";
     let filteredTags = [];
 
     $: {
         if (searchTerm) {
+            //console.log('$tagslist: ', $tagslist);
             filteredTags = $tagslist.filter(tag => tag.toLowerCast().includes(searchTerm.toLowerCase()));
         } else {
+            console.log('$tagslist: ', $tagslist);
             filteredTags = [... $tagslist];
         }
     }
     fetchData();
+    //console.log('$tagslist: ', $tagslist);
 </script>
 
 <svelte:head>
@@ -21,4 +25,13 @@
 
 <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">
+
+<div class="py-4 grid gap-4 md:grid-cols-2 grid-cols-1">
+    {#each filteredTags as tag}
+        <TagItem tag={tag}/>
+    {/each}
+</div>
+
+
 <p>These are used by WEnotes aggregators to compile a feed of learner activity across the open Internet.</p>
diff --git a/svelte.config.js b/svelte.config.js
index b879536..9bafcff 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,4 +1,8 @@
 /** @type {import('@sveltejs/kit').Config} */
+
+import json from '@rollup/plugin-json';
+import commonjs from '@rollup/plugin-commonjs';
+
 const config = {
 	kit: {
 		// hydrate the <div id="svelte"> element in src/app.html