diff --git a/frontend/__tests__/components/common/Conditional.spec.tsx b/frontend/__tests__/components/common/Conditional.spec.tsx
deleted file mode 100644
index 267cdf13dfc8..000000000000
--- a/frontend/__tests__/components/common/Conditional.spec.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import { cleanup, render, screen } from "@solidjs/testing-library";
-import { createSignal } from "solid-js";
-import { afterEach, describe, expect, it } from "vitest";
-
-import { Conditional } from "../../../src/ts/components/common/Conditional";
-
-describe("Conditional", () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  describe("static rendering", () => {
-    it("renders then when if is true", () => {
-      render(() => <Conditional if={true} then={<div>then content</div>} />);
-
-      expect(screen.getByText("then content")).toBeInTheDocument();
-    });
-
-    it("renders then when if is a truthy object", () => {
-      render(() => (
-        <Conditional if={{ value: 42 }} then={<div>then content</div>} />
-      ));
-
-      expect(screen.getByText("then content")).toBeInTheDocument();
-    });
-
-    it("renders then when if is a truthy string", () => {
-      render(() => <Conditional if="hello" then={<div>then content</div>} />);
-
-      expect(screen.getByText("then content")).toBeInTheDocument();
-    });
-
-    it("renders else fallback when if is false", () => {
-      render(() => (
-        <Conditional
-          if={false}
-          then={<div>then content</div>}
-          else={<div>else content</div>}
-        />
-      ));
-
-      expect(screen.queryByText("then content")).not.toBeInTheDocument();
-      expect(screen.getByText("else content")).toBeInTheDocument();
-    });
-
-    it("renders else fallback when if is null", () => {
-      render(() => (
-        <Conditional
-          if={null}
-          then={<div>then content</div>}
-          else={<div>else content</div>}
-        />
-      ));
-
-      expect(screen.queryByText("then content")).not.toBeInTheDocument();
-      expect(screen.getByText("else content")).toBeInTheDocument();
-    });
-
-    it("renders else fallback when if is undefined", () => {
-      render(() => (
-        <Conditional
-          if={undefined}
-          then={<div>then content</div>}
-          else={<div>else content</div>}
-        />
-      ));
-
-      expect(screen.queryByText("then content")).not.toBeInTheDocument();
-      expect(screen.getByText("else content")).toBeInTheDocument();
-    });
-
-    it("renders else fallback when if is 0", () => {
-      render(() => (
-        <Conditional
-          if={0}
-          then={<div>then content</div>}
-          else={<div>else content</div>}
-        />
-      ));
-
-      expect(screen.queryByText("then content")).not.toBeInTheDocument();
-      expect(screen.getByText("else content")).toBeInTheDocument();
-    });
-
-    it("renders nothing when if is falsy and else is not provided", () => {
-      const { container } = render(() => (
-        <Conditional if={false} then={<div>then content</div>} />
-      ));
-
-      expect(screen.queryByText("then content")).not.toBeInTheDocument();
-      expect(container.firstChild).toBeNull();
-    });
-  });
-
-  describe("then as function", () => {
-    it("passes the truthy value to then function", () => {
-      const obj: { label: string } | null = { label: "hello" };
-      render(() => (
-        <Conditional if={obj} then={(value) => <div>{value().label}</div>} />
-      ));
-
-      expect(screen.getByText("hello")).toBeInTheDocument();
-    });
-
-    it("does not call then function when if is falsy", () => {
-      const obj: { label: string } | null = null;
-      render(() => (
-        <Conditional
-          if={obj}
-          then={<div>then content</div>}
-          else={<div>else content</div>}
-        />
-      ));
-
-      expect(screen.queryByText("then content")).not.toBeInTheDocument();
-      expect(screen.getByText("else content")).toBeInTheDocument();
-    });
-  });
-
-  describe("reactivity", () => {
-    it("switches from else to then when if becomes truthy", async () => {
-      const [condition, setCondition] = createSignal(false);
-
-      render(() => (
-        <Conditional
-          if={condition()}
-          then={<div>then content</div>}
-          else={<div>else content</div>}
-        />
-      ));
-
-      expect(screen.queryByText("then content")).not.toBeInTheDocument();
-      expect(screen.getByText("else content")).toBeInTheDocument();
-
-      setCondition(true);
-
-      expect(screen.getByText("then content")).toBeInTheDocument();
-      expect(screen.queryByText("else content")).not.toBeInTheDocument();
-    });
-
-    it("switches from then to else when if becomes falsy", async () => {
-      const [condition, setCondition] = createSignal(true);
-
-      render(() => (
-        <Conditional
-          if={condition()}
-          then={<div>then content</div>}
-          else={<div>else content</div>}
-        />
-      ));
-
-      expect(screen.getByText("then content")).toBeInTheDocument();
-
-      setCondition(false);
-
-      expect(screen.queryByText("then content")).not.toBeInTheDocument();
-      expect(screen.getByText("else content")).toBeInTheDocument();
-    });
-
-    it("then JSXElement updates reactively when inner signal changes", async () => {
-      const [label, setLabel] = createSignal("initial");
-
-      render(() => <Conditional if={true} then={<div>{label()}</div>} />);
-
-      expect(screen.getByText("initial")).toBeInTheDocument();
-
-      setLabel("updated");
-
-      expect(screen.getByText("updated")).toBeInTheDocument();
-    });
-
-    it("then JSXElement updates reactively when if changes from a signal", async () => {
-      const [data, setData] = createSignal<string | undefined>(undefined);
-
-      render(() => (
-        <Conditional
-          if={data()}
-          then={<div data-testid="content">{data()}</div>}
-          else={<div>no data</div>}
-        />
-      ));
-
-      expect(screen.getByText("no data")).toBeInTheDocument();
-      expect(screen.queryByTestId("content")).not.toBeInTheDocument();
-
-      setData("resolved");
-
-      expect(screen.getByTestId("content")).toHaveTextContent("resolved");
-      expect(screen.queryByText("no data")).not.toBeInTheDocument();
-    });
-
-    it("then function value accessor tracks reactive if", () => {
-      const [data, setData] = createSignal<{ name: string } | null>(null);
-
-      render(() => (
-        <Conditional
-          if={data()}
-          then={(value) => <div data-testid="content">{value().name}</div>}
-          else={<div>no data</div>}
-        />
-      ));
-
-      expect(screen.getByText("no data")).toBeInTheDocument();
-
-      setData({ name: "Alice" });
-
-      expect(screen.getByTestId("content")).toHaveTextContent("Alice");
-
-      setData({ name: "Bob" });
-
-      expect(screen.getByTestId("content")).toHaveTextContent("Bob");
-    });
-  });
-});
diff --git a/frontend/__tests__/components/common/anime/AnimeConditional.spec.tsx b/frontend/__tests__/components/common/anime/AnimeConditional.spec.tsx
deleted file mode 100644
index a120611baebf..000000000000
--- a/frontend/__tests__/components/common/anime/AnimeConditional.spec.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-import { cleanup, render, screen } from "@solidjs/testing-library";
-import { createSignal } from "solid-js";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-const { mockAnimate } = vi.hoisted(() => ({
-  mockAnimate: vi.fn().mockImplementation(() => ({
-    pause: vi.fn(),
-    then: vi.fn((cb: () => void) => {
-      cb();
-      return Promise.resolve();
-    }),
-  })),
-}));
-
-vi.mock("animejs", () => ({
-  animate: mockAnimate,
-}));
-
-vi.mock("../../../../src/ts/utils/misc", () => ({
-  applyReducedMotion: vi.fn((duration: number) => duration),
-}));
-
-import { AnimeConditional } from "../../../../src/ts/components/common/anime/AnimeConditional";
-
-describe("AnimeConditional", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    cleanup();
-  });
-
-  it("renders `then` content when `if` is truthy", () => {
-    render(() => (
-      <AnimeConditional
-        if={true}
-        then={<div data-testid="then-content">then</div>}
-        else={<div data-testid="else-content">else</div>}
-      />
-    ));
-
-    expect(screen.getByTestId("then-content")).toBeInTheDocument();
-    expect(screen.queryByTestId("else-content")).not.toBeInTheDocument();
-  });
-
-  it("renders `else` content when `if` is falsy", () => {
-    render(() => (
-      <AnimeConditional
-        if={false}
-        then={<div data-testid="then-content">then</div>}
-        else={<div data-testid="else-content">else</div>}
-      />
-    ));
-
-    expect(screen.queryByTestId("then-content")).not.toBeInTheDocument();
-    expect(screen.getByTestId("else-content")).toBeInTheDocument();
-  });
-
-  it("renders `else` content when `if` is null", () => {
-    render(() => (
-      <AnimeConditional
-        if={null}
-        then={<div data-testid="then-content">then</div>}
-        else={<div data-testid="else-content">else</div>}
-      />
-    ));
-
-    expect(screen.queryByTestId("then-content")).not.toBeInTheDocument();
-    expect(screen.getByTestId("else-content")).toBeInTheDocument();
-  });
-
-  it("switches reactively from `then` to `else`", () => {
-    const [condition, setCondition] = createSignal(true);
-
-    render(() => (
-      <AnimeConditional
-        if={condition()}
-        then={<div data-testid="then-content">then</div>}
-        else={<div data-testid="else-content">else</div>}
-      />
-    ));
-
-    expect(screen.getByTestId("then-content")).toBeInTheDocument();
-
-    setCondition(false);
-
-    expect(screen.queryByTestId("then-content")).not.toBeInTheDocument();
-    expect(screen.getByTestId("else-content")).toBeInTheDocument();
-  });
-
-  it("switches reactively from `else` to `then`", () => {
-    const [condition, setCondition] = createSignal(false);
-
-    render(() => (
-      <AnimeConditional
-        if={condition()}
-        then={<div data-testid="then-content">then</div>}
-        else={<div data-testid="else-content">else</div>}
-      />
-    ));
-
-    expect(screen.getByTestId("else-content")).toBeInTheDocument();
-
-    setCondition(true);
-
-    expect(screen.getByTestId("then-content")).toBeInTheDocument();
-    expect(screen.queryByTestId("else-content")).not.toBeInTheDocument();
-  });
-
-  it("supports `then` as a function and passes the truthy value", () => {
-    const obj = { label: "hello" };
-    render(() => (
-      <AnimeConditional
-        if={obj}
-        then={(value) => <div data-testid="fn-content">{value().label}</div>}
-      />
-    ));
-
-    expect(screen.getByTestId("fn-content")).toHaveTextContent("hello");
-  });
-
-  it("does not throw without `else` prop", () => {
-    expect(() => {
-      render(() => (
-        <AnimeConditional
-          if={true}
-          then={<div data-testid="then-content">then</div>}
-        />
-      ));
-    }).not.toThrow();
-
-    expect(screen.getByTestId("then-content")).toBeInTheDocument();
-  });
-
-  it("does not throw on mount/unmount", () => {
-    const [show, setShow] = createSignal(true);
-
-    expect(() => {
-      render(() => (
-        <AnimeConditional
-          if={show()}
-          then={<div>then</div>}
-          else={<div>else</div>}
-        />
-      ));
-    }).not.toThrow();
-
-    expect(() => setShow(false)).not.toThrow();
-    expect(() => setShow(true)).not.toThrow();
-  });
-
-  describe("default animations (opacity fade)", () => {
-    it("applies default opacity animate on `then` branch", () => {
-      render(() => <AnimeConditional if={true} then={<div>then</div>} />);
-
-      expect(mockAnimate).toHaveBeenCalledWith(
-        expect.any(HTMLElement),
-        expect.objectContaining({ opacity: 1, duration: 125 }),
-      );
-    });
-
-    it("applies default opacity initial state on `then` branch", () => {
-      render(() => <AnimeConditional if={true} then={<div>then</div>} />);
-
-      // Initial call: opacity:0 with duration:0
-      expect(mockAnimate).toHaveBeenCalledWith(
-        expect.any(HTMLElement),
-        expect.objectContaining({ opacity: 0, duration: 0 }),
-      );
-    });
-  });
-
-  describe("custom animeProps", () => {
-    it("uses custom animate params when animeProps provided", () => {
-      render(() => (
-        <AnimeConditional
-          if={true}
-          then={<div>then</div>}
-          animeProps={{
-            initial: { opacity: 0, translateY: -10 },
-            animate: { opacity: 1, translateY: 0, duration: 400 },
-            exit: { opacity: 0, translateY: -10, duration: 200 },
-          }}
-        />
-      ));
-
-      expect(mockAnimate).toHaveBeenCalledWith(
-        expect.any(HTMLElement),
-        expect.objectContaining({ opacity: 1, translateY: 0, duration: 400 }),
-      );
-    });
-
-    it("uses custom initial state when animeProps provided", () => {
-      render(() => (
-        <AnimeConditional
-          if={true}
-          then={<div>then</div>}
-          animeProps={{
-            initial: { opacity: 0, translateY: -10 },
-            animate: { opacity: 1, translateY: 0, duration: 400 },
-          }}
-        />
-      ));
-
-      // Initial state applied with duration:0
-      expect(mockAnimate).toHaveBeenCalledWith(
-        expect.any(HTMLElement),
-        expect.objectContaining({ opacity: 0, translateY: -10, duration: 0 }),
-      );
-    });
-  });
-
-  it("exitBeforeEnter prop does not throw on condition change", () => {
-    const [cond, setCond] = createSignal(true);
-
-    expect(() => {
-      render(() => (
-        <AnimeConditional
-          exitBeforeEnter
-          if={cond()}
-          then={<div>then</div>}
-          else={<div>else</div>}
-        />
-      ));
-    }).not.toThrow();
-
-    expect(() => setCond(false)).not.toThrow();
-  });
-});
diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx
index 45c65fbab2b3..4890f7635bd2 100644
--- a/frontend/src/ts/components/common/AsyncContent.tsx
+++ b/frontend/src/ts/components/common/AsyncContent.tsx
@@ -12,7 +12,6 @@ import {
 import { showErrorNotification } from "../../states/notifications";
 import { createErrorMessage } from "../../utils/error";
 import { typedKeys } from "../../utils/misc";
-import { Conditional } from "./Conditional";
 import { LoadingCircle } from "./LoadingCircle";
 
 type AsyncEntry<T> = {
@@ -154,15 +153,16 @@ export default function AsyncContent<T extends QueryMapping>(
               {loader()}
             </Show>
 
-            <Conditional
-              if={props.alwaysShowContent === true}
-              then={<>{props.children(value())}</>}
-              else={
+            <Show
+              when={props.alwaysShowContent === true}
+              fallback={
                 <Show when={allResolved(value())}>
                   {props.children(value())}
                 </Show>
               }
-            />
+            >
+              {props.children(value())}
+            </Show>
           </>
         }
       >
diff --git a/frontend/src/ts/components/common/Button.tsx b/frontend/src/ts/components/common/Button.tsx
index 6527f74c9643..4510ee5e90dc 100644
--- a/frontend/src/ts/components/common/Button.tsx
+++ b/frontend/src/ts/components/common/Button.tsx
@@ -2,7 +2,6 @@ import { JSXElement, Show } from "solid-js";
 
 import { cn } from "../../utils/cn";
 import { BalloonProps, buildBalloonHtmlProperties } from "./Balloon";
-import { Conditional } from "./Conditional";
 import { Fa, FaProps } from "./Fa";
 
 type BaseProps = {
@@ -80,35 +79,9 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
   };
 
   return (
-    <Conditional
-      if={isAnchor()}
-      then={
-        <a
-          class={getClasses()}
-          href={props.href}
-          target={
-            props["router-link"] || props.href?.startsWith("#")
-              ? undefined
-              : "_blank"
-          }
-          rel={
-            props["router-link"] || props.href?.startsWith("#")
-              ? undefined
-              : "noreferrer noopener"
-          }
-          {...balloonHtmlProps()}
-          {...(props["router-link"] ? { "router-link": "" } : {})}
-          onClick={(e) => props.onClick?.(e)}
-          onMouseEnter={(e) => props.onMouseEnter?.(e)}
-          onMouseLeave={(e) => props.onMouseLeave?.(e)}
-          data-ui-variant={variant()}
-          data-ui-element="button"
-          {...props.dataset}
-        >
-          {content}
-        </a>
-      }
-      else={
+    <Show
+      when={isAnchor()}
+      fallback={
         <button
           // oxlint-disable-next-line button-has-type
           type={(props as ButtonProps).type ?? "button"}
@@ -126,6 +99,31 @@ export function Button(props: ButtonProps | AnchorProps): JSXElement {
           {content}
         </button>
       }
-    />
+    >
+      <a
+        class={getClasses()}
+        href={props.href}
+        target={
+          props["router-link"] || props.href?.startsWith("#")
+            ? undefined
+            : "_blank"
+        }
+        rel={
+          props["router-link"] || props.href?.startsWith("#")
+            ? undefined
+            : "noreferrer noopener"
+        }
+        {...balloonHtmlProps()}
+        {...(props["router-link"] ? { "router-link": "" } : {})}
+        onClick={(e) => props.onClick?.(e)}
+        onMouseEnter={(e) => props.onMouseEnter?.(e)}
+        onMouseLeave={(e) => props.onMouseLeave?.(e)}
+        data-ui-variant={variant()}
+        data-ui-element="button"
+        {...props.dataset}
+      >
+        {content}
+      </a>
+    </Show>
   );
 }
diff --git a/frontend/src/ts/components/common/Conditional.tsx b/frontend/src/ts/components/common/Conditional.tsx
deleted file mode 100644
index ad315aa59acd..000000000000
--- a/frontend/src/ts/components/common/Conditional.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Accessor, JSXElement, Show } from "solid-js";
-
-export function Conditional<T>(props: {
-  if: T;
-  then: JSXElement | ((value: Accessor<NonNullable<T>>) => JSXElement);
-  else?: JSXElement;
-}): JSXElement {
-  return (
-    <Show when={props.if} fallback={props.else}>
-      {typeof props.then === "function"
-        ? props.then
-        : () => props.then as JSXElement}
-    </Show>
-  );
-}
diff --git a/frontend/src/ts/components/common/DiscordAvatar.tsx b/frontend/src/ts/components/common/DiscordAvatar.tsx
index 28dc30d0ee7b..501ccac673f7 100644
--- a/frontend/src/ts/components/common/DiscordAvatar.tsx
+++ b/frontend/src/ts/components/common/DiscordAvatar.tsx
@@ -2,7 +2,6 @@ import { createSignal, JSXElement, Show } from "solid-js";
 import { createStore } from "solid-js/store";
 
 import { cn } from "../../utils/cn";
-import { Conditional } from "./Conditional";
 import { LoadingCircle } from "./LoadingCircle";
 
 //cache successful and missing avatars
@@ -59,33 +58,27 @@ export function DiscordAvatar(props: {
         props.class,
       )}
     >
-      <Conditional
-        if={showDiscordAvatar()}
-        then={
-          <>
-            <Show when={showSpinner()}>
-              <LoadingCircle
-                color="sub"
-                mode="svg"
-                class="col-start-1 row-start-1 h-full w-full fill-current"
-              />
-            </Show>
-            <img
-              src={`https://cdn.discordapp.com/avatars/${props.discordId}/${props.discordAvatar}.png?size=${props.size ?? 32}`}
-              class="col-start-1 row-start-1 rounded-full"
-              onLoad={() => {
-                setAvatar(cacheKey(), true);
-                setShowSpinner(false);
-              }}
-              onError={() => {
-                setAvatar(cacheKey(), false);
-                setShowSpinner(false);
-              }}
-            />
-          </>
-        }
-        else={fallback()}
-      />
+      <Show when={showDiscordAvatar()} fallback={fallback()}>
+        <Show when={showSpinner()}>
+          <LoadingCircle
+            color="sub"
+            mode="svg"
+            class="col-start-1 row-start-1 h-full w-full fill-current"
+          />
+        </Show>
+        <img
+          src={`https://cdn.discordapp.com/avatars/${props.discordId}/${props.discordAvatar}.png?size=${props.size ?? 32}`}
+          class="col-start-1 row-start-1 rounded-full"
+          onLoad={() => {
+            setAvatar(cacheKey(), true);
+            setShowSpinner(false);
+          }}
+          onError={() => {
+            setAvatar(cacheKey(), false);
+            setShowSpinner(false);
+          }}
+        />
+      </Show>
     </div>
   );
 }
diff --git a/frontend/src/ts/components/common/LoadingCircle.tsx b/frontend/src/ts/components/common/LoadingCircle.tsx
index 5d7ac78fca05..6feaddb8a38a 100644
--- a/frontend/src/ts/components/common/LoadingCircle.tsx
+++ b/frontend/src/ts/components/common/LoadingCircle.tsx
@@ -1,7 +1,6 @@
-import { JSXElement } from "solid-js";
+import { JSXElement, Show } from "solid-js";
 
 import { cn } from "../../utils/cn";
-import { Conditional } from "./Conditional";
 import { Fa } from "./Fa";
 
 export function LoadingCircle(props: {
@@ -10,24 +9,9 @@ export function LoadingCircle(props: {
   class?: string;
 }): JSXElement {
   return (
-    <Conditional
-      if={props.mode === "icon" || props.mode === undefined}
-      then={
-        <div
-          class={cn(
-            "preloader grid place-items-center",
-            {
-              "text-main": props.color === "main" || props.color === undefined,
-              "text-sub": props.color === "sub",
-              "text-text": props.color === "text",
-            },
-            props.class,
-          )}
-        >
-          <Fa icon="fa-circle-notch" fixedWidth spin />
-        </div>
-      }
-      else={
+    <Show
+      when={props.mode === "icon" || props.mode === undefined}
+      fallback={
         <div
           class={cn(
             "preloader grid h-[1em] w-[1em] animate-spin place-items-center p-[0.5em] [animation-duration:2s]",
@@ -45,6 +29,20 @@ export function LoadingCircle(props: {
           </svg>
         </div>
       }
-    />
+    >
+      <div
+        class={cn(
+          "preloader grid place-items-center",
+          {
+            "text-main": props.color === "main" || props.color === undefined,
+            "text-sub": props.color === "sub",
+            "text-text": props.color === "text",
+          },
+          props.class,
+        )}
+      >
+        <Fa icon="fa-circle-notch" fixedWidth spin />
+      </div>
+    </Show>
   );
 }
diff --git a/frontend/src/ts/components/common/Separator.tsx b/frontend/src/ts/components/common/Separator.tsx
index 4e0594b83c9e..ddb4caa10bbf 100644
--- a/frontend/src/ts/components/common/Separator.tsx
+++ b/frontend/src/ts/components/common/Separator.tsx
@@ -1,7 +1,6 @@
-import { JSXElement } from "solid-js";
+import { JSXElement, Show } from "solid-js";
 
 import { cn } from "../../utils/cn";
-import { Conditional } from "./Conditional";
 
 export function Separator(props: {
   class?: string;
@@ -9,40 +8,39 @@ export function Separator(props: {
   text?: string;
 }): JSXElement {
   return (
-    <Conditional
-      if={props.text !== undefined}
-      then={
+    <Show
+      when={props.text !== undefined}
+      fallback={
         <div
           class={cn(
-            "flex place-items-center gap-4",
-            props.vertical ? "flex-col" : "flex-row",
+            props.vertical ? "h-full w-1" : "h-1 w-full",
+            `rounded bg-sub-alt`,
             props.class,
           )}
-        >
-          <div
-            class={cn(
-              props.vertical ? "h-full w-1" : "h-1 w-full",
-              `rounded bg-sub-alt`,
-            )}
-          ></div>
-          <div>{props.text}</div>
-          <div
-            class={cn(
-              props.vertical ? "h-full w-1" : "h-1 w-full",
-              `rounded bg-sub-alt`,
-            )}
-          ></div>
-        </div>
+        ></div>
       }
-      else={
+    >
+      <div
+        class={cn(
+          "flex place-items-center gap-4",
+          props.vertical ? "flex-col" : "flex-row",
+          props.class,
+        )}
+      >
         <div
           class={cn(
             props.vertical ? "h-full w-1" : "h-1 w-full",
             `rounded bg-sub-alt`,
-            props.class,
           )}
         ></div>
-      }
-    />
+        <div>{props.text}</div>
+        <div
+          class={cn(
+            props.vertical ? "h-full w-1" : "h-1 w-full",
+            `rounded bg-sub-alt`,
+          )}
+        ></div>
+      </div>
+    </Show>
   );
 }
diff --git a/frontend/src/ts/components/common/User.tsx b/frontend/src/ts/components/common/User.tsx
index d5b57acde2e1..ebb53d6c25af 100644
--- a/frontend/src/ts/components/common/User.tsx
+++ b/frontend/src/ts/components/common/User.tsx
@@ -8,9 +8,9 @@ import {
   UserFlagOptions,
 } from "../../controllers/user-flag-controller";
 import { cn } from "../../utils/cn";
-import { Anime, AnimeConditional } from "./anime";
+import { Anime } from "./anime";
+import { AnimePresence } from "./anime/AnimePresence";
 import { Button } from "./Button";
-import { Conditional } from "./Conditional";
 import { DiscordAvatar } from "./DiscordAvatar";
 import { Fa } from "./Fa";
 import { NotificationBubble } from "./NotificationBubble";
@@ -85,23 +85,37 @@ export function User(props: Props): JSXElement {
             class="z-2 m-0.5"
           />
           <div class="grid place-items-center">
-            <AnimeConditional
-              exitBeforeEnter
-              if={props.showSpinner ?? false}
-              then={<Fa icon={"fa-circle-notch"} spin={true} />}
-              else={
-                <DiscordAvatar
-                  size={64}
-                  discordId={props.user.discordId}
-                  discordAvatar={props.user.discordAvatar}
-                  fallbackIcon={props.avatarFallback ?? "user"}
-                  class={cn(
-                    props.avatarColor === "text" && "text-text",
-                    props.avatarColor === "sub" && "text-sub",
-                  )}
-                />
-              }
-            />
+            <AnimePresence exitBeforeEnter>
+              <Show
+                when={props.showSpinner ?? false}
+                fallback={
+                  <Anime
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1, duration: 125 }}
+                    exit={{ opacity: 0, duration: 125 }}
+                  >
+                    <DiscordAvatar
+                      size={64}
+                      discordId={props.user.discordId}
+                      discordAvatar={props.user.discordAvatar}
+                      fallbackIcon={props.avatarFallback ?? "user"}
+                      class={cn(
+                        props.avatarColor === "text" && "text-text",
+                        props.avatarColor === "sub" && "text-sub",
+                      )}
+                    />
+                  </Anime>
+                }
+              >
+                <Anime
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1, duration: 125 }}
+                  exit={{ opacity: 0, duration: 125 }}
+                >
+                  <Fa icon={"fa-circle-notch"} spin={true} />
+                </Anime>
+              </Show>
+            </AnimePresence>
           </div>
         </div>
       </Show>
@@ -110,19 +124,15 @@ export function User(props: Props): JSXElement {
           "hidden sm:block": props.hideNameOnSmallScreens,
         })}
       >
-        <Conditional
-          if={props.linkToProfile ?? false}
-          then={
-            <Button
-              variant="text"
-              href={`/profile/${props.user.name}`}
-              text={props.user.name}
-              router-link
-              class="px-0"
-            />
-          }
-          else={props.user.name}
-        />
+        <Show when={props.linkToProfile ?? false} fallback={props.user.name}>
+          <Button
+            variant="text"
+            href={`/profile/${props.user.name}`}
+            text={props.user.name}
+            router-link
+            class="px-0"
+          />
+        </Show>
       </div>
 
       <Show
diff --git a/frontend/src/ts/components/common/anime/AnimeConditional.tsx b/frontend/src/ts/components/common/anime/AnimeConditional.tsx
deleted file mode 100644
index cd14b8950c0d..000000000000
--- a/frontend/src/ts/components/common/anime/AnimeConditional.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Accessor, JSXElement, ParentProps } from "solid-js";
-
-import { Conditional } from "../Conditional";
-import { Anime, AnimeProps } from "./Anime";
-import { AnimePresence } from "./AnimePresence";
-
-/**
- * A convenience wrapper that renders animated `if/then/else` conditionals.
- *
- * Combines `<AnimePresence>` + `<Conditional>` + `<Anime>` into a single
- * component. Both branches are wrapped in `<Anime>` so they fade in/out
- * automatically. Use `animeProps` to customise the animation; the fallback
- * is a quick 125 ms opacity fade.
- *
- * @example
- * ```tsx
- * <AnimeConditional
- *   if={isAuthenticated()}
- *   then={<Dashboard />}
- *   else={<LoginForm />}
- *   exitBeforeEnter
- * />
- * ```
- *
- * @example
- * Custom animation:
- * ```tsx
- * <AnimeConditional
- *   if={open()}
- *   then={<Panel />}
- *   animeProps={{
- *     initial: { opacity: 0, translateY: -8 },
- *     animate: { opacity: 1, translateY: 0, duration: 200 },
- *     exit:    { opacity: 0, translateY: -8, duration: 150 },
- *   }}
- * />
- * ```
- */
-export function AnimeConditional<T>(
-  props: ParentProps<{
-    exitBeforeEnter?: boolean;
-    if: T;
-    then: JSXElement | ((value: Accessor<NonNullable<T>>) => JSXElement);
-    else?: JSXElement;
-    animeProps?: AnimeProps;
-  }>,
-): JSXElement {
-  /** Fallback animation used when no `animeProps` are provided. */
-  const defaultAnimeProps = {
-    initial: { opacity: 0 },
-    animate: { opacity: 1, duration: 125 },
-    exit: { opacity: 0, duration: 125 },
-  };
-
-  return (
-    <AnimePresence exitBeforeEnter={props.exitBeforeEnter}>
-      <Conditional
-        if={props.if}
-        then={(value) => (
-          <Anime
-            initial={props.animeProps?.initial ?? defaultAnimeProps.initial}
-            animate={props.animeProps?.animate ?? defaultAnimeProps.animate}
-            animation={props.animeProps?.animation}
-            exit={props.animeProps?.exit ?? defaultAnimeProps.exit}
-          >
-            {typeof props.then === "function" ? props.then(value) : props.then}
-          </Anime>
-        )}
-        else={
-          <Anime
-            initial={props.animeProps?.initial ?? defaultAnimeProps.initial}
-            animate={props.animeProps?.animate ?? defaultAnimeProps.animate}
-            animation={props.animeProps?.animation}
-            exit={props.animeProps?.exit ?? defaultAnimeProps.exit}
-          >
-            {props.else}
-          </Anime>
-        }
-      />
-    </AnimePresence>
-  );
-}
diff --git a/frontend/src/ts/components/common/anime/index.ts b/frontend/src/ts/components/common/anime/index.ts
index b6564735bbef..1cf714def706 100644
--- a/frontend/src/ts/components/common/anime/index.ts
+++ b/frontend/src/ts/components/common/anime/index.ts
@@ -9,6 +9,5 @@ export type { AnimePresenceProps } from "./AnimePresence";
 
 export { AnimeShow } from "./AnimeShow";
 export { AnimeSwitch } from "./AnimeSwitch";
-export { AnimeConditional } from "./AnimeConditional";
 
 export type { AnimationParams, JSAnimation } from "animejs";
diff --git a/frontend/src/ts/components/layout/header/Nav.tsx b/frontend/src/ts/components/layout/header/Nav.tsx
index d44ed398cd3c..a020e2abe0a2 100644
--- a/frontend/src/ts/components/layout/header/Nav.tsx
+++ b/frontend/src/ts/components/layout/header/Nav.tsx
@@ -26,7 +26,8 @@ import { getSnapshot } from "../../../states/snapshot";
 import { getFocus } from "../../../states/test";
 import { cn } from "../../../utils/cn";
 import { getLevelFromTotalXp } from "../../../utils/levels";
-import { AnimeConditional } from "../../common/anime";
+import { Anime } from "../../common/anime";
+import { AnimePresence } from "../../common/anime/AnimePresence";
 import { Button } from "../../common/Button";
 import { NotificationBubble } from "../../common/NotificationBubble";
 import { User } from "../../common/User";
@@ -168,91 +169,98 @@ export function Nav(): JSXElement {
           show={showAlertsNotificationBubble()}
         />
       </Button>
-      <AnimeConditional
-        exitBeforeEnter
-        if={getSnapshot()}
-        then={(snap) => (
-          <>
-            <div
-              ref={accountMenuRef}
-              class={cn(
-                "relative",
-                !getFocus() &&
-                  "hover:**:data-[ui-element='accountMenu']:pointer-events-auto hover:**:data-[ui-element='accountMenu']:opacity-100",
-                "has-focus-visible:**:data-[ui-element='accountMenu']:pointer-events-auto has-focus-visible:**:data-[ui-element='accountMenu']:opacity-100",
-                getAccountMenuOpen() &&
-                  "**:data-[ui-element='accountMenu']:pointer-events-auto **:data-[ui-element='accountMenu']:opacity-100",
-              )}
-              // oxlint-disable-next-line react/no-unknown-property
-              on:click={(e: MouseEvent) => {
-                if (isCoarse()) {
-                  if (e.target instanceof HTMLAnchorElement) {
-                    if (e.target.dataset["navItem"] === "account") {
-                      e.preventDefault();
-                      e.stopPropagation();
-                    }
-                    setAccountMenuOpen((prev) => !prev);
-                  }
-                }
-              }}
+      <AnimePresence exitBeforeEnter>
+        <Show
+          when={getSnapshot()}
+          fallback={
+            <Anime
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, duration: 125 }}
+              exit={{ opacity: 0, duration: 125 }}
+            >
+              <Show when={showLoginButton()}>
+                <Button
+                  variant="text"
+                  href="/login"
+                  dataset={{
+                    "data-nav-item": "login",
+                  }}
+                  fa={{
+                    icon: "fa-user",
+                    variant: "regular",
+                    fixedWidth: true,
+                  }}
+                  router-link
+                  class={buttonClass()}
+                />
+              </Show>
+            </Anime>
+          }
+        >
+          {(snap) => (
+            <Anime
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1, duration: 125 }}
+              exit={{ opacity: 0, duration: 125 }}
             >
-              <Button
-                variant="text"
+              <div
+                ref={accountMenuRef}
                 class={cn(
-                  "h-full",
-                  "hover:**:data-[ui-element='userLevel']:bg-(--themable-button-hover-text)",
-                  { "opacity-(--nav-focus-opacity)": getFocus() },
+                  "relative",
+                  !getFocus() &&
+                    "hover:**:data-[ui-element='accountMenu']:pointer-events-auto hover:**:data-[ui-element='accountMenu']:opacity-100",
+                  "has-focus-visible:**:data-[ui-element='accountMenu']:pointer-events-auto has-focus-visible:**:data-[ui-element='accountMenu']:opacity-100",
+                  getAccountMenuOpen() &&
+                    "**:data-[ui-element='accountMenu']:pointer-events-auto **:data-[ui-element='accountMenu']:opacity-100",
                 )}
-                href="/account"
-                router-link
-                dataset={{
-                  "data-nav-item": "account",
+                // oxlint-disable-next-line react/no-unknown-property
+                on:click={(e: MouseEvent) => {
+                  if (isCoarse()) {
+                    if (e.target instanceof HTMLAnchorElement) {
+                      if (e.target.dataset["navItem"] === "account") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                      }
+                      setAccountMenuOpen((prev) => !prev);
+                    }
+                  }
                 }}
               >
-                <User
-                  user={snap()}
-                  showAvatar={true}
-                  iconsOnly={true}
-                  hideNameOnSmallScreens={true}
-                  level={getAnimatedLevel()}
-                  showSpinner={getAccountButtonSpinner()}
-                  showNotificationBubble={showFriendsNotificationBubble()}
-                  fontClass="text-em-xs"
+                <Button
+                  variant="text"
+                  class={cn(
+                    "h-full",
+                    "hover:**:data-[ui-element='userLevel']:bg-(--themable-button-hover-text)",
+                    { "opacity-(--nav-focus-opacity)": getFocus() },
+                  )}
+                  href="/account"
+                  router-link
+                  dataset={{
+                    "data-nav-item": "account",
+                  }}
+                >
+                  <User
+                    user={snap()}
+                    showAvatar={true}
+                    iconsOnly={true}
+                    hideNameOnSmallScreens={true}
+                    level={getAnimatedLevel()}
+                    showSpinner={getAccountButtonSpinner()}
+                    showNotificationBubble={showFriendsNotificationBubble()}
+                    fontClass="text-em-xs"
+                  />
+                </Button>
+                <AccountMenu
+                  showFriendsNotificationBubble={showFriendsNotificationBubble()}
                 />
-              </Button>
-              <AccountMenu
-                showFriendsNotificationBubble={showFriendsNotificationBubble()}
-                // onClick={() => {
-                //   if (isCoarse()) {
-                //     setAccountMenuOpen(false);
-                //   }
-                // }}
-              />
-            </div>
-            <div class="relative">
-              <AccountXpBar />
-            </div>
-          </>
-        )}
-        else={
-          <Show when={showLoginButton()}>
-            <Button
-              variant="text"
-              href="/login"
-              dataset={{
-                "data-nav-item": "login",
-              }}
-              fa={{
-                icon: "fa-user",
-                variant: "regular",
-                fixedWidth: true,
-              }}
-              router-link
-              class={buttonClass()}
-            />
-          </Show>
-        }
-      />
+              </div>
+              <div class="relative">
+                <AccountXpBar />
+              </div>
+            </Anime>
+          )}
+        </Show>
+      </AnimePresence>
     </nav>
   );
 }
diff --git a/frontend/src/ts/components/layout/overlays/Banners.tsx b/frontend/src/ts/components/layout/overlays/Banners.tsx
index 164e05d48f78..71d114ce006a 100644
--- a/frontend/src/ts/components/layout/overlays/Banners.tsx
+++ b/frontend/src/ts/components/layout/overlays/Banners.tsx
@@ -1,4 +1,4 @@
-import { For, JSXElement, onCleanup, onMount } from "solid-js";
+import { For, JSXElement, onCleanup, onMount, Show } from "solid-js";
 import { debounce } from "throttle-debounce";
 
 import { createEffectOn } from "../../../hooks/effects";
@@ -13,7 +13,6 @@ import {
 import { setGlobalOffsetTop } from "../../../states/core";
 import { getSnapshot } from "../../../states/snapshot";
 import { cn } from "../../../utils/cn";
-import { Conditional } from "../../common/Conditional";
 import { Fa } from "../../common/Fa";
 
 function Banner(props: BannerType): JSXElement {
@@ -39,29 +38,21 @@ function Banner(props: BannerType): JSXElement {
       )}
     >
       <div class="flex w-full justify-between gap-2">
-        <Conditional
-          if={props.imagePath !== undefined}
-          then={
-            <>
-              <img
-                src={props.imagePath}
-                alt="Banner Image"
-                class="hidden aspect-6/1 h-full max-h-9 self-center xl:block"
-              />
-              <i class={`self-center ${icon()} xl:hidden`}></i>
-            </>
-          }
-          else={<i class={`self-center ${icon()}`}></i>}
-        />
-        <Conditional
-          if={props.customContent !== undefined}
-          then={<div class="self-center p-2">{props.customContent}</div>}
-          else={<div class="self-center p-2">{props.text}</div>}
-        />
-        <Conditional
-          if={props.important === true}
-          then={<i class={`self-center ${icon()}`}></i>}
-          else={
+        <Show
+          when={props.imagePath !== undefined}
+          fallback={<i class={`self-center ${icon()}`}></i>}
+        >
+          <img
+            src={props.imagePath}
+            alt="Banner Image"
+            class="hidden aspect-6/1 h-full max-h-9 self-center xl:block"
+          />
+          <i class={`self-center ${icon()} xl:hidden`}></i>
+        </Show>
+        <div class="self-center p-2">{props.customContent ?? props.text}</div>
+        <Show
+          when={props.important === true}
+          fallback={
             <button
               type="button"
               class="text -mr-2 self-center text-bg hover:text-text"
@@ -72,7 +63,9 @@ function Banner(props: BannerType): JSXElement {
               <Fa icon="fa-times" fixedWidth />
             </button>
           }
-        />
+        >
+          <i class={`self-center ${icon()}`}></i>
+        </Show>
       </div>
     </div>
   );
diff --git a/frontend/src/ts/components/layout/overlays/Notifications.tsx b/frontend/src/ts/components/layout/overlays/Notifications.tsx
index 425e6ee8518d..2ecc6f4a039c 100644
--- a/frontend/src/ts/components/layout/overlays/Notifications.tsx
+++ b/frontend/src/ts/components/layout/overlays/Notifications.tsx
@@ -1,5 +1,5 @@
 import { AnimationParams } from "animejs";
-import { For, JSXElement } from "solid-js";
+import { For, JSXElement, Show } from "solid-js";
 
 import { getGlobalOffsetTop, getIsScreenshotting } from "../../../states/core";
 import {
@@ -13,7 +13,6 @@ import { cn } from "../../../utils/cn";
 import { Anime } from "../../common/anime/Anime";
 import { AnimePresence } from "../../common/anime/AnimePresence";
 import { AnimeShow } from "../../common/anime/AnimeShow";
-import { Conditional } from "../../common/Conditional";
 import { Fa, FaProps } from "../../common/Fa";
 
 const levelConfig = {
@@ -97,12 +96,13 @@ function NotificationItem(props: { notification: Notification }): JSXElement {
             <Fa {...iconProps()} class="mr-2 inline" />
             {title()}
           </div>
-          <Conditional
-            if={props.notification.useInnerHtml}
-            // oxlint-disable-next-line solid/no-innerhtml
-            then={<div innerHTML={props.notification.message}></div>}
-            else={<div>{props.notification.message}</div>}
-          />
+          <Show
+            when={props.notification.useInnerHtml}
+            fallback={<div>{props.notification.message}</div>}
+          >
+            {/* oxlint-disable-next-line solid/no-innerhtml */}
+            <div innerHTML={props.notification.message}></div>
+          </Show>
         </div>
       </Anime>
     </div>
diff --git a/frontend/src/ts/components/pages/leaderboard/Table.tsx b/frontend/src/ts/components/pages/leaderboard/Table.tsx
index 27c1d8cb8b68..a3301a5600e6 100644
--- a/frontend/src/ts/components/pages/leaderboard/Table.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/Table.tsx
@@ -5,7 +5,7 @@ import {
 import { createColumnHelper } from "@tanstack/solid-table";
 import { format as dateFormat } from "date-fns/format";
 import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
-import { Accessor, createMemo, JSXElement } from "solid-js";
+import { Accessor, createMemo, JSXElement, Show } from "solid-js";
 
 import { getConfig } from "../../../config/store";
 import { isFriend } from "../../../db";
@@ -17,7 +17,6 @@ import { secondsToString } from "../../../utils/date-and-time";
 import { qs } from "../../../utils/dom";
 import { Formatting } from "../../../utils/format";
 import { abbreviateNumber } from "../../../utils/numbers";
-import { Conditional } from "../../common/Conditional";
 import { Fa } from "../../common/Fa";
 import { User } from "../../common/User";
 import { DataTable, DataTableColumnDef } from "../../ui/table/DataTable";
@@ -99,19 +98,9 @@ export function Table(
   );
 
   return (
-    <Conditional
-      if={props.type === "speed"}
-      then={
-        <DataTable
-          {...commonProps()}
-          columns={speedColumns()}
-          data={props.entries as LeaderboardEntry[]}
-          noDataRow={{
-            content: <NoEntriesFound />,
-          }}
-        />
-      }
-      else={
+    <Show
+      when={props.type === "speed"}
+      fallback={
         <DataTable
           {...commonProps()}
           columns={xpColumns()}
@@ -121,7 +110,16 @@ export function Table(
           }}
         />
       }
-    />
+    >
+      <DataTable
+        {...commonProps()}
+        columns={speedColumns()}
+        data={props.entries as LeaderboardEntry[]}
+        noDataRow={{
+          content: <NoEntriesFound />,
+        }}
+      />
+    </Show>
   );
 }
 
diff --git a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
index 77ab276bea08..2143df9a5caa 100644
--- a/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
+++ b/frontend/src/ts/components/pages/leaderboard/UserRank.tsx
@@ -7,7 +7,6 @@ import { createMemo, JSXElement, Match, Show, Switch } from "solid-js";
 
 import { getConfig } from "../../../config/store";
 import { Formatting } from "../../../utils/format";
-import { Conditional } from "../../common/Conditional";
 import { Fa } from "../../common/Fa";
 import { LoadingCircle } from "../../common/LoadingCircle";
 import { Table, TableEntry } from "./Table";
@@ -75,18 +74,9 @@ export function UserRank(props: {
         when={props.data !== undefined && props.total !== undefined}
         fallback={<LoadingCircle class="w-full text-center text-2xl" />}
       >
-        <Conditional
-          if={props.data !== null}
-          then={
-            <Table
-              type={props.type}
-              entries={[props.data as TableEntry]}
-              friendsOnly={props.friendsOnly}
-              userOverride={userOverride}
-              hideHeader={true}
-            />
-          }
-          else={
+        <Show
+          when={props.data !== null}
+          fallback={
             <div class="grid w-full place-items-center p-4 text-center text-sub">
               <Switch fallback="Not qualified">
                 <Match when={props.isLbOptOut}>
@@ -120,7 +110,15 @@ export function UserRank(props: {
               </Switch>
             </div>
           }
-        />
+        >
+          <Table
+            type={props.type}
+            entries={[props.data as TableEntry]}
+            friendsOnly={props.friendsOnly}
+            userOverride={userOverride}
+            hideHeader={true}
+          />
+        </Show>
       </Show>
     </div>
   );
diff --git a/frontend/src/ts/components/pages/login/LoginPage.tsx b/frontend/src/ts/components/pages/login/LoginPage.tsx
index 13c37430805f..6e3c5f248bf9 100644
--- a/frontend/src/ts/components/pages/login/LoginPage.tsx
+++ b/frontend/src/ts/components/pages/login/LoginPage.tsx
@@ -4,7 +4,6 @@ import { JSXElement, Show } from "solid-js";
 import { getServerConfigurationQueryOptions } from "../../../queries/server-configuration";
 import { getActivePage } from "../../../states/core";
 import { getLoginPageInputsEnabled } from "../../../states/login";
-import { Conditional } from "../../common/Conditional";
 import { Login } from "./Login";
 import { Register } from "./Register";
 
@@ -22,22 +21,21 @@ export function LoginPage(): JSXElement {
           <i class="fas fa-fw fa-spin fa-circle-notch"></i>
         </div>
       </Show>
-      <Conditional
-        if={isSignUpDisabled()}
-        then={
-          <div class="grid h-full place-items-center">
-            <p>
-              Login/Signup is disabled or the server is down/under maintenance.
-            </p>
-          </div>
-        }
-        else={
+      <Show
+        when={isSignUpDisabled()}
+        fallback={
           <div class="flex h-full flex-col items-center justify-around gap-4 md:flex-row">
             <Register />
             <Login />
           </div>
         }
-      />
+      >
+        <div class="grid h-full place-items-center">
+          <p>
+            Login/Signup is disabled or the server is down/under maintenance.
+          </p>
+        </div>
+      </Show>
     </Show>
   );
 }
diff --git a/frontend/src/ts/components/pages/profile/UserDetails.tsx b/frontend/src/ts/components/pages/profile/UserDetails.tsx
index 6bf7746ea68d..6dd15828a218 100644
--- a/frontend/src/ts/components/pages/profile/UserDetails.tsx
+++ b/frontend/src/ts/components/pages/profile/UserDetails.tsx
@@ -33,7 +33,6 @@ import { AutoShrink } from "../../common/AutoShrink";
 import { Balloon, BalloonProps } from "../../common/Balloon";
 import { Bar } from "../../common/Bar";
 import { Button } from "../../common/Button";
-import { Conditional } from "../../common/Conditional";
 import { DiscordAvatar } from "../../common/DiscordAvatar";
 import { UserBadge } from "../../common/UserBadge";
 import { UserFlags } from "../../common/UserFlags";
@@ -135,47 +134,9 @@ function ActionButtons(props: {
   };
 
   return (
-    <Conditional
-      if={props.isAccountPage === true}
-      then={
-        <>
-          <Button
-            balloon={{ text: "Edit profile", position: "left" }}
-            class="h-full rounded-none rounded-tr text-sub hover:text-bg"
-            fa={{ icon: "fa-pen", fixedWidth: true }}
-            onClick={() => {
-              if (props.profile.banned === true) {
-                showNoticeNotification(
-                  "Banned users cannot edit their profile",
-                );
-                return;
-              }
-              EditProfileModal.show();
-            }}
-          />
-          <Button
-            balloon={{ text: "Copy public link", position: "left" }}
-            class="h-full rounded-none rounded-br text-sub hover:text-bg"
-            fa={{ icon: "fa-link", fixedWidth: true }}
-            onClick={() => {
-              const url = `${location.origin}/profile/${props.profile.name}`;
-
-              navigator.clipboard.writeText(url).then(
-                function () {
-                  showNoticeNotification("URL Copied to clipboard");
-                },
-                function () {
-                  alert(
-                    "Failed to copy using the Clipboard API. Here's the link: " +
-                      url,
-                  );
-                },
-              );
-            }}
-          />
-        </>
-      }
-      else={
+    <Show
+      when={props.isAccountPage === true}
+      fallback={
         <>
           <Show when={!isUsersProfile()}>
             <Button
@@ -206,7 +167,40 @@ function ActionButtons(props: {
           </Show>
         </>
       }
-    />
+    >
+      <Button
+        balloon={{ text: "Edit profile", position: "left" }}
+        class="h-full rounded-none rounded-tr text-sub hover:text-bg"
+        fa={{ icon: "fa-pen", fixedWidth: true }}
+        onClick={() => {
+          if (props.profile.banned === true) {
+            showNoticeNotification("Banned users cannot edit their profile");
+            return;
+          }
+          EditProfileModal.show();
+        }}
+      />
+      <Button
+        balloon={{ text: "Copy public link", position: "left" }}
+        class="h-full rounded-none rounded-br text-sub hover:text-bg"
+        fa={{ icon: "fa-link", fixedWidth: true }}
+        onClick={() => {
+          const url = `${location.origin}/profile/${props.profile.name}`;
+
+          navigator.clipboard.writeText(url).then(
+            function () {
+              showNoticeNotification("URL Copied to clipboard");
+            },
+            function () {
+              alert(
+                "Failed to copy using the Clipboard API. Here's the link: " +
+                  url,
+              );
+            },
+          );
+        }}
+      />
+    </Show>
   );
 }
 
diff --git a/frontend/src/ts/components/popups/alerts/NotificationHistory.tsx b/frontend/src/ts/components/popups/alerts/NotificationHistory.tsx
index 814b67f232d1..8a8581d017ef 100644
--- a/frontend/src/ts/components/popups/alerts/NotificationHistory.tsx
+++ b/frontend/src/ts/components/popups/alerts/NotificationHistory.tsx
@@ -7,7 +7,6 @@ import {
 } from "../../../states/notifications";
 import { cn } from "../../../utils/cn";
 import { Button } from "../../common/Button";
-import { Conditional } from "../../common/Conditional";
 import { H3 } from "../../common/Headers";
 import { AlertsSection } from "./AlertsSection";
 
@@ -86,21 +85,20 @@ function NotificationEntry(props: {
           />
         </Show>
       </div>
-      <Conditional
-        if={props.notification.useInnerHtml}
-        then={
-          <div
-            class="text-xs wrap-break-word text-text"
-            // oxlint-disable-next-line solid/no-innerhtml
-            innerHTML={props.notification.message}
-          ></div>
-        }
-        else={
+      <Show
+        when={props.notification.useInnerHtml}
+        fallback={
           <div class="text-xs wrap-break-word text-text">
             {props.notification.message}
           </div>
         }
-      />
+      >
+        <div
+          class="text-xs wrap-break-word text-text"
+          // oxlint-disable-next-line solid/no-innerhtml
+          innerHTML={props.notification.message}
+        ></div>
+      </Show>
     </div>
   );
 }
diff --git a/frontend/src/ts/components/ui/table/DataTable.tsx b/frontend/src/ts/components/ui/table/DataTable.tsx
index befe9384839c..c24f7b1896d9 100644
--- a/frontend/src/ts/components/ui/table/DataTable.tsx
+++ b/frontend/src/ts/components/ui/table/DataTable.tsx
@@ -24,7 +24,6 @@ import { z } from "zod";
 
 import { useLocalStorage } from "../../../hooks/useLocalStorage";
 import { cn } from "../../../utils/cn";
-import { Conditional } from "../../common/Conditional";
 import { Fa } from "../../common/Fa";
 import {
   Table,
@@ -184,75 +183,9 @@ export function DataTable<TData, TValue = any>(
                 <TableRow>
                   <For each={headerGroup.headers}>
                     {(header) => (
-                      <Conditional
-                        if={header.column.getCanSort()}
-                        then={
-                          <TableHead
-                            colSpan={header.colSpan}
-                            aria-sort={
-                              header.column.getIsSorted() === "asc"
-                                ? "ascending"
-                                : header.column.getIsSorted() === "desc"
-                                  ? "descending"
-                                  : "none"
-                            }
-                            class={cn(columnVisibility()[header.column.id])}
-                          >
-                            <button
-                              type="button"
-                              role="button"
-                              onClick={(e) => {
-                                header.column.getToggleSortingHandler()?.(e);
-                              }}
-                              class={cn(
-                                "m-0 box-border flex h-full w-full cursor-pointer items-start rounded-none border-0 bg-transparent p-2 font-normal whitespace-nowrap text-sub hover:bg-sub-alt",
-                                {
-                                  "justify-start text-left":
-                                    (header.column.columnDef.meta?.align ??
-                                      "left") === "left",
-                                  "justify-center text-center":
-                                    header.column.columnDef.meta?.align ===
-                                    "center",
-                                  "justify-end text-right":
-                                    header.column.columnDef.meta?.align ===
-                                    "right",
-                                },
-                                header.column.columnDef.meta?.headerClass,
-                              )}
-                              {...(header.column.columnDef.meta?.headerMeta ??
-                                {})}
-                            >
-                              <Show when={!header.isPlaceholder}>
-                                {flexRender(
-                                  header.column.columnDef.header,
-                                  header.getContext(),
-                                )}
-                              </Show>
-
-                              <Switch fallback={<i class="fa-fw"></i>}>
-                                <Match
-                                  when={header.column.getIsSorted() === "asc"}
-                                >
-                                  <Fa
-                                    icon={"fa-sort-up"}
-                                    fixedWidth
-                                    aria-hidden="true"
-                                  />
-                                </Match>
-                                <Match
-                                  when={header.column.getIsSorted() === "desc"}
-                                >
-                                  <Fa
-                                    icon={"fa-sort-down"}
-                                    fixedWidth
-                                    aria-hidden="true"
-                                  />
-                                </Match>
-                              </Switch>
-                            </button>
-                          </TableHead>
-                        }
-                        else={
+                      <Show
+                        when={header.column.getCanSort()}
+                        fallback={
                           <TableHead
                             colSpan={header.colSpan}
                             class={cn(
@@ -280,7 +213,72 @@ export function DataTable<TData, TValue = any>(
                             </Show>
                           </TableHead>
                         }
-                      />
+                      >
+                        <TableHead
+                          colSpan={header.colSpan}
+                          aria-sort={
+                            header.column.getIsSorted() === "asc"
+                              ? "ascending"
+                              : header.column.getIsSorted() === "desc"
+                                ? "descending"
+                                : "none"
+                          }
+                          class={cn(columnVisibility()[header.column.id])}
+                        >
+                          <button
+                            type="button"
+                            role="button"
+                            onClick={(e) => {
+                              header.column.getToggleSortingHandler()?.(e);
+                            }}
+                            class={cn(
+                              "m-0 box-border flex h-full w-full cursor-pointer items-start rounded-none border-0 bg-transparent p-2 font-normal whitespace-nowrap text-sub hover:bg-sub-alt",
+                              {
+                                "justify-start text-left":
+                                  (header.column.columnDef.meta?.align ??
+                                    "left") === "left",
+                                "justify-center text-center":
+                                  header.column.columnDef.meta?.align ===
+                                  "center",
+                                "justify-end text-right":
+                                  header.column.columnDef.meta?.align ===
+                                  "right",
+                              },
+                              header.column.columnDef.meta?.headerClass,
+                            )}
+                            {...(header.column.columnDef.meta?.headerMeta ??
+                              {})}
+                          >
+                            <Show when={!header.isPlaceholder}>
+                              {flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                            </Show>
+
+                            <Switch fallback={<i class="fa-fw"></i>}>
+                              <Match
+                                when={header.column.getIsSorted() === "asc"}
+                              >
+                                <Fa
+                                  icon={"fa-sort-up"}
+                                  fixedWidth
+                                  aria-hidden="true"
+                                />
+                              </Match>
+                              <Match
+                                when={header.column.getIsSorted() === "desc"}
+                              >
+                                <Fa
+                                  icon={"fa-sort-down"}
+                                  fixedWidth
+                                  aria-hidden="true"
+                                />
+                              </Match>
+                            </Switch>
+                          </button>
+                        </TableHead>
+                      </Show>
                     )}
                   </For>
                 </TableRow>
diff --git a/frontend/storybook/stories/AnimeConditional.stories.tsx b/frontend/storybook/stories/AnimeConditional.stories.tsx
deleted file mode 100644
index 66d758fca8bc..000000000000
--- a/frontend/storybook/stories/AnimeConditional.stories.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import preview from "#.storybook/preview";
-import { Accessor, Component, createSignal, JSXElement } from "solid-js";
-
-import { AnimeConditional } from "../../src/ts/components/common/anime/AnimeConditional";
-
-type AnimeConditionalProps = {
-  if: boolean;
-  then: JSXElement | ((value: Accessor<NonNullable<boolean>>) => JSXElement);
-  else?: JSXElement;
-  exitBeforeEnter?: boolean;
-};
-
-const meta = preview.meta({
-  title: "Common/Anime/AnimeConditional",
-  component: AnimeConditional as Component<AnimeConditionalProps>,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    if: { control: "boolean" },
-    exitBeforeEnter: { control: "boolean" },
-  },
-});
-
-export const Default = meta.story({
-  args: {
-    if: true,
-    exitBeforeEnter: true,
-    then: (
-      <div style={{ color: "var(--text-color)", padding: "16px" }}>
-        Condition is true
-      </div>
-    ),
-    else: (
-      <div style={{ color: "var(--error-color)", padding: "16px" }}>
-        Condition is false
-      </div>
-    ),
-  },
-});
-
-export const InteractiveToggle = meta.story({
-  render: () => {
-    const [show, setShow] = createSignal(true);
-    return (
-      <div>
-        <button
-          style={{
-            padding: "8px 16px",
-            cursor: "pointer",
-            "background-color": "var(--sub-alt-color)",
-            color: "var(--text-color)",
-            border: "none",
-            "border-radius": "8px",
-            "margin-bottom": "16px",
-          }}
-          onClick={() => setShow((prev) => !prev)}
-        >
-          Toggle ({show() ? "showing true" : "showing false"})
-        </button>
-        <AnimeConditional
-          if={show()}
-          exitBeforeEnter
-          then={
-            <div style={{ color: "var(--text-color)", padding: "16px" }}>
-              Condition is true
-            </div>
-          }
-          else={
-            <div style={{ color: "var(--error-color)", padding: "16px" }}>
-              Condition is false
-            </div>
-          }
-        />
-      </div>
-    );
-  },
-});
diff --git a/frontend/storybook/stories/Conditional.stories.tsx b/frontend/storybook/stories/Conditional.stories.tsx
deleted file mode 100644
index eae8fdb4cd7d..000000000000
--- a/frontend/storybook/stories/Conditional.stories.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import preview from "#.storybook/preview";
-import { Component, JSXElement } from "solid-js";
-
-import { Conditional } from "../../src/ts/components/common/Conditional";
-
-type ConditionalProps = {
-  if: boolean;
-  then: JSXElement;
-  else?: JSXElement;
-};
-
-const meta = preview.meta({
-  title: "Common/Conditional",
-  component: Conditional as Component<ConditionalProps>,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    if: { control: "boolean" },
-  },
-});
-
-export const Truthy = meta.story({
-  args: {
-    if: true,
-    then: <div style={{ color: "var(--text-color)" }}>Condition is true</div>,
-    else: <div style={{ color: "var(--error-color)" }}>Condition is false</div>,
-  },
-});
-
-export const Falsy = meta.story({
-  args: {
-    if: false,
-    then: <div style={{ color: "var(--text-color)" }}>Condition is true</div>,
-    else: <div style={{ color: "var(--error-color)" }}>Condition is false</div>,
-  },
-});
-
-export const NoFallback = meta.story({
-  args: {
-    if: true,
-    then: <div style={{ color: "var(--text-color)" }}>Visible content</div>,
-  },
-});
-
-export const FalsyNoFallback = meta.story({
-  args: {
-    if: false,
-    then: <div style={{ color: "var(--text-color)" }}>Hidden content</div>,
-  },
-});