diff --git a/who-metrics-ui/src/components/DashboardExample.tsx b/who-metrics-ui/src/components/DashboardExample.tsx
index 4fe87bb..786b104 100644
--- a/who-metrics-ui/src/components/DashboardExample.tsx
+++ b/who-metrics-ui/src/components/DashboardExample.tsx
@@ -13,7 +13,7 @@ import {
   DeltaType,
 } from "@tremor/react";
 
-import { Box } from "@primer/react";
+import { Box, useTheme as primerUseTheme } from "@primer/react";
 import Image from "next/image";
 import logo from "@/images/who-logo-wide.svg";
 import { ChartView } from "./";
@@ -21,6 +21,7 @@ import { ChartView } from "./";
 import KpiCard from "./KpiCard";
 import RepositoriesTable from "./RepositoriesTable";
 import Data from "../data/data.json";
+import { useTheme } from "next-themes";
 
 type Kpi = {
   title: string;
@@ -93,6 +94,16 @@ export const performance: DailyPerformance[] = [
 ];
 
 export const DashboardExample = () => {
+  const { theme, systemTheme } = useTheme();
+  const { setColorMode } = primerUseTheme();
+  if (theme === "light" || theme === "dark" || theme === "auto") {
+    setColorMode(theme);
+  }
+
+  if (theme === "system" && systemTheme) {
+    setColorMode(systemTheme);
+  }
+
   return (
     <main className="px-18 py-18">
       <Box
diff --git a/who-metrics-ui/src/components/RepositoriesTable.tsx b/who-metrics-ui/src/components/RepositoriesTable.tsx
index c61b02e..bc6b103 100644
--- a/who-metrics-ui/src/components/RepositoriesTable.tsx
+++ b/who-metrics-ui/src/components/RepositoriesTable.tsx
@@ -4,8 +4,6 @@ import {
   Card,
   Select,
   Flex,
-  MultiSelect,
-  MultiSelectItem,
   SelectItem,
   Table,
   TableBody,
@@ -17,6 +15,7 @@ import {
 } from "@tremor/react";
 import { useState } from "react";
 import Data from "../data/data.json";
+import { RepositorySelector } from "./RepositorySelector";
 
 const repos = Object.values(Data["repositories"]);
 const licenses = repos
@@ -56,20 +55,11 @@ const RepositoriesTable = () => {
           </Flex>
         </div>
         <div className="flex space-x-2">
-          <MultiSelect
-            className="max-w-full sm:max-w-xs"
-            onValueChange={setSelectedNames}
-            placeholder="Select repositories..."
-          >
-            {repos.map((item) => (
-              <MultiSelectItem
-                key={item.repositoryName}
-                value={item.repositoryName}
-              >
-                {item.repositoryName}
-              </MultiSelectItem>
-            ))}
-          </MultiSelect>
+          <RepositorySelector
+            selectedNames={selectedNames}
+            setSelectedNames={setSelectedNames}
+            repositoryNames={repos.map((repo) => repo.repositoryName)}
+          />
           <Select
             className="max-w-full sm:max-w-xs"
             defaultValue="all"
diff --git a/who-metrics-ui/src/components/RepositorySelector.tsx b/who-metrics-ui/src/components/RepositorySelector.tsx
new file mode 100644
index 0000000..8cb4ef9
--- /dev/null
+++ b/who-metrics-ui/src/components/RepositorySelector.tsx
@@ -0,0 +1,58 @@
+import { TriangleDownIcon } from "@primer/octicons-react";
+import { Button, SelectPanel } from "@primer/react";
+import { ItemInput } from "@primer/react/lib/deprecated/ActionList/List";
+import { useState } from "react";
+
+export const RepositorySelector = ({
+  selectedNames,
+  setSelectedNames,
+  repositoryNames,
+}: {
+  selectedNames: string[];
+  setSelectedNames: (nextSelection: string[]) => void;
+  repositoryNames: string[];
+}) => {
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState("");
+
+  const items: ItemInput[] = repositoryNames.map((repositoryName, index) => {
+    return {
+      text: repositoryName,
+      id: index,
+    };
+  });
+
+  const filteredItems = items.filter((item) => item.text?.includes(filter));
+
+  const selected = items.filter((item) => {
+    return item.text && selectedNames.includes(item.text);
+  });
+
+  const updateSelection = (selectedItems: ItemInput[]) => {
+    const updatedNames: string[] = selectedItems.map((item) => item.text || "");
+    setSelectedNames(updatedNames.filter((updatedName) => updatedName !== ""));
+  };
+  return (
+    <SelectPanel
+      renderAnchor={({ "aria-labelledby": ariaLabelledBy, ...anchorProps }) => (
+        <Button
+          trailingAction={TriangleDownIcon}
+          aria-labelledby={` ${ariaLabelledBy}`}
+          {...anchorProps}
+        >
+          Select repositories
+        </Button>
+      )}
+      title="Select repositories"
+      placeholderText="Filter repositories"
+      open={open}
+      onOpenChange={setOpen}
+      items={filteredItems}
+      selected={selected}
+      onSelectedChange={updateSelection}
+      onFilterChange={setFilter}
+      showItemDividers={true}
+      overlayProps={{ width: "xlarge", height: "xlarge" }}
+    />
+  );
+};