diff --git a/cspell.json b/cspell.json
index 86c63589..e7ee57ab 100644
--- a/cspell.json
+++ b/cspell.json
@@ -11,6 +11,7 @@
   "ignorePaths": [
     "node_modules",
     "dist",
-    "public"
+    "public",
+    "src/consts/highlighter-styles.ts"
   ]
 }
diff --git a/src/components/CodePreview.tsx b/src/components/CodePreview.tsx
index 5e72711f..7b73b684 100644
--- a/src/components/CodePreview.tsx
+++ b/src/components/CodePreview.tsx
@@ -1,9 +1,6 @@
-import { useEffect, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import {
-  oneDark,
-  oneLight,
-} from "react-syntax-highlighter/dist/esm/styles/prism";
+
+import { useAppContext } from "@contexts/AppContext";
 
 import CopyToClipboard from "./CopyToClipboard";
 
@@ -13,34 +10,22 @@ type Props = {
 };
 
 const CodePreview = ({ language = "markdown", code }: Props) => {
-  const [theme, setTheme] = useState<"dark" | "light">("dark");
-
-  useEffect(() => {
-    const handleThemeChange = () => {
-      const newTheme = document.documentElement.getAttribute("data-theme") as
-        | "dark"
-        | "light";
-      setTheme(newTheme || "dark");
-    };
-
-    handleThemeChange();
-    const observer = new MutationObserver(handleThemeChange);
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ["data-theme"],
-    });
-
-    return () => observer.disconnect();
-  }, []);
+  const { highlighterStyle } = useAppContext();
 
   return (
     <div className="code-preview">
       <CopyToClipboard text={code} className="modal__copy" />
       <SyntaxHighlighter
         language={language}
-        style={theme === "dark" ? oneDark : oneLight}
+        style={highlighterStyle.style}
         wrapLines={true}
-        customStyle={{ margin: "0", maxHeight: "20rem" }}
+        customStyle={{
+          margin: "0",
+          maxHeight: "20rem",
+          fontSize: "0.875rem",
+          lineHeight: "1.5",
+          padding: "1rem",
+        }}
       >
         {code}
       </SyntaxHighlighter>
diff --git a/src/components/HighlighterStyleSelector.tsx b/src/components/HighlighterStyleSelector.tsx
new file mode 100644
index 00000000..f663b634
--- /dev/null
+++ b/src/components/HighlighterStyleSelector.tsx
@@ -0,0 +1,33 @@
+import { highlighterStyles } from "@consts/highlighter-styles";
+import { useAppContext } from "@contexts/AppContext";
+import { SelectorOption } from "@types";
+
+import Selector from "./Selector";
+
+const HighlighterStyleSelector = () => {
+  const { highlighterStyle, toggleHighlighterStyle } = useAppContext();
+
+  const options = highlighterStyles.map((style) => ({
+    name: style.name,
+  }));
+
+  const handleSelect = (option: SelectorOption) => {
+    const selected = highlighterStyles.find(
+      (style) => style.name === option.name
+    );
+    if (!selected) {
+      return;
+    }
+    toggleHighlighterStyle(selected);
+  };
+
+  return (
+    <Selector
+      options={options}
+      selectedOption={{ name: highlighterStyle.name }}
+      handleSelect={handleSelect}
+    />
+  );
+};
+
+export default HighlighterStyleSelector;
diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
index ae30b12f..e273f5e1 100644
--- a/src/components/LanguageSelector.tsx
+++ b/src/components/LanguageSelector.tsx
@@ -1,115 +1,46 @@
-import { useRef, useEffect, useState } from "react";
+import { useMemo } from "react";
 
 import { useAppContext } from "@contexts/AppContext";
-import { useKeyboardNavigation } from "@hooks/useKeyboardNavigation";
 import { useLanguages } from "@hooks/useLanguages";
-import { LanguageType } from "@types";
+import { SelectorOption } from "@types";
 
-// Inspired by https://blog.logrocket.com/creating-custom-select-dropdown-css/
+import Selector from "./Selector";
 
 const LanguageSelector = () => {
-  const { language, setLanguage } = useAppContext();
+  const { language, toggleLanguage } = useAppContext();
   const { fetchedLanguages, loading, error } = useLanguages();
 
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleSelect = (selected: LanguageType) => {
-    setLanguage(selected);
-    setIsOpen(false);
-  };
-
-  const { focusedIndex, handleKeyDown, resetFocus, focusFirst } =
-    useKeyboardNavigation({
-      items: fetchedLanguages,
-      isOpen,
-      onSelect: handleSelect,
-      onClose: () => setIsOpen(false),
-    });
-
-  const handleBlur = () => {
-    setTimeout(() => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(document.activeElement)
-      ) {
-        setIsOpen(false);
-      }
-    }, 0);
-  };
-
-  const toggleDropdown = () => {
-    setIsOpen((prev) => {
-      if (!prev) setTimeout(focusFirst, 0);
-      return !prev;
-    });
-  };
+  const options = useMemo(
+    () =>
+      fetchedLanguages.map((item) => ({
+        name: item.lang,
+        icon: item.icon,
+      })),
+    [fetchedLanguages]
+  );
 
-  useEffect(() => {
-    if (!isOpen) {
-      resetFocus();
+  const handleSelect = (option: SelectorOption) => {
+    const selected = fetchedLanguages.find((lang) => lang.lang === option.name);
+    if (!selected) {
+      return;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen]);
+    toggleLanguage(selected);
+  };
 
-  useEffect(() => {
-    if (isOpen && focusedIndex >= 0) {
-      const element = document.querySelector(
-        `.selector__item:nth-child(${focusedIndex + 1})`
-      ) as HTMLElement;
-      element?.focus();
-    }
-  }, [isOpen, focusedIndex]);
+  if (loading) {
+    return <p>Loading languages...</p>;
+  }
 
-  if (loading) return <p>Loading languages...</p>;
-  if (error) return <p>Error fetching languages: {error}</p>;
+  if (error) {
+    return <p>Error fetching languages: {error}</p>;
+  }
 
   return (
-    <div
-      className={`selector ${isOpen ? "selector--open" : ""}`}
-      ref={dropdownRef}
-      onBlur={handleBlur}
-    >
-      <button
-        className="selector__button"
-        aria-label="select button"
-        aria-haspopup="listbox"
-        aria-expanded={isOpen}
-        onClick={toggleDropdown}
-      >
-        <div className="selector__value">
-          <img src={language.icon} alt="" />
-          <span>{language.lang || "Select a language"}</span>
-        </div>
-        <span className="selector__arrow" />
-      </button>
-      {isOpen && (
-        <ul
-          className="selector__dropdown"
-          role="listbox"
-          onKeyDown={handleKeyDown}
-          tabIndex={-1}
-        >
-          {fetchedLanguages.map((lang, index) => (
-            <li
-              key={lang.lang}
-              role="option"
-              tabIndex={-1}
-              onClick={() => handleSelect(lang)}
-              className={`selector__item ${
-                language.lang === lang.lang ? "selected" : ""
-              } ${focusedIndex === index ? "focused" : ""}`}
-              aria-selected={language.lang === lang.lang}
-            >
-              <label>
-                <img src={lang.icon} alt="" />
-                <span>{lang.lang}</span>
-              </label>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
+    <Selector
+      options={options}
+      selectedOption={{ name: language.lang, icon: language.icon }}
+      handleSelect={handleSelect}
+    />
   );
 };
 
diff --git a/src/components/Selector.tsx b/src/components/Selector.tsx
new file mode 100644
index 00000000..3fb8b8b9
--- /dev/null
+++ b/src/components/Selector.tsx
@@ -0,0 +1,116 @@
+/**
+ * Inspired by https://blog.logrocket.com/creating-custom-select-dropdown-css/
+ */
+
+import { FC, useEffect, useRef, useState } from "react";
+
+import { useKeyboardNavigation } from "@hooks/useKeyboardNavigation";
+import { SelectorOption } from "@types";
+
+interface SelectorProps {
+  options: Array<SelectorOption>;
+  selectedOption: SelectorOption;
+  handleSelect: (option: SelectorOption) => void;
+}
+
+const Selector: FC<SelectorProps> = (props) => {
+  const { options, selectedOption, handleSelect } = props;
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { focusedIndex, handleKeyDown, resetFocus, focusFirst } =
+    useKeyboardNavigation({
+      options,
+      isOpen,
+      onSelect: handleSelect,
+      onClose: () => setIsOpen(false),
+    });
+
+  const handleBlur = () => {
+    setTimeout(() => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(document.activeElement)
+      ) {
+        setIsOpen(false);
+      }
+    }, 0);
+  };
+
+  const toggleDropdown = () => {
+    setIsOpen((prev) => {
+      if (!prev) setTimeout(focusFirst, 0);
+      return !prev;
+    });
+  };
+
+  useEffect(() => {
+    if (!isOpen) {
+      resetFocus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (isOpen && focusedIndex >= 0) {
+      const element = document.querySelector(
+        `.selector__item:nth-child(${focusedIndex + 1})`
+      ) as HTMLElement;
+      element?.focus();
+    }
+  }, [isOpen, focusedIndex]);
+
+  return (
+    <div
+      className={`selector ${isOpen ? "selector--open" : ""}`}
+      ref={dropdownRef}
+      onBlur={handleBlur}
+    >
+      <button
+        className="selector__button"
+        aria-label="select button"
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        onClick={toggleDropdown}
+      >
+        <div className="selector__value">
+          {selectedOption.icon && <img src={selectedOption.icon} alt="" />}
+          <span>{selectedOption.name}</span>
+        </div>
+        <span className="selector__arrow" />
+      </button>
+      {isOpen && (
+        <ul
+          className="selector__dropdown"
+          role="listbox"
+          onKeyDown={handleKeyDown}
+          tabIndex={-1}
+        >
+          {options.map((item, index) => (
+            <li
+              key={item.name}
+              role="option"
+              tabIndex={-1}
+              onClick={() => {
+                handleSelect(item);
+                setIsOpen(false);
+              }}
+              className={`selector__item ${
+                selectedOption.name === item.name ? "selected" : ""
+              } ${focusedIndex === index ? "focused" : ""}`}
+              aria-selected={selectedOption.name === item.name}
+            >
+              <label>
+                {item.icon && <img src={item.icon} alt="" />}
+                <span>{item.name as string}</span>
+              </label>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default Selector;
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index a8cdd66f..92be1fa1 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -1,29 +1,7 @@
-import { useState, useEffect } from "react";
+import { useAppContext } from "@contexts/AppContext";
 
 const ThemeToggle = () => {
-  const [theme, setTheme] = useState("dark");
-
-  useEffect(() => {
-    // if the theme isn't set, use the user's system preference
-    const savedTheme = localStorage.getItem("theme");
-    if (savedTheme) {
-      setTheme(savedTheme);
-      document.documentElement.setAttribute("data-theme", savedTheme);
-    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      setTheme("dark");
-      document.documentElement.setAttribute("data-theme", "dark");
-    } else {
-      setTheme("light");
-      document.documentElement.setAttribute("data-theme", "light");
-    }
-  }, []);
-
-  const toggleTheme = () => {
-    const newTheme = theme === "dark" ? "light" : "dark";
-    setTheme(newTheme);
-    localStorage.setItem("theme", newTheme);
-    document.documentElement.setAttribute("data-theme", newTheme);
-  };
+  const { theme, toggleTheme } = useAppContext();
 
   return (
     <button onClick={toggleTheme} className="button" aria-label="Toggle theme">
diff --git a/src/consts/highlighter-styles.ts b/src/consts/highlighter-styles.ts
new file mode 100644
index 00000000..5cf724b4
--- /dev/null
+++ b/src/consts/highlighter-styles.ts
@@ -0,0 +1,98 @@
+import {
+  a11yDark,
+  atomDark,
+  base16AteliersulphurpoolLight,
+  cb,
+  coldarkCold,
+  coldarkDark,
+  coyWithoutShadows,
+  coy,
+  darcula,
+  dark,
+  dracula,
+  duotoneDark,
+  duotoneEarth,
+  duotoneForest,
+  duotoneLight,
+  duotoneSea,
+  duotoneSpace,
+  funky,
+  ghcolors,
+  gruvboxDark,
+  gruvboxLight,
+  holiTheme,
+  hopscotch,
+  lucario,
+  materialDark,
+  materialLight,
+  materialOceanic,
+  nightOwl,
+  nord,
+  okaidia,
+  oneDark,
+  oneLight,
+  pojoaque,
+  prism,
+  shadesOfPurple,
+  solarizedDarkAtom,
+  solarizedlight,
+  synthwave84,
+  tomorrow,
+  twilight,
+  vs,
+  vscDarkPlus,
+  xonokai,
+  zTouch,
+} from "react-syntax-highlighter/dist/esm/styles/prism";
+
+import { HighlighterStyleType } from "@types";
+
+export const highlighterStyles: HighlighterStyleType[] = [
+  { name: "a11yDark", style: a11yDark },
+  { name: "atomDark", style: atomDark },
+  {
+    name: "base16AteliersulphurpoolLight",
+    style: base16AteliersulphurpoolLight,
+  },
+  { name: "cb", style: cb },
+  { name: "coldarkCold", style: coldarkCold },
+  { name: "coldarkDark", style: coldarkDark },
+  { name: "coyWithoutShadows", style: coyWithoutShadows },
+  { name: "coy", style: coy },
+  { name: "darcula", style: darcula },
+  { name: "dark", style: dark },
+  { name: "dracula", style: dracula },
+  { name: "duotoneDark", style: duotoneDark },
+  { name: "duotoneEarth", style: duotoneEarth },
+  { name: "duotoneForest", style: duotoneForest },
+  { name: "duotoneLight", style: duotoneLight },
+  { name: "duotoneSea", style: duotoneSea },
+  { name: "duotoneSpace", style: duotoneSpace },
+  { name: "funky", style: funky },
+  { name: "ghcolors", style: ghcolors },
+  { name: "gruvboxDark", style: gruvboxDark },
+  { name: "gruvboxLight", style: gruvboxLight },
+  { name: "holiTheme", style: holiTheme },
+  { name: "hopscotch", style: hopscotch },
+  { name: "lucario", style: lucario },
+  { name: "materialDark", style: materialDark },
+  { name: "materialLight", style: materialLight },
+  { name: "materialOceanic", style: materialOceanic },
+  { name: "nightOwl", style: nightOwl },
+  { name: "nord", style: nord },
+  { name: "okaidia", style: okaidia },
+  { name: "oneDark", style: oneDark },
+  { name: "oneLight", style: oneLight },
+  { name: "pojoaque", style: pojoaque },
+  { name: "prism", style: prism },
+  { name: "shadesOfPurple", style: shadesOfPurple },
+  { name: "solarizedDarkAtom", style: solarizedDarkAtom },
+  { name: "solarizedlight", style: solarizedlight },
+  { name: "synthwave84", style: synthwave84 },
+  { name: "tomorrow", style: tomorrow },
+  { name: "twilight", style: twilight },
+  { name: "vs", style: vs },
+  { name: "vscDarkPlus", style: vscDarkPlus },
+  { name: "xonokai", style: xonokai },
+  { name: "zTouch", style: zTouch },
+];
diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx
index d9a57ace..c347d50f 100644
--- a/src/contexts/AppContext.tsx
+++ b/src/contexts/AppContext.tsx
@@ -1,21 +1,45 @@
-import { createContext, FC, useContext, useState } from "react";
+import {
+  createContext,
+  FC,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 
-import { AppState, LanguageType, SnippetType } from "@types";
+import { highlighterStyles } from "@consts/highlighter-styles";
+import { useLanguages } from "@hooks/useLanguages";
+import {
+  AppState,
+  HighlighterStyleType,
+  LanguageType,
+  SnippetType,
+} from "@types";
 
 // tokens
 const defaultLanguage: LanguageType = {
-  lang: "JavaScript",
+  lang: "JAVASCRIPT",
   icon: "/icons/javascript.svg",
 };
 
+const defaultHighlighterStyle: HighlighterStyleType = {
+  name: "oneDark",
+  style: oneDark,
+};
+
 // TODO: add custom loading and error handling
 const defaultState: AppState = {
   language: defaultLanguage,
-  setLanguage: () => {},
+  toggleLanguage: () => {},
   category: "",
   setCategory: () => {},
   snippet: null,
   setSnippet: () => {},
+  theme: "dark",
+  toggleTheme: () => {},
+  highlighterStyle: defaultHighlighterStyle,
+  toggleHighlighterStyle: () => {},
 };
 
 const AppContext = createContext<AppState>(defaultState);
@@ -23,19 +47,90 @@ const AppContext = createContext<AppState>(defaultState);
 export const AppProvider: FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
+  const { fetchedLanguages } = useLanguages();
+
   const [language, setLanguage] = useState<LanguageType>(defaultLanguage);
   const [category, setCategory] = useState<string>("");
   const [snippet, setSnippet] = useState<SnippetType | null>(null);
+  const [theme, setTheme] = useState<"dark" | "light">(
+    (localStorage.getItem("theme") as "dark" | "light" | null) ||
+      (window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light")
+  );
+  const [highlighterStyle, setHighlighterStyle] = useState<
+    AppState["highlighterStyle"]
+  >(
+    localStorage.getItem("highlighterStyleName")
+      ? highlighterStyles.find(
+          (style) => style.name === localStorage.getItem("highlighterStyleName")
+        ) || defaultHighlighterStyle
+      : defaultHighlighterStyle
+  );
+
+  const toggleLanguage = (newLanguage: LanguageType) => {
+    setLanguage(newLanguage);
+    localStorage.setItem("languageName", newLanguage.lang);
+  };
+
+  const toggleTheme = useCallback(() => {
+    const newTheme = theme === "dark" ? "light" : "dark";
+    setTheme(newTheme);
+    localStorage.setItem("theme", newTheme);
+    document.documentElement.setAttribute("data-theme", newTheme);
+  }, [theme]);
+
+  const toggleHighlighterStyle = (
+    newHighlighterStyle: HighlighterStyleType
+  ) => {
+    setHighlighterStyle(newHighlighterStyle);
+    localStorage.setItem("highlighterStyleName", newHighlighterStyle.name);
+  };
+
+  /**
+   * check if the language is saved in local storage
+   */
+  useEffect(() => {
+    if (fetchedLanguages.length === 0) {
+      return;
+    }
+
+    const languageName = localStorage.getItem("languageName");
+    if (!languageName) {
+      return;
+    }
+
+    const selected = fetchedLanguages.find(
+      (lang) => lang.lang === languageName
+    );
+    if (!selected) {
+      return;
+    }
+
+    setLanguage(selected);
+  }, [fetchedLanguages]);
+
+  /**
+   * set the theme on initial load
+   */
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   return (
     <AppContext.Provider
       value={{
         language,
-        setLanguage,
+        toggleLanguage,
         category,
         setCategory,
         snippet,
         setSnippet,
+        theme,
+        toggleTheme,
+        highlighterStyle,
+        toggleHighlighterStyle,
       }}
     >
       {children}
diff --git a/src/hooks/useKeyboardNavigation.ts b/src/hooks/useKeyboardNavigation.ts
index 7b814e78..25a77659 100644
--- a/src/hooks/useKeyboardNavigation.ts
+++ b/src/hooks/useKeyboardNavigation.ts
@@ -1,16 +1,16 @@
 import { useState } from "react";
 
-import { LanguageType } from "@types";
+import { SelectorOption } from "@types";
 
 interface UseKeyboardNavigationProps {
-  items: LanguageType[];
+  options: Array<SelectorOption>;
   isOpen: boolean;
-  onSelect: (item: LanguageType) => void;
+  onSelect: (item: SelectorOption) => void;
   onClose: () => void;
 }
 
 export const useKeyboardNavigation = ({
-  items,
+  options,
   isOpen,
   onSelect,
   onClose,
@@ -23,16 +23,16 @@ export const useKeyboardNavigation = ({
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
-        setFocusedIndex((prev) => (prev < items.length - 1 ? prev + 1 : 0));
+        setFocusedIndex((prev) => (prev < options.length - 1 ? prev + 1 : 0));
         break;
       case "ArrowUp":
         event.preventDefault();
-        setFocusedIndex((prev) => (prev > 0 ? prev - 1 : items.length - 1));
+        setFocusedIndex((prev) => (prev > 0 ? prev - 1 : options.length - 1));
         break;
       case "Enter":
         event.preventDefault();
         if (focusedIndex >= 0) {
-          onSelect(items[focusedIndex]);
+          onSelect(options[focusedIndex]);
         }
         break;
       case "Escape":
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
index 1ea68e54..fd5273c8 100644
--- a/src/layouts/Header.tsx
+++ b/src/layouts/Header.tsx
@@ -1,3 +1,4 @@
+import HighlighterStyleSelector from "@components/HighlighterStyleSelector";
 import { GitHubIcon } from "@components/Icons";
 import LinkButton from "@components/LinkButton";
 import Logo from "@components/Logo";
@@ -11,6 +12,9 @@ const Header = () => {
       <nav className="primary-nav">
         <SearchInput />
         <ThemeToggle />
+        <div className="header__highlighter-style-selector">
+          <HighlighterStyleSelector />
+        </div>
         <LinkButton
           href="https://github.com/dostonnabotov/quicksnip/blob/main/CONTRIBUTING.md"
           target="_blank"
diff --git a/src/styles/main.css b/src/styles/main.css
index 8ec2b1ba..8d0ffc77 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -331,15 +331,22 @@ abbr {
   border-radius: var(--br-md);
   cursor: pointer;
 
-  display: grid;
-  grid-template-columns: 1fr auto;
+  display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 
 .selector__value {
   display: flex;
   gap: 0.5em;
   align-items: center;
+  width: calc(100% - 30px);
+}
+
+.selector__value > span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .selector__value img {
@@ -379,6 +386,7 @@ abbr {
   list-style: none;
 
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  z-index: 1;
 }
 
 .selector__dropdown:focus-within {
@@ -449,6 +457,10 @@ abbr {
   flex-wrap: wrap;
 }
 
+.header__highlighter-style-selector {
+  width: 280px;
+}
+
 .primary-nav {
   display: flex;
   align-items: center;
@@ -617,7 +629,7 @@ body:has(.modal-overlay) {
 .modal__copy {
   position: absolute;
   top: 0.5em;
-  right: 1.2em;
+  right: 0.8em;
   z-index: 10;
   isolation: isolate;
   background-color: var(--clr-bg-secondary);
diff --git a/src/types/index.ts b/src/types/index.ts
index b4eac550..04f4950d 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -16,11 +16,25 @@ export type SnippetType = {
   author: string;
 };
 
+export type HighlighterStyleType = {
+  name: string;
+  style: { [key: string]: React.CSSProperties };
+};
+
 export type AppState = {
   language: LanguageType;
-  setLanguage: React.Dispatch<React.SetStateAction<LanguageType>>;
+  toggleLanguage: (_: LanguageType) => void;
   category: string;
   setCategory: React.Dispatch<React.SetStateAction<string>>;
   snippet: SnippetType | null;
   setSnippet: React.Dispatch<React.SetStateAction<SnippetType | null>>;
+  theme: "dark" | "light";
+  toggleTheme: () => void;
+  highlighterStyle: HighlighterStyleType;
+  toggleHighlighterStyle: (_: HighlighterStyleType) => void;
 };
+
+export interface SelectorOption {
+  name: string;
+  icon?: string;
+}