diff --git a/packages/graph-explorer/src/components/AlertDialog.tsx b/packages/graph-explorer/src/components/AlertDialog.tsx
new file mode 100644
index 000000000..01928401a
--- /dev/null
+++ b/packages/graph-explorer/src/components/AlertDialog.tsx
@@ -0,0 +1,202 @@
+"use client";
+
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import * as React from "react";
+
+import { cn } from "@/utils";
+
+import { Button } from "./Button";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm";
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <div className="fixed inset-0 z-50 flex h-full w-full items-center justify-center p-20">
+        <AlertDialogPrimitive.Content
+          data-slot="alert-dialog-content"
+          data-size={size}
+          className={cn(
+            "group/alert-dialog-content bg-popover text-popover-foreground ring-foreground/10 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 grid max-h-full w-full gap-6 overflow-y-auto rounded-xl p-6 shadow-lg ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
+            className,
+          )}
+          {...props}
+        />
+      </div>
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-cols-[auto_1fr] sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-3 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "cn-font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[p]:not-first:mbs-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};
diff --git a/packages/graph-explorer/src/components/Button/Button.tsx b/packages/graph-explorer/src/components/Button/Button.tsx
index 17cddeaf4..dca99299a 100644
--- a/packages/graph-explorer/src/components/Button/Button.tsx
+++ b/packages/graph-explorer/src/components/Button/Button.tsx
@@ -17,6 +17,8 @@ const buttonStyles = cva({
         "text-primary-foreground hover:bg-primary-subtle data-open:bg-primary-subtle",
       outline:
         "text-text-primary border-input hover:bg-muted data-open:border-primary-main border bg-transparent shadow-xs",
+      "primary-danger":
+        "bg-danger hover:bg-danger-hover data-open:bg-danger-hover text-white",
       danger:
         "bg-danger-subtle text-danger hover:bg-danger-subtle-hover data-open:bg-danger-subtle-hover",
       "danger-ghost":
diff --git a/packages/graph-explorer/src/components/Group.tsx b/packages/graph-explorer/src/components/Group.tsx
new file mode 100644
index 000000000..e8edb8d50
--- /dev/null
+++ b/packages/graph-explorer/src/components/Group.tsx
@@ -0,0 +1,89 @@
+import { cva, type VariantProps } from "cva";
+
+import { cn } from "@/utils";
+
+const groupVariants = cva({
+  base: "group/group divide-y rounded-xl border",
+  variants: {
+    variant: {
+      default: "border-border divide-border",
+      danger: "border-danger-foreground/25 divide-danger-foreground/25",
+      success: "border-success-foreground/25 divide-success-foreground/25",
+      warning: "border-warning-foreground/25 divide-warning-foreground/25",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+function Group({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof groupVariants> & { size?: "default" | "small" }) {
+  return (
+    <div
+      data-variant={variant}
+      data-size={size}
+      className={cn(groupVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function GroupHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "bg-neutral-subtle/50 text-text-secondary group-data-[variant=danger]/group:bg-danger-subtle/50 group-data-[variant=danger]/group:text-danger group-data-[variant=success]/group:bg-success-subtle/50 group-data-[variant=success]/group:text-success-main group-data-[variant=warning]/group:bg-warning-subtle/50 group-data-[variant=warning]/group:text-warning-main flex items-center gap-2 px-5 py-3 group-data-[size=small]/group:px-3 group-data-[size=small]/group:py-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function GroupMedia({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex shrink-0 items-center [&>svg]:size-4", className)}
+      {...props}
+    />
+  );
+}
+
+function GroupTitle({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"h2">) {
+  return (
+    <h2
+      className={cn(
+        "flex-1 text-xs font-medium tracking-wide uppercase",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </h2>
+  );
+}
+
+function GroupItem({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "space-y-4 px-5 py-4 group-data-[size=small]/group:px-3 group-data-[size=small]/group:py-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Group, GroupHeader, GroupMedia, GroupTitle, GroupItem };
+export type { VariantProps };
diff --git a/packages/graph-explorer/src/components/LabelledSetting.tsx b/packages/graph-explorer/src/components/LabelledSetting.tsx
new file mode 100644
index 000000000..a7aaf0c86
--- /dev/null
+++ b/packages/graph-explorer/src/components/LabelledSetting.tsx
@@ -0,0 +1,31 @@
+import type { PropsWithChildren } from "react";
+
+export function LabelledSetting({
+  label,
+  description,
+  htmlFor,
+  children,
+}: PropsWithChildren<{
+  label: string;
+  description?: string;
+  htmlFor?: string;
+}>) {
+  return (
+    <div className="group/labelled-setting flex flex-row items-center gap-8">
+      <label
+        htmlFor={htmlFor}
+        className="block flex-1 space-y-1 group-has-disabled/labelled-setting:cursor-not-allowed group-has-disabled/labelled-setting:opacity-70"
+      >
+        <p className="text-text-primary text-base leading-none font-medium text-pretty">
+          {label}
+        </p>
+        {description ? (
+          <p className="font-base text-text-secondary text-sm leading-normal text-pretty">
+            {description}
+          </p>
+        ) : null}
+      </label>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/graph-explorer/src/components/NavBar.tsx b/packages/graph-explorer/src/components/NavBar.tsx
index f552aff06..af9ffb627 100644
--- a/packages/graph-explorer/src/components/NavBar.tsx
+++ b/packages/graph-explorer/src/components/NavBar.tsx
@@ -56,7 +56,10 @@ export function NavBarActions({
   );
 }
 
-function NavBarLogo({ className, ...rest }: ComponentPropsWithRef<"div">) {
+export function NavBarLogo({
+  className,
+  ...rest
+}: ComponentPropsWithRef<"div">) {
   return (
     <div
       data-slot="nav-bar-logo"
diff --git a/packages/graph-explorer/src/components/SettingsPage.tsx b/packages/graph-explorer/src/components/SettingsPage.tsx
new file mode 100644
index 000000000..76c5e6160
--- /dev/null
+++ b/packages/graph-explorer/src/components/SettingsPage.tsx
@@ -0,0 +1,75 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "@/utils";
+
+/** Settings page wrapper; constrains width and spaces out its `Group` sections */
+export function SettingsPage({ className, ...props }: ComponentProps<"div">) {
+  return <div className={cn("max-w-[80ch] space-y-9", className)} {...props} />;
+}
+
+export function SettingsPageHeader({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="settings-page-header"
+      className={cn(
+        "group/settings-page-header grid grid-cols-[auto_1fr]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function SettingsPageIcon({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="settings-page-icon"
+      className={cn(
+        "bg-primary-subtle text-primary-foreground col-start-1 row-span-2 me-4 grid size-12 place-items-center items-center justify-center rounded-lg [&_svg]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function SettingsPageTitle({
+  className,
+  children,
+  ...props
+}: React.ComponentPropsWithRef<"h1">) {
+  return (
+    <h1
+      data-slot="settings-page-title"
+      className={cn(
+        "text-foreground col-start-2 text-2xl font-bold",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </h1>
+  );
+}
+
+export function SettingsPageDescription({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<"p">) {
+  return (
+    <p
+      data-slot="settings-page-description"
+      className={cn(
+        "text-muted-foreground font-base col-start-2 text-base",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/packages/graph-explorer/src/components/SettingsSection.tsx b/packages/graph-explorer/src/components/SettingsSection.tsx
deleted file mode 100644
index 09fd42cc9..000000000
--- a/packages/graph-explorer/src/components/SettingsSection.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import type {
-  ComponentProps,
-  ComponentPropsWithoutRef,
-  PropsWithChildren,
-} from "react";
-
-import { cn } from "@/utils";
-
-import { Switch } from "./Switch";
-
-/** Provides a default gap between section elements */
-export function SettingsSection({
-  className,
-  ...props
-}: ComponentProps<"section">) {
-  return (
-    <section
-      className={cn("max-w-paragraph space-y-6", className)}
-      {...props}
-    />
-  );
-}
-
-export function SettingsSectionHeader({
-  className,
-  ...props
-}: ComponentProps<"header">) {
-  return <header className={cn("space-y-1", className)} {...props} />;
-}
-
-export function SettingsSectionTitle({
-  className,
-  children,
-  ...props
-}: ComponentProps<"h2">) {
-  return (
-    <h2
-      className={cn(
-        "text-text-primary text-xl leading-snug font-bold",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </h2>
-  );
-}
-
-export function SettingsSectionDescription({
-  className,
-  ...props
-}: ComponentProps<"div">) {
-  return (
-    <div
-      className={cn(
-        "font-base text-text-secondary text-base leading-snug",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-/** Contains a list of `SettingsSection` elements and provides a gap between them */
-export function SettingsSectionContainer({
-  className,
-  ...props
-}: ComponentProps<"div">) {
-  return <div className={cn("flex flex-col gap-9", className)} {...props} />;
-}
-
-export function ToggleSetting({
-  label,
-  description,
-  ...props
-}: ComponentPropsWithoutRef<typeof Switch> & {
-  label: string;
-  description?: string;
-}) {
-  return (
-    <label
-      htmlFor={props.id}
-      className="flex flex-row items-center justify-between space-x-4"
-    >
-      <div className="space-y-1">
-        <p className="text-text-primary text-base leading-none font-medium text-pretty peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-          {label}
-        </p>
-        {description ? (
-          <p className="font-base text-text-secondary text-sm leading-normal text-pretty peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-            {description}
-          </p>
-        ) : null}
-      </div>
-      <Switch {...props} />
-    </label>
-  );
-}
-
-export function LabelledSetting({
-  label,
-  description,
-  children,
-}: PropsWithChildren<{
-  label: string;
-  description?: string;
-}>) {
-  return (
-    <div className="flex flex-row items-center justify-between gap-4">
-      <div className="block cursor-pointer space-y-1">
-        <p className="text-text-primary text-base leading-none font-medium text-pretty peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-          {label}
-        </p>
-        {description ? (
-          <p className="font-base text-text-secondary text-sm leading-normal text-pretty peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-            {description}
-          </p>
-        ) : null}
-      </div>
-      {children}
-    </div>
-  );
-}
diff --git a/packages/graph-explorer/src/components/index.ts b/packages/graph-explorer/src/components/index.ts
index 3dc6d0b41..46d05448c 100644
--- a/packages/graph-explorer/src/components/index.ts
+++ b/packages/graph-explorer/src/components/index.ts
@@ -1,4 +1,5 @@
 export * from "./Alert";
+export * from "./AlertDialog";
 export * from "./Button";
 
 export * from "./Checkbox";
@@ -32,6 +33,7 @@ export * from "./EmptyState";
 export * from "./Field";
 export * from "./FileButton";
 export * from "./Form";
+export * from "./Group";
 
 export * from "./IconPicker";
 
@@ -40,6 +42,7 @@ export * from "./numberFormat";
 export * from "./icons";
 
 export * from "./Input";
+export * from "./LabelledSetting";
 export { default as InputField } from "./InputField";
 export * from "./InputField";
 
@@ -75,7 +78,7 @@ export { default as SelectField } from "./SelectField";
 export * from "./SelectField";
 export * from "./Separator";
 
-export * from "./SettingsSection";
+export * from "./SettingsPage";
 
 export * from "./SidebarTabs";
 
diff --git a/packages/graph-explorer/src/index.css b/packages/graph-explorer/src/index.css
index 980f7519b..ec6ddbd63 100644
--- a/packages/graph-explorer/src/index.css
+++ b/packages/graph-explorer/src/index.css
@@ -3,13 +3,13 @@
 
 @config "../tailwind.config.ts";
 
-/* 
+/*
  * Use `dark` class name to indicate dark mode.
- * 
+ *
  * We will need to slowly build up dark mode support component by component, so
  * this is a way to force dark mode to be off, unless we explicitly set `dark`
  * in the classes in the root component.
- * 
+ *
  * https://github.com/aws/graph-explorer/issues/645
  */
 @custom-variant dark (&:where(.dark, .dark *));
@@ -39,10 +39,10 @@
 
   /**
    * The brand color serves as the primary accent color for Graph Explorer.
-   *  
+   *
    * It is a custom blue color that is between Tailwind's sky and blue colors,
-   * with slightly less vibrancy. 
-   * 
+   * with slightly less vibrancy.
+   *
    * Generated using:
    * https://www.tints.dev/palette/v1:YnJhbmR8MTM3Q0M3fDYwMHxwfDB8MHwwfDEwMHxt
    */
@@ -64,7 +64,7 @@
   --color-background: var(--color-white);
   --color-background-alt: var(--color-gray-50);
 
-  --color-muted-foreground: var(--color-gray-600);
+  --color-muted-foreground: var(--color-gray-500);
   --color-muted: var(--color-gray-100);
 
   /* Used for highlights and selections */
diff --git a/packages/graph-explorer/src/modules/SchemaGraph/SchemaGraphToolbar.tsx b/packages/graph-explorer/src/modules/SchemaGraph/SchemaGraphToolbar.tsx
index 1725dd32a..b38665dcf 100644
--- a/packages/graph-explorer/src/modules/SchemaGraph/SchemaGraphToolbar.tsx
+++ b/packages/graph-explorer/src/modules/SchemaGraph/SchemaGraphToolbar.tsx
@@ -17,7 +17,7 @@ import {
   ZoomToFitButton,
 } from "@/components/Graph";
 import { useSchemaSync } from "@/hooks/useSchemaSync";
-import { logger } from "@/utils";
+import { ASCII, logger } from "@/utils";
 
 import { schemaGraphLayoutAtom } from "./SchemaGraph";
 
@@ -69,7 +69,7 @@ function SchemaRefreshButton() {
       <Spinner loading={isFetching}>
         <RefreshCcwIcon />
       </Spinner>
-      Refresh Schema
+      Refresh{ASCII.NBSP}Schema
     </Button>
   );
 }
diff --git a/packages/graph-explorer/src/routes/Settings/SettingsAbout.tsx b/packages/graph-explorer/src/routes/Settings/SettingsAbout.tsx
index 3515a8c4e..2716f1d46 100644
--- a/packages/graph-explorer/src/routes/Settings/SettingsAbout.tsx
+++ b/packages/graph-explorer/src/routes/Settings/SettingsAbout.tsx
@@ -1,35 +1,72 @@
+import { InfoIcon } from "lucide-react";
+
 import {
   Button,
+  Group,
+  GroupHeader,
+  GroupItem,
+  GroupTitle,
   LabelledSetting,
-  PageHeading,
+  NavBarLogo,
   SendIcon,
-  SettingsSection,
-  SettingsSectionContainer,
+  SettingsPageDescription,
+  SettingsPageHeader,
+  SettingsPageIcon,
+  SettingsPageTitle,
+  SettingsPage,
 } from "@/components";
 import { env } from "@/utils";
 import { LABELS } from "@/utils/constants";
 
 export default function SettingsAbout() {
   return (
-    <SettingsSectionContainer>
-      <PageHeading>{LABELS.APP_NAME}</PageHeading>
-      <SettingsSection>
-        <LabelledSetting
-          label="App version"
-          description={__GRAPH_EXP_VERSION__}
-        />
-        <LabelledSetting
-          label="Provide Feedback"
-          description={`If you have any ideas for future features for ${LABELS.APP_NAME}, or encounter an issue, please let us know.`}
-        >
-          <Button asChild>
-            <a href={env.GRAPH_EXP_FEEDBACK_URL}>
-              <SendIcon />
-              Send
-            </a>
-          </Button>
-        </LabelledSetting>
-      </SettingsSection>
-    </SettingsSectionContainer>
+    <SettingsPage>
+      <SettingsPageHeader>
+        <SettingsPageIcon>
+          <InfoIcon />
+        </SettingsPageIcon>
+        <SettingsPageTitle>About</SettingsPageTitle>
+        <SettingsPageDescription>
+          Version details and feedback form.
+        </SettingsPageDescription>
+      </SettingsPageHeader>
+
+      <Group>
+        <GroupItem className="flex flex-row items-center gap-6 space-y-0">
+          <div className="drop-shadow-primary-foreground/20 size-15 overflow-clip rounded-2xl drop-shadow-lg">
+            <NavBarLogo />
+          </div>
+          <div>
+            <p className="text-foreground text-xl font-bold">
+              {LABELS.APP_NAME}
+            </p>
+            <p className="text-muted-foreground font-base text-base">
+              App version:{" "}
+              <span className="text-foreground font-medium">
+                {__GRAPH_EXP_VERSION__}
+              </span>
+            </p>
+          </div>
+        </GroupItem>
+      </Group>
+      <Group>
+        <GroupHeader>
+          <GroupTitle>Feedback</GroupTitle>
+        </GroupHeader>
+        <GroupItem>
+          <LabelledSetting
+            label="Provide Feedback"
+            description={`If you have any ideas for future features for ${LABELS.APP_NAME}, or encounter an issue, please let us know.`}
+          >
+            <Button asChild>
+              <a href={env.GRAPH_EXP_FEEDBACK_URL}>
+                <SendIcon />
+                Send
+              </a>
+            </Button>
+          </LabelledSetting>
+        </GroupItem>
+      </Group>
+    </SettingsPage>
   );
 }
diff --git a/packages/graph-explorer/src/routes/Settings/SettingsGeneral.tsx b/packages/graph-explorer/src/routes/Settings/SettingsGeneral.tsx
index 451011b7a..57918ea0a 100644
--- a/packages/graph-explorer/src/routes/Settings/SettingsGeneral.tsx
+++ b/packages/graph-explorer/src/routes/Settings/SettingsGeneral.tsx
@@ -1,20 +1,24 @@
 import { useAtom } from "jotai";
 import localforage from "localforage";
-import { SaveAllIcon } from "lucide-react";
+import { CogIcon, SaveAllIcon } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 
 import {
   Button,
-  FormItem,
+  Group,
+  GroupHeader,
+  GroupItem,
+  GroupTitle,
   ImportantBlock,
   Input,
-  Label,
   LabelledSetting,
   NotInProduction,
-  PageHeading,
-  SettingsSection,
-  SettingsSectionContainer,
-  ToggleSetting,
+  SettingsPageDescription,
+  SettingsPageHeader,
+  SettingsPageIcon,
+  SettingsPageTitle,
+  SettingsPage,
+  Switch,
 } from "@/components";
 import { addRemoveAnimationProps } from "@/components/CommonAnimationProps";
 import {
@@ -49,109 +53,165 @@ export default function SettingsGeneral() {
   ] = useAtom(defaultNeighborExpansionLimitEnabledAtom);
 
   return (
-    <SettingsSectionContainer>
-      <PageHeading>General Settings</PageHeading>
-      <SettingsSection>
-        <ToggleSetting
-          label="Default limit for neighbor expansion"
-          description="Applies when expanding nodes with double click or with the expand button. This value can be overridden at the connection level and in the expand sidebar."
-          id="defaultNeighborExpansionLimitEnabled"
-          value="defaultNeighborExpansionLimitEnabled"
-          checked={defaultNeighborExpansionLimitEnabled}
-          onCheckedChange={isSelected => {
-            setDefaultNeighborExpansionLimitEnabled(Boolean(isSelected));
-          }}
-        />
+    <SettingsPage>
+      <SettingsPageHeader>
+        <SettingsPageIcon>
+          <CogIcon />
+        </SettingsPageIcon>
+        <SettingsPageTitle>General Settings</SettingsPageTitle>
+        <SettingsPageDescription>
+          Control how the canvas behaves, manage your configuration data, and
+          configure diagnostic settings.
+        </SettingsPageDescription>
+      </SettingsPageHeader>
+
+      <Group>
+        <GroupHeader>
+          <GroupTitle>Canvas Behavior</GroupTitle>
+        </GroupHeader>
+        <GroupItem>
+          <LabelledSetting
+            htmlFor="defaultNeighborExpansionLimitEnabled"
+            label="Default limit for neighbor expansion"
+            description="Applies when expanding nodes with double click or with the expand button. This value can be overridden at the connection level and in the expand sidebar."
+          >
+            <Switch
+              id="defaultNeighborExpansionLimitEnabled"
+              value="defaultNeighborExpansionLimitEnabled"
+              checked={defaultNeighborExpansionLimitEnabled}
+              onCheckedChange={isSelected => {
+                setDefaultNeighborExpansionLimitEnabled(Boolean(isSelected));
+              }}
+            />
+          </LabelledSetting>
+        </GroupItem>
+
         <AnimatePresence initial={false}>
           {defaultNeighborExpansionLimitEnabled ? (
             <motion.div {...addRemoveAnimationProps} key="defaultNeighborLimit">
-              <FormItem>
-                <Label className="text-text-primary text-base leading-none font-medium text-pretty">
-                  Neighbor expansion limit
-                </Label>
-                <Input
-                  aria-label="Default neighbor expansion limit"
-                  className="max-w-64"
-                  type="number"
-                  value={defaultNeighborExpansionLimit}
-                  onChange={e =>
-                    setDefaultNeighborExpansionLimit(
-                      parseInt(e.target.value) ?? 0,
-                    )
-                  }
-                  min={0}
-                />
-              </FormItem>
+              <GroupItem className="bg-neutral-subtle/50">
+                <LabelledSetting
+                  htmlFor="defaultNeighborExpansionLimit"
+                  label="Neighbor expansion limit"
+                  description="Maximum number of neighbors to expand per expansion."
+                >
+                  <Input
+                    id="defaultNeighborExpansionLimit"
+                    aria-label="Default neighbor expansion limit"
+                    className="max-w-64"
+                    type="number"
+                    value={defaultNeighborExpansionLimit}
+                    onChange={e =>
+                      setDefaultNeighborExpansionLimit(
+                        parseInt(e.target.value) ?? 0,
+                      )
+                    }
+                    min={0}
+                  />
+                </LabelledSetting>
+              </GroupItem>
             </motion.div>
           ) : null}
         </AnimatePresence>
+      </Group>
 
-        <LabelledSetting
-          label="Save configuration data"
-          description="You can save your current configuration to a file, including all connections, styles, loaded schemas, etc."
-        >
-          <Button
-            className="min-w-28"
-            onClick={async () => await saveLocalForageToFile(localforage)}
+      <Group>
+        <GroupHeader>
+          <GroupTitle>Manage Configuration Data</GroupTitle>
+        </GroupHeader>
+        <GroupItem>
+          <LabelledSetting
+            label="Save configuration data"
+            description="You can save your current configuration to a file, including all connections, styles, loaded schemas, etc."
           >
-            <SaveAllIcon />
-            Save
-          </Button>
-        </LabelledSetting>
-        <LabelledSetting
-          label="Load configuration data"
-          description="Restore previously saved configuration data."
-        >
-          <LoadConfigButton />
-        </LabelledSetting>
-        <ImportantBlock>
-          <p>
-            Loading configuration data will overwrite all of your current data
-            with the data within the configuration file.
-          </p>
-        </ImportantBlock>
+            <Button
+              className="min-w-28"
+              onClick={async () => await saveLocalForageToFile(localforage)}
+            >
+              <SaveAllIcon />
+              Save
+            </Button>
+          </LabelledSetting>
+        </GroupItem>
+        <GroupItem>
+          <LabelledSetting
+            label="Load configuration data"
+            description="Restore previously saved configuration data."
+          >
+            <LoadConfigButton />
+          </LabelledSetting>
+          <ImportantBlock>
+            <p>
+              Loading configuration data will overwrite all of your current data
+              with the data within the configuration file.
+            </p>
+          </ImportantBlock>
+        </GroupItem>
+      </Group>
 
-        <ToggleSetting
-          id="isDiagnosticLoggingEnabled"
-          value="isDiagnosticLoggingEnabled"
-          checked={diagnosticLogging}
-          onCheckedChange={isSelected => {
-            setDiagnosticLogging(Boolean(isSelected));
-          }}
-          label="Diagnostic logging"
-          description="Enables verbose logging to the browser console for troubleshooting."
-        />
+      <Group>
+        <GroupHeader>
+          <GroupTitle>Diagnostics</GroupTitle>
+        </GroupHeader>
+        <GroupItem>
+          <LabelledSetting
+            htmlFor="isDiagnosticLoggingEnabled"
+            label="Diagnostic logging"
+            description="Enables verbose logging to the browser console for troubleshooting."
+          >
+            <Switch
+              id="isDiagnosticLoggingEnabled"
+              value="isDiagnosticLoggingEnabled"
+              checked={diagnosticLogging}
+              onCheckedChange={isSelected => {
+                setDiagnosticLogging(Boolean(isSelected));
+              }}
+            />
+          </LabelledSetting>
+        </GroupItem>
+        <GroupItem>
+          <LabelledSetting
+            htmlFor="isLoggingDbQueryEnabled"
+            label="Enable database query logging on proxy server"
+            description="Logs the generated database queries to the servers logger. If you have encountered an issue this might be helpful with diagnosing the root cause."
+          >
+            <Switch
+              id="isLoggingDbQueryEnabled"
+              value="isLoggingDbQueryEnabled"
+              checked={allowLoggingDbQuery}
+              onCheckedChange={isSelected => {
+                setAllowLoggingDbQuery(Boolean(isSelected));
+              }}
+            />
+          </LabelledSetting>
+          <ImportantBlock>
+            <p>
+              This <b>will not</b> log any data returned by the database
+              queries. However, the node & edge labels, ID values, and any value
+              filters will be present in the queries.
+            </p>
+          </ImportantBlock>
+        </GroupItem>
 
-        <ToggleSetting
-          id="isLoggingDbQueryEnabled"
-          value="isLoggingDbQueryEnabled"
-          checked={allowLoggingDbQuery}
-          onCheckedChange={isSelected => {
-            setAllowLoggingDbQuery(Boolean(isSelected));
-          }}
-          label="Enable database query logging on proxy server"
-          description="Logs the generated database queries to the servers logger. If you have encountered an issue this might be helpful with diagnosing the root cause."
-        />
-        <ImportantBlock>
-          <p>
-            This <b>will not</b> log any data returned by the database queries.
-            However, the node & edge labels, ID values, and any value filters
-            will be present in the queries.
-          </p>
-        </ImportantBlock>
         <NotInProduction>
-          <ToggleSetting
-            id="isDebugOptionsEnabled"
-            value="isDebugOptionsEnabled"
-            checked={isDebugOptionsEnabled}
-            onCheckedChange={isSelected => {
-              setIsDebugOptionsEnabled(Boolean(isSelected));
-            }}
-            label="Show debug actions"
-            description="Shows debug actions in various places around the app such as buttons to delete the schema or reset the last sync time."
-          />
+          <GroupItem>
+            <LabelledSetting
+              htmlFor="isDebugOptionsEnabled"
+              label="Show debug actions"
+              description="Shows debug actions in various places around the app such as buttons to delete the schema or reset the last sync time."
+            >
+              <Switch
+                id="isDebugOptionsEnabled"
+                value="isDebugOptionsEnabled"
+                checked={isDebugOptionsEnabled}
+                onCheckedChange={isSelected => {
+                  setIsDebugOptionsEnabled(Boolean(isSelected));
+                }}
+              />
+            </LabelledSetting>
+          </GroupItem>
         </NotInProduction>
-      </SettingsSection>
-    </SettingsSectionContainer>
+      </Group>
+    </SettingsPage>
   );
 }
diff --git a/packages/graph-explorer/src/routes/Settings/SettingsRoot.tsx b/packages/graph-explorer/src/routes/Settings/SettingsRoot.tsx
index 991c61272..31fa01c3b 100644
--- a/packages/graph-explorer/src/routes/Settings/SettingsRoot.tsx
+++ b/packages/graph-explorer/src/routes/Settings/SettingsRoot.tsx
@@ -1,8 +1,8 @@
+import { CogIcon, InfoIcon } from "lucide-react";
 import { type PropsWithChildren, Suspense } from "react";
 import { NavLink, Outlet, type To } from "react-router";
 
 import {
-  ForwardIcon,
   NavBar,
   NavBarContent,
   NavBarTitle,
@@ -32,12 +32,12 @@ export default function SettingsRoot() {
       <WorkspaceContent>
         <PanelGroup>
           <Panel className="min-w-64">
-            <PanelContent className="px-3 py-6">
+            <PanelContent className="px-4 py-6">
               <SideBar />
             </PanelContent>
           </Panel>
           <Panel className="w-full grow">
-            <PanelContent className="p-6">
+            <PanelContent className="px-12 py-12 max-md:px-4">
               <Suspense fallback={<AppLoadingPage />}>
                 <Outlet />
               </Suspense>
@@ -51,13 +51,22 @@ export default function SettingsRoot() {
 
 function SideBar() {
   return (
-    <nav>
+    <nav className="space-y-4">
+      <p className="text-muted-foreground px-3 text-xs font-medium tracking-wide uppercase">
+        Settings
+      </p>
       <ul className="flex w-full flex-col gap-1">
         <li>
-          <SideBarItem to="general">General</SideBarItem>
+          <SideBarItem to="general">
+            <CogIcon />
+            General
+          </SideBarItem>
         </li>
         <li>
-          <SideBarItem to="about">About</SideBarItem>
+          <SideBarItem to="about">
+            <InfoIcon />
+            About
+          </SideBarItem>
         </li>
       </ul>
     </nav>
@@ -70,14 +79,12 @@ function SideBarItem(props: PropsWithChildren<{ to: To }>) {
       to={props.to}
       className={({ isActive }) =>
         cn(
-          "flex w-full flex-row items-center rounded-md px-2 py-1 text-lg",
-          isActive &&
-            "bg-primary-main hover:bg-primary-light font-bold text-white",
-          !isActive && "font-base text-text-secondary hover:bg-gray-200",
+          "flex w-full flex-row items-center gap-2 rounded-lg px-3 py-2 text-base tracking-wide [&_svg]:size-4.5",
+          isActive && "bg-brand text-white",
+          !isActive && "text-foreground hover:bg-neutral-subtle",
         )
       }
     >
-      <ForwardIcon className="h-6 w-6" />
       {props.children}
     </NavLink>
   );