diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
deleted file mode 100644
index b3bb49c..0000000
--- a/.github/workflows/deploy.yml
+++ /dev/null
@@ -1,49 +0,0 @@
-name: Deploy
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: actions/setup-node@v3
-
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1
-
-      - name: Build project
-        run: npm run build
-
-      - name: Upload production-ready build files
-        uses: actions/upload-artifact@v3
-        with:
-          name: production-files
-          path: ./dist
-
-  deploy:
-    name: Deploy
-    needs: build
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/main'
-
-    steps:
-      - name: Download artifact
-        uses: actions/download-artifact@v3
-        with:
-          name: production-files
-          path: ./dist
-
-      - name: Deploy to GitHub Pages
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./dist
diff --git a/src/components/AppAppBar.tsx b/src/components/AppAppBar.tsx
index 06c34cc..65ae23e 100644
--- a/src/components/AppAppBar.tsx
+++ b/src/components/AppAppBar.tsx
@@ -22,11 +22,9 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
   backdropFilter: 'blur(24px)',
   border: '1px solid',
-  borderColor: (theme.vars || theme).palette.divider,
-  backgroundColor: theme.vars
-    ? `rgba(${theme.vars.palette.background.defaultChannel} / 0.4)`
-    : alpha(theme.palette.background.default, 0.4),
-  boxShadow: (theme.vars || theme).shadows[1],
+  borderColor: theme.palette.divider,
+  backgroundColor: alpha(theme.palette.background.default, 0.4),
+  boxShadow: theme.shadows[1],
   padding: '8px 12px',
 }));
 
diff --git a/src/components/Features.tsx b/src/components/Features.tsx
index fe18ca9..0841975 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -51,12 +51,12 @@ const Chip = styled(MuiChip)<ChipProps>(({ theme }) => ({
         background:
           'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))',
         color: 'hsl(0, 0%, 100%)',
-        borderColor: (theme.vars || theme).palette.primary.light,
+        borderColor: theme.palette.primary.light,
         '& .MuiChip-label': {
           color: 'hsl(0, 0%, 100%)',
         },
         ...theme.applyStyles('dark', {
-          borderColor: (theme.vars || theme).palette.primary.dark,
+          borderColor: theme.palette.primary.dark,
         }),
       },
     },
@@ -190,7 +190,7 @@ export default function Features() {
                     height: '100%',
                     width: '100%',
                     '&:hover': {
-                      backgroundColor: (theme.vars || theme).palette.action.hover,
+                      backgroundColor: theme.palette.action.hover,
                     },
                   }),
                   selectedItemIndex === index && {
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 9a5bc67..325d47c 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -16,11 +16,11 @@ const StyledBox = styled('div')(({ theme }) => ({
   width: '100%',
   height: 400,
   marginTop: theme.spacing(8),
-  borderRadius: (theme.vars || theme).shape.borderRadius,
+  borderRadius: theme.shape.borderRadius,
   outline: '6px solid',
   outlineColor: 'hsla(220, 25%, 80%, 0.2)',
   border: '1px solid',
-  borderColor: (theme.vars || theme).palette.grey[200],
+  borderColor: theme.palette.grey[200],
   boxShadow: '0 0 12px 8px hsla(220, 25%, 80%, 0.2)',
   backgroundImage: `url(${import.meta.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard.jpg)`,
   backgroundSize: 'cover',
@@ -32,7 +32,7 @@ const StyledBox = styled('div')(({ theme }) => ({
     boxShadow: '0 0 24px 12px hsla(210, 100%, 25%, 0.2)',
     backgroundImage: `url(${import.meta.env.TEMPLATE_IMAGE_URL || 'https://mui.com'}/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg)`,
     outlineColor: 'hsla(220, 20%, 42%, 0.1)',
-    borderColor: (theme.vars || theme).palette.grey[700],
+    borderColor: theme.palette.grey[700],
   }),
 }));
 
diff --git a/src/theme/ColorModeIconDropdown.tsx b/src/theme/ColorModeIconDropdown.tsx
index 3af1e07..d87d571 100644
--- a/src/theme/ColorModeIconDropdown.tsx
+++ b/src/theme/ColorModeIconDropdown.tsx
@@ -30,9 +30,9 @@ export default function ColorModeIconDropdown(props: IconButtonOwnProps) {
           display: 'inline-flex',
           width: '2.25rem',
           height: '2.25rem',
-          borderRadius: (theme.vars || theme).shape.borderRadius,
+          borderRadius: theme.shape.borderRadius,
           border: '1px solid',
-          borderColor: (theme.vars || theme).palette.divider,
+          borderColor: theme.palette.divider,
         })}
       />
     );
diff --git a/src/theme/customizations/dataDisplay.tsx b/src/theme/customizations/dataDisplay.tsx
index b6b2b46..c93ccbf 100644
--- a/src/theme/customizations/dataDisplay.tsx
+++ b/src/theme/customizations/dataDisplay.tsx
@@ -24,7 +24,7 @@ export const dataDisplayCustomizations: Components<Theme> = {
         [`& .${svgIconClasses.root}`]: {
           width: '1rem',
           height: '1rem',
-          color: (theme.vars || theme).palette.text.secondary,
+          color: theme.palette.text.secondary,
         },
         [`& .${typographyClasses.root}`]: {
           fontWeight: 500,
@@ -33,13 +33,13 @@ export const dataDisplayCustomizations: Components<Theme> = {
           display: 'flex',
           gap: 8,
           padding: '2px 8px',
-          borderRadius: (theme.vars || theme).shape.borderRadius,
+          borderRadius: theme.shape.borderRadius,
           opacity: 0.7,
           '&.Mui-selected': {
             opacity: 1,
             backgroundColor: alpha(theme.palette.action.selected, 0.3),
             [`& .${svgIconClasses.root}`]: {
-              color: (theme.vars || theme).palette.text.primary,
+              color: theme.palette.text.primary,
             },
             '&:focus-visible': {
               backgroundColor: alpha(theme.palette.action.selected, 0.3),
diff --git a/src/theme/customizations/feedback.tsx b/src/theme/customizations/feedback.tsx
index 6d475c9..aaf0000 100644
--- a/src/theme/customizations/feedback.tsx
+++ b/src/theme/customizations/feedback.tsx
@@ -8,7 +8,7 @@ export const feedbackCustomizations: Components<Theme> = {
       root: ({ theme }) => ({
         borderRadius: 10,
         backgroundColor: orange[100],
-        color: (theme.vars || theme).palette.text.primary,
+        color: theme.palette.text.primary,
         border: `1px solid ${alpha(orange[300], 0.5)}`,
         '& .MuiAlert-icon': {
           color: orange[500],
@@ -26,7 +26,7 @@ export const feedbackCustomizations: Components<Theme> = {
         '& .MuiDialog-paper': {
           borderRadius: '10px',
           border: '1px solid',
-          borderColor: (theme.vars || theme).palette.divider,
+          borderColor: theme.palette.divider,
         },
       }),
     },
diff --git a/src/theme/customizations/inputs.tsx b/src/theme/customizations/inputs.tsx
index 1bdcf91..9eb60b3 100644
--- a/src/theme/customizations/inputs.tsx
+++ b/src/theme/customizations/inputs.tsx
@@ -31,7 +31,7 @@ export const inputsCustomizations: Components<Theme> = {
     styleOverrides: {
       root: ({ theme }) => ({
         boxShadow: 'none',
-        borderRadius: (theme.vars || theme).shape.borderRadius,
+        borderRadius: theme.shape.borderRadius,
         textTransform: 'none',
         variants: [
           {
@@ -113,7 +113,7 @@ export const inputsCustomizations: Components<Theme> = {
               variant: 'outlined',
             },
             style: {
-              color: (theme.vars || theme).palette.text.primary,
+              color: theme.palette.text.primary,
               border: '1px solid',
               borderColor: brand[200],
               backgroundColor: alpha(brand[50], 0.3),
@@ -225,11 +225,11 @@ export const inputsCustomizations: Components<Theme> = {
     styleOverrides: {
       root: ({ theme }) => ({
         boxShadow: 'none',
-        borderRadius: (theme.vars || theme).shape.borderRadius,
+        borderRadius: theme.shape.borderRadius,
         textTransform: 'none',
         fontWeight: theme.typography.fontWeightMedium,
         letterSpacing: 0,
-        color: (theme.vars || theme).palette.text.primary,
+        color: theme.palette.text.primary,
         border: '1px solid ',
         borderColor: gray[200],
         backgroundColor: alpha(gray[50], 0.3),
@@ -383,10 +383,10 @@ export const inputsCustomizations: Components<Theme> = {
       },
       root: ({ theme }) => ({
         padding: '8px 12px',
-        color: (theme.vars || theme).palette.text.primary,
-        borderRadius: (theme.vars || theme).shape.borderRadius,
-        border: `1px solid ${(theme.vars || theme).palette.divider}`,
-        backgroundColor: (theme.vars || theme).palette.background.default,
+        color: theme.palette.text.primary,
+        borderRadius: theme.shape.borderRadius,
+        border: `1px solid ${theme.palette.divider}`,
+        backgroundColor: theme.palette.background.default,
         transition: 'border 120ms ease-in',
         '&:hover': {
           borderColor: gray[400],
@@ -427,9 +427,9 @@ export const inputsCustomizations: Components<Theme> = {
   MuiInputAdornment: {
     styleOverrides: {
       root: ({ theme }) => ({
-        color: (theme.vars || theme).palette.grey[500],
+        color: theme.palette.grey[500],
         ...theme.applyStyles('dark', {
-          color: (theme.vars || theme).palette.grey[400],
+          color: theme.palette.grey[400],
         }),
       }),
     },
diff --git a/src/theme/customizations/navigation.tsx b/src/theme/customizations/navigation.tsx
index 3cb9713..f6b92e5 100644
--- a/src/theme/customizations/navigation.tsx
+++ b/src/theme/customizations/navigation.tsx
@@ -14,7 +14,7 @@ export const navigationCustomizations: Components<Theme> = {
   MuiMenuItem: {
     styleOverrides: {
       root: ({ theme }) => ({
-        borderRadius: (theme.vars || theme).shape.borderRadius,
+        borderRadius: theme.shape.borderRadius,
         padding: '6px 8px',
         [`&.${menuItemClasses.focusVisible}`]: {
           backgroundColor: 'transparent',
@@ -37,8 +37,8 @@ export const navigationCustomizations: Components<Theme> = {
       },
       paper: ({ theme }) => ({
         marginTop: '4px',
-        borderRadius: (theme.vars || theme).shape.borderRadius,
-        border: `1px solid ${(theme.vars || theme).palette.divider}`,
+        borderRadius: theme.shape.borderRadius,
+        border: `1px solid ${theme.palette.divider}`,
         backgroundImage: 'none',
         background: 'hsl(0, 0%, 100%)',
         boxShadow:
@@ -64,14 +64,14 @@ export const navigationCustomizations: Components<Theme> = {
     },
     styleOverrides: {
       root: ({ theme }) => ({
-        borderRadius: (theme.vars || theme).shape.borderRadius,
+        borderRadius: theme.shape.borderRadius,
         border: '1px solid',
         borderColor: gray[200],
-        backgroundColor: (theme.vars || theme).palette.background.paper,
+        backgroundColor: theme.palette.background.paper,
         boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
         '&:hover': {
           borderColor: gray[300],
-          backgroundColor: (theme.vars || theme).palette.background.paper,
+          backgroundColor: theme.palette.background.paper,
           boxShadow: 'none',
         },
         [`&.${selectClasses.focused}`]: {
@@ -83,13 +83,13 @@ export const navigationCustomizations: Components<Theme> = {
         },
 
         ...theme.applyStyles('dark', {
-          borderRadius: (theme.vars || theme).shape.borderRadius,
+          borderRadius: theme.shape.borderRadius,
           borderColor: gray[700],
-          backgroundColor: (theme.vars || theme).palette.background.paper,
+          backgroundColor: theme.palette.background.paper,
           boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
           '&:hover': {
             borderColor: alpha(gray[700], 0.7),
-            backgroundColor: (theme.vars || theme).palette.background.paper,
+            backgroundColor: theme.palette.background.paper,
             boxShadow: 'none',
           },
           [`&.${selectClasses.focused}`]: {
@@ -120,7 +120,7 @@ export const navigationCustomizations: Components<Theme> = {
     },
     styleOverrides: {
       root: ({ theme }) => ({
-        color: (theme.vars || theme).palette.text.primary,
+        color: theme.palette.text.primary,
         fontWeight: 500,
         position: 'relative',
         textDecoration: 'none',
@@ -132,7 +132,7 @@ export const navigationCustomizations: Components<Theme> = {
           height: '1px',
           bottom: 0,
           left: 0,
-          backgroundColor: (theme.vars || theme).palette.text.secondary,
+          backgroundColor: theme.palette.text.secondary,
           opacity: 0.3,
           transition: 'width 0.3s ease, opacity 0.3s ease',
         },
@@ -150,7 +150,7 @@ export const navigationCustomizations: Components<Theme> = {
   MuiDrawer: {
     styleOverrides: {
       paper: ({ theme }) => ({
-        backgroundColor: (theme.vars || theme).palette.background.default,
+        backgroundColor: theme.palette.background.default,
       }),
     },
   },
@@ -159,12 +159,12 @@ export const navigationCustomizations: Components<Theme> = {
       root: ({ theme }) => ({
         '&.Mui-selected': {
           color: 'white',
-          backgroundColor: (theme.vars || theme).palette.grey[900],
+          backgroundColor: theme.palette.grey[900],
         },
         ...theme.applyStyles('dark', {
           '&.Mui-selected': {
             color: 'black',
-            backgroundColor: (theme.vars || theme).palette.grey[50],
+            backgroundColor: theme.palette.grey[50],
           },
         }),
       }),
@@ -174,9 +174,9 @@ export const navigationCustomizations: Components<Theme> = {
     styleOverrides: {
       root: { minHeight: 'fit-content' },
       indicator: ({ theme }) => ({
-        backgroundColor: (theme.vars || theme).palette.grey[800],
+        backgroundColor: theme.palette.grey[800],
         ...theme.applyStyles('dark', {
-          backgroundColor: (theme.vars || theme).palette.grey[200],
+          backgroundColor: theme.palette.grey[200],
         }),
       }),
     },
@@ -189,12 +189,12 @@ export const navigationCustomizations: Components<Theme> = {
         textTransform: 'none',
         minWidth: 'fit-content',
         minHeight: 'fit-content',
-        color: (theme.vars || theme).palette.text.secondary,
-        borderRadius: (theme.vars || theme).shape.borderRadius,
+        color: theme.palette.text.secondary,
+        borderRadius: theme.shape.borderRadius,
         border: '1px solid',
         borderColor: 'transparent',
         ':hover': {
-          color: (theme.vars || theme).palette.text.primary,
+          color: theme.palette.text.primary,
           backgroundColor: gray[100],
           borderColor: gray[200],
         },
@@ -203,7 +203,7 @@ export const navigationCustomizations: Components<Theme> = {
         },
         ...theme.applyStyles('dark', {
           ':hover': {
-            color: (theme.vars || theme).palette.text.primary,
+            color: theme.palette.text.primary,
             backgroundColor: gray[800],
             borderColor: gray[700],
           },
@@ -218,7 +218,7 @@ export const navigationCustomizations: Components<Theme> = {
     styleOverrides: {
       line: ({ theme }) => ({
         borderTop: '1px solid',
-        borderColor: (theme.vars || theme).palette.divider,
+        borderColor: theme.palette.divider,
         flex: 1,
         borderRadius: '99px',
       }),
@@ -237,21 +237,21 @@ export const navigationCustomizations: Components<Theme> = {
         },
         '&.Mui-active': {
           border: 'none',
-          color: (theme.vars || theme).palette.primary.main,
+          color: theme.palette.primary.main,
         },
         '&.Mui-completed': {
           border: 'none',
-          color: (theme.vars || theme).palette.success.main,
+          color: theme.palette.success.main,
         },
         ...theme.applyStyles('dark', {
           border: `1px solid ${gray[700]}`,
           '&.Mui-active': {
             border: 'none',
-            color: (theme.vars || theme).palette.primary.light,
+            color: theme.palette.primary.light,
           },
           '&.Mui-completed': {
             border: 'none',
-            color: (theme.vars || theme).palette.success.light,
+            color: theme.palette.success.light,
           },
         }),
         variants: [
diff --git a/src/theme/customizations/surfaces.ts b/src/theme/customizations/surfaces.ts
index f47a6d8..5bcdfc5 100644
--- a/src/theme/customizations/surfaces.ts
+++ b/src/theme/customizations/surfaces.ts
@@ -12,9 +12,9 @@ export const surfacesCustomizations: Components<Theme> = {
       root: ({ theme }) => ({
         padding: 4,
         overflow: 'clip',
-        backgroundColor: (theme.vars || theme).palette.background.default,
+        backgroundColor: theme.palette.background.default,
         border: '1px solid',
-        borderColor: (theme.vars || theme).palette.divider,
+        borderColor: theme.palette.divider,
         ':before': {
           backgroundColor: 'transparent',
         },
@@ -22,12 +22,12 @@ export const surfacesCustomizations: Components<Theme> = {
           borderBottom: 'none',
         },
         '&:first-of-type': {
-          borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
-          borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
+          borderTopLeftRadius: theme.shape.borderRadius,
+          borderTopRightRadius: theme.shape.borderRadius,
         },
         '&:last-of-type': {
-          borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
-          borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+          borderBottomLeftRadius: theme.shape.borderRadius,
+          borderBottomRightRadius: theme.shape.borderRadius,
         },
       }),
     },
@@ -63,8 +63,8 @@ export const surfacesCustomizations: Components<Theme> = {
           gap: 16,
           transition: 'all 100ms ease',
           backgroundColor: gray[50],
-          borderRadius: (theme.vars || theme).shape.borderRadius,
-          border: `1px solid ${(theme.vars || theme).palette.divider}`,
+          borderRadius: theme.shape.borderRadius,
+          border: `1px solid ${theme.palette.divider}`,
           boxShadow: 'none',
           ...theme.applyStyles('dark', {
             backgroundColor: gray[800],
@@ -75,7 +75,7 @@ export const surfacesCustomizations: Components<Theme> = {
                 variant: 'outlined',
               },
               style: {
-                border: `1px solid ${(theme.vars || theme).palette.divider}`,
+                border: `1px solid ${theme.palette.divider}`,
                 boxShadow: 'none',
                 background: 'hsl(0, 0%, 100%)',
                 ...theme.applyStyles('dark', {
diff --git a/src/theme/types.ts b/src/theme/types.ts
new file mode 100644
index 0000000..c379116
--- /dev/null
+++ b/src/theme/types.ts
@@ -0,0 +1,13 @@
+import React from 'react';
+
+enum Themes {
+  DARK = 'dark',
+  LIGHT = 'light',
+}
+
+type CustomThemeProviderProps = {
+  children: React.JSX.Element;
+};
+
+export type { CustomThemeProviderProps };
+export { Themes };
diff --git a/src/utils/insertIf/index.ts b/src/utils/insertIf/index.ts
deleted file mode 100644
index 785a433..0000000
--- a/src/utils/insertIf/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Helper function to enable the following syntax:
- *
- * [
- *   itemA,
- *   itemB,
- *   ...arrayInsertIf(condition, [conditionalItemC, conditionalItemD])
- * ]
- */
-function arrayInsertIf<T>(condition: unknown, items: T[]): T[] {
-  return condition ? items : [];
-}
-
-/**
- * Helper function to enable the following syntax:
- *
- * {
- *   a: 0,
- *   b: 1,
- *   ...objectInsertIf(someCondition, { conditionalItemC: 2, conditionalItemD: 3 })
- * }
- */
-function objectInsertIf<T>(condition: unknown, item: T): T | null {
-  return condition ? item : null;
-}
-
-export { arrayInsertIf, objectInsertIf };
diff --git a/src/utils/insertIf/insertIf.spec.ts b/src/utils/insertIf/insertIf.spec.ts
deleted file mode 100644
index 7560659..0000000
--- a/src/utils/insertIf/insertIf.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { arrayInsertIf, objectInsertIf } from './';
-import { expect, test } from 'vitest';
-
-test('arrayInsertIf: returns empty array if condition is false', () => {
-  expect(arrayInsertIf(false, [1, 2, 3])).toEqual([]);
-});
-
-test('arrayInsertIf: returns array if condition is true', () => {
-  expect(arrayInsertIf(true, [1, 2, 3])).toEqual([1, 2, 3]);
-});
-
-test('objectInsertIf: returns null if condition is false', () => {
-  expect(objectInsertIf(false, { a: 0, b: 1 })).toEqual(null);
-});
-
-test('objectInsertIf: returns object if condition is true', () => {
-  expect(objectInsertIf(true, { a: 0, b: 1 })).toEqual({ a: 0, b: 1 });
-});
diff --git a/tsconfig.json b/tsconfig.json
index 1f6be37..b1dced6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,11 +16,12 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "baseUrl": "./",
-    "types": ["vite-plugin-pwa/client"],
+    "types": ["vite-plugin-pwa/client", "react"],
     "paths": {
       "@/*": ["src/*"]
     }
   },
   "include": ["src"],
+  "exclude": ["node_modules"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }