diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/circle-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/circle-config.tsx
index d6bfaa21f40..db9122e0cad 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/circle-config.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/circle-config.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { SaveIcon } from "lucide-react";
 import { useId } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button";
 import { Form } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import {
   type EngineInstance,
   type SetWalletConfigInput,
@@ -58,55 +59,61 @@ export const CircleConfig: React.FC<CircleConfigProps> = ({
   const circleApiKeyId = useId();
 
   return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-col gap-2">
-        <p className="text-muted-foreground">
-          Circle wallets require an API Key from your Circle account with
-          sufficient permissions. Created wallets are stored in your AWS
-          account. Configure your Circle API Key to use Circle wallets. Learn
-          more about{" "}
-          <Link
-            className="text-link-foreground hover:text-foreground"
-            href="https://portal.thirdweb.com/engine/features/backend-wallets#circle-wallet"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            how to get an API Key
-          </Link>
-          .
-        </p>
-      </div>
-
+    <div className="bg-card rounded-lg border mb-8">
       <Form {...form}>
-        <form
-          className="flex flex-col gap-4"
-          onSubmit={form.handleSubmit(onSubmit)}
-        >
-          <FormFieldSetup
-            errorMessage={
-              form.getFieldState("circleApiKey", form.formState).error?.message
-            }
-            htmlFor={circleApiKeyId}
-            isRequired
-            label="Circle API Key"
-            tooltip={null}
-          >
-            <Input
-              autoComplete="off"
-              id={circleApiKeyId}
-              placeholder="TEST_API_KEY:..."
-              type="password"
-              {...form.register("circleApiKey")}
-            />
-          </FormFieldSetup>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <div className="p-4 lg:p-6">
+            <div className="mb-4">
+              <h2 className="text-lg font-semibold mb-1">Credentials</h2>
+
+              <p className="text-muted-foreground text-sm">
+                Circle wallets require an API Key from your Circle account with
+                sufficient permissions. <br /> Created wallets are stored in
+                your AWS account. Configure your Circle API Key to use Circle
+                wallets. Learn more about{" "}
+                <UnderlineLink
+                  href="https://portal.thirdweb.com/engine/features/backend-wallets#circle-wallet"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  how to get an API Key
+                </UnderlineLink>
+                .
+              </p>
+            </div>
+
+            <FormFieldSetup
+              errorMessage={
+                form.getFieldState("circleApiKey", form.formState).error
+                  ?.message
+              }
+              htmlFor={circleApiKeyId}
+              isRequired
+              label="Circle API Key"
+              tooltip={null}
+            >
+              <Input
+                autoComplete="off"
+                id={circleApiKeyId}
+                placeholder="TEST_API_KEY:..."
+                type="password"
+                {...form.register("circleApiKey")}
+              />
+            </FormFieldSetup>
+          </div>
 
-          <div className="flex items-center justify-end gap-4">
+          <div className="flex items-center justify-end gap-4 border-t border-dashed px-4 py-4 lg:px-6">
             <Button
-              className="min-w-28 gap-2"
-              disabled={isPending}
+              className="gap-2"
+              disabled={isPending || !form.formState.isDirty}
+              size="sm"
               type="submit"
             >
-              {isPending && <Spinner className="size-4" />}
+              {isPending ? (
+                <Spinner className="size-4" />
+              ) : (
+                <SaveIcon className="size-4" />
+              )}
               Save
             </Button>
           </div>
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/cors.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/cors.tsx
index 16edca08d84..0664ff62f72 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/cors.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/cors.tsx
@@ -1,42 +1,36 @@
-import { Flex, Textarea } from "@chakra-ui/react";
-import { Button } from "chakra/button";
-import { Heading } from "chakra/heading";
-import { Text } from "chakra/text";
+import { SaveIcon } from "lucide-react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
 import { InlineCode } from "@/components/ui/inline-code";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Textarea } from "@/components/ui/textarea";
 import {
   useEngineCorsConfiguration,
   useEngineSetCorsConfiguration,
 } from "@/hooks/useEngine";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
+import { parseError } from "@/utils/errorParser";
 
-interface EngineCorsConfigProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-interface CorsForm {
+type CorsForm = {
   raw: string;
-}
+};
 
-export const EngineCorsConfig: React.FC<EngineCorsConfigProps> = ({
+export function EngineCorsConfig({
   instanceUrl,
   authToken,
-}) => {
+}: {
+  instanceUrl: string;
+  authToken: string;
+}) {
   const { data: existingUrls } = useEngineCorsConfiguration({
     authToken,
     instanceUrl,
   });
-  const { mutateAsync: setCorsConfig } = useEngineSetCorsConfiguration({
+  const setCorsConfigMutation = useEngineSetCorsConfiguration({
     authToken,
     instanceUrl,
   });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "CORS URLs updated successfully.",
-    "Failed to update CORS URLs.",
-  );
-
   const form = useForm<CorsForm>({
     values: { raw: existingUrls?.join("\n") ?? "" },
   });
@@ -47,52 +41,57 @@ export const EngineCorsConfig: React.FC<EngineCorsConfigProps> = ({
       // Assert all URLs are well formed and strip the path.
       const sanitized = urls.map(parseOriginFromUrl);
 
-      await setCorsConfig({ urls: sanitized });
-      onSuccess();
+      await setCorsConfigMutation.mutateAsync({ urls: sanitized });
+      toast.success("CORS URLs updated successfully.");
     } catch (error) {
-      onError(error);
+      toast.error("Failed to update CORS URLs.", {
+        description: parseError(error),
+      });
     }
   };
 
   return (
-    <Flex
-      as="form"
-      flexDir="column"
-      gap={4}
-      onSubmit={form.handleSubmit(onSubmit)}
-    >
-      <Flex flexDir="column" gap={2}>
-        <Heading size="title.md">Allowlisted Domains</Heading>
-        <Text>
+    <div className="bg-card rounded-lg border">
+      <div className="px-4 lg:px-6 pt-4 lg:pt-6">
+        <h2 className="text-lg font-semibold mb-1">Allowlisted Domains</h2>
+        <p className="text-sm text-muted-foreground">
           Specify the origins that can call Engine (
           <InlineCode code="https://example.com" />
           ).
           <br />
           Enter one origin per line, or leave this list empty to disallow calls
           from web clients.
-        </Text>
-      </Flex>
+        </p>
+      </div>
 
-      <Textarea
-        placeholder={"https://example.com\nhttp://localhost:3000"}
-        rows={4}
-        {...form.register("raw")}
-      />
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="p-4 lg:px-6">
+          <Textarea
+            placeholder={"https://example.com\nhttp://localhost:3000"}
+            rows={4}
+            {...form.register("raw")}
+          />
+        </div>
 
-      <Flex alignItems="center" gap={4} justifyContent="end">
-        <Button
-          colorScheme="primary"
-          isDisabled={!form.formState.isDirty}
-          px={12}
-          type="submit"
-          w={{ base: "full", md: "inherit" }}
-        >
-          {form.formState.isSubmitting ? "Saving..." : "Save"}
-        </Button>
-      </Flex>
-    </Flex>
+        <div className="flex justify-end border-t border-dashed px-4 py-4 lg:px-6">
+          <Button
+            className="gap-2"
+            size="sm"
+            type="submit"
+            disabled={!form.formState.isDirty || form.formState.isSubmitting}
+          >
+            {setCorsConfigMutation.isPending ? (
+              <Spinner className="size-4" />
+            ) : (
+              <SaveIcon className="size-4" />
+            )}
+            Save
+          </Button>
+        </div>
+      </form>
+    </div>
   );
-};
+}
 
 const parseOriginFromUrl = (url: string) => {
   try {
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/engine-configuration.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/engine-configuration.tsx
index 9f292b207de..1db7dd981b3 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/engine-configuration.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/engine-configuration.tsx
@@ -20,23 +20,25 @@ export const EngineConfiguration: React.FC<EngineConfigurationProps> = ({
   authToken,
 }) => {
   return (
-    <div className="flex flex-col gap-12">
+    <div>
       <EngineWalletConfig
         authToken={authToken}
         instance={instance}
         projectSlug={projectSlug}
         teamSlug={teamSlug}
       />
-      <EngineCorsConfig authToken={authToken} instanceUrl={instance.url} />
-      <EngineIpAllowlistConfig
-        authToken={authToken}
-        instanceUrl={instance.url}
-      />
-      <EngineSystem
-        instance={instance}
-        projectSlug={projectSlug}
-        teamIdOrSlug={teamSlug}
-      />
+      <div className="space-y-8">
+        <EngineCorsConfig authToken={authToken} instanceUrl={instance.url} />
+        <EngineIpAllowlistConfig
+          authToken={authToken}
+          instanceUrl={instance.url}
+        />
+        <EngineSystem
+          instance={instance}
+          projectSlug={projectSlug}
+          teamIdOrSlug={teamSlug}
+        />
+      </div>
     </div>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
index 6c1d43f560c..e4af5612bf4 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/engine-wallet-config.tsx
@@ -1,10 +1,9 @@
-import { Heading } from "chakra/heading";
 import { CircleAlertIcon } from "lucide-react";
-import Link from "next/link";
 import { useState } from "react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { TabButtons } from "@/components/ui/tabs";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import {
   EngineBackendWalletOptions,
   type EngineBackendWalletType,
@@ -20,19 +19,17 @@ import { KmsAwsConfig } from "./kms-aws-config";
 import { KmsGcpConfig } from "./kms-gcp-config";
 import { LocalConfig } from "./local-config";
 
-interface EngineWalletConfigProps {
-  instance: EngineInstance;
-  teamSlug: string;
-  projectSlug: string;
-  authToken: string;
-}
-
-export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
+export function EngineWalletConfig({
   instance,
   teamSlug,
   projectSlug,
   authToken,
-}) => {
+}: {
+  instance: EngineInstance;
+  teamSlug: string;
+  projectSlug: string;
+  authToken: string;
+}) {
   const { data: walletConfig } = useEngineWalletConfig({
     authToken,
     instanceUrl: instance.url,
@@ -68,17 +65,18 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
   const isGcpKmsConfigured = !!walletConfig?.gcpKmsKeyRingId;
 
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <Heading size="title.md">Backend Wallets</Heading>
-        <p className="text-muted-foreground">
+    <div>
+      <div className="mb-4">
+        <h2 className="text-2xl font-semibold tracking-tight mb-1">
+          Backend Wallets
+        </h2>
+        <p className="text-muted-foreground text-sm">
           Create backend wallets on the{" "}
-          <Link
-            className="text-link-foreground hover:text-foreground"
+          <UnderlineLink
             href={`/team/${teamSlug}/${projectSlug}/engine/dedicated/${instance.id}`}
           >
             Overview
-          </Link>{" "}
+          </UnderlineLink>{" "}
           tab. To use other wallet types, configure them below.
         </p>
       </div>
@@ -102,18 +100,20 @@ export const EngineWalletConfig: React.FC<EngineWalletConfigProps> = ({
         }))}
       />
 
-      {!isWalletCredentialsSupported && activeTab === "circle" && (
-        <Alert className="mt-4" variant="warning">
-          <CircleAlertIcon className="size-4" />
-          <AlertTitle>Update Required</AlertTitle>
-          <AlertDescription>
-            Circle wallet support requires a newer version of Engine. Please
-            update your Engine instance to use this feature.
-          </AlertDescription>
-        </Alert>
-      )}
+      <div className="mt-4 space-y-4">
+        {!isWalletCredentialsSupported && activeTab === "circle" && (
+          <Alert className="mt-4" variant="warning">
+            <CircleAlertIcon className="size-4" />
+            <AlertTitle>Update Required</AlertTitle>
+            <AlertDescription>
+              Circle wallet support requires a newer version of Engine. Please
+              update your Engine instance to use this feature.
+            </AlertDescription>
+          </Alert>
+        )}
 
-      {tabContent[activeTab]}
+        {tabContent[activeTab]}
+      </div>
     </div>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/ip-allowlist.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/ip-allowlist.tsx
index cd4eb30dc52..a77be407c91 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/ip-allowlist.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/ip-allowlist.tsx
@@ -1,42 +1,38 @@
-import { Flex, Textarea } from "@chakra-ui/react";
-import { Button } from "chakra/button";
-import { Heading } from "chakra/heading";
-import { Text } from "chakra/text";
 import { isValid } from "ipaddr.js";
+import { SaveIcon } from "lucide-react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
 import { InlineCode } from "@/components/ui/inline-code";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Textarea } from "@/components/ui/textarea";
 import {
   useEngineIpAllowlistConfiguration,
   useEngineSetIpAllowlistConfiguration,
   useHasEngineFeature,
 } from "@/hooks/useEngine";
-import { useTxNotifications } from "@/hooks/useTxNotifications";
+import { parseError } from "@/utils/errorParser";
 
-interface EngineIpAllowlistConfigProps {
-  instanceUrl: string;
-  authToken: string;
-}
-
-interface IpForm {
+type IpForm = {
   raw: string;
-}
+};
 
-export const EngineIpAllowlistConfig: React.FC<
-  EngineIpAllowlistConfigProps
-> = ({ instanceUrl, authToken }) => {
+export function EngineIpAllowlistConfig({
+  instanceUrl,
+  authToken,
+}: {
+  instanceUrl: string;
+  authToken: string;
+}) {
   const { data: existingIpAllowlist } = useEngineIpAllowlistConfiguration({
     authToken,
     instanceUrl,
   });
-  const { mutateAsync: setIpAllowlist } = useEngineSetIpAllowlistConfiguration({
+  const setIpAllowlistMutation = useEngineSetIpAllowlistConfiguration({
     authToken,
     instanceUrl,
   });
 
-  const { onSuccess, onError } = useTxNotifications(
-    "IP Allowlist updated successfully.",
-    "Failed to update IP Allowlist",
-  );
   const { isSupported } = useHasEngineFeature(instanceUrl, "IP_ALLOWLIST");
 
   const form = useForm<IpForm>({
@@ -57,13 +53,15 @@ export const EngineIpAllowlistConfig: React.FC<
         throw new Error(`Invalid IP Address: ${incorrectIp}`);
       }
 
-      await setIpAllowlist({ ips });
+      await setIpAllowlistMutation.mutateAsync({ ips });
+      toast.success("IP Allowlist updated successfully.");
       form.reset({
         raw: ips.join("\n"),
       });
-      onSuccess();
     } catch (error) {
-      onError(error);
+      toast.error("Failed to update IP Allowlist", {
+        description: parseError(error),
+      });
     }
   };
 
@@ -72,43 +70,44 @@ export const EngineIpAllowlistConfig: React.FC<
   }
 
   return (
-    <Flex
-      as="form"
-      flexDir="column"
-      gap={4}
-      onSubmit={form.handleSubmit(onSubmit)}
-    >
-      <Flex flexDir="column" gap={2}>
-        <Heading size="title.md">Allowlist IPs</Heading>
-        <Text>
-          Specify the IP Addresses that can call Engine (
-          <InlineCode code="8.8.8.8" />
-          ).
-          <br />
-          Enter a comma separated list of IPs, or one IP per line, or leave this
-          list empty to allow all IPs.
-          <br />
-          This does not affect Dashboard calls to Engine.
-        </Text>
-      </Flex>
+    <div className="bg-card rounded-lg border">
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="p-4 lg:p-6 lg:pb-4">
+          <h2 className="text-lg font-semibold mb-1">Allowlist IPs</h2>
+          <p className="text-sm text-muted-foreground mb-4">
+            Specify the IP Addresses that can call Engine (
+            <InlineCode code="8.8.8.8" />
+            ).
+            <br />
+            Enter a comma separated list of IPs, or one IP per line, or leave
+            this list empty to allow all IPs.
+            <br />
+            This does not affect Dashboard calls to Engine.
+          </p>
 
-      <Textarea
-        placeholder={"8.8.8.8\nff06:0:0:0:0:0:0:c3"}
-        rows={4}
-        {...form.register("raw")}
-      />
+          <Textarea
+            placeholder={"8.8.8.8\nff06:0:0:0:0:0:0:c3"}
+            rows={4}
+            {...form.register("raw")}
+          />
+        </div>
 
-      <Flex alignItems="center" gap={4} justifyContent="end">
-        <Button
-          colorScheme="primary"
-          isDisabled={!form.formState.isDirty}
-          px={12}
-          type="submit"
-          w={{ base: "full", md: "inherit" }}
-        >
-          {form.formState.isSubmitting ? "Saving..." : "Save"}
-        </Button>
-      </Flex>
-    </Flex>
+        <div className="flex justify-end border-t border-dashed px-4 py-4 lg:px-6">
+          <Button
+            size="sm"
+            className="gap-2"
+            disabled={!form.formState.isDirty}
+            type="submit"
+          >
+            {form.formState.isSubmitting ? (
+              <Spinner className="size-4" />
+            ) : (
+              <SaveIcon className="size-4" />
+            )}
+            Save
+          </Button>
+        </div>
+      </form>
+    </div>
   );
-};
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/kms-aws-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/kms-aws-config.tsx
index d80241991f3..3b629a6e4ea 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/kms-aws-config.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/kms-aws-config.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { SaveIcon } from "lucide-react";
 import { useId } from "react";
 import { useForm } from "react-hook-form";
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Form, FormDescription } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import {
   type EngineInstance,
   type SetWalletConfigInput,
@@ -74,102 +75,116 @@ export const KmsAwsConfig: React.FC<KmsAwsConfigProps> = ({
   const awsSecretKeyId = useId();
 
   return (
-    <Form {...form}>
-      <form
-        className="flex flex-col gap-4"
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
-        <p className="text-muted-foreground">
-          AWS KMS wallets require credentials from your Amazon Web Services
-          account with sufficient permissions to manage KMS keys. Wallets are
-          stored in KMS keys on your AWS account.
-        </p>
-        <p className="text-muted-foreground">
-          For help and more advanced use cases,{" "}
-          <Link
-            className="text-link-foreground hover:text-foreground"
-            href="https://portal.thirdweb.com/infrastructure/engine/features/backend-wallets"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            learn more about using AWS KMS wallets
-          </Link>
-          .
-        </p>
+    <div className="bg-card rounded-lg border mb-8">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <div className="p-4 lg:p-6 ">
+            <div className="mb-4">
+              <h2 className="text-lg font-semibold mb-1">Credentials</h2>
 
-        <div className="grid gap-4 md:grid-cols-2">
-          <FormFieldSetup
-            errorMessage={
-              form.getFieldState("awsRegion", form.formState).error?.message
-            }
-            htmlFor="aws-region"
-            isRequired
-            label="Region"
-            tooltip={null}
-          >
-            <Input
-              autoComplete="off"
-              id={awsRegionId}
-              placeholder="us-west-2"
-              type="text"
-              {...form.register("awsRegion")}
-            />
-          </FormFieldSetup>
+              <p className="text-muted-foreground mb-1 text-sm">
+                AWS KMS wallets require credentials from your Amazon Web
+                Services account with sufficient permissions to manage KMS keys.{" "}
+                <br />
+                Wallets are stored in KMS keys on your AWS account.
+              </p>
+              <p className="text-muted-foreground text-sm">
+                For help and more advanced use cases,{" "}
+                <UnderlineLink
+                  href="https://portal.thirdweb.com/infrastructure/engine/features/backend-wallets"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  learn more about using AWS KMS wallets
+                </UnderlineLink>
+              </p>
+            </div>
 
-          <FormFieldSetup
-            errorMessage={
-              form.getFieldState("awsAccessKeyId", form.formState).error
-                ?.message
-            }
-            htmlFor={awsAccessKeyId}
-            isRequired
-            label="Access Key"
-            tooltip={null}
-          >
-            <Input
-              autoComplete="off"
-              id={awsAccessKeyId}
-              placeholder="AKIA..."
-              type="text"
-              {...form.register("awsAccessKeyId")}
-            />
-          </FormFieldSetup>
+            <div className="space-y-4">
+              <FormFieldSetup
+                errorMessage={
+                  form.getFieldState("awsRegion", form.formState).error?.message
+                }
+                htmlFor="aws-region"
+                isRequired
+                label="Region"
+                tooltip={null}
+              >
+                <Input
+                  autoComplete="off"
+                  id={awsRegionId}
+                  placeholder="us-west-2"
+                  type="text"
+                  {...form.register("awsRegion")}
+                />
+              </FormFieldSetup>
 
-          <FormFieldSetup
-            errorMessage={
-              form.getFieldState("awsSecretAccessKey", form.formState).error
-                ?.message
-            }
-            htmlFor={awsSecretKeyId}
-            isRequired
-            label="Secret Key"
-            tooltip={null}
-          >
-            <Input
-              autoComplete="off"
-              id={awsSecretKeyId}
-              placeholder="UW7A..."
-              type="text"
-              {...form.register("awsSecretAccessKey")}
-            />
-            <FormDescription className="pt-2">
-              This will not be shown again.
-            </FormDescription>
-          </FormFieldSetup>
-        </div>
+              <FormFieldSetup
+                errorMessage={
+                  form.getFieldState("awsAccessKeyId", form.formState).error
+                    ?.message
+                }
+                htmlFor={awsAccessKeyId}
+                isRequired
+                label="Access Key"
+                tooltip={null}
+              >
+                <Input
+                  autoComplete="off"
+                  id={awsAccessKeyId}
+                  placeholder="AKIA..."
+                  type="text"
+                  {...form.register("awsAccessKeyId")}
+                />
+              </FormFieldSetup>
 
-        <div className="flex items-center justify-end gap-4">
-          {!supportsMultipleWalletTypes && (
-            <p className="text-destructive-text text-sm">
-              This will clear other credentials.
-            </p>
-          )}
-          <Button className="min-w-28 gap-2" disabled={isPending} type="submit">
-            {isPending && <Spinner className="size-4" />}
-            Save
-          </Button>
-        </div>
-      </form>
-    </Form>
+              <FormFieldSetup
+                errorMessage={
+                  form.getFieldState("awsSecretAccessKey", form.formState).error
+                    ?.message
+                }
+                htmlFor={awsSecretKeyId}
+                isRequired
+                label="Secret Key"
+                tooltip={null}
+              >
+                <Input
+                  autoComplete="off"
+                  id={awsSecretKeyId}
+                  placeholder="UW7A..."
+                  type="text"
+                  {...form.register("awsSecretAccessKey")}
+                />
+                <FormDescription className="pt-2">
+                  Secret key will not be shown again. Please save your secret
+                  key in a secure location
+                </FormDescription>
+              </FormFieldSetup>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-end gap-4 border-t border-dashed px-4 py-4 lg:px-6">
+            {!supportsMultipleWalletTypes && (
+              <p className="text-destructive-text text-sm">
+                This will clear other credentials.
+              </p>
+            )}
+            <Button
+              className="gap-2"
+              disabled={isPending || !form.formState.isDirty}
+              size="sm"
+              type="submit"
+            >
+              {isPending ? (
+                <Spinner className="size-4" />
+              ) : (
+                <SaveIcon className="size-4" />
+              )}
+              Save
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx
index c8c41128876..03941ffd939 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/kms-gcp-config.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { SaveIcon } from "lucide-react";
 import { useId } from "react";
 import { useForm } from "react-hook-form";
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
@@ -7,6 +7,7 @@ import { Form, FormDescription } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Textarea } from "@/components/ui/textarea";
+import { UnderlineLink } from "@/components/ui/UnderlineLink";
 import {
   type EngineInstance,
   type SetWalletConfigInput,
@@ -81,145 +82,160 @@ export const KmsGcpConfig: React.FC<KmsGcpConfigProps> = ({
   const gcpPrivateKeyId = useId();
 
   return (
-    <Form {...form}>
-      <form
-        className="flex flex-col gap-4"
-        onSubmit={form.handleSubmit(onSubmit)}
-      >
-        <p className="text-muted-foreground">
-          GCP KMS wallets require credentials from your Google Cloud Platform
-          account with sufficient permissions to manage KMS keys. Wallets are
-          stored in KMS keys on your GCP account.
-        </p>
-        <p className="text-muted-foreground">
-          For help and more advanced use cases,{" "}
-          <Link
-            className="text-link-foreground hover:text-foreground"
-            href="https://portal.thirdweb.com/infrastructure/engine/features/backend-wallets"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            learn more about using Google Cloud KMS wallets
-          </Link>
-          .
-        </p>
+    <div className="bg-card rounded-lg border mb-8">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <div className="p-4 lg:p-6">
+            <div className="mb-4">
+              <h2 className="text-lg font-semibold mb-1">Credentials</h2>
 
-        <div className="grid gap-4 md:grid-cols-2">
-          <FormFieldSetup
-            errorMessage={
-              form.getFieldState("gcpKmsLocationId", form.formState).error
-                ?.message
-            }
-            htmlFor={gcpLocationId}
-            isRequired
-            label="Location ID"
-            tooltip={null}
-          >
-            <Input
-              id={gcpLocationId}
-              placeholder="us-west2"
-              type="text"
-              {...form.register("gcpKmsLocationId")}
-            />
-          </FormFieldSetup>
+              <p className="text-muted-foreground mb-1 text-sm">
+                GCP KMS wallets require credentials from your Google Cloud
+                Platform account with sufficient permissions to manage KMS keys.{" "}
+                <br />
+                Wallets are stored in KMS keys on your GCP account.
+              </p>
+              <p className="text-muted-foreground text-sm">
+                For help and more advanced use cases,{" "}
+                <UnderlineLink
+                  href="https://portal.thirdweb.com/infrastructure/engine/features/backend-wallets"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  learn more about using Google Cloud KMS wallets
+                </UnderlineLink>
+                .
+              </p>
+            </div>
 
-          <FormFieldSetup
-            errorMessage={
-              form.getFieldState("gcpKmsKeyRingId", form.formState).error
-                ?.message
-            }
-            htmlFor={gcpKeyRingId}
-            isRequired
-            label="Key Ring ID"
-            tooltip={null}
-          >
-            <Input
-              autoComplete="off"
-              id={gcpKeyRingId}
-              placeholder="my-key-ring"
-              type="text"
-              {...form.register("gcpKmsKeyRingId")}
-            />
-          </FormFieldSetup>
+            <div className="space-y-4">
+              <FormFieldSetup
+                errorMessage={
+                  form.getFieldState("gcpKmsLocationId", form.formState).error
+                    ?.message
+                }
+                htmlFor={gcpLocationId}
+                isRequired
+                label="Location ID"
+                tooltip={null}
+              >
+                <Input
+                  id={gcpLocationId}
+                  placeholder="us-west2"
+                  type="text"
+                  {...form.register("gcpKmsLocationId")}
+                />
+              </FormFieldSetup>
 
-          <FormFieldSetup
-            errorMessage={
-              form.getFieldState("gcpApplicationProjectId", form.formState)
-                .error?.message
-            }
-            htmlFor={gcpProjectId}
-            isRequired
-            label="Project ID"
-            tooltip={null}
-          >
-            <Input
-              autoComplete="off"
-              id={gcpProjectId}
-              placeholder="my-gcp-project-id-123"
-              type="text"
-              {...form.register("gcpApplicationProjectId")}
-            />
-          </FormFieldSetup>
+              <FormFieldSetup
+                errorMessage={
+                  form.getFieldState("gcpKmsKeyRingId", form.formState).error
+                    ?.message
+                }
+                htmlFor={gcpKeyRingId}
+                isRequired
+                label="Key Ring ID"
+                tooltip={null}
+              >
+                <Input
+                  autoComplete="off"
+                  id={gcpKeyRingId}
+                  placeholder="my-key-ring"
+                  type="text"
+                  {...form.register("gcpKmsKeyRingId")}
+                />
+              </FormFieldSetup>
 
-          <FormFieldSetup
-            errorMessage={
-              form.getFieldState(
-                "gcpApplicationCredentialEmail",
-                form.formState,
-              ).error?.message
-            }
-            htmlFor={gcpCredentialEmailId}
-            isRequired
-            label="Credential Email"
-            tooltip={null}
-          >
-            <Input
-              autoComplete="off"
-              id={gcpCredentialEmailId}
-              placeholder="service-account@my-gcp-project.iam.gserviceaccount.com"
-              type="text"
-              {...form.register("gcpApplicationCredentialEmail")}
-            />
-          </FormFieldSetup>
-        </div>
+              <FormFieldSetup
+                errorMessage={
+                  form.getFieldState("gcpApplicationProjectId", form.formState)
+                    .error?.message
+                }
+                htmlFor={gcpProjectId}
+                isRequired
+                label="Project ID"
+                tooltip={null}
+              >
+                <Input
+                  autoComplete="off"
+                  id={gcpProjectId}
+                  placeholder="my-gcp-project-id-123"
+                  type="text"
+                  {...form.register("gcpApplicationProjectId")}
+                />
+              </FormFieldSetup>
 
-        <FormFieldSetup
-          errorMessage={
-            form.getFieldState(
-              "gcpApplicationCredentialPrivateKey",
-              form.formState,
-            ).error?.message
-          }
-          htmlFor={gcpPrivateKeyId}
-          isRequired
-          label="Private Key"
-          tooltip={null}
-        >
-          <Textarea
-            autoComplete="off"
-            id={gcpPrivateKeyId}
-            placeholder={
-              "-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----"
-            }
-            {...form.register("gcpApplicationCredentialPrivateKey")}
-          />
-          <FormDescription className="pt-2">
-            This will not be shown again.
-          </FormDescription>
-        </FormFieldSetup>
+              <FormFieldSetup
+                errorMessage={
+                  form.getFieldState(
+                    "gcpApplicationCredentialEmail",
+                    form.formState,
+                  ).error?.message
+                }
+                htmlFor={gcpCredentialEmailId}
+                isRequired
+                label="Credential Email"
+                tooltip={null}
+              >
+                <Input
+                  autoComplete="off"
+                  id={gcpCredentialEmailId}
+                  placeholder="service-account@my-gcp-project.iam.gserviceaccount.com"
+                  type="text"
+                  {...form.register("gcpApplicationCredentialEmail")}
+                />
+              </FormFieldSetup>
 
-        <div className="flex items-center justify-end gap-4">
-          {!supportsMultipleWalletTypes && (
-            <p className="text-destructive-text text-sm">
-              This will clear other credentials.
-            </p>
-          )}
-          <Button className="min-w-28 gap-2" disabled={isPending} type="submit">
-            {isPending && <Spinner className="size-4" />}
-            Save
-          </Button>
-        </div>
-      </form>
-    </Form>
+              <FormFieldSetup
+                errorMessage={
+                  form.getFieldState(
+                    "gcpApplicationCredentialPrivateKey",
+                    form.formState,
+                  ).error?.message
+                }
+                htmlFor={gcpPrivateKeyId}
+                isRequired
+                label="Private Key"
+                tooltip={null}
+              >
+                <Textarea
+                  autoComplete="off"
+                  id={gcpPrivateKeyId}
+                  placeholder={
+                    "-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----"
+                  }
+                  {...form.register("gcpApplicationCredentialPrivateKey")}
+                />
+                <FormDescription className="pt-2">
+                  Private key will not be shown again. Please save your private
+                  key in a secure location
+                </FormDescription>
+              </FormFieldSetup>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-end gap-4 border-t border-dashed px-4 py-4 lg:px-6">
+            {!supportsMultipleWalletTypes && (
+              <p className="text-destructive-text text-sm">
+                This will clear other credentials.
+              </p>
+            )}
+            <Button
+              className="gap-2"
+              disabled={isPending || !form.formState.isDirty}
+              size="sm"
+              type="submit"
+            >
+              {isPending ? (
+                <Spinner className="size-4" />
+              ) : (
+                <SaveIcon className="size-4" />
+              )}
+              Save
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/local-config.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/local-config.tsx
index 2102e019e2d..7bd3920f56b 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/local-config.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/local-config.tsx
@@ -1,9 +1,10 @@
 export const LocalConfig: React.FC = () => {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="mb-4">
       <p className="text-muted-foreground">
-        Local wallets are natively supported with no configuration required.
-        Wallets are stored encrypted in Engine's database.
+        Local wallets are natively supported with no configuration required.{" "}
+        <br />
+        Wallets are stored encrypted in Engine's database
       </p>
     </div>
   );
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/system.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/system.tsx
index 2616c6c4f62..708287b0275 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/system.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/configuration/components/system.tsx
@@ -26,14 +26,16 @@ export const EngineSystem: React.FC<EngineSystemProps> = ({
   }
 
   return (
-    <p className="gap-0 font-mono text-xs opacity-50">
-      Version: {healthQuery.data.engineVersion ?? "..."}
-      <br />
-      Enabled: {healthQuery.data.features?.join(", ")}
-      <br />
-      CPU: {metricsQuery.data?.result?.cpu?.toFixed(2) ?? "..."}%
-      <br />
-      Memory: {metricsQuery.data?.result?.memory?.toFixed(0) ?? "..."}MB
-    </p>
+    <div className="rounded-lg border border-dashed p-4 lg:p-6">
+      <p className="font-mono text-xs text-muted-foreground leading-relaxed">
+        Version: {healthQuery.data.engineVersion ?? "..."}
+        <br />
+        Enabled: {healthQuery.data.features?.join(", ")}
+        <br />
+        CPU: {metricsQuery.data?.result?.cpu?.toFixed(2) ?? "..."}%
+        <br />
+        Memory: {metricsQuery.data?.result?.memory?.toFixed(0) ?? "..."}MB
+      </p>
+    </div>
   );
 };