From cd6fd9a75d0182fe6d18258f976820fa1590896a Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 25 Jul 2025 18:22:38 +0000
Subject: [PATCH] Dashboard: Migrate engine/configuration page from chakra to
 tailwind, UI improvements (#7716)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring and improving the UI of various configuration components for the Engine dashboard, enhancing layout, styling, and user experience while updating some logic related to wallet configurations.

### Detailed summary
- Updated layout classes for `local-config.tsx`, `engine-configuration.tsx`, and `system.tsx`.
- Added `UnderlineLink` component for links in `engine-wallet-config.tsx`, `circle-config.tsx`, and others.
- Improved styling for alerts and forms in various components.
- Enhanced error handling and user feedback with toast notifications in `cors.tsx`, `ip-allowlist.tsx`, and wallet config components.
- Refactored props handling in `EngineWalletConfig`, `EngineCorsConfig`, and `EngineIpAllowlistConfig` to use inline type definitions.
- Added `SaveIcon` and `Spinner` components for better loading and saving indicators in forms.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../components/circle-config.tsx              |  97 +++---
 .../configuration/components/cors.tsx         | 103 ++++---
 .../components/engine-configuration.tsx       |  24 +-
 .../components/engine-wallet-config.tsx       |  60 ++--
 .../configuration/components/ip-allowlist.tsx | 119 ++++----
 .../components/kms-aws-config.tsx             | 203 +++++++------
 .../components/kms-gcp-config.tsx             | 286 +++++++++---------
 .../configuration/components/local-config.tsx |   7 +-
 .../configuration/components/system.tsx       |  20 +-
 9 files changed, 480 insertions(+), 439 deletions(-)

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>
   );
 };