diff --git a/app/views/directory.ejs b/app/views/directory.ejs
index 62667901..641d04c7 100644
--- a/app/views/directory.ejs
+++ b/app/views/directory.ejs
@@ -49,7 +49,7 @@
               <div class="tab-content">
                 <% if (h.isMsOfficeViewerSupported(h.readmeFm(directory).file)) { %>
                   <div class="tab-pane<%=h.defaultViewerForFile(h.readmeFm(directory).file) == 'ms-office-viewer' ? ' active' : ''%>" id="ms-office-viewer" role="tabpanel" aria-labelledby="ms-office-viewer-tab" tabindex="0">
-                    <iframe src="<%=h.defaultViewerForFile(h.readmeFm(directory).file) == 'ms-office-viewer' ? `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(h.trimSlashes(config.siteUrl) + path.posix.join(breadcrumbs[breadcrumbs.length-1].url, (h.readmeFm(directory).file.replaceAll('\\', '/'))))}` : 'about:blank'%>" style="width: 100%; height: 85vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;" frameborder="0"></iframe>
+                    <iframe class="resizable" src="<%=h.defaultViewerForFile(h.readmeFm(directory).file) == 'ms-office-viewer' ? `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(h.trimSlashes(config.siteUrl) + path.posix.join(breadcrumbs[breadcrumbs.length-1].url, (h.readmeFm(directory).file.replaceAll('\\', '/'))))}` : 'about:blank'%>" style="min-width: 80%; width: 100%; max-width: 100%; min-height: 50vh; height: 82vh; max-height: 90vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; resize: both;" frameborder="0" allowfullscreen></iframe>
                   </div>
                   <% if (h.defaultViewerForFile(h.readmeFm(directory).file) != 'ms-office-viewer') { %>
                     <script>
@@ -70,7 +70,7 @@
                 <% } %>
                 <% if (h.isGoogleDocsViewerSupported(h.readmeFm(directory).file)) { %>
                   <div class="tab-pane<%=h.defaultViewerForFile(h.readmeFm(directory).file) == 'google-docs-viewer' ? ' active' : ''%>" id="google-docs-viewer" role="tabpanel" aria-labelledby="google-docs-viewer-tab" tabindex="0">
-                    <iframe src="<%=h.defaultViewerForFile(h.readmeFm(directory).file) == 'google-docs-viewer' ? `https://docs.google.com/gview?embedded=true&url=${encodeURIComponent(h.trimSlashes(config.siteUrl) + path.posix.join(breadcrumbs[breadcrumbs.length-1].url, (h.readmeFm(directory).file.replaceAll('\\', '/'))))}` : 'about:blank'%>" style="width: 100%; height: 85vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;" frameborder="0"></iframe>
+                    <iframe class="resizable" src="<%=h.defaultViewerForFile(h.readmeFm(directory).file) == 'google-docs-viewer' ? `https://docs.google.com/gview?embedded=true&url=${encodeURIComponent(h.trimSlashes(config.siteUrl) + path.posix.join(breadcrumbs[breadcrumbs.length-1].url, (h.readmeFm(directory).file.replaceAll('\\', '/'))))}` : 'about:blank'%>" style="min-width: 80%; width: 100%; max-width: 100%; min-height: 50vh; height: 82vh; max-height: 90vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; resize: both;" frameborder="0" allowfullscreen></iframe>
                   </div>
                   <% if (h.defaultViewerForFile(h.readmeFm(directory).file) != 'google-docs-viewer') { %>
                     <script>
@@ -90,7 +90,7 @@
                   <% } %>
                 <% } %>
                 <div class="tab-pane<%=(h.defaultViewerForFile(h.readmeFm(directory).file) == 'built-in') ? ' active' : ''%>" id="view-download" role="tabpanel" aria-labelledby="view-download-tab" tabindex="0">
-                  <iframe src="<%=(h.defaultViewerForFile(h.readmeFm(directory).file) == 'built-in') ? encodeURI(h.readmeFm(directory).file) : 'about:blank'%>" style="width: 100%; height: 85vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;" frameborder="0"></iframe>
+                  <iframe class="resizable" src="<%=(h.defaultViewerForFile(h.readmeFm(directory).file) == 'built-in') ? encodeURI(h.readmeFm(directory).file) : 'about:blank'%>" style="min-width: 80%; width: 100%; max-width: 100%; min-height: 50vh; height: 82vh; max-height: 90vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; resize: both;" frameborder="0" allowfullscreen></iframe>
                 </div>
                 <% if (h.defaultViewerForFile(h.readmeFm(directory).file) != 'built-in') { %>
                   <script>
@@ -109,7 +109,7 @@
                   </script>
                 <% } %>
                 <div class="tab-pane" id="ocr-scan" role="tabpanel" aria-labelledby="ocr-scan-tab" tabindex="0">
-                  <div style="overflow-y: scroll; width: 100%; height: 85vh; min-height: 85vh; max-height: 85vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;">
+                  <div class="resizable" style="overflow-y: scroll; width: 100%; min-width: 80%; max-width: 100%; height: 85vh; min-height: 50vh; max-height: 100vh; border: solid 1px #dfd7ca; border-top: 0px; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; resize: both;">
                     <div class="col-lg-12 p-3 p-lg-5 pt-lg-3">
                       <h2 class="title">OCR Scan (approximately)</h1>
                       <p>
diff --git a/app/views/includes/bottom-scripts.ejs b/app/views/includes/bottom-scripts.ejs
index 71577113..c2b1035b 100644
--- a/app/views/includes/bottom-scripts.ejs
+++ b/app/views/includes/bottom-scripts.ejs
@@ -2,4 +2,16 @@
 <script src="https://daball.me/vendor/popper.js/dist/popper.min.js"></script>
 <script src="https://daball.me/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 <script src="https://daball.me/vendor/jquery-easing/jquery.easing.min.js"></script>
-<script src="https://daball.me/layouts/blog/js/blog.min.js"></script>
\ No newline at end of file
+<script src="https://daball.me/layouts/blog/js/blog.min.js"></script>
+<script>
+  $(function () {
+    var resizables = $('.resizable');
+    resizables.each(function (index, resizable) {
+      resizable.resizable({
+        animate: true,
+        helper: 'ui-resizable-helper',
+        ghost: true,
+      });
+    });
+  })
+</script>
diff --git a/app/views/includes/common-head.ejs b/app/views/includes/common-head.ejs
index 64a86044..d895c89f 100644
--- a/app/views/includes/common-head.ejs
+++ b/app/views/includes/common-head.ejs
@@ -11,7 +11,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8937572456576531" crossorigin="anonymous"></script>
 <!-- Bootstrap CSS -->
-<link href="https://daball.me/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:100,200,300,400,500,600,700,800,900" rel="stylesheet" />
 <link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative:100,200,300,400,500,600,700,800,900" rel="stylesheet" />
 <link href="https://fonts.googleapis.com/css?family=Alegreya+SC:100,200,300,400,500,600,700,800,900" rel="stylesheet" />
@@ -25,4 +25,7 @@
 <link href="https://daball.me/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" />
 <link href="https://daball.me/layouts/blog/css/blog.min.css" rel="stylesheet" />
 <link href="/css/nm3clol.css" rel="stylesheet" />
-<script src="https://daball.me/vendor/jquery/jquery.min.js"></script>
+<link href="https://code.jquery.com/ui/1.13.3/themes/cupertino/jquery-ui.css" rel="stylesheet" />
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js" integrity="sha256-sw0iNNXmOJbQhYFuC9OF2kOlD5KQKe1y5lfBn4C9Sjg=" crossorigin="anonymous"></script>
\ No newline at end of file
diff --git a/assets/css/nm3clol.css b/assets/css/nm3clol.css
index 9d40d446..3201c742 100644
--- a/assets/css/nm3clol.css
+++ b/assets/css/nm3clol.css
@@ -320,4 +320,6 @@ tr.write-in td:first-child {
   .nmc3clol-navbar-brand { color: #f44336; }
   .daball-navbar-brand { color: #000; }
   .pt-1500 { padding-top: 150px;}
-}
\ No newline at end of file
+}
+
+.ui-resizable-helper { border: 2px dotted #f44336; }