diff --git a/src/component/main/InnerNMRiumContents.tsx b/src/component/main/InnerNMRiumContents.tsx
index 5f14e12198..e3ebd5b225 100644
--- a/src/component/main/InnerNMRiumContents.tsx
+++ b/src/component/main/InnerNMRiumContents.tsx
@@ -60,6 +60,22 @@ const containerStyles = css`
     -o-user-drag: none;
     user-select: none;
   }
+
+  @media print {
+    @page {
+      size: a4 landscape;
+      margin: 0%;
+    }
+
+    * {
+      visibility: hidden;
+    }
+
+    #nmrium-viewer,
+    #nmrium-viewer * {
+      visibility: visible;
+    }
+  }
 `;
 
 interface InnerNMRiumContentsProps {
diff --git a/src/demo/Sidebar.tsx b/src/demo/Sidebar.tsx
index 770523896c..077b705ca1 100644
--- a/src/demo/Sidebar.tsx
+++ b/src/demo/Sidebar.tsx
@@ -102,6 +102,7 @@ function Sidebar(props) {
 
   return (
     <div
+      className="demo-side-bar"
       css={css(
         sidebarCss,
         props.menuIsClosed ? sidebarClosedCss : sidebarOpenCss,
diff --git a/src/demo/index.css b/src/demo/index.css
index bb0e7c5e90..025f9f360b 100644
--- a/src/demo/index.css
+++ b/src/demo/index.css
@@ -1,3 +1,17 @@
+@media print {
+  .demo-side-bar,
+  .demo-main-container > div > div:first-child {
+    display: none !important;
+  }
+
+  .demo-main-container,
+  .demo-main-container > div {
+    width: 100% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+}
+
 .rc-menu {
   border: none !important;
   box-shadow: none !important;
diff --git a/src/demo/layouts/Admin.tsx b/src/demo/layouts/Admin.tsx
index c9e09acf03..286f37bfbc 100644
--- a/src/demo/layouts/Admin.tsx
+++ b/src/demo/layouts/Admin.tsx
@@ -71,6 +71,7 @@ export function Dashboard(props: DashboardProps) {
         onMenuToggle={toggleMenu}
       />
       <div
+        className="demo-main-container"
         css={css(
           mainPanelCss,
           menuIsClosed ? mainPanelClosedCss : mainPanelOpenCss,