diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/hero/HeroCube.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/hero/HeroCube.tsx
index d0eec5a793..71b9fd959a 100644
--- a/aksel.nav.no/website/components/layout/god-praksis-page/hero/HeroCube.tsx
+++ b/aksel.nav.no/website/components/layout/god-praksis-page/hero/HeroCube.tsx
@@ -1,7 +1,7 @@
 import cl from "clsx";
 
 type CubeProps = {
-  variant?: "light" | "dark" | "muted";
+  variant?: "light" | "dark";
 };
 
 function Cube({ variant = "light" }: CubeProps) {
@@ -12,7 +12,6 @@ function Cube({ variant = "light" }: CubeProps) {
         {
           "text-teal-300": variant === "light",
           "text-teal-400": variant === "dark",
-          "text-teal-50": variant === "muted",
         },
       )}
     >
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHero.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHero.tsx
index be35979f71..830ad1e782 100644
--- a/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHero.tsx
+++ b/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHero.tsx
@@ -1,17 +1,136 @@
-import { useMedia } from "@/hooks/useMedia";
+import cl from "clsx";
+import { CSSProperties, useCallback, useState } from "react";
+import { Box } from "@navikt/ds-react";
+import { useEscapeKeydown } from "@/hooks/useEscapeKeydown";
+import Cube from "@/layout/god-praksis-page/hero/HeroCube";
+import { HeroList } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroCardList";
+import { HeroIntro } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroIntro";
+import { HeroSelectButton } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroSelectButton";
 import { GpTemaT, HeroNavT } from "@/layout/god-praksis-page/interface";
-import { TemaHeroModal } from "./TemaHeroModal";
-import { TemaHeroStatic } from "./TemaHeroStatic";
+import styles from "../Hero.module.css";
 
-type GpHeroProps = { tema: GpTemaT | null } & HeroNavT;
+type GpTemaHeroProps = { tema: GpTemaT | null } & HeroNavT;
 
-function TemaHero(props: GpHeroProps) {
-  const hideModal = useMedia("screen and (min-width: 768px)");
+function TemaHero({ tema, heroNav }: GpTemaHeroProps) {
+  const [open, setOpen] = useState(false);
 
-  return hideModal ? (
-    <TemaHeroStatic {...props} />
-  ) : (
-    <TemaHeroModal {...props} />
+  const [boxHeight, setBoxHeight] = useState(0);
+  const [wrapperHeight, setWrapperHeight] = useState(0);
+  const [animationRef, setAnimationRef] = useState({ x: 0, y: 0 });
+
+  const [openDialogButton, setOpenDialogButton] = useState<HTMLElement | null>(
+    null,
+  );
+  const [closeDialogButton, setCloseDialogButton] =
+    useState<HTMLElement | null>(null);
+
+  const inlineStyles: CSSProperties = {
+    "--aksel-website-hero-selector-x": animationRef.x + "px",
+    "--aksel-website-hero-selector-y": animationRef.y + "px",
+  };
+
+  const handleOpen = (
+    e: React.MouseEvent<HTMLElement, globalThis.MouseEvent>,
+  ) => {
+    closeDialogButton?.focus();
+    const rect = e.currentTarget.getBoundingClientRect();
+
+    setAnimationRef({
+      x: e.currentTarget.offsetLeft + rect.width / 2,
+      y: e.currentTarget.offsetTop + rect.height / 2,
+    });
+    setOpen(true);
+  };
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    openDialogButton?.focus();
+  }, [openDialogButton]);
+
+  useEscapeKeydown(handleClose, [handleClose]);
+
+  /**
+   * Tries to equal height for both wrapper and absolute-element
+   * by increasing the margin-bottom of the wrapper
+   */
+  const getMargin = () => {
+    if (!open) return 0;
+    const height = boxHeight ? boxHeight - wrapperHeight : 0;
+    if (height > 0) return height;
+    return 0;
+  };
+
+  return (
+    <Box
+      background="surface-alt-3-subtle"
+      borderRadius="large"
+      paddingInline={{ xs: "4", lg: "10" }}
+      paddingBlock="10 6"
+      className={cl(
+        "relative ring-1 ring-teal-400 transition-[margin] duration-500",
+        styles.heroGradient,
+      )}
+      style={{
+        marginBottom: getMargin(),
+        transitionTimingFunction: open
+          ? "cubic-bezier(0.3, 0, 0.15, 1)"
+          : "cubic-bezier(0, 0.3, 0.15, 1)",
+      }}
+      ref={(el) => {
+        setWrapperHeight(el?.getBoundingClientRect().height || 0);
+      }}
+    >
+      <Cube />
+      <HeroSelectButton
+        onClick={handleOpen}
+        expanded={open}
+        ref={setOpenDialogButton}
+        hidden={open}
+      />
+      <HeroIntro
+        title={tema?.title}
+        description={tema?.description}
+        hidden={open}
+        image={tema?.image}
+      />
+
+      <Box
+        borderRadius="large"
+        paddingInline={{ xs: "4", lg: "10" }}
+        paddingBlock="10 6"
+        className={cl(
+          "absolute inset-0 z-20 overflow-clip ring-1 ring-teal-500",
+          styles.heroSelector,
+          styles.heroGradientOpen,
+          {
+            hidden: !open,
+          },
+        )}
+        shadow="medium"
+        style={inlineStyles}
+        role="dialog"
+        aria-labelledby="tema-selector-title"
+        aria-modal="false"
+        ref={(el) => {
+          setBoxHeight(el?.getBoundingClientRect().height || 0);
+        }}
+      >
+        <Cube variant="dark" />
+
+        <HeroSelectButton
+          onClick={handleClose}
+          expanded={true}
+          hidden={false}
+          ref={setCloseDialogButton}
+        />
+
+        <HeroList
+          currentSlug={tema?.slug}
+          heroNav={heroNav}
+          setOpen={setOpen}
+        />
+      </Box>
+    </Box>
   );
 }
 
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroModal.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroModal.tsx
deleted file mode 100644
index 75c0f28173..0000000000
--- a/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroModal.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import cl from "clsx";
-import { useState } from "react";
-import { Box, Heading, Modal } from "@navikt/ds-react";
-import Cube from "@/layout/god-praksis-page/hero/HeroCube";
-import { HeroList } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroCardList";
-import { HeroIntro } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroIntro";
-import { HeroSelectButton } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroSelectButton";
-import { GpTemaT, HeroNavT } from "@/layout/god-praksis-page/interface";
-import styles from "../Hero.module.css";
-
-type GpTemaHeroModalProps = { tema: GpTemaT | null } & HeroNavT;
-
-export function TemaHeroModal({ tema, heroNav }: GpTemaHeroModalProps) {
-  const [open, setOpen] = useState(false);
-  return (
-    <Box
-      borderRadius="large"
-      paddingInline={{ xs: "4", lg: "10" }}
-      paddingBlock="10 6"
-      className={cl(
-        "relative ring-1 ring-teal-400 transition-[height]",
-        styles.heroGradient,
-      )}
-    >
-      <Cube />
-
-      <HeroSelectButton onClick={() => setOpen(true)} expanded={open} />
-      <HeroIntro title={tema?.title} description={tema?.description} />
-
-      <Modal
-        open={open}
-        onClose={() => setOpen(false)}
-        className="bg-surface-subtle"
-        width="small"
-        aria-label="Velg tema"
-      >
-        <Cube variant="muted" />
-        <Modal.Header closeButton className="z-10">
-          <Heading level="1" size="medium">
-            Tema
-          </Heading>
-        </Modal.Header>
-        <Box paddingInline="8" paddingBlock="0 6">
-          <HeroList
-            currentSlug={tema?.slug}
-            heroNav={heroNav}
-            setOpen={setOpen}
-          />
-        </Box>
-      </Modal>
-    </Box>
-  );
-}
diff --git a/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroStatic.tsx b/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroStatic.tsx
deleted file mode 100644
index f995866cb1..0000000000
--- a/aksel.nav.no/website/components/layout/god-praksis-page/hero/tema-hero/TemaHeroStatic.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import cl from "clsx";
-import { CSSProperties, useCallback, useState } from "react";
-import { Box } from "@navikt/ds-react";
-import { useEscapeKeydown } from "@/hooks/useEscapeKeydown";
-import Cube from "@/layout/god-praksis-page/hero/HeroCube";
-import { HeroList } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroCardList";
-import { HeroIntro } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroIntro";
-import { HeroSelectButton } from "@/layout/god-praksis-page/hero/tema-hero/parts/HeroSelectButton";
-import { GpTemaT, HeroNavT } from "@/layout/god-praksis-page/interface";
-import styles from "../Hero.module.css";
-
-type GpTemaHeroStaticProps = { tema: GpTemaT | null } & HeroNavT;
-
-export function TemaHeroStatic({ tema, heroNav }: GpTemaHeroStaticProps) {
-  const [open, setOpen] = useState(false);
-
-  const [boxHeight, setBoxHeight] = useState(0);
-  const [wrapperHeight, setWrapperHeight] = useState(0);
-  const [animationRef, setAnimationRef] = useState({ x: 0, y: 0 });
-
-  const [openDialogButton, setOpenDialogButton] = useState<HTMLElement | null>(
-    null,
-  );
-  const [closeDialogButton, setCloseDialogButton] =
-    useState<HTMLElement | null>(null);
-
-  const inlineStyles: CSSProperties = {
-    "--aksel-website-hero-selector-x": animationRef.x + "px",
-    "--aksel-website-hero-selector-y": animationRef.y + "px",
-  };
-
-  const handleOpen = (
-    e: React.MouseEvent<HTMLElement, globalThis.MouseEvent>,
-  ) => {
-    closeDialogButton?.focus();
-    const rect = e.currentTarget.getBoundingClientRect();
-
-    setAnimationRef({
-      x: e.currentTarget.offsetLeft + rect.width / 2,
-      y: e.currentTarget.offsetTop + rect.height / 2,
-    });
-    setOpen(true);
-  };
-
-  const handleClose = useCallback(() => {
-    setOpen(false);
-    openDialogButton?.focus();
-  }, [openDialogButton]);
-
-  useEscapeKeydown(handleClose, [handleClose]);
-
-  /**
-   * Tries to equal height for both wrapper and absolute-element
-   * by increasing the margin-bottom of the wrapper
-   */
-  const getMargin = () => {
-    if (!open) return 0;
-    const height = boxHeight ? boxHeight - wrapperHeight : 0;
-    if (height > 0) return height;
-    return 0;
-  };
-
-  return (
-    <Box
-      background="surface-alt-3-subtle"
-      borderRadius="large"
-      paddingInline={{ xs: "4", lg: "10" }}
-      paddingBlock="10 6"
-      className={cl(
-        "relative ring-1 ring-teal-400 transition-[margin] duration-500",
-        styles.heroGradient,
-      )}
-      style={{
-        marginBottom: getMargin(),
-        transitionTimingFunction: open
-          ? "cubic-bezier(0.3, 0, 0.15, 1)"
-          : "cubic-bezier(0, 0.3, 0.15, 1)",
-      }}
-      ref={(el) => {
-        setWrapperHeight(el?.getBoundingClientRect().height || 0);
-      }}
-    >
-      <Cube />
-      <HeroSelectButton
-        onClick={handleOpen}
-        expanded={open}
-        ref={setOpenDialogButton}
-        hidden={open}
-      />
-      <HeroIntro
-        title={tema?.title}
-        description={tema?.description}
-        hidden={open}
-        image={tema?.image}
-      />
-
-      <Box
-        borderRadius="large"
-        paddingInline={{ xs: "4", lg: "10" }}
-        paddingBlock="10 6"
-        className={cl(
-          "absolute inset-0 z-20 overflow-clip ring-1 ring-teal-500",
-          styles.heroSelector,
-          styles.heroGradientOpen,
-          {
-            hidden: !open,
-          },
-        )}
-        shadow="medium"
-        style={inlineStyles}
-        role="dialog"
-        aria-labelledby="tema-selector-title"
-        aria-modal="false"
-        ref={(el) => {
-          setBoxHeight(el?.getBoundingClientRect().height || 0);
-        }}
-      >
-        <Cube variant="dark" />
-
-        <HeroSelectButton
-          onClick={handleClose}
-          expanded={true}
-          hidden={false}
-          ref={setCloseDialogButton}
-        />
-
-        <HeroList
-          currentSlug={tema?.slug}
-          heroNav={heroNav}
-          setOpen={setOpen}
-        />
-      </Box>
-    </Box>
-  );
-}