diff --git a/scraper/api.py b/scraper/api.py
index 30d38f8..6f950bb 100644
--- a/scraper/api.py
+++ b/scraper/api.py
@@ -1,4 +1,6 @@
+import functools
 import json
+import time
 from typing import List, Optional
 
 import requests
@@ -12,6 +14,32 @@
 config = init_config()
 base_url = config.app.api_base_url
 
+# decorator to retry operations
+def retry(delay=1, times=5):
+    def outer_wrapper(function):
+        @functools.wraps(function)
+        def inner_wrapper(*args, **kwargs):
+            final_excep = None
+            for counter in range(times):
+                if counter > 0:
+                    time.sleep(delay)
+                final_excep = None
+                try:
+                    value = function(*args, **kwargs)
+                    return value
+                except Exception as e:
+                    final_excep = e
+                    logger.warning(
+                        f"Error during function call, count={counter}: error:{e}"
+                    )
+
+            if final_excep is not None:
+                raise final_excep
+
+        return inner_wrapper
+
+    return outer_wrapper
+
 
 def get_latest_posts(count: int) -> List[AnalogDisplayPost]:
 
@@ -69,6 +97,7 @@ def upload_to_analogdb(post: AnalogPost, username: str, password: str):
         )
 
 
+@retry(delay=1, times=5)
 def patch_to_analogdb(patch: PatchPost, id: int, username: str, password: str):
     dict_patch = patch_to_json(patch)
     json_patch = json.dumps(dict_patch)
@@ -176,21 +205,6 @@ def json_to_post(data: dict) -> AnalogDisplayPost:
             raw_url=images[3]["url"],
             raw_width=images[3]["width"],
             raw_height=images[3]["height"],
-            c1_hex=colors[0]["hex"],
-            c1_css=colors[0]["css"],
-            c1_percent=colors[0]["percent"],
-            c2_hex=colors[0]["hex"],
-            c2_css=colors[0]["css"],
-            c2_percent=colors[0]["percent"],
-            c3_hex=colors[0]["hex"],
-            c3_css=colors[0]["css"],
-            c3_percent=colors[0]["percent"],
-            c4_hex=colors[0]["hex"],
-            c4_css=colors[0]["css"],
-            c4_percent=colors[0]["percent"],
-            c5_hex=colors[0]["hex"],
-            c5_css=colors[0]["css"],
-            c5_percent=colors[0]["percent"],
         )
     except Exception as e:
         raise Exception(f"Error unmarshalling json posts from analogdb: {e}")
diff --git a/scraper/batch.py b/scraper/batch.py
index 479efb5..ea56da0 100644
--- a/scraper/batch.py
+++ b/scraper/batch.py
@@ -101,9 +101,14 @@ def _update_post_colors(
     # extract primary colors
     try:
         image = request_image(url=url)
+    except Exception as e:
+        logger.error(f"Error fetching image with url: {url}, with error: {e}")
+        return
+
+    try:
         colors = extract_colors(image)
     except Exception as e:
-        logger.error(f"Error fetching iamge with url: {url}, with error: {e}")
+        logger.error(f"Error extracting colors from image: {url}, with error: {e}")
         return
 
     # update post in analogdb
@@ -115,7 +120,7 @@ def _update_post_colors(
 
 
 def update_posts_colors(deps: Dependencies, count: int):
-    posts = unlimited_posts(count=count)
+    posts = reversed(unlimited_posts(count=count))
     for post in posts:
         _update_post_colors(
             reddit=deps.reddit_client,
diff --git a/scraper/image_process.py b/scraper/image_process.py
index 1845101..61c40c7 100644
--- a/scraper/image_process.py
+++ b/scraper/image_process.py
@@ -1,19 +1,95 @@
 from io import BytesIO
-from typing import List, Optional, Tuple
+from typing import Dict, List, Optional, Tuple
 
 import extcolors
 import requests
-from loguru import logger
 from PIL import ImageChops
 from PIL.Image import ANTIALIAS, Image, new, open
 from scipy.spatial import KDTree
 from webcolors import (CSS3_HEX_TO_NAMES, HTML4_HEX_TO_NAMES, hex_to_rgb,
                        rgb_to_hex)
 
+from api import retry
 from constants import COLOR_LIMIT, COLOR_TOLERANCE, LOW_RES
 from models import Color
 
-
+htmlOverrides: Dict[str, str] = {
+    "silver": "gray",
+    "fuschia": "purple",
+    "blue": "teal",
+    "aqua": "teal",
+}
+
+cssOverrides: Dict[str, str] = {
+    "maroon": "red",
+    "firebrick": "red",
+    "salmon": "red",
+    "darkred": "red",
+    "lightsalmon": "orange",
+    "orange": "orange",
+    "darkorange": "orange",
+    "orangered": "orange",
+    "coral": "orange",
+    "mediumseagreen": "green",
+    "seagreen": "green",
+    "yellowgreen": "green",
+    "greenyellow": "green",
+    "steelblue": "teal",
+    "lightsteelblue": "teal",
+    "mediumaquamarine": "teal",
+    "darkcyan": "teal",
+    "darkseagreen": "teal",
+    "paleturquoise": "teal",
+    "cadetblue": "teal",
+    "cornflowerblue": "teal",
+    "lightblue": "teal",
+    "skyblue": "teal",
+    "lightskyblue": "teal",
+    "wienna": "brown",
+    "chocolate": "brown",
+    "rosybrown": "brown",
+    "saddlebrown": "brown",
+    "darkkhaki": "brown",
+    "darksalmon": "brown",
+    "brown": "brown",
+    "burlywood": "tan",
+    "bisque": "tan",
+    "antiquewhite ": "tan",
+    "blanchedalmond": "tan",
+    "peru": "tan",
+    "sandybrown": "tan",
+    "papayawhip ": "tan",
+    "tan": "tan",
+    "navajowhite ": "tan",
+    "moccasin  ": "tan",
+    "peachpuff": "tan",
+    "wheat": "tan",
+    "khaki": "tan",
+    "darkgray": "gray",
+    "dimgray": "gray",
+    "thistle": "gray",
+    "silver": "gray",
+    "lightslategray": "gray",
+    "darkslategray": "gray",
+    "gainsboro": "gray",
+    "lightyellow": "yellow",
+    "lightgoldenrodyellow": "yellow",
+    "lemonchiffon": "yellow",
+    "goldenrod": "yellow",
+    "darkolivegreen": "olive",
+    "olivedrab": "olive",
+    "darkslateblue": "navy",
+    "midnightblue": "navy",
+    "violet": "purple",
+    "lightcoral": "purple",
+    "lightpink": "purple",
+    "royalblue": "purple",
+    "seashell": "white",
+    "snow": "white",
+}
+
+
+@retry(delay=1, times=5)
 def request_image(url: str) -> Image:
     pic = requests.get(url, stream=True)
     image = open(pic.raw)
@@ -93,6 +169,27 @@ def rgb_to_html(rgb: Tuple[int, int, int]) -> str:
     return match
 
 
+def override_color_names(color: Color) -> Color:
+
+    # don't override these colors
+    if color.html in {"navy", "purple"}:
+        return color
+
+    css = color.css
+    if css in cssOverrides.keys():
+        new = cssOverrides.get(css)
+        if new is not None:
+            color.html = new
+
+    html = color.html
+    if html in htmlOverrides.keys():
+        new = htmlOverrides.get(html)
+        if new is not None:
+            color.html = new
+
+    return color
+
+
 def extract_colors(image: Image, count: int = COLOR_LIMIT) -> List[Color]:
     """
 
@@ -124,25 +221,22 @@ def extract_colors(image: Image, count: int = COLOR_LIMIT) -> List[Color]:
         # get percent of image with this color
         percent = round(pixels / total_pixels, 8)
 
-        # append it
-        extracted.append(Color(hex=hex, css=css, html=html, percent=percent))
+        # create color
+        color = Color(hex=hex, css=css, html=html, percent=percent)
 
-    # we need to send 5 colors to analogdb
-    # if we dont have 5 colors, append fillers
-    num_filler = COLOR_LIMIT - len(extracted)
-    if num_filler > 0:
-        filler = Color(hex="null", css="null", html="null", percent=0.0)
-        for _ in range(num_filler):
-            extracted.append(filler)
+        # override color names
+        color = override_color_names(color)
+
+        # append it
+        extracted.append(color)
 
     return extracted
 
 
 def test_extract_colors():
-    import PIL
 
-    url = "https://d3i73ktnzbi69i.cloudfront.net/98fe51da-4b04-47db-b529-ce94f2c31219.jpeg"
-    im = PIL.Image.open(requests.get(url, stream=True).raw)
+    url = "https://d3i73ktnzbi69i.cloudfront.net/9c995e5b-9307-4f51-a58b-170e41e5fef3.jpeg"
+    im = request_image(url)
 
     extracted = extract_colors(im)
     for e in extracted:
diff --git a/scraper/models.py b/scraper/models.py
index 6b97000..8c9c5f4 100644
--- a/scraper/models.py
+++ b/scraper/models.py
@@ -119,22 +119,6 @@ class AnalogDisplayPost:
     raw_width: int
     raw_height: int
 
-    c1_hex: str
-    c1_css: str
-    c1_percent: float
-    c2_hex: str
-    c2_css: str
-    c2_percent: float
-    c3_hex: str
-    c3_css: str
-    c3_percent: float
-    c4_hex: str
-    c4_css: str
-    c4_percent: float
-    c5_hex: str
-    c5_css: str
-    c5_percent: float
-
 
 @dataclass
 class CloudfrontImage:
diff --git a/web/components/gallery.js b/web/components/gallery.js
index d0d1766..bc6601d 100644
--- a/web/components/gallery.js
+++ b/web/components/gallery.js
@@ -21,6 +21,7 @@ import {
   Menu,
   Radio,
   Checkbox,
+  Tooltip,
 } from "@mantine/core";
 
 import { baseURL } from "../constants.js";
@@ -71,16 +72,21 @@ function filterQueryParams(sort, nsfw, bw, sprocket, text, color) {
 
   if (color !== "") {
     queryParams = queryParams.concat("&color=" + color);
-    if (color === "black" || color === "gray") {
+    if (color === "gray") {
       queryParams = queryParams.concat("&min_color=" + "0.8");
-    }
-    if (color === "white") {
-      queryParams = queryParams.concat("&min_color=" + "0.6");
-    }
-    if (color === "teal") {
+    } else if (color === "black") {
+      queryParams = queryParams.concat("&min_color=" + "0.7");
+    } else if (color === "white") {
+      queryParams = queryParams.concat("&min_color=" + "0.50");
+    } else if (color === "teal") {
+      queryParams = queryParams.concat("&min_color=" + "0.35");
+    } else if (color === "olive" || color === "brown") {
+      queryParams = queryParams.concat("&min_color=" + "0.35");
+    } else if (color === "tan") {
+      queryParams = queryParams.concat("&min_color=" + "0.30");
+    } else if (color === "navy" || color === "green") {
       queryParams = queryParams.concat("&min_color=" + "0.25");
-    }
-    if (color === "navy" || color === "green") {
+    } else {
       queryParams = queryParams.concat("&min_color=" + "0.15");
     }
   }
@@ -163,10 +169,6 @@ export default function Gallery(props) {
     onlyIcon = true;
   }
 
-  // const textPlaceholder = () => {
-  //   onlyIcon ? "films, cameras..." : "films, cameras, places...";
-  // };
-
   const textPlaceholder = () => {
     const placeholder = onlyIcon
       ? "films, cameras..."
@@ -214,114 +216,266 @@ export default function Gallery(props) {
             <Menu.Dropdown>
               <Menu.Label>with color</Menu.Label>
               <div className={styles.colors}>
-                <Checkbox
-                  styles={{
-                    input: { backgroundColor: "#f03e3e", border: "None" },
-                  }}
-                  size="md"
-                  color="red.8"
-                  checked={color === "red"}
-                  onChange={handleColorClick}
-                  key={1}
-                  id={"red"}
-                  className={styles.colorButton}
-                />
-                <Checkbox
-                  styles={{
-                    input: { backgroundColor: "#ffd43b", border: "None" },
-                  }}
-                  size="md"
-                  color="yellow.5"
-                  checked={color === "yellow"}
-                  onChange={handleColorClick}
-                  key={2}
-                  id={"yellow"}
-                  className={styles.colorButton}
-                />
-                <Checkbox
-                  styles={{
-                    input: { backgroundColor: "#2f9e44", border: "None" },
-                  }}
-                  size="md"
-                  color="green.9"
-                  checked={color === "green"}
-                  onChange={handleColorClick}
-                  key={3}
-                  id={"green"}
-                  className={styles.colorButton}
-                />
-                <Checkbox
-                  styles={{
-                    input: { backgroundColor: "#22b8cf", border: "None" },
-                  }}
-                  size="md"
-                  color="cyan.6"
-                  checked={color === "teal"}
-                  onChange={handleColorClick}
-                  key={4}
-                  id={"teal"}
-                  className={styles.colorButton}
-                />
-                <Checkbox
-                  styles={{
-                    input: { backgroundColor: "#1971c2", border: "None" },
-                  }}
-                  size="md"
-                  color="blue.9"
-                  checked={color === "navy"}
-                  onChange={handleColorClick}
-                  key={5}
-                  id={"navy"}
-                  className={styles.colorButton}
-                />
-                <Checkbox
-                  styles={{
-                    input: { backgroundColor: "#9c36b5", border: "None" },
-                  }}
-                  size="md"
-                  color="grape.9"
-                  checked={color === "purple"}
-                  onChange={handleColorClick}
-                  key={6}
-                  id={"purple"}
-                  className={styles.colorButton}
-                />
-                <Checkbox
-                  styles={{
-                    input: { backgroundColor: "#868e96", border: "None" },
-                  }}
-                  size="md"
-                  color="dark.3"
-                  checked={color === "gray"}
-                  onChange={handleColorClick}
-                  key={7}
-                  id={"gray"}
-                  className={styles.colorButton}
-                />
-                <Checkbox
-                  styles={{
-                    input: { backgroundColor: "#141517", border: "None" },
-                  }}
-                  size="md"
-                  color="dark.9"
-                  checked={color === "black"}
-                  onChange={handleColorClick}
-                  key={8}
-                  id={"black"}
-                  className={styles.colorButton}
-                />
-                <Checkbox
-                  styles={{
-                    input: { backgroundColor: "#e9ecef", border: "None" },
-                  }}
-                  size="md"
-                  color="gray.3"
-                  checked={color === "white"}
-                  onChange={handleColorClick}
-                  key={9}
-                  id={"white"}
-                  className={styles.colorButton}
-                />
+                <Tooltip
+                  label="red"
+                  color={color === "red" ? "red.8" : "red.7"}
+                  position="right"
+                  withArrow
+                >
+                  <Checkbox
+                    styles={{
+                      input: { backgroundColor: "#f03e3e", border: "None" },
+                    }}
+                    size="md"
+                    color="red.8"
+                    checked={color === "red"}
+                    onChange={handleColorClick}
+                    key={1}
+                    id={"red"}
+                    className={styles.colorButton}
+                    radius="xs"
+                  />
+                </Tooltip>
+                <Tooltip
+                  label="orange"
+                  color={color === "orange" ? "orange.7" : "orange.6"}
+                  position="right"
+                  withArrow
+                >
+                  <Checkbox
+                    styles={{
+                      input: { backgroundColor: "#fd7e14", border: "None" },
+                    }}
+                    size="md"
+                    color="orange.7"
+                    checked={color === "orange"}
+                    onChange={handleColorClick}
+                    key={2}
+                    id={"orange"}
+                    className={styles.colorButton}
+                    radius="xs"
+                  />
+                </Tooltip>
+                <Tooltip
+                  label="beige"
+                  color={color === "tan" ? "brown.2" : "brown.1"}
+                  position="right"
+                  withArrow
+                >
+                  <Checkbox
+                    styles={{
+                      input: { backgroundColor: "#ffdcb0", border: "None" },
+                    }}
+                    size="md"
+                    color="brown.2"
+                    checked={color === "tan"}
+                    onChange={handleColorClick}
+                    key={3}
+                    id={"tan"}
+                    className={styles.colorButton}
+                    radius="xs"
+                  />
+                </Tooltip>
+                <Tooltip
+                  label="yellow"
+                  color={color === "yellow" ? "yellow.5" : "yellow.4"}
+                  position="right"
+                  withArrow
+                >
+                  <Checkbox
+                    styles={{
+                      input: { backgroundColor: "#ffd43b", border: "None" },
+                    }}
+                    size="md"
+                    color="yellow.5"
+                    checked={color === "yellow"}
+                    onChange={handleColorClick}
+                    key={4}
+                    id={"yellow"}
+                    className={styles.colorButton}
+                    radius="xs"
+                  />
+                </Tooltip>
+                <Tooltip
+                  label="green"
+                  color={color === "green" ? "green.9" : "green.8"}
+                  position="right"
+                  withArrow
+                >
+                  <Checkbox
+                    styles={{
+                      input: { backgroundColor: "#2f9e44", border: "None" },
+                    }}
+                    size="md"
+                    color="green.9"
+                    checked={color === "green"}
+                    onChange={handleColorClick}
+                    key={5}
+                    id={"green"}
+                    className={styles.colorButton}
+                    radius="xs"
+                  />
+                </Tooltip>
+                <Tooltip
+                  label="olive"
+                  color={color === "olive" ? "olive.9" : "olive.8"}
+                  position="right"
+                  withArrow
+                >
+                  <Checkbox
+                    styles={{
+                      input: { backgroundColor: "#4c4d00", border: "None" },
+                    }}
+                    size="md"
+                    color="olive.9"
+                    checked={color === "olive"}
+                    onChange={handleColorClick}
+                    key={6}
+                    id={"olive"}
+                    className={styles.colorButton}
+                    radius="xs"
+                  />
+                </Tooltip>
+                <Tooltip
+                  label="teal"
+                  color={color === "teal" ? "cyan.6" : "cyan.5"}
+                  position="right"
+                  withArrow
+                >
+                  <Checkbox
+                    styles={{
+                      input: { backgroundColor: "#22b8cf", border: "None" },
+                    }}
+                    size="md"
+                    color="cyan.6"
+                    checked={color === "teal"}
+                    onChange={handleColorClick}
+                    key={7}
+                    id={"teal"}
+                    className={styles.colorButton}
+                    radius="xs"
+                  />
+                </Tooltip>
+                <Tooltip
+                  label="navy"
+                  color={color === "navy" ? "navy.8" : "navy.7"}
+                  position="right"
+                  withArrow
+                >
+                  <Checkbox
+                    styles={{
+                      input: { backgroundColor: "#064679", border: "None" },
+                    }}
+                    size="md"
+                    color="navy.8"
+                    checked={color === "navy"}
+                    onChange={handleColorClick}
+                    key={8}
+                    id={"navy"}
+                    className={styles.colorButton}
+                    radius="xs"
+                  />
+                </Tooltip>
+                <Tooltip
+                  label="purple"
+                  color={color === "purple" ? "grape.9" : "grape.8"}
+                  position="right"
+                  withArrow
+                >
+                  <Checkbox
+                    styles={{
+                      input: { backgroundColor: "#9c36b5", border: "None" },
+                    }}
+                    size="md"
+                    color="grape.9"
+                    checked={color === "purple"}
+                    onChange={handleColorClick}
+                    key={9}
+                    id={"purple"}
+                    className={styles.colorButton}
+                    radius="xs"
+                  />
+                </Tooltip>
+                <Tooltip
+                  label="gray"
+                  color={color === "gray" ? "dark.3" : "dark.2"}
+                  position="right"
+                  withArrow
+                >
+                  <Checkbox
+                    styles={{
+                      input: { backgroundColor: "#868e96", border: "None" },
+                    }}
+                    size="md"
+                    color="dark.3"
+                    checked={color === "gray"}
+                    onChange={handleColorClick}
+                    key={10}
+                    id={"gray"}
+                    className={styles.colorButton}
+                    radius="xs"
+                  />
+                </Tooltip>
+                <Tooltip
+                  label="brown"
+                  color={color === "brown" ? "brown.8" : "brown.7"}
+                  position="right"
+                  withArrow
+                >
+                  <Checkbox
+                    styles={{
+                      input: { backgroundColor: "#7d4500", border: "None" },
+                    }}
+                    size="md"
+                    color="brown.8"
+                    checked={color === "brown"}
+                    onChange={handleColorClick}
+                    key={11}
+                    id={"brown"}
+                    className={styles.colorButton}
+                    radius="xs"
+                  />
+                </Tooltip>
+                <Tooltip
+                  label="black"
+                  color={color === "black" ? "dark.9" : "dark.8"}
+                  position="right"
+                  withArrow
+                >
+                  <Checkbox
+                    styles={{
+                      input: { backgroundColor: "#141517", border: "None" },
+                    }}
+                    size="md"
+                    color="dark.9"
+                    checked={color === "black"}
+                    onChange={handleColorClick}
+                    key={12}
+                    id={"black"}
+                    className={styles.colorButton}
+                    radius="xs"
+                  />
+                </Tooltip>
+                <Tooltip
+                  label="white"
+                  color={color === "white" ? "gray.3" : "gray.2"}
+                  position="right"
+                  withArrow
+                >
+                  <Checkbox
+                    styles={{
+                      input: { backgroundColor: "#e9ecef", border: "None" },
+                    }}
+                    size="md"
+                    color="gray.3"
+                    checked={color === "white"}
+                    onChange={handleColorClick}
+                    key={13}
+                    id={"white"}
+                    className={styles.colorButton}
+                    radius="xs"
+                  />
+                </Tooltip>
               </div>
             </Menu.Dropdown>
           </Menu>
diff --git a/web/components/gallery.module.css b/web/components/gallery.module.css
index 06f2628..76ec035 100644
--- a/web/components/gallery.module.css
+++ b/web/components/gallery.module.css
@@ -72,6 +72,11 @@
   margin: 0.2rem;
 }
 
+/* .grow { transition: all .2s ease-in-out; } */
+.colorButton:hover {
+  transform: scale(1.1);
+}
+
 @media screen and (max-width: 720px) {
   .container {
     text-align: left;
diff --git a/web/components/imagePage.js b/web/components/imagePage.js
index 8647c5d..4c9ac15 100644
--- a/web/components/imagePage.js
+++ b/web/components/imagePage.js
@@ -42,11 +42,6 @@ export default function ImagePage(props) {
           <Link href={`/`} passHref={true}>
             <h1 className={styles.title}>Analogdb</h1>
           </Link>
-          <Tooltip label="fullscreen" withArrow className="px-2">
-            <ActionIcon component="a" href={post.images[3].url}>
-              <AiOutlineArrowsAlt size="24px"></AiOutlineArrowsAlt>
-            </ActionIcon>
-          </Tooltip>
         </div>
         <div className={styles.imageContainer}>
           <Image
@@ -70,6 +65,11 @@ export default function ImagePage(props) {
               <AiOutlineDownload size="24px" />
             </ActionIcon>
           </Tooltip>
+          <Tooltip label="fullscreen" withArrow className="px-2">
+            <ActionIcon component="a" href={post.images[3].url}>
+              <AiOutlineArrowsAlt size="24px"></AiOutlineArrowsAlt>
+            </ActionIcon>
+          </Tooltip>
         </div>
       </div>
       <ImageTag post={post} similar={similar} />
diff --git a/web/components/imagePage.module.css b/web/components/imagePage.module.css
index 7d69b92..5033c2b 100644
--- a/web/components/imagePage.module.css
+++ b/web/components/imagePage.module.css
@@ -36,5 +36,5 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  width: 90vw;
+  width: 70vw;
 }
diff --git a/web/components/imageTag.js b/web/components/imageTag.js
index a14d3e2..9b1700e 100644
--- a/web/components/imageTag.js
+++ b/web/components/imageTag.js
@@ -4,8 +4,10 @@ import Image from "next/image";
 import Link from "next/link";
 import { Tooltip } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
 
 export default function ImageTag(props) {
+  const router = useRouter();
   const clipboard = useClipboard({ timeout: 1000 });
 
   let post = props.post;
@@ -108,7 +110,6 @@ export default function ImageTag(props) {
                   <Link
                     href={`/post/${post.id}`}
                     passHref={true}
-                    legacyBehavior
                     key={post.id}
                     prefetch={false}
                   >
diff --git a/web/pages/_app.js b/web/pages/_app.js
index 06c6dea..52bd74a 100644
--- a/web/pages/_app.js
+++ b/web/pages/_app.js
@@ -13,7 +13,49 @@ const queries = {
 
 function MyApp({ Component, pageProps }) {
   return (
-    <MantineProvider>
+    <MantineProvider
+      theme={{
+        colors: {
+          brown: [
+            "#fff2dd",
+            "#ffdcb0",
+            "#fec481",
+            "#fcad50",
+            "#fb9620",
+            "#e17c08",
+            "#af6003",
+            "#7d4500",
+            "#4c2800",
+            "#1e0c00",
+          ],
+
+          olive: [
+            "#ffffdd",
+            "#ffffb0",
+            "#ffff80",
+            "#ffff4f",
+            "#ffff23",
+            "#e5e611",
+            "#b2b306",
+            "#7f8000",
+            "#4c4d00",
+            "#191a00",
+          ],
+          navy: [
+            "#e0f4ff",
+            "#b3dcfe",
+            "#86c5f9",
+            "#58aef5",
+            "#2f97f1",
+            "#1b7dd7",
+            "#1061a9",
+            "#064679",
+            "#002a4b",
+            "#000f1d",
+          ],
+        },
+      }}
+    >
       <NavigationProgress />
       <BreakpointProvider queries={queries}>
         <Component {...pageProps} />