diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx
index 56b7b87d61b168597870411685720c2a7d042f78..7a3802a95e928e499a216a70ce25059aa43973a3 100644
--- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx
+++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicSmartImgFit.jsx
@@ -24,18 +24,29 @@ import { ${card?"FileCard":"FileMosaic"}, ExtFile } from "@files-ui/react";
 export default function App() {
   return (
     <>
-        <${card?"FileCard":"FileMosaic"}  {...sampleFileProp} info smartImgFit={false}/>
-        <${card?"FileCard":"FileMosaic"}  {...sampleFileProp} info smartImgFit={"orientation"}/>
-        <${card?"FileCard":"FileMosaic"}  {...sampleFileProp} info smartImgFit={"center"}/>
+        <${card?"FileCard":"FileMosaic"}  {...landscapeImage} info smartImgFit={false}/>
+        <${card?"FileCard":"FileMosaic"}  {...landscapeImage} info smartImgFit={"orientation"}/>
+        <${card?"FileCard":"FileMosaic"}  {...landscapeImage} info smartImgFit={"center"}/>
+        <${card?"FileCard":"FileMosaic"}  {...portraitImage} info smartImgFit={false}/>
+        <${card?"FileCard":"FileMosaic"}  {...portraitImage} info smartImgFit={"orientation"}/>
+        <${card?"FileCard":"FileMosaic"}  {...portraitImage} info smartImgFit={"center"}/>
     </>
   );
 };
-const sampleFileProp: ExtFile = {
-    id: "fileId-1",
-    size: 28 * 1024 * 1024,
-    type: "image/gif",
-    name: "Thor arrives wakanda.png",
-    imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
+const landscapeImage: ExtFile = {
+  id: "fileId-1",
+  size: 28 * 1024 * 1024,
+  type: "image/gif",
+  name: "(landscape)Thor arrives wakanda.gif",
+  imageUrl:
+    "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
+};
+const portraitImage: ExtFile = {
+  id: "fileId-2",
+  size: 28 * 1024 * 1024,
+  type: "image/gif",
+  name: "(portrait)Iron man in stark tower.gif",
+  imageUrl: "https://i.pinimg.com/originals/b6/1d/6a/b61d6a1079d8e54932dcde9dc260dd2e.gif",
 };`;
 
 const completeCodeJS = (card)=>`import * as React from "react";
@@ -44,16 +55,27 @@ import { ${card?"FileCard":"FileMosaic"} } from "@files-ui/react";
 export default function App() {
   return (
     <>
-        <${card?"FileCard":"FileMosaic"}  {...sampleFileProp} info smartImgFit={false}/>
-        <${card?"FileCard":"FileMosaic"}  {...sampleFileProp} info smartImgFit={"orientation"}/>
-        <${card?"FileCard":"FileMosaic"}  {...sampleFileProp} info smartImgFit={"center"}/>
+      <${card?"FileCard":"FileMosaic"}  {...landscapeImage} info smartImgFit={false}/>
+      <${card?"FileCard":"FileMosaic"}  {...landscapeImage} info smartImgFit={"orientation"}/>
+      <${card?"FileCard":"FileMosaic"}  {...landscapeImage} info smartImgFit={"center"}/>
+      <${card?"FileCard":"FileMosaic"}  {...portraitImage} info smartImgFit={false}/>
+      <${card?"FileCard":"FileMosaic"}  {...portraitImage} info smartImgFit={"orientation"}/>
+      <${card?"FileCard":"FileMosaic"}  {...portraitImage} info smartImgFit={"center"}/>
     </>
   );
 };
-const sampleFileProp = {
-    id: "fileId-1",
-    size: 28 * 1024 * 1024,
-    type: "image/gif",
-    name: "Thor arrives wakanda.png",
-    imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
+const landscapeImage = {
+  id: "fileId-1",
+  size: 28 * 1024 * 1024,
+  type: "image/gif",
+  name: "(landscape)Thor arrives wakanda.gif",
+  imageUrl:
+    "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
+};
+const portraitImage = {
+  id: "fileId-2",
+  size: 28 * 1024 * 1024,
+  type: "image/gif",
+  name: "(portrait)Iron man in stark tower.gif",
+  imageUrl: "https://i.pinimg.com/originals/b6/1d/6a/b61d6a1079d8e54932dcde9dc260dd2e.gif",
 };`;
diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx
index 778c2fb2e5a0725fc01e687a8742ec8e7466d9ca..26735bf367cc277ebc90b29bb8bfd966bb3b9132 100644
--- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx
+++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicSmartImgFit.tsx
@@ -5,25 +5,39 @@ const DemoFileMosaicSmartImgFit = (props: { card: boolean }) => {
   if (props.card)
     return (
       <>
-        <FileCard {...sampleFileProp} info smartImgFit={false} />
-        <FileCard {...sampleFileProp} info smartImgFit={"orientation"} />
-        <FileCard {...sampleFileProp} info smartImgFit={"center"} />
+        <FileCard {...landscapeImage} info smartImgFit={false} />
+        <FileCard {...landscapeImage} info smartImgFit={"orientation"} />
+        <FileCard {...landscapeImage} info smartImgFit={"center"} />
+        <FileCard {...portraitImage} info smartImgFit={false} />
+        <FileCard {...portraitImage} info smartImgFit={"orientation"} />
+        <FileCard {...portraitImage} info smartImgFit={"center"} />
       </>
     );
   return (
     <>
-      <FileMosaic {...sampleFileProp} info smartImgFit={false} />
-      <FileMosaic {...sampleFileProp} info smartImgFit={"orientation"} />
-      <FileMosaic {...sampleFileProp} info smartImgFit={"center"} />
+      <FileMosaic {...landscapeImage} info smartImgFit={false} />
+      <FileMosaic {...landscapeImage} info smartImgFit={"orientation"} />
+      <FileMosaic {...landscapeImage} info smartImgFit={"center"} />
+      <FileMosaic {...portraitImage} info smartImgFit={false} />
+      <FileMosaic {...portraitImage} info smartImgFit={"orientation"} />
+      <FileMosaic {...portraitImage} info smartImgFit={"center"} />
     </>
   );
 };
 export default DemoFileMosaicSmartImgFit;
 
-const sampleFileProp: ExtFile = {
+const landscapeImage: ExtFile = {
   id: "fileId-1",
   size: 28 * 1024 * 1024,
   type: "image/gif",
-  name: "Thor arrives wakanda.png",
-  imageUrl: "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
+  name: "(landscape)Thor arrives wakanda.gif",
+  imageUrl:
+    "https://64.media.tumblr.com/078a5af7a51d438b1c1ee5bd77f1b1e5/tumblr_p81qv7KIPa1rvufhzo3_r1_400.gif",
+};
+const portraitImage: ExtFile = {
+  id: "fileId-2",
+  size: 28 * 1024 * 1024,
+  type: "image/gif",
+  name: "(portrait)Iron man in stark tower.gif",
+  imageUrl: "https://i.pinimg.com/originals/b6/1d/6a/b61d6a1079d8e54932dcde9dc260dd2e.gif",
 };
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index 23bce695875fa9a995327495dd36131f66c08c82..7f82adbe87791e424ef65918741ab1a810a57664 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -350,11 +350,25 @@ const FileCardDemoPage = (props) => {
               <AnchorToTab href="/api/filecard">{"<FileCard/>"}</AnchorToTab>
             </li>
             <li>
-              |
               <AnchorToTab href="/api/fileinputbuttom">
                 {"<FileInputButton/>"}
               </AnchorToTab>
             </li>
+            <li>
+              <AnchorToTab href="/api/preview#fullscreen">
+                {"<FullScreen/>"}
+              </AnchorToTab>
+            </li>
+            <li>
+              <AnchorToTab href="/api/preview#imagepreview">
+                {"<ImagePreview/>"}
+              </AnchorToTab>
+            </li>
+            <li>
+              <AnchorToTab href="/api/preview#videopreview">
+                {"<VideoPreview/>"}
+              </AnchorToTab>
+            </li>
           </ul>
         </section>
       </MainContentContainer>