diff --git a/src/lib/components/Filterable.svelte b/src/lib/components/Filterable.svelte
new file mode 100644
index 0000000..e454e2c
--- /dev/null
+++ b/src/lib/components/Filterable.svelte
@@ -0,0 +1,145 @@
+<script>
+	//import { setFilter, getFilter } from './filters';
+
+	// default selectAll value
+	let selectAll = true;
+	export let tabindex = 0;
+	export let context = 'none';
+	export let filterValues;
+	console.log('Filterable contextFilter: ', filterValues);
+	let activeFiltersString = 'None';
+
+	//
+	// printing output for filter
+	let isActive = [];
+	let filterText = 'none';
+
+	const formatter = new Intl.ListFormat('en', {
+	  style: 'long',
+	  type: 'conjunction',
+	});
+
+	function joinActive(isActive) {
+		console.log('joinActive');
+		console.log('filterValues: ', filterValues);
+		if (isActive.length) return formatter.format(isActive);
+		return 'None';
+	}
+
+	function getActive($f) {
+		let isActive = [];
+		//console.log('getActive type for filterValues: ', filterValues.constructor);
+		// use the global (to this component) variable
+		$f.forEach(function(filter, index) {
+			if (filter.active) {
+				isActive = [...isActive, filter.name];
+			}
+ 		});
+		return isActive;
+	}
+
+	// active is an array of active filter filterValues
+	export function filterVerbage(active) {
+		console.log('l = ', active.length);
+		if (active.length == 1) return 'filter is';
+		else return 'filters are';
+	}
+
+	//
+	// managing filter values
+	function updateFilterValues(filter) {
+		console.log('filter ('+ filter.id + ') has state ' + filter.active + '...');
+		$filterValues.forEach(function(b, i) {
+			console.log('b: ', b);
+			if (b.id == filter.id) { $filterValues[i].active = filter.active; }
+		})
+		return filterValues;
+	}
+
+	function allNoneActive() {
+		selectAll = !selectAll;
+		$filterValues.forEach(function(b, i) { $filterValues[i].active = selectAll; });
+	}
+
+	function invertActive() {
+		$filterValues.forEach(function(b, i) {
+			$filterValues[i].active = !$filterValues[i].active;
+		});
+	}
+
+	$: {
+		//console.log('doh! ', $filterValues);
+		isActive = getActive($filterValues);
+		activeFiltersString = joinActive(isActive);
+		filterText = filterVerbage(isActive);
+	}
+</script>
+
+<slot name="h2"><h2>Test Array</h2></slot>
+
+<div class="actions">
+	<span class="allNone" role="button" tabindex={tabindex++} on:click={() => allNoneActive()}
+		on:keypress={() => allNoneActive()}>select all/none</span><wbr/>
+	<span class="invert" role="button" tabindex={tabindex++} on:click={() => invertActive()}
+		on:keypress={() => invertActive()}>invert selection</span>
+</div>
+<div class='container'>
+{#each $filterValues as filter (filter.id)}
+	<span class="filter {context}" class:active={filter.active}
+		on:click="{() => { filter.active = !filter.active; updateFilterValues(filter);}}"
+		on:keypress="{() => {filter.active = !filter.active; updateFilterValues(filter);}}"
+		name="{filter.id}" role="button" tabindex={tabindex + filter.id}>{filter.name} ({filter.id})</span><wbr/>
+{/each}
+</div>
+
+<p>{activeFiltersString} {filterText} active.</p>
+
+<style>
+	h2 {
+	  margin-bottom: 0.2em;
+	}
+	.actions {
+		display: inline;
+		color: #444;
+		/*width: 100%;*/
+		background-color: #eee;
+		border: 1px solid #ddd;
+		padding: 4px 8px;
+	}
+	.actions span {
+		margin-right: 1em;
+		margin-bottom: 1em;
+		cursor: pointer;
+	}
+	.actions span:hover { color: #000; }
+	.actions span:last { margin-right: 0px; }
+	.container {
+		line-height: 3em;
+		width:  90%;
+		padding: 1em 0 0 0;
+		/*display: grid;
+		grid-gap: 4px;
+		grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));*/
+	}
+	.filter {
+		width: 80px;
+		height: auto;
+		border: 1px #aaa solid;
+		background-color: #eee;
+		padding: 10px;
+		box-shadow: 4px 4px 3px #aaa;
+		border-radius: 6px;
+		cursor: pointer;
+		white-space: nowrap;
+		word-break: normal;
+		margin: 1.5em 1em 2em 0;
+	}
+	.filter:hover {
+		box-shadow: 6px 6px 5px #aaa;
+		border-color: #222;
+	}
+	.active {
+		background-color: lightblue;
+		border-color: blue;
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b10f3e4..36975f4 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,11 +6,12 @@
 	import { references } from '$lib/references.js';
 	import { colours } from '$lib/colours.js';
 
+	import { setFilter, getFilter } from '$lib/components/filter.js';
+	import Filterable from '$lib/components/Filterable.svelte';
+
 	//console.log('colours: ', colours);
 
-	//
-	//function
-
+    //
     // digest and return useful info from the Webservices JSON feed
     function processData(webservices) {
         let instances = 0;
@@ -129,19 +130,26 @@
 			tech.hasOwnProperty('instances') &&
 			tech.instances.constructor === Array &&
 			tech.instances.length
-		)
-			return true;
+		) return true;
 		return false;
 	}
 
-	// return an array of keys from an object
-	function getKeys(ob) {
+	// return an object with ob's keys ordered alphabetically, with an idfrom an object
+	function getSortedFilter(ob) {
 		let keys = [];
+		let i = 0;
+		let key_array = [];
+		// first create a flat array.
 		for (let key in ob) {
-			//keys.push(key.replace(/ /g, '\u00a0'));
 			keys.push(key);
 		}
-		return keys;
+		// sort the array alphabetically
+		keys.sort();
+		// then create a dictionary of them
+		keys.forEach(function(name) {
+			key_array.push({ "id": i++, "name": name, "active": true });
+		});
+		return key_array;
 	}
 
 	// get intersection: ref https://bobbyhadz.com/blog/javascript-get-intersection-of-two-arrays
@@ -173,22 +181,26 @@
 
 	// assign colours from a set of differentiated colours to a list of tags...
 	// this one is for 'hosts'
+	//
+	// host_list is in the form of
 	function hostColours(host_list, colours, hosts) {
 		let host_array = {};
 		let i = 0;
 
-		//console.log('hosts:', hosts);
+		console.log('hosts:', hosts);
+		console.log('host_list:', host_list);
 
-		host_list.forEach(function (host) {
-			//console.log(host);
-			if (hosts[host].hasOwnProperty('domain') && hosts[host].hasOwnProperty('affiliation')) {
-				host_array[host] = {
+		for (let index in host_list) {
+			console.log(host_list[index]);
+			let hostname = host_list[index].name;
+			if (hosts[hostname].hasOwnProperty('domain') && hosts[hostname].hasOwnProperty('affiliation')) {
+				host_array[hostname] = {
 					colour: colours[i++],
-					domain: hosts[host].domain,
-					affiliation: hosts[host].affiliation
+					domain: hosts[hostname].domain,
+					affiliation: hosts[hostname].affiliation
 				};
 			}
-		});
+		}
 		return host_array;
 	}
 
@@ -201,8 +213,9 @@
 		//console.log('affiliates:', affiliates);
 		console.log('affiliate_list:', affiliate_list);
 
-		for (const affiliate of affiliate_list) {
+		for (let index in affiliate_list) {
 			//console.log('affiliate:', affiliate);
+			let affiliate = affiliate_list[index].name;
 			if (
 				affiliates[affiliate].hasOwnProperty('name') &&
 				affiliates[affiliate].hasOwnProperty('website')
@@ -229,7 +242,7 @@
 		const set2 = new Set(b);
 
 		const intersection = [...set1].filter((element) => set2.has(element));
-		console.log('intersection = ', intersection);
+		//console.log('intersection = ', intersection);
 		return intersection;
 	}
 
@@ -241,17 +254,17 @@
 			//console.log('tech(' + index + '): ', tech);
 			if (hasInstances(tech)) {
 				const intersection = inCommon(tech.categories, list);
-				console.log('categories: ', tech.categories);
+				//console.log('categories: ', tech.categories);
 				//console.log('list: ', list);
-				console.log('intersection: ', intersection);
+				//console.log('intersection: ', intersection);
 				if (intersection && intersection.constructor === Array) {
 					//console.log('intersection length: '. intersection.length);
 					if (intersection.length > 0) {
-						console.log('including tech: ', tech);
+						//console.log('including tech: ', tech);
 						included.push(tech);
 					}
 				} else {
-					console.log('intersection not array');
+					//console.log('intersection not array');
 				}
 			}
 		});
@@ -265,33 +278,50 @@
 	//const technologies = webservices.technologies;
 	//console.log(technologies);
 
-	const category_list = getKeys(results.tech_lists.category_list).sort();
-	const analogue_list = getKeys(results.tech_lists.analogue_list).sort();
-	const license_list = getKeys(results.tech_lists.license_list).sort();
-	const status_list = getKeys(results.instance_lists.status_list).sort();
-	const affiliate_list = getKeys(results.instance_lists.affiliate_list).sort();
-	const host_list = getKeys(results.instance_lists.host_list).sort();
+	// set up filters for each type
+	setFilter('categories');
+	setFilter('analogues');
+	setFilter('licenses');
+	setFilter('statuses');
+	setFilter('affiliates');
+	setFilter('hosts');
+
+	// define the handle for each writable
+	const categoryFilter = getFilter('categories');
+	const analogueFilter = getFilter('analogues');
+	const licenseFilter = getFilter('licenses');
+	const statusFilter = getFilter('statuses');
+	const affiliateFilter = getFilter('affiliates');
+	const hostFilter = getFilter('hosts');
+
+	// populate the writable with actual data
+	$categoryFilter = getSortedFilter(results.tech_lists.category_list);
+	$analogueFilter = getSortedFilter(results.tech_lists.analogue_list);
+	$licenseFilter = getSortedFilter(results.tech_lists.license_list);
+	$statusFilter = getSortedFilter(results.instance_lists.status_list);
+	$affiliateFilter = getSortedFilter(results.instance_lists.affiliate_list);
+	$hostFilter = getSortedFilter(results.instance_lists.host_list);
 
 	const hosts = results.hosts;
-	//console.log('host_data: ', results.hosts);
+	console.log('host_data: ', results.hosts);
 	const affiliates = results.affiliates;
-	//console.log('affiliate_data: ', results.affiliates);
-	const host_colours = hostColours(host_list, colours, hosts);
-	//console.log('host_colours:', host_colours);
+	console.log('affiliate_data: ', results.affiliates);
+	const host_colours = hostColours($hostFilter, colours, hosts);
+	console.log('host_colours:', host_colours);
 	colours.sort();
-	const affiliate_colours = affiliateColours(affiliate_list, colours, affiliates);
-	//console.log('affiliate_colours:',affiliate_colours);
+	const affiliate_colours = affiliateColours($affiliateFilter, colours, affiliates);
+	console.log('affiliate_colours:',affiliate_colours);
 
 	//console.log('categories array: ', results.tech_tags.categories);
 	//console.log('categories keys: ', categories);
 
-	console.log('references: ', references);
-	console.log('category_list: ', category_list);
+	//console.log('references: ', references);
+	/*console.log('category_list: ', category_list);
 	//console.log('analogue_list: ', analogue_list);
 	console.log('license_list: ', license_list);
 	console.log('status_list: ', status_list);
 	console.log('affiliate_list: ', affiliate_list);
-	console.log('hosts_list: ', host_list);
+	console.log('hosts_list: ', host_list);*/
 
 
 	const filtered_technologies = filterTechnologiesByCategoryList(
@@ -300,6 +330,12 @@
 //		references.category_filter_list
 	);
 	const technologies = sortTechnologies(filtered_technologies);
+
+	function flipOn(list, id) {
+	    console.log('list: ' + list + ', id: ' + id);
+	    return true;
+	}
+
 </script>
 
 <div class="webservices">
@@ -319,25 +355,35 @@
 		</ul>
 	</div>
 	<div class="filters">
-		<div class="tag-list tech">
-			<div class="tags tech categories">
-				Categories<br/> {#each category_list as category}<span class="tag on category" style="white-space: nowrap; word-break: normal;">{category}</span><wbr/>{/each}
-			</div>
-			<!--<div class="tags tech analogues">{#each analogues as analogue}<span class="tag analogue">{analogue}</span> {/each}</div>-->
-			<div class="tags tech licenses">
-				Licenses<br/> {#each license_list as license}<span class="tag on license">{license}</span><wbr/>{/each}
-			</div>
+		<div class="filter categories">
+			<Filterable filterValues={categoryFilter} context={'categories'}>
+				<h2 slot="h2">Categories</h2>
+			</Filterable>
 		</div>
-		<div class="tag-list instance">
-			<div class="tags instance statuses">
-				Statuses<br/> {#each status_list as status}<span class="tag on status">{status}</span><wbr/>{/each}
-			</div>
-			<div class="tags instance affiliates">
-				Affiliates<br/> {#each affiliate_list as affiliate}<span class="tag on affiliate"><span class="marker circle" style="background-color: {affiliate_colours[affiliate].colour}"></span> {affiliate}</span><wbr/>{/each}
-			</div>
-			<div class="tags instance hosts">
-				Hosts<br/> {#each host_list as host}<span class="tag on host"><span class="marker square" style="background-color:  {host_colours[host].colour}"></span> {host}</span><wbr/>{/each}
-			</div>
+		<div class="filter analogues">
+			<Filterable filterValues={analogueFilter} context={'analogues'}>
+				<h2 slot="h2">Analogues</h2>
+			</Filterable>
+		</div>
+		<div class="filter licenses">
+			<Filterable filterValues={licenseFilter} context={'licenses'}>
+				<h2 slot="h2">Open Source & Copyleft Licenses</h2>
+			</Filterable>
+		</div>
+		<div class="filter statuses">
+			<Filterable filterValues={statusFilter} context={'statuses'}>
+				<h2 slot="h2">Statuses</h2>
+			</Filterable>
+		</div>
+		<div class="filter affilates">
+			<Filterable filterValues={affiliateFilter} context={'affiliates'}>
+				<h2 slot="h2">Affiliates</h2>
+			</Filterable>
+		</div>
+		<div class="filter hosts">
+			<Filterable filterValues={hostFilter} context={'hosts'}>
+				<h2 slot="h2">Hosts</h2>
+			</Filterable>
 		</div>
 	</div>
 	<div class="tiles">
@@ -356,12 +402,11 @@
 						>{/if}
 				</div>
 				<h2><a href={technology.website}>{technology.name}</a></h2>
-				{#if technology.license}<p
-						class="license"
-						title="The libre license for this project is {technology.license}"
-					>
-						License: <span class="value">{technology.license}</span>
-					</p>{/if}
+				<p class="description">
+					{technology.description}{#if technology.extended_description}<span
+							title={technology.extended_description}>i</span
+						>{/if}
+				</p>
 				{#if technology.categories}<p class="categories">
 						{pluraliser('Category', 'Categories', technology.categories.length)}:
 						<span class="value">{toOxfordCommaString(technology.categories)}</span>
@@ -369,11 +414,12 @@
 				{#if technology.analogues}<p class="analogues">
 						Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span>
 					</p>{/if}
-				<p class="description">
-					{technology.description}{#if technology.extended_description}<span
-							title={technology.extended_description}>i</span
-						>{/if}
-				</p>
+				{#if technology.license}<p
+						class="license"
+						title="The libre license for this project is {technology.license}"
+					>
+						License: <span class="value">{technology.license}</span>
+					</p>{/if}
 				{#if hasInstances(technology)}
 					<div class="instances">
 						<p>
@@ -482,7 +528,7 @@
 		/*width: 290px;*/
 		overflow: hidden;
 		box-sizing: border-box;
-		box-shadow: 5px 5px 3px #71ba71;
+		box-shadow: 5px 5px 3px #6a6d6a;
 		border: solid 3px #1e6831;
 		text-overflow: ellipsis;
 		overflow: hidden;
@@ -497,7 +543,7 @@
 		font-size: 90%;
 	}
 	.tile:hover {
-		box-shadow: 10px 10px 6px #71ba71;
+		box-shadow: 10px 10px 6px #727372;
 	}
 	.tile .links h2 a {
 		color: #e6c4fc;
diff --git a/static/images/drawing.svg b/static/images/drawing.svg
index dd7f95e..d0a812e 100644
--- a/static/images/drawing.svg
+++ b/static/images/drawing.svg
@@ -24,9 +24,9 @@
      inkscape:pagecheckerboard="0"
      inkscape:document-units="mm"
      showgrid="false"
-     inkscape:zoom="0.27496365"
-     inkscape:cx="636.44776"
-     inkscape:cy="1161.9718"
+     inkscape:zoom="1.0998546"
+     inkscape:cx="623.2642"
+     inkscape:cy="345.04561"
      inkscape:window-width="1547"
      inkscape:window-height="1088"
      inkscape:window-x="0"
@@ -35,6 +35,18 @@
      inkscape:current-layer="layer1" />
   <defs
      id="defs14">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient48819">
+      <stop
+         style="stop-color:#edf300;stop-opacity:1;"
+         offset="0"
+         id="stop48815" />
+      <stop
+         style="stop-color:#edf300;stop-opacity:0;"
+         offset="1"
+         id="stop48817" />
+    </linearGradient>
     <rect
        x="103.13863"
        y="378.72194"
@@ -120,20 +132,41 @@
        id="linearGradient22687"
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(28.373246,78.002834)"
-       x1="11.545767"
-       y1="43.178448"
-       x2="55.775768"
-       y2="43.178448" />
+       x1="0.16692716"
+       y1="12.035994"
+       x2="63.443279"
+       y2="71.808151" />
     <linearGradient
        inkscape:collect="always"
        xlink:href="#linearGradient5458"
        id="linearGradient22710"
        gradientUnits="userSpaceOnUse"
        gradientTransform="translate(89.161221,78.677533)"
-       x1="11.545767"
-       y1="43.178448"
-       x2="55.775768"
-       y2="43.178448" />
+       x1="1.2561908"
+       y1="35.261524"
+       x2="58.534"
+       y2="64.484146" />
+    <rect
+       x="103.13863"
+       y="378.72195"
+       width="328.13995"
+       height="308.35397"
+       id="rect19085-1" />
+    <rect
+       x="103.13863"
+       y="378.72195"
+       width="328.13995"
+       height="308.35397"
+       id="rect19085-1-7" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient48819"
+       id="linearGradient48821"
+       x1="108.90812"
+       y1="470.22269"
+       x2="221.20922"
+       y2="470.22269"
+       gradientUnits="userSpaceOnUse" />
   </defs>
   <g
      inkscape:label="Layer 1"
@@ -156,7 +189,7 @@
        y="28.054415"
        ry="3.9535661" />
     <rect
-       style="fill:#0066ff;fill-opacity:0.65748;fill-rule:evenodd;stroke:url(#linearGradient22687);stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none"
+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:url(#linearGradient22687);stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none"
        id="rect43-7-5"
        width="34.230003"
        height="32.348484"
@@ -170,9 +203,9 @@
        style="font-style:normal;font-weight:normal;font-size:133.333px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect7333);fill:#f3f415;fill-opacity:1;stroke:#240d0c;stroke-opacity:0.95896482"><tspan
          x="163.06445"
          y="498.98044"
-         id="tspan43262">🗹</tspan></text>
+         id="tspan60302">🗹</tspan></text>
     <rect
-       style="fill:#0066ff;fill-opacity:0.65748;fill-rule:evenodd;stroke:url(#linearGradient22710);stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none"
+       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:url(#linearGradient22710);stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none"
        id="rect43-7-9"
        width="34.230003"
        height="32.348484"
@@ -181,13 +214,37 @@
        ry="3.9535661" />
     <text
        xml:space="preserve"
-       transform="matrix(0.26458333,0,0,0.26458333,83.231667,-9.193983)"
+       transform="matrix(0.26458333,0,0,0.26458333,113.11267,-50.648638)"
        id="text19083"
        style="font-style:normal;font-weight:normal;font-size:160px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect19085);fill:#edf300;fill-opacity:1;stroke:none"><tspan
          x="103.13867"
          y="524.30269"
-         id="tspan43266"><tspan
+         id="tspan60306"><tspan
            style="stroke:#140d0c;stroke-opacity:0.958965"
-           id="tspan43264">🗸</tspan></tspan></text>
+           id="tspan60304">🗸</tspan></tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26458333,0,0,0.26458333,145.80878,-39.237512)"
+       id="text19083-2"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect19085-1);fill:#edf300;fill-opacity:1;stroke:none;stroke-width:4.7811;stroke-miterlimit:4;stroke-dasharray:none"
+       inkscape:export-filename="/home/dave/Projects/svelte/webservices-app/static/images/check-yellowblack.png"
+       inkscape:export-xdpi="200"
+       inkscape:export-ydpi="200"><tspan
+         x="103.13867"
+         y="524.30269"
+         id="tspan60310"><tspan
+           style="stroke:#140d0c;stroke-opacity:0.958965"
+           id="tspan60308">🗸</tspan></tspan></text>
+    <text
+       xml:space="preserve"
+       transform="matrix(0.26458333,0,0,0.26458333,146.54956,-3.8660822)"
+       id="text19083-2-0"
+       style="font-style:normal;font-weight:normal;font-size:160px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect19085-1-7);fill:#111111;fill-opacity:1;stroke:#edf3f8;stroke-width:4.7811;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       inkscape:export-filename="/home/dave/Projects/svelte/webservices-app/static/images/check-black-in-white.png"
+       inkscape:export-xdpi="200"
+       inkscape:export-ydpi="200"><tspan
+         x="103.13867"
+         y="524.30269"
+         id="tspan60312">🗸</tspan></text>
   </g>
 </svg>