diff --git a/src/routes/+page.js b/src/routes/+page.js
index 951d6a5..880a3ea 100644
--- a/src/routes/+page.js
+++ b/src/routes/+page.js
@@ -7,6 +7,7 @@ export const load = async ({ fetch }) => {
     return {
         webservices: {
             technologies: webservicesData.technologies,
+            affiliates: webservicesData.affiliates,
             hosts: webservicesData.hosts
         }
     };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4f26a81..9bcb3c5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,8 +2,9 @@
     export let data;
     const { webservices } = data;
 
-    console.log('orig affiliates:', webservices.affiliates);
-    console.log('orig hosts:', webservices.hosts);
+    //console.log('orig:', webservices);
+    //console.log('orig affiliates:', webservices.affiliates);
+    //console.log('orig hosts:', webservices.hosts);
 
     // source: https://mokole.com/palette.html 20 colors with default settings otherwise
     const colours30 = [ "#808080", "#7f0000", "#006400", "#808000", "#483d8b", "#008b8b", "#cd853f", "#00008b", "#7f007f", "#8fbc8f", "#b03060", "#ff0000", "#ff8c00", "#00ff00", "#9400d3", "#00ff7f", "#dc143c", "#00ffff", "#00bfff", "#0000ff", "#f08080", "#adff2f", "#1e90ff", "#ffff54", "#90ee90", "#add8e6", "#ff1493", "#7b68ee", "#ee82ee", "#ffe4b5" ];
@@ -11,19 +12,19 @@
     function processData(webservices) {
         let instances = 0;
         let current = [];
-        let current_status = [];
         let future = [];
         // properties of technologies
-        let categories = [];
-        let analogues = [];
-        let licenses = [];
+        let category_list = [];
+        let analogue_list = [];
+        let license_list = [];
         // properties of instances
-        let statuses = [];
-        let affiliates = [];
+        let status_list = [];
+        let affiliate_list = [];
+        let host_list = [];
 
+        // actual objects
         let hosts = [];
-        let host_data = [];
-        let affiliate_data = [];
+        let affiliates = [];
         //
         // just a trivial reassignment
         //let hosts = webservices.hosts;
@@ -33,20 +34,20 @@
             let tech = webservices.technologies[key];
             if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array ) {
                 tech.categories.forEach(function(category, index) {
-                    if (categories.hasOwnProperty(category)) categories[category]++;
-                    else categories[category] = 1;
+                    if (category_list.hasOwnProperty(category)) category_list[category]++;
+                    else category_list[category] = 1;
                 });
             }
             if (tech.hasOwnProperty('analogues') && tech.analogues.constructor === Array ) {
                 tech.analogues.forEach(function(analogue, index) {
-                    if (analogues.hasOwnProperty(analogue)) analogues[analogue]++;
-                    else analogues[analogue] = 1;
+                    if (analogue_list.hasOwnProperty(analogue)) analogue_list[analogue]++;
+                    else analogue_list[analogue] = 1;
                 });
             }
             if (tech.hasOwnProperty('license')) {
                 let license = tech.license;
-                if (licenses.hasOwnProperty(license)) licenses[license]++;
-                else licenses[license] = 1;
+                if (license_list.hasOwnProperty(license)) license_list[license]++;
+                else license_list[license] = 1;
             }
 
             if (hasInstances(tech)) {
@@ -57,18 +58,18 @@
                     instances++;
                     if (instance.hasOwnProperty('status')) {
                         let tag = instance.status;
-                        if (statuses.hasOwnProperty(tag)) statuses[tag]++;
-                        else statuses[tag] = 1;
+                        if (status_list.hasOwnProperty(tag)) status_list[tag]++;
+                        else status_list[tag] = 1;
                     }
                     if (instance.hasOwnProperty('affiliation')) {
                         let tag = instance.affiliation;
-                        if (affiliates.hasOwnProperty(tag)) affiliates[tag]++;
-                        else affiliates[tag] = 1;
+                        if (affiliate_list.hasOwnProperty(tag)) affiliate_list[tag]++;
+                        else affiliate_list[tag] = 1;
                     }
                     if (instance.hasOwnProperty('host')) {
                         let tag = instance.host;
-                        if (hosts.hasOwnProperty(tag)) hosts[tag]++;
-                        else hosts[tag] = 1;
+                        if (host_list.hasOwnProperty(tag)) host_list[tag]++;
+                        else host_list[tag] = 1;
                     }
                 });
             } else {
@@ -82,15 +83,15 @@
             host['name'] = key;
             //console.log('host: ', host);
             if (host.hasOwnProperty('domain') && !(host.hasOwnProperty('status') && host.status == 'retired')) {
-                host_data[key] = host;
+                hosts[key] = host;
             }
         }
-        console.log('webservices.affiliates: ', webservices.affiliates);
+        //console.log('webservices.affiliates: ', webservices.affiliates);
         for (let key in webservices.affiliates) {
-            console.log('key: ', key);
+            //console.log('key: ', key);
             let affiliate = webservices.affiliates[key];
-            console.log('affiliate assignment: ', affiliate);
-            affiliate_data[key] = affiliate;
+            //console.log('affiliate assignment: ', affiliate);
+            affiliates[key] = affiliate;
            // if (affiliate.hasOwnProperty('name')) {
                // affiliate_data[key] = affiliate;
            // }
@@ -106,18 +107,18 @@
             total_instances: instances,
             active_services: current,
             candidate_services: future,
-            tech_tags: {
-               categories: categories,
-               analogues: analogues,
-               licenses: licenses
+            tech_lists: {
+               category_list: category_list,
+               analogue_list: analogue_list,
+               license_list: license_list
             },
-            instance_tags: {
-                statuses: statuses,
-                affiliates: affiliates,
-                hosts: hosts
+            instance_lists: {
+                status_list: status_list,
+                affiliate_list: affiliate_list,
+                host_list: host_list
             },
-            hosts: host_data,
-            affiliates: affiliate_data
+            hosts: hosts,
+            affiliates: affiliates
         };
     }
 
@@ -131,7 +132,6 @@
         let keys = [];
         for (let key in ob) {
             keys.push(key);
-            //console.log('pushing key ' + key);
         };
         return keys;
     }
@@ -144,37 +144,38 @@
         }
     }
 
-    function hostColours(hosts, colours, host_data) {
+    function hostColours(host_list, colours, hosts) {
         let host_array = {};
         let i = 0;
 
-        //console.log('host_data:', host_data);
+        //console.log('hosts:', hosts);
 
-        hosts.forEach(function(host) {
+        host_list.forEach(function(host) {
             //console.log(host);
-            if (host_data[host].hasOwnProperty('domain') && host_data[host].hasOwnProperty('affiliation')) {
+            if (hosts[host].hasOwnProperty('domain') && hosts[host].hasOwnProperty('affiliation')) {
                 host_array[host] = {
                     "colour": colours[i++],
-                    "domain": host_data[host].domain,
-                    "affiliation": host_data[host].affiliation
+                    "domain": hosts[host].domain,
+                    "affiliation": hosts[host].affiliation
                 }
             }
         });
         return host_array;
     }
 
-    function affiliateColours(affiliates, colours, affiliate_data) {
+    function affiliateColours(affiliate_list, colours, affiliates) {
         let affiliate_array = {};
+        let i = 0;
 
-        console.log('affiliate_data_full:', affiliate_data);
+        //console.log('affiliates:', affiliates);
 
-        for (const affiliate of affiliates) {
-            console.log('affiliate:', affiliate);
-            if (affiliate_data[affiliate].hasOwnProperty('name') && affiliate_data[affiliate].hasOwnProperty('website')) {
+        for (const affiliate of affiliate_list) {
+            //console.log('affiliate:', affiliate);
+            if (affiliates[affiliate].hasOwnProperty('name') && affiliates[affiliate].hasOwnProperty('website')) {
                 affiliate_array[affiliate] = {
                     "colour": colours[i++],
-                    "name": affiliate_data[affiliate].name,
-                    "website": affiliate_data[affiliate].website
+                    "name": affiliates[affiliate].name,
+                    "website": affiliates[affiliate].website
                 }
             }
         }
@@ -189,21 +190,21 @@
     const technologies = results.active_services;
     //console.log(technologies);
 
-    const categories = getKeys(results.tech_tags.categories).sort();
-    const analogues = getKeys(results.tech_tags.analogues).sort();
-    const licenses = getKeys(results.tech_tags.licenses).sort();
-    const statuses = getKeys(results.instance_tags.statuses).sort();
-    const affiliates = getKeys(results.instance_tags.affiliates).sort();
-    const hosts = getKeys(results.instance_tags.hosts).sort();
+    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();
 
-    const host_data = results.hosts;
+    const hosts = results.hosts;
     //console.log('host_data: ', results.hosts);
-    const affiliate_data = results.affiliates;
-    console.log('affiliate_data: ', results.affiliates);
-    const host_colours = hostColours(hosts, colours30, host_data);
+    const affiliates = results.affiliates;
+    //console.log('affiliate_data: ', results.affiliates);
+    const host_colours = hostColours(host_list, colours30, hosts);
     //console.log('host_colours:', host_colours);
-    const affiliate_colours = affiliateColours(affiliates, colours30, affiliate_data);
-    console.log('affiliate_colours:',affiliate_colours);
+    const affiliate_colours = affiliateColours(affiliate_list, colours30, affiliates);
+    //console.log('affiliate_colours:',affiliate_colours);
 
     //console.log('categories array: ', results.tech_tags.categories);
     //console.log('categories keys: ', categories);
@@ -220,13 +221,13 @@
     </div>
     <div class="filters">
         <div class="tag-list tech">
-            <div class="tags tech categories">Categories: {#each categories as category}<span class="tag category">{category}</span> {/each}</div>
+            <div class="tags tech categories">Categories: {#each category_list as category}<span class="tag category">{category}</span> {/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: {#each licenses as license}<span class="tag license">{license}</span> {/each}</div>
+            <div class="tags tech licenses">Licenses: {#each license_list as license}<span class="tag license">{license}</span> {/each}</div>
         </div>
         <div class="tag-list instance">
-            <div class="tags instance statuses">Statuses: {#each statuses as status}<span class="tag status">{status}</span> {/each}</div>            <div class="tags instance affiliates">Affiliates: {#each affiliates as affiliate}<span class="tag affilate">{affiliate}</span> {/each}</div>
-            <div class="tags instance hosts">Hosts: {#each hosts as host}<span class="tag host">{host}</span> {/each}</div>
+            <div class="tags instance statuses">Statuses: {#each status_list as status}<span class="tag status">{status}</span> {/each}</div>            <div class="tags instance affiliates">Affiliates: {#each affiliate_list as affiliate}<span class="tag affiliate"><span class="marker circle" style="background-color: {affiliate_colours[affiliate].colour}"></span> {affiliate}</span> {/each}</div>
+            <div class="tags instance hosts">Hosts: {#each host_list as host}<span class="tag host"><span class="marker square" style="background-color: {host_colours[host].colour}"></span> {host}</span> {/each}</div>
         </div>
     </div>
     <div class="tiles">
@@ -237,18 +238,12 @@
             {#if (technology.analogues)}<p class="analogues">Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
             <p class="description">{technology.description}</p>
             {#if hasInstances(technology)}
-            <div class="instances">
-                <ul class="instances">
-                    {#each technology.instances as instance}
-                    <li><a href="https://{instance.domain}"><span style="{affiliate_colours[instance.affiliate]}.colour"></span></a> <span class="affiliation {instance.affiliation}">{instance.affiliation}</span></li>
-                    {/each}
-                </ul>
+            <div class="instances"><p>{#each technology.instances as instance}
+                <a href="https://{instance.domain}" title="{technology.name} instance {instance.domain} hosted on '{instance.host}' by {instance.affiliation}"><span class="marker circle" style="background-color: {affiliate_colours[instance.affiliation].colour}"></span></a>{/each}</p>
             </div>
             {:else}
-            <div class="instances cell">
-                <ul class="instances">
-                    <li>Nothing here yet...</li>
-                </ul>
+            <div class="instances">
+                Nothing here yet...
             </div>
             {/if}
         </div>
@@ -284,17 +279,34 @@
     }
     .tag {
         font-size: 80%;
-        color: #777;
         margin-right: 0.5em;
-        line-height: 2;
-        background-color: #a369a2;
-        color: #fff;
-        padding: 4px 8px;
-        border-radius: 10px;
+        line-height: 2.5;
+        padding: 6px 8px;
+        border-radius: 14px;
         white-space: nowrap;
         word-break: keep-all;
     }
     .tag:after { content: "\00a0"; }
+    .tag.category {
+        background-color: #a369a2;
+        color: #fff;
+    }
+    .tag.license {
+        background-color: #a369a2;
+        color: #fff;
+    }
+    .tag.status {
+        background-color: #a369a2;
+        color: #fff;
+    }
+    .tag.affiliate {
+        background-color: #fff;
+        color: #000;
+    }
+    .tag.host {
+        background-color: #fff;
+        color: #000;
+    }
     .tiles {
         display: grid;
         grid-gap: 15px;
@@ -332,18 +344,19 @@
         font-size: 80%;
         color: #555;
     }
-    .tile .instances {
-        background-color: #c2e6c2;
+    .instances {
+        background-color: #eee;
         position: absolute;
         bottom: 0;
         height: 3em;
         width: 100%;
     }
-    .tile .instances ul {
-        margin-bottom: 0px;
+    .instances .marker {
+        margin-right: 3px;
     }
     .webservices li { list-style-type: none; }
     .value { font-weight: bold; color: #000; }
+    .marker { vertical-align: middle; }
     .triangle {
         --side-size: 20px;
         border-left: var(--side-size) solid transparent;
@@ -354,12 +367,15 @@
     }
     .circle {
         height: 20px;
-        width: 50px;
+        width: 20px;
         background-color: #555;
         border-radius: 50%;
+        display: inline-block;
     }
     .square {
         height: 20px;
-        width: 50px;
+        width: 20px;
+        background-color: #555;
+        display: inline-block;
     }
 </style>