diff --git a/index.html b/index.html
index 9570621..8ead174 100644
--- a/index.html
+++ b/index.html
@@ -594,7 +594,7 @@
             &copy; 2025 BentoPDF. All rights reserved.
           </p>
           <p class="text-gray-500 text-xs mt-2">
-            Version <span id="app-version">1.4.0</span>
+            Version <span id="app-version">1.5.0</span>
           </p>
         </div>
 
diff --git a/src/js/main.ts b/src/js/main.ts
index 68513e8..9867400 100644
--- a/src/js/main.ts
+++ b/src/js/main.ts
@@ -94,7 +94,7 @@ const init = () => {
               &copy; 2025 BentoPDF. All rights reserved.
             </p>
             <p class="text-gray-500 text-xs mt-2">
-              Version <span id="app-version-simple">1.4.0</span>
+              Version <span id="app-version-simple">1.5.0</span>
             </p>
           </div>
         `;
diff --git a/src/pages/pdf-multi-tool.html b/src/pages/pdf-multi-tool.html
index 1275f0f..28b9464 100644
--- a/src/pages/pdf-multi-tool.html
+++ b/src/pages/pdf-multi-tool.html
@@ -7,9 +7,22 @@
   <title>PDF Multi Tool - BentoPDF</title>
   <link rel="icon" type="image/png" href="../../images/favicon.svg" />
   <link href="../../src/css/styles.css" rel="stylesheet" />
+
+  <style>
+    /* Hide scrollbar for toolbar overflow */
+    .scrollbar-hide::-webkit-scrollbar {
+      display: none;
+    }
+
+    .scrollbar-hide {
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+    }
+  </style>
 </head>
 
 <body class="antialiased bg-gray-900 h-screen overflow-hidden">
+
   <!-- Navigation -->
   <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-30">
     <div class="container mx-auto px-4">
@@ -19,11 +32,11 @@
           <span class="text-white font-bold text-xl ml-2">
             <a href="../../index.html">BentoPDF</a>
           </span>
-          <span class="text-gray-400 ml-4">PDF Multi Tool</span>
+          <span class="text-gray-400 ml-3 text-sm sm:text-base">PDF Multi Tool</span>
         </div>
         <button id="close-tool-btn"
-          class="flex items-center gap-1 btn bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded">
-          <i data-lucide="x" class="w-5 h-5"></i> Close
+          class="flex items-center gap-1 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
+          <i data-lucide="x" class="w-4 h-4 sm:w-5 sm:h-5"></i> Close
         </button>
       </div>
     </div>
@@ -31,105 +44,145 @@
 
   <!-- Main Container -->
   <div class="flex flex-col h-[calc(100vh-4rem)]">
+
     <!-- Toolbar -->
-    <div class="bg-gray-800 border-b border-gray-700 p-2 sm:p-4 overflow-x-auto">
-      <div class="flex flex-wrap items-center gap-1 sm:gap-2 min-w-max">
+    <div class="bg-gray-800 border-b border-gray-700 p-2 sm:p-3 overflow-x-auto scrollbar-hide">
+      <div
+        class="flex flex-wrap items-center justify-center sm:justify-start gap-2 bg-gray-900 p-2 sm:p-4 rounded-lg w-full">
+
+        <!-- Upload -->
         <button id="upload-pdfs-btn"
-          class="btn bg-indigo-600 hover:bg-indigo-700 text-white px-2 sm:px-4 py-1.5 sm:py-2 rounded flex items-center gap-1 sm:gap-2 text-sm">
+          class="flex items-center gap-1 sm:gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
           <i data-lucide="upload" class="w-3 h-3 sm:w-4 sm:h-4"></i>
           <span class="hidden sm:inline">Upload PDFs</span>
           <span class="sm:hidden">Upload</span>
         </button>
-        <div class="border-l border-gray-600 h-6 mx-1"></div>
+
+        <div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
+
+        <!-- Add Blank -->
         <button id="add-blank-page-btn"
-          class="flex items-center gap-1 btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm">
+          class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
           <i data-lucide="file-plus" class="w-3 h-3 sm:w-4 sm:h-4"></i>
-          <span class="hidden sm:inline">Add Blank</span>
+          <span class="hidden sm:inline">Add Blank Page</span>
         </button>
-        <div class="border-l border-gray-600 h-6 mx-1"></div>
+
+        <div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
+        <span class="text-gray-400 text-xs sm:text-sm hidden md:inline">Edit:</span>
+
+
+        <!-- Undo / Redo / Reset -->
         <button id="undo-btn"
-          class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
+          class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
           <i data-lucide="rotate-ccw" class="w-3 h-3 sm:w-4 sm:h-4"></i>
           <span class="hidden lg:inline">Undo</span>
         </button>
+
         <button id="redo-btn"
-          class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
+          class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
           <i data-lucide="rotate-cw" class="w-3 h-3 sm:w-4 sm:h-4"></i>
           <span class="hidden lg:inline">Redo</span>
         </button>
+
         <button id="reset-btn"
-          class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
+          class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
           <i data-lucide="refresh-ccw" class="w-3 h-3 sm:w-4 sm:h-4"></i>
           <span class="hidden lg:inline">Reset</span>
         </button>
-        <div class="border-l border-gray-600 h-6 mx-1"></div>
+
+        <div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
+
+        <!-- Selection -->
         <span class="text-gray-400 text-xs sm:text-sm hidden md:inline">Selection:</span>
+
         <button id="select-all-btn"
-          class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
+          class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
           <i data-lucide="check-square" class="w-3 h-3 sm:w-4 sm:h-4"></i>
           <span class="hidden lg:inline">Select All</span>
         </button>
+
         <button id="deselect-all-btn"
-          class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
+          class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
           <i data-lucide="square" class="w-3 h-3 sm:w-4 sm:h-4"></i>
           <span class="hidden lg:inline">Deselect All</span>
         </button>
-        <div class="border-l border-gray-600 h-6 mx-1"></div>
-        <span class="text-gray-400 text-xs sm:text-sm hidden md:inline">Bulk:</span>
+
+        <div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
+
+        <!-- Rotate -->
+        <span class="text-gray-400 text-xs sm:text-sm hidden md:inline">Rotate:</span>
         <button id="bulk-rotate-left-btn"
-          class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
+          class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
           <i data-lucide="rotate-ccw" class="w-3 h-3 sm:w-4 sm:h-4"></i>
-          <span class="hidden xl:inline">Rotate Left</span>
+          <span class="hidden xl:inline">Left</span>
         </button>
+
         <button id="bulk-rotate-btn"
-          class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
+          class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
           <i data-lucide="rotate-cw" class="w-3 h-3 sm:w-4 sm:h-4"></i>
-          <span class="hidden xl:inline">Rotate Right</span>
-        </button>
-        <button id="bulk-delete-btn"
-          class="btn bg-red-600 hover:bg-red-700 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
-          <i data-lucide="trash-2" class="w-3 h-3 sm:w-4 sm:h-4"></i>
-          <span class="hidden xl:inline">Delete</span>
+          <span class="hidden xl:inline">Right</span>
         </button>
+
+        <div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
+
+        <!-- Duplicate / Split -->
         <button id="bulk-duplicate-btn"
-          class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
+          class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
           <i data-lucide="copy" class="w-3 h-3 sm:w-4 sm:h-4"></i>
           <span class="hidden xl:inline">Duplicate</span>
         </button>
+
         <button id="bulk-split-btn"
-          class="btn bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
+          class="flex items-center gap-1 sm:gap-2 bg-gray-700 hover:bg-gray-600 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
           <i data-lucide="scissors" class="w-3 h-3 sm:w-4 sm:h-4"></i>
           <span class="hidden xl:inline">Split</span>
         </button>
+
+        <div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
+        <span class="text-gray-400 text-xs sm:text-sm hidden md:inline">Clear:</span>
+
+
+        <!-- Delete -->
+        <button id="bulk-delete-btn"
+          class="flex items-center gap-1 sm:gap-2 bg-red-500 hover:bg-red-700 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
+          <i data-lucide="trash-2" class="w-3 h-3 sm:w-4 sm:h-4"></i>
+          <span class="hidden xl:inline">Delete</span>
+        </button>
+
+        <div class="border-l border-gray-600 h-5 sm:h-6 mx-1"></div>
+
+        <!-- Download -->
+        <span class="text-gray-400 text-xs sm:text-sm hidden md:inline">Download:</span>
         <button id="bulk-download-btn"
-          class="btn bg-green-600 hover:bg-green-700 text-white px-2 sm:px-3 py-1.5 sm:py-2 rounded text-xs sm:text-sm flex items-center gap-1 sm:gap-2">
+          class="flex items-center gap-1 sm:gap-2 bg-green-600 hover:bg-green-700 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
           <i data-lucide="download" class="w-3 h-3 sm:w-4 sm:h-4"></i>
           <span class="hidden xl:inline">Download Selected</span>
         </button>
-        <div class="flex-1 min-w-[20px]"></div>
+
         <button id="export-pdf-btn"
-          class="btn bg-indigo-600 hover:bg-indigo-700 text-white px-2 sm:px-4 py-1.5 sm:py-2 rounded flex items-center gap-1 sm:gap-2 text-sm">
+          class="flex items-center gap-1 sm:gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-2 sm:px-3 md:px-4 py-1 sm:py-1.5 md:py-2 rounded text-xs sm:text-sm md:text-base">
           <i data-lucide="download" class="w-3 h-3 sm:w-4 sm:h-4"></i>
-          <span class="hidden sm:inline">Export PDF</span>
-          <span class="sm:hidden">Export</span>
+          <span class="hidden xl:inline">Export PDF</span>
         </button>
       </div>
     </div>
 
     <!-- Content Area -->
-    <div class="flex-1 overflow-auto p-4">
-      <div id="upload-area" class="hidden border-2 border-dashed border-gray-600 rounded-lg p-12 text-center">
-        <i data-lucide="upload-cloud" class="w-16 h-16 mx-auto text-gray-400 mb-4"></i>
-        <p class="text-gray-300 text-lg mb-2">Upload PDF Files</p>
-        <p class="text-gray-400 text-sm mb-4">Drag and drop PDF files here, or click to select</p>
+    <div class="flex-1 overflow-auto p-3 sm:p-4">
+      <div id="upload-area"
+        class="hidden border-2 border-dashed border-gray-600 rounded-lg p-6 sm:p-12 text-center max-w-full">
+        <i data-lucide="upload-cloud" class="w-12 h-12 sm:w-16 sm:h-16 mx-auto text-gray-400 mb-3 sm:mb-4"></i>
+        <p class="text-gray-300 text-base sm:text-lg mb-1 sm:mb-2">Upload PDF Files</p>
+        <p class="text-gray-400 text-xs sm:text-sm mb-3 sm:mb-4">Drag and drop PDF files here, or click to select</p>
         <input type="file" id="pdf-file-input" accept="application/pdf" multiple class="hidden">
         <button onclick="document.getElementById('pdf-file-input').click()"
-          class="btn bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded">
+          class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 sm:px-6 py-2 rounded text-sm sm:text-base">
           Select Files
         </button>
       </div>
+
       <div id="pages-container"
-        class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4"></div>
+        class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 sm:gap-4"></div>
     </div>
   </div>
 
