diff --git a/src/components/LayerController/AddChannelButton.tsx b/src/components/LayerController/AddChannelButton.tsx
index 9992e6b..7e7f318 100644
--- a/src/components/LayerController/AddChannelButton.tsx
+++ b/src/components/LayerController/AddChannelButton.tsx
@@ -72,7 +72,7 @@ function AddChannelButton() {
           </SelectTrigger>
           <SelectContent className="focus:ring-0 border-none">
             {source.names.map((name, i) => (
-              <SelectItem value={String(i)} key={name}>
+              <SelectItem className="text-xs" value={String(i)} key={name}>
                 {name}
               </SelectItem>
             ))}
diff --git a/src/components/LayerController/ChannelOptions.tsx b/src/components/LayerController/ChannelOptions.tsx
index ce5367f..e2e70df 100644
--- a/src/components/LayerController/ChannelOptions.tsx
+++ b/src/components/LayerController/ChannelOptions.tsx
@@ -7,8 +7,9 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
 import { useLayer, useSourceValue } from "@/hooks";
-import { clamp } from "@/utils";
-import ColorPalette from "./ColorPalette";
+import { COLORS, clamp, hexToRGB } from "@/utils";
+
+const RGB_COLORS: [string, string][] = Object.entries(COLORS);
 
 function ChannelOptions(props: { channelIndex: number }) {
   const { channelIndex: i } = props;
@@ -96,7 +97,7 @@ function ChannelOptions(props: { channelIndex: number }) {
           </SelectTrigger>
           <SelectContent className="focus:ring-0 border-none">
             {names.map((name, i) => (
-              <SelectItem value={String(i)} key={name}>
+              <SelectItem className="text-xs" value={String(i)} key={name}>
                 {name}
               </SelectItem>
             ))}
@@ -120,18 +121,25 @@ function ChannelOptions(props: { channelIndex: number }) {
         <Separator />
         <span className="text-xs">color:</span>
         <Separator />
-        <div style={{ display: "flex", justifyContent: "center" }}>
-          <ColorPalette
-            handleChange={(rgb) => {
-              setLayer(({ layerProps, ...rest }) => ({
-                ...rest,
-                layerProps: {
-                  ...layerProps,
-                  colors: layerProps.colors.with(i, rgb),
-                },
-              }));
-            }}
-          />
+        <div className="flex items-center justify-between" aria-label="color-swatch">
+          {RGB_COLORS.map(([name, rgb]) => (
+            <button
+              type="button"
+              aria-label={name}
+              style={{ backgroundColor: rgb }}
+              className="w-3.5 h-3.5 rounded-full cursor-pointer"
+              key={name}
+              onClick={() => {
+                setLayer(({ layerProps, ...rest }) => ({
+                  ...rest,
+                  layerProps: {
+                    ...layerProps,
+                    colors: layerProps.colors.with(i, hexToRGB(rgb)),
+                  },
+                }));
+              }}
+            />
+          ))}
         </div>
       </PopoverContent>
     </Popover>
diff --git a/src/components/LayerController/ColorPalette.tsx b/src/components/LayerController/ColorPalette.tsx
deleted file mode 100644
index b9c77fe..0000000
--- a/src/components/LayerController/ColorPalette.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { IconButton } from "@material-ui/core";
-import { Lens } from "@material-ui/icons";
-import { makeStyles } from "@material-ui/styles";
-import React from "react";
-import { COLORS, hexToRGB } from "../../utils";
-
-const useStyles = makeStyles(() => ({
-  container: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    padding: "2px",
-  },
-  button: {
-    padding: "3px",
-    width: "16px",
-    height: "16px",
-  },
-}));
-
-const RGB_COLORS: [string, [number, number, number]][] = Object.entries(COLORS).map(([name, hex]) => [
-  name,
-  hexToRGB(hex),
-]);
-function ColorPalette({ handleChange }: { handleChange: (c: [number, number, number]) => void }) {
-  const classes = useStyles();
-  return (
-    <div className={classes.container} aria-label="color-swatch">
-      {RGB_COLORS.map(([name, rgb]) => {
-        return (
-          <IconButton className={classes.button} key={name} onClick={() => handleChange(rgb)}>
-            <Lens fontSize="small" style={{ color: `rgb(${rgb})` }} />
-          </IconButton>
-        );
-      })}
-    </div>
-  );
-}
-
-export default ColorPalette;
diff --git a/src/components/LayerController/index.tsx b/src/components/LayerController/index.tsx
index 1984184..27d4ab3 100644
--- a/src/components/LayerController/index.tsx
+++ b/src/components/LayerController/index.tsx
@@ -8,6 +8,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/
 import { Separator } from "@/components/ui/separator";
 import { Slider } from "@/components/ui/slider";
 import { useLayer, useSourceValue } from "@/hooks";
+import { range } from "@/utils";
 
 /** Get the { name, idx, size } for each axis that is not the channel_axis and has size > 1 */
 function axisSliders(info: {
@@ -99,7 +100,7 @@ function LayerController() {
           </div>
           <Separator />
           <div>
-            {Array.from({ length: nChannels }).map((_, i) => (
+            {range(nChannels).map((i) => (
               <ChannelController channelIndex={i} key={`${name}-${i}`} />
             ))}
           </div>