diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 7b67623..63d36a6 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -11,7 +11,7 @@ concurrency:  # Cancel previous workflows on the same pull request
     
 
 jobs:
-  build-and-deploy:
+  deploy-web-service:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
diff --git a/package.json b/package.json
index b7b0418..484f5cd 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,9 @@
 {
-  "name": "template_library",
+  "name": "hybrid_template_library",
   "description": "Library of templates to create hybrid data for spike sorting benchmarks",
   "version": "1.0.0",
   "author": "Heberto Mayorquin",
+  "homepage": "https://spikeinterface.github.io/hybrid_template_library",
   "license": "",
   "scripts": {
     "start": "react-scripts start",
diff --git a/public/basic.html b/public/basic.html
deleted file mode 100644
index e1dd1da..0000000
--- a/public/basic.html
+++ /dev/null
@@ -1,184 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Interactive Template Visualization</title>
-    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
-    <style>
-      #loader {
-        text-align: center;
-        padding: 20px;
-        display: none;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="plots-container"></div>
-    <div id="loader">Loading...</div>
-
-    <script type="module">
-      import * as zarr from "https://cdn.skypack.dev/zarr@0.5.0";
-
-      let unit_index = 0; // Keep track of the current template index
-      let isLoading = false; // Flag to prevent multiple simultaneous loads
-      const templatesToLoad = 5; // Number of templates to load per batch
-      let selectedUnitIndices = []; // Initialize outside of loadData function
-
-      async function loadData() {
-        if (isLoading) return;
-        isLoading = true;
-        document.getElementById("loader").style.display = "block";
-
-        const s3Url = "https://spikeinterface-template-database.s3.us-east-2.amazonaws.com/test_templates";
-        const fetchOptions = { redirect: "follow" };
-        const store = new zarr.HTTPStore(s3Url, fetchOptions);
-
-        try {
-          const zarr_group = await zarr.openGroup(store);
-          const probe_group = await zarr.openGroup(store, "probe", "r");
-          const template_array = await zarr_group.getItem("templates_array");
-          const attributes = await zarr_group.attrs.asObject();
-          const samplingFrequency = attributes["sampling_frequency"];
-
-          for (let i = 0; i < templatesToLoad; i++, unit_index++) {
-            const single_template = await template_array.get([unit_index, null, null]);
-            const bestChannel = calculateBestChannel(single_template);
-            // get x and y
-            const x = await probe_group.getItem("x");
-            const y = await probe_group.getItem("y");
-            const xData = await x.get(null);
-            const yData = await y.get(null);
-
-            const single_template_best_channel = await single_template.get([null, bestChannel]);
-            renderPlot(single_template_best_channel, unit_index, bestChannel, xData, yData);
-          }
-        } catch (error) {
-          console.error("Error loading data:", error);
-        } finally {
-          isLoading = false;
-          document.getElementById("loader").style.display = "none";
-        }
-      }
-
-      function calculateBestChannel(single_template) {
-        // Placeholder for your logic to calculate the best channel
-        // This function needs to be implemented based on your existing logic
-        const numberOfChannels = single_template.shape[1];
-        const peak_to_peak_values = new Array(numberOfChannels).fill(0).map((_, channelIndex) => {
-          let channelMax = -Infinity;
-          let channelMin = Infinity;
-          single_template.data.forEach((sample) => {
-            const value = sample[channelIndex];
-            if (value > channelMax) channelMax = value;
-            if (value < channelMin) channelMin = value;
-          });
-          return channelMax - channelMin;
-        });
-        return peak_to_peak_values.indexOf(Math.max(...peak_to_peak_values));
-      }
-
-      function renderPlot(single_template_best_channel, templateIndex, bestChannel, xData, yData) {
-        const plotDiv = document.createElement("div");
-        const plotId = `plot-${templateIndex}`;
-        plotDiv.id = plotId;
-        document.getElementById("plots-container").appendChild(plotDiv);
-
-        // Get the location for the best channel
-        const locationX = xData.data[bestChannel];
-        const locationY = yData.data[bestChannel];
-
-        const figure = {
-          data: [
-            {
-              x: Array.from({ length: single_template_best_channel.shape[0] }, (_, i) => i),
-              y: single_template_best_channel.data,
-              type: "scatter",
-              xaxis: "x1",
-              yaxis: "y1",
-              name: "Template Data", // Optional, but useful for clarity
-              showlegend: false, // Optionally remove legend for individual traces
-            },
-            {
-              x: xData.data,
-              y: yData.data,
-              mode: "markers",
-              type: "scatter",
-              marker: { color: "orange" },
-              xaxis: "x2",
-              yaxis: "y2",
-              name: "XY Data", // Optional
-              showlegend: false,
-            },
-            {
-              x: [locationX],
-              y: [locationY],
-              mode: "markers",
-              type: "scatter",
-              marker: { color: "red", size: 25 },
-              xaxis: "x2",
-              yaxis: "y2",
-              name: "Best Channel", // Optional
-              showlegend: false,
-            },
-          ],
-          layout: {
-            title: `Template for unit index: ${unit_index} - on channel with index: ${bestChannel} - at location: (${locationX}, ${locationY})`,
-            grid: { rows: 1, columns: 2, pattern: "independent" },
-            xaxis1: { title: "Time (samples)" },
-            yaxis1: { title: "Amplitude (uV)" },
-            xaxis2: {
-              title: "X Location",
-              range: [Math.min(...xData.data) - 5, Math.max(...xData.data) + 5],
-            },
-            yaxis2: {
-              title: "Y Location",
-              anchor: "x2",
-              scale: 1.0,
-            },
-            annotations: [
-              {
-                x: locationX,
-                y: locationY,
-                xref: "x2",
-                yref: "y2",
-                text: "Unit Location",
-                showarrow: true,
-                arrowhead: 2,
-                ax: 30,
-                ay: 30,
-              },
-            ],
-            showlegend: false, // This will apply globally to all traces
-          },
-        };
-
-        Plotly.newPlot(plotId, figure.data, figure.layout);
-        // Create and append the checkbox for selecting the unit
-        const checkbox = document.createElement("input");
-        checkbox.type = "checkbox";
-        checkbox.id = `checkbox-${templateIndex}`;
-        checkbox.className = "plot-selection-checkbox";
-        checkbox.onchange = function () {
-          if (this.checked) {
-            selectedUnitIndices.push(templateIndex);
-          } else {
-            const index = selectedUnitIndices.indexOf(templateIndex);
-            if (index > -1) {
-              selectedUnitIndices.splice(index, 1);
-            }
-          }
-          console.log("Selected templates:", selectedUnitIndices);
-        };
-        plotDiv.appendChild(checkbox);
-      }
-
-      window.onscroll = function () {
-        if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
-          loadData();
-        }
-      };
-
-      loadData(); // Initial load
-    </script>
-  </body>
-</html>
diff --git a/public/neuropixels_1.png b/public/neuropixels_1.png
new file mode 100644
index 0000000..414e9bf
Binary files /dev/null and b/public/neuropixels_1.png differ
diff --git a/src/App.test.js b/src/App.test.js
index 9382b9a..22c7416 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -1,8 +1,8 @@
-import { render, screen } from "@testing-library/react";
-import App from "./App";
+// import { render, screen } from "@testing-library/react";
+// import App from "./App";
 
-test("renders learn react link", () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+// test("renders learn react link", () => {
+//   render(<App />);
+//   const linkElement = screen.getByText(/learn react/i);
+//   expect(linkElement).toBeInTheDocument();
+// });
