@@ -55,6 +55,10 @@ flex-direction: row;
   gap: 8px;
 }
 
+.moonbase-update-divider {
+  margin: 32px 0;
+}
+
 /* crash screen */
 .moonbase-crash-wrapper > [class^="buttons_"] {
   gap: 1rem;

@@ -6,6 +6,7 @@
 import React from "@moonlight-mod/wp/react";
 import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
 import { useStateFromStoresObject } from "@moonlight-mod/wp/discord/packages/flux";
+import * as Components from "@moonlight-mod/wp/discord/components/common/index";
 
 import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
 import { ExtensionCompat } from "@moonlight-mod/core/extension/loader";
@@ -67,11 +68,9 @@ (ext.compat === ExtensionCompat.InvalidApiLevel && ext.hasUpdate))
   );
 
   // Prioritize extensions with updates
-  filtered.sort((a, b) => {
-    if (a.hasUpdate && !b.hasUpdate) return -1;
-    if (!a.hasUpdate && b.hasUpdate) return 1;
-    return 0;
-  });
+  const filteredWithUpdates = filtered.filter((ext) => ext!.hasUpdate);
+  const filteredWithoutUpdates = filtered.filter((ext) => !ext!.hasUpdate);
+  const { FormDivider } = Components;
 
   return (
     <>
@@ -89,7 +88,14 @@ spellCheck: "false"
         }}
       />
       <FilterBar filter={filter} setFilter={setFilter} selectedTags={selectedTags} setSelectedTags={setSelectedTags} />
-      {filtered.map((ext) => (
+
+      {filteredWithUpdates.map((ext) => (
+        <ExtensionCard uniqueId={ext.uniqueId} key={ext.uniqueId} />
+      ))}
+      {filteredWithUpdates.length > 0 && filteredWithoutUpdates.length > 0 && (
+        <FormDivider className="moonbase-update-divider" />
+      )}
+      {filteredWithoutUpdates.map((ext) => (
         <ExtensionCard uniqueId={ext.uniqueId} key={ext.uniqueId} />
       ))}
     </>