diff --git a/.eslintrc.json b/.eslintrc.json
index c8c1a9d0..6e652b2c 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -7,33 +7,38 @@
     "plugin:react-hooks/recommended",
     "plugin:jsx-a11y/recommended"
   ],
-  "plugins": [
-    "@typescript-eslint",
-    "react",
-    "jsx-a11y"
-  ],
+  "plugins": ["@typescript-eslint", "react", "jsx-a11y"],
   "rules": {
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_" }
+    ],
     "@typescript-eslint/no-explicit-any": "error",
     "no-console": ["warn", { "allow": ["warn", "error"] }],
     "prefer-const": "error",
-    "jsx-a11y/anchor-is-valid": ["error", {
-      "components": ["Link"],
-      "specialLink": ["hrefLeft", "hrefRight"],
-      "aspects": ["invalidHref", "preferButton"]
-    }],
+    "jsx-a11y/anchor-is-valid": [
+      "error",
+      {
+        "components": ["Link"],
+        "specialLink": ["hrefLeft", "hrefRight"],
+        "aspects": ["invalidHref", "preferButton"]
+      }
+    ],
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
-    "jsx-a11y/label-has-associated-control": ["error", {
-      "labelComponents": [],
-      "labelAttributes": [],
-      "controlComponents": [],
-      "assert": "either",
-      "depth": 25
-    }]
+    "jsx-a11y/label-has-associated-control": [
+      "error",
+      {
+        "labelComponents": [],
+        "labelAttributes": [],
+        "controlComponents": [],
+        "assert": "either",
+        "depth": 25
+      }
+    ]
   },
   "settings": {
     "react": {
diff --git a/__tests__/UI/Tabs.test.tsx b/__tests__/UI/Tabs.test.tsx
index fe6a320a..c4f26e56 100644
--- a/__tests__/UI/Tabs.test.tsx
+++ b/__tests__/UI/Tabs.test.tsx
@@ -68,7 +68,7 @@ describe("Tabs", () => {
       const tabElement = screen.getByRole("tab", { name: tab.label });
       expect(tabElement).toHaveAttribute(
         "aria-selected",
-        index === 0 ? "true" : "false"
+        index === 0 ? "true" : "false",
       );
       expect(tabElement).toHaveAttribute("aria-controls", `tabpanel-${tab.id}`);
     });
diff --git a/src/components/ErrorBoundary/ErrorBoundary.tsx b/src/components/ErrorBoundary/ErrorBoundary.tsx
index 9c7a6ad3..55e58b84 100644
--- a/src/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -1,7 +1,10 @@
 "use client";
 
 import React, { ReactNode, ErrorInfo } from "react";
-import { ErrorBoundary as ReactErrorBoundary, FallbackProps } from "react-error-boundary";
+import {
+  ErrorBoundary as ReactErrorBoundary,
+  FallbackProps,
+} from "react-error-boundary";
 import Fallback from "./Fallback.component";
 
 interface ErrorBoundaryProps {
@@ -18,7 +21,10 @@ interface ErrorBoundaryProps {
  * @param {boolean} props.compact - Whether to show a compact error fallback (used in stories)
  * @returns {JSX.Element} A React component that catches errors in its child components
  */
-const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ children, compact = false }) => {
+const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({
+  children,
+  compact = false,
+}) => {
   const handleError = (error: Error, info: ErrorInfo) => {
     console.error("Uventet feil i Matrix:", error, info);
   };
@@ -28,10 +34,7 @@ const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ children, compact = false
   };
 
   return (
-    <ReactErrorBoundary
-      FallbackComponent={ErrorFallback}
-      onError={handleError}
-    >
+    <ReactErrorBoundary FallbackComponent={ErrorFallback} onError={handleError}>
       {children}
     </ReactErrorBoundary>
   );
diff --git a/src/components/ErrorBoundary/ErrorFallback.component.tsx b/src/components/ErrorBoundary/ErrorFallback.component.tsx
index 853e4dec..b892f6fb 100644
--- a/src/components/ErrorBoundary/ErrorFallback.component.tsx
+++ b/src/components/ErrorBoundary/ErrorFallback.component.tsx
@@ -16,7 +16,10 @@ interface ErrorFallbackProps {
  * @param {boolean} props.compact - Whether to show a compact version (used in stories)
  * @returns {JSX.Element} A React component displaying the error message and reload option
  */
-const ErrorFallback: React.FC<ErrorFallbackProps> = ({ error, compact = false }) => {
+const ErrorFallback: React.FC<ErrorFallbackProps> = ({
+  error,
+  compact = false,
+}) => {
   if (compact) {
     return (
       <div className="relative bg-gray-900 p-4 rounded-lg overflow-hidden">
diff --git a/src/components/ErrorBoundary/ErrorFallbackWrapper.component.tsx b/src/components/ErrorBoundary/ErrorFallbackWrapper.component.tsx
index d23689e0..d8dc1e28 100644
--- a/src/components/ErrorBoundary/ErrorFallbackWrapper.component.tsx
+++ b/src/components/ErrorBoundary/ErrorFallbackWrapper.component.tsx
@@ -13,8 +13,9 @@ interface ErrorFallbackWrapperProps {
  * @param {boolean} props.compact - Whether to show a compact version
  * @returns {JSX.Element} The wrapped ErrorFallback component
  */
-const ErrorFallbackWrapper: React.FC<ErrorFallbackWrapperProps> = ({ error, compact }) => (
-  <ErrorFallback error={error} compact={compact} />
-);
+const ErrorFallbackWrapper: React.FC<ErrorFallbackWrapperProps> = ({
+  error,
+  compact,
+}) => <ErrorFallback error={error} compact={compact} />;
 
 export default ErrorFallbackWrapper;
diff --git a/src/components/Layout/MobileMenu.component.tsx b/src/components/Layout/MobileMenu.component.tsx
index 282c7bc6..a273ff56 100644
--- a/src/components/Layout/MobileMenu.component.tsx
+++ b/src/components/Layout/MobileMenu.component.tsx
@@ -117,55 +117,53 @@ const MobileMenu = ({ links }: IMobileMenuProps) => {
                   },
                 }}
               >
-                {links.map(
-                  ({ title, name, href, externalLink }, index) => (
-                    <motion.li
-                      key={title}
-                      className="block p-4 text-xl text-white mx-auto text-center border-t border-b border-gray-600 border-solid shadow"
-                      data-cy="mobile-menu-item"
-                      custom={index}
-                      variants={itemVariants}
-                    >
-                      {externalLink ? (
-                        <a
-                          aria-label={name}
-                          href={href}
-                          target="_blank"
-                          rel="noreferrer"
-                          data-testid={`mobil-${name}`}
-                          className="flex w-full items-center justify-center px-2 py-2 hover:text-white transition font-semibold text-lg"
-                        >
+                {links.map(({ title, name, href, externalLink }, index) => (
+                  <motion.li
+                    key={title}
+                    className="block p-4 text-xl text-white mx-auto text-center border-t border-b border-gray-600 border-solid shadow"
+                    data-cy="mobile-menu-item"
+                    custom={index}
+                    variants={itemVariants}
+                  >
+                    {externalLink ? (
+                      <a
+                        aria-label={name}
+                        href={href}
+                        target="_blank"
+                        rel="noreferrer"
+                        data-testid={`mobil-${name}`}
+                        className="flex w-full items-center justify-center px-2 py-2 hover:text-white transition font-semibold text-lg"
+                      >
+                        {name}
+                      </a>
+                    ) : (
+                      <Link
+                        href={href}
+                        data-testid={`mobil-${name}`}
+                        prefetch={true}
+                        className={`flex w-full items-center justify-center px-2 py-2 hover:text-white transition font-semibold text-lg ${
+                          pathname === href ? "text-green-400" : ""
+                        }`}
+                      >
+                        <div className="glitch relative" data-text={name}>
                           {name}
-                        </a>
-                      ) : (
-                        <Link
-                          href={href}
-                          data-testid={`mobil-${name}`}
-                          prefetch={true}
-                          className={`flex w-full items-center justify-center px-2 py-2 hover:text-white transition font-semibold text-lg ${
-                            pathname === href ? "text-green-400" : ""
-                          }`}
-                        >
-                          <div className="glitch relative" data-text={name}>
-                            {name}
-                            <motion.span
-                              className={`absolute bottom-0 left-0 h-0.5 bg-current ${
-                                pathname === href ? "bg-green-400" : "bg-white"
-                              }`}
-                              initial={{
-                                width: pathname === href ? "100%" : "0%",
-                              }}
-                              animate={{
-                                width: pathname === href ? "100%" : "0%",
-                              }}
-                              transition={{ duration: 0.3 }}
-                            />
-                          </div>
-                        </Link>
-                      )}
-                    </motion.li>
-                  ),
-                )}
+                          <motion.span
+                            className={`absolute bottom-0 left-0 h-0.5 bg-current ${
+                              pathname === href ? "bg-green-400" : "bg-white"
+                            }`}
+                            initial={{
+                              width: pathname === href ? "100%" : "0%",
+                            }}
+                            animate={{
+                              width: pathname === href ? "100%" : "0%",
+                            }}
+                            transition={{ duration: 0.3 }}
+                          />
+                        </div>
+                      </Link>
+                    )}
+                  </motion.li>
+                ))}
               </motion.ul>
             </nav>
           </motion.div>
diff --git a/src/stories/components/Footer.stories.tsx b/src/stories/components/Footer.stories.tsx
index 79f1f8f1..c2c86b40 100644
--- a/src/stories/components/Footer.stories.tsx
+++ b/src/stories/components/Footer.stories.tsx
@@ -23,7 +23,7 @@ export const WithContent = () => (
 
 // Narrow viewport
 export const NarrowViewport = () => (
-  <div style={{ width: '320px' }}>
+  <div style={{ width: "320px" }}>
     <Footer />
   </div>
 );
diff --git a/src/stories/components/GenericForm.stories.tsx b/src/stories/components/GenericForm.stories.tsx
index 532a7d16..8681e0b9 100644
--- a/src/stories/components/GenericForm.stories.tsx
+++ b/src/stories/components/GenericForm.stories.tsx
@@ -26,10 +26,11 @@ const feedbackSchema = z.object({
   feedback: z.string().min(20, "Feedback must be at least 20 characters"),
 });
 
-type FormData = z.infer<typeof contactSchema> | 
-                z.infer<typeof subscribeSchema> | 
-                z.infer<typeof feedbackSchema> |
-                { email: string };
+type FormData =
+  | z.infer<typeof contactSchema>
+  | z.infer<typeof subscribeSchema>
+  | z.infer<typeof feedbackSchema>
+  | { email: string };
 
 // Example async submit handlers
 const mockSubmit = async (data: FormData) => {
diff --git a/src/stories/components/Hamburger.stories.tsx b/src/stories/components/Hamburger.stories.tsx
index b4e6b916..ba1cb435 100644
--- a/src/stories/components/Hamburger.stories.tsx
+++ b/src/stories/components/Hamburger.stories.tsx
@@ -24,13 +24,10 @@ export const XState = () => (
 // Interactive state
 export const Interactive = () => {
   const [isOpen, setIsOpen] = useState(false);
-  
+
   return (
     <div className="bg-gray-800 p-4">
-      <Hamburger 
-        onClick={() => setIsOpen(!isOpen)} 
-        animatetoX={isOpen}
-      />
+      <Hamburger onClick={() => setIsOpen(!isOpen)} animatetoX={isOpen} />
       <p className="text-white text-sm mt-4">
         Click the hamburger to toggle state
       </p>
@@ -41,13 +38,10 @@ export const Interactive = () => {
 // On dark background
 export const OnDarkBackground = () => {
   const [isOpen, setIsOpen] = useState(false);
-  
+
   return (
     <div className="bg-gray-900 p-4">
-      <Hamburger 
-        onClick={() => setIsOpen(!isOpen)} 
-        animatetoX={isOpen}
-      />
+      <Hamburger onClick={() => setIsOpen(!isOpen)} animatetoX={isOpen} />
     </div>
   );
 };
@@ -55,14 +49,11 @@ export const OnDarkBackground = () => {
 // On light background
 export const OnLightBackground = () => {
   const [isOpen, setIsOpen] = useState(false);
-  
+
   return (
     <div className="bg-gray-100 p-4">
       <div className="bg-gray-800 inline-block rounded">
-        <Hamburger 
-          onClick={() => setIsOpen(!isOpen)} 
-          animatetoX={isOpen}
-        />
+        <Hamburger onClick={() => setIsOpen(!isOpen)} animatetoX={isOpen} />
       </div>
     </div>
   );
diff --git a/src/stories/components/InputField.stories.tsx b/src/stories/components/InputField.stories.tsx
index bf2f7b9a..221c596a 100644
--- a/src/stories/components/InputField.stories.tsx
+++ b/src/stories/components/InputField.stories.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { Meta, Story } from "@ladle/react";
-import InputField, { InputProps } from "../../components/UI/InputField.component";
+import InputField, {
+  InputProps,
+} from "../../components/UI/InputField.component";
 import { useForm, FieldValues } from "react-hook-form";
 
 export default {
@@ -18,14 +20,16 @@ interface StoryFormValues extends FieldValues {
 }
 
 // Wrapper component to provide form context
-const InputFieldWrapper = <T extends FieldValues>(props: Omit<InputProps<T>, "register">) => {
+const InputFieldWrapper = <T extends FieldValues>(
+  props: Omit<InputProps<T>, "register">,
+) => {
   const { register } = useForm<T>();
   return <InputField {...props} register={register} />;
 };
 
-const Template: Story<Omit<InputProps<StoryFormValues>, "register">> = (args) => (
-  <InputFieldWrapper {...args} />
-);
+const Template: Story<Omit<InputProps<StoryFormValues>, "register">> = (
+  args,
+) => <InputFieldWrapper {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/src/stories/components/Matrix.stories.tsx b/src/stories/components/Matrix.stories.tsx
index 625e3998..2664903a 100644
--- a/src/stories/components/Matrix.stories.tsx
+++ b/src/stories/components/Matrix.stories.tsx
@@ -16,7 +16,8 @@ export default {
 
 // Client-side only wrapper component
 const ClientOnlyMatrix = (props: ReactMatrixAnimationProps) => {
-  const [Matrix, setMatrix] = useState<React.ComponentType<ReactMatrixAnimationProps> | null>(null);
+  const [Matrix, setMatrix] =
+    useState<React.ComponentType<ReactMatrixAnimationProps> | null>(null);
 
   useEffect(() => {
     import("../../components/Animations/Matrix.component").then((mod) => {
@@ -32,9 +33,7 @@ const ClientOnlyMatrix = (props: ReactMatrixAnimationProps) => {
 };
 
 const Container = ({ children }: { children: React.ReactNode }) => (
-  <div className="relative w-full h-[400px] bg-gray-900">
-    {children}
-  </div>
+  <div className="relative w-full h-[400px] bg-gray-900">{children}</div>
 );
 
 // Basic story with default props
diff --git a/src/stories/components/NavigationLink.stories.tsx b/src/stories/components/NavigationLink.stories.tsx
index 6eb5a89d..0780ed51 100644
--- a/src/stories/components/NavigationLink.stories.tsx
+++ b/src/stories/components/NavigationLink.stories.tsx
@@ -3,7 +3,15 @@ import { Meta } from "@ladle/react";
 import "../../app/glitch.css";
 
 // Mock NavigationLink component for stories
-const NavigationLink = ({ name, href, isActive }: { name: string; href: string; isActive: boolean }) => (
+const NavigationLink = ({
+  name,
+  href,
+  isActive,
+}: {
+  name: string;
+  href: string;
+  isActive: boolean;
+}) => (
   <div className="relative">
     <a
       href={href}
@@ -20,7 +28,7 @@ const NavigationLink = ({ name, href, isActive }: { name: string; href: string;
           }`}
           style={{
             width: isActive ? "100%" : "0%",
-            transition: "width 0.3s"
+            transition: "width 0.3s",
           }}
         />
       </div>
@@ -36,43 +44,23 @@ export default {
 // Default state
 export const Default = () => (
   <div className="bg-gray-800 p-4 w-48">
-    <NavigationLink
-      name="Home"
-      href="/"
-      isActive={false}
-    />
+    <NavigationLink name="Home" href="/" isActive={false} />
   </div>
 );
 
 // Active state
 export const Active = () => (
   <div className="bg-gray-800 p-4 w-48">
-    <NavigationLink
-      name="Home"
-      href="/"
-      isActive={true}
-    />
+    <NavigationLink name="Home" href="/" isActive={true} />
   </div>
 );
 
 // Multiple links
 export const MultipleLinks = () => (
   <div className="bg-gray-800 p-4 w-48 flex flex-col gap-2">
-    <NavigationLink
-      name="Home"
-      href="/"
-      isActive={true}
-    />
-    <NavigationLink
-      name="Projects"
-      href="/projects"
-      isActive={false}
-    />
-    <NavigationLink
-      name="Contact"
-      href="/contact"
-      isActive={false}
-    />
+    <NavigationLink name="Home" href="/" isActive={true} />
+    <NavigationLink name="Projects" href="/projects" isActive={false} />
+    <NavigationLink name="Contact" href="/contact" isActive={false} />
   </div>
 );
 
@@ -91,27 +79,15 @@ export const LongText = () => (
 export const OnDifferentBackgrounds = () => (
   <div className="space-y-4">
     <div className="bg-gray-900 p-4 w-48">
-      <NavigationLink
-        name="Dark Background"
-        href="/"
-        isActive={false}
-      />
+      <NavigationLink name="Dark Background" href="/" isActive={false} />
     </div>
-    
+
     <div className="bg-gray-800 p-4 w-48">
-      <NavigationLink
-        name="Medium Background"
-        href="/"
-        isActive={true}
-      />
+      <NavigationLink name="Medium Background" href="/" isActive={true} />
     </div>
-    
+
     <div className="bg-gray-700 p-4 w-48">
-      <NavigationLink
-        name="Light Background"
-        href="/"
-        isActive={false}
-      />
+      <NavigationLink name="Light Background" href="/" isActive={false} />
     </div>
   </div>
 );
@@ -120,21 +96,9 @@ export const OnDifferentBackgrounds = () => (
 export const HorizontalLayout = () => (
   <div className="bg-gray-800 p-4">
     <nav className="flex gap-4">
-      <NavigationLink
-        name="Home"
-        href="/"
-        isActive={true}
-      />
-      <NavigationLink
-        name="Projects"
-        href="/projects"
-        isActive={false}
-      />
-      <NavigationLink
-        name="Contact"
-        href="/contact"
-        isActive={false}
-      />
+      <NavigationLink name="Home" href="/" isActive={true} />
+      <NavigationLink name="Projects" href="/projects" isActive={false} />
+      <NavigationLink name="Contact" href="/contact" isActive={false} />
     </nav>
   </div>
 );
diff --git a/src/stories/components/SkipLink.stories.tsx b/src/stories/components/SkipLink.stories.tsx
index e840c118..5870e7dc 100644
--- a/src/stories/components/SkipLink.stories.tsx
+++ b/src/stories/components/SkipLink.stories.tsx
@@ -22,7 +22,9 @@ export const WithContext = () => (
     <main id="main-content" className="p-4">
       <h1>Main Content</h1>
       <p>This story demonstrates the SkipLink in context with a page layout.</p>
-      <p>Tab to focus on the SkipLink - it will appear at the top of the page.</p>
+      <p>
+        Tab to focus on the SkipLink - it will appear at the top of the page.
+      </p>
     </main>
   </div>
 );
@@ -34,8 +36,8 @@ export const Focused = () => (
       <SkipLink />
     </div>
     <p className="mt-20">
-      This story shows how the SkipLink appears when focused.
-      The skip link is permanently visible here for demonstration purposes.
+      This story shows how the SkipLink appears when focused. The skip link is
+      permanently visible here for demonstration purposes.
     </p>
   </div>
 );
diff --git a/src/stories/components/Tabs.stories.tsx b/src/stories/components/Tabs.stories.tsx
index 06ea76a6..80f5fd7a 100644
--- a/src/stories/components/Tabs.stories.tsx
+++ b/src/stories/components/Tabs.stories.tsx
@@ -40,7 +40,10 @@ const FormContent = () => {
       <h2 className="text-xl text-white mb-4">Form Content</h2>
       <form className="space-y-4">
         <div>
-          <label htmlFor={`${formId}-name`} className="block text-gray-300 mb-2">
+          <label
+            htmlFor={`${formId}-name`}
+            className="block text-gray-300 mb-2"
+          >
             Name
           </label>
           <input
@@ -51,7 +54,10 @@ const FormContent = () => {
           />
         </div>
         <div>
-          <label htmlFor={`${formId}-email`} className="block text-gray-300 mb-2">
+          <label
+            htmlFor={`${formId}-email`}
+            className="block text-gray-300 mb-2"
+          >
             Email
           </label>
           <input