diff --git a/components/ToggleText.tsx b/components/ToggleText.tsx
new file mode 100644
index 0000000..81faa7c
--- /dev/null
+++ b/components/ToggleText.tsx
@@ -0,0 +1,59 @@
+"use client";
+// ToggleText needs to be a client component - it's interactive
+
+import { useState } from "react";
+import { Col, Collapse, Container, Row } from "react-bootstrap";
+import { FaCircleChevronRight } from "react-icons/fa6";
+
+const ToggleText = ({
+  id,
+  title,
+  content,
+  textShownInitially = false,
+  chevronSize = "fs-2",
+}: {
+  id: string;
+  title: React.ReactNode;
+  content: React.ReactNode;
+  textShownInitially?: boolean;
+  chevronSize?: string;
+}) => {
+  const [visible, setVisible] = useState(textShownInitially);
+
+  return (
+    <Container className="my-4">
+      <Row>
+        <Col xs="auto" className="g-0">
+          <FaCircleChevronRight
+            onClick={() => setVisible(!visible)}
+            aria-controls={`collapse-${id}`}
+            aria-expanded={visible}
+            className={chevronSize}
+            style={{
+              transition: "transform 0.3s ease 0s",
+              transform: `rotate(${visible ? 90 : 0}deg)`,
+              cursor: "pointer",
+            }}
+          />
+        </Col>
+        <Col>
+          <Row
+            onClick={() => setVisible(!visible)}
+            aria-controls={`collapse-${id}`}
+            aria-expanded={visible}
+            style={{ cursor: "pointer" }}
+          >
+            {title}
+          </Row>
+          <Row>
+            <Collapse in={visible}>
+              <div id={`collapse-${id}`}>{content}</div>
+            </Collapse>
+          </Row>
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+export default ToggleText;
diff --git a/components/page_content/ToggleText.tsx b/components/page_content/ToggleText.tsx
deleted file mode 100644
index b46a602..0000000
--- a/components/page_content/ToggleText.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client";
-// ToggleText needs to be a client component - it's interactive
-
-import { ToggleTextStoryblok } from "@/storyblok/types/storyblok-types";
-import { storyblokEditable } from "@storyblok/react/rsc";
-import { render } from "storyblok-rich-text-react-renderer";
-import { useState } from "react";
-import { Col, Collapse, Container, Row } from "react-bootstrap";
-import { FaCircleChevronRight } from "react-icons/fa6";
-
-const ToggleText = ({ blok }: { blok: ToggleTextStoryblok }) => {
-  const [visible, setVisible] = useState(blok.text_shown_initially);
-
-  return (
-    <div {...storyblokEditable(blok)} className="my-4">
-      <Container>
-        <Row>
-          <Col xs="auto" className="g-0">
-            <FaCircleChevronRight
-              onClick={() => setVisible(!visible)}
-              aria-controls={`collapse-${blok._uid}`}
-              aria-expanded={visible}
-              className="fs-2"
-              style={{
-                transition: "transform 0.3s ease 0s",
-                transform: `rotate(${visible ? 90 : 0}deg)`,
-                cursor: "pointer",
-              }}
-            />
-          </Col>
-          <Col>
-            <Row
-              onClick={() => setVisible(!visible)}
-              aria-controls={`collapse-${blok._uid}`}
-              aria-expanded={visible}
-              style={{ cursor: "pointer" }}
-            >
-              <h2>{blok.title}</h2>
-            </Row>
-            <Row>
-              <Collapse in={visible}>
-                <div id={`collapse-${blok._uid}`}>{render(blok.text)}</div>
-              </Collapse>
-            </Row>
-          </Col>
-        </Row>
-      </Container>
-    </div>
-  );
-};
-
-export default ToggleText;
diff --git a/components/Page.tsx b/components/storybloks/Page.tsx
similarity index 94%
rename from components/Page.tsx
rename to components/storybloks/Page.tsx
index 2f5c32b..5f0be85 100644
--- a/components/Page.tsx
+++ b/components/storybloks/Page.tsx
@@ -1,5 +1,5 @@
 import { storyblokEditable, StoryblokComponent } from "@storyblok/react/rsc";
-import Header from "./Header";
+import Header from "@/components/Header";
 import { PageStoryblok } from "@/storyblok/types/storyblok-types";
 import { Container } from "react-bootstrap";
 
diff --git a/components/page_content/RichText.tsx b/components/storybloks/page_content/RichText.tsx
similarity index 100%
rename from components/page_content/RichText.tsx
rename to components/storybloks/page_content/RichText.tsx
diff --git a/components/storybloks/page_content/StoryblokToggleText.tsx b/components/storybloks/page_content/StoryblokToggleText.tsx
new file mode 100644
index 0000000..008ec10
--- /dev/null
+++ b/components/storybloks/page_content/StoryblokToggleText.tsx
@@ -0,0 +1,23 @@
+"use client";
+// ToggleText needs to be a client component - it's interactive
+
+import { ToggleTextStoryblok } from "@/storyblok/types/storyblok-types";
+import { storyblokEditable } from "@storyblok/react/rsc";
+import { render } from "storyblok-rich-text-react-renderer";
+import ToggleText from "@/components/ToggleText";
+
+const StoryblokToggleText = ({ blok }: { blok: ToggleTextStoryblok }) => {
+  return (
+    <div {...storyblokEditable(blok)} className="my-4">
+      <ToggleText
+        id={blok._uid}
+        title={<h2>{blok.title}</h2>}
+        content={render(blok.text)}
+        textShownInitially={blok.text_shown_initially}
+        chevronSize="fs-2"
+      />
+    </div>
+  );
+};
+
+export default StoryblokToggleText;
diff --git a/components/page_layout/OneColumnLayout.tsx b/components/storybloks/page_layout/OneColumnLayout.tsx
similarity index 100%
rename from components/page_layout/OneColumnLayout.tsx
rename to components/storybloks/page_layout/OneColumnLayout.tsx
diff --git a/components/page_layout/ThreeColumnLayout.tsx b/components/storybloks/page_layout/ThreeColumnLayout.tsx
similarity index 100%
rename from components/page_layout/ThreeColumnLayout.tsx
rename to components/storybloks/page_layout/ThreeColumnLayout.tsx
diff --git a/components/page_layout/TwoColumnLayout.tsx b/components/storybloks/page_layout/TwoColumnLayout.tsx
similarity index 100%
rename from components/page_layout/TwoColumnLayout.tsx
rename to components/storybloks/page_layout/TwoColumnLayout.tsx
diff --git a/storyblok/components/ComponentsMap.ts b/storyblok/components/ComponentsMap.ts
index 6197d02..eda4f3d 100644
--- a/storyblok/components/ComponentsMap.ts
+++ b/storyblok/components/ComponentsMap.ts
@@ -2,12 +2,12 @@ import { SbReactComponentsMap } from "@storyblok/react/rsc";
 
 import Footer from "@/components/footer/Footer";
 import FooterLink from "@/components/footer/FooterLink";
-import OneColumnLayout from "@/components/page_layout/OneColumnLayout";
-import TwoColumnLayout from "@/components/page_layout/TwoColumnLayout";
-import ThreeColumnLayout from "@/components/page_layout/ThreeColumnLayout";
-import RichText from "@/components/page_content/RichText";
-import Page from "@/components/Page";
-import ToggleText from "@/components/page_content/ToggleText";
+import OneColumnLayout from "@/components/storybloks/page_layout/OneColumnLayout";
+import TwoColumnLayout from "@/components/storybloks/page_layout/TwoColumnLayout";
+import ThreeColumnLayout from "@/components/storybloks/page_layout/ThreeColumnLayout";
+import RichText from "@/components/storybloks/page_content/RichText";
+import Page from "@/components/storybloks/Page";
+import StoryblokToggleText from "@/components/storybloks/page_content/StoryblokToggleText";
 import NavWithHamburger from "@/components/navigation/NavWithHamburger";
 
 export const ComponentsMap: SbReactComponentsMap = {
@@ -23,7 +23,7 @@ export const ComponentsMap: SbReactComponentsMap = {
   three_column_layout: ThreeColumnLayout,
   // Page content
   rich_text: RichText,
-  toggle_text: ToggleText,
+  toggle_text: StoryblokToggleText,
   // Generic page
   page: Page,
 };