diff --git a/components/landing-page.tsx b/components/landing-page.tsx
index 38a07fcd..6e0cc3e0 100644
--- a/components/landing-page.tsx
+++ b/components/landing-page.tsx
@@ -9,8 +9,6 @@ import darktechStack from "../src/svgs/dark-tech-stack.svg";
 import Products from "./products";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
-import systemDiagram from "../src/svgs/system-diagram.svg";
-import darkSystemDiagram from "../src/svgs/dark-system-diagram.svg";
 import coursesStack from "../src/svgs/courses-stack.svg";
 import darkCoursesStack from "../src/svgs/dark-course-stack.svg";
 import coursesStackSecond from "../src/svgs/courses-stack-second.svg";
@@ -22,7 +20,12 @@ import darkOpenAI from "../src/svgs/dark-openai.svg";
 import darkLangchain from "../src/svgs/dark-langchain.svg";
 import darkCrewai from "../src/svgs/dark-crew-ai.svg";
 import darkFastapi from "../src/svgs/dark-fast-api.svg";
-import { Arrow, vectorPointer, vectorSquare } from "src/icons/shared-icons";
+import {
+  Arrow,
+  SystemDiagram,
+  vectorPointer,
+  vectorSquare,
+} from "src/icons/shared-icons";
 import { useTheme } from "next-themes";
 import { ThemeMode } from "theme/fetch-ai-docs/helpers";
 
@@ -197,6 +200,7 @@ function LandingPage() {
   }) => {
     const router = useRouter();
     const [hover, setHover] = useState<boolean>(false);
+
     return (
       <div
         className={hover ? styles.hoverGuideBox : styles.guideBox}
@@ -267,11 +271,7 @@ function LandingPage() {
           make choices on their own for individuals, companies, and devices.
           Agents are the actors, and the heart of Fetch.ai ecosystem.
         </p>
-        <Image
-          className="nx-py-6 nx-w-full md:dark:nx-h-[586px] nx-h-auto dark:nx-bg-[#2C2E38] nx-my-10 dark:nx-rounded-lg"
-          src={theme === ThemeMode.Dark ? darkSystemDiagram : systemDiagram}
-          alt="system-diagram"
-        />
+        <SystemDiagram />
         <p className={styles.systemDescripton}>
           Agents are flexible problem solvers, capable of not just completing
           tasks but also tackling difficult issues across several domains.
diff --git a/components/logo.tsx b/components/logo.tsx
index c0ca9356..8bbf4692 100644
--- a/components/logo.tsx
+++ b/components/logo.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import fetchLogo from "../src/svgs/logo.svg";
 import darkfetchLogo from "../src/svgs/dark-fetch-logo.svg";
@@ -7,6 +7,14 @@ import { ThemeMode } from "theme/fetch-ai-docs/helpers";
 
 const Logo: React.FC = () => {
   const { resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
   return (
     <div className="nx-flex nx-gap-3 nx-items-baseline">
       <Image
diff --git a/components/mdx.tsx b/components/mdx.tsx
index 1fc409b7..6a3be3ae 100644
--- a/components/mdx.tsx
+++ b/components/mdx.tsx
@@ -310,6 +310,14 @@ export const ImageByTheme = ({
 }: ImageByThemePropsTypes) => {
   const { resolvedTheme } = useTheme();
   const src = resolvedTheme === ThemeMode.Dark ? darkSrc : lightSrc;
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
   return (
     <Image
       src={src}
diff --git a/src/icons/shared-icons.tsx b/src/icons/shared-icons.tsx
index b74bb73e..b295d29e 100644
--- a/src/icons/shared-icons.tsx
+++ b/src/icons/shared-icons.tsx
@@ -1,6 +1,9 @@
 import { useTheme } from "next-themes";
-import React, { useState } from "react";
+import Image from "next/image";
+import React, { useState, useEffect } from "react";
 import { ThemeMode } from "theme/fetch-ai-docs/helpers";
+import systemDiagram from "../svgs/system-diagram.svg";
+import darkSystemDiagram from "../svgs/dark-system-diagram.svg";
 
 export const Message = () => {
   return (
@@ -37,6 +40,14 @@ export const Play = () => {
 };
 
 export const DarkShortcut = () => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
   return (
     <svg
       width="43"
@@ -59,6 +70,14 @@ export const DarkShortcut = () => {
 };
 
 export const Shortcut = () => {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
   return (
     <svg
       width="43"
@@ -473,3 +492,26 @@ export const ListViewIcon = ({ viewType }: { viewType: string }) => {
     </svg>
   );
 };
+
+export const SystemDiagram = () => {
+  const { resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+  return (
+    <>
+      <Image
+        className="nx-py-6 nx-w-full md:dark:nx-h-[586px] nx-h-auto dark:nx-bg-[#2C2E38] nx-my-10 dark:nx-rounded-lg"
+        src={
+          resolvedTheme === ThemeMode.Dark ? darkSystemDiagram : systemDiagram
+        }
+        alt="system-diagram"
+      />
+    </>
+  );
+};
diff --git a/theme/fetch-ai-docs/index.tsx b/theme/fetch-ai-docs/index.tsx
index 0089c42c..09edad99 100644
--- a/theme/fetch-ai-docs/index.tsx
+++ b/theme/fetch-ai-docs/index.tsx
@@ -337,14 +337,6 @@ export default function Layout({
   children,
   ...context
 }: NextraThemeLayoutProps): ReactElement {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return null;
-  }
   return (
     <ThemeDocProvider>
       <ErrorBoundary FallbackComponent={Error404}>