diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/MemberAddForm.tsx b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/MemberAddForm.tsx
new file mode 100644
index 000000000..aa4cd3383
--- /dev/null
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/MemberAddForm.tsx
@@ -0,0 +1,162 @@
+import { faPlus } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState, useReducer } from "react";
+
+import {
+  useToast,
+  Modal,
+  NewButton,
+  NewIcon,
+  NewTextInput,
+  NewSelect,
+  type SelectOption,
+} from "@thunderstore/cyberstorm";
+import {
+  teamAddMember,
+  type RequestConfig,
+  type TeamAddMemberRequestData,
+} from "@thunderstore/thunderstore-api";
+
+import { useStrongForm } from "cyberstorm/utils/StrongForm/useStrongForm";
+
+const roleOptions: SelectOption<"owner" | "member">[] = [
+  { value: "member", label: "Member" },
+  { value: "owner", label: "Owner" },
+];
+
+export function MemberAddForm(props: {
+  teamName: string;
+  updateTrigger: () => Promise<void>;
+  config: () => RequestConfig;
+}) {
+  const toast = useToast();
+  const [open, setOpen] = useState(false);
+
+  function formFieldUpdateAction(
+    state: TeamAddMemberRequestData,
+    action: {
+      field: keyof TeamAddMemberRequestData;
+      value: TeamAddMemberRequestData[keyof TeamAddMemberRequestData];
+    }
+  ) {
+    return {
+      ...state,
+      [action.field]: action.value,
+    };
+  }
+
+  const [formInputs, updateFormFieldState] = useReducer(formFieldUpdateAction, {
+    username: "",
+    role: "member",
+  });
+
+  type SubmitorOutput = Awaited<ReturnType<typeof teamAddMember>>;
+
+  async function submitor(data: typeof formInputs): Promise<SubmitorOutput> {
+    return await teamAddMember({
+      config: props.config,
+      params: { team_name: props.teamName },
+      queryParams: {},
+      data: { username: data.username, role: data.role },
+    });
+  }
+
+  type InputErrors = {
+    [key in keyof typeof formInputs]?: string | string[];
+  };
+
+  const strongForm = useStrongForm<
+    typeof formInputs,
+    TeamAddMemberRequestData,
+    Error,
+    SubmitorOutput,
+    Error,
+    InputErrors
+  >({
+    inputs: formInputs,
+    submitor,
+    onSubmitSuccess: () => {
+      props.updateTrigger();
+      toast.addToast({
+        csVariant: "success",
+        children: `Team member added`,
+        duration: 4000,
+      });
+      setOpen(false);
+    },
+    onSubmitError: (error) => {
+      toast.addToast({
+        csVariant: "danger",
+        children: `Error occurred: ${error.message || "Unknown error"}`,
+        duration: 8000,
+      });
+    },
+  });
+
+  return (
+    <Modal
+      open={open}
+      onOpenChange={setOpen}
+      titleContent="Add Team Member"
+      csSize="small"
+      trigger={
+        <NewButton>
+          Add Member
+          <NewIcon csMode="inline" noWrapper>
+            <FontAwesomeIcon icon={faPlus} />
+          </NewIcon>
+        </NewButton>
+      }
+    >
+      <Modal.Body>
+        <div className="add-member-form__text">
+          Enter the username of the user you wish to add to the team{" "}
+          <span className="add-member-form__text--bold">{props.teamName}</span>.
+        </div>
+        <div className="add-member-form__fields">
+          <div className="add-member-form__field add-member-form__username">
+            <label className="add-member-form__label" htmlFor="username">
+              Username
+            </label>
+            <NewTextInput
+              name={"username"}
+              placeholder={"Enter username..."}
+              value={formInputs.username}
+              onChange={(e) => {
+                updateFormFieldState({
+                  field: "username",
+                  value: e.target.value,
+                });
+              }}
+              rootClasses="add-member-form__username-input"
+              id="username"
+            />
+          </div>
+          <div className="add-member-form__field">
+            <label className="add-member-form__label" htmlFor="role">
+              Role
+            </label>
+            <NewSelect
+              name={"role"}
+              placeholder="Select role..."
+              options={roleOptions}
+              defaultValue="member"
+              value={formInputs.role}
+              onChange={(value) => {
+                updateFormFieldState({ field: "role", value: value });
+              }}
+              id="role"
+            />
+          </div>
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <NewButton csVariant="accent" onClick={strongForm.submit}>
+          Add member
+        </NewButton>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+MemberAddForm.displayName = "MemberAddForm";
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.css b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.css
index 19a50be02..c1547d56a 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.css
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.css
@@ -92,4 +92,8 @@
     font-weight: var(--font-weight-bold);
     line-height: var(--line-height-bold);
   }
+
+  .members_table__span {
+    font-size: var(--font-size-body-md);
+  }
 }
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.tsx b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.tsx
index 32f52ad6c..b35d9f478 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.tsx
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/Members.tsx
@@ -1,390 +1,59 @@
-import { faPlus, faTrashCan } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useReducer, useState } from "react";
-import { useLoaderData, useOutletContext, useRevalidator } from "react-router";
-
-import {
-  Modal,
-  NewAvatar,
-  NewButton,
-  NewIcon,
-  NewLink,
-  NewSelect,
-  NewTable,
-  NewTextInput,
-  type SelectOption,
-  useToast,
-} from "@thunderstore/cyberstorm";
-import { TableSort } from "@thunderstore/cyberstorm/src/newComponents/Table/Table";
+import { Suspense } from "react";
 import {
-  type RequestConfig,
-  teamAddMember,
-  type TeamAddMemberRequestData,
-  teamEditMember,
-  teamRemoveMember,
-} from "@thunderstore/thunderstore-api";
-import { ApiAction } from "@thunderstore/ts-api-react-actions";
+  Await,
+  useLoaderData,
+  useOutletContext,
+  useRevalidator,
+} from "react-router";
 
 import { type OutletContextShape } from "app/root";
 import { makeTeamSettingsTabLoader } from "cyberstorm/utils/dapperClientLoaders";
-import { useStrongForm } from "cyberstorm/utils/StrongForm/useStrongForm";
+import { MemberAddForm } from "./MemberAddForm";
+import { MembersTable } from "./MembersTable";
 import "./Members.css";
 
 export const clientLoader = makeTeamSettingsTabLoader(
   async (dapper, teamName) => ({
-    members: await dapper.getTeamMembers(teamName),
+    members: dapper.getTeamMembers(teamName),
   })
 );
 
-export function HydrateFallback() {
-  return <div style={{ padding: "32px" }}>Loading...</div>;
-}
-
-const teamMemberColumns = [
-  { value: "User", disableSort: false },
-  { value: "Role", disableSort: false },
-  { value: "Actions", disableSort: true },
-];
-
-const roleOptions: SelectOption<"owner" | "member">[] = [
-  { value: "member", label: "Member" },
-  { value: "owner", label: "Owner" },
-];
-
 export default function Members() {
   const { teamName, members } = useLoaderData<typeof clientLoader>();
   const outletContext = useOutletContext() as OutletContextShape;
-
   const revalidator = useRevalidator();
 
   async function teamMemberRevalidate() {
     revalidator.revalidate();
   }
 
-  const currentUser = outletContext.currentUser;
-  const currentUserTeam = currentUser?.teams_full?.find(
-    (team) => team.name === teamName
-  );
-  const isOwner = currentUserTeam?.role === "owner";
-
-  const toast = useToast();
-
-  const changeMemberRoleAction = ApiAction({
-    endpoint: teamEditMember,
-    onSubmitSuccess: () => {
-      toast.addToast({
-        csVariant: "success",
-        children: `Member role updated`,
-        duration: 4000,
-      });
-      teamMemberRevalidate();
-    },
-    onSubmitError: (error) => {
-      toast.addToast({
-        csVariant: "danger",
-        children: `Error occurred: ${error.message || "Unknown error"}`,
-        duration: 8000,
-      });
-    },
-  });
-
-  function changeMemberRole(username: string, value: "owner" | "member") {
-    changeMemberRoleAction({
-      params: { teamIdentifier: teamName, username },
-      data: { role: value },
-      queryParams: {},
-      config: outletContext.requestConfig,
-    });
-  }
-
-  const tableData = members.map((member, index) => {
-    return [
-      {
-        value: (
-          <NewLink
-            primitiveType="cyberstormLink"
-            linkId="User"
-            key={`user_${index}`}
-            user={member.username}
-            rootClasses="members__user"
-          >
-            <NewAvatar
-              src={member.avatar}
-              username={member.username}
-              csSize="small"
-            />
-            <span>{member.username}</span>
-          </NewLink>
-        ),
-        sortValue: member.username,
-      },
-      {
-        value: (
-          <div key={`role_${index}`}>
-            <NewSelect
-              csSize="xsmall"
-              options={roleOptions}
-              value={member.role}
-              onChange={(val: "owner" | "member") =>
-                changeMemberRole(member.username, val)
-              }
-              disabled={!isOwner || currentUser?.username === member.username}
-            />
-          </div>
-        ),
-        sortValue: member.role,
-      },
-      {
-        value:
-          !isOwner || currentUser?.username === member.username ? null : (
-            <RemoveTeamMemberForm
-              indexKey={`action_${index}`}
-              teamName={teamName}
-              userName={member.username}
-              updateTrigger={teamMemberRevalidate}
-              config={outletContext.requestConfig}
-            />
-          ),
-        sortValue: 0,
-      },
-    ];
-  });
-
   return (
-    <div className="settings-items">
-      <div className="settings-items__item">
-        <div className="settings-items__meta">
-          <p className="settings-items__title">Teams</p>
-          <p className="settings-items__description">Manage your teams</p>
-          <AddTeamMemberForm
-            teamName={teamName}
-            updateTrigger={teamMemberRevalidate}
-            config={outletContext.requestConfig}
-          />
-        </div>
-        <div className="settings-items__content">
-          <NewTable
-            headers={teamMemberColumns}
-            rows={tableData}
-            sortByHeader={1}
-            sortDirection={TableSort.ASC}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function AddTeamMemberForm(props: {
-  teamName: string;
-  updateTrigger: () => Promise<void>;
-  config: () => RequestConfig;
-}) {
-  const toast = useToast();
-  const [open, setOpen] = useState(false);
-
-  function formFieldUpdateAction(
-    state: TeamAddMemberRequestData,
-    action: {
-      field: keyof TeamAddMemberRequestData;
-      value: TeamAddMemberRequestData[keyof TeamAddMemberRequestData];
-    }
-  ) {
-    return {
-      ...state,
-      [action.field]: action.value,
-    };
-  }
-
-  const [formInputs, updateFormFieldState] = useReducer(formFieldUpdateAction, {
-    username: "",
-    role: "member",
-  });
-
-  type SubmitorOutput = Awaited<ReturnType<typeof teamAddMember>>;
-
-  async function submitor(data: typeof formInputs): Promise<SubmitorOutput> {
-    return await teamAddMember({
-      config: props.config,
-      params: { team_name: props.teamName },
-      queryParams: {},
-      data: { username: data.username, role: data.role },
-    });
-  }
-
-  type InputErrors = {
-    [key in keyof typeof formInputs]?: string | string[];
-  };
-
-  const strongForm = useStrongForm<
-    typeof formInputs,
-    TeamAddMemberRequestData,
-    Error,
-    SubmitorOutput,
-    Error,
-    InputErrors
-  >({
-    inputs: formInputs,
-    submitor,
-    onSubmitSuccess: () => {
-      props.updateTrigger();
-      toast.addToast({
-        csVariant: "success",
-        children: `Team member added`,
-        duration: 4000,
-      });
-      setOpen(false);
-    },
-    onSubmitError: (error) => {
-      toast.addToast({
-        csVariant: "danger",
-        children: `Error occurred: ${error.message || "Unknown error"}`,
-        duration: 8000,
-      });
-    },
-  });
-
-  return (
-    <Modal
-      open={open}
-      onOpenChange={setOpen}
-      titleContent="Add Team Member"
-      csSize="small"
-      trigger={
-        <NewButton>
-          Add Member
-          <NewIcon csMode="inline" noWrapper>
-            <FontAwesomeIcon icon={faPlus} />
-          </NewIcon>
-        </NewButton>
-      }
-    >
-      <Modal.Body>
-        <div className="add-member-form__text">
-          Enter the username of the user you wish to add to the team{" "}
-          <span className="add-member-form__text--bold">{props.teamName}</span>.
-        </div>
-        <div className="add-member-form__fields">
-          <div className="add-member-form__field add-member-form__username">
-            <label className="add-member-form__label" htmlFor="username">
-              Username
-            </label>
-            <NewTextInput
-              name={"username"}
-              placeholder={"Enter username..."}
-              onChange={(e) => {
-                updateFormFieldState({
-                  field: "username",
-                  value: e.target.value,
-                });
-              }}
-              rootClasses="add-member-form__username-input"
-              id="username"
-            />
+    <Suspense fallback={<div>Loading...</div>}>
+      <Await resolve={members}>
+        {(resolvedMembers) => (
+          <div className="settings-items">
+            <div className="settings-items__item">
+              <div className="settings-items__meta">
+                <p className="settings-items__title">Teams</p>
+                <p className="settings-items__description">Manage your teams</p>
+                <MemberAddForm
+                  teamName={teamName}
+                  updateTrigger={teamMemberRevalidate}
+                  config={outletContext.requestConfig}
+                />
+              </div>
+              <div className="settings-items__content">
+                <MembersTable
+                  teamName={teamName}
+                  members={resolvedMembers}
+                  updateTrigger={teamMemberRevalidate}
+                  config={outletContext.requestConfig}
+                />
+              </div>
+            </div>
           </div>
-          <div className="add-member-form__field">
-            <label className="add-member-form__label" htmlFor="role">
-              Role
-            </label>
-            <NewSelect
-              name={"role"}
-              options={roleOptions}
-              defaultValue="member"
-              placeholder="Select role..."
-              onChange={(value) => {
-                updateFormFieldState({ field: "role", value: value });
-              }}
-              id="role"
-            />
-          </div>
-        </div>
-      </Modal.Body>
-      <Modal.Footer>
-        <NewButton csVariant="accent" onClick={strongForm.submit}>
-          Add member
-        </NewButton>
-      </Modal.Footer>
-    </Modal>
+        )}
+      </Await>
+    </Suspense>
   );
 }
-
-AddTeamMemberForm.displayName = "AddTeamMemberForm";
-
-function RemoveTeamMemberForm(props: {
-  indexKey?: string;
-  userName: string;
-  teamName: string;
-  updateTrigger: () => Promise<void>;
-  config: () => RequestConfig;
-}) {
-  const toast = useToast();
-  const [open, setOpen] = useState(false);
-
-  const kickMemberAction = ApiAction({
-    endpoint: teamRemoveMember,
-    onSubmitSuccess: () => {
-      props.updateTrigger();
-      toast.addToast({
-        csVariant: "success",
-        children: `Team member removed`,
-        duration: 4000,
-      });
-    },
-    onSubmitError: (error) => {
-      toast.addToast({
-        csVariant: "danger",
-        children: `Error occurred: ${error.message || "Unknown error"}`,
-        duration: 8000,
-      });
-    },
-  });
-
-  return (
-    <Modal
-      open={open}
-      onOpenChange={setOpen}
-      titleContent="Confirm member removal"
-      csSize="small"
-      trigger={
-        <NewButton csVariant="danger" csSize="xsmall" key={props.indexKey}>
-          <NewIcon csMode="inline" noWrapper>
-            <FontAwesomeIcon icon={faTrashCan} />
-          </NewIcon>
-          Kick
-        </NewButton>
-      }
-    >
-      <Modal.Body className="remove-member-form__body">
-        <div className="remove-member-form__text">
-          You are about to kick member{" "}
-          <span className="remove-member-form__text--bold">
-            {props.userName}
-          </span>
-          .
-        </div>
-      </Modal.Body>
-      <Modal.Footer>
-        <Modal.Close asChild>
-          <NewButton>Cancel</NewButton>
-        </Modal.Close>
-        <NewButton
-          csVariant="danger"
-          onClick={() =>
-            kickMemberAction({
-              config: props.config,
-              params: { team_name: props.teamName, username: props.userName },
-              queryParams: {},
-              data: {},
-            }).then(() => {
-              setOpen(false);
-            })
-          }
-        >
-          Kick member
-        </NewButton>
-      </Modal.Footer>
-    </Modal>
-  );
-}
-
-RemoveTeamMemberForm.displayName = "RemoveTeamMemberForm";
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/MembersTable.tsx b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/MembersTable.tsx
new file mode 100644
index 000000000..bee87f952
--- /dev/null
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Members/MembersTable.tsx
@@ -0,0 +1,241 @@
+import { faTrashCan } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
+import { useOutletContext } from "react-router";
+
+import {
+  Modal,
+  NewAvatar,
+  NewButton,
+  NewIcon,
+  NewLink,
+  NewSelect,
+  NewTable,
+  useToast,
+  type SelectOption,
+} from "@thunderstore/cyberstorm";
+import { TableSort } from "@thunderstore/cyberstorm/src/newComponents/Table/Table";
+import {
+  teamEditMember,
+  teamRemoveMember,
+  type RequestConfig,
+  type TeamMember,
+} from "@thunderstore/thunderstore-api";
+import { ApiAction } from "@thunderstore/ts-api-react-actions";
+
+import { type OutletContextShape } from "app/root";
+
+const teamMemberColumns = [
+  { value: "User", disableSort: false },
+  { value: "Role", disableSort: false },
+  { value: "Actions", disableSort: true },
+];
+
+const roleOptions: SelectOption<"owner" | "member">[] = [
+  { value: "member", label: "Member" },
+  { value: "owner", label: "Owner" },
+];
+
+export function MembersTable(props: {
+  config: () => RequestConfig;
+  members: TeamMember[];
+  teamName: string;
+  updateTrigger: () => Promise<void>;
+}) {
+  const { config, members, teamName, updateTrigger } = props;
+  const outletContext = useOutletContext() as OutletContextShape;
+  const toast = useToast();
+
+  const currentUser = outletContext.currentUser;
+  const membership = currentUser?.teams_full.find((t) => t.name === teamName);
+  const isOwner = membership?.role === "owner";
+
+  const canManageMember = (username: string) =>
+    isOwner && currentUser?.username !== username;
+
+  const changeMemberRoleAction = ApiAction({
+    endpoint: teamEditMember,
+    onSubmitSuccess: () => {
+      toast.addToast({
+        csVariant: "success",
+        children: `Member role updated`,
+        duration: 4000,
+      });
+      updateTrigger();
+    },
+    onSubmitError: (error) => {
+      toast.addToast({
+        csVariant: "danger",
+        children: `Error occurred: ${error.message || "Unknown error"}`,
+        duration: 8000,
+      });
+    },
+  });
+
+  function changeMemberRole(username: string, value: "owner" | "member") {
+    changeMemberRoleAction({
+      params: { teamIdentifier: teamName, username },
+      data: { role: value },
+      queryParams: {},
+      config,
+    });
+  }
+
+  const tableData = members.map((member, index) => {
+    return [
+      {
+        value: (
+          <NewLink
+            primitiveType="cyberstormLink"
+            linkId="User"
+            key={`user_${member.username}_${index}`}
+            user={member.username}
+            rootClasses="members__user"
+          >
+            <NewAvatar
+              src={member.avatar}
+              username={member.username}
+              csSize="small"
+            />
+            <span>{member.username}</span>
+          </NewLink>
+        ),
+        sortValue: member.username,
+      },
+      {
+        value: (
+          <div key={`role_${member.username}_${index}`}>
+            <NewSelect
+              csSize="xsmall"
+              options={roleOptions}
+              value={member.role}
+              onChange={(val: "owner" | "member") =>
+                changeMemberRole(member.username, val)
+              }
+              disabled={!canManageMember(member.username)}
+            />
+          </div>
+        ),
+        sortValue: member.role,
+      },
+      {
+        value: canManageMember(member.username) ? (
+          <RemoveTeamMemberForm
+            indexKey={`action_${member.username}_${index}`}
+            teamName={teamName}
+            userName={member.username}
+            updateTrigger={updateTrigger}
+            config={config}
+          />
+        ) : currentUser?.username === member.username ? (
+          <span
+            className="members_table__span"
+            key={`action_${member.username}_${index}`}
+          >
+            Use the{" "}
+            <NewLink
+              linkId="TeamSettingsSettings"
+              team={teamName}
+              primitiveType="cyberstormLink"
+              csVariant="cyber"
+            >
+              Settings tab
+            </NewLink>{" "}
+            to leave the team.
+          </span>
+        ) : null,
+        sortValue: 0,
+      },
+    ];
+  });
+
+  return (
+    <NewTable
+      headers={teamMemberColumns}
+      rows={tableData}
+      sortByHeader={1}
+      sortDirection={TableSort.ASC}
+    />
+  );
+}
+
+MembersTable.displayName = "MembersTable";
+
+function RemoveTeamMemberForm(props: {
+  indexKey?: string;
+  userName: string;
+  teamName: string;
+  updateTrigger: () => Promise<void>;
+  config: () => RequestConfig;
+}) {
+  const toast = useToast();
+  const [open, setOpen] = useState(false);
+
+  const kickMemberAction = ApiAction({
+    endpoint: teamRemoveMember,
+    onSubmitSuccess: () => {
+      props.updateTrigger();
+      toast.addToast({
+        csVariant: "success",
+        children: `Team member removed`,
+        duration: 4000,
+      });
+    },
+    onSubmitError: (error) => {
+      toast.addToast({
+        csVariant: "danger",
+        children: `Error occurred: ${error.message || "Unknown error"}`,
+        duration: 8000,
+      });
+    },
+  });
+
+  return (
+    <Modal
+      open={open}
+      onOpenChange={setOpen}
+      titleContent="Confirm member removal"
+      csSize="small"
+      trigger={
+        <NewButton csVariant="danger" csSize="xsmall" key={props.indexKey}>
+          <NewIcon csMode="inline" noWrapper>
+            <FontAwesomeIcon icon={faTrashCan} />
+          </NewIcon>
+          Kick
+        </NewButton>
+      }
+    >
+      <Modal.Body className="remove-member-form__body">
+        <div className="remove-member-form__text">
+          You are about to kick member{" "}
+          <span className="remove-member-form__text--bold">
+            {props.userName}
+          </span>
+          .
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <Modal.Close asChild>
+          <NewButton>Cancel</NewButton>
+        </Modal.Close>
+        <NewButton
+          csVariant="danger"
+          onClick={() =>
+            kickMemberAction({
+              config: props.config,
+              params: { team_name: props.teamName, username: props.userName },
+              queryParams: {},
+              data: {},
+            }).then(() => {
+              setOpen(false);
+            })
+          }
+        >
+          Kick member
+        </NewButton>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+RemoveTeamMemberForm.displayName = "RemoveTeamMemberForm";
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Profile/Profile.tsx b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Profile/Profile.tsx
index ef26cd41e..d76552e27 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Profile/Profile.tsx
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Profile/Profile.tsx
@@ -1,9 +1,15 @@
-import { useReducer } from "react";
-import { useLoaderData, useOutletContext, useRevalidator } from "react-router";
+import { Suspense, useReducer } from "react";
+import {
+  Await,
+  useLoaderData,
+  useOutletContext,
+  useRevalidator,
+} from "react-router";
 
 import { NewButton, NewTextInput, useToast } from "@thunderstore/cyberstorm";
 import {
   teamDetailsEdit,
+  type TeamDetails,
   type TeamDetailsEditRequestData,
 } from "@thunderstore/thunderstore-api";
 
@@ -17,20 +23,30 @@ export const clientLoader = makeTeamSettingsTabLoader(
     // TODO: for hygienie we shouldn't use this public endpoint but
     // have an endpoint that confirms user permissions and returns
     // possibly sensitive information.
-    team: await dapper.getTeamDetails(teamName),
+    team: dapper.getTeamDetails(teamName),
   })
 );
 
-export function HydrateFallback() {
-  return <div style={{ padding: "32px" }}>Loading...</div>;
-}
-
 export default function Profile() {
   const { team } = useLoaderData<typeof clientLoader>();
-  const outletContext = useOutletContext() as OutletContextShape;
 
-  const revalidator = useRevalidator();
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Await resolve={team}>
+        {(resolvedTeam) => (
+          <div className="settings-items team-profile">
+            <ProfileForm team={resolvedTeam} />
+          </div>
+        )}
+      </Await>
+    </Suspense>
+  );
+}
 
+function ProfileForm(props: { team: TeamDetails }) {
+  const { team } = props;
+  const outletContext = useOutletContext() as OutletContextShape;
+  const revalidator = useRevalidator();
   const toast = useToast();
 
   function formFieldUpdateAction(
@@ -93,37 +109,34 @@ export default function Profile() {
   });
 
   return (
-    <div className="settings-items team-profile">
-      <div className="settings-items__item">
-        <div className="settings-items__meta">
-          <p className="settings-items__title">Donation Link</p>
-        </div>
-        <div className="settings-items__content">
-          <div className="settings-items__island">
-            <div className="team-profile__donationLink">
-              <span className="team-profile__label">URL</span>
-              <NewTextInput
-                name={"donation_link"}
-                placeholder={"https://"}
-                value={formInputs.donation_link}
-                onChange={(e) =>
-                  updateFormFieldState({
-                    field: "donation_link",
-                    value: e.target.value,
-                  })
-                }
-                rootClasses="team-profile__input"
-              />
-            </div>
+    <div className="settings-items__item">
+      <div className="settings-items__meta">
+        <p className="settings-items__title">Donation Link</p>
+      </div>
+      <div className="settings-items__content">
+        <div className="settings-items__island">
+          <div className="team-profile__donationLink">
+            <span className="team-profile__label">URL</span>
+            <NewTextInput
+              name={"donation_link"}
+              placeholder={"https://"}
+              value={formInputs.donation_link}
+              onChange={(e) =>
+                updateFormFieldState({
+                  field: "donation_link",
+                  value: e.target.value,
+                })
+              }
+              rootClasses="team-profile__input"
+            />
           </div>
-          <NewButton
-            rootClasses="team-profile__save"
-            onClick={strongForm.submit}
-          >
-            Save changes
-          </NewButton>
         </div>
+        <NewButton rootClasses="team-profile__save" onClick={strongForm.submit}>
+          Save changes
+        </NewButton>
       </div>
     </div>
   );
 }
+
+ProfileForm.displayName = "ProfileForm";
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccounts.tsx b/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccounts.tsx
index 81c822ab4..ad1fca880 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccounts.tsx
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccounts.tsx
@@ -1,21 +1,22 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useReducer, useState } from "react";
-import { useLoaderData, useOutletContext, useRevalidator } from "react-router";
+import { Suspense, useReducer, useState } from "react";
+import {
+  Await,
+  useLoaderData,
+  useOutletContext,
+  useRevalidator,
+} from "react-router";
 
 import {
   NewAlert,
   NewButton,
   Modal,
-  NewTable,
   NewIcon,
   NewTextInput,
-  Heading,
   CodeBox,
 } from "@thunderstore/cyberstorm";
-import { TableSort } from "@thunderstore/cyberstorm/src/newComponents/Table/Table";
 import {
-  type RequestConfig,
   teamAddServiceAccount,
   type TeamServiceAccountAddRequestData,
 } from "@thunderstore/thunderstore-api";
@@ -23,106 +24,59 @@ import {
 import { type OutletContextShape } from "app/root";
 import { makeTeamSettingsTabLoader } from "cyberstorm/utils/dapperClientLoaders";
 import { useStrongForm } from "cyberstorm/utils/StrongForm/useStrongForm";
-import { ServiceAccountRemoveModal } from "./ServiceAccountRemoveModal";
+import { ServiceAccountsTable } from "./ServiceAccountsTable";
 import "./ServiceAccounts.css";
 
 export const clientLoader = makeTeamSettingsTabLoader(
   async (dapper, teamName) => ({
-    serviceAccounts: await dapper.getTeamServiceAccounts(teamName),
+    serviceAccounts: dapper.getTeamServiceAccounts(teamName),
   })
 );
 
-export function HydrateFallback() {
-  return <div style={{ padding: "32px" }}>Loading...</div>;
-}
-
-const serviceAccountColumns = [
-  { value: "Nickname", disableSort: false },
-  { value: "Last Used", disableSort: false },
-  { value: "Actions", disableSort: true },
-];
-
 export default function ServiceAccounts() {
   const { teamName, serviceAccounts } = useLoaderData<typeof clientLoader>();
-  const outletContext = useOutletContext() as OutletContextShape;
-
   const revalidator = useRevalidator();
 
-  const currentUserTeam = outletContext.currentUser?.teams_full?.find(
-    (team) => team.name === teamName
-  );
-  const isOwner = currentUserTeam?.role === "owner";
-
   async function serviceAccountRevalidate() {
     revalidator.revalidate();
   }
 
-  const tableData = serviceAccounts.map((serviceAccount) => {
-    return [
-      {
-        value: (
-          <p className="team-service-accounts__nickname">
-            {serviceAccount.name}
-          </p>
-        ),
-        sortValue: serviceAccount.name,
-      },
-      {
-        value: (
-          <p className="team-service-accounts__last-used">
-            {serviceAccount.last_used ?? "Never"}
-          </p>
-        ),
-        sortValue: serviceAccount.last_used ?? "0",
-      },
-      {
-        value: (
-          <ServiceAccountRemoveModal
-            key={serviceAccount.identifier}
-            serviceAccount={serviceAccount}
-            teamName={teamName}
-            outletContext={outletContext}
-            revalidate={serviceAccountRevalidate}
-          />
-        ),
-        sortValue: 0,
-      },
-    ];
-  });
-
   return (
-    <div className="settings-items">
-      <div className="settings-items__item">
-        <div className="settings-items__meta">
-          <p className="settings-items__title">Service accounts</p>
-          <p className="settings-items__description">Your loyal servants</p>
-          {isOwner && (
-            <AddServiceAccountForm
-              teamName={teamName}
-              config={outletContext.requestConfig}
-              serviceAccountRevalidate={serviceAccountRevalidate}
-            />
-          )}
-        </div>
-        <div className="settings-items__content">
-          <NewTable
-            titleRowContent={<Heading csLevel="3">Service Accounts</Heading>}
-            headers={serviceAccountColumns}
-            rows={tableData}
-            sortByHeader={1}
-            sortDirection={TableSort.ASC}
-          />
-        </div>
-      </div>
-    </div>
+    <Suspense fallback={<div>Loading...</div>}>
+      <Await resolve={serviceAccounts}>
+        {(resolvedServiceAccounts) => (
+          <div className="settings-items">
+            <div className="settings-items__item">
+              <div className="settings-items__meta">
+                <p className="settings-items__title">Service accounts</p>
+                <p className="settings-items__description">
+                  Your loyal servants
+                </p>
+                <AddServiceAccountForm
+                  teamName={teamName}
+                  serviceAccountRevalidate={serviceAccountRevalidate}
+                />
+              </div>
+              <div className="settings-items__content">
+                <ServiceAccountsTable
+                  serviceAccounts={resolvedServiceAccounts}
+                  serviceAccountRevalidate={serviceAccountRevalidate}
+                  teamName={teamName}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </Await>
+    </Suspense>
   );
 }
 
 function AddServiceAccountForm(props: {
   teamName: string;
-  config: () => RequestConfig;
-  serviceAccountRevalidate?: () => void;
+  serviceAccountRevalidate: () => Promise<void>;
 }) {
+  const outletContext = useOutletContext() as OutletContextShape;
   const [open, setOpen] = useState(false);
   const [serviceAccountAdded, setServiceAccountAdded] = useState(false);
   const [addedServiceAccountToken, setAddedServiceAccountToken] = useState("");
@@ -130,6 +84,14 @@ function AddServiceAccountForm(props: {
     useState("");
   const [error, setError] = useState<string | null>(null);
 
+  const currentUserTeam = outletContext.currentUser?.teams_full?.find(
+    (team) => team.name === props.teamName
+  );
+
+  if (currentUserTeam?.role !== "owner") {
+    return null;
+  }
+
   function onSuccess(
     result: Awaited<ReturnType<typeof teamAddServiceAccount>>
   ) {
@@ -161,7 +123,7 @@ function AddServiceAccountForm(props: {
 
   async function submitor(data: typeof formInputs): Promise<SubmitorOutput> {
     return await teamAddServiceAccount({
-      config: props.config,
+      config: outletContext.requestConfig,
       params: { team_name: props.teamName },
       queryParams: {},
       data: { nickname: data.nickname.trim() },
@@ -188,7 +150,7 @@ function AddServiceAccountForm(props: {
       // Refresh the service accounts list to show the newly created account
       // TODO: When API returns identifier in response, we can append the new
       // service account to the list instead of refreshing from backend
-      props.serviceAccountRevalidate?.();
+      props.serviceAccountRevalidate();
     },
     onSubmitError: (error) => {
       const message = `Error occurred: ${error.message || "Unknown error"}`;
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccountsTable.tsx b/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccountsTable.tsx
new file mode 100644
index 000000000..61a9481df
--- /dev/null
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/ServiceAccounts/ServiceAccountsTable.tsx
@@ -0,0 +1,69 @@
+import { useOutletContext } from "react-router";
+
+import { NewTable, Heading } from "@thunderstore/cyberstorm";
+import { TableSort } from "@thunderstore/cyberstorm/src/newComponents/Table/Table";
+import { type TeamServiceAccount } from "@thunderstore/thunderstore-api";
+
+import { type OutletContextShape } from "app/root";
+import { ServiceAccountRemoveModal } from "./ServiceAccountRemoveModal";
+import "./ServiceAccounts.css";
+
+const serviceAccountColumns = [
+  { value: "Nickname", disableSort: false },
+  { value: "Last Used", disableSort: false },
+  { value: "Actions", disableSort: true },
+];
+
+export function ServiceAccountsTable(props: {
+  serviceAccounts: TeamServiceAccount[];
+  teamName: string;
+  serviceAccountRevalidate: () => Promise<void>;
+}) {
+  const { serviceAccounts, serviceAccountRevalidate, teamName } = props;
+  const outletContext = useOutletContext() as OutletContextShape;
+
+  const tableData = serviceAccounts.map((serviceAccount) => {
+    return [
+      {
+        value: (
+          <p className="team-service-accounts__nickname">
+            {serviceAccount.name}
+          </p>
+        ),
+        sortValue: serviceAccount.name,
+      },
+      {
+        value: (
+          <p className="team-service-accounts__last-used">
+            {serviceAccount.last_used ?? "Never"}
+          </p>
+        ),
+        sortValue: serviceAccount.last_used ?? "0",
+      },
+      {
+        value: (
+          <ServiceAccountRemoveModal
+            key={serviceAccount.identifier}
+            serviceAccount={serviceAccount}
+            teamName={teamName}
+            revalidate={serviceAccountRevalidate}
+            outletContext={outletContext}
+          />
+        ),
+        sortValue: 0,
+      },
+    ];
+  });
+
+  return (
+    <NewTable
+      titleRowContent={<Heading csLevel="3">Service Accounts</Heading>}
+      headers={serviceAccountColumns}
+      rows={tableData}
+      sortByHeader={1}
+      sortDirection={TableSort.ASC}
+    />
+  );
+}
+
+ServiceAccountsTable.displayName = "ServiceAccountsTable";
diff --git a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/Settings.tsx b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/Settings.tsx
index c43c1ec15..588b0e25b 100644
--- a/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/Settings.tsx
+++ b/apps/cyberstorm-remix/app/settings/teams/team/tabs/Settings/Settings.tsx
@@ -1,7 +1,12 @@
 import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useReducer, useState } from "react";
-import { useLoaderData, useNavigate, useOutletContext } from "react-router";
+import { Suspense, useReducer, useState } from "react";
+import {
+  Await,
+  useLoaderData,
+  useNavigate,
+  useOutletContext,
+} from "react-router";
 
 import "./Settings.css";
 import {
@@ -28,20 +33,18 @@ import { useStrongForm } from "cyberstorm/utils/StrongForm/useStrongForm";
 
 export const clientLoader = makeTeamSettingsTabLoader(
   // TODO: add end point for checking can leave/disband status.
-  async (dapper, teamName) => ({})
+  async (dapper, teamName) => ({ teamName })
 );
 
 export default function Settings() {
   const { teamName } = useLoaderData<typeof clientLoader>();
   const outletContext = useOutletContext() as OutletContextShape;
-
-  if (!outletContext.currentUser || !outletContext.currentUser.username)
-    return <NotLoggedIn />;
-
   const toast = useToast();
-
   const navigate = useNavigate();
 
+  const currentUser = outletContext.currentUser?.username;
+  if (!currentUser) return <NotLoggedIn />;
+
   async function moveToTeams() {
     toast.addToast({
       csVariant: "info",
@@ -52,57 +55,63 @@ export default function Settings() {
   }
 
   return (
-    <div className="settings-items">
-      <div className="settings-items__item">
-        <div className="settings-items__meta">
-          <p className="settings-items__title">Leave team</p>
-          <p className="settings-items__description">Leave your team</p>
-        </div>
-        <div className="settings-items__content">
-          <NewAlert csVariant="danger">
-            You cannot currently leave this team as you are it&apos;s last
-            owner.
-          </NewAlert>
-          <p>
-            If you are the owner of the team, you can only leave if the team has
-            another owner assigned.
-          </p>
-          <LeaveTeamForm
-            userName={outletContext.currentUser.username}
-            teamName={teamName}
-            toast={toast}
-            config={outletContext.requestConfig}
-            updateTrigger={moveToTeams}
-          />
-        </div>
-      </div>
-      <div className="settings-items__separator" />
-      <div className="settings-items__item">
-        <div className="settings-items__meta">
-          <p className="settings-items__title">Disband team</p>
-          <p className="settings-items__description">
-            Disband your team completely
-          </p>
-        </div>
-        <div className="settings-items__content">
-          <NewAlert csVariant="danger">
-            You cannot currently disband this team as it has packages.
-          </NewAlert>
-          <p>You are about to disband the team {teamName}.</p>
-          <p>
-            Be aware you can currently only disband teams with no packages. If
-            you need to archive a team with existing pages, contact Mythic#0001
-            on the Thunderstore Discord.
-          </p>
-          <DisbandTeamForm
-            teamName={teamName}
-            updateTrigger={moveToTeams}
-            config={outletContext.requestConfig}
-            toast={toast}
-          />
-        </div>
-      </div>
-    </div>
+    <Suspense fallback={<div>Loading...</div>}>
+      <Await resolve={teamName}>
+        {(resolvedTeamName) => (
+          <div className="settings-items">
+            <div className="settings-items__item">
+              <div className="settings-items__meta">
+                <p className="settings-items__title">Leave team</p>
+                <p className="settings-items__description">Leave your team</p>
+              </div>
+              <div className="settings-items__content">
+                <NewAlert csVariant="danger">
+                  You cannot currently leave this team as you are it&apos;s last
+                  owner.
+                </NewAlert>
+                <p>
+                  If you are the owner of the team, you can only leave if the
+                  team has another owner assigned.
+                </p>
+                <LeaveTeamForm
+                  userName={currentUser}
+                  teamName={resolvedTeamName}
+                  toast={toast}
+                  config={outletContext.requestConfig}
+                  updateTrigger={moveToTeams}
+                />
+              </div>
+            </div>
+            <div className="settings-items__separator" />
+            <div className="settings-items__item">
+              <div className="settings-items__meta">
+                <p className="settings-items__title">Disband team</p>
+                <p className="settings-items__description">
+                  Disband your team completely
+                </p>
+              </div>
+              <div className="settings-items__content">
+                <NewAlert csVariant="danger">
+                  You cannot currently disband this team as it has packages.
+                </NewAlert>
+                <p>You are about to disband the team {resolvedTeamName}.</p>
+                <p>
+                  Be aware you can currently only disband teams with no
+                  packages. If you need to archive a team with existing pages,
+                  contact Mythic#0001 on the Thunderstore Discord.
+                </p>
+                <DisbandTeamForm
+                  teamName={resolvedTeamName}
+                  updateTrigger={moveToTeams}
+                  config={outletContext.requestConfig}
+                  toast={toast}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </Await>
+    </Suspense>
   );
 }
 
diff --git a/apps/cyberstorm-remix/cyberstorm/utils/dapperClientLoaders.ts b/apps/cyberstorm-remix/cyberstorm/utils/dapperClientLoaders.ts
index 63fba0ab8..807439792 100644
--- a/apps/cyberstorm-remix/cyberstorm/utils/dapperClientLoaders.ts
+++ b/apps/cyberstorm-remix/cyberstorm/utils/dapperClientLoaders.ts
@@ -5,6 +5,21 @@ import { ApiError, type GenericApiError } from "@thunderstore/thunderstore-api";
 
 import { getSessionTools } from "cyberstorm/security/publicEnvVariables";
 
+/**
+ * TODO
+ * 1) This approach no longer handles different ApiErrors properly
+ *    when the data isn't awaited in the clientLoader but returned as
+ *    promises for the Suspense/Await elements to handle. Instead, any
+ *    HTTP error codes are shown as 500 errors. This isn't fixed yet
+ *    as it will be easier to do once upcoming project wide error
+ *    handling changes are merged.
+ * 2) The purpose of this helper was to reduce boilerplate in different
+ *    tab components of the team settings page. Half of that boilerplate
+ *    is Dapper setup, the other is handling ApiErrors. As the latter is
+ *    supposed to be handled elsewhere after the changes mentioned above,
+ *    this helper might no longer have a valid reason to exist after the
+ *    changes.
+ */
 export function makeTeamSettingsTabLoader<T>(
   dataFetcher: (dapper: DapperTs, teamName: string) => Promise<T>
 ) {