diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx
index ec27da5ca3e..a2752223efc 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.tsx
@@ -27,7 +27,7 @@ export function TeamMembersSettingsPage(props: {
   return (
     <div>
       <h2 className="font-semibold text-2xl tracking-tight">Members</h2>
-      <p className="text-muted-foreground text-sm">
+      <p className="text-muted-foreground">
         Manage team members and invitations
       </p>
 
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/notifications/Notifications.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/notifications/Notifications.tsx
index 63062f0b811..27a4132d7d0 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/notifications/Notifications.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/notifications/Notifications.tsx
@@ -37,7 +37,7 @@ export const Notifications: React.FC<NotificationsProps> = ({ account }) => {
   };
 
   return (
-    <div>
+    <div className="p-4 bg-card border rounded-lg">
       <SettingSwitch
         checked={preferences?.billing === "email"}
         description="Approaching and exceeding usage credits"
@@ -45,6 +45,8 @@ export const Notifications: React.FC<NotificationsProps> = ({ account }) => {
         onCheckedChange={(v) => handleChange("billing", v)}
       />
 
+      <div className="border-t border-dashed my-4" />
+
       <SettingSwitch
         checked={preferences?.updates === "email"}
         description="New features and key product updates"
@@ -63,7 +65,7 @@ function SettingSwitch(props: {
 }) {
   const id = useId();
   return (
-    <div className="flex items-center justify-between gap-6 border-border border-b py-6">
+    <div className="flex items-center justify-between gap-6">
       <div>
         <Label className="text-foreground text-lg" htmlFor={id}>
           {props.label}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/notifications/NotificationsPage.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/notifications/NotificationsPage.tsx
deleted file mode 100644
index dd91a734859..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/notifications/NotificationsPage.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Notifications } from "@app/team/[team_slug]/(team)/~/settings/notifications/Notifications";
-import { Separator } from "@/components/ui/separator";
-import type { Account } from "@/hooks/useApi";
-
-export const SettingsNotificationsPage = (props: { account: Account }) => {
-  return (
-    <div>
-      <h1 className="mb-0.5 font-semibold text-2xl tracking-tight">
-        Notification Settings
-      </h1>
-
-      <p className="mb-7 text-muted-foreground">
-        Configure your email notification preferences
-      </p>
-
-      <Separator />
-      <Notifications account={props.account} />
-    </div>
-  );
-};
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/notifications/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/notifications/page.tsx
index 8c9dc970b69..7c34c9cb38d 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/notifications/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/notifications/page.tsx
@@ -1,6 +1,5 @@
-import { ChakraProviderSetup } from "chakra/ChakraProviderSetup";
 import { getValidAccount } from "../../../../../../account/settings/getAccount";
-import { SettingsNotificationsPage } from "./NotificationsPage";
+import { Notifications } from "./Notifications";
 
 export default async function Page(props: {
   params: Promise<{
@@ -13,8 +12,15 @@ export default async function Page(props: {
   );
 
   return (
-    <ChakraProviderSetup>
-      <SettingsNotificationsPage account={account} />
-    </ChakraProviderSetup>
+    <div>
+      <div className="mb-4">
+        <h1 className="font-semibold text-2xl tracking-tight">Notifications</h1>
+        <p className="text-muted-foreground">
+          Configure your email notification preferences
+        </p>
+      </div>
+
+      <Notifications account={account} />
+    </div>
   );
 }