diff --git a/example/src/styles/RowDetailsPopup.css b/example/src/styles/RowDetailsPopup.css
index b231d5c..eb7305b 100644
--- a/example/src/styles/RowDetailsPopup.css
+++ b/example/src/styles/RowDetailsPopup.css
@@ -5,7 +5,6 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,8 +22,10 @@
   max-width: 500px;
   width: 90%;
   max-height: 80vh;
-  overflow: hidden;
+  overflow: hidden; /* Changed to hidden to prevent overall scroll */
   font-family: 'DM Sans', sans-serif;
+  display: flex;
+  flex-direction: column;
 }
 
 .row-details-popup-header {
@@ -33,6 +34,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-shrink: 0; /* Prevent header from shrinking */
 }
 
 .row-details-popup-title {
@@ -55,8 +57,9 @@
 
 .row-details-popup-content {
   padding: 1.5rem;
-  max-height: 60vh;
-  overflow-y: auto;
+  flex: 1; /* Take remaining space */
+  overflow-y: auto; /* Enable scroll only for content */
+  min-height: 0; /* Allow content to shrink */
 }
 
 .row-details-popup-footer {
@@ -65,6 +68,7 @@
   display: flex;
   justify-content: flex-end;
   gap: 0.75rem;
+  flex-shrink: 0; /* Prevent footer from shrinking */
 }
 
 .row-details-popup-close-action {
@@ -180,5 +184,68 @@
 
 /* Disable background scroll when popup is open */
 body.popup-open {
-  overflow: hidden;
+  overflow: hidden !important;
+  position: fixed !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* Prevent scrolling on all table containers when popup is open */
+body.popup-open .table-wrapper,
+body.popup-open .table-container,
+body.popup-open .app-content,
+body.popup-open .app {
+  overflow: hidden !important;
+  pointer-events: none !important;
+}
+
+/* Override the table's !important overflow rules when popup is open */
+body.popup-open .table-responsive-container {
+  overflow: hidden !important;
+  overflow-x: hidden !important;
+  overflow-y: hidden !important;
+  pointer-events: none !important;
+}
+
+/* Override all media query rules for table scrolling when popup is open */
+body.popup-open .table-responsive-container,
+body.popup-open .table-responsive-container::-webkit-scrollbar {
+  overflow: hidden !important;
+  overflow-x: hidden !important;
+  overflow-y: hidden !important;
+  pointer-events: none !important;
+}
+
+/* Override the specific media query rules that use !important */
+@media (max-width: 1199px) {
+  body.popup-open .table-responsive-container {
+    overflow: hidden !important;
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+    pointer-events: none !important;
+  }
+}
+
+@media (max-width: 768px) {
+  body.popup-open .table-responsive-container {
+    overflow: hidden !important;
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+    pointer-events: none !important;
+  }
+}
+
+@media (max-width: 480px) {
+  body.popup-open .table-responsive-container {
+    overflow: hidden !important;
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+    pointer-events: none !important;
+  }
+}
+
+/* Allow scrolling only within the popup */
+body.popup-open .row-details-popup-overlay,
+body.popup-open .row-details-popup {
+  pointer-events: auto !important;
 } 
\ No newline at end of file
diff --git a/src/components/ButtonGroup.tsx b/src/components/ButtonGroup.tsx
index f1f249b..94a142b 100644
--- a/src/components/ButtonGroup.tsx
+++ b/src/components/ButtonGroup.tsx
@@ -62,9 +62,9 @@ export const ButtonGroup: React.FC<ButtonGroupProps> = ({
   };
 
   return (
-    <div style={{ display: "flex", gap: "0.5rem", flexShrink: 0 }}>
+    <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}>
       {buttons.map((button) => (
-        <div key={button.id} style={{ position: 'relative' }}>
+        <div key={button.id} style={{ position: 'relative', flexShrink: 0 }}>
           <Button
             icon={button.icon}
             text={button.text}
diff --git a/src/components/MultiLevelTable.tsx b/src/components/MultiLevelTable.tsx
index ff94b90..5502972 100644
--- a/src/components/MultiLevelTable.tsx
+++ b/src/components/MultiLevelTable.tsx
@@ -704,43 +704,41 @@ export const MultiLevelTable: React.FC<MultiLevelTableProps> = ({
       <div className="table-wrapper">
         {showSearchBar && (
           <div className="search-bar-container">
-            <div className="search-bar-left">
-              {tableTitle && (
-                <div className="table-title-container">
-                  <h2 style={componentStyles.title.table}>
-                    {tableTitle}
-                  </h2>
-                  {tableSubtitle && (
-                    <p 
-                      className="table-subtitle"
-                      style={{
-                        color: mergedTheme.colors?.textColor || colors.textSecondary,
-                      }}
-                    >
-                      {tableSubtitle}
-                    </p>
-                  )}
-                </div>
-              )}
-              <div className="search-input-container">
-                <span className="search-input-icon">
-                  <SearchIcon width={24} height={24} />
-                </span>
-                <input
-                  className="search-input"
-                  type="text"
-                  placeholder="Search"
-                  value={searchTerm}
-                  onChange={e => onSearchChange?.(e.target.value)}
-                  style={{
-                    borderColor: mergedTheme.table?.cell?.borderColor || colors.searchBorder,
-                    backgroundColor: mergedTheme.colors?.background || colors.backgroundWhite,
-                    color: mergedTheme.colors?.textColor || colors.textPrimary,
-                  }}
-                />
+            {tableTitle && (
+              <div className="table-title-container">
+                <h2 style={componentStyles.title.table}>
+                  {tableTitle}
+                </h2>
+                {tableSubtitle && (
+                  <p 
+                    className="table-subtitle"
+                    style={{
+                      color: mergedTheme.colors?.textColor || colors.textSecondary,
+                    }}
+                  >
+                    {tableSubtitle}
+                  </p>
+                )}
               </div>
+            )}
+            <div className="search-input-container">
+              <span className="search-input-icon">
+                <SearchIcon width={24} height={24} />
+              </span>
+              <input
+                className="search-input"
+                type="text"
+                placeholder="Search"
+                value={searchTerm}
+                onChange={e => onSearchChange?.(e.target.value)}
+                style={{
+                  borderColor: mergedTheme.table?.cell?.borderColor || colors.searchBorder,
+                  backgroundColor: mergedTheme.colors?.background || colors.backgroundWhite,
+                  color: mergedTheme.colors?.textColor || colors.textPrimary,
+                }}
+              />
             </div>
-            <div className="search-bar-right">
+            <div className="action-buttons-container">
               {renderActionButtons()}
             </div>
           </div>
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 6a1ead8..652bf7d 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { ArrowIcon } from './icons';
 import { PAGE_SIZE_OPTIONS } from '../constants/pagination';
@@ -55,40 +55,90 @@ export const Pagination: React.FC<PaginationProps> = ({
   setPageSize,
   totalItems
 }) => {
-  // Generate page numbers to show
+  // Track screen width for responsive pagination
+  const [screenWidth, setScreenWidth] = useState(window.innerWidth);
+
+  // Update screen width on window resize
+  useEffect(() => {
+    const handleResize = () => {
+      setScreenWidth(window.innerWidth);
+    };
+
+    window.addEventListener('resize', handleResize);
+    
+    // Cleanup event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  // Generate page numbers to show based on screen size
   const getVisiblePages = () => {
     const pages: number[] = [];
     
-    // If 5 or fewer pages, show all
-    if (pageCount <= 5) {
+    // Determine how many page numbers to show based on screen width
+    let maxVisiblePages: number;
+    let showPageNumbers = true;
+
+    if (screenWidth <= 374) 
+      // Very small screens: show only 2 page numbers + ellipsis
+      maxVisiblePages = 2;
+    else if (screenWidth <= 542) 
+      // Small screens: show 3 page numbers + ellipsis
+      maxVisiblePages = 3;
+    else if (screenWidth < 1228) 
+      // Medium screens: show 4 page numbers + ellipsis
+      maxVisiblePages = 4;
+    else 
+      // Large screens: show up to 6 page numbers
+      maxVisiblePages = 6;
+
+    // For very small screens, don't show page numbers at all
+    if (screenWidth <= 415) 
+      showPageNumbers = false;
+    
+    // If not showing page numbers, return empty array (only arrows will show)
+    if (!showPageNumbers) 
+      return pages;
+    
+    // If total pages is less than or equal to max visible pages, show all
+    if (pageCount <= maxVisiblePages) {
       for (let i = 0; i < pageCount; i++) 
         pages.push(i);
       
       return pages;
     }
     
-    // For more than 5 pages, show smart pagination
-    if (pageIndex <= 2) {
-      // Near start: show 1, 2, 3, 4, 5, ..., last
-      for (let i = 0; i < 5; i++) 
+    // Calculate how many pages to show on each side of current page
+    const sidePages = Math.floor((maxVisiblePages - 1) / 2);
+    
+    // Near start
+    if (pageIndex <= sidePages) {
+      // Show first few pages + ellipsis + last page
+      for (let i = 0; i < maxVisiblePages - 1; i++) 
         pages.push(i);
 
       pages.push(-1); // Ellipsis marker
       pages.push(pageCount - 1);
-    } else if (pageIndex >= pageCount - 3) {
-      // Near end: show 1, ..., last-4, last-3, last-2, last-1, last
+    } 
+    // Near end
+    else if (pageIndex >= pageCount - sidePages - 1) {
+      // Show first page + ellipsis + last few pages
       pages.push(0);
       pages.push(-1); // Ellipsis marker
-      for (let i = pageCount - 5; i < pageCount; i++) 
-        pages.push(i);
 
-    } else {
-      // Middle: show 1, ..., current-1, current, current+1, ..., last
+      for (let i = pageCount - (maxVisiblePages - 1); i < pageCount; i++) 
+        pages.push(i);
+    } 
+    // Middle
+    else {
+      // Show first page + ellipsis + current and neighbors + ellipsis + last page
       pages.push(0);
       pages.push(-1); // Ellipsis marker
-      pages.push(pageIndex - 1);
-      pages.push(pageIndex);
-      pages.push(pageIndex + 1);
+
+      for (let i = pageIndex - sidePages; i <= pageIndex + sidePages; i++) 
+        pages.push(i);
+
       pages.push(-1); // Ellipsis marker
       pages.push(pageCount - 1);
     }
@@ -108,7 +158,10 @@ export const Pagination: React.FC<PaginationProps> = ({
         position: 'absolute'
       }}>
         {/* Total Items Text */}
-        <div style={{ ...componentStyles.pagination.totalItems, position: 'static' }}>
+        <div 
+          className="pagination-total-items"
+          style={{ ...componentStyles.pagination.totalItems, position: 'static' }}
+        >
           Total {totalItems} items
         </div>
         
diff --git a/src/styles/MultiLevelTable.css b/src/styles/MultiLevelTable.css
index ff02182..4d6bf73 100644
--- a/src/styles/MultiLevelTable.css
+++ b/src/styles/MultiLevelTable.css
@@ -252,22 +252,13 @@
   align-items: center;
   padding: 1rem;
   gap: 1rem;
-  flex-wrap: nowrap; /* Prevent wrapping on larger screens */
+  flex-wrap: wrap; /* Allow natural wrapping */
 }
 
-.search-bar-left {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex: 1;
-  min-width: 0; /* Allow shrinking */
-}
-
-.search-bar-right {
+.action-buttons-container {
   display: flex;
   gap: 0.5rem;
-  flex-shrink: 0; /* Prevent shrinking */
-  align-items: center;
+  flex-wrap: wrap; /* Allow buttons to wrap */
 }
 
 .table-title-container {
@@ -338,14 +329,12 @@
     gap: 1rem;
   }
   
-  .search-bar-left {
+  .action-buttons-container {
     width: 100%;
-  }
-  
-  .search-bar-right {
-    width: 100%;
-    justify-content: space-between;
-    gap: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: flex-start;
   }
 
   .search-input-container {
@@ -409,11 +398,7 @@
     gap: 0.75rem;
   }
   
-  .search-bar-left {
-    width: 100%;
-  }
-  
-  .search-bar-right {
+  .action-buttons-container {
     width: 100%;
     justify-content: space-between;
     gap: 0.5rem;
@@ -455,22 +440,84 @@
     align-items: center;
   }
 
-  /* let the children of .search-bar-left take part in the grid */
-  .search-bar-left {
-    display: contents;                   /* no box of its own            */
-  }
-
   /* name each piece */
   .table-title-container { grid-area: title; }
   .search-input-container { grid-area: search; }
 
   /* push buttons to the right */
-  .search-bar-right {
+  .action-buttons-container {
     grid-area: buttons;
     justify-self: end;                   /* align right edge             */
   }
 }
 
+/* ≤ 700px – 3-line layout for 3+ buttons */
+@media (max-width: 700px) {
+  .search-bar-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+
+  .action-buttons-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: flex-start;
+  }
+
+  /* Allow search bar and buttons to share the same line when possible */
+  .search-input-container {
+    flex: 1;
+    min-width: 200px;
+  }
+}
+
+/* ≤ 527px – 3-line layout for 2 buttons */
+@media (max-width: 527px) {
+  .search-bar-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+
+  .action-buttons-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: flex-start;
+  }
+}
+
+/* ≤ 489px – 4-line layout with 2x2 button grid for 3 buttons */
+@media (max-width: 489px) {
+  .search-bar-container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 1rem;
+  }
+
+  .action-buttons-container {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  /* Ensure buttons maintain their minimum width and don't break content */
+  .action-buttons-container > * {
+    min-width: 120px;
+    flex-shrink: 0;
+  }
+}
+
 /* Large desktop breakpoint */
 @media (min-width: 1025px) {
   .search-bar-container {
@@ -485,8 +532,7 @@
     margin-bottom: 0.5rem;
   }
   
-  .search-bar-left,
-  .search-bar-right {
+  .action-buttons-container {
     width: 100%;
   }
 }
diff --git a/src/styles/Pagination.css b/src/styles/Pagination.css
index 78209d7..2724134 100644
--- a/src/styles/Pagination.css
+++ b/src/styles/Pagination.css
@@ -87,18 +87,19 @@
   }
 }
 
-@media (max-width: 768px) {
-  .pagination-container {
-    min-width: 1200px; /* Maintain minimum width */
-    overflow-x: auto; /* Enable horizontal scroll */
-  }
-  
-  .pagination-container > div {
-    min-width: 600px; /* Maintain minimum width for content */
+/* Show total items text on screens 798px and wider */
+@media (min-width: 798px) {
+  .pagination-total-items {
+    display: block;
   }
 }
 
-@media (max-width: 480px) {
+/* Hide total items text on screens smaller than 798px */
+@media (max-width: 797px) {
+  .pagination-total-items {
+    display: none;
+  }
+  
   .pagination-container {
     min-width: 1200px; /* Maintain minimum width */
     overflow-x: auto; /* Enable horizontal scroll */