diff --git a/src/pages/plugins/item.js b/src/pages/plugins/item.js
index 27df0b509..48479a3d1 100644
--- a/src/pages/plugins/item.js
+++ b/src/pages/plugins/item.js
@@ -26,6 +26,7 @@ export default function Item({
   installed,
   enabled,
   onToggleEnabled,
+  updates,
 }) {
   const authorName = (() => {
     const displayName =
@@ -98,12 +99,10 @@ export default function Item({
           {price !== null && price !== undefined && price !== 0 ? (
             <span className="plugin-price">₹{price}</span>
           ) : null}
-          {/* Enable/Disable Toggle */}
-          {installed && (
+          {installed && !updates ? (
             <span
               className="plugin-toggle-switch"
               data-enabled={enabled}
-              // style={{ marginLeft: 12, display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer',  zIndex: 100 }}
               onclick={e => {
                 e.stopPropagation();
                 onToggleEnabled?.(id, enabled);
@@ -112,33 +111,11 @@ export default function Item({
               <span
                 className="plugin-toggle-track"
                 data-enabled={enabled}
-                // style={{
-                //   width: 36,
-                //   height: 20,
-                //   borderRadius: 12,
-                //   background: enabled ? '#4ade80' : '#d1d5db',
-                //   position: 'relative',
-                //   transition: 'background 0.2s',
-                //   display: 'inline-block',
-                // }}
               >
-                <span
-                  className="plugin-toggle-thumb"
-                  // style={{
-                  //   position: 'absolute',
-                  //   left: enabled ? 18 : 2,
-                  //   top: 2,
-                  //   width: 16,
-                  //   height: 16,
-                  //   borderRadius: '50%',
-                  //   background: '#fff',
-                  //   boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
-                  //   transition: 'left 0.2s',
-                  // }}
-                />
+                <span className="plugin-toggle-thumb" />
               </span>
             </span>
-          )}
+          ) : null}
         </div>
       </div>
     </div>
diff --git a/src/pages/plugins/plugins.js b/src/pages/plugins/plugins.js
index 7ea82f8eb..735e225f6 100644
--- a/src/pages/plugins/plugins.js
+++ b/src/pages/plugins/plugins.js
@@ -50,6 +50,7 @@ export default function PluginsInclude(updates) {
   let isLoading = false;
   let hasMore = true;
   let isSearching = false;
+  let currentFilter = null;
   const LIMIT = 50;
 
   Contextmenu({
@@ -81,26 +82,32 @@ export default function PluginsInclude(updates) {
         downloads: strings.most_downloaded,
       };
       const filterName = filterNames[item];
+      currentFilter = item;
+      currentPage = 1;
+      hasMore = true;
+      isLoading = false;
+      plugins.all = []; // Reset the all plugins array
       render("all");
-      getFilteredPlugins(item).then((plugins) => {
-        $list.all.replaceChildren();
-        $list.all.append(
-          <div className="filter-message">
-            Filter for <strong>{filterName}</strong>
-            <span
-              className="icon clearclose"
-              data-action="clear-filter"
-              onclick={() => {
-                $list.all.replaceChildren();
-                getAllPlugins();
-              }}
-            ></span>
-          </div>,
-        );
-        plugins.forEach((plugin) => {
-          $list.all.append(<Item {...plugin} />);
-        });
-      });
+      $list.all.replaceChildren();
+      $list.all.append(
+        <div className="filter-message">
+          Filtered by <strong>{filterName}</strong>
+          <span
+            className="icon clearclose"
+            data-action="clear-filter"
+            onclick={() => {
+              currentFilter = null;
+              currentPage = 1;
+              hasMore = true;
+              isLoading = false;
+              plugins.all = []; // Reset the all plugins array
+              $list.all.replaceChildren();
+              getAllPlugins();
+            }}
+          ></span>
+        </div>,
+      );
+      getFilteredPlugins(item);
     },
   });
 
@@ -153,8 +160,12 @@ export default function PluginsInclude(updates) {
     if (isLoading || !hasMore || isSearching) return;
 
     const { scrollTop, scrollHeight, clientHeight } = e.target;
-    if (scrollTop + clientHeight >= scrollHeight - 100) {
-        await getAllPlugins();
+    if (scrollTop + clientHeight >= scrollHeight - 50) {
+        if (currentFilter) {
+          await getFilteredPlugins(currentFilter);
+        } else {
+          await getAllPlugins();
+        }
     }
   })
 
@@ -237,6 +248,7 @@ export default function PluginsInclude(updates) {
       currentPage = 1;
       hasMore = true;
       isLoading = false;
+      plugins.all = []; // Reset the all plugins array
       $list.all.replaceChildren();
       getAllPlugins();
     }
@@ -274,21 +286,56 @@ export default function PluginsInclude(updates) {
   }
 
   async function getFilteredPlugins(filterName) {
+    if (isLoading || !hasMore) return;
+    
     try {
+      isLoading = true;
+      $list.all.setAttribute("empty-msg", strings["loading..."]);
+      
       let response;
       if (filterName === "top_rated") {
-        response = await fetch(`${constants.API_BASE}/plugins?explore=random`);
+        response = await fetch(`${constants.API_BASE}/plugins?explore=random&page=${currentPage}&limit=${LIMIT}`);
       } else {
         response = await fetch(
-          `${constants.API_BASE}/plugin?orderBy=${filterName}`,
+          `${constants.API_BASE}/plugin?orderBy=${filterName}&page=${currentPage}&limit=${LIMIT}`,
         );
       }
-      return await response.json();
+      const fetchedPlugins = await response.json();
+      
+      if (fetchedPlugins.length < LIMIT) {
+        hasMore = false;
+      }
+      
+      const installed = await fsOperation(PLUGIN_DIR).lsDir();
+      const disabledMap = settings.value.pluginsDisabled || {};
+      
+      installed.forEach(({ url }) => {
+        const plugin = fetchedPlugins.find(({ id }) => id === Url.basename(url));
+        if (plugin) {
+          plugin.installed = true;
+          plugin.enabled = disabledMap[plugin.id] !== true;
+          plugin.onToggleEnabled = onToggleEnabled;
+          plugin.localPlugin = getLocalRes(plugin.id, "plugin.json");
+        }
+      });
+      
+      // Add plugins to the all plugins array 
+      plugins.all.push(...fetchedPlugins);
+      
+      const fragment = document.createDocumentFragment();
+      fetchedPlugins.forEach((plugin) => {
+        fragment.append(<Item {...plugin} updates={updates} />);
+      });
+      $list.all.append(fragment);
+      
+      currentPage++;
+      $list.all.setAttribute("empty-msg", strings["no plugins found"]);
     } catch (error) {
       $list.all.setAttribute("empty-msg", strings["error"]);
       window.log("error", "Failed to filter plugins:");
       window.log("error", error);
-      return [];
+    } finally {
+      isLoading = false;
     }
   }
 
@@ -308,17 +355,26 @@ export default function PluginsInclude(updates) {
       }
 
       const installed = await fsOperation(PLUGIN_DIR).lsDir();
+      const disabledMap = settings.value.pluginsDisabled || {};
+      
       installed.forEach(({ url }) => {
         const plugin = newPlugins.find(({ id }) => id === Url.basename(url));
         if (plugin) {
           plugin.installed = true;
+          plugin.enabled = disabledMap[plugin.id] !== true;
+          plugin.onToggleEnabled = onToggleEnabled;
           plugin.localPlugin = getLocalRes(plugin.id, "plugin.json");
         }
       });
 
+      // Add plugins to the all plugins array
+      plugins.all.push(...newPlugins);
+      
+      const fragment = document.createDocumentFragment();
       newPlugins.forEach((plugin) => {
-        $list.all.append(<Item {...plugin} />);
+        fragment.append(<Item {...plugin} updates={updates} />);
       });
+      $list.all.append(fragment);
 
       currentPage++;
       $list.all.setAttribute("empty-msg", strings["no plugins found"]);
@@ -347,7 +403,7 @@ export default function PluginsInclude(updates) {
         plugin.onToggleEnabled = onToggleEnabled;
         plugins.installed.push(plugin);
         if ($list.installed.get(`[data-id=\"${id}\"]`)) return;
-        $list.installed.append(<Item {...plugin} />);
+        $list.installed.append(<Item {...plugin} updates={updates} />);
       }),
     );
     $list.installed.setAttribute("empty-msg", strings["no plugins found"]);
@@ -356,14 +412,22 @@ export default function PluginsInclude(updates) {
   async function getOwned() {
     $list.owned.setAttribute("empty-msg", strings["loading..."]);
     const purchases = await helpers.promisify(iap.getPurchases);
+    const disabledMap = settings.value.pluginsDisabled || {};
+    
     purchases.forEach(async ({ productIds }) => {
       const [sku] = productIds;
       const url = Url.join(constants.API_BASE, "plugin/owned", sku);
       const plugin = await fsOperation(url).readFile("json");
       const isInstalled = plugins.installed.find(({ id }) => id === plugin.id);
       plugin.installed = !!isInstalled;
+      
+      if (plugin.installed) {
+        plugin.enabled = disabledMap[plugin.id] !== true;
+        plugin.onToggleEnabled = onToggleEnabled;
+      }
+      
       plugins.owned.push(plugin);
-      $list.owned.append(<Item {...plugin} />);
+      $list.owned.append(<Item {...plugin} updates={updates} />);
     });
     $list.owned.setAttribute("empty-msg", strings["no plugins found"]);
   }
@@ -392,7 +456,7 @@ export default function PluginsInclude(updates) {
 
     const existingItem = $list.installed.get(`[data-id="${plugin.id}"]`);
     if (!existingItem) {
-      $list.installed.append(<Item {...plugin} />);
+      $list.installed.append(<Item {...plugin} updates={updates} />);
     }
 
   }
@@ -456,17 +520,39 @@ export default function PluginsInclude(updates) {
       window.toast(strings["plugin_enabled"] || "Plugin enabled");
     }
 
-    // Update the plugin object's state
-     const plugin = plugins.installed.find(p => p.id === id);
-     if (plugin) {
-       plugin.enabled = !enabled;
-
-       // Re-render the specific item
-       const $existingItem = $list.installed.get(`[data-id="${id}"]`);
-       if ($existingItem) {
-         const $newItem = <Item {...plugin} />;
-         $existingItem.replaceWith($newItem);
-       }
+    // Update the plugin object's state in all plugin arrays
+     const installedPlugin = plugins.installed.find(p => p.id === id);
+     if (installedPlugin) {
+       installedPlugin.enabled = !enabled;
+     }
+     
+     const allPlugin = plugins.all.find(p => p.id === id);
+     if (allPlugin) {
+       allPlugin.enabled = !enabled;
+     }
+     
+     const ownedPlugin = plugins.owned.find(p => p.id === id);
+     if (ownedPlugin) {
+       ownedPlugin.enabled = !enabled;
+     }
+
+     // Re-render the specific item in all tabs
+     const $installedItem = $list.installed.get(`[data-id="${id}"]`);
+     if ($installedItem && installedPlugin) {
+       const $newItem = <Item {...installedPlugin} updates={updates} />;
+       $installedItem.replaceWith($newItem);
+     }
+     
+     const $allItem = $list.all.get(`[data-id="${id}"]`);
+     if ($allItem && allPlugin) {
+       const $newItem = <Item {...allPlugin} updates={updates} />;
+       $allItem.replaceWith($newItem);
+     }
+     
+     const $ownedItem = $list.owned.get(`[data-id="${id}"]`);
+     if ($ownedItem && ownedPlugin) {
+       const $newItem = <Item {...ownedPlugin} updates={updates} />;
+       $ownedItem.replaceWith($newItem);
      }
   }
 }
diff --git a/src/pages/plugins/plugins.scss b/src/pages/plugins/plugins.scss
index 5ca44702d..8bcc0194f 100644
--- a/src/pages/plugins/plugins.scss
+++ b/src/pages/plugins/plugins.scss
@@ -1,74 +1,106 @@
 #plugins {
   display: flex;
   flex-direction: column;
+  height: 100%;
 
   .filter-message {
-    font-size: 18px;
+    font-size: 0.9rem;
     font-weight: 500;
     color: var(--popup-text-color);
-    padding: 10px;
+    padding: 1rem 1.25rem;
     border-bottom: 1px solid var(--border-color);
-    box-shadow: 0 0 10px var(--box-shadow-color);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     display: flex;
     justify-content: space-between;
     align-items: center;
+    background: var(--secondary-color);
+    border-radius: 8px 8px 0 0;
+    margin-bottom: 2px;
 
     strong {
       color: var(--link-text-color);
-      margin-left: 5px;
+      margin-left: 0.25rem;
     }
 
     span {
       margin-left: auto;
-      padding: 5px;
+      padding: 0.5rem;
+      border-radius: 6px;
+      transition: all 0.2s ease;
 
       &:hover {
         cursor: pointer;
         background-color: var(--error-text-color);
+        transform: scale(1.05);
       }
     }
   }
 
-  .list:empty::after {
-    content: attr(empty-msg);
+  .list {
+    overflow-y: auto;
+    padding: 0.5rem 0;
+    
+    &:empty::after {
+      content: attr(empty-msg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 200px;
+      color: var(--secondary-text-color);
+      font-size: 0.9rem;
+      font-style: italic;
+    }
   }
 
   .list-item {
-    margin: 0;
+    margin: 0 0.75rem 0.5rem 0.75rem;
     background: var(--secondary-color);
-    padding: 0.55rem;
-    transition: background-color 0.15s ease;
+    padding: 1rem;
+    border-radius: 12px;
+    transition: all 0.2s ease;
     display: flex;
     align-items: center;
-    overflow-x: hidden;
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+    position: relative;
 
     &:hover {
-      background: color-mix(in srgb, var(--primary-color) 20%, transparent);
+      background: color-mix(in srgb, var(--primary-color) 12%, transparent);
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      border-color: var(--active-color);
+    }
+
+    &:active {
+      transform: translateY(0);
     }
 
     .plugin-header {
       display: flex;
       align-items: center;
-      gap: 0.75rem;
+      gap: 1rem;
       width: 100%;
       max-width: 100%;
       height: fit-content;
-      min-height: 32px;
+      min-height: 48px;
 
       .plugin-icon {
-        width: 32px;
-        height: 32px;
-        border-radius: 6px;
+        width: 48px;
+        height: 48px;
+        border-radius: 12px;
         flex-shrink: 0;
         overflow: hidden;
         display: flex;
         align-items: center;
         justify-content: center;
+        background: var(--primary-color);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 
         img {
           width: 100%;
           height: 100%;
-          object-fit: contain;
+          object-fit: cover;
           object-position: center;
         }
       }
@@ -79,7 +111,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 0.75rem;
+        gap: 1rem;
         margin: 0;
         height: fit-content;
 
@@ -90,55 +122,55 @@
           .plugin-title {
             display: flex;
             align-items: center;
-            gap: 0.5rem;
+            gap: 0.75rem;
             min-width: 0;
+            margin-bottom: 0.375rem;
 
             .plugin-name {
-              font-weight: 500;
-              font-size: 0.94rem;
+              font-weight: 600;
+              font-size: 1rem;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
               min-width: 0;
-              max-width: calc(100% - 50px);
+              max-width: calc(100% - 60px);
+              color: var(--primary-text-color);
             }
 
             .plugin-version {
-              color: color-mix(in srgb, var(--secondary-text-color) 80%, black);
+              color: var(--secondary-text-color);
               font-size: 0.75rem;
-              padding: 0.125rem 0.375rem;
+              font-weight: 500;
+              padding: 0.25rem 0.5rem;
               background: var(--primary-color);
-              border-radius: 4px;
+              border-radius: 6px;
               white-space: nowrap;
               flex-shrink: 0;
             }
           }
 
           .plugin-meta {
-            font-size: 0.81rem;
-            color: color-mix(in srgb, var(--secondary-text-color) 80%, black);
+            font-size: 0.875rem;
+            color: var(--secondary-text-color);
             display: flex;
             flex-wrap: wrap;
-            gap: 0.375rem;
+            gap: 0.5rem;
             align-items: center;
 
             .plugin-meta-dot {
-              width: 3px;
-              height: 3px;
-              background: color-mix(
-                in srgb,
-                var(--secondary-text-color) 80%,
-                black
-              );
+              width: 4px;
+              height: 4px;
+              background: var(--secondary-text-color);
               border-radius: 50%;
               display: inline-block;
+              opacity: 0.6;
             }
 
             .plugin-stats {
               display: flex;
               align-items: center;
-              gap: 0.25rem;
-              font-size: 0.81rem;
+              gap: 0.375rem;
+              font-size: 0.875rem;
 
               &.plugin-author {
                 max-width: 150px;
@@ -151,28 +183,30 @@
                 display: inline-flex;
                 align-items: center;
                 justify-content: center;
-                width: 12px;
-                height: 12px;
-                font-size: 12px;
+                width: 14px;
+                height: 14px;
+                font-size: 14px;
                 line-height: 1;
                 flex-shrink: 0;
+                opacity: 0.8;
               }
             }
           }
         }
 
         .plugin-price {
-          background: var(--primary-color);
-          color: var(--link-text-color);
-          padding: 0.25rem 0.5rem;
-          border-radius: 4px;
-          font-size: 0.75rem;
-          font-weight: 500;
+          background: var(--active-color);
+          color: var(--button-text-color);
+          padding: 0.375rem 0.75rem;
+          border-radius: 8px;
+          font-size: 0.875rem;
+          font-weight: 600;
           display: flex;
           align-items: center;
           gap: 0.25rem;
           flex-shrink: 0;
           height: fit-content;
+          box-shadow: 0 2px 4px var(--box-shadow-color);
         }
       }
     }
@@ -180,73 +214,143 @@
     .plugin-toggle-switch {
       display: flex !important;
       align-items: center;
-      gap: 4px;
+      gap: 0.5rem;
       cursor: pointer;
       z-index: 100;
-      min-width: 100px;
+      min-width: 120px;
       pointer-events: auto !important;
       position: relative;
       margin-left: auto;
       justify-content: flex-end;
+      padding: 0.5rem;
+      border-radius: 8px;
+      transition: background-color 0.2s ease;
+
+      &:hover {
+        background-color: var(--primary-color);
+      }
     }
 
     .plugin-toggle-track {
-      width: 36px;
-      height: 20px;
+      width: 44px;
+      height: 24px;
       border-radius: 12px;
-      background: #d1d5db;
+      background: #e5e7eb;
       position: relative;
-      transition: background 0.2s;
+      transition: all 0.3s ease;
       display: inline-block;
-      margin-right: 8px;
+      margin-right: 0.5rem;
+      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
     }
 
     .plugin-toggle-switch[data-enabled="true"] .plugin-toggle-track,
     .plugin-toggle-track[data-enabled="true"] {
       background: var(--active-color);
+      box-shadow: 0 2px 4px var(--box-shadow-color);
     }
 
     .plugin-toggle-thumb {
       position: absolute;
       left: 2px;
       top: 2px;
-      width: 16px;
-      height: 16px;
+      width: 20px;
+      height: 20px;
       border-radius: 50%;
-      background: #fff;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-      transition: left 0.2s;
+      background: white;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+      transition: all 0.3s ease;
     }
 
     .plugin-toggle-switch[data-enabled="true"] .plugin-toggle-thumb,
     .plugin-toggle-track[data-enabled="true"] .plugin-toggle-thumb {
-      left: 18px;
+      left: 22px;
     }
 
-    @media (max-width: 380px) {
+    // Responsive design
+    @media (max-width: 768px) {
+      margin: 0 0.5rem 0.5rem 0.5rem;
+      padding: 0.875rem;
+
+      .plugin-header {
+        gap: 0.75rem;
+        min-height: 40px;
+
+        .plugin-icon {
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+        }
+
+        .plugin-info {
+          gap: 0.75rem;
+
+          .plugin-main {
+            .plugin-title {
+              .plugin-name {
+                font-size: 0.95rem;
+              }
+            }
+          }
+        }
+      }
+
+      .plugin-toggle-switch {
+        min-width: 100px;
+      }
+
+      .plugin-toggle-track {
+        width: 40px;
+        height: 22px;
+      }
+
+      .plugin-toggle-thumb {
+        width: 18px;
+        height: 18px;
+      }
+
+      .plugin-toggle-switch[data-enabled="true"] .plugin-toggle-thumb,
+      .plugin-toggle-track[data-enabled="true"] .plugin-toggle-thumb {
+        left: 20px;
+      }
+    }
+
+    @media (max-width: 480px) {
+      margin: 0 0.25rem 0.5rem 0.25rem;
+      padding: 0.75rem;
+
       .plugin-header {
         .plugin-info {
           flex-direction: column;
           align-items: flex-start;
+          gap: 0.5rem;
 
           .plugin-price {
-            margin-top: 4px;
+            margin-top: 0.25rem;
             align-self: flex-start;
           }
         }
       }
 
       .plugin-meta {
-        margin-top: 2px;
+        margin-top: 0.25rem;
 
         .plugin-meta-dot {
           display: none;
         }
 
         .plugin-stats {
-          margin-right: 8px;
+          margin-right: 0.5rem;
         }
       }
+
+      .plugin-toggle-switch {
+        position: absolute;
+        top: 0.75rem;
+        right: 0.75rem;
+        min-width: 80px;
+        padding: 0.25rem;
+      }
     }
   }
+
 }
diff --git a/src/sidebarApps/extensions/index.js b/src/sidebarApps/extensions/index.js
index f3716818a..1679e847a 100644
--- a/src/sidebarApps/extensions/index.js
+++ b/src/sidebarApps/extensions/index.js
@@ -30,6 +30,10 @@ const LIMIT = 50;
 let currentPage = 1;
 let hasMore = true;
 let isLoading = false;
+let currentFilter = null;
+let filterCurrentPage = 1;
+let filterHasMore = true;
+let isFilterLoading = false;
 
 const $header = (
 	<div className="header">
@@ -115,6 +119,16 @@ async function handleScroll(e) {
 	}
 }
 
+async function handleFilterScroll(e) {
+	if (isFilterLoading || !filterHasMore || !currentFilter) return;
+
+	const { scrollTop, scrollHeight, clientHeight } = e.target;
+
+	if (scrollTop + clientHeight >= scrollHeight - 50) {
+		await loadFilteredPlugins(currentFilter, false);
+	}
+}
+
 async function loadMorePlugins() {
 	try {
 		isLoading = true;
@@ -143,9 +157,47 @@ async function loadMorePlugins() {
 	}
 }
 
+async function loadFilteredPlugins(filterName, isInitial = false) {
+	if (isFilterLoading || !filterHasMore) return;
+
+	try {
+		isFilterLoading = true;
+
+		const plugins = await getFilteredPlugins(filterName, filterCurrentPage);
+
+		if (plugins.length < LIMIT) {
+			filterHasMore = false;
+		}
+
+		installedPlugins = await listInstalledPlugins();
+		const pluginElements = plugins.map(ListItem);
+
+		if (isInitial) {
+			$searchResult.append(...pluginElements);
+		} else {
+			$searchResult.append(...pluginElements);
+		}
+
+		filterCurrentPage++;
+		updateHeight($searchResult);
+	} catch (error) {
+		window.log("error", "Error loading filtered plugins:");
+		window.log("error", error);
+	} finally {
+		isFilterLoading = false;
+	}
+}
+
 async function searchPlugin() {
 	clearTimeout(searchTimeout);
 	searchTimeout = setTimeout(async () => {
+		// Clear filter when searching
+		currentFilter = null;
+		filterCurrentPage = 1;
+		filterHasMore = true;
+		isFilterLoading = false;
+		$searchResult.onscroll = null;
+
 		$searchResult.content = "";
 		const status = helpers.checkAPIStatus();
 		if (!status) {
@@ -188,14 +240,17 @@ async function filterPlugins() {
 
 	$searchResult.content = "";
 	const filterParam = filterOptions[filterName];
+	currentFilter = filterParam;
+	filterCurrentPage = 1;
+	filterHasMore = true;
+	isFilterLoading = false;
 
 	try {
 		$searchResult.classList.add("loading");
-		const plugins = await getFilteredPlugins(filterParam);
 		const filterMessage = (
 			<div className="filter-message">
 				<span>
-					Filter for <strong>{filterName}</strong>
+					Filtered by <strong>{filterName}</strong>
 				</span>
 				<span
 					className="icon clearclose close-button"
@@ -204,11 +259,18 @@ async function filterPlugins() {
 				/>
 			</div>
 		);
-		$searchResult.content = [filterMessage, ...plugins.map(ListItem)];
+		$searchResult.content = [filterMessage];
+		$searchResult.onscroll = handleFilterScroll;
+		await loadFilteredPlugins(filterParam, true);
 		updateHeight($searchResult);
 
 		function clearFilter() {
+			currentFilter = null;
+			filterCurrentPage = 1;
+			filterHasMore = true;
+			isFilterLoading = false;
 			$searchResult.content = "";
+			$searchResult.onscroll = null;
 			updateHeight($searchResult);
 		}
 	} catch (error) {
@@ -221,7 +283,12 @@ async function filterPlugins() {
 }
 
 async function clearFilter() {
+	currentFilter = null;
+	filterCurrentPage = 1;
+	filterHasMore = true;
+	isFilterLoading = false;
 	$searchResult.content = "";
+	$searchResult.onscroll = null;
 }
 
 async function addSource() {
@@ -317,19 +384,22 @@ async function listInstalledPlugins() {
 	return plugins;
 }
 
-async function getFilteredPlugins(filterName) {
+async function getFilteredPlugins(filterName, page = 1) {
 	try {
 		let response;
 		if (filterName === "top_rated") {
-			response = await fetch(`${constants.API_BASE}/plugins?explore=random`);
+			response = await fetch(
+				`${constants.API_BASE}/plugins?explore=random&page=${page}&limit=${LIMIT}`,
+			);
 		} else {
 			response = await fetch(
-				`${constants.API_BASE}/plugin?orderBy=${filterName}`,
+				`${constants.API_BASE}/plugin?orderBy=${filterName}&page=${page}&limit=${LIMIT}`,
 			);
 		}
 		return await response.json();
 	} catch (error) {
 		window.log("error", error);
+		return [];
 	}
 }
 
diff --git a/src/sidebarApps/extensions/style.scss b/src/sidebarApps/extensions/style.scss
index 781127048..bbd7c87e0 100644
--- a/src/sidebarApps/extensions/style.scss
+++ b/src/sidebarApps/extensions/style.scss
@@ -3,8 +3,8 @@
 .container.extensions {
   .header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    flex-direction: column;
+    border-bottom: 1px solid var(--border-color);
 
     .title {
       font-size: 1.125rem;
@@ -13,22 +13,47 @@
       justify-content: space-between;
       align-items: center;
       width: 100%;
+      color: var(--primary-text-color);
 
       .icon-button {
         background: none;
         border: none;
         cursor: pointer;
         color: var(--primary-text-color);
-        padding: 5px;
-        margin-left: 15px;
-        border-radius: 50%;
-        transition: background-color 0.3s ease;
+        padding: 0.5rem;
+        margin-left: 0.5rem;
+        border-radius: 6px;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         &:hover {
-          background-color: var(--active-icon-color);
+          background-color: var(--primary-color);
         }
       }
     }
+
+    input[type="search"] {
+      width: 100%;
+      padding: 0.5rem;
+      border: 1px solid var(--border-color);
+      border-radius: 6px;
+      background: var(--secondary-color);
+      color: var(--primary-text-color);
+      font-size: 0.875rem;
+      transition: all 0.2s ease;
+
+      &:focus {
+        outline: none;
+        border-color: var(--active-color);
+        box-shadow: 0 0 0 2px rgba(51, 153, 255, 0.1);
+      }
+
+      &::placeholder {
+        color: var(--secondary-text-color);
+      }
+    }
   }
 
   .list.search-result {
@@ -42,22 +67,29 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      background-color: var(--primary-color);
-      padding: 5px;
+      background: var(--primary-color);
+      padding: 0.5rem 0.75rem;
       border-bottom: 1px solid var(--border-color);
+      font-size: 0.875rem;
+      color: var(--primary-text-color);
 
       strong {
-        color: var(--link-text-color);
+        color: var(--active-color);
+        margin-left: 0.25rem;
       }
 
       .close-button {
         background: none;
         border: none;
         cursor: pointer;
-        transition: color 0.3s;
+        padding: 0.25rem;
+        border-radius: 4px;
+        transition: all 0.2s ease;
+        color: var(--secondary-text-color);
 
         &:hover {
           background-color: var(--error-text-color);
+          color: white;
         }
       }
     }
@@ -114,6 +146,7 @@
       display: flex;
       align-items: center;
       justify-content: center;
+      box-shadow: 0 1px 3px var(--box-shadow-color);
 
       &:hover {
         background-color: var(--active-icon-color);
@@ -124,4 +157,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}