diff --git a/src/components/KeywordsPicker.tsx b/src/components/KeywordsPicker.tsx
index a5428bc..df7269c 100644
--- a/src/components/KeywordsPicker.tsx
+++ b/src/components/KeywordsPicker.tsx
@@ -21,11 +21,11 @@ const KeywordsPicker = ({ keywords, value, onChange }: KeywordsPickerProps) => {
               <button
                 className={classNames(
                   `py-[5px] px-3 rounded-full text-sm`,
-                  `text-black border border-black`,
+                  `text-black border border-gray-400`,
                   selected
-                    ? "bg-transparentblack font-bold"
+                    ? "bg-black/10 font-bold"
                     : `bg-white
-                    hover:bg-transparentblack`
+                    hover:bg-black/10`
                 )}
                 onClick={() => (selected ? onChange(null) : onChange(keyword))}
                 type="button"
diff --git a/src/components/ListBox.tsx b/src/components/ListBox.tsx
index d275e8a..0610c47 100644
--- a/src/components/ListBox.tsx
+++ b/src/components/ListBox.tsx
@@ -92,7 +92,7 @@ function Option({ item, state }: OptionProps) {
     <li
       {...optionProps}
       className={`p-2 outline-none cursor-default flex items-center justify-between ${text} text-sm ${
-        isFocused ? "bg-transparentblack" : ""
+        isFocused ? "bg-black/10" : ""
       } ${isSelected ? "font-bold" : ""}`}
       ref={ref}
     >
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index b86bf1b..eabc18a 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -4,13 +4,13 @@ import { Link } from "gatsby";
 import { Popover } from "react-tiny-popover";
 
 const navClasses =
-  "hover:underline hover:bg-transparentblack block p-3 text-black";
+  "hover:underline hover:bg-black/10 block p-3 text-black";
 
 const ExternalLinks = () => (
   <ul
     className={classnames(
       "z-30 overflow-hidden bg-vibrant-dark",
-      "rounded shadow border border-vibrant-light"
+      "rounded shadow-lg border border-gray-400"
     )}
   >
     <li>
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index ffd1d72..3b80cc8 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -48,8 +48,8 @@ export function Select<T extends object>(props: AriaSelectProps<T>) {
       />
       <button
         {...mergeProps(buttonProps, focusProps)}
-        className={`py-[5px] px-3 w-[150px] flex flex-row items-center justify-between overflow-hidden cursor-default rounded border hover:bg-transparentblack ${
-          isFocusVisible ? "border-green-700" : "border-black"
+        className={`py-[5px] px-3 w-[150px] flex flex-row items-center justify-between overflow-hidden cursor-default rounded border hover:bg-black/10 ${
+          isFocusVisible ? "border-green-700" : "border-gray-400"
         } ${state.isOpen ? "bg-gray-100" : "bg-white"}`}
         ref={ref}
       >
diff --git a/src/pages/photogallery.tsx b/src/pages/photogallery.tsx
index 07e4e4d..675b03f 100644
--- a/src/pages/photogallery.tsx
+++ b/src/pages/photogallery.tsx
@@ -275,7 +275,7 @@ const GalleryPage = ({ data, location }: PageProps<Queries.GalleryPageQueryQuery
             value={filterKeyword}
           />
           <div className="m-2 flex flex-row items-end">
-            <div className="border border-black rounded mr-2">
+            <div className="border border-gray-400 rounded mr-2">
               <Switch
                 isSelected={showPalette}
                 onChange={(val) => setShowPalette(val)}