diff --git a/postcss.config.cjs b/postcss.config.cjs
index 33ad091..8615996 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,6 +1,7 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+    plugins: {
+        'tailwindcss/nesting': {},
+        'tailwindcss': {},
+        'autoprefixer': {},
+    },
+};
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 1f699e2..edb9458 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -9,7 +9,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export const Button: React.FC<ButtonProps> = ({ loading, className, children, ...props }) => (
     <button
         className={classNames(
-            'px-4 py-2 rounded-md ring-0 ring-opacity-50 ring-inherit',
+            'px-4 py-2 rounded-md ring-0 ring-theme-primary',
             'duration-300 focus:ring-4',
             className,
         )}
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index e5c2823..6c55434 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -2,11 +2,12 @@ import React, { HTMLProps } from 'react';
 import classNames from 'classnames';
 
 export const Card: React.FC<HTMLProps<HTMLDivElement>> = ({ className, children, ...props }) => (
+
     <div
         className={
             classNames(
-                'bg-silver-800 rounded-xl drop-shadow px-5 py-4',
-                { 'cursor-pointer hover:bg-silver-700 hover:drop-shadow-lg transition duration-200': props.onClick },
+                'rounded-xl bg-theme-pd text-theme-text drop-shadow px-5 py-4',
+                { 'cursor-pointer hover:bg-theme-pd hover:-translate-y-1 hover:drop-shadow-lg transition duration-200': props.onClick },
                 className,
             )
         }
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 2024aa6..35fa471 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -18,7 +18,7 @@ export const Input: React.FC<InputProps> = ({ label, error, className, ...props
             className={classNames(
                 'px-4 py-2 rounded-md bg-transparent outline-0 ring-0 border-2 block',
                 'duration-300 focus:ring-4 focus:ring-opacity-50',
-                { 'border-silver-600': !error, 'border-red-500': error, 'ring-silver-600': !error, 'ring-red-500': error },
+                { 'border-theme-workspace-pd': !error, 'border-red-500': error, 'ring-theme-workspace-pd': !error, 'ring-red-500': error },
                 className,
             )}
             {...props}
@@ -133,11 +133,11 @@ export const ToggleInput: React.FC<InputHTMLAttributes<HTMLInputElement>> = forw
                 className={classNames('opacity-0 w-full h-full cursor-pointer peer', className)}
                 {...props}
             />
-            <div className="absolute top-0 left-0 w-full h-full rounded-full bg-silver-700 pointer-events-none" />
+            <div className="absolute top-0 left-0 w-full h-full rounded-full bg-theme-workspace-pd pointer-events-none" />
             <div
                 className={classNames(
-                    'absolute top-1 left-1 w-3 h-3 rounded-full bg-silver-600 duration-100 pointer-events-none',
-                    'peer-checked:bg-amethyst-400 peer-checked:left-6',
+                    'absolute top-1 left-1 w-3 h-3 rounded-full bg-theme-pd duration-100 pointer-events-none',
+                    'peer-checked:bg-theme-primary peer-checked:left-6',
                 )}
             />
         </div>
diff --git a/src/components/Instrument.tsx b/src/components/Instrument.tsx
index 0a12345..c41986a 100644
--- a/src/components/Instrument.tsx
+++ b/src/components/Instrument.tsx
@@ -186,10 +186,10 @@ export const Instrument: React.FC<Element> = ({ uuid, name, element, x, y, width
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
         >
-            <div className="absolute bottom-full w-full box-content border-2 border-b-0 border-silver-800 bg-silver-800 rounded-t-xl pointer-events-auto">
+            <div className="absolute bottom-full w-full box-content border-2 border-b-0 border-theme-pd bg-theme-pd rounded-t-xl">
                 <div className="absolute -top-0.5 w-full flex justify-center">
                     <span
-                        className="w-1/4 h-2 bg-silver-700 rounded-b-full outline-0"
+                        className="w-1/4 h-2 bg-theme-workspace-pd rounded-b-full outline-0"
                         ref={setNodeRef}
                         {...listeners}
                         {...attributes}
@@ -202,7 +202,7 @@ export const Instrument: React.FC<Element> = ({ uuid, name, element, x, y, width
                     </Tippy>
                     <Tippy content="Refresh Instrument" appendTo={document.body}>
                         <button className="ml-auto" onClick={refresh}>
-                            <HiRefresh className="cursor-pointer active:text-silver-500" size={22} />
+                            <HiRefresh className="cursor-pointer active:text-theme-pd" size={22} />
                         </button>
                     </Tippy>
                     <Tippy content="Toggle Auto-Refresh" appendTo={document.body}>
@@ -210,7 +210,12 @@ export const Instrument: React.FC<Element> = ({ uuid, name, element, x, y, width
                     </Tippy>
                 </div>
             </div>
-            <div className="absolute w-full h-full box-content border-2 border-silver-700 bg-black">
+            <div
+                className={classNames(
+                    'absolute w-full h-full box-content border-2 border-theme-workspace-pd bg-black',
+                    { 'pointer-events-none': !interactable },
+                )}
+            >
                 <InstrumentFrame ref={iframeRef} name={name} width={width} height={height} />
             </div>
         </div>
diff --git a/src/components/contextmenu/CanvasMenu.tsx b/src/components/contextmenu/CanvasMenu.tsx
index db5ff9c..95010d7 100644
--- a/src/components/contextmenu/CanvasMenu.tsx
+++ b/src/components/contextmenu/CanvasMenu.tsx
@@ -34,7 +34,7 @@ export const CanvasMenu: React.FC<Omit<ContextMenuProps, 'children'>> = (props)
 
     return (
         <ContextMenu {...props}>
-            <div className="px-4 py-3 bg-silver-700/50 border-b-2 border-b-silver-700 font-medium">
+            <div className="px-4 py-3 bg-theme-pd border-b-2 border-b-theme-workspace-pd font-medium">
                 Instruments
             </div>
             {instruments.map((instrument) => (
diff --git a/src/components/contextmenu/ElementMenu.tsx b/src/components/contextmenu/ElementMenu.tsx
index d261656..acb0754 100644
--- a/src/components/contextmenu/ElementMenu.tsx
+++ b/src/components/contextmenu/ElementMenu.tsx
@@ -18,7 +18,7 @@ export const ElementMenu: React.FC<ElementMenuProps> = ({ element, ...props }) =
 
     return (
         <ContextMenu {...props}>
-            <div className="px-4 py-3 bg-silver-700/50 border-b-2 border-b-silver-700 font-medium">
+            <div className="px-4 py-3 bg-theme-bg border-b-2 border-b-theme-workspace-pd font-medium">
                 {element.name}
             </div>
             <button
diff --git a/src/components/contextmenu/index.tsx b/src/components/contextmenu/index.tsx
index b2d96a3..8b0952d 100644
--- a/src/components/contextmenu/index.tsx
+++ b/src/components/contextmenu/index.tsx
@@ -27,7 +27,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({ x, y, children }) => {
             tabIndex={-1}
             ref={menuRef}
             style={{ left: x, top: y }}
-            className="absolute pointer-events-auto flex flex-col outline-0 bg-silver-800 rounded-lg overflow-hidden shadow-2xl text-sm"
+            className="absolute pointer-events-auto flex flex-col outline-0 bg-theme-bg rounded-lg overflow-hidden shadow-2xl text-sm"
         >
             {children}
         </div>
diff --git a/src/components/menu/ElementsMenu.tsx b/src/components/menu/ElementsMenu.tsx
index 45a166a..d302593 100644
--- a/src/components/menu/ElementsMenu.tsx
+++ b/src/components/menu/ElementsMenu.tsx
@@ -29,21 +29,21 @@ export const ElementsMenu: React.FC<ElementsMenuProps> = ({ ...props }) => {
                 <div className="flex justify-between items-center mb-4">
                     <h3>Instruments</h3>
                     <button onClick={refreshInstruments}>
-                        <HiRefresh className="cursor-pointer active:text-silver-500" size={25} />
+                        <HiRefresh className="cursor-pointer active:text-theme-workspace-pd" size={25} />
                     </button>
                 </div>
                 <div className="flex flex-col gap-3 mb-8">
                     {instruments.map((instrument) => (
-                        <div className="flex items-center px-5 py-2 rounded-xl bg-silver-900/50">
+                        <div className="flex items-center px-5 py-2 rounded-xl bg-theme-workspace-pd">
                             <span>{instrument.name}</span>
-                            <span className="ml-auto text-silver-400">{instrument.dimensions.width}x{instrument.dimensions.height}</span>
+                            <span className="ml-auto text-theme-text text-opacity-30">{instrument.dimensions.width}x{instrument.dimensions.height}</span>
                         </div>
                     ))}
                 </div>
                 <h3 className="mb-4">Utilities</h3>
                 <div className="flex flex-col gap-3">
-                    <div className="flex items-center px-5 py-2 rounded-xl bg-silver-900/50">Button</div>
-                    <div className="flex items-center px-5 py-2 rounded-xl bg-silver-900/50">WebView</div>
+                    <div className="flex items-center px-5 py-2 rounded-xl bg-theme-workspace-pd">Button</div>
+                    <div className="flex items-center px-5 py-2 rounded-xl bg-theme-workspace-pd">WebView</div>
                 </div>
             </div>
         </Menu>
diff --git a/src/components/menu/SettingsMenu.tsx b/src/components/menu/SettingsMenu.tsx
new file mode 100644
index 0000000..248974b
--- /dev/null
+++ b/src/components/menu/SettingsMenu.tsx
@@ -0,0 +1,26 @@
+import { MdSettings } from 'react-icons/md';
+import { Menu } from './index';
+import { ThemeButton, themeButtons } from './ThemeButton';
+
+interface SettingsMenuCanvasProps {
+    show?: boolean;
+    onClick?: () => void;
+    onExit?: () => void;
+}
+
+export const SettingsMenuCanvas: React.FC<SettingsMenuCanvasProps> = ({ ...props }) => (
+    <Menu title="Settings" icon={<MdSettings size={25} />} {...props}>
+        <div className="px-6 py-5">
+            <div className="container grid items-center mb-4">
+                <h3>Theme</h3>
+                <ul>
+                    {themeButtons.map((button) => (
+                        <li key={button.themeName}>
+                            <ThemeButton {...button} />
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    </Menu>
+);
diff --git a/src/components/menu/SimVarsMenu.tsx b/src/components/menu/SimVarsMenu.tsx
index ebb61c1..eda9b3e 100644
--- a/src/components/menu/SimVarsMenu.tsx
+++ b/src/components/menu/SimVarsMenu.tsx
@@ -47,15 +47,15 @@ const SimVarSlider: React.FC<SimVarSliderProps> = memo(({ varKey }) => {
                     />
                     <h6 className="font-mono text-left">
                         {simVar.name}
-                        {simVar.index > 0 && <span className="text-amethyst-400">:{simVar.index}</span>}
+                        {simVar.index > 0 && <span className="text-theme-primary">:{simVar.index}</span>}
                     </h6>
                 </button>
                 <button className="mr-0.5" onClick={() => dispatch(togglePin({ key: formatKey(simVar) }))}>
                     <RiPushpin2Line
                         size={20}
                         className={classNames({
-                            'text-amethyst-400': simVar.pinned,
-                            'text-silver-700': !simVar.pinned,
+                            'text-theme-primary': simVar.pinned,
+                            'text-theme-pd': !simVar.pinned,
                         })}
                     />
                 </button>
@@ -201,14 +201,14 @@ const CollapsibleSimVarSection: React.FC<CollapsibleSimVarSectionProps> = ({ tit
     return (
         <>
             <button
-                className="w-full px-6 py-3 bg-silver-700/50 border-t-2 border-t-silver-700 flex items-center justify-between shadow-sm"
+                className="w-full px-6 py-3 bg-theme-workspace-pd flex items-center justify-between shadow-sm"
                 onClick={() => setCollapsed(!collapsed)}
             >
                 <h5>{title}</h5>
                 <FiChevronLeft
                     size={30}
                     className={classNames(
-                        'text-silver-500 duration-200',
+                        'text-theme-workspace-pd duration-200',
                         { 'rotate-0': collapsed, '-rotate-90': !collapsed },
                     )}
                 />
@@ -245,11 +245,11 @@ export const SimVarsMenu: React.FC<SimVarsMenuProps> = ({ ...props }) => {
             </div>
             <SimVarSection filter={(v) => v.pinned ?? false} />
             <CollapsibleSimVarSection
-                title={<><big className="text-amethyst-400">A</big> Vars</>}
+                title={<><big className="text-theme-primary">A</big> Vars</>}
                 filter={(v) => v.name.toLowerCase().includes(filter.toLowerCase()) && v.type === 'A'}
             />
             <CollapsibleSimVarSection
-                title={<><big className="text-amethyst-400">L</big> Vars</>}
+                title={<><big className="text-theme-primary">L</big> Vars</>}
                 filter={(v) => v.name.toLowerCase().includes(filter.toLowerCase()) && v.type === 'L'}
             />
         </Menu>
diff --git a/src/components/menu/ThemeButton.tsx b/src/components/menu/ThemeButton.tsx
new file mode 100644
index 0000000..5a72121
--- /dev/null
+++ b/src/components/menu/ThemeButton.tsx
@@ -0,0 +1,68 @@
+import { useEffect, useState } from 'react';
+import { MdCheckCircle } from 'react-icons/md';
+import { useGlobalSelector, GlobalState, GlobalDispatch, useGlobalDispatch } from '../../redux/global';
+import { themeConfigs, fallbackThemeConfig, themes } from '../../redux/global/ui/uitheme';
+import { setTheme } from '../../redux/global/configSlice';
+import { Button } from '../Button';
+
+export interface ThemeButtonProps {
+    themeName: string;
+    title: string | undefined;
+    className?: string;
+}
+
+export const ThemeButton: React.FC<ThemeButtonProps> = ({ themeName, title, className }: ThemeButtonProps) => {
+    const globalDispatch = useGlobalDispatch<GlobalDispatch>();
+
+    const { theme } = useGlobalSelector((state: GlobalState) => state.config);
+
+    const themeConfig = theme !== undefined ? theme : fallbackThemeConfig;
+
+    const { colors: { primary, accent, text, padding, workspacePadding, background } } = themeConfig;
+
+    const [selected, setSelected] = useState(themeConfig.name === themeName);
+
+    const changeTheme = (name: string) => {
+        const newThemeConfig = themeConfigs.get(name);
+
+        if (newThemeConfig === undefined) {
+            console.error(`Theme ${name} not found.`);
+            return;
+        }
+
+        globalDispatch(setTheme(newThemeConfig));
+    };
+
+    useEffect(() => {
+        setSelected(themeConfig.name === themeName);
+    }, [themeConfig, themeName]);
+
+    useEffect(() => {
+        document.documentElement.style.setProperty('--primary-color', primary);
+        document.documentElement.style.setProperty('--accent-color', accent);
+        document.documentElement.style.setProperty('--text-color', text);
+        document.documentElement.style.setProperty('--padding-color', padding);
+        document.documentElement.style.setProperty('--workspace-padding-color', workspacePadding);
+        document.documentElement.style.setProperty('--background-color', background);
+    }, [background, padding, primary, accent, workspacePadding, text]);
+
+    return (
+        <Button className={`flex w-64 ${className}`} onClick={() => changeTheme(themeName)}>
+            <MdCheckCircle
+                className={`mt-1 mx-4 transition-opacity duration-200 ease-in-out 
+                ${selected ? 'opacity-100' : 'opacity-0'}`}
+                size={20}
+            />
+            {title}
+        </Button>
+    );
+};
+
+export const themeButtons = themes.map((theme) => {
+
+    return {
+        themeName: theme.name,
+        title: theme.title,
+        className: 'font-mono hover:font-semibold',
+    };
+});
diff --git a/src/components/menu/index.tsx b/src/components/menu/index.tsx
index 9c0fae3..d16df71 100644
--- a/src/components/menu/index.tsx
+++ b/src/components/menu/index.tsx
@@ -13,7 +13,7 @@ export const Menu: React.FC<MenuProps> = ({ title, icon, show, onClick, onExit,
     <>
         <button
             className={classNames(
-                'w-14 h-14 flex items-center justify-center bg-silver-700 rounded-xl cursor-pointer ring-amethyst-400 ring-opacity-50 duration-200',
+                'w-14 h-14 flex items-center justify-center bg-theme-workspace-pd rounded-xl cursor-pointer ring-theme-primary duration-200',
                 { 'ring-0': !show, 'ring-4': show },
             )}
             onClick={show ? onExit : onClick}
@@ -23,10 +23,14 @@ export const Menu: React.FC<MenuProps> = ({ title, icon, show, onClick, onExit,
         {/* TODO: Don't unmount component, just hide */}
         <AnimatePresence>
             {show && (
-                <div className="absolute left-28 top-4">
-                    <MenuBody title={title} onExit={onExit}>
-                        {children}
-                    </MenuBody>
+                <div className="absolute left-28 top-4 w-[26rem] bg-theme-pd shadow-2xl rounded-2xl z-30 overflow-hidden">
+                    <div className="px-6 py-4 bg-theme-workspace-pd flex justify-between items-center">
+                        <h4 className="font-medium">{title}</h4>
+                        <button onClick={onExit}>
+                            <FiX size={30} className="text-theme-workspace-pd cursor-pointer hover:text-theme-text" />
+                        </button>
+                    </div>
+                    {children}
                 </div>
             )}
         </AnimatePresence>
diff --git a/src/components/modal/NewProjectModal.tsx b/src/components/modal/NewProjectModal.tsx
index dbb1260..3479801 100644
--- a/src/components/modal/NewProjectModal.tsx
+++ b/src/components/modal/NewProjectModal.tsx
@@ -102,7 +102,7 @@ export const NewProjectModal: React.FC<NewProjectModalProps> = ({ show, onExit }
                             }}
                         />
                         {status && <p className="text-red-500">{status}</p>}
-                        <Button className="bg-amethyst-500 hover:bg-amethyst-700 ring-amethyst-700 text-gray-100 font-bold" type="submit">Submit</Button>
+                        <Button className="bg-theme-bg hover:bg-theme-pd ring-theme-primary text-theme-text font-bold" type="submit">Submit</Button>
                     </Form>
                 )}
             </Formik>
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
index 9c937a0..9a46416 100644
--- a/src/components/modal/index.tsx
+++ b/src/components/modal/index.tsx
@@ -57,7 +57,7 @@ export const Modal: React.FC<ModalProps> = ({ title, show, onExit, children }) =
                     onClick={onExit}
                 >
                     <motion.div
-                        className="relative max-w-1/2 mx-auto bg-silver-800 rounded-2xl shadow-2xl"
+                        className="relative max-w-1/2 mx-auto bg-theme-bg rounded-2xl shadow-2xl"
                         variants={modalAnimation}
                         transition={{
                             duration: 0.2,
@@ -70,11 +70,11 @@ export const Modal: React.FC<ModalProps> = ({ title, show, onExit, children }) =
                         exit="hidden"
                         onClick={(e) => e.stopPropagation()}
                     >
-                        <div className="px-8 py-5 bg-silver-700 rounded-t-2xl flex justify-between items-center">
+                        <div className="px-8 py-5 bg-theme-workspace-pd rounded-t-2xl flex justify-between items-center">
                             <h3 className="font-medium">{title}</h3>
                             <FiX
                                 size={30}
-                                className="text-silver-400 cursor-pointer hover:text-silver-200"
+                                className="text-theme-pd cursor-pointer hover:text-theme-text"
                                 onClick={onExit}
                             />
                         </div>
diff --git a/src/index.css b/src/index.css
index 8912124..74e211d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,40 +8,62 @@
     }
 
     :root {
-        @apply bg-silver-950 text-silver-200;
+        --primary-color: #9F59F8;
+        --accent-color: #B47EFA;
+        --text-color: #FFFFFF;
+        --padding-color: #202028;
+        --workspace-padding-color: #3B3B44;
+        --background-color: #111217;
 
         font-synthesis: none;
         text-rendering: optimizeLegibility;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         -webkit-text-size-adjust: 100%;
+        background-color: var(--background-color);
+        color: var(--text-color);
     }
 
     .rc-slider-rail {
-        @apply bg-silver-700;
+        background-color: var(--background-color);
     }
 
     .rc-slider-track {
-        @apply bg-amethyst-400/50;
+        background-color: var(--workspace-padding-color);
     }
 
-    .rc-slider-handle,
-    .rc-slider-handle:hover {
-        @apply opacity-100 border-2 border-amethyst-400 bg-silver-800 ring-0 !ring-opacity-50 ring-amethyst-400 transition-shadow duration-300;
+    .rc-slider-handle, .rc-slider-handle:hover {
+        @apply opacity-100 border-2 ring-0 !ring-opacity-50
+            transition-shadow duration-300;
+
+        background-color: var(--padding-color);
+        border-color: var(--primary-color);
+        --tw-ring-opacity: 0.5 !important;
+        --tw-ring-color: var(--primary-color);
+
     }
 
-    .rc-slider-handle-dragging,
-    .rc-slider-handle:focus-visible,
-    .rc-slider-handle:active {
-        @apply !border-amethyst-400 !shadow-none ring-4 ring-amethyst-400;
+    .rc-slider-handle-dragging, .rc-slider-handle:focus-visible, .rc-slider-handle:active {
+        @apply !shadow-none ring-4;
+
+
+        border-color: var(--primary-color) !important;
+        --tw-ring-opacity: 1 !important;
+        --tw-ring-color: var(--primary-color);
+        --tw-border-opacity: 1 !important;
+
     }
 
     .titlebar {
-        @apply flex items-center fixed inset-x-0 top-0 h-8 bg-silver-900 pl-5 z-50;
+        @apply flex items-center fixed inset-x-0 top-0 h-8 pl-5 z-50;
+
+        background: var(--background-color);
     }
 
     .titlebar-title {
-        @apply text-white text-sm font-medium;
+        @apply text-sm font-medium;
+
+        color: var(--text-color)
     }
 
     .titlebar-controls {
@@ -49,25 +71,110 @@
     }
 
     .titlebar-controls button {
-        @apply flex justify-center items-center w-8 h-8 fill-none stroke-white stroke-2 disabled:stroke-silver-600 hover:bg-silver-800 disabled:hover:bg-transparent transition-colors duration-150;
+        @apply flex justify-center items-center w-8 h-8
+            fill-none stroke-2
+            transition-colors duration-150;
 
         stroke-linecap: round;
         stroke-linejoin: round;
+        stroke: #FFFFFF;
+
+        &:hover {
+            background-color: var(--background-color);
+        }
+
+        &:disabled {
+            stroke: var(--workspace-padding-color);
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+    }
+
+    .text-theme-primary {
+        color: var(--primary-color);
     }
 
-    input[type="number"]::-webkit-inner-spin-button,
-    input[type="number"]::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
+    .bg-theme-primary {
+        background-color: var(--primary-color);
     }
 
-    select {
-        @apply bg-transparent border-2 border-silver-600 rounded-md
+    .border-theme-primary {
+        border-color: var(--primary-color);
     }
 
-    .bg-grid {
-        background-size: 20px 20px;
-        background-image: radial-gradient(#202028 1.25px, transparent 0);
-        background-position: -9px -9px;
+    .text-theme-accent {
+        color: var(--accent-color);
     }
-}
\ No newline at end of file
+
+    .bg-theme-accent {
+        background-color: var(--accent-color);
+    }
+
+    .border-theme-accent {
+        border-color: var(--accent-color);
+    }
+
+    .text-theme-text {
+        color: var(--text-color);
+    }
+
+    .border-theme-text {
+        border-color: var(--text-color);
+    }
+
+    .text-theme-pd {
+        color: var(--padding-color);
+    }
+
+    .text-theme-workspace-pd {
+        color: var(--workspace-padding-color);
+    }
+
+    .bg-theme-pd {
+        background-color: var(--padding-color);
+    }
+
+    .border-theme-pd {
+        border-color: var(--padding-color);
+    }
+
+    .bg-theme-bg {
+        background-color: var(--background-color);
+    }
+
+    .border-theme-bg {
+        border-color: var(--background-color);
+    }
+
+    .bg-theme-workspace-pd {
+        background-color: var(--workspace-padding-color);
+    }
+
+    .ring-theme-primary {
+        --tw-ring-color: var(--primary-color);
+    }
+
+    .ring-theme-accent {
+        --tw-ring-color: var(--accent-color);
+    }
+
+    .ring-theme-workspace-pd {
+        --tw-ring-color: var(--workspace-padding-color);
+    }
+
+    .border-theme-workspace-pd {
+        --tw-border-opacity: 1;
+        border: 1px solid var(--workspace-padding-color);
+    }
+
+    .border-b-theme-workspace-pd {
+        border-bottom-color: var(--workspace-padding-color);
+    }
+
+.bg-grid {
+    background-size: 20px 20px;
+    background-image: radial-gradient(var(--padding-color) 1.25px, transparent 0);
+    background-position: -9px -9px;
+}
diff --git a/src/index.tsx b/src/index.tsx
index 0534e74..c7bc55c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -12,6 +12,7 @@ import '@fontsource-variable/jetbrains-mono';
 import '@fontsource-variable/space-grotesk';
 import 'tippy.js/dist/tippy.css';
 import './index.css';
+import { AppearanceSettings, SettingsMenu } from './pages/Settings';
 
 document
     .getElementById('titlebar-minimize')!
@@ -33,6 +34,7 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
                     <Routes>
                         <Route index element={<Home />} />
                         <Route path="/workspace" element={<Workspace />} />
+                        <Route path="/settings" element={<SettingsMenu />} />
                     </Routes>
                 </MemoryRouter>
             </Provider>
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 5576cef..a8d07f4 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -4,6 +4,7 @@ import { open } from '@tauri-apps/api/dialog';
 import { invoke } from '@tauri-apps/api/tauri';
 import { LuFolderOpen, LuPlus } from 'react-icons/lu';
 import { appWindow } from '@tauri-apps/api/window';
+import { MdSettings } from 'react-icons/md';
 import { useWorkspaceDispatch } from '../redux/workspace';
 import { setActive } from '../redux/workspace/projectSlice';
 import { initConfig, pushRecentProject } from '../redux/global/configSlice';
@@ -12,17 +13,34 @@ import { AceProject } from '../types';
 import { Card } from '../components/Card';
 import { NewProjectModal } from '../components/modal/NewProjectModal';
 import { timeFromTimestamp } from '../utils/date';
+import { fallbackThemeConfig } from '../redux/global/ui/uitheme';
 
 export const Home: React.FC = () => {
     const navigate = useNavigate();
     const workspaceDispatch = useWorkspaceDispatch();
     const globalDispatch = useGlobalDispatch<GlobalDispatch>();
 
-    const { version, recentProjects } = useGlobalSelector((state: GlobalState) => ({
+    const { version, recentProjects, theme } = useGlobalSelector((state: GlobalState) => ({
         version: state.config.version,
         recentProjects: state.config.recentProjects,
+        theme: state.config.theme,
     }));
 
+    const themeConfig = theme !== undefined ? theme : fallbackThemeConfig;
+
+    const { colors: { primary, accent, text, padding, workspacePadding, background } } = themeConfig;
+
+    useEffect(() => {
+        document.documentElement.style.setProperty('--primary-color', primary);
+        document.documentElement.style.setProperty('--accent-color', accent);
+        document.documentElement.style.setProperty('--text-color', text);
+        document.documentElement.style.setProperty('--padding-color', padding);
+        document.documentElement.style.setProperty('--workspace-padding-color', workspacePadding);
+        document.documentElement.style.setProperty('--background-color', background);
+    }, [background, padding, primary, accent, workspacePadding, text]);
+
+    console.log(padding);
+
     const [showNewProjectModal, setShowNewProjectModal] = useState<boolean>(false);
 
     const openProject = useCallback(() => {
@@ -45,6 +63,10 @@ export const Home: React.FC = () => {
             .catch((error) => console.error(error));
     }, [workspaceDispatch, globalDispatch, navigate]);
 
+    const navigateToSettings = () => {
+        navigate('/settings');
+    };
+
     useEffect(() => {
         appWindow.setResizable(false);
         appWindow.unmaximize();
@@ -60,13 +82,18 @@ export const Home: React.FC = () => {
 
     return (
         <>
-            <div className="container px-20 pt-24 h-screen overflow-clip">
-                <h1 className="flex gap-4 items-center text-4xl text-white mb-8">
-                    <span>Welcome to <span className="font-medium text-amethyst-500">ACE</span></span>
-                    <span className="rounded-xl px-3 py-1 font-medium text-sm text-amethyst-500 bg-amethyst-500/25">
-                        v{version}
+            <div className="container px-20 pt-16 h-screen overflow-clip">
+                <div className="flex gap-4 items-center text-4xl text-theme-text mb-8">
+                    <span>Welcome to <span className="text-theme-primary font-medium">ACE</span></span>
+                    <span
+                        className="rounded-xl px-3 py-1 font-medium text-sm bg-theme-pd bg-opacity"
+                    >v{version}
                     </span>
-                </h1>
+                    {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+                    <button onClick={navigateToSettings} className="ml-auto rounded-md p-1 hover:bg-theme-pd transition">
+                        <MdSettings size={25} />
+                    </button>
+                </div>
                 <div className="grid grid-cols-2 gap-6 mb-16">
                     <Card
                         className="flex gap-4 items-center"
@@ -84,7 +111,7 @@ export const Home: React.FC = () => {
                     </Card>
                 </div>
 
-                <h2 className="flex gap-4 items-center text-2xl text-white mb-8">
+                <h2 className="flex gap-4 items-center text-2xl text-theme-text mb-8">
                     Recent Projects
                 </h2>
                 {recentProjects.length === 0 && (
@@ -96,10 +123,10 @@ export const Home: React.FC = () => {
                         .map(({ name, path, timestamp }) => (
                             <Card onClick={() => loadProject(path)} key={path}>
                                 <span className="flex gap-3 items-center">
-                                    <h3 className="font-medium text-2xl text-amethyst-400">{name}</h3>
+                                    <h3 className="font-medium text-2xl text-theme-accent">{name}</h3>
                                     <span className="font-xs">Last opened {timeFromTimestamp(timestamp)}</span>
                                 </span>
-                                <span className="font-mono text-sm text-silver-500">{path}</span>
+                                <span className="font-mono text-sm text-theme-workspace-pd">{path}</span>
                             </Card>
                         ))}
                 </div>
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
new file mode 100644
index 0000000..65d6f48
--- /dev/null
+++ b/src/pages/Settings.tsx
@@ -0,0 +1,36 @@
+import { useNavigate } from 'react-router';
+import { MdClose } from 'react-icons/md';
+import { ThemeButton, themeButtons } from '../components/menu/ThemeButton';
+
+export const SettingsMenu: React.FC = () => (
+    <AppearanceSettings />
+);
+
+export const AppearanceSettings: React.FC = () => {
+    const navigate = useNavigate();
+
+    const returnToHome = () => {
+        navigate('/');
+    };
+
+    return (
+        <div className="container px-20 pt-16 h-screen w-screen">
+            <span className="flex justify-between">
+                <div className="flex">
+                    <button className="hover:opacity-50 transition" onClick={returnToHome}>
+                        <MdClose className="text-theme-text bg-theme-pd rounded-md text-3xl p-2" />
+                    </button>
+                    <h1 className="text-2xl text-theme-text ml-4 font-semibold">Settings</h1>
+                </div>
+            </span>
+            <h2 className="text-2xl mt-12">Themes</h2>
+            <ul className="text-lg py-4 space-y-2">
+                {themeButtons.map((button) => (
+                    <li key={button.themeName}>
+                        <ThemeButton {...button} />
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
diff --git a/src/pages/Workspace.tsx b/src/pages/Workspace.tsx
index 23d3421..d68a61d 100644
--- a/src/pages/Workspace.tsx
+++ b/src/pages/Workspace.tsx
@@ -12,6 +12,7 @@ import { Instrument } from '../components/Instrument';
 import { SimVarsMenu } from '../components/menu/SimVarsMenu';
 import { CanvasMenu } from '../components/contextmenu/CanvasMenu';
 import { ElementsMenu } from '../components/menu/ElementsMenu';
+import { SettingsMenuCanvas } from '../components/menu/SettingsMenu';
 import { InstrumentConfig, SimVar } from '../types';
 import { EventsMenu } from '../components/menu/EventsMenu';
 
@@ -21,7 +22,7 @@ export const CANVAS_HEIGHT = 5000;
 enum MenuTabs {
     SimVars,
     Elements,
-    Events,
+    Settings
 }
 
 export const Workspace: React.FC = () => {
@@ -63,7 +64,7 @@ export const Workspace: React.FC = () => {
     return (
         <DndContext onDragEnd={handleDragEnd}>
             <CanvasLayer />
-            <div className="absolute left-0 top-0 h-screen bg-silver-800 shadow-2xl p-4 pt-12 flex flex-col gap-4 z-20">
+            <div className="absolute left-0 top-0 h-screen bg-theme-pd shadow-2xl p-4 pt-12 flex flex-col gap-4 z-20">
                 <SimVarsMenu
                     show={currentMenuTab === MenuTabs.SimVars}
                     onClick={() => setMenuTab(MenuTabs.SimVars)}
@@ -74,9 +75,9 @@ export const Workspace: React.FC = () => {
                     onClick={() => setMenuTab(MenuTabs.Elements)}
                     onExit={() => setMenuTab(undefined)}
                 />
-                <EventsMenu
-                    show={currentMenuTab === MenuTabs.Events}
-                    onClick={() => setMenuTab(MenuTabs.Events)}
+                <SettingsMenuCanvas
+                    show={currentMenuTab === MenuTabs.Settings}
+                    onClick={() => setMenuTab(MenuTabs.Settings)}
                     onExit={() => setMenuTab(undefined)}
                 />
             </div>
diff --git a/src/redux/global/configSlice.ts b/src/redux/global/configSlice.ts
index 6966c58..4d395db 100644
--- a/src/redux/global/configSlice.ts
+++ b/src/redux/global/configSlice.ts
@@ -2,6 +2,9 @@ import { createAsyncThunk, createSlice, Middleware, PayloadAction } from '@redux
 import { Platform, platform as getPlatform } from '@tauri-apps/api/os';
 import { getVersion } from '@tauri-apps/api/app';
 import { AceProject } from '../../types';
+import { ThemeConfig, fallbackThemeConfig } from './ui/uitheme';
+
+const THEME_LOCAL_STORAGE_KEY = 'ace_ui_theme';
 
 export interface RecentProject {
     name: string;
@@ -13,11 +16,14 @@ interface ConfigState {
     platform?: Platform;
     version?: string;
     recentProjects?: RecentProject[];
+    theme?: ThemeConfig;
 }
 
 const configSlice = createSlice({
     name: 'config',
-    initialState: {} as ConfigState,
+    initialState: {
+        theme: JSON.parse(localStorage.getItem(THEME_LOCAL_STORAGE_KEY) ?? JSON.stringify(fallbackThemeConfig)) as ThemeConfig,
+    } as ConfigState,
     reducers: {
         pushRecentProject(state, action: PayloadAction<AceProject>) {
             if (state.recentProjects === undefined) return;
@@ -30,27 +36,37 @@ const configSlice = createSlice({
                 timestamp: new Date().toISOString(),
             });
         },
+        setTheme: (state, action: PayloadAction<ThemeConfig>) => {
+            state.theme = action.payload;
+        },
     },
     extraReducers: (builder) => {
         builder.addCase(initConfig.fulfilled, (state, action) => action.payload);
     },
 });
 
-export const { pushRecentProject } = configSlice.actions;
-export const configReducer = configSlice.reducer;
-
 const LOCAL_STORAGE_KEY = 'ace_recent_projects';
 
+export const { pushRecentProject, setTheme } = configSlice.actions;
+export const configReducer = configSlice.reducer;
+
 export const localStorageMiddleware: Middleware = (store) => (next) => (action) => {
     next(action);
 
-    const { recentProjects } = store.getState().config;
+    const { recentProjects, theme } = store.getState().config;
     if (recentProjects !== undefined) {
         localStorage.setItem(
             LOCAL_STORAGE_KEY,
             JSON.stringify(recentProjects),
         );
     }
+
+    if (theme !== undefined) {
+        localStorage.setItem(
+            THEME_LOCAL_STORAGE_KEY,
+            JSON.stringify(theme),
+        );
+    }
 };
 
 export const initConfig = createAsyncThunk(
@@ -64,6 +80,9 @@ export const initConfig = createAsyncThunk(
             ? []
             : JSON.parse(local) as RecentProject[];
 
-        return { platform, version, recentProjects };
+        const storedTheme = localStorage.getItem(THEME_LOCAL_STORAGE_KEY);
+        const theme = storedTheme !== null ? JSON.parse(storedTheme) as ThemeConfig : fallbackThemeConfig;
+
+        return { platform, version, recentProjects, theme };
     },
 );
diff --git a/src/redux/global/ui/colors.ts b/src/redux/global/ui/colors.ts
new file mode 100644
index 0000000..9eef749
--- /dev/null
+++ b/src/redux/global/ui/colors.ts
@@ -0,0 +1,45 @@
+export interface ColorPalette {
+    primary: string;
+    accent: string;
+    text: string;
+    padding: string;
+    workspacePadding: string;
+    background: string;
+}
+
+// using default export because tailwind.config.cjs doesn't support ESM modules.
+// eslint-disable-next-line import/no-default-export
+export default {
+    'amethyst-dark': {
+        primary: '#B47EFA',
+        accent: '#9F59F8',
+        text: '#FFFFFF',
+        padding: '#202028',
+        workspacePadding: '#3B3B44',
+        background: '#111217',
+    },
+    'flybywire-dark': {
+        primary: '#00E0FE',
+        secondary: '#00CCFF',
+        text: '#FAFAFA',
+        padding: '#171E2C',
+        workspacePadding: '#1F2A3C',
+        background: '#0E131B',
+    },
+    'atom-one-dark': {
+        primary: '#E06C75',
+        secondary: '#98C379',
+        text: '#FAFAFA',
+        padding: '#1D2025',
+        workspacePadding: '#252931',
+        background: '#282C34',
+    },
+    'monokai': {
+        primary: '#A6E22E',
+        secondary: '#60D8EF',
+        text: '#F8F8F2',
+        padding: '#1E1F1C',
+        workspacePadding: '#323331',
+        background: '#272822',
+    },
+};
diff --git a/src/redux/global/ui/uitheme.ts b/src/redux/global/ui/uitheme.ts
new file mode 100644
index 0000000..67421be
--- /dev/null
+++ b/src/redux/global/ui/uitheme.ts
@@ -0,0 +1,30 @@
+import colors, { ColorPalette } from './colors';
+
+export interface ThemeConfig {
+    name: string;
+    title: string | undefined;
+    colors: ColorPalette;
+}
+
+const themeTitles = new Map([
+    ['amethyst-dark', 'Amethyst Dark'],
+    ['flybywire-dark', 'FlyByWire Dark'],
+    ['atom-one-dark', 'Atom One Dark'],
+    ['monokai', 'Monokai'],
+]);
+
+// Then modify the theme creation code to include the title:
+export const themes = Object.entries(colors).map(([name, color]) => ({
+    name,
+    title: themeTitles.get(name) ?? name, // This will match the title based on the name
+    colors: color,
+}));
+
+export const themeConfigs = new Map<String, ThemeConfig>();
+themes.forEach((theme) => themeConfigs.set(theme.name, theme));
+
+export const fallbackThemeConfig: ThemeConfig = {
+    name: 'amthyst-dark',
+    title: 'Amethyst Dark',
+    colors: colors['amethyst-dark'],
+};
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 1dd9882..f720cbb 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,4 +1,7 @@
 /** @type {import('tailwindcss').Config} */
+
+const colors = require('./src/redux/global/ui/colors');
+
 module.exports = {
     content: [
         './src/**/*.{js,jsx,ts,tsx}',
@@ -7,39 +10,38 @@ module.exports = {
     theme: {
         fontFamily: {
             sans: ['"Space Grotesk Variable"', 'sans-serif'],
-            mono: ['"JetBrains Mono Variable"', 'monospace']
+            mono: ['"JetBrains Mono Variable"', 'monospace'],
         },
         container: {
             center: true,
         },
         extend: {
-            colors: {
-                silver: {
-                    950: '#111217',
-                    900: '#191920',
-                    800: '#202028',
-                    700: '#3B3B44',
-                    600: '#565660',
-                    500: '#71717C',
-                    400: '#8D8D99',
-                    300: '#A8A8B5',
-                    200: '#C3C3D1',
-                    100: '#DEDEED',
-                    50: '#EFEFF9',
-                },
-                amethyst: {
-                    950: '#35234F',
-                    900: '#4A2E71',
-                    800: '#5F3993',
-                    700: '#7543B4',
-                    600: '#8A4ED6',
-                    500: '#9F59F8',
-                    400: '#B47EFA',
-                    300: '#CAA3FB',
-                    200: '#D4B5FC',
-                    100: '#DFC8FD',
-                    50: '#EADAFD',
-                },
+            colors,
+            silver: {
+                950: '#111217',
+                900: '#191920',
+                800: '#202028',
+                700: '#3B3B44',
+                600: '#565660',
+                500: '#71717C',
+                400: '#8D8D99',
+                300: '#A8A8B5',
+                200: '#C3C3D1',
+                100: '#DEDEED',
+                50: '#EFEFF9',
+            },
+            amethyst: {
+                950: '#35234F',
+                900: '#4A2E71',
+                800: '#5F3993',
+                700: '#7543B4',
+                600: '#8A4ED6',
+                500: '#9F59F8',
+                400: '#B47EFA',
+                300: '#CAA3FB',
+                200: '#D4B5FC',
+                100: '#DFC8FD',
+                50: '#EADAFD',
             },
         },
     },