diff --git a/.eslintignore b/.eslintignore
index fb79cfb2e0..6f0b5f0747 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -5,5 +5,3 @@ packages/theme/brand/**/*
 packages/react-old/**/*
 tsc-build/
 .storybook
-
-apps/theme/**
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 053b6d88d9..d65afb0778 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -35,6 +35,7 @@ module.exports = {
           './tsconfig.json',
           './packages/*/tsconfig.json',
           './tsconfig.node.json',
+          './apps/*/tsconfig.json'
         ],
       },
       rules: {
diff --git a/.stylelintignore b/.stylelintignore
index b6e9c08f6d..79e397faf0 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -1,4 +1,5 @@
 **/dist/**/*.css
 packages/theme/brand/**/*.css
 packages/css/dist/**/*.css
-apps/theme/**
+
+apps/theme/src/css/bootstrap-grid.css
diff --git a/apps/theme/src/app/components/Color/Color.module.css b/apps/theme/src/app/components/Color/Color.module.css
index 4bc8d0e938..836f1acc07 100644
--- a/apps/theme/src/app/components/Color/Color.module.css
+++ b/apps/theme/src/app/components/Color/Color.module.css
@@ -6,13 +6,13 @@
   justify-content: center;
   color: black;
   font-weight: 400;
-  border: 1px solid rgb(228, 228, 228);
+  border: 1px solid rgb(228 228 228);
   border-radius: 4px;
 }
 
 .box:hover {
   cursor: pointer;
-  border-color: #ffffff;
+  border-color: #fff;
   outline: 2px solid #535353;
   outline-offset: 1px;
 }
@@ -30,7 +30,7 @@
   height: 15px;
   width: 15px;
   border-radius: 50%;
-  border: 1px solid rgb(160, 160, 160);
+  border: 1px solid rgb(160 160 160);
 }
 
 .contrast {
diff --git a/apps/theme/src/app/components/ColorPicker/ColorPicker.module.css b/apps/theme/src/app/components/ColorPicker/ColorPicker.module.css
index b569a3ce85..0150073683 100644
--- a/apps/theme/src/app/components/ColorPicker/ColorPicker.module.css
+++ b/apps/theme/src/app/components/ColorPicker/ColorPicker.module.css
@@ -13,13 +13,13 @@
   width: 150px;
   padding-left: 12px;
   transition: 0.04s all;
-  border: 1px solid rgb(192, 192, 192);
+  border: 1px solid rgb(192 192 192);
   background-color: transparent;
 }
 
 .container:hover {
-  border: 1px solid rgb(61, 61, 61);
-  outline: 1px solid rgb(61, 61, 61);
+  border: 1px solid rgb(61 61 61);
+  outline: 1px solid rgb(61 61 61);
 }
 
 .color {
@@ -27,7 +27,7 @@
   width: 24px;
   background-color: #1e98f5;
   border-radius: 50%;
-  border: 1px solid rgb(206, 206, 206);
+  border: 1px solid rgb(206 206 206);
 }
 
 .input {
diff --git a/apps/theme/src/app/components/Group/Group.module.css b/apps/theme/src/app/components/Group/Group.module.css
index 850ea7497f..50f11483a1 100644
--- a/apps/theme/src/app/components/Group/Group.module.css
+++ b/apps/theme/src/app/components/Group/Group.module.css
@@ -1,7 +1,7 @@
 .colors {
   display: flex;
   gap: 8px;
-  border-radius: 0px;
+  border-radius: 0;
 }
 
 .colorsFeatured {
@@ -9,7 +9,7 @@
 }
 
 .header {
-  border-bottom: 1px solid #cccccc;
+  border-bottom: 1px solid #ccc;
   margin-bottom: 16px;
   padding-bottom: 16px;
   text-align: center;
diff --git a/apps/theme/src/app/components/Header/Header.module.css b/apps/theme/src/app/components/Header/Header.module.css
index 570233b31d..9b09930203 100644
--- a/apps/theme/src/app/components/Header/Header.module.css
+++ b/apps/theme/src/app/components/Header/Header.module.css
@@ -18,7 +18,7 @@
 }
 
 .links a:hover {
-  border-color: rgb(212, 212, 212);
+  border-color: rgb(212 212 212);
 }
 
 .container {
@@ -29,7 +29,7 @@
 }
 
 .active {
-  border-color: rgb(185, 185, 185) !important;
+  border-color: rgb(185 185 185) !important;
   font-weight: 500;
 }
 
diff --git a/apps/theme/src/app/components/Header/Header.tsx b/apps/theme/src/app/components/Header/Header.tsx
index a87197f0e6..40db66cb2b 100644
--- a/apps/theme/src/app/components/Header/Header.tsx
+++ b/apps/theme/src/app/components/Header/Header.tsx
@@ -1,8 +1,10 @@
 import { Container } from 'react-bootstrap';
 import Link from 'next/link';
-import classes from './Header.module.css';
 import { usePathname } from 'next/navigation';
 
+import classes from './Header.module.css';
+
+
 export const Header = () => {
   const currentPath = usePathname();
   return (
diff --git a/apps/theme/src/app/components/PreviewBox/PreviewBox.module.css b/apps/theme/src/app/components/PreviewBox/PreviewBox.module.css
index 12ccae3803..be8cd40c55 100644
--- a/apps/theme/src/app/components/PreviewBox/PreviewBox.module.css
+++ b/apps/theme/src/app/components/PreviewBox/PreviewBox.module.css
@@ -1,13 +1,13 @@
 .box {
-  border: 1px solid rgb(235, 235, 235);
+  border: 1px solid rgb(235 235 235);
+
   /* background-color: var(--fds-semantic-background-default); */
   width: 100%;
-
   padding: 32px;
   border-radius: 8px;
   display: flex;
   gap: 32px;
-  box-shadow: 0px 0px 24px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 24px 4px rgb(0 0 0 / 0.1);
 }
 
 .input {
diff --git a/apps/theme/src/app/components/Previews/Components/Components.module.css b/apps/theme/src/app/components/Previews/Components/Components.module.css
index 0ad5defb56..c88e0809f1 100644
--- a/apps/theme/src/app/components/Previews/Components/Components.module.css
+++ b/apps/theme/src/app/components/Previews/Components/Components.module.css
@@ -4,14 +4,13 @@
   width: 100%;
   padding: 24px;
   display: flex;
-
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   grid-template-areas:
-    "checkbox checkbox checkbox user user user table table table table table table"
-    "help help help help help help radio radio radio tag tag tag"
-    "tabs tabs tabs tabs test test test faq faq faq faq faq"
-    "footerOne footerOne footerOne footerOne footerTwo footerTwo footerTwo footerTwo footerThree footerThree footerThree footerThree";
+    'checkbox checkbox checkbox user user user table table table table table table'
+    'help help help help help help radio radio radio tag tag tag'
+    'tabs tabs tabs tabs test test test faq faq faq faq faq'
+    'footerOne footerOne footerOne footerOne footerTwo footerTwo footerTwo footerTwo footerThree footerThree footerThree footerThree';
   column-gap: 24px;
   row-gap: 24px;
 }
@@ -64,6 +63,17 @@
   margin-top: -7px;
 }
 
+.tabs {
+  grid-area: tabs;
+  display: flex;
+  gap: 16px;
+  flex-direction: column;
+}
+
+.tabs button {
+  min-height: 40px;
+}
+
 .tableContainer {
   grid-area: table;
 }
@@ -94,7 +104,7 @@
   height: 36px;
   width: 36px;
   border-radius: 50%;
-  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0 4px rgb(0 0 0 / 0.25);
 }
 
 .tableAction {
@@ -139,9 +149,11 @@
 .helpFirst {
   border-color: var(--fds-semantic-border-first);
 }
+
 .helpFirstTitle {
   color: var(--brandOne12);
 }
+
 .helpFirstDesc {
   color: var(--brandOne12);
 }
@@ -149,18 +161,23 @@
 .helpSecond {
   border-color: var(--fds-semantic-border-second);
 }
+
 .helpSecondTitle {
   color: var(--brandTwo12);
 }
+
 .helpSecondDesc {
   color: var(--brandTwo12);
 }
+
 .helpThird {
   border-color: var(--fds-semantic-border-third);
 }
+
 .helpThirdTitle {
   color: var(--brandThree12);
 }
+
 .helpThirdDesc {
   color: var(--brandThree12);
 }
@@ -203,17 +220,6 @@
   margin-top: 16px;
 }
 
-.tabs {
-  grid-area: tabs;
-  display: flex;
-  gap: 16px;
-  flex-direction: column;
-}
-
-.tabs button {
-  min-height: 40px;
-}
-
 .faq {
   grid-area: faq;
 }
diff --git a/apps/theme/src/app/components/Previews/Dashboard/Dashboard.module.css b/apps/theme/src/app/components/Previews/Dashboard/Dashboard.module.css
index 53875727a4..59fa92ccd1 100644
--- a/apps/theme/src/app/components/Previews/Dashboard/Dashboard.module.css
+++ b/apps/theme/src/app/components/Previews/Dashboard/Dashboard.module.css
@@ -106,8 +106,8 @@
   row-gap: 24px;
   column-gap: 24px;
   grid-template-areas:
-    "colorcards colorcards colorcards colorcards colorcards colorcards colorcards colorcards users users users users"
-    "graph graph graph graph graph2 graph2 graph2 graph2 graph3 graph3 graph3 graph3";
+    'colorcards colorcards colorcards colorcards colorcards colorcards colorcards colorcards users users users users'
+    'graph graph graph graph graph2 graph2 graph2 graph2 graph3 graph3 graph3 graph3';
 }
 
 .users {
@@ -129,18 +129,20 @@
 
 .userName {
   font-size: 16px;
+  color: var(--grey13);
 }
 
 .user img {
   width: 44px;
   height: 44px;
   border-radius: 50%;
-  box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 1px 1px rgb(0 0 0 / 0.2);
 }
 
 .userTextContainer {
   display: flex;
   gap: 4px;
+  flex-direction: column;
 }
 
 .userRole {
@@ -159,15 +161,6 @@
   color: var(--brandThree12);
 }
 
-.userName {
-  color: var(--grey13);
-}
-
-.userTextContainer {
-  display: flex;
-  flex-direction: column;
-}
-
 .graph {
   grid-area: graph;
   height: 400px;
diff --git a/apps/theme/src/app/components/Previews/Landing/Landing.module.css b/apps/theme/src/app/components/Previews/Landing/Landing.module.css
index bcc964f4cb..fc12a06849 100644
--- a/apps/theme/src/app/components/Previews/Landing/Landing.module.css
+++ b/apps/theme/src/app/components/Previews/Landing/Landing.module.css
@@ -45,7 +45,7 @@
 .headerRight {
   display: flex;
   align-items: center;
-  gap: 0px;
+  gap: 0;
 }
 
 .headerMiddle {
diff --git a/apps/theme/src/app/components/Scale/Scale.tsx b/apps/theme/src/app/components/Scale/Scale.tsx
index e0f85b1a0f..52ee1e325c 100644
--- a/apps/theme/src/app/components/Scale/Scale.tsx
+++ b/apps/theme/src/app/components/Scale/Scale.tsx
@@ -1,9 +1,8 @@
 import { useEffect, useState } from 'react';
 import type { CssColor } from '@adobe/leonardo-contrast-colors';
 
-import { generateColorScale } from '@/utils/themeUtils';
-import type { modeType, ColorsType } from '@/types';
-
+import type { modeType, ColorsType } from '../../../types';
+import { generateColorScale } from '../../../utils/themeUtils';
 import { Group } from '../Group/Group';
 
 import classes from './Scale.module.css';
diff --git a/apps/theme/src/app/components/ScaleRow/ScaleRow.module.css b/apps/theme/src/app/components/ScaleRow/ScaleRow.module.css
index 9256e5aa07..96241b977a 100644
--- a/apps/theme/src/app/components/ScaleRow/ScaleRow.module.css
+++ b/apps/theme/src/app/components/ScaleRow/ScaleRow.module.css
@@ -22,7 +22,7 @@
 }
 
 .red {
-  color: rgb(212, 0, 0);
+  color: rgb(212 0 0);
 }
 
 .contrast {
@@ -37,7 +37,7 @@
   align-items: center;
   margin-top: 10px;
   margin-bottom: 16px;
-  border: 1px solid rgb(206, 206, 206);
+  border: 1px solid rgb(206 206 206);
   border-radius: 4px;
   font-size: 16px;
   position: relative;
@@ -56,6 +56,7 @@
   height: 150px;
   width: 170px;
   margin-top: 2px;
+
   /* padding: 20px; */
   margin-right: 48px;
   border-radius: 4px;
diff --git a/apps/theme/src/app/components/ScaleRow/ScaleRow.tsx b/apps/theme/src/app/components/ScaleRow/ScaleRow.tsx
index f8c344efa1..f2e7f955f2 100644
--- a/apps/theme/src/app/components/ScaleRow/ScaleRow.tsx
+++ b/apps/theme/src/app/components/ScaleRow/ScaleRow.tsx
@@ -5,9 +5,8 @@ import { CheckmarkIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { ChromePicker } from "react-color";
 import { useClickOutside } from "@react-awesome/use-click-outside";
 
-import type { modeType } from "@/types";
-import { getRatioFromLum, luminanceFromHex } from "@/utils/ColorUtils";
-
+import type { modeType } from "../../../types";
+import { getRatioFromLum, luminanceFromHex } from "../../../utils/ColorUtils";
 import { Scale } from "../Scale/Scale";
 
 import classes from "./ScaleRow.module.css";
@@ -20,7 +19,7 @@ type ScaleRowProps = {
 };
 
 export const ScaleRow = ({
-  color,
+  color = "#00000",
   showHeader,
   name,
   themeMode,
@@ -31,8 +30,8 @@ export const ScaleRow = ({
   const ref = useRef(null);
 
   useEffect(() => {
-    const lum1 = luminanceFromHex(color);
-    const lum2 = luminanceFromHex("#ffffff");
+    const lum1 = luminanceFromHex(color) as number;
+    const lum2 = luminanceFromHex("#ffffff") as number;
     const ratio = getRatioFromLum(lum1, lum2);
     setContrast(ratio);
     setActiveColor(color);
@@ -67,13 +66,14 @@ export const ScaleRow = ({
           >
             <ChromePicker
               onChange={(e) => {
-                const lum1 = luminanceFromHex(e.hex);
-                const lum2 = luminanceFromHex("#ffffff");
+                const lum1 = luminanceFromHex(e.hex as CssColor) as number;
+                const lum2 = luminanceFromHex("#ffffff") as number;
                 const ratio = getRatioFromLum(lum1, lum2);
                 setContrast(ratio);
-                setActiveColor(e.hex);
+                setActiveColor(e.hex as CssColor);
               }}
               color={activeColor}
+              /* @ts-expect-error Chromepicker has a width, but its not included in its types */
               width={250}
             />
           </div>
diff --git a/apps/theme/src/app/dev/page.module.css b/apps/theme/src/app/dev/page.module.css
index ff1b2743d5..f41fd27b46 100644
--- a/apps/theme/src/app/dev/page.module.css
+++ b/apps/theme/src/app/dev/page.module.css
@@ -14,7 +14,7 @@
 }
 
 .column {
-  background-color: #ff0000;
+  background-color: #f00;
   width: 33.33%;
   display: flex;
   flex-wrap: wrap;
@@ -22,7 +22,7 @@
   align-items: center;
   flex-basis: auto;
   padding: 20px;
-  border: 1px solid rgb(221, 221, 221);
+  border: 1px solid rgb(221 221 221);
   border-radius: 8px;
 }
 
@@ -87,7 +87,7 @@
 }
 
 .orange {
-  background-color: rgb(255, 153, 0);
+  background-color: rgb(255 153 0);
 }
 
 .red {
diff --git a/apps/theme/src/app/dev/page.tsx b/apps/theme/src/app/dev/page.tsx
index 4a99a0e585..820e6761b1 100644
--- a/apps/theme/src/app/dev/page.tsx
+++ b/apps/theme/src/app/dev/page.tsx
@@ -4,8 +4,8 @@ import { useEffect, useState } from "react";
 import type { CssColor } from "@adobe/leonardo-contrast-colors";
 import cn from "classnames";
 
-import { getContrastFromHex } from "@/utils/ColorUtils";
-import { generateColorScale } from "@/utils/themeUtils";
+import { getContrastFromHex } from "../../utils/ColorUtils";
+import { generateColorScale } from "../../utils/themeUtils";
 
 import classes from "./page.module.css";
 
@@ -41,11 +41,12 @@ const BaseRow = (color: CssColor) => {
     "light",
     "flat"
   ) as CssColor[];
-  const darkColors: CssColor[] = generateColorScale(
+  // Unused currently
+  /* const darkColors: CssColor[] = generateColorScale(
     color,
     "dark",
     "flat"
-  ) as CssColor[];
+  ) as CssColor[]; */
   return (
     <>
       <h2 className={classes.mainTitle}>Base color</h2>
@@ -190,12 +191,12 @@ export default function Dev() {
     "#000000",
   ]);
   useEffect(() => {
-    const lightScale = generateColorScale("#0062BA", "light", "flat");
-    const darkScale = generateColorScale("#0062BA", "dark", "flat");
-    const contrastScale = generateColorScale("#0062BA", "contrast", "flat");
-    setLightColors(lightScale as CssColor[]);
-    setDarkColors(darkScale as CssColor[]);
-    setContrastColors(contrastScale as CssColor[]);
+    const lightScale = generateColorScale("#0062BA", "light", "flat") as CssColor[];
+    const darkScale = generateColorScale("#0062BA", "dark", "flat") as CssColor[];
+    const contrastScale = generateColorScale("#0062BA", "contrast", "flat") as CssColor[];
+    setLightColors(lightScale);
+    setDarkColors(darkScale);
+    setContrastColors(contrastScale);
   }, []);
   return (
     <div className={classes.page}>
diff --git a/apps/theme/src/app/globals.css b/apps/theme/src/app/globals.css
index e9d26f279d..081289472e 100644
--- a/apps/theme/src/app/globals.css
+++ b/apps/theme/src/app/globals.css
@@ -24,11 +24,11 @@ body {
   left: 0;
   width: 100%;
   z-index: 999;
-  box-shadow: 0 2px 20px 0 rgb(0 0 0 / 25%);
-  background-color: #ffffff !important;
+  box-shadow: 0 2px 20px 0 rgb(0 0 0 / 0.25);
+  background-color: #fff !important;
   animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
-  padding-top: 0px;
-  padding-bottom: 0px;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 .is-sticky .ColorPicker_label__kYLHj {
diff --git a/apps/theme/src/app/page.module.css b/apps/theme/src/app/page.module.css
index 96f0702590..e1c1824d70 100644
--- a/apps/theme/src/app/page.module.css
+++ b/apps/theme/src/app/page.module.css
@@ -7,6 +7,7 @@
   margin-bottom: 100px;
   font-size: 18px;
 }
+
 .colors {
   display: flex;
 }
@@ -16,7 +17,7 @@
 }
 
 .swatchContainer {
-  border: 1px solid rgb(192, 192, 192);
+  border: 1px solid rgb(192 192 192);
   height: 260px;
   width: 495px;
   padding: 20px;
@@ -55,7 +56,7 @@
   align-items: end;
   justify-content: center;
   gap: 32px;
-  padding: 12px 80px 40px 80px;
+  padding: 12px 80px 40px;
   border-radius: 8px;
 }
 
@@ -87,11 +88,11 @@
 
 .toggle:hover {
   cursor: pointer;
-  background-color: rgb(218, 231, 255);
+  background-color: rgb(218 231 255);
 }
 
 .active {
-  background-color: rgb(216, 230, 255);
+  background-color: rgb(216 230 255);
 }
 
 .toggle img {
@@ -125,7 +126,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 48px 0 24px 0;
+  margin: 48px 0 24px;
 }
 
 .rows {
@@ -162,11 +163,11 @@
 
 .menuItem:hover {
   cursor: pointer;
-  background-color: rgb(225, 236, 255);
+  background-color: rgb(225 236 255);
 }
 
 .menuItemActive {
-  background-color: rgb(225, 236, 255);
+  background-color: rgb(225 236 255);
 }
 
 .menuItemDisabled,
@@ -177,12 +178,12 @@
 }
 
 .preview {
-  border: 1px solid rgb(235, 235, 235);
+  border: 1px solid rgb(235 235 235);
   width: 100%;
   border-radius: 12px;
   display: flex;
   gap: 32px;
-  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.09);
+  box-shadow: 0 0 20px 2px rgb(0 0 0 / 0.09);
 }
 
 .contrastSection {
@@ -195,11 +196,11 @@
 }
 
 .contrastSection svg {
-  color: rgb(201, 0, 0);
+  color: rgb(201 0 0);
 }
 
 .contrastSectionSuccess svg {
-  color: rgb(0, 153, 0);
+  color: rgb(0 153 0);
 }
 
 .pickers {
@@ -207,7 +208,7 @@
   align-items: flex-end;
   justify-content: center;
   gap: 32px;
-  padding: 12px 0 12px 0;
+  padding: 12px 0;
 }
 
 .pickersContainer {
@@ -219,5 +220,5 @@
   display: flex;
   align-items: center;
   font-size: 16px;
-  color: rgb(80, 80, 80);
+  color: rgb(80 80 80);
 }
diff --git a/apps/theme/src/app/page.tsx b/apps/theme/src/app/page.tsx
index 0e1aec7746..be4f307395 100644
--- a/apps/theme/src/app/page.tsx
+++ b/apps/theme/src/app/page.tsx
@@ -9,9 +9,9 @@ import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cn from "classnames";
 import { DropdownMenu } from "@digdir/designsystemet-react";
 
-import { mapTokens } from "@/utils/tokenMapping";
-import { generateColorScale, setContrastOneColor } from "@/utils/themeUtils";
-import type { modeType } from "@/types";
+import { mapTokens } from "../utils/tokenMapping";
+import { generateColorScale, setContrastOneColor } from "../utils/themeUtils";
+import type { modeType } from "../types";
 
 import { Landing } from "./components/Previews/Landing/Landing";
 import { Dashboard } from "./components/Previews/Dashboard/Dashboard";
@@ -51,9 +51,9 @@ export default function Home() {
   });
 
   const copyToClipboard = (color: CssColor, type: string) => {
-    const colorsFlat = generateColorScale(color, themeMode, "flat");
+    const colorsFlat = generateColorScale(color, themeMode, "flat") as CssColor[];
 
-    const obj = {};
+    const obj: { [key: string]: { [key: number]: object } } = {};
 
     for (let i = 0; i < colorsFlat.length; i++) {
       if (i === 0) {
@@ -63,11 +63,11 @@ export default function Home() {
     }
 
     const json = JSON.stringify(obj, null, "\t");
-    navigator.clipboard.writeText(json);
+    void navigator.clipboard.writeText(json);
   };
 
-  const isSticky = (e) => {
-    const header = document.querySelector(".pickers");
+  const isSticky = () => {
+    const header = document.querySelector(".pickers") as Element;
     const scrollTop = window.scrollY;
     scrollTop >= 250
       ? header.classList.add("is-sticky")
@@ -87,36 +87,36 @@ export default function Home() {
               <ColorPicker
                 label="Accent"
                 defaultColor="#0062BA"
-                onColorChanged={(e: any) => {
-                  setAccentColor(e);
+                onColorChanged={(e) => {
+                  setAccentColor(e as CssColor);
                 }}
               />
               <ColorPicker
                 label="Neutral"
                 defaultColor="#1E2B3C"
-                onColorChanged={(e: any) => {
-                  setGreyColor(e);
+                onColorChanged={(e) => {
+                  setGreyColor(e as CssColor);
                 }}
               />
               <ColorPicker
                 label="Brand 1"
                 defaultColor="#F45F63"
-                onColorChanged={(e: any) => {
-                  setBrandOneColor(e);
+                onColorChanged={(e) => {
+                  setBrandOneColor(e as CssColor);
                 }}
               />
               <ColorPicker
                 label="Brand 2"
                 defaultColor="#E5AA20"
-                onColorChanged={(e: any) => {
-                  setBrandTwoColor(e);
+                onColorChanged={(e) => {
+                  setBrandTwoColor(e as CssColor);
                 }}
               />
               <ColorPicker
                 label="Brand 3"
                 defaultColor="#1E98F5"
-                onColorChanged={(e: any) => {
-                  setBrandThreeColor(e);
+                onColorChanged={(e) => {
+                  setBrandThreeColor(e as CssColor);
                 }}
               />
               <div className={classes.dropdown}>
@@ -220,7 +220,14 @@ export default function Home() {
                 className={cn(classes.menuItem, {
                   [classes.menuItemActive]: previewMode === "components",
                 })}
+                role="button"
+                tabIndex={0}
                 onClick={() => setPreviewMode("components")}
+                onKeyDown={function (event) {
+                  if (event.key == " ") {
+                    setPreviewMode("components")
+                  }
+                }}
               >
                 Komponenter
               </div>
@@ -228,7 +235,14 @@ export default function Home() {
                 className={cn(classes.menuItem, {
                   [classes.menuItemActive]: previewMode === "dashboard",
                 })}
+                role="button"
+                tabIndex={0}
                 onClick={() => setPreviewMode("dashboard")}
+                onKeyDown={function (event) {
+                  if (event.key == " ") {
+                    setPreviewMode("dashboard");
+                  }
+                }}
               >
                 Dashboard
               </div>
@@ -302,6 +316,6 @@ export default function Home() {
           {/* <PreviewBox /> */}
         </Container>
       </main>
-    </div>
+    </div >
   );
 }
diff --git a/apps/theme/src/app/scale-list/page.module.css b/apps/theme/src/app/scale-list/page.module.css
index 2ade3a0814..b77cb370ca 100644
--- a/apps/theme/src/app/scale-list/page.module.css
+++ b/apps/theme/src/app/scale-list/page.module.css
@@ -6,6 +6,7 @@
   margin: 10px 25px;
   font-size: 18px;
 }
+
 .colors {
   display: flex;
 }
@@ -15,7 +16,7 @@
 }
 
 .swatchContainer {
-  border: 1px solid rgb(192, 192, 192);
+  border: 1px solid rgb(192 192 192);
   height: 260px;
   width: 495px;
   padding: 20px;
diff --git a/apps/theme/src/utils/ColorUtils.ts b/apps/theme/src/utils/ColorUtils.ts
index 2acc885aeb..691cbd136f 100644
--- a/apps/theme/src/utils/ColorUtils.ts
+++ b/apps/theme/src/utils/ColorUtils.ts
@@ -2,7 +2,7 @@ import type { CssColor } from "@adobe/leonardo-contrast-colors";
 import { Hsluv } from "hsluv";
 
 export const hexToCssHsl = (hex: string, valuesOnly = false) => {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) as Array<string>;
   let r = parseInt(result[1], 16);
   let g = parseInt(result[2], 16);
   let b = parseInt(result[3], 16);
@@ -10,7 +10,7 @@ export const hexToCssHsl = (hex: string, valuesOnly = false) => {
   (r /= 255), (g /= 255), (b /= 255);
   const max = Math.max(r, g, b),
     min = Math.min(r, g, b);
-  let h,
+  let h = 0,
     s,
     l = (max + min) / 2;
   if (max == min) {
@@ -44,26 +44,26 @@ export const hexToCssHsl = (hex: string, valuesOnly = false) => {
 
 export const hexToHSL = (H: string) => {
   // Convert hex to RGB first
-  let r = 0,
-    g = 0,
-    b = 0;
+  let r: string | number = 0,
+    g: string | number = 0,
+    b: string | number = 0;
   if (H.length == 4) {
-    r = "0x" + H[1] + H[1];
-    g = "0x" + H[2] + H[2];
-    b = "0x" + H[3] + H[3];
+    r = "0x" + H[1] + H[1] as unknown as number;
+    g = "0x" + H[2] + H[2] as unknown as number;
+    b = "0x" + H[3] + H[3] as unknown as number;
   } else if (H.length == 7) {
-    r = "0x" + H[1] + H[2];
-    g = "0x" + H[3] + H[4];
-    b = "0x" + H[5] + H[6];
+    r = "0x" + H[1] + H[2] as unknown as number;
+    g = "0x" + H[3] + H[4] as unknown as number;
+    b = "0x" + H[5] + H[6] as unknown as number;
   }
   // Then to HSL
   r /= 255;
   g /= 255;
   b /= 255;
-  let cmin = Math.min(r, g, b),
+  const cmin = Math.min(r, g, b),
     cmax = Math.max(r, g, b),
-    delta = cmax - cmin,
-    h = 0,
+    delta = cmax - cmin;
+  let h = 0,
     s = 0,
     l = 0;
 
@@ -92,12 +92,12 @@ export const HSLToHex = (h: number, s: number, l: number) => {
   s /= 100;
   l /= 100;
 
-  let c = (1 - Math.abs(2 * l - 1)) * s,
+  const c = (1 - Math.abs(2 * l - 1)) * s,
     x = c * (1 - Math.abs(((h / 60) % 2) - 1)),
-    m = l - c / 2,
-    r = 0,
-    g = 0,
-    b = 0;
+    m = l - c / 2;
+  let r: number | string = 0,
+    g: number | string = 0,
+    b: number | string = 0;
 
   if (0 <= h && h < 60) {
     r = c;
@@ -139,17 +139,17 @@ export const HSLToHex = (h: number, s: number, l: number) => {
 
 export const hexToRgb = (hex: string) => {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
+  hex = hex.replace(shorthandRegex, function (m: string, r: string, g: string, b: string) {
     return r + r + g + g + b + b;
   });
 
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result
     ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-      }
+      r: parseInt(result[1], 16),
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16),
+    }
     : null;
 };
 
@@ -161,7 +161,7 @@ export const luminanceFromRgb = (r: string, g: string, b: string) => {
   return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
 };
 
-export const luminanceFromHex = (hex: CssColor) => {
+export function luminanceFromHex(hex: CssColor) {
   const rgb = hexToRgb(hex);
   if (rgb) {
     return luminanceFromRgb(rgb.r.toString(), rgb.g.toString(), rgb.b.toString());
@@ -184,8 +184,8 @@ export const getContrastFromHex = (
   mainColor: CssColor,
   backgroundColor: CssColor
 ) => {
-  const lum1 = luminanceFromHex(mainColor);
-  const lum2 = luminanceFromHex(backgroundColor);
+  const lum1 = luminanceFromHex(mainColor) as number;
+  const lum2 = luminanceFromHex(backgroundColor) as number;
   return getRatioFromLum(lum1, lum2);
 };
 
@@ -199,9 +199,9 @@ export const getContrastFromLightness = (
   conv.hexToHsluv();
   conv.hsluv_l = lightness;
   conv.hsluvToHex();
-  const lightMainColor = conv.hex;
-  const lum1 = luminanceFromHex(lightMainColor);
-  const lum2 = luminanceFromHex(backgroundColor);
+  const lightMainColor = conv.hex as CssColor;
+  const lum1 = luminanceFromHex(lightMainColor) as number;
+  const lum2 = luminanceFromHex(backgroundColor) as number;
   const ratio = getRatioFromLum(lum1, lum2);
 
   return ratio;
diff --git a/apps/theme/tsconfig.json b/apps/theme/tsconfig.json
index 7b28589304..f2b96737c7 100644
--- a/apps/theme/tsconfig.json
+++ b/apps/theme/tsconfig.json
@@ -1,4 +1,5 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
@@ -12,15 +13,17 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "baseUrl": "./src",
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["../src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": ["next-env.d.ts", "./src", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"],
+  "rootDir": "./src"
 }
diff --git a/tsconfig.json b/tsconfig.json
index 4f451b7ff7..28e60a6495 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -47,6 +47,5 @@
     // globals for vitest
     "types": ["vitest/globals", "@testing-library/jest-dom"]
   },
-  "references": [{ "path": "./tsconfig.node.json" }],
-  "exclude": ["apps/theme"]
+  "references": [{ "path": "./tsconfig.node.json" }]
 }