diff --git a/web/next-example/public/Yoopta_Intro.mp4 b/web/next-example/public/yoopta/Yoopta_Intro.mp4
similarity index 100%
rename from web/next-example/public/Yoopta_Intro.mp4
rename to web/next-example/public/yoopta/Yoopta_Intro.mp4
diff --git a/web/next-example/public/yoopta/ph/chat.png b/web/next-example/public/yoopta/ph/chat.png
new file mode 100644
index 000000000..7679086bb
Binary files /dev/null and b/web/next-example/public/yoopta/ph/chat.png differ
diff --git a/web/next-example/public/yoopta/ph/custom plugins.mp4 b/web/next-example/public/yoopta/ph/custom plugins.mp4
new file mode 100644
index 000000000..2cf667003
Binary files /dev/null and b/web/next-example/public/yoopta/ph/custom plugins.mp4 differ
diff --git a/web/next-example/public/yoopta/ph/md_exports.mp4 b/web/next-example/public/yoopta/ph/md_exports.mp4
new file mode 100644
index 000000000..2f4e39112
Binary files /dev/null and b/web/next-example/public/yoopta/ph/md_exports.mp4 differ
diff --git a/web/next-example/public/yoopta/ph/media plugins.mp4 b/web/next-example/public/yoopta/ph/media plugins.mp4
new file mode 100644
index 000000000..62be2b8ec
Binary files /dev/null and b/web/next-example/public/yoopta/ph/media plugins.mp4 differ
diff --git a/web/next-example/public/yoopta/ph/media_image.png b/web/next-example/public/yoopta/ph/media_image.png
new file mode 100644
index 000000000..3605b8e57
Binary files /dev/null and b/web/next-example/public/yoopta/ph/media_image.png differ
diff --git a/web/next-example/public/yoopta/ph/notion.png b/web/next-example/public/yoopta/ph/notion.png
new file mode 100644
index 000000000..e659b5880
Binary files /dev/null and b/web/next-example/public/yoopta/ph/notion.png differ
diff --git a/web/next-example/public/yoopta/ph/plugins.png b/web/next-example/public/yoopta/ph/plugins.png
new file mode 100644
index 000000000..fa0e43a59
Binary files /dev/null and b/web/next-example/public/yoopta/ph/plugins.png differ
diff --git a/web/next-example/public/yoopta/ph/select-area.mp4 b/web/next-example/public/yoopta/ph/select-area.mp4
new file mode 100644
index 000000000..a27d4ec88
Binary files /dev/null and b/web/next-example/public/yoopta/ph/select-area.mp4 differ
diff --git a/web/next-example/public/yoopta/ph/toolbars.mp4 b/web/next-example/public/yoopta/ph/toolbars.mp4
new file mode 100644
index 000000000..224a1b322
Binary files /dev/null and b/web/next-example/public/yoopta/ph/toolbars.mp4 differ
diff --git a/web/next-example/public/yoopta-logo.png b/web/next-example/public/yoopta/yoopta-logo.png
similarity index 100%
rename from web/next-example/public/yoopta-logo.png
rename to web/next-example/public/yoopta/yoopta-logo.png
diff --git a/web/next-example/src/pages/index.tsx b/web/next-example/src/pages/index.tsx
index 31f29deeb..79da651a0 100644
--- a/web/next-example/src/pages/index.tsx
+++ b/web/next-example/src/pages/index.tsx
@@ -91,7 +91,7 @@ export default function Home({ repoData }) {
         >
           <div className="rounded-full bg-white relative w-[42px] h-[42px]">
             <img
-              src="/yoopta-logo.png"
+              src="/yoopta/yoopta-logo.png"
               width={42}
               height={42}
               alt="yooptae editor logo"
@@ -143,12 +143,20 @@ export default function Home({ repoData }) {
         </div>
       </header>
       <div className="mt-10 md:w-[70%] md:mx-auto flex flex-col items-center px-4 md:px-0">
+        <a
+          href="https://yoopta.dev/examples/withBaseFullSetup"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center justify-center w-18 h-18 bg-white rounded-full shadow-lg m-2"
+        >
+          <img src="/yoopta/yoopta-logo.png" alt="Yoopta logo" className="w-14 h-14 rounded-full" />
+        </a>
         <h1 className="text-center scroll-m-20 text-4xl font-bold tracking-tight">Meet Yoopta-Editor 🚀</h1>
         <div className="flex items-center mt-4 flex-col md:flex-row">
           <ProductHuntButton />
           {repoData && <GithubButton repo={repoData} />}
         </div>
-        <p className="mt-6 md:w-[750px] text-base text-[#dae2ed] text-center">
+        <p className="mt-6 md:w-[680px] text-base text-[#dae2ed] text-center">
           Open-source rich-text editor that's truly{' '}
           <b>
             <u>rich</u>
@@ -158,15 +166,15 @@ export default function Home({ repoData }) {
         </p>
         <div className="mt-4 flex flex-col items-center">
           <button
-            onClick={() => window.open('/playground', '_blank')}
+            onClick={() => window.open('/examples/withBaseFullSetup', '_blank')}
             className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-[#1f6feb] text-primary-foreground shadow hover:bg-[#1f6feb]/90 h-9 px-4 py-2"
           >
-            Play with live demo <ExternalLinkIcon size={16} className="ml-2" />
+            Play with demo's <ExternalLinkIcon size={16} className="ml-2" />
           </button>
         </div>
         <div className="mt-4">
           <video className="w-full h-auto" autoPlay loop muted playsInline controls>
-            <source src="/Yoopta_Intro.mp4" type="video/mp4" />
+            <source src="/yoopta/Yoopta_Intro.mp4" type="video/mp4" />
             Your browser does not support the video tag.
           </video>
         </div>
@@ -262,7 +270,7 @@ export default function Home({ repoData }) {
                 rel="noopener noreferrer"
                 className="flex items-center justify-center w-18 h-18 bg-white rounded-full shadow-lg m-2"
               >
-                <img src="/yoopta-logo.png" alt="Yoodocs logo" className="w-14 h-14 rounded-full" />
+                <img src="/yoopta/yoopta-logo.png" alt="Yoopta logo" className="w-14 h-14 rounded-full" />
               </a>
               <a
                 href="https://github.com/chrassendk"