diff --git a/packages/backend/src/bot/dto/get-recommended-shards.dto.ts b/packages/backend/src/bot/dto/get-recommended-shards.dto.ts
index 51efa76..07a1c48 100644
--- a/packages/backend/src/bot/dto/get-recommended-shards.dto.ts
+++ b/packages/backend/src/bot/dto/get-recommended-shards.dto.ts
@@ -8,3 +8,5 @@ export const GetRecommendedShardsSchema = z.object({
 });
 
 export class GetRecommendedShardsZodDto extends createZodDto(GetRecommendedShardsSchema) {}
+
+export type GetRecommendedShardsDto = z.infer<typeof GetRecommendedShardsSchema>;
diff --git a/packages/backend/src/index.dto.ts b/packages/backend/src/index.dto.ts
index ab25549..ca28742 100644
--- a/packages/backend/src/index.dto.ts
+++ b/packages/backend/src/index.dto.ts
@@ -6,6 +6,7 @@ export { loginSchema } from './auth/schemas/login.schema.js';
 export { CreateBotSchema, type CreateBotDto } from './bot/dto/create-bot.dto.js';
 export { UpdateBotSchema, type UpdateBotDto } from './bot/dto/update-bot.dto.js';
 export { GetBotSchema, type GetBotDto } from './bot/dto/get-bot.dto.js';
+export { GetRecommendedShardsSchema, type GetRecommendedShardsDto } from './bot/dto/get-recommended-shards.dto.js';
 
 export { SseIntervalQuerySchema } from './clusters/dto/sse-interval-query.dto.js';
 export { ClusterIdParamSchema, type ClusterIdParamDto } from './clusters/dto/cluster-id-param.dto.js';
diff --git a/packages/frontend/src/lib/remotes/bot.remote.ts b/packages/frontend/src/lib/remotes/bot.remote.ts
index 7788f5d..0332912 100644
--- a/packages/frontend/src/lib/remotes/bot.remote.ts
+++ b/packages/frontend/src/lib/remotes/bot.remote.ts
@@ -1,18 +1,21 @@
 import { command, form, getRequestEvent, query } from "$app/server";
 import { env } from "$env/dynamic/private";
-import { CreateBotSchema, UpdateBotSchema, type GetBotDto } from "@hallmaster/backend/dto";
+import {
+  CreateBotSchema,
+  UpdateBotSchema,
+  type GetBotDto,
+  type GetRecommendedShardsDto,
+} from "@hallmaster/backend/dto";
 import { error, redirect } from "@sveltejs/kit";
 
 import { getClusters } from "./clusters.remote";
 
 export const createBot = form(CreateBotSchema, async (payload) => {
-  const token = getRequestEvent().cookies.get("token");
-
-  const response = await fetch(`${env.API_URL}/bot`, {
+  const response = await fetch(new URL("/bot", env.API_URL), {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${getRequestEvent().cookies.get("token")}`,
     },
     body: JSON.stringify(payload),
   });
@@ -26,18 +29,17 @@ export const createBot = form(CreateBotSchema, async (payload) => {
       return error(409, "A bot already exists");
 
     default:
+      console.error(await response.text());
       return error(500, "An error occurred");
   }
 });
 
 export const getBot = query<GetBotDto>(async () => {
-  const token = getRequestEvent().cookies.get("token");
-
   const response = await fetch(new URL("/bot", env.API_URL), {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${getRequestEvent().cookies.get("token")}`,
     },
   });
 
@@ -50,18 +52,39 @@ export const getBot = query<GetBotDto>(async () => {
       return redirect(303, "/setup");
 
     default:
+      console.error(await response.text());
       return error(500, "An error occurred");
   }
 });
 
-export const updateBotToken = form(UpdateBotSchema.pick({ token: true }), async (payload) => {
-  const token = getRequestEvent().cookies.get("token");
+export const getRecommendedShards = query<GetRecommendedShardsDto["shards"]>(async () => {
+  const response = await fetch(new URL("/bot/recommended-shards", env.API_URL), {
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${getRequestEvent().cookies.get("token")}`,
+    },
+  });
 
+  switch (response.status) {
+    case 200:
+      return ((await response.json()) as GetRecommendedShardsDto).shards;
+    case 401:
+      return redirect(303, "/login");
+    case 404:
+      return redirect(303, "/setup");
+
+    default:
+      console.error(await response.text());
+      return error(500, "An error occurred");
+  }
+});
+
+export const updateBotToken = form(UpdateBotSchema.pick({ token: true }), async (payload) => {
   const response = await fetch(new URL("/bot", env.API_URL), {
     method: "PATCH",
     headers: {
       "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${getRequestEvent().cookies.get("token")}`,
     },
     body: JSON.stringify(payload),
   });
@@ -82,20 +105,18 @@ export const updateBotToken = form(UpdateBotSchema.pick({ token: true }), async
 });
 
 export const updateBotImage = form(UpdateBotSchema.pick({ dockerImage: true }), async (payload) => {
-  const token = getRequestEvent().cookies.get("token");
-
   const response = await fetch(new URL("/bot", env.API_URL), {
     method: "PATCH",
     headers: {
       "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${getRequestEvent().cookies.get("token")}`,
     },
     body: JSON.stringify(payload),
   });
 
   switch (response.status) {
     case 202:
-      getBot().set(await response.json());
+      getBot().set((await response.json()) as GetBotDto);
       return;
     case 401:
       return redirect(303, "/login");
@@ -109,13 +130,11 @@ export const updateBotImage = form(UpdateBotSchema.pick({ dockerImage: true }),
 });
 
 export const updateBotLayout = command(UpdateBotSchema.pick({ layout: true }), async (payload) => {
-  const token = getRequestEvent().cookies.get("token");
-
   const response = await fetch(new URL("/bot", env.API_URL), {
     method: "PATCH",
     headers: {
       "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
+      Authorization: `Bearer ${getRequestEvent().cookies.get("token")}`,
     },
     body: JSON.stringify(payload),
   });
diff --git a/packages/frontend/src/lib/utils/LayoutManager.svelte.ts b/packages/frontend/src/lib/utils/LayoutManager.svelte.ts
index 71a4e11..17b12b6 100644
--- a/packages/frontend/src/lib/utils/LayoutManager.svelte.ts
+++ b/packages/frontend/src/lib/utils/LayoutManager.svelte.ts
@@ -1,115 +1,117 @@
 import type { GetClusterDto, UpdateBotDto } from "@hallmaster/backend/dto";
 
-class Shard {
-  public id: GetClusterDto["shardIds"][number];
-  public mutation: "unchanged" | "added" | "deleted" | "moved";
-
-  constructor(id: typeof this.id, mutation: typeof this.mutation = "unchanged") {
-    this.id = $state(id);
-    this.mutation = $state(mutation);
-  }
-}
-
 class Cluster {
-  public readonly shards: Shard[];
-  public mutation: "unchanged" | "added" | "deleted" = $state("unchanged");
+  public current: Set<number>;
+  public readonly previous: Set<number>;
+  public shards = $state<Map<number, "unchanged" | "deleted" | "moved" | "added">>();
+  public state = $state<"unchanged" | "changed" | "deleted" | "added">("unchanged");
 
   constructor(
     private readonly manager: LayoutManager,
-    shards: Shard[],
-    public readonly id?: number,
+    shards: NonNullable<typeof this.shards>,
+    public readonly id?: GetClusterDto["id"],
   ) {
-    this.shards = $state(shards);
-  }
+    const ids = shards.keys().toArray();
+    this.current = new Set(ids);
 
-  private findById(id: GetClusterDto["shardIds"][number]) {
-    const index = this.shards.findIndex((shard) => shard.id === id && shard.mutation !== "deleted");
+    if (id === undefined) {
+      this.previous = new Set();
+      this.state = "added";
+    } else this.previous = new Set(ids);
 
-    return {
-      index,
-      shard: index !== -1 ? this.shards[index] : undefined,
-    };
+    this.shards = shards;
   }
 
-  public add() {
-    if (this.mutation === "deleted") return;
+  public update() {
+    const unchanged = this.current.intersection(this.previous);
+    const deleted = this.previous.difference(this.current);
+    const moved = this.manager.clusters
+      .filter((cluster) => cluster !== this)
+      .map((cluster) => cluster.previous.intersection(this.current))
+      .flatMap((set) => Array.from(set));
+    const added = this.current.difference(new Set([...unchanged, ...moved]));
+
+    const entries = [
+      ...unchanged.values().map((id) => [id, "unchanged"] as const),
+      ...deleted.values().map((id) => [id, "deleted"] as const),
+      ...moved.map((id) => [id, "moved"] as const),
+      ...added.values().map((id) => [id, "added"] as const),
+    ].sort((a, b) => a[0] - b[0]);
+
+    this.shards = new Map(entries);
+
+    if (this.current.size === 0) this.state = "deleted";
+    else if (this.previous.size === 0) this.state = "added";
+    else if (deleted.size + moved.length + added.size !== 0) this.state = "changed";
+    else this.state = "unchanged";
+  }
 
-    this.shards.push(new Shard(this.manager.maxShardId + 1, "added"));
+  public add() {
+    this.current.add(this.manager.maxShardId + 1);
+    this.update();
   }
 
-  public remove(id: GetClusterDto["shardIds"][number]) {
-    const { shard, index } = this.findById(id);
-    if (!shard) return;
+  public pop(update: boolean = true) {
+    const id = Math.max(...this.current);
+    this.current.delete(id);
 
-    if (shard.mutation === "added") this.shards.splice(index, 1);
-    else {
-      shard.id = 0;
-      shard.mutation = "deleted";
+    for (const cluster of this.manager.clusters) {
+      cluster.decrement(id);
+      if (update) cluster.update();
     }
+  }
 
-    for (const shard of this.manager.shards) if (shard.id > id) shard.id--;
+  public decrement(id: GetClusterDto["shardIds"][number]) {
+    this.current = new Set(this.current.values().map((shard) => (shard > id ? shard - 1 : shard)));
   }
 
-  public move(id: GetClusterDto["shardIds"][number], cluster: number) {
-    const { shard, index } = this.findById(id);
-    if (!shard) return;
+  public clear() {
+    while (this.current.size) this.pop(false);
 
-    shard.mutation = "moved";
-    this.manager.clusters[cluster].shards.push(this.shards.splice(index, 1)[0]);
+    for (const cluster of this.manager.clusters) cluster.update();
   }
 }
 
 export class LayoutManager {
-  public clusters: Cluster[] = $state([]);
-
-  constructor(data: Omit<GetClusterDto, "status">[]) {
-    this.clusters = data
-      .map(
-        (cluster) =>
-          new Cluster(
-            this,
-            cluster.shardIds.map((id) => new Shard(id)),
-            cluster.id,
-          ),
-      )
-      .sort((a, b) => (a.id ?? 0) - (b.id ?? 0));
-  }
-
-  public get maxShardId(): number {
-    return Math.max(
-      ...this.clusters.flatMap((cluster) => cluster.shards.map((shard) => shard.id)),
-      -1,
+  public clusters: Cluster[];
+
+  constructor(private readonly data: Omit<GetClusterDto, "status">[]) {
+    this.clusters = $state(
+      this.data.map(
+        ({ id, shardIds }) =>
+          new Cluster(this, new Map(shardIds.map((id) => [id, "unchanged"])), id),
+      ),
     );
   }
 
-  public get shards(): Shard[] {
-    return this.clusters.flatMap((cluster) => cluster.shards);
+  public get maxShardId(): number {
+    return Math.max(...this.clusters.flatMap(({ current }) => Array.from(current)), -1);
   }
 
-  public add() {
-    const cluster = new Cluster(this, [new Shard(this.maxShardId + 1, "added")]);
-    cluster.mutation = "added";
-
-    this.clusters.push(cluster);
+  public add(length: number = 1) {
+    const max = this.maxShardId + 1;
+    this.clusters.push(
+      new Cluster(this, new Map(Array.from({ length }).map((_, index) => [max + index, "added"]))),
+    );
   }
 
   public remove(index: number) {
     const cluster = this.clusters[index];
+    const isAdded = cluster.state === "added";
 
-    for (const { id } of cluster.shards.toReversed()) cluster.remove(id);
+    cluster.clear();
+    if (isAdded) this.clusters.splice(index, 1);
+  }
 
-    if (cluster.mutation === "added") this.clusters.splice(index, 1);
-    else cluster.mutation = "deleted";
+  public reset() {
+    this.clusters = this.data.map(
+      ({ id, shardIds }) => new Cluster(this, new Map(shardIds.map((id) => [id, "unchanged"])), id),
+    );
   }
 
   public export(): NonNullable<UpdateBotDto["layout"]> {
     return this.clusters
-      .filter((cluster) => cluster.mutation !== "deleted" && cluster.shards.length !== 0)
-      .map((cluster) => ({
-        id: cluster.id,
-        shardIds: cluster.shards
-          .filter((shard) => shard.mutation !== "deleted")
-          .map((shard) => shard.id),
-      }));
+      .filter((cluster) => cluster.state !== "deleted")
+      .map(({ id, current }) => ({ id, shardIds: Array.from(current) }));
   }
 }
diff --git a/packages/frontend/src/routes/(app)/layout/+layout.svelte b/packages/frontend/src/routes/(app)/layout/+layout.svelte
index abcf864..34afb0c 100644
--- a/packages/frontend/src/routes/(app)/layout/+layout.svelte
+++ b/packages/frontend/src/routes/(app)/layout/+layout.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
+  import { appbar } from "../+layout.svelte";
   import type { LayoutProps } from "./$types";
 
   let { children }: LayoutProps = $props();
 </script>
 
-<main class="flex flex-col gap-4 max-w-6xl mx-auto">
+{@render appbar(["Administration", "Layout"])}
+
+<main class="mx-auto flex max-w-6xl flex-col gap-4">
   {@render children()}
 </main>
diff --git a/packages/frontend/src/routes/(app)/layout/+page.svelte b/packages/frontend/src/routes/(app)/layout/+page.svelte
index 2620a21..0c5328c 100644
--- a/packages/frontend/src/routes/(app)/layout/+page.svelte
+++ b/packages/frontend/src/routes/(app)/layout/+page.svelte
@@ -1,126 +1,51 @@
 <script lang="ts">
-  import { updateBotLayout } from "$lib/remotes/bot.remote";
+  import BoundaryFailed from "$lib/components/BoundaryFailed.svelte";
   import { getClusters } from "$lib/remotes/clusters.remote";
   import { LayoutManager } from "$lib/utils/LayoutManager.svelte";
-  import toaster from "$lib/utils/toaster";
-  import {
-    BoxesIcon,
-    LoaderCircleIcon,
-    PlusIcon,
-    SaveIcon,
-    XIcon,
-  } from "@lucide/svelte";
+  import { PlusIcon } from "@lucide/svelte";
 
-  let data = $derived(
-    (await getClusters()).map(({ id, shardIds }) => ({
-      id,
-      shardIds,
-    })),
-  );
-
-  let layout = $derived(new LayoutManager(data));
+  import Actions from "./components/Actions.svelte";
+  import Cluster from "./components/Cluster.svelte";
+  import RecommendedShards from "./components/RecommendedShards.svelte";
 </script>
 
-<div class="flex justify-end items-center">
-  <button
-    class="btn-icon bg-surface-50-950 text-primary-700-300"
-    onclick={() => {
-      updateBotLayout({ layout: layout.export() }).catch((error) => {
-        toaster.create({
-          type: "error",
-          title: "Error",
-          description: JSON.parse(error).message,
-        });
-      });
-    }}
-    disabled={!!updateBotLayout.pending}
-  >
-    {#if updateBotLayout.pending}
-      <LoaderCircleIcon class="animate-spin" strokeWidth={1.5} />
-    {:else}
-      <SaveIcon strokeWidth={1.5} />
-    {/if}
-  </button>
-</div>
+{#snippet actionRow(layout?: LayoutManager)}
+  <div class="flex items-center justify-between">
+    <RecommendedShards />
+    <Actions {layout} />
+  </div>
+{/snippet}
 
-<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
-  {#each layout.clusters as cluster, index}
-    {@const columns = Math.round(
-      Math.sqrt((cluster.shards.length + 1) * (16 / 8)),
-    )}
-    {@const rows = Math.ceil((cluster.shards.length + 1) / columns)}
-    <div
-      class={{
-        "aspect-video flex flex-col p-2 rounded-lg gap-2 border bg-surface-100-900": true,
-        "border-surface-200-800": cluster.mutation === "unchanged",
-        "border-error-600-400": cluster.mutation === "deleted",
-        "border-success-600-400": cluster.mutation === "added",
-      }}
-    >
-      <div class="flex justify-between">
-        <div class="flex gap-1 items-center pl-2">
-          <BoxesIcon size={18} class="text-primary-800-200" />
-          <h3 class="font-bold text-surface-800-200">
-            Cluster {String(index).padStart(2, "0")}
-            <span class="text-surface-500 text-sm"
-              >({cluster.shards.length})</span
-            >
-          </h3>
-        </div>
+<svelte:boundary>
+  {let data = $state(await getClusters())}
+  {let layout = $derived(new LayoutManager(data))}
+
+  {@render actionRow(layout)}
 
-        <button
-          class="btn-icon btn-icon-sm hover:text-error-800-200 hover:bg-surface-100-900 transition-colors"
-          onclick={() => layout.remove(index)}
-        >
-          <XIcon />
-        </button>
-      </div>
+  <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-3">
+    {#each layout.clusters as cluster, index}
+      <Cluster {index} {layout} {cluster} />
+    {/each}
+
+    <button
+      class="btn flex aspect-video rounded-lg bg-surface-50-950 btn-lg text-surface-700-300 hover:text-primary-700-300"
+      onclick={() => layout.add()}
+    >
+      <PlusIcon />
+    </button>
+  </div>
 
-      <div
-        class={[
-          "grow grid gap-1.5",
-          "*:@container *:rounded-lg *:flex *:justify-center *:items-center",
-        ]}
-        style:grid-template-columns={`repeat(${columns}, 1fr)`}
-        style:grid-template-rows={`repeat(${rows}, 1fr)`}
-      >
-        {#each cluster.shards as shard}
-          <button
-            class={{
-              "btn border border-surface-300-700 bg-surface-200-800 hover:text-error-700-300": true,
-              "text-surface-700-300": shard.mutation === "unchanged",
-              "text-error-700-300": shard.mutation === "deleted",
-              "text-success-700-300": shard.mutation === "added",
-              "text-primary-700-300": shard.mutation === "moved",
-            }}
-            onclick={() => cluster.remove(shard.id)}
-          >
-            <p
-              class="truncate font-bold"
-              style:font-size="clamp(0px, 40cqw, 2em)"
-            >
-              {String(shard.id).padStart(2, "0")}
-            </p>
-          </button>
-        {/each}
+  {#snippet pending()}
+    {@render actionRow()}
 
-        {#if cluster.mutation !== "deleted"}
-          <button
-            class="btn text-surface-700-300 hover:text-primary-700-300 hover:bg-surface-100-900"
-            style:font-size="clamp(0px, 40cqw, 2em)"
-            onclick={() => cluster.add()}
-          >
-            <PlusIcon />
-          </button>
-        {/if}
-      </div>
+    <div class="grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-3">
+      {#each { length: 6 }}
+        <div class="flex aspect-video placeholder animate-pulse"></div>
+      {/each}
     </div>
-  {/each}
+  {/snippet}
 
-  <button
-    class="btn btn-lg aspect-video flex rounded-lg bg-surface-50-950 text-surface-700-300 hover:text-primary-700-300"
-    onclick={() => layout.add()}
-  >
-    <PlusIcon />
-  </button>
-</div>
+  {#snippet failed(error, reset)}
+    <BoundaryFailed {error} {reset} />
+  {/snippet}
+</svelte:boundary>
diff --git a/packages/frontend/src/routes/(app)/layout/components/Actions.svelte b/packages/frontend/src/routes/(app)/layout/components/Actions.svelte
new file mode 100644
index 0000000..53a7311
--- /dev/null
+++ b/packages/frontend/src/routes/(app)/layout/components/Actions.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import ConfirmButton from "$lib/components/ConfirmButton.svelte";
+  import { updateBotLayout } from "$lib/remotes/bot.remote";
+  import type { LayoutManager } from "$lib/utils/LayoutManager.svelte";
+  import toaster from "$lib/utils/toaster";
+  import { SaveIcon } from "@lucide/svelte";
+
+  interface Props {
+    layout?: LayoutManager;
+  }
+
+  let { layout }: Props = $props();
+
+  let changed = $derived(layout?.clusters.some(({ state }) => state !== "unchanged") ?? false);
+</script>
+
+<div class="flex items-center gap-1">
+  <ConfirmButton
+    icon={{ icon: SaveIcon, strokeWidth: 1.5, size: 16 }}
+    label="Save changes"
+    class="preset-filled-primary-500 btn-sm"
+    disabled={!changed || !!updateBotLayout.pending}
+    onclick={() => {
+      toaster.promise(updateBotLayout({ layout: layout!.export() }), {
+        loading: { title: "Updating layout.." },
+        success: { title: "Successfully applied layout" },
+        error: (error) => ({
+          title: "Error",
+          description: JSON.parse(error as string)?.message ?? "An error occurred",
+        }),
+      });
+    }}
+  />
+
+  <button
+    class="btn btn-sm not-disabled:hover:underline"
+    onclick={() => layout?.reset()}
+    disabled={!changed}
+  >
+    <span>Reset</span>
+  </button>
+</div>
diff --git a/packages/frontend/src/routes/(app)/layout/components/Cluster.svelte b/packages/frontend/src/routes/(app)/layout/components/Cluster.svelte
new file mode 100644
index 0000000..a4a59c8
--- /dev/null
+++ b/packages/frontend/src/routes/(app)/layout/components/Cluster.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+  import Widget from "$lib/components/Widget.svelte";
+  import { LayoutManager } from "$lib/utils/LayoutManager.svelte";
+  import { ContainerIcon, CopyIcon, MinusIcon, PlusIcon } from "@lucide/svelte";
+
+  import Shard from "./Shard.svelte";
+
+  interface Props {
+    index: number;
+    layout: LayoutManager;
+    cluster: LayoutManager["clusters"][number];
+  }
+
+  let { index, layout, cluster }: Props = $props();
+</script>
+
+{const columns = $derived(Math.round(Math.sqrt((cluster.shards!.size + 1) * (16 / 8))))}
+{const rows = $derived(Math.ceil((cluster.shards!.size + 1) / columns))}
+
+<Widget
+  icon={ContainerIcon}
+  title={`Cluster ${String(index).padStart(2, "0")}`}
+  value={cluster
+    .shards!.values()
+    .filter((state) => state !== "deleted")
+    .toArray().length}
+  class={{
+    "flex aspect-video flex-col gap-2 rounded-lg border bg-surface-100-900 p-2": true,
+    "border-surface-200-800": cluster.state === "unchanged" || cluster.state === "changed",
+    "border-error-600-400": cluster.state === "deleted",
+    "border-success-600-400": cluster.state === "added",
+  }}
+>
+  {#snippet action()}
+    {#if cluster.state !== "deleted"}
+      <div class="flex gap-1">
+        <button
+          class="btn-icon btn-icon-sm transition-colors hover:bg-surface-100-900 hover:text-error-800-200"
+          onclick={() => layout.remove(index)}
+        >
+          <MinusIcon />
+        </button>
+        <button
+          class="btn-icon btn-icon-sm transition-colors hover:bg-surface-100-900"
+          onclick={() => layout.add(cluster.current.size)}
+        >
+          <CopyIcon />
+        </button>
+      </div>
+    {/if}
+  {/snippet}
+
+  <div
+    class={[
+      "grid grow gap-1.5 overflow-y-auto",
+      "*:@container *:flex *:items-center *:justify-center *:rounded-lg",
+    ]}
+    style:grid-template-columns="repeat({columns}, 1fr)"
+    style:grid-template-rows="repeat({rows}, 1fr)"
+  >
+    {#each cluster.shards as [id, state]}
+      <Shard {id} {state} />
+    {/each}
+
+    {#if cluster.state !== "deleted"}
+      <div class={["flex", "*:h-full *:w-full *:p-0"]}>
+        <button
+          class="btn-icon rounded-r-none text-surface-700-300 hover:bg-surface-100-900 hover:text-error-700-300"
+          style:font-size="clamp(0.625rem, 30cqw, 2em)"
+          onclick={() => cluster.pop()}
+        >
+          <MinusIcon />
+        </button>
+        <button
+          class="btn-icon rounded-l-none text-surface-700-300 hover:bg-surface-100-900 hover:text-primary-700-300"
+          style:font-size="clamp(0.625rem, 30cqw, 2em)"
+          onclick={() => cluster.add()}
+        >
+          <PlusIcon />
+        </button>
+      </div>
+    {/if}
+  </div>
+</Widget>
diff --git a/packages/frontend/src/routes/(app)/layout/components/RecommendedShards.svelte b/packages/frontend/src/routes/(app)/layout/components/RecommendedShards.svelte
new file mode 100644
index 0000000..7c74b13
--- /dev/null
+++ b/packages/frontend/src/routes/(app)/layout/components/RecommendedShards.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { getRecommendedShards } from "$lib/remotes/bot.remote";
+  import { InfoIcon, RotateCcwIcon } from "@lucide/svelte";
+  import { Portal, Tooltip } from "@skeletonlabs/skeleton-svelte";
+</script>
+
+<Tooltip>
+  <Tooltip.Trigger>
+    <span class="badge text-primary-600-400">
+      <InfoIcon size={14} />
+      <span class="inline-flex items-center gap-1">
+        Recommended amount:
+        <svelte:boundary>
+          <span class="font-bold">{await getRecommendedShards()}</span>
+
+          {#snippet pending()}
+            <div class="size-[1em] placeholder animate-pulse rounded-sm"></div>
+          {/snippet}
+
+          {#snippet failed(_, reset)}
+            <button class="chip-icon preset-tonal p-1" onclick={() => reset()}>
+              <RotateCcwIcon size={12} />
+            </button>
+          {/snippet}
+        </svelte:boundary>
+      </span>
+    </span>
+  </Tooltip.Trigger>
+  <Portal>
+    <Tooltip.Positioner>
+      <Tooltip.Content
+        class="card border border-surface-200-800 preset-filled-surface-100-900 px-2 py-1 shadow"
+      >
+        <blockquote class="blockquote text-surface-800-200">
+          Recommended number of shards based on bot size
+        </blockquote>
+      </Tooltip.Content>
+    </Tooltip.Positioner>
+  </Portal>
+</Tooltip>
diff --git a/packages/frontend/src/routes/(app)/layout/components/Shard.svelte b/packages/frontend/src/routes/(app)/layout/components/Shard.svelte
new file mode 100644
index 0000000..4107e70
--- /dev/null
+++ b/packages/frontend/src/routes/(app)/layout/components/Shard.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { LayoutManager } from "$lib/utils/LayoutManager.svelte";
+
+  type Shards = NonNullable<LayoutManager["clusters"][number]["shards"]>;
+  interface Props {
+    id: Parameters<Shards["get"]>[0];
+    state: NonNullable<ReturnType<Shards["get"]>>;
+  }
+
+  let { id, state }: Props = $props();
+</script>
+
+<div
+  class="border border-surface-300-700 bg-surface-200-800"
+  class:text-surface-700-300={state === "unchanged"}
+  class:text-error-700-300={state === "deleted"}
+  class:text-success-700-300={state === "added"}
+  class:text-primary-700-300={state === "moved"}
+>
+  <p
+    class="truncate font-bold"
+    class:line-through={state === "deleted"}
+    style:font-size="clamp(0.625rem, 30cqw, 2em)"
+  >
+    {String(id).padStart(2, "0")}
+  </p>
+</div>