diff --git a/docs/CMakeLists.txt b/docs/CMakeLists.txt
index 6037cf7c5..2bbf52af8 100644
--- a/docs/CMakeLists.txt
+++ b/docs/CMakeLists.txt
@@ -39,9 +39,6 @@ execute_process(
   OUTPUT_STRIP_TRAILING_WHITESPACE
 )
 
-set(STORYBOOK_DOCS "${DOCUMENTATION_OUT_DIR}/_storybook")
-set(STORY_OUTPUT ${CMAKE_BINARY_DIR}/stories/marketing)
-file(GLOB STORY_FILES "${CMAKE_SOURCE_DIR}/stories/*.*")
 add_custom_command(
   OUTPUT ${DOCUMENTATION_DIST} ${CMAKE_CURRENT_SOURCE_DIR}/.next ${CMAKE_CURRENT_SOURCE_DIR}/out
   BYPRODUCTS ${DOCUMENTATION_DIST} ${CMAKE_CURRENT_SOURCE_DIR}/.next ${CMAKE_CURRENT_SOURCE_DIR}/out
@@ -54,9 +51,6 @@ add_custom_command(
   COMMAND ${NODE_EXECUTABLE} ${DOCS_SRC_DIR}/intl-temp.js ${CMAKE_CURRENT_SOURCE_DIR}/out
   # This fixes an issue with github pages not liking underscore prefixed directories.
   COMMAND ${CMAKE_COMMAND} -E touch ${DOCUMENTATION_OUT_DIR}/.nojekyll
-  COMMAND ${CMAKE_COMMAND} -E make_directory ${STORYBOOK_DOCS}
-  COMMAND ${CMAKE_COMMAND} -E copy_directory ${STORY_OUTPUT}/ ${STORYBOOK_DOCS}
-  COMMAND ${CMAKE_COMMAND} -E copy ${STORY_OUTPUT}/mockServiceWorker.js ${CMAKE_SOURCE_DIR}/docs/out/mockServiceWorker.js
   COMMENT "Building monetr.app documentation and website"
   WORKING_DIRECTORY ${DOCS_SRC_DIR}
   DEPENDS
@@ -65,8 +59,6 @@ add_custom_command(
     ${ALL_DOCS_FILES}
     ${PUBLIC_FILES}
     ${DOCS_CONFIG_FILES}
-    ${STORY_FILES}
-    build.stories.marketing
 )
 
 add_custom_target(
diff --git a/docs/src/assets/screenshot.png b/docs/src/assets/screenshot.png
new file mode 100644
index 000000000..fe8960852
Binary files /dev/null and b/docs/src/assets/screenshot.png differ
diff --git a/docs/src/components/InterfaceExample.tsx b/docs/src/components/InterfaceExample.tsx
index 44c532010..1a34e09de 100644
--- a/docs/src/components/InterfaceExample.tsx
+++ b/docs/src/components/InterfaceExample.tsx
@@ -1,37 +1,44 @@
 'use client';
 
-import React, { useCallback, useEffect, useRef } from 'react';
+import React from 'react';
+import Image from 'next/image';
 
-export default function InterfaceExample(): JSX.Element {
-  const ref = useRef<HTMLIFrameElement>(null);
-
-  const onLoad = useCallback(() => {
-    ref.current?.classList.remove('opacity-0');
-    ref.current?.classList.remove('scale-90');
-    ref.current?.classList.add('opacity-90');
-    ref.current?.classList.add('scale-100');
-  }, []);;
-
-  useEffect(() => {
-    if (!ref.current) {
-      return undefined;
-    }
+import Screenshot from '@monetr/docs/assets/screenshot.png';
 
-    const current = ref.current;
-    ref.current.addEventListener('load', onLoad);
-
-    return () => {
-      current.removeEventListener('load', onLoad);
-    };
-  });
+export default function InterfaceExample(): JSX.Element {
+  // const ref = useRef<HTMLImageElement>(null);
+  //
+  // const onLoad = useCallback(() => {
+  //   ref.current?.classList.remove('opacity-0');
+  //   ref.current?.classList.remove('scale-90');
+  //   ref.current?.classList.add('opacity-90');
+  //   ref.current?.classList.add('scale-100');
+  // }, []);;
+  //
+  // useEffect(() => {
+  //   if (!ref.current) {
+  //     return undefined;
+  //   }
+  //
+  // });
 
   return (
-    <iframe
-      ref={ ref }
+    <Image 
       title='monetr interface'
+      alt='Screenshot of the monetr interface'
       loading='lazy'
-      className='w-full h-full translate-x-0 translate-y-0 scale-90 delay-150 duration-500 ease-in-out rounded-2xl mt-8 shadow-2xl z-10 backdrop-blur-md bg-black/90 transition-all opacity-0 pointer-events-none select-none max-w-[1280px] max-h-[720px] aspect-video-vertical md:aspect-video'
-      src='/_storybook/iframe.html?viewMode=story&id=new-ui--transactions&shortcuts=false&singleStory=true&args='
+      className='w-full h-full translate-x-0 translate-y-0 scale-100 delay-150 duration-500 ease-in-out rounded-2xl mt-8 shadow-2xl z-10 backdrop-blur-md bg-black/90 transition-all opacity-90 pointer-events-none select-none max-w-[1280px] max-h-[720px] aspect-video-vertical md:aspect-video'
+      src={ Screenshot }
     />
   );
+
+  // return (
+  //   <iframe
+  //     ref={ ref }
+  //     title='monetr interface'
+  //     loading='lazy'
+  //     className='w-full h-full translate-x-0 translate-y-0 scale-90 delay-150 duration-500 ease-in-out rounded-2xl mt-8 shadow-2xl z-10 backdrop-blur-md bg-black/90 transition-all opacity-0 pointer-events-none select-none max-w-[1280px] max-h-[720px] aspect-video-vertical md:aspect-video'
+  //     src='/_storybook/iframe.html?viewMode=story&id=new-ui--transactions&shortcuts=false&singleStory=true&args='
+  //   />
+  // );
 }