diff --git a/src/lib/components/CollapsibleSection.svelte b/src/lib/components/CollapsibleSection.svelte
index f7f674bfa..7c72ef3c5 100644
--- a/src/lib/components/CollapsibleSection.svelte
+++ b/src/lib/components/CollapsibleSection.svelte
@@ -9,7 +9,15 @@
   import type { Snippet } from "svelte";
   import { slide } from "svelte/transition";
 
-  let { id, class: className, children, subtitle }: { id: string; class?: string; children?: Snippet; subtitle?: Snippet } = $props();
+  type Props = {
+    id: string;
+    class?: string;
+    order?: number;
+    children?: Snippet;
+    subtitle?: Snippet;
+  };
+
+  let { id, class: className, order, children, subtitle }: Props = $props();
   let sectionElement = $state<HTMLElement>();
 
   let transormedID = $derived.by(() => {
@@ -31,7 +39,7 @@
 </script>
 
 <Collapsible.Root asChild let:builder bind:open={() => $collapsePreferences[transormedID.toLowerCase()] ?? true, (v) => ($collapsePreferences[transormedID.toLowerCase()] = v)}>
-  <section bind:this={sectionElement} id={transormedID} use:builder.action {...builder} class={cn("scroll-m-32", className)}>
+  <section id={transormedID} class={cn("order-[--order] scroll-m-32", className)} style="--order: {order};" bind:this={sectionElement} use:builder.action {...builder}>
     <Collapsible.Trigger class="flex items-center justify-between">
       {#if !subtitle}
         <SectionTitle>{id}</SectionTitle>
diff --git a/src/lib/layouts/stats/Main.svelte b/src/lib/layouts/stats/Main.svelte
index f764c6b41..0fca703b0 100644
--- a/src/lib/layouts/stats/Main.svelte
+++ b/src/lib/layouts/stats/Main.svelte
@@ -7,7 +7,7 @@
   import PlayerProfile from "$lib/layouts/stats/PlayerProfile.svelte";
   import Skills from "$lib/layouts/stats/Skills.svelte";
   import Stats from "$lib/layouts/stats/Stats.svelte";
-  import SectionsLazy from "$lib/sections/SectionsLazy.svelte";
+  import SectionsEager from "$lib/sections/SectionsEager.svelte";
   import { flyAndScale } from "$lib/shared/utils";
   import { itemContent, showItem } from "$lib/stores/internal";
   import { Dialog } from "bits-ui";
@@ -44,14 +44,12 @@
       <Navbar />
     {/await}
 
-    <div class="space-y-5 p-4 @[75rem]/parent:p-8">
+    <div class="flex flex-col flex-nowrap gap-y-5 p-4 @[75rem]/parent:p-8">
       {#await import('$lib/components/APINotice.svelte') then { default: Notice }}
         <Notice />
       {/await}
 
-      <SectionsLazy />
-
-      <!-- <SectionsEager /> -->
+      <SectionsEager />
     </div>
   </main>
 </div>
diff --git a/src/lib/sections/SectionsEager.svelte b/src/lib/sections/SectionsEager.svelte
index 1c5f29016..0894cf959 100644
--- a/src/lib/sections/SectionsEager.svelte
+++ b/src/lib/sections/SectionsEager.svelte
@@ -3,7 +3,7 @@
   import Accessories from "$lib/sections/stats/Accessories.svelte";
   import Bestiary from "$lib/sections/stats/Bestiary.svelte";
   import Collections from "$lib/sections/stats/Collections.svelte";
-  import Crimson_Isle from "$lib/sections/stats/CrimsonIsle.svelte";
+  import CrimsonIsle from "$lib/sections/stats/CrimsonIsle.svelte";
   import Dungeons from "$lib/sections/stats/Dungeons.svelte";
   import Inventory from "$lib/sections/stats/Inventory.svelte";
   import Minions from "$lib/sections/stats/Minions.svelte";
@@ -13,36 +13,57 @@
   import Skills from "$lib/sections/stats/SkillsSection.svelte";
   import Slayer from "$lib/sections/stats/Slayer.svelte";
   import Weapons from "$lib/sections/stats/Weapons.svelte";
-  import type { SectionComponentsEager, SectionName } from "$lib/sections/types";
+  import type { SectionName } from "$lib/sections/types";
   import { sectionOrderPreferences } from "$lib/stores/preferences";
   import Armor from "./stats/Armor.svelte";
 
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
 
-  const sectionComponents: SectionComponentsEager = $derived({
-    Armor: profile.items && profile.items.armor && profile.items.equipment && profile.items.wardrobe ? Armor : null,
-    Weapons: profile.items && profile.items.weapons ? Weapons : null,
-    Accessories: profile.accessories ? Accessories : null,
-    Pets: profile.pets ? Pets : null,
-    Inventory: profile.items ? Inventory : null,
-    Skills: profile.skills ? Skills : null,
-    Dungeons: profile.dungeons ? Dungeons : null,
-    Slayer: profile.slayer ? Slayer : null,
-    Minions: profile.minions ? Minions : null,
-    Bestiary: profile.bestiary ? Bestiary : null,
-    Collections: profile.collections ? Collections : null,
-    Crimson_Isle: profile.crimson_isle ? Crimson_Isle : null,
-    Rift: profile.rift ? Rift : null,
-    Misc: profile.misc ? Misc : null
-  });
+  function findIndex(id: SectionName) {
+    return $sectionOrderPreferences.findIndex((section) => section.name === id);
+  }
 </script>
 
-{#each $sectionOrderPreferences as sectionId (sectionId.id)}
-  {@const Component = sectionComponents[sectionId.name as SectionName]}
-  {#if Component !== null}
-    <Component />
-  {:else}
-    <p>Something went wrong</p>
-  {/if}
-{/each}
+{#if profile.items && profile.items.armor && profile.items.equipment && profile.items.wardrobe}
+  <Armor order={findIndex("Armor")} />
+{/if}
+{#if profile.items && profile.items.weapons}
+  <Weapons order={findIndex("Weapons")} />
+{/if}
+{#if profile.accessories}
+  <Accessories order={findIndex("Accessories")} />
+{/if}
+{#if profile.pets}
+  <Pets order={findIndex("Pets")} />
+{/if}
+{#if profile.items}
+  <Inventory order={findIndex("Inventory")} />
+{/if}
+{#if profile.skills}
+  <Skills order={findIndex("Skills")} />
+{/if}
+{#if profile.dungeons}
+  <Dungeons order={findIndex("Dungeons")} />
+{/if}
+{#if profile.slayer}
+  <Slayer order={findIndex("Slayer")} />
+{/if}
+{#if profile.minions}
+  <Minions order={findIndex("Minions")} />
+{/if}
+{#if profile.bestiary}
+  <Bestiary order={findIndex("Bestiary")} />
+{/if}
+{#if profile.collections}
+  <Collections order={findIndex("Collections")} />
+{/if}
+{#if profile.crimson_isle}
+  <CrimsonIsle order={findIndex("Crimson_Isle")} />
+{/if}
+{#if profile.rift}
+  <Rift order={findIndex("Rift")} />
+{/if}
+{#if profile.misc}
+  <Misc order={findIndex("Misc")} />
+{/if}
diff --git a/src/lib/sections/stats/Accessories.svelte b/src/lib/sections/stats/Accessories.svelte
index 02e0adb1b..9ae53c296 100644
--- a/src/lib/sections/stats/Accessories.svelte
+++ b/src/lib/sections/stats/Accessories.svelte
@@ -12,13 +12,15 @@
   import { Collapsible } from "bits-ui";
   import ChevronDown from "lucide-svelte/icons/chevron-down";
 
+  let { order }: { order: number } = $props();
+
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
   const accessories = $derived(profile.accessories);
 </script>
 
 {#if accessories.magicalPower?.total}
-  <CollapsibleSection id="Accessories">
+  <CollapsibleSection id="Accessories" {order}>
     <Items>
       {#snippet text()}
         <div>
diff --git a/src/lib/sections/stats/Armor.svelte b/src/lib/sections/stats/Armor.svelte
index 3559da3a0..c1391a88a 100644
--- a/src/lib/sections/stats/Armor.svelte
+++ b/src/lib/sections/stats/Armor.svelte
@@ -9,6 +9,8 @@
   import { cn } from "$lib/shared/utils";
   import { ScrollArea } from "bits-ui";
 
+  let { order }: { order: number } = $props();
+
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
 
@@ -18,7 +20,7 @@
   const firstWardrobeItems = $derived(wardrobe.map((wardrobeItems) => wardrobeItems.find((piece) => piece)));
 </script>
 
-<CollapsibleSection id="Armor">
+<CollapsibleSection id="Armor" {order}>
   <Items>
     {#snippet text()}
       {#if armor.armor.length > 0 && !armor.armor.every((piece) => !piece.display_name)}
diff --git a/src/lib/sections/stats/Bestiary.svelte b/src/lib/sections/stats/Bestiary.svelte
index 7b541a389..aaed9d2e2 100644
--- a/src/lib/sections/stats/Bestiary.svelte
+++ b/src/lib/sections/stats/Bestiary.svelte
@@ -7,13 +7,15 @@
   import { cn } from "$lib/shared/utils";
   import { format } from "numerable";
 
+  let { order }: { order: number } = $props();
+
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
 
   const bestiary = $derived(profile.bestiary);
 </script>
 
-<CollapsibleSection id="Bestiary">
+<CollapsibleSection id="Bestiary" {order}>
   <Items class="flex-col">
     {#snippet text()}
       <div>
diff --git a/src/lib/sections/stats/Collections.svelte b/src/lib/sections/stats/Collections.svelte
index 728eeeb07..00969c16d 100644
--- a/src/lib/sections/stats/Collections.svelte
+++ b/src/lib/sections/stats/Collections.svelte
@@ -7,13 +7,15 @@
   import { cn } from "$lib/shared/utils";
   import { format } from "numerable";
 
+  let { order }: { order: number } = $props();
+
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
 
   const collections = $derived(profile.collections);
 </script>
 
-<CollapsibleSection id="Collections">
+<CollapsibleSection id="Collections" {order}>
   <Items class="flex-col">
     {#snippet text()}
       <div>
diff --git a/src/lib/sections/stats/CrimsonIsle.svelte b/src/lib/sections/stats/CrimsonIsle.svelte
index dc66d1aa5..9a302e362 100644
--- a/src/lib/sections/stats/CrimsonIsle.svelte
+++ b/src/lib/sections/stats/CrimsonIsle.svelte
@@ -9,13 +9,15 @@
   import { cn } from "$lib/shared/utils";
   import { format } from "numerable";
 
+  let { order }: { order: number } = $props();
+
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
 
   const isle = $derived(profile.crimson_isle);
 </script>
 
-<CollapsibleSection id="Crimson Isle">
+<CollapsibleSection id="Crimson Isle" {order}>
   <Items class="flex-col">
     {#snippet text()}
       <div>
diff --git a/src/lib/sections/stats/Dungeons.svelte b/src/lib/sections/stats/Dungeons.svelte
index 9e193475f..6e4a2dfe6 100644
--- a/src/lib/sections/stats/Dungeons.svelte
+++ b/src/lib/sections/stats/Dungeons.svelte
@@ -12,12 +12,14 @@
   import Image from "lucide-svelte/icons/image";
   import { format } from "numerable";
 
+  let { order }: { order: number } = $props();
+
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
   const dungeons = $derived(profile.dungeons);
 </script>
 
-<CollapsibleSection id="Dungeons">
+<CollapsibleSection id="Dungeons" {order}>
   <div class="space-y-4">
     {#if dungeons.unlocked === false}
       <p class="space-x-0.5 leading-6">{profile.username} hasn't unlocked Dungeons yet.</p>
diff --git a/src/lib/sections/stats/Inventory.svelte b/src/lib/sections/stats/Inventory.svelte
index 04af2b0a7..9da4eb840 100644
--- a/src/lib/sections/stats/Inventory.svelte
+++ b/src/lib/sections/stats/Inventory.svelte
@@ -9,6 +9,9 @@
   import { writable } from "svelte/store";
   import { crossfade, fade } from "svelte/transition";
 
+  let { order }: { order: number } = $props();
+  let openStorageTab = writable<string>("0");
+
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
 
@@ -83,7 +86,11 @@
     ].filter((tab) => tab.items.length > 0)
   );
 
-  let openStorageTab = writable<string>("0");
+  const [send, receive] = crossfade({
+    duration: 300,
+    easing: cubicInOut
+  });
+
   $effect(() => {
     if ($openTab === "storage") {
       openStorageTab.set("0");
@@ -91,14 +98,9 @@
       openStorageTab.set("19");
     }
   });
-
-  const [send, receive] = crossfade({
-    duration: 300,
-    easing: cubicInOut
-  });
 </script>
 
-<CollapsibleSection id="Inventory">
+<CollapsibleSection id="Inventory" {order}>
   {#if tabs.length > 0}
     <Tabs.Root bind:value={$openTab} class="relative mb-0 rounded-lg bg-background/30 p-5 pt-4 @container">
       <Tabs.List>
diff --git a/src/lib/sections/stats/Minions.svelte b/src/lib/sections/stats/Minions.svelte
index e85840aa7..1cbc98ef4 100644
--- a/src/lib/sections/stats/Minions.svelte
+++ b/src/lib/sections/stats/Minions.svelte
@@ -9,6 +9,8 @@
   import { Avatar, Button } from "bits-ui";
   import ExternalLink from "lucide-svelte/icons/external-link";
 
+  let { order }: { order: number } = $props();
+
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
 
@@ -18,7 +20,7 @@
   const arabicTiers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
 </script>
 
-<CollapsibleSection id="Minions">
+<CollapsibleSection id="Minions" {order}>
   <Items class="flex-col">
     {#snippet text()}
       <div>
diff --git a/src/lib/sections/stats/MiscSection.svelte b/src/lib/sections/stats/MiscSection.svelte
index b0dbbbcf2..c5334be4a 100644
--- a/src/lib/sections/stats/MiscSection.svelte
+++ b/src/lib/sections/stats/MiscSection.svelte
@@ -15,9 +15,11 @@
   import Races from "./misc/races.svelte";
   import Uncategorized from "./misc/uncategorized.svelte";
   import Upgrades from "./misc/upgrades.svelte";
+
+  let { order }: { order: number } = $props();
 </script>
 
-<CollapsibleSection id="Miscellaneous" class="mb-4">
+<CollapsibleSection id="Miscellaneous" class="mb-4" {order}>
   <Essence />
   <!-- TODO: Essence Shop -->
   <Kills />
diff --git a/src/lib/sections/stats/Pets.svelte b/src/lib/sections/stats/Pets.svelte
index 4a93c1f86..bc34d2f05 100644
--- a/src/lib/sections/stats/Pets.svelte
+++ b/src/lib/sections/stats/Pets.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
+  import { getProfileCtx } from "$ctx/profile.svelte";
   import AdditionStat from "$lib/components/AdditionStat.svelte";
   import Bonus from "$lib/components/Bonus.svelte";
+  import CollapsibleSection from "$lib/components/CollapsibleSection.svelte";
   import Item from "$lib/components/Item.svelte";
   import SectionSubtitle from "$lib/components/SectionSubtitle.svelte";
   import Items from "$lib/layouts/stats/Items.svelte";
-
-  import { getProfileCtx } from "$ctx/profile.svelte";
-  import CollapsibleSection from "$lib/components/CollapsibleSection.svelte";
   import { formatNumber, getRarityClass, renderLore, uniqBy } from "$lib/shared/helper";
   import { cn } from "$lib/shared/utils";
   import { Collapsible } from "bits-ui";
   import ChevronDown from "lucide-svelte/icons/chevron-down";
 
+  let { order }: { order: number } = $props();
+
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
   const pets = $derived(profile.pets);
@@ -21,7 +22,7 @@
 </script>
 
 {#if pets.pets?.length}
-  <CollapsibleSection id="Pets">
+  <CollapsibleSection id="Pets" {order}>
     <Items>
       {#snippet text()}
         <div>
diff --git a/src/lib/sections/stats/Rift.svelte b/src/lib/sections/stats/Rift.svelte
index 4c0bd55df..7e6baf5b8 100644
--- a/src/lib/sections/stats/Rift.svelte
+++ b/src/lib/sections/stats/Rift.svelte
@@ -9,13 +9,15 @@
   import { formatDate, formatDistanceToNowStrict } from "date-fns";
   import { format } from "numerable";
 
+  let { order }: { order: number } = $props();
+
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
 
   const rift = $derived(profile.rift);
 </script>
 
-<CollapsibleSection id="Rift">
+<CollapsibleSection id="Rift" {order}>
   <Items class="flex-col">
     {#snippet text()}
       <div>
diff --git a/src/lib/sections/stats/SkillsSection.svelte b/src/lib/sections/stats/SkillsSection.svelte
index 4567badf9..3ad7ab1d9 100644
--- a/src/lib/sections/stats/SkillsSection.svelte
+++ b/src/lib/sections/stats/SkillsSection.svelte
@@ -6,11 +6,13 @@
   import Fishing from "./skills/fishing.svelte";
   import Mining from "./skills/mining.svelte";
 
+  let { order }: { order: number } = $props();
+
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
 </script>
 
-<CollapsibleSection id="Skills" class="pt-4">
+<CollapsibleSection id="Skills" class="pt-4" {order}>
   {#if profile.items && profile.items.mining_tools && profile.mining}
     <Mining />
   {:else}
diff --git a/src/lib/sections/stats/Slayer.svelte b/src/lib/sections/stats/Slayer.svelte
index c9d851917..5b066da3f 100644
--- a/src/lib/sections/stats/Slayer.svelte
+++ b/src/lib/sections/stats/Slayer.svelte
@@ -8,12 +8,14 @@
   import Image from "lucide-svelte/icons/image";
   import { format } from "numerable";
 
+  let { order }: { order: number } = $props();
+
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
   const slayer = $derived(profile.slayer);
 </script>
 
-<CollapsibleSection id="Slayer">
+<CollapsibleSection id="Slayer" {order}>
   <div class="space-y-4">
     {#if slayer.unlocked === false}
       <p class="space-x-0.5 leading-6">{profile.username} hasn't unlocked Slayers yet.</p>
diff --git a/src/lib/sections/stats/Weapons.svelte b/src/lib/sections/stats/Weapons.svelte
index d53d72aa2..85df2c9ec 100644
--- a/src/lib/sections/stats/Weapons.svelte
+++ b/src/lib/sections/stats/Weapons.svelte
@@ -5,11 +5,13 @@
   import Items from "$lib/layouts/stats/Items.svelte";
   import { renderLore } from "$lib/shared/helper";
 
+  let { order }: { order: number } = $props();
+
   const ctx = getProfileCtx();
   const profile = $derived(ctx.profile);
 </script>
 
-<CollapsibleSection id="Weapons">
+<CollapsibleSection id="Weapons" {order}>
   <Items>
     {#snippet text()}
       <div>