diff --git a/latentscope/scripts/cluster.py b/latentscope/scripts/cluster.py
index b9dcdb3..52f26ff 100644
--- a/latentscope/scripts/cluster.py
+++ b/latentscope/scripts/cluster.py
@@ -100,9 +100,11 @@ def clusterer(dataset_id, umap_id, samples, min_samples):
     # plot a convex hull around each cluster
     hulls = []
     for label in non_noise_labels:
-        points = umap_embeddings[cluster_labels == label]
+        indices = np.where(cluster_labels == label)[0]
+        points = umap_embeddings[indices]
+        # points = umap_embeddings[cluster_labels == label]
         hull = ConvexHull(points)
-        hull_list = hull.vertices.tolist()
+        hull_list = [indices[s] for s in hull.vertices.tolist()]
         hulls.append(hull_list)
         for simplex in hull.simplices:
             plt.plot(points[simplex, 0], points[simplex, 1], 'k-')
@@ -131,7 +133,7 @@ def clusterer(dataset_id, umap_id, samples, min_samples):
     for cluster, indices in cluster_indices.items():
         label = f"Cluster {cluster}"
         description = f"This is cluster {cluster} with {len(indices)} items."
-        new_row = pd.DataFrame({'label': [label], 'description': [description], 'indices': [list(indices)], 'hulls': [hulls[cluster]]})
+        new_row = pd.DataFrame({'label': [label], 'description': [description], 'indices': [list(indices)], 'hull': [hulls[cluster]]})
         slides_df = pd.concat([slides_df, new_row], ignore_index=True)
 
     # write the df to parquet
diff --git a/latentscope/server/search.py b/latentscope/server/search.py
index 653b2e5..c384142 100644
--- a/latentscope/server/search.py
+++ b/latentscope/server/search.py
@@ -1,5 +1,5 @@
 import os
-import sys
+import json
 import numpy as np
 from flask import Blueprint, jsonify, request
 
@@ -11,7 +11,7 @@
 
 # in memory cache of dataset metadata, embeddings, models and tokenizers
 DATASETS = {}
-MODELS = {}
+EMBEDDINGS = {}
 
 """
 Returns nearest neighbors for a given query string
@@ -20,29 +20,33 @@
 @search_bp.route('/nn', methods=['GET'])
 def nn():
     dataset = request.args.get('dataset')
-    model_id = request.args.get('model')
+    embedding_id = request.args.get('embedding_id')
 
     num = 150
-    if model_id not in MODELS:
-        print("loading model", model_id)
+    if embedding_id not in EMBEDDINGS:
+        print("loading model", embedding_id)
+        with open(os.path.join(DATA_DIR, dataset, "embeddings", embedding_id + ".json"), 'r') as f:
+            metadata = json.load(f)
+        model_id = metadata.get('model_id')
+        print("Model ID:", model_id)
         model = get_embedding_model(model_id)
         model.load_model()
-        MODELS[model_id] = model
+        EMBEDDINGS[embedding_id] = model
     else:
-        model = MODELS[model_id]
+        model = EMBEDDINGS[embedding_id]
 
-    if dataset not in DATASETS or model_id not in DATASETS[dataset]:
+    if dataset not in DATASETS or embedding_id not in DATASETS[dataset]:
         # load the dataset embeddings
-        embeddings = np.load(os.path.join(DATA_DIR, dataset, "embeddings", model_id + ".npy"))
+        embeddings = np.load(os.path.join(DATA_DIR, dataset, "embeddings", embedding_id + ".npy"))
         print("fitting embeddings")
         from sklearn.neighbors import NearestNeighbors
         nne = NearestNeighbors(n_neighbors=num, metric="cosine")
         nne.fit(embeddings)
         if dataset not in DATASETS:
           DATASETS[dataset] = {}
-        DATASETS[dataset][model_id] = nne
+        DATASETS[dataset][embedding_id] = nne
     else:
-        nne = DATASETS[dataset][model_id]
+        nne = DATASETS[dataset][embedding_id]
     
     # embed the query string and find the nearest neighbor
     query = request.args.get('query')
diff --git a/web/package-lock.json b/web/package-lock.json
index e144ae9..5679361 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,9 +8,8 @@
       "name": "client",
       "version": "0.0.0",
       "dependencies": {
-        "@duckdb/duckdb-wasm": "^1.28.0",
-        "apache-arrow": "^14.0.2",
         "d3-scale": "^4.0.2",
+        "d3-scale-chromatic": "^3.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.20.1",
@@ -30,26 +29,6 @@
         "vite-plugin-wasm": "^3.3.0"
       }
     },
-    "node_modules/@75lb/deep-merge": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@75lb/deep-merge/-/deep-merge-1.1.1.tgz",
-      "integrity": "sha512-xvgv6pkMGBA6GwdyJbNAnDmfAIR/DfWhrj9jgWh3TY7gRm3KO46x/GPjRg6wJ0nOepwqrNxFfojebh0Df4h4Tw==",
-      "dependencies": {
-        "lodash.assignwith": "^4.2.0",
-        "typical": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=12.17"
-      }
-    },
-    "node_modules/@75lb/deep-merge/node_modules/typical": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/typical/-/typical-7.1.1.tgz",
-      "integrity": "sha512-T+tKVNs6Wu7IWiAce5BgMd7OZfNYUndHwc5MknN+UHOudi7sGZzuHdCadllRuqJ3fPtgFtIH9+lt9qRv6lmpfA==",
-      "engines": {
-        "node": ">=12.17"
-      }
-    },
     "node_modules/@aashutoshrathi/word-wrap": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
@@ -399,34 +378,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@duckdb/duckdb-wasm": {
-      "version": "1.28.0",
-      "resolved": "https://registry.npmjs.org/@duckdb/duckdb-wasm/-/duckdb-wasm-1.28.0.tgz",
-      "integrity": "sha512-YaswpEmxr1Sp20/FZbWR7bZBJqj6xQXX2m4LLzYBnA02g4K1yrpxsBWmkxQyMbrH6AHKhcUUqAlaXfA2Rvaa3w==",
-      "dependencies": {
-        "apache-arrow": "^13.0.0"
-      }
-    },
-    "node_modules/@duckdb/duckdb-wasm/node_modules/apache-arrow": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/apache-arrow/-/apache-arrow-13.0.0.tgz",
-      "integrity": "sha512-3gvCX0GDawWz6KFNC28p65U+zGh/LZ6ZNKWNu74N6CQlKzxeoWHpi4CgEQsgRSEMuyrIIXi1Ea2syja7dwcHvw==",
-      "dependencies": {
-        "@types/command-line-args": "5.2.0",
-        "@types/command-line-usage": "5.0.2",
-        "@types/node": "20.3.0",
-        "@types/pad-left": "2.1.1",
-        "command-line-args": "5.2.1",
-        "command-line-usage": "7.0.1",
-        "flatbuffers": "23.5.26",
-        "json-bignum": "^0.0.3",
-        "pad-left": "^2.1.0",
-        "tslib": "^2.5.3"
-      },
-      "bin": {
-        "arrow2csv": "bin/arrow2csv.js"
-      }
-    },
     "node_modules/@esbuild/android-arm": {
       "version": "0.19.9",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.9.tgz",
@@ -1416,25 +1367,13 @@
         "@babel/types": "^7.20.7"
       }
     },
-    "node_modules/@types/command-line-args": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@types/command-line-args/-/command-line-args-5.2.0.tgz",
-      "integrity": "sha512-UuKzKpJJ/Ief6ufIaIzr3A/0XnluX7RvFgwkV89Yzvm77wCh1kFaFmqN8XEnGcN62EuHdedQjEMb8mYxFLGPyA=="
-    },
-    "node_modules/@types/command-line-usage": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@types/command-line-usage/-/command-line-usage-5.0.2.tgz",
-      "integrity": "sha512-n7RlEEJ+4x4TS7ZQddTmNSxP+zziEG0TNsMfiRIxcIVXt71ENJ9ojeXmGO3wPoTdn7pJcU2xc3CJYMktNT6DPg=="
-    },
     "node_modules/@types/node": {
       "version": "20.3.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.0.tgz",
-      "integrity": "sha512-cumHmIAf6On83X7yP+LrsEyUOf/YlociZelmpRYaGFydoaPdxdt80MAbu6vWerQT2COCp2nPvHdsbD7tHn/YlQ=="
-    },
-    "node_modules/@types/pad-left": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@types/pad-left/-/pad-left-2.1.1.tgz",
-      "integrity": "sha512-Xd22WCRBydkGSApl5Bw0PhAOHKSVjNL3E3AwzKaps96IMraPqy5BvZIsBVK6JLwdybUzjHnuWVwpDd0JjTfHXA=="
+      "integrity": "sha512-cumHmIAf6On83X7yP+LrsEyUOf/YlociZelmpRYaGFydoaPdxdt80MAbu6vWerQT2COCp2nPvHdsbD7tHn/YlQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
     },
     "node_modules/@types/prop-types": {
       "version": "15.7.11",
@@ -1550,40 +1489,12 @@
         "node": ">=4"
       }
     },
-    "node_modules/apache-arrow": {
-      "version": "14.0.2",
-      "resolved": "https://registry.npmjs.org/apache-arrow/-/apache-arrow-14.0.2.tgz",
-      "integrity": "sha512-EBO2xJN36/XoY81nhLcwCJgFwkboDZeyNQ+OPsG7bCoQjc2BT0aTyH/MR6SrL+LirSNz+cYqjGRlupMMlP1aEg==",
-      "dependencies": {
-        "@types/command-line-args": "5.2.0",
-        "@types/command-line-usage": "5.0.2",
-        "@types/node": "20.3.0",
-        "@types/pad-left": "2.1.1",
-        "command-line-args": "5.2.1",
-        "command-line-usage": "7.0.1",
-        "flatbuffers": "23.5.26",
-        "json-bignum": "^0.0.3",
-        "pad-left": "^2.1.0",
-        "tslib": "^2.5.3"
-      },
-      "bin": {
-        "arrow2csv": "bin/arrow2csv.js"
-      }
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
-    "node_modules/array-back": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/array-back/-/array-back-3.1.0.tgz",
-      "integrity": "sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/array-buffer-byte-length": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
@@ -1875,84 +1786,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/chalk-template": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-0.4.0.tgz",
-      "integrity": "sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==",
-      "dependencies": {
-        "chalk": "^4.1.2"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk-template?sponsor=1"
-      }
-    },
-    "node_modules/chalk-template/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/chalk-template/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/chalk-template/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/chalk-template/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-    },
-    "node_modules/chalk-template/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/chalk-template/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1979,50 +1812,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/command-line-args": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-5.2.1.tgz",
-      "integrity": "sha512-H4UfQhZyakIjC74I9d34fGYDwk3XpSr17QhEd0Q3I9Xq1CETHo4Hcuo87WyWHpAF1aSLjLRf5lD9ZGX2qStUvg==",
-      "dependencies": {
-        "array-back": "^3.1.0",
-        "find-replace": "^3.0.0",
-        "lodash.camelcase": "^4.3.0",
-        "typical": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/command-line-usage": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/command-line-usage/-/command-line-usage-7.0.1.tgz",
-      "integrity": "sha512-NCyznE//MuTjwi3y84QVUGEOT+P5oto1e1Pk/jFPVdPPfsG03qpTIl3yw6etR+v73d0lXsoojRpvbru2sqePxQ==",
-      "dependencies": {
-        "array-back": "^6.2.2",
-        "chalk-template": "^0.4.0",
-        "table-layout": "^3.0.0",
-        "typical": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=12.20.0"
-      }
-    },
-    "node_modules/command-line-usage/node_modules/array-back": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/array-back/-/array-back-6.2.2.tgz",
-      "integrity": "sha512-gUAZ7HPyb4SJczXAMUXMGAvI976JoK3qEx9v1FTmeYuJj0IBiaKttG1ydtGKdkfqWkIkouke7nG8ufGy77+Cvw==",
-      "engines": {
-        "node": ">=12.17"
-      }
-    },
-    "node_modules/command-line-usage/node_modules/typical": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/typical/-/typical-7.1.1.tgz",
-      "integrity": "sha512-T+tKVNs6Wu7IWiAce5BgMd7OZfNYUndHwc5MknN+UHOudi7sGZzuHdCadllRuqJ3fPtgFtIH9+lt9qRv6lmpfA==",
-      "engines": {
-        "node": ">=12.17"
-      }
-    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2113,6 +1902,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-time": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
@@ -2769,17 +2570,6 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
-    "node_modules/find-replace": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/find-replace/-/find-replace-3.0.0.tgz",
-      "integrity": "sha512-6Tb2myMioCAgv5kfvP5/PkZZ/ntTpVK39fHY7WkWBgvbeE+VHd/tZuZ4mrC+bxh4cfOZeYKVPaJIZtZXV7GNCQ==",
-      "dependencies": {
-        "array-back": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2810,11 +2600,6 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
-    "node_modules/flatbuffers": {
-      "version": "23.5.26",
-      "resolved": "https://registry.npmjs.org/flatbuffers/-/flatbuffers-23.5.26.tgz",
-      "integrity": "sha512-vE+SI9vrJDwi1oETtTIFldC/o9GsVKRM+s6EL0nQgxXlYV1Vc4Tk30hj4xGICftInKQKj1F3up2n8UbIVobISQ=="
-    },
     "node_modules/flatted": {
       "version": "3.2.9",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz",
@@ -3596,14 +3381,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/json-bignum": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/json-bignum/-/json-bignum-0.0.3.tgz",
-      "integrity": "sha512-2WHyXj3OfHSgNyuzDbSxI1w2jgw5gkWSWhS7Qg4bWXx1nLk3jnbwfUeS0PSba3IzpTUWdHxBieELUzXRjQB2zg==",
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -3719,16 +3496,6 @@
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
     },
-    "node_modules/lodash.assignwith": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.assignwith/-/lodash.assignwith-4.2.0.tgz",
-      "integrity": "sha512-ZznplvbvtjK2gMvnQ1BR/zqPFZmS6jbK4p+6Up4xcRYA7yMIwxHCfbTcrYxXKzzqLsQ05eJPVznEW3tuwV7k1g=="
-    },
-    "node_modules/lodash.camelcase": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
-      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="
-    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3992,17 +3759,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/pad-left": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/pad-left/-/pad-left-2.1.0.tgz",
-      "integrity": "sha512-HJxs9K9AztdIQIAIa/OIazRAUW/L6B9hbQDxO4X07roW3eo9XqZc2ur9bn1StH9CnbbI9EgvejHQX7CBpCF1QA==",
-      "dependencies": {
-        "repeat-string": "^1.5.4"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -4298,14 +4054,6 @@
         "regl": "~2.1.0"
       }
     },
-    "node_modules/repeat-string": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
     "node_modules/request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@@ -4610,14 +4358,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/stream-read-all": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/stream-read-all/-/stream-read-all-3.0.1.tgz",
-      "integrity": "sha512-EWZT9XOceBPlVJRrYcykW8jyRSZYbkb/0ZK36uLEmoWVO5gxBOnntNTseNzfREsqxqdfEGQrD8SXQ3QWbBmq8A==",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz",
@@ -4731,42 +4471,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/table-layout": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/table-layout/-/table-layout-3.0.2.tgz",
-      "integrity": "sha512-rpyNZYRw+/C+dYkcQ3Pr+rLxW4CfHpXjPDnG7lYhdRoUcZTUt+KEsX+94RGp/aVp/MQU35JCITv2T/beY4m+hw==",
-      "dependencies": {
-        "@75lb/deep-merge": "^1.1.1",
-        "array-back": "^6.2.2",
-        "command-line-args": "^5.2.1",
-        "command-line-usage": "^7.0.0",
-        "stream-read-all": "^3.0.1",
-        "typical": "^7.1.1",
-        "wordwrapjs": "^5.1.0"
-      },
-      "bin": {
-        "table-layout": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=12.17"
-      }
-    },
-    "node_modules/table-layout/node_modules/array-back": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/array-back/-/array-back-6.2.2.tgz",
-      "integrity": "sha512-gUAZ7HPyb4SJczXAMUXMGAvI976JoK3qEx9v1FTmeYuJj0IBiaKttG1ydtGKdkfqWkIkouke7nG8ufGy77+Cvw==",
-      "engines": {
-        "node": ">=12.17"
-      }
-    },
-    "node_modules/table-layout/node_modules/typical": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/typical/-/typical-7.1.1.tgz",
-      "integrity": "sha512-T+tKVNs6Wu7IWiAce5BgMd7OZfNYUndHwc5MknN+UHOudi7sGZzuHdCadllRuqJ3fPtgFtIH9+lt9qRv6lmpfA==",
-      "engines": {
-        "node": ">=12.17"
-      }
-    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -4794,11 +4498,6 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
-    },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -4904,14 +4603,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/typical": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/typical/-/typical-4.0.0.tgz",
-      "integrity": "sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -5169,14 +4860,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/wordwrapjs": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/wordwrapjs/-/wordwrapjs-5.1.0.tgz",
-      "integrity": "sha512-JNjcULU2e4KJwUNv6CHgI46UvDGitb6dGryHajXTDiLgg1/RiGoPSDw4kZfYnwGtEXf2ZMeIewDQgFGzkCB2Sg==",
-      "engines": {
-        "node": ">=12.17"
-      }
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/web/package.json b/web/package.json
index e5f71eb..600e136 100644
--- a/web/package.json
+++ b/web/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "d3-scale": "^4.0.2",
+    "d3-scale-chromatic": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.1",
diff --git a/web/src/App.jsx b/web/src/App.jsx
index bf0b892..c36669a 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -5,17 +5,19 @@ import DatasetSetup from './components/DatasetSetup';
 import Nav from './components/Nav';
 import './App.css';
 
+const env = import.meta.env;
+console.log("ENV", env)
+const readonly = import.meta.env.MODE == "read_only"
+
 function App() {
-  const env = import.meta.env;
-  console.log("ENV", env)
   return (
     <Router basename={env.BASE_NAME}>
       <Nav />
       <div className="page">
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/datasets/:dataset/setup" element={<DatasetSetup/>} />
-        <Route path="/datasets/:dataset/setup/:scope" element={<DatasetSetup/>} />
+        {readonly ? null : <Route path="/datasets/:dataset/setup" element={<DatasetSetup/>} />}
+        {readonly ? null : <Route path="/datasets/:dataset/setup/:scope" element={<DatasetSetup/>} />}
         <Route path="/datasets/:dataset/explore/:scope" element={<DatasetExplore />} />
       </Routes>
       </div>
diff --git a/web/src/components/DataTable.css b/web/src/components/DataTable.css
index e5298cd..95c7750 100644
--- a/web/src/components/DataTable.css
+++ b/web/src/components/DataTable.css
@@ -24,4 +24,18 @@ table.datatable {
   background-color: #eee;
   filter: grayscale(100%);
   opacity: 0.5;
+}
+
+@media (prefers-color-scheme: dark) {
+  .datatable th {
+    background-color: #141414;
+  }
+
+  .datatable .tag-active {
+    background-color: #111;
+    border: 1px solid gray;
+  }
+  .datatable .tag-inactive {
+    background-color: #333;
+  }
 }
\ No newline at end of file
diff --git a/web/src/components/DataTable.jsx b/web/src/components/DataTable.jsx
index 00e075b..c60d357 100644
--- a/web/src/components/DataTable.jsx
+++ b/web/src/components/DataTable.jsx
@@ -67,7 +67,8 @@ function DataTable({ data, tagset, datasetId, maxRows, onTagset, onHover, onClic
             onMouseLeave={() => onHover && onHover()}
             onClick={() => onClick && onClick(row.index)}
             >
-            {headers.map((header, idx) => <td key={idx}>{row[header]}</td>)}
+            {headers.map((header, idx) => 
+              <td key={idx}>{header == "url" ? <a href={row[header]}>url</a> : row[header]}</td>)}
             {tags ? <td>
               {tags.map((tag, idx) => (
                 <button 
diff --git a/web/src/components/DatasetExplore.css b/web/src/components/DatasetExplore.css
index 9f4ebba..c6c9fff 100644
--- a/web/src/components/DatasetExplore.css
+++ b/web/src/components/DatasetExplore.css
@@ -112,6 +112,18 @@
   font-weight: bold;
 }
 
+@media (prefers-color-scheme: dark) {
+  .dataset--explore .tab-header {
+    background-color: #333;
+  }
+  .dataset--explore .tab-header button:hover {
+    background-color: #333;
+  }
+  .dataset--explore .tab-header .tab-active {
+    background-color: #444;
+  }
+}
+
 .dataset--explore .tab-content {
   display: flex;
   flex-direction: column;
@@ -171,10 +183,10 @@
 /* Styling for nearest neighbors section */
 .dataset--explore .search-box input {
   /* height: 24px; */
-  width: 290px;
+  width: 350px;
 }
 .dataset--explore .search-box select {
-  width: 298px;
+  width: 358px;
 
 }
 
diff --git a/web/src/components/DatasetExplore.jsx b/web/src/components/DatasetExplore.jsx
index 4774a56..6c538e9 100644
--- a/web/src/components/DatasetExplore.jsx
+++ b/web/src/components/DatasetExplore.jsx
@@ -6,12 +6,14 @@ import DataTable from './DataTable';
 import IndexDataTable from './IndexDataTable';
 import Scatter from './Scatter';
 import AnnotationPlot from './AnnotationPlot';
+import HullPlot from './HullPlot';
 
 
 // TODO: decide how to deal with sizing
 const scopeWidth = 500
 const scopeHeight = 500
 const apiUrl = import.meta.env.VITE_API_URL
+const readonly = import.meta.env.MODE == "read_only"
 
 function DatasetDetail() {
   const [dataset, setDataset] = useState(null);
@@ -51,12 +53,23 @@ function DatasetDetail() {
   const [clusterLabels, setClusterLabels] = useState([]);
   // The search model is the embeddings model that we pass to the nearest neighbor query
   // we want to enable searching with any embedding set
-  const [searchModel, setSearchModel] = useState(embedding)
+  const [searchModel, setSearchModel] = useState(embedding?.id)
+
+
+  const [embeddings, setEmbeddings] = useState([]);
+  useEffect(() => {
+    fetch(`${apiUrl}/datasets/${datasetId}/embeddings`)
+      .then(response => response.json())
+      .then(data => {
+        // console.log("embeddings", data)
+        setEmbeddings(data)
+      });
+  }, [datasetId, setEmbeddings]);
+
 
   useEffect(() => {
     if(scope) {
-      setEmbedding(scope.embedding_id)
-      setSearchModel(scope.embedding_id)
+      setEmbedding(embeddings.find(e => e.id == scope.embedding_id))
       fetch(`${apiUrl}/datasets/${datasetId}/umaps/${scope.umap_id}`)
         .then(response => response.json())
         .then(data => {
@@ -76,18 +89,19 @@ function DatasetDetail() {
           setClusterIndices(data)
         });
     }
-  }, [datasetId, scope, setUmap, setClusterLabels, setEmbedding, setSearchModel]);
+  }, [datasetId, scope, embeddings, setUmap, setClusterLabels, setEmbedding, setSearchModel]);
+
+  const memoClusterIndices = useMemo(() => {
+    return clusterIndices.map(d => d.cluster)
+  }, [clusterIndices])
 
 
-  const [embeddings, setEmbeddings] = useState([]);
   useEffect(() => {
-    fetch(`${apiUrl}/datasets/${datasetId}/embeddings`)
-      .then(response => response.json())
-      .then(data => {
-        // console.log("embeddings", data)
-        setEmbeddings(data)
-      });
-  }, [datasetId, setEmbeddings]);
+    if(embedding) {
+      setSearchModel(embedding.id)
+    }
+  }, [embedding, setSearchModel])
+
 
   // const [activeUmap, setActiveUmap] = useState(null)
   const handleModelSelect = (model) => {
@@ -146,6 +160,7 @@ function DatasetDetail() {
   const [selectedIndices, setSelectedIndices] = useState([]);
 
   const handleSelected = useCallback((indices) => {
+    console.log("handle selected", indices)
     setSelectedIndices(indices);
     setActiveTab(0)
     // for now we dont zoom because if the user is selecting via scatter they can easily zoom themselves
@@ -171,8 +186,8 @@ function DatasetDetail() {
     if(hovered && clusterIndices.length && clusterLabels.length){
       const index = hovered.index
       const cluster = clusterIndices[index]
-      const label = clusterLabels[cluster?.cluster]?.label
-      setHoveredCluster({label, cluster: cluster.cluster})
+      const label = clusterLabels[cluster?.cluster]
+      setHoveredCluster({cluster: cluster.cluster, ...label})
     } else {
       setHoveredCluster(null)
     }
@@ -226,7 +241,7 @@ function DatasetDetail() {
   const [distances, setDistances] = useState([]);
 
   const searchQuery = useCallback((query) => {
-    fetch(`${apiUrl}/search/nn?dataset=${datasetId}&query=${query}&model=${searchModel}`)
+    fetch(`${apiUrl}/search/nn?dataset=${datasetId}&query=${query}&embedding_id=${searchModel}`)
       .then(response => response.json())
       .then(data => {
         // console.log("search", data)
@@ -275,16 +290,17 @@ function DatasetDetail() {
       <div className="column">
         <div className="first-row summary">
           <h3> {datasetId}  [{scope?.id}]
-              <Link to={`/datasets/${dataset?.id}/setup/${scope?.id}`}>Configure</Link> 
+              {readonly ? null : <Link to={`/datasets/${dataset?.id}/setup/${scope?.id}`}>Configure</Link> }
           </h3>
           {dataset?.length} rows<br/>
-          Embedding model:<br/> {embedding}<br/>
+          Embedding model:<br/> {embedding?.model_id}<br/>
         </div>
         <div className="second-row">
           <div className="umap-container">
             <div className="scatters" style={{ width: scopeWidth, height: scopeHeight }}>
               <Scatter 
                 points={points} 
+                colors={memoClusterIndices}
                 loading={loadingPoints} 
                 width={scopeWidth} 
                 height={scopeHeight}
@@ -293,6 +309,31 @@ function DatasetDetail() {
                 onSelect={handleSelected}
                 onHover={handleHover}
                 />
+              { hoveredCluster && hoveredCluster.hull ? <HullPlot
+                points={points}
+                hulls={[hoveredCluster?.hull]}
+                fill="lightgray"
+                xDomain={xDomain} 
+                yDomain={yDomain} 
+                width={scopeWidth} 
+                height={scopeHeight} /> : null }
+
+              { slide && slide.hull ? <HullPlot
+                points={points}
+                hulls={[slide?.hull]}
+                fill="darkgray"
+                xDomain={xDomain} 
+                yDomain={yDomain} 
+                width={scopeWidth} 
+                height={scopeHeight} /> : null }
+              <HullPlot
+                points={points}
+                hulls={clusterLabels.map(d => d.hull)}
+                stroke="lightgray"
+                xDomain={xDomain} 
+                yDomain={yDomain} 
+                width={scopeWidth} 
+                height={scopeHeight} />
               <AnnotationPlot 
                 points={searchAnnotations} 
                 fill="black"
@@ -332,6 +373,8 @@ function DatasetDetail() {
                 height={scopeHeight} 
                 />
               
+              
+              
             </div>
           </div>
           <div className="hovered-point">
@@ -364,8 +407,8 @@ function DatasetDetail() {
 
             {activeTab === 0 ?
             <div className="tab-content tab-selected">
-              <span>Selected: {selected.length} 
-                {selected.length > 0 ? 
+              <span>Selected: {selectedIndices?.length} 
+                {selectedIndices?.length > 0 ? 
                   <button className="deselect" onClick={() => {
                     setSelectedIndices([])
                     scatter?.select([])
@@ -374,7 +417,7 @@ function DatasetDetail() {
                   }>X</button> 
                 : null}
               </span>
-              {selected.length > 0 ? 
+              {selectedIndices?.length > 0 ? 
                 <IndexDataTable 
                   indices={selectedIndices}
                   clusterIndices={clusterIndices}
@@ -405,8 +448,8 @@ function DatasetDetail() {
                   <select id="embeddingModel" 
                     onChange={(e) => handleModelSelect(e.target.value)} 
                     value={searchModel}>
-                    {embeddings.map((embedding, index) => (
-                      <option key={index} value={embedding}>{embedding}</option>
+                    {embeddings.map((emb, index) => (
+                      <option key={index} value={emb.id}>{emb.id} - {emb.model_id}</option>
                     ))}
                   </select>
                   
@@ -490,7 +533,7 @@ function DatasetDetail() {
                       }}>{t}({tagset[t].length})</button>
                     })}
                   </div>
-                  <div className="new-tag">
+                  {readonly ? null : <div className="new-tag">
                     <form onSubmit={(e) => {
                       e.preventDefault();
                       const newTag = e.target.elements.newTag.value;
@@ -504,7 +547,7 @@ function DatasetDetail() {
                       <input type="text" id="newTag" />
                       <button type="submit">New Tag</button>
                     </form>
-                  </div>
+                  </div>}
                 </div>
                 <span>{tag} {tagset[tag]?.length}
                   { tag ? <button className="deselect" onClick={() => {
diff --git a/web/src/components/DatasetSetup.css b/web/src/components/DatasetSetup.css
index ec728ad..847c0e6 100644
--- a/web/src/components/DatasetSetup.css
+++ b/web/src/components/DatasetSetup.css
@@ -2,8 +2,6 @@
   --umap-width: 500px;
 }
 
-
-
 .dataset--setup {
   max-width: 100%;
   width: 100%;
@@ -39,6 +37,12 @@
   padding: 6px 12px;
   width: calc(100% - 24px);
 }
+
+@media (prefers-color-scheme: dark) {
+  .dataset--setup-info h3 {
+    background-color: #333;
+  }
+}
 .dataset--setup-info-content {
   padding: 12px 12px;
 }
@@ -86,18 +90,43 @@
 
 
 /* LEFT COLUMN  */
-
-.dataset--setup-embeddings form {
+.dataset--setup form {
   display: flex;
   flex-direction: column;
   gap: 10px;
+  margin: 12px 0;
+  padding-bottom: 12px;
 }
-.setup-scope form {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+.dataset--setup form select, .dataset--setup form input {
+  margin: 0 6px;
+  padding: 3px;
 }
 
+.dataset--setup form button {
+  max-width: 220px;
+  background-color: lightcyan;
+  border: 1px solid darkcyan;
+}
+.dataset--setup form button:hover {
+  background-color: steelblue;
+  color: white;
+}
+.dataset--setup .item {
+  background-color: #f1f1f1;
+  border-radius: 5px;
+  padding: 6px;
+}
+@media (prefers-color-scheme: dark) {
+  .dataset--setup form button {
+    color: #111;
+  }
+  .dataset--setup .item {
+    background-color: #333;
+  }
+}
+
+
+
 /* .active-stage {
   border: 1px solid orange;
 }
@@ -183,12 +212,34 @@
 
 /* in the right column */
 .dataset--setup-umap {
+  position: relative;
   width: var(--umap-width);
+  height: var(--umap-width);
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
   padding: 12px;
   margin: 12px;
   user-select: none;
 }
+.dataset--hovered {
+  width: var(--umap-width);
+  overflow-y: hidden;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
+  padding: 12px;
+  margin: 12px;
+
+}
+.dataset--hovered {
+  display: flex;
+  flex-direction: column;
+  padding: 6px;
+}
+.dataset--hovered .key {
+  font-weight: bold;
+}
+.dataset--hovered .value {
+  margin-left: 10px;
+}
+
 .dataset--selected {
   width: var(--umap-width);
   flex-grow: 1;
diff --git a/web/src/components/DatasetSetup.jsx b/web/src/components/DatasetSetup.jsx
index 29bb24d..f4a81b9 100644
--- a/web/src/components/DatasetSetup.jsx
+++ b/web/src/components/DatasetSetup.jsx
@@ -8,9 +8,10 @@ import Cluster from './Setup/Cluster';
 import ClusterLabels from './Setup/ClusterLabels';
 import Scope from './Setup/Scope';
 import Stage from './Setup/Stage';
+import HullPlot from './HullPlot';
 
 import IndexDataTable from './IndexDataTable';
-import UmapScatter from './UmapScatter';
+import Scatter from './Scatter';
   
 const apiUrl = import.meta.env.VITE_API_URL
 
@@ -122,7 +123,7 @@ function DatasetSetup() {
       console.log("finding the scope", scope)
       if(scope) {
         setScope(scope)
-        setEmbedding(scope.embedding_id)
+        setEmbedding(embeddings.find(e => e.id == scope.embedding_id))
         setSelectedUmap(scope.umap_id)
         setSelectedCluster(scope.cluster_id)
         setClusterLabelModel(scope.cluster_labels_id)
@@ -130,7 +131,7 @@ function DatasetSetup() {
     } else {
       setScope(null)
     } 
-  }, [scopeId, scopes])
+  }, [scopeId, scopes, embeddings])
 
 
   // ====================================================================================================
@@ -142,6 +143,97 @@ function DatasetSetup() {
   }, [setSelectedIndices])
 
   const [scatter, setScatter] = useState({})
+  const [xDomain, setXDomain] = useState([-1, 1]);
+  const [yDomain, setYDomain] = useState([-1, 1]);
+  const handleView = useCallback((xDomain, yDomain) => {
+    setXDomain(xDomain);
+    setYDomain(yDomain);
+  }, [setXDomain, setYDomain])
+
+
+  const hydrateIndices = useCallback((indices, setter, distances = []) => {
+    fetch(`${apiUrl}/indexed?dataset=${datasetId}&indices=${JSON.stringify(indices)}`)
+      .then(response => response.json())
+      .then(data => {
+        if(!dataset) return;
+        let rows = data.map((row, index) => {
+          return {
+            index: indices[index],
+            ...row
+          }
+        })
+        setter(rows)
+      })
+  }, [dataset, datasetId])
+
+  // Hover via scatterplot or tables
+  // index of item being hovered over
+  const [hoveredIndex, setHoveredIndex] = useState(null);
+  const handleHovered = useCallback((index) => {
+      setHoveredIndex(index);
+  }, [setHoveredIndex])
+
+  const [hovered, setHovered] = useState(null);
+  useEffect(() => {
+    if(hoveredIndex >= 0 && hoveredIndex != null) {
+      hydrateIndices([hoveredIndex], (results) => {
+        setHovered(results[0])
+      })
+    } else {
+      setHovered(null)
+    }
+  }, [hoveredIndex, setHovered, hydrateIndices])
+
+  const [clusterIndices, setClusterIndices] = useState([]);
+  const [clusterLabels, setClusterLables] = useState([]);
+  useEffect(() => {
+    if(cluster) {
+      fetch(`${apiUrl}/datasets/${datasetId}/clusters/${cluster.id}/indices`)
+        .then(response => response.json())
+        .then(data => {
+          console.log("cluster indices", data)
+          setClusterIndices(data)
+        });
+      } else {
+        setClusterIndices([])
+      }
+  }, [cluster, setClusterIndices, datasetId])
+
+  const memoClusterIndices = useMemo(() => {
+    return clusterIndices.map(d => d.cluster)
+  }, [clusterIndices])
+
+
+
+  const [hoveredCluster, setHoveredCluster] = useState(null);
+  useEffect(() => {
+    if(hovered && clusterIndices.length && clusterLabels.length){
+      const index = hovered.index
+      const cluster = clusterIndices[index]
+      const label = clusterLabels[cluster?.cluster]
+      setHoveredCluster({...label, cluster: cluster.cluster})
+    } else {
+      setHoveredCluster(null)
+    }
+  }, [hovered, clusterIndices, clusterLabels, setHoveredCluster])
+
+
+  const [points, setPoints] = useState([]);
+  // const [loadingPoints, setLoadingPoints] = useState(false);
+  useEffect(() => {
+    if(umap) {
+      fetch(`${apiUrl}/datasets/${dataset.id}/umaps/${umap.id}/points`)
+        .then(response => response.json())
+        .then(data => {
+          // console.log("umap points", data)
+          setPoints(data.map(d => [d.x, d.y]))
+        })
+    } else {
+      setPoints([])
+    }
+  }, [dataset, umap])
+
+
 
   // ====================================================================================================
   // progress indicator through stages
@@ -223,7 +315,7 @@ function DatasetSetup() {
             <Cluster dataset={dataset} cluster={cluster} umap={umap} onNew={setClusters} onChange={setCluster} />
           </Stage>
           <Stage active={stage == 4} complete={stage > 4} title="4. Auto-Label Clusters">
-            <ClusterLabels dataset={dataset} cluster={cluster} selectedModel={clusterLabelModel} onChange={setClusterLabelModel} />
+            <ClusterLabels dataset={dataset} cluster={cluster} selectedModel={clusterLabelModel} onChange={setClusterLabelModel} onLabels={setClusterLables} onHoverLabel={setHoveredCluster} />
           </Stage>
           <Stage active={stage == 5} complete={stage > 5} title="5. Save Scope">
             <Scope dataset={dataset} scope={scope} embedding={embedding} umap={umap} cluster={cluster} clusterLabelModel={clusterLabelModel} onNew={setScopes} onChange={setScope} />
@@ -233,38 +325,69 @@ function DatasetSetup() {
         {/* RIGHT COLUMN */}
         <div className="dataset--setup-right-column">
           <div className="dataset--setup-umap">
-            <UmapScatter 
-              dataset={dataset} 
-              umap={umap}
+
+            <Scatter 
+              points={points} 
+              colors={memoClusterIndices}
               width={scopeWidth} 
               height={scopeHeight}
               onScatter={setScatter}
+              onView={handleView} 
               onSelect={handleSelected}
+              onHover={handleHovered}
               />
-            </div>
+            { hoveredCluster && hoveredCluster.hull ? <HullPlot
+              points={points}
+              hulls={[hoveredCluster?.hull]}
+              fill="lightgray"
+              xDomain={xDomain} 
+              yDomain={yDomain} 
+              width={scopeWidth} 
+              height={scopeHeight} /> : null }
+            <HullPlot
+              points={points}
+              hulls={clusterLabels.map(d => d.hull)}
+              stroke="lightgray"
+              xDomain={xDomain} 
+              yDomain={yDomain} 
+              width={scopeWidth} 
+              height={scopeHeight} /> 
+          </div>
 
-            <div className="dataset--selected">
-              <span>Points Selected: {selectedIndices.length} {!selectedIndices.length ? "(Hold shift and drag an area of the map to select)" : null}
-                {selectedIndices.length > 0 ? 
-                  <button className="deselect" onClick={() => {
-                    setSelectedIndices([])
-                    scatter?.select([])
-                    scatter?.zoomToOrigin({ transition: true, transitionDuration: 1500 })
-                  }
-                  }>X</button> 
-                : null}
+          <div className="dataset--hovered">
+            {/* Hovered: &nbsp; */}
+            {hovered && Object.keys(hovered).map((key) => (
+              <span key={key}>
+                <span className="key">{key}:</span> 
+                <span className="value">{hovered[key]}</span>
               </span>
+            ))}
+            {hoveredCluster ? <span><span className="key">Cluster:</span><span className="value">{hoveredCluster.label}</span></span> : null }
+            {/* <DataTable  data={hovered} tagset={tagset} datasetId={datasetId} onTagset={(data) => setTagset(data)} /> */}
+          </div>
+
+          <div className="dataset--selected">
+            <span>Points Selected: {selectedIndices.length} {!selectedIndices.length ? "(Hold shift and drag an area of the map to select)" : null}
               {selectedIndices.length > 0 ? 
-              <div className="dataset--selected-table">
-                <IndexDataTable 
-                  dataset={dataset}
-                  indices={selectedIndices} 
-                  datasetId={datasetId} 
-                  maxRows={150} 
-                  />
-              </div>
-              : null }
+                <button className="deselect" onClick={() => {
+                  setSelectedIndices([])
+                  scatter?.select([])
+                  scatter?.zoomToOrigin({ transition: true, transitionDuration: 1500 })
+                }
+                }>X</button> 
+              : null}
+            </span>
+            {selectedIndices.length > 0 ? 
+            <div className="dataset--selected-table">
+              <IndexDataTable 
+                dataset={dataset}
+                indices={selectedIndices} 
+                datasetId={datasetId} 
+                maxRows={150} 
+                />
             </div>
+            : null }
+          </div>
         
         </div>
       </div>
diff --git a/web/src/components/Home.css b/web/src/components/Home.css
index 6237731..8bcae28 100644
--- a/web/src/components/Home.css
+++ b/web/src/components/Home.css
@@ -16,6 +16,13 @@
   background-color: #f9f9f9;
   cursor: pointer;
 }
+@media (prefers-color-scheme: dark) {
+  
+.home label[for="upload-button"] {
+  background-color: #555;
+}
+
+}
 
 .home .scope-links {
   display: flex;
@@ -26,5 +33,7 @@
   padding: 12px;
   margin: 12px;
   border: 1px solid lightsalmon;
-  
+}
+.home .scope-link img {
+  width: 240px;
 }
\ No newline at end of file
diff --git a/web/src/components/Home.jsx b/web/src/components/Home.jsx
index 31c5609..fb223ec 100644
--- a/web/src/components/Home.jsx
+++ b/web/src/components/Home.jsx
@@ -3,6 +3,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { jobPolling } from './JobRun';
 import JobProgress from './JobProgress';
 const apiUrl = import.meta.env.VITE_API_URL
+const readonly = import.meta.env.MODE == "read_only"
 
 import './Home.css';
 
@@ -91,7 +92,7 @@ function Home() {
 
   return (
     <div className="home">
-      <div className="new-dataset">
+      {readonly ? null : <div className="new-dataset">
         <h3>Create new dataset</h3>
         <form onSubmit={handleNewDataset} onDragOver={handleDragOver} onDrop={handleDrop}>
           <label htmlFor="upload-button">
@@ -111,18 +112,20 @@ function Home() {
           <button type="submit">Submit</button>
         </form>
         <JobProgress job={ingestJob} clearJob={() => setIngestJob(null)} />
-      </div>
+      </div> }
       <h3>Datasets</h3>
       <ul>
         {datasets.map(dataset => (
           <li key={dataset.id}>
-            <Link to={`/datasets/${dataset.id}/setup`}>Setup {dataset.id}</Link>
+            <h3> {dataset.id} - {dataset.length} rows</h3>
+            {readonly ? null : <Link to={`/datasets/${dataset.id}/setup`}>Setup {dataset.id}</Link> }
             <div className="scope-links">
             {scopes[dataset.id] && scopes[dataset.id].map && scopes[dataset.id]?.map((scope,i) => (
               <div className="scope-link" key={i} >
-                <Link to={`/datasets/${dataset.id}/explore/${scope.id}`}>Explore {scope.id} - {scope.label}<br></br>
-                <img width="120px" src={`${apiUrl}/files/${dataset.id}/clusters/${scope.cluster_id}.png`} />
+                <Link to={`/datasets/${dataset.id}/explore/${scope.id}`}>Explore {scope.id} <br/> {scope.label}<br/>
+                <img src={`${apiUrl}/files/${dataset.id}/clusters/${scope.cluster_id}.png`} />
                 </Link><br></br>
+                {readonly ? null : <Link to={`/datasets/${dataset.id}/setup/${scope.id}`}>Setup {scope.id}</Link> }
               </div>
             ))}
             </div>
diff --git a/web/src/components/HullPlot.css b/web/src/components/HullPlot.css
new file mode 100644
index 0000000..38e70e4
--- /dev/null
+++ b/web/src/components/HullPlot.css
@@ -0,0 +1,4 @@
+.hull-plot {
+  position: absolute;
+  pointer-events: none;
+}
\ No newline at end of file
diff --git a/web/src/components/HullPlot.jsx b/web/src/components/HullPlot.jsx
new file mode 100644
index 0000000..3a19f08
--- /dev/null
+++ b/web/src/components/HullPlot.jsx
@@ -0,0 +1,67 @@
+import React, { useEffect, useRef } from 'react';
+import { scaleLinear } from 'd3-scale';
+
+import "./HullPlot.css"
+
+const HullPlot = ({ 
+  points, 
+  hulls,
+  fill,
+  stroke,
+  size,
+  symbol,
+  xDomain, 
+  yDomain, 
+  width, 
+  height
+}) => {
+  const container = useRef();
+  
+  useEffect(() => {
+    if(xDomain && yDomain) {
+      const xScale = scaleLinear()
+        .domain(xDomain)
+        .range([0, width])
+      const yScale = scaleLinear()
+        .domain(yDomain)
+        .range([height, 0])
+
+      const zScale = (t) => t/(.1 + xDomain[1] - xDomain[0])
+      const canvas = container.current
+      const ctx = canvas.getContext('2d')
+      ctx.clearRect(0, 0, width, height)
+      ctx.fillStyle = fill 
+      ctx.strokeStyle = stroke
+      ctx.font = `${zScale(size)}px monospace`
+      ctx.globalAlpha = 0.75
+      let rw = zScale(size)
+      if(!hulls.length || !points.length) return
+      hulls.forEach(hull => {
+        // a hull is a list of indices into points
+        if(!hull) return;
+        ctx.beginPath()
+        hull.forEach((index, i) => {
+          if(i === 0) {
+            ctx.moveTo(xScale(points[index][0]), yScale(points[index][1]))
+          } else {
+            ctx.lineTo(xScale(points[index][0]), yScale(points[index][1]))
+          }
+        })
+        ctx.lineTo(xScale(points[hull[0]][0]), yScale(points[hull[0]][1]))
+        if(fill)
+          ctx.fill()
+        if(stroke)
+          ctx.stroke()
+      })
+    }
+
+  }, [points, hulls, fill, stroke, size, xDomain, yDomain, width, height])
+
+  return <canvas 
+    className="hull-plot"
+    ref={container} 
+    width={width} 
+    height={height} />;
+};
+
+export default HullPlot;
diff --git a/web/src/components/Scatter.jsx b/web/src/components/Scatter.jsx
index a727adc..2500e16 100644
--- a/web/src/components/Scatter.jsx
+++ b/web/src/components/Scatter.jsx
@@ -1,12 +1,16 @@
 import { useEffect, useRef } from 'react';
 import createScatterplot from 'regl-scatterplot';
-import { scaleLinear, scaleLog } from 'd3-scale';
-import PropTypes from 'prop-types';
+import { scaleSequential, scaleLinear, scaleLog } from 'd3-scale';
+import { groups, extent } from 'd3-array';
+import { rgb } from 'd3-color';
+import { interpolateViridis, interpolateTurbo, interpolateCool } from 'd3-scale-chromatic';
 
 import styles from  "./Scatter.module.css"
 
+import PropTypes from 'prop-types';
 ScatterPlot.propTypes = {
   points: PropTypes.array.isRequired,
+  colors: PropTypes.array,
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
   onScatter: PropTypes.func,
@@ -41,6 +45,7 @@ const calculatePointOpacity = (numPoints) => {
 
 function ScatterPlot ({ 
   points, 
+  colors,
   width, 
   height, 
   onScatter,
@@ -57,53 +62,73 @@ function ScatterPlot ({
     .domain(yDomain.current)
 
   useEffect(() => {
+    if(points && points.length){
     
-    const pointSize = calculatePointSize(points.length);
-    const opacity = calculatePointOpacity(points.length);
-    console.log("point size", pointSize, opacity)
-    const scatterplot = createScatterplot({ 
-      canvas: container.current,
-      width,
-      height,
-      pointSize,
-      opacity,
-      pointColor: [250/255, 128/255, 114/255, 1], //salmon
-      pointColorHover: [0.1, 0.1, 0.1, 0.5],
-      xScale,
-      yScale,
-    });
+      const pointSize = calculatePointSize(points.length);
+      const opacity = calculatePointOpacity(points.length);
+      // console.log("point size", pointSize, opacity)
+      let pointColor = [250/255, 128/255, 114/255, 1] //salmon
+      let drawPoints = points
+      if(colors?.length) {
+        drawPoints = points.map((p, i) => {
+          return [p[0], p[1], colors[i]]
+        })
+        const uniques = groups(colors, d => d).map(d => d[0]).sort((a,b) => a - b)
+        // const colorScale = scaleSequential(interpolateViridis)
+        // const colorScale = scaleSequential(interpolateTurbo)
+        const colorScale = scaleSequential(interpolateCool)
+          .domain(extent(uniques).reverse());
+        pointColor = uniques.map(u => rgb(colorScale(u)).hex())
+      }
+      const scatterSettings = { 
+        canvas: container.current,
+        width,
+        height,
+        pointSize,
+        opacity,
+        pointColor,
+        pointColorHover: [0.1, 0.1, 0.1, 0.5],
+        xScale,
+        yScale,
+      }
+      if(colors?.length){
+        scatterSettings.colorBy = 'valueA' 
+      }
+      const scatterplot = createScatterplot(scatterSettings);
 
-    scatterplot.draw(points);
+      
+      scatterplot.draw(drawPoints);
 
-    onView && onView(xScale, yScale)
-    scatterplot.subscribe(
-      "view",
-      ({ camera, view, xScale: xs, yScale: ys }) => {
-        xDomain.current = xs.domain();
-        yDomain.current = ys.domain();
-        onView && onView(xDomain.current, yDomain.current)
-     }
-    );
-    scatterplot.subscribe("select", ({ points }) => {
-      onSelect && onSelect(points)
-    });
-    scatterplot.subscribe("deselect", () => {
-      onSelect && onSelect([])
-    });
-    scatterplot.subscribe("pointOver", (pointIndex) => {
-      onHover && onHover(pointIndex)
-    });
-    scatterplot.subscribe("pointOut", () => {
-      onHover && onHover(null)
-    });
+      onView && onView(xScale, yScale)
+      scatterplot.subscribe(
+        "view",
+        ({ camera, view, xScale: xs, yScale: ys }) => {
+          xDomain.current = xs.domain();
+          yDomain.current = ys.domain();
+          onView && onView(xDomain.current, yDomain.current)
+      }
+      );
+      scatterplot.subscribe("select", ({ points }) => {
+        onSelect && onSelect(points)
+      });
+      scatterplot.subscribe("deselect", () => {
+        onSelect && onSelect([])
+      });
+      scatterplot.subscribe("pointOver", (pointIndex) => {
+        onHover && onHover(pointIndex)
+      });
+      scatterplot.subscribe("pointOut", () => {
+        onHover && onHover(null)
+      });
 
-    // TODO: this may not be proper React
-    onScatter && onScatter(scatterplot)
+      // TODO: this may not be proper React
+      onScatter && onScatter(scatterplot)
 
-    return () => {
-      scatterplot.destroy();
-    };
-  }, [points]);
+      return () => {
+        scatterplot.destroy();
+      };
+    }
+  }, [points, colors]);
 
   return <canvas className={styles.scatter} ref={container} />;
 }
diff --git a/web/src/components/Scatter.module.css b/web/src/components/Scatter.module.css
index 371754f..997a5ce 100644
--- a/web/src/components/Scatter.module.css
+++ b/web/src/components/Scatter.module.css
@@ -2,4 +2,9 @@
 .scatter {
   position: absolute;
   background-color: #fefefe;
+}
+@media (prefers-color-scheme: dark) {
+  .scatter {
+    background-color: #111;
+  }
 }
\ No newline at end of file
diff --git a/web/src/components/Setup/Cluster.jsx b/web/src/components/Setup/Cluster.jsx
index b4e7dce..6ee6be6 100644
--- a/web/src/components/Setup/Cluster.jsx
+++ b/web/src/components/Setup/Cluster.jsx
@@ -74,7 +74,7 @@ function Cluster({ dataset, cluster, umap, onNew, onChange}) {
         <label>
           Samples:
           <input type="number" name="samples" defaultValue="5" disabled={!!clusterJob || !umap}/>
-        </label><br/>
+        </label>
         <label>
           Min Samples:
           <input type="number" name="min_samples" defaultValue="5" disabled={!!clusterJob || !umap} />
@@ -86,7 +86,7 @@ function Cluster({ dataset, cluster, umap, onNew, onChange}) {
 
       <div className="dataset--setup-clusters-list">
         {umap && clusters.filter(d => d.umap_id == umap.id).map((cl, index) => (
-          <div className="dataset--setup-clusters-item" key={index}>
+          <div className="item dataset--setup-clusters-item" key={index}>
             <input type="radio" 
               id={`cluster${index}`} 
               name="cluster" 
diff --git a/web/src/components/Setup/ClusterLabels.jsx b/web/src/components/Setup/ClusterLabels.jsx
index a793d55..3fb640c 100644
--- a/web/src/components/Setup/ClusterLabels.jsx
+++ b/web/src/components/Setup/ClusterLabels.jsx
@@ -15,11 +15,13 @@ ClusterLabels.propTypes = {
   cluster: PropTypes.object,
   selectedModel: PropTypes.string,
   onChange: PropTypes.func.isRequired,
+  onLabels: PropTypes.func,
+  onHoverLabel: PropTypes.func,
 };
 
 // This component is responsible for the embeddings state
 // New embeddings update the list
-function ClusterLabels({ dataset, cluster, selectedModel, onChange}) {
+function ClusterLabels({ dataset, cluster, selectedModel, onChange, onLabels, onHoverLabel}) {
   const [clusterLabelsJob, setClusterLabelsJob] = useState(null);
   const { startJob: startClusterLabelsJob } = useStartJobPolling(dataset, setClusterLabelsJob, `${apiUrl}/jobs/cluster_label`);
 
@@ -69,6 +71,12 @@ function ClusterLabels({ dataset, cluster, selectedModel, onChange}) {
       setClusterLabelModels([])
     }
   }, [dataset, cluster, clusterLabelsJob, setClusterLabelModels])
+  
+  useEffect(() => {
+    if(clusterLabels?.length) {
+      onLabels(clusterLabels)
+    }
+  }, [clusterLabels, onLabels])
 
 
   const handleNewLabels= useCallback((e) => {
@@ -89,15 +97,14 @@ function ClusterLabels({ dataset, cluster, selectedModel, onChange}) {
           {cluster ? ` in ${cluster.cluster_id}` : ''} using a chat model. </p>
         <form onSubmit={handleNewLabels}>
           <label>
-            Chat Models:
+            Chat Model:
             <select id="chatModel" name="chatModel" disabled={!!clusterLabelsJob}>
               {chatModels.filter(d => clusterLabelModels?.indexOf(d.id) < 0).map((model, index) => (
                 <option key={index} value={model.id}>{model.provider} - {model.name}</option>
               ))}
             </select>
-            <br></br>
-            <textarea name="context" disabled={!!clusterLabelsJob || !cluster}></textarea>
           </label>
+          <textarea name="context" placeholder="Optional context for system prompt" disabled={!!clusterLabelsJob || !cluster}></textarea>
           <button type="submit" disabled={!!clusterLabelsJob || !cluster}>Auto Label</button>
         </form>
 
@@ -118,7 +125,7 @@ function ClusterLabels({ dataset, cluster, selectedModel, onChange}) {
           </select>
         </label>
         <div className="dataset--setup-labels-list">
-          <DataTable data={clusterLabels.map((d,i) => ({cluster: i, label: d.label, items: d.indices.length}))} />
+          <DataTable data={clusterLabels.map((d,i) => ({index: i, label: d.label, items: d.indices.length}))} onHover={(index) => onHoverLabel(clusterLabels[index])}/>
         </div>
       </div> : null}
     </div>
diff --git a/web/src/components/Setup/Embedding.jsx b/web/src/components/Setup/Embedding.jsx
index 5f9eb3f..0f94ab9 100644
--- a/web/src/components/Setup/Embedding.jsx
+++ b/web/src/components/Setup/Embedding.jsx
@@ -4,6 +4,9 @@ import JobProgress from '../JobProgress';
 import { useStartJobPolling } from '../JobRun';
 const apiUrl = import.meta.env.VITE_API_URL
 
+import styles from './Embedding.module.css';
+console.log("EMBEDDING STYLES", styles)
+
 import PropTypes from 'prop-types';
 EmbeddingNew.propTypes = {
   dataset: PropTypes.shape({
@@ -73,28 +76,26 @@ function EmbeddingNew({ dataset, textColumn, embedding, umaps, clusters, onNew,
 
   return (
     <div>
-      <div>
+      <div className={styles["embeddings-form"]}>
         Embedding on column: <b>{textColumn}</b>
-      </div>
       <form onSubmit={handleNewEmbedding}>
-        <div>
-          <label htmlFor="modelName">Model:</label>
+          <label htmlFor="modelName">Model:
           <select id="modelName" name="modelName" disabled={!!embeddingsJob}>
             {models.map((model, index) => (
               <option key={index} value={model.id}>{model.provider}: {model.name}</option>
             ))}
-          </select>
-          <textarea name="prefix" placeholder="Optional prefix to prepend to each sentence" disabled={!!embeddingsJob}></textarea>
-        </div> 
+          </select></label>
+          <textarea name="prefix" placeholder={`Optional prefix to prepend to each ${textColumn}`} disabled={!!embeddingsJob}></textarea>
         <button type="submit" disabled={!!embeddingsJob}>New Embedding</button>
       </form>
+      </div>
       <JobProgress job={embeddingsJob} clearJob={()=> {
         
         setEmbeddingsJob(null)
       }} />
-      <div className="embeddings-list">
+      <div className={styles["embeddings-list"]}>
       {embeddings.map((emb, index) => (
-        <div key={index}>
+        <div className="item" key={index}>
           <input type="radio" id={`embedding${index}`} name="embedding" value={emb.id} checked={emb.id === embedding?.id} onChange={() => onChange(emb)} />
           <label htmlFor={`embedding${index}`}>
             <span>
diff --git a/web/src/components/Setup/Embedding.module.css b/web/src/components/Setup/Embedding.module.css
new file mode 100644
index 0000000..7d2253f
--- /dev/null
+++ b/web/src/components/Setup/Embedding.module.css
@@ -0,0 +1,15 @@
+
+.embeddings-form {
+
+}
+.embeddings-form form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 12px 0;
+}
+
+.embeddings-list input, .embeddings-list label {
+  cursor: pointer;
+
+}
\ No newline at end of file
diff --git a/web/src/components/Setup/Stage.module.css b/web/src/components/Setup/Stage.module.css
index 74bbb98..13dcd14 100644
--- a/web/src/components/Setup/Stage.module.css
+++ b/web/src/components/Setup/Stage.module.css
@@ -20,6 +20,8 @@
 .complete h3 {
   background-color: lightblue;
 }
+
+
 .complete h3::before {
   content: '✅';
   margin-right: 5px;
@@ -36,3 +38,22 @@
   margin-right: 5px;
 }
 
+@media (prefers-color-scheme: dark) {
+  .stage h3 {
+    background-color: #444;
+  }
+  .complete {
+    border: 1px solid darkslategray;
+  }
+  .complete h3 {
+    background-color: darkslategray;
+  }
+  .active {
+    border: 1px solid lightslategray;
+  }
+  .active h3 {
+    background-color: lightslategray;
+  }
+  
+
+}
\ No newline at end of file
diff --git a/web/src/components/Setup/Umap.jsx b/web/src/components/Setup/Umap.jsx
index cc5626f..c163e2d 100644
--- a/web/src/components/Setup/Umap.jsx
+++ b/web/src/components/Setup/Umap.jsx
@@ -81,7 +81,7 @@ function Umap({ dataset, umap, embedding, clusters, onNew, onChange}) {
         {/* The list of available UMAPS */}
         <div className={styles["umaps-list"]}>
           {umaps.filter(d => d.embedding_id == embedding?.id).map((um, index) => (
-            <div className={styles["umaps-item"]} key={index}>
+            <div className={`${styles["umaps-item"]} item`} key={index}>
               <input type="radio" 
                 id={`umap${index}`} 
                 name="umap"