diff --git a/.env.local.template b/.env.local.template
new file mode 100644
index 0000000..910d4dd
--- /dev/null
+++ b/.env.local.template
@@ -0,0 +1,6 @@
+# Supabase
+NEXT_PUBLIC_SUPABASE_URL="YOUR_SUPABASE_PROJECT_URL"
+NEXT_PUBLIC_SUPABASE_ANON_KEY="YOUR_SUPABASE_ANON_KEY"
+
+# Resend (Email Service)
+RESEND_API_KEY="YOUR_RESEND_API_KEY"
diff --git a/package.json b/package.json
index 0ebfd75..b46ce58 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
     "supabase:types": "supabase gen types typescript > src/types/supabase.ts"
   },
   "dependencies": {
+    "@react-email/components": "^1.0.8",
+    "@react-email/render": "^2.0.4",
     "@serwist/next": "^9.5.6",
     "@supabase/ssr": "^0.8.0",
     "@supabase/supabase-js": "^2.39.0",
@@ -20,7 +22,9 @@
     "lucide-react": "^0.575.0",
     "next": "16.1.6",
     "react": "19.2.3",
+    "react-colorful": "^5.6.1",
     "react-dom": "19.2.3",
+    "resend": "^6.9.2",
     "serwist": "^9.5.6",
     "tailwind-merge": "^2.2.1"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 170a375..c36388c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      '@react-email/components':
+        specifier: ^1.0.8
+        version: 1.0.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@react-email/render':
+        specifier: ^2.0.4
+        version: 2.0.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@serwist/next':
         specifier: ^9.5.6
         version: 9.5.6(next@16.1.6(@babel/core@7.29.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(typescript@5.9.3)
@@ -32,9 +38,15 @@ importers:
       react:
         specifier: 19.2.3
         version: 19.2.3
+      react-colorful:
+        specifier: ^5.6.1
+        version: 5.6.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react-dom:
         specifier: 19.2.3
         version: 19.2.3(react@19.2.3)
+      resend:
+        specifier: ^6.9.2
+        version: 6.9.2(@react-email/render@2.0.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3))
       serwist:
         specifier: ^9.5.6
         version: 9.5.6(browserslist@4.28.1)(typescript@5.9.3)
@@ -450,9 +462,171 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@react-email/body@0.2.1':
+    resolution: {integrity: sha512-ljDiQiJDu/Fq//vSIIP0z5Nuvt4+DX1RqGasstChDGJB/14ogd4VdNS9aacoede/ZjGy3o3Qb+cxyS+XgM6SwQ==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/button@0.2.1':
+    resolution: {integrity: sha512-qXyj7RZLE7POy9BMKSoqQ00tOXThjOZSUnI2Yu9i29IHngPlmrNayIWBoVKtElES7OWwypUcpiajwi1mUWx6/A==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/code-block@0.2.1':
+    resolution: {integrity: sha512-M3B7JpVH4ytgn83/ujRR1k1DQHvTeABiDM61OvAbjLRPhC/5KLHU5KkzIbbuGIrjWwxAbL1kSQzU8MhLEtSxyw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/code-inline@0.0.6':
+    resolution: {integrity: sha512-jfhebvv3dVsp3OdPgKXnk8+e2pBiDVZejDOBFzBa/IblrAJ9cQDkN6rBD5IyEg8hTOxwbw3iaI/yZFmDmIguIA==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/column@0.0.14':
+    resolution: {integrity: sha512-f+W+Bk2AjNO77zynE33rHuQhyqVICx4RYtGX9NKsGUg0wWjdGP0qAuIkhx9Rnmk4/hFMo1fUrtYNqca9fwJdHg==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/components@1.0.8':
+    resolution: {integrity: sha512-zY81ED6o5MWMzBkr9uZFuT24lWarT+xIbOZxI6C9dsFmCWBczM8IE1BgOI8rhpUK4JcYVDy1uKxYAFqsx2Bc4w==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/container@0.0.16':
+    resolution: {integrity: sha512-QWBB56RkkU0AJ9h+qy33gfT5iuZknPC7Un/IjZv9B0QmMIK+WWacc0cH6y2SV5Cv/b99hU94fjEMOOO4enpkbQ==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/font@0.0.10':
+    resolution: {integrity: sha512-0urVSgCmQIfx5r7Xc586miBnQUVnGp3OTYUm8m5pwtQRdTRO5XrTtEfNJ3JhYhSOruV0nD8fd+dXtKXobum6tA==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/head@0.0.13':
+    resolution: {integrity: sha512-AJg6le/08Gz4tm+6MtKXqtNNyKHzmooOCdmtqmWxD7FxoAdU1eVcizhtQ0gcnVaY6ethEyE/hnEzQxt1zu5Kog==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/heading@0.0.16':
+    resolution: {integrity: sha512-jmsKnQm1ykpBzw4hCYHwBkt5pW2jScXffPeEH5ZRF5tZeF5b1pvlFTO9han7C0pCkZYo1kEvWiRtx69yfCIwuw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/hr@0.0.12':
+    resolution: {integrity: sha512-TwmOmBDibavUQpXBxpmZYi2Iks/yeZOzFYh+di9EltMSnEabH8dMZXrl+pxNXzCgZ2XE8HY7VmUL65Lenfu5PA==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/html@0.0.12':
+    resolution: {integrity: sha512-KTShZesan+UsreU7PDUV90afrZwU5TLwYlALuCSU0OT+/U8lULNNbAUekg+tGwCnOfIKYtpDPKkAMRdYlqUznw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/img@0.0.12':
+    resolution: {integrity: sha512-sRCpEARNVTf3FQhZOC+JTvu5r6ubiYWkT0ucYXg8ctkyi4G8QG+jgYPiNUqVeTLA2STOfmPM/nrk1nb84y6CPQ==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/link@0.0.13':
+    resolution: {integrity: sha512-lkWc/NjOcefRZMkQoSDDbuKBEBDES9aXnFEOuPH845wD3TxPwh+QTf0fStuzjoRLUZWpHnio4z7qGGRYusn/sw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/markdown@0.0.18':
+    resolution: {integrity: sha512-gSuYK5fsMbGk87jDebqQ6fa2fKcWlkf2Dkva8kMONqLgGCq8/0d+ZQYMEJsdidIeBo3kmsnHZPrwdFB4HgjUXg==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/preview@0.0.14':
+    resolution: {integrity: sha512-aYK8q0IPkBXyMsbpMXgxazwHxYJxTrXrV95GFuu2HbEiIToMwSyUgb8HDFYwPqqfV03/jbwqlsXmFxsOd+VNaw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/render@2.0.4':
+    resolution: {integrity: sha512-kht2oTFQ1SwrLpd882ahTvUtNa9s53CERHstiTbzhm6aR2Hbykp/mQ4tpPvsBGkKAEvKRlDEoooh60Uk6nHK1g==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/row@0.0.13':
+    resolution: {integrity: sha512-bYnOac40vIKCId7IkwuLAAsa3fKfSfqCvv6epJKmPE0JBuu5qI4FHFCl9o9dVpIIS08s/ub+Y/txoMt0dYziGw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/section@0.0.17':
+    resolution: {integrity: sha512-qNl65ye3W0Rd5udhdORzTV9ezjb+GFqQQSae03NDzXtmJq6sqVXNWNiVolAjvJNypim+zGXmv6J9TcV5aNtE/w==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
+  '@react-email/tailwind@2.0.5':
+    resolution: {integrity: sha512-7Ey+kiWliJdxPMCLYsdDts8ffp4idlP//w4Ui3q/A5kokVaLSNKG8DOg/8qAuzWmRiGwNQVOKBk7PXNlK5W+sg==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      '@react-email/body': 0.2.1
+      '@react-email/button': 0.2.1
+      '@react-email/code-block': 0.2.1
+      '@react-email/code-inline': 0.0.6
+      '@react-email/container': 0.0.16
+      '@react-email/heading': 0.0.16
+      '@react-email/hr': 0.0.12
+      '@react-email/img': 0.0.12
+      '@react-email/link': 0.0.13
+      '@react-email/preview': 0.0.14
+      '@react-email/text': 0.1.6
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@react-email/body':
+        optional: true
+      '@react-email/button':
+        optional: true
+      '@react-email/code-block':
+        optional: true
+      '@react-email/code-inline':
+        optional: true
+      '@react-email/container':
+        optional: true
+      '@react-email/heading':
+        optional: true
+      '@react-email/hr':
+        optional: true
+      '@react-email/img':
+        optional: true
+      '@react-email/link':
+        optional: true
+      '@react-email/preview':
+        optional: true
+
+  '@react-email/text@0.1.6':
+    resolution: {integrity: sha512-TYqkioRS45wTR5il3dYk/SbUjjEdhSwh9BtRNB99qNH1pXAwA45H7rAuxehiu8iJQJH0IyIr+6n62gBz9ezmsw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: ^18.0 || ^19.0 || ^19.0.0-rc
+
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
+  '@selderee/plugin-htmlparser2@0.11.0':
+    resolution: {integrity: sha512-P33hHGdldxGabLFjPPpaTxVolMrzrcegejx+0GxjrIb9Zv48D8yAIA/QTDR2dFl7Uz7urX8aX6+5bCZslr+gWQ==}
+
   '@serwist/build@9.5.6':
     resolution: {integrity: sha512-/YUi2BKrvnIkYg8k/PW5N/lAR4N0h/F8eBaqCaDNOy2fdOiNCkvRaWq/ZaoYN5tocvNsMc7OSm7+m1aJqR7trQ==}
     engines: {node: '>=18.0.0'}
@@ -504,6 +678,9 @@ packages:
       typescript:
         optional: true
 
+  '@stablelib/base64@1.0.1':
+    resolution: {integrity: sha512-1bnPQqSxSuc3Ii6MhBysoWCg58j97aUjuCSZrGSmDxNqtytIi0k8utUenAwTZN4V5mXXYGsVUI9zeBqy+jBOSQ==}
+
   '@supabase/auth-js@2.97.0':
     resolution: {integrity: sha512-2Og/1lqp+AIavr8qS2X04aSl8RBY06y4LrtIAGxat06XoXYiDxKNQMQzWDAKm1EyZFZVRNH48DO5YvIZ7la5fQ==}
     engines: {node: '>=20.0.0'}
@@ -1051,6 +1228,10 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
   define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
@@ -1067,6 +1248,19 @@ packages:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
 
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -1087,6 +1281,10 @@ packages:
     resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==}
     engines: {node: '>=10.13.0'}
 
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
   es-abstract@1.24.1:
     resolution: {integrity: sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==}
     engines: {node: '>= 0.4'}
@@ -1260,6 +1458,9 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
+  fast-sha256@1.3.0:
+    resolution: {integrity: sha512-n11RGP/lrWEFI/bWdygLxhI+pVeo1ZYIVwvvPkW7azl/rOy+F3HYRZ2K5zeE9mmkhQppyv9sQFx0JM9UabnpPQ==}
+
   fastq@1.20.1:
     resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
 
@@ -1422,6 +1623,13 @@ packages:
   hermes-parser@0.25.1:
     resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
 
+  html-to-text@9.0.5:
+    resolution: {integrity: sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==}
+    engines: {node: '>=14'}
+
+  htmlparser2@8.0.2:
+    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
+
   https-proxy-agent@7.0.6:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
@@ -1624,6 +1832,9 @@ packages:
     resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
     engines: {node: '>=0.10'}
 
+  leac@0.6.0:
+    resolution: {integrity: sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==}
+
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -1726,6 +1937,11 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
+  marked@15.0.12:
+    resolution: {integrity: sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -1883,6 +2099,9 @@ packages:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  parseley@0.12.1:
+    resolution: {integrity: sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -1898,6 +2117,9 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
+  peberminta@0.9.0:
+    resolution: {integrity: sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -1913,6 +2135,9 @@ packages:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
+  postal-mime@2.7.3:
+    resolution: {integrity: sha512-MjhXadAJaWgYzevi46+3kLak8y6gbg0ku14O1gO/LNOuay8dO+1PtcSGvAdgDR0DoIsSaiIA8y/Ddw6MnrO0Tw==}
+
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -1928,10 +2153,19 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier@3.8.1:
+    resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   pretty-bytes@6.1.1:
     resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
     engines: {node: ^14.13.1 || >=16.0.0}
 
+  prismjs@1.30.0:
+    resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
+    engines: {node: '>=6'}
+
   proc-log@5.0.0:
     resolution: {integrity: sha512-Azwzvl90HaF0aCz1JrDdXQykFakSSNPaPoiZ9fm5qJIMHioDZEi7OAdRwSm6rSoPtY3Qutnm3L7ogmg3dc+wbQ==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -1946,6 +2180,12 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  react-colorful@5.6.1:
+    resolution: {integrity: sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
   react-dom@19.2.3:
     resolution: {integrity: sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==}
     peerDependencies:
@@ -1970,6 +2210,15 @@ packages:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
 
+  resend@6.9.2:
+    resolution: {integrity: sha512-uIM6CQ08tS+hTCRuKBFbOBvHIGaEhqZe8s4FOgqsVXSbQLAhmNWpmUhG3UAtRnmcwTWFUqnHa/+Vux8YGPyDBA==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      '@react-email/render': '*'
+    peerDependenciesMeta:
+      '@react-email/render':
+        optional: true
+
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -2009,6 +2258,9 @@ packages:
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
+  selderee@0.11.0:
+    resolution: {integrity: sha512-5TF+l7p4+OsnP8BCCvSyZiSPc4x4//p5uPwK8TCnVPJYRmU2aYKMpOXvw8zM5a5JvuuCGN1jmsMwuU2W02ukfA==}
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -2087,6 +2339,9 @@ packages:
   stable-hash@0.0.5:
     resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
 
+  standardwebhooks@1.0.0:
+    resolution: {integrity: sha512-BbHGOQK9olHPMvQNHWul6MYlrRTAOKn03rOe4A8O3CLWhNf4YHBqq2HJKKC+sfqpxiBY52pNeesD6jIiLDz8jg==}
+
   stop-iteration-iterator@1.1.0:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
@@ -2164,6 +2419,9 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svix@1.84.1:
+    resolution: {integrity: sha512-K8DPPSZaW/XqXiz1kEyzSHYgmGLnhB43nQCMeKjWGCUpLIpAMMM8kx3rVVOSm6Bo6EHyK1RQLPT4R06skM/MlQ==}
+
   tailwind-merge@2.6.1:
     resolution: {integrity: sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==}
 
@@ -2252,6 +2510,10 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  uuid@10.0.0:
+    resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
+    hasBin: true
+
   web-streams-polyfill@3.3.3:
     resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
     engines: {node: '>= 8'}
@@ -2691,8 +2953,137 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@react-email/body@0.2.1(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
+  '@react-email/button@0.2.1(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
+  '@react-email/code-block@0.2.1(react@19.2.3)':
+    dependencies:
+      prismjs: 1.30.0
+      react: 19.2.3
+
+  '@react-email/code-inline@0.0.6(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
+  '@react-email/column@0.0.14(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
+  '@react-email/components@1.0.8(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@react-email/body': 0.2.1(react@19.2.3)
+      '@react-email/button': 0.2.1(react@19.2.3)
+      '@react-email/code-block': 0.2.1(react@19.2.3)
+      '@react-email/code-inline': 0.0.6(react@19.2.3)
+      '@react-email/column': 0.0.14(react@19.2.3)
+      '@react-email/container': 0.0.16(react@19.2.3)
+      '@react-email/font': 0.0.10(react@19.2.3)
+      '@react-email/head': 0.0.13(react@19.2.3)
+      '@react-email/heading': 0.0.16(react@19.2.3)
+      '@react-email/hr': 0.0.12(react@19.2.3)
+      '@react-email/html': 0.0.12(react@19.2.3)
+      '@react-email/img': 0.0.12(react@19.2.3)
+      '@react-email/link': 0.0.13(react@19.2.3)
+      '@react-email/markdown': 0.0.18(react@19.2.3)
+      '@react-email/preview': 0.0.14(react@19.2.3)
+      '@react-email/render': 2.0.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@react-email/row': 0.0.13(react@19.2.3)
+      '@react-email/section': 0.0.17(react@19.2.3)
+      '@react-email/tailwind': 2.0.5(@react-email/body@0.2.1(react@19.2.3))(@react-email/button@0.2.1(react@19.2.3))(@react-email/code-block@0.2.1(react@19.2.3))(@react-email/code-inline@0.0.6(react@19.2.3))(@react-email/container@0.0.16(react@19.2.3))(@react-email/heading@0.0.16(react@19.2.3))(@react-email/hr@0.0.12(react@19.2.3))(@react-email/img@0.0.12(react@19.2.3))(@react-email/link@0.0.13(react@19.2.3))(@react-email/preview@0.0.14(react@19.2.3))(@react-email/text@0.1.6(react@19.2.3))(react@19.2.3)
+      '@react-email/text': 0.1.6(react@19.2.3)
+      react: 19.2.3
+    transitivePeerDependencies:
+      - react-dom
+
+  '@react-email/container@0.0.16(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
+  '@react-email/font@0.0.10(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
+  '@react-email/head@0.0.13(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
+  '@react-email/heading@0.0.16(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
+  '@react-email/hr@0.0.12(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
+  '@react-email/html@0.0.12(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
+  '@react-email/img@0.0.12(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
+  '@react-email/link@0.0.13(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
+  '@react-email/markdown@0.0.18(react@19.2.3)':
+    dependencies:
+      marked: 15.0.12
+      react: 19.2.3
+
+  '@react-email/preview@0.0.14(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
+  '@react-email/render@2.0.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      html-to-text: 9.0.5
+      prettier: 3.8.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
+  '@react-email/row@0.0.13(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
+  '@react-email/section@0.0.17(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
+  '@react-email/tailwind@2.0.5(@react-email/body@0.2.1(react@19.2.3))(@react-email/button@0.2.1(react@19.2.3))(@react-email/code-block@0.2.1(react@19.2.3))(@react-email/code-inline@0.0.6(react@19.2.3))(@react-email/container@0.0.16(react@19.2.3))(@react-email/heading@0.0.16(react@19.2.3))(@react-email/hr@0.0.12(react@19.2.3))(@react-email/img@0.0.12(react@19.2.3))(@react-email/link@0.0.13(react@19.2.3))(@react-email/preview@0.0.14(react@19.2.3))(@react-email/text@0.1.6(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@react-email/text': 0.1.6(react@19.2.3)
+      react: 19.2.3
+      tailwindcss: 4.2.1
+    optionalDependencies:
+      '@react-email/body': 0.2.1(react@19.2.3)
+      '@react-email/button': 0.2.1(react@19.2.3)
+      '@react-email/code-block': 0.2.1(react@19.2.3)
+      '@react-email/code-inline': 0.0.6(react@19.2.3)
+      '@react-email/container': 0.0.16(react@19.2.3)
+      '@react-email/heading': 0.0.16(react@19.2.3)
+      '@react-email/hr': 0.0.12(react@19.2.3)
+      '@react-email/img': 0.0.12(react@19.2.3)
+      '@react-email/link': 0.0.13(react@19.2.3)
+      '@react-email/preview': 0.0.14(react@19.2.3)
+
+  '@react-email/text@0.1.6(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+
   '@rtsao/scc@1.1.0': {}
 
+  '@selderee/plugin-htmlparser2@0.11.0':
+    dependencies:
+      domhandler: 5.0.3
+      selderee: 0.11.0
+
   '@serwist/build@9.5.6(browserslist@4.28.1)(typescript@5.9.3)':
     dependencies:
       '@serwist/utils': 9.5.6(browserslist@4.28.1)
@@ -2749,6 +3140,8 @@ snapshots:
     transitivePeerDependencies:
       - browserslist
 
+  '@stablelib/base64@1.0.1': {}
+
   '@supabase/auth-js@2.97.0':
     dependencies:
       tslib: 2.8.1
@@ -3294,6 +3687,8 @@ snapshots:
 
   deep-is@0.1.4: {}
 
+  deepmerge@4.3.1: {}
+
   define-data-property@1.1.4:
     dependencies:
       es-define-property: 1.0.1
@@ -3312,6 +3707,24 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -3331,6 +3744,8 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.3.0
 
+  entities@4.5.0: {}
+
   es-abstract@1.24.1:
     dependencies:
       array-buffer-byte-length: 1.0.2
@@ -3655,6 +4070,8 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
+  fast-sha256@1.3.0: {}
+
   fastq@1.20.1:
     dependencies:
       reusify: 1.1.0
@@ -3815,6 +4232,21 @@ snapshots:
     dependencies:
       hermes-estree: 0.25.1
 
+  html-to-text@9.0.5:
+    dependencies:
+      '@selderee/plugin-htmlparser2': 0.11.0
+      deepmerge: 4.3.1
+      dom-serializer: 2.0.0
+      htmlparser2: 8.0.2
+      selderee: 0.11.0
+
+  htmlparser2@8.0.2:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 4.5.0
+
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.4
@@ -4017,6 +4449,8 @@ snapshots:
     dependencies:
       language-subtag-registry: 0.3.23
 
+  leac@0.6.0: {}
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
@@ -4097,6 +4531,8 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  marked@15.0.12: {}
+
   math-intrinsics@1.1.0: {}
 
   merge2@1.4.1: {}
@@ -4257,6 +4693,11 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
+  parseley@0.12.1:
+    dependencies:
+      leac: 0.6.0
+      peberminta: 0.9.0
+
   path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
@@ -4268,6 +4709,8 @@ snapshots:
       lru-cache: 10.4.3
       minipass: 7.1.3
 
+  peberminta@0.9.0: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -4276,6 +4719,8 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
+  postal-mime@2.7.3: {}
+
   postcss-value-parser@4.2.0: {}
 
   postcss@8.4.31:
@@ -4292,8 +4737,12 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier@3.8.1: {}
+
   pretty-bytes@6.1.1: {}
 
+  prismjs@1.30.0: {}
+
   proc-log@5.0.0: {}
 
   prop-types@15.8.1:
@@ -4306,6 +4755,11 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  react-colorful@5.6.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   react-dom@19.2.3(react@19.2.3):
     dependencies:
       react: 19.2.3
@@ -4337,6 +4791,13 @@ snapshots:
       gopd: 1.2.0
       set-function-name: 2.0.2
 
+  resend@6.9.2(@react-email/render@2.0.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)):
+    dependencies:
+      postal-mime: 2.7.3
+      svix: 1.84.1
+    optionalDependencies:
+      '@react-email/render': 2.0.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+
   resolve-from@4.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}
@@ -4383,6 +4844,10 @@ snapshots:
 
   scheduler@0.27.0: {}
 
+  selderee@0.11.0:
+    dependencies:
+      parseley: 0.12.1
+
   semver@6.3.1: {}
 
   semver@7.7.3: {}
@@ -4496,6 +4961,11 @@ snapshots:
 
   stable-hash@0.0.5: {}
 
+  standardwebhooks@1.0.0:
+    dependencies:
+      '@stablelib/base64': 1.0.1
+      fast-sha256: 1.3.0
+
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -4597,6 +5067,11 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svix@1.84.1:
+    dependencies:
+      standardwebhooks: 1.0.0
+      uuid: 10.0.0
+
   tailwind-merge@2.6.1: {}
 
   tailwindcss@4.2.1: {}
@@ -4731,6 +5206,8 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  uuid@10.0.0: {}
+
   web-streams-polyfill@3.3.3: {}
 
   webidl-conversions@4.0.2: {}
diff --git a/src/app/(app)/account/page.tsx b/src/app/(app)/account/page.tsx
index 0da1304..1aea34f 100644
--- a/src/app/(app)/account/page.tsx
+++ b/src/app/(app)/account/page.tsx
@@ -1,31 +1,31 @@
 import React from "react";
-import { User, Settings } from "lucide-react";
+import { Settings } from "lucide-react";
+import { PageHeader } from "@/components/ui/PageHeader";
 
 export default function AccountPage() {
     return (
-        <div className="flex flex-col justify-start w-full max-w-5xl mx-auto p-6 md:p-12">
-            <div className="mb-10">
-                <h1 className="text-3xl md:text-4xl font-bold tracking-tight text-zinc-50 mb-2">Sua Conta</h1>
-                <p className="text-zinc-400 text-lg">Gerencie suas informações, preferências e assinatura.</p>
-            </div>
+        <div className="relative min-h-[calc(100vh-64px)] w-full  pb-32 flex flex-col">
+            <PageHeader title="Sua Conta" subtitle="Gerencie suas informações, preferências e assinatura" />
 
-            <div className="p-12 bg-zinc-900/50 backdrop-blur-xl border border-white/5 shadow-2xl rounded-3xl w-full flex flex-col items-center justify-center text-center">
-                <div className="w-16 h-16 rounded-2xl bg-indigo-500/10 flex items-center justify-center mb-6 border border-indigo-500/20">
-                    <Settings className="w-8 h-8 text-indigo-400" />
-                </div>
+            <div className="flex-1 flex flex-col items-center justify-center w-full max-w-4xl mx-auto text-center mt-12">
+                <div className="flex flex-col items-center justify-center p-12 bg-zinc-900/50 backdrop-blur-xl border border-white/5 shadow-2xl rounded-3xl w-full max-w-2xl mt-12">
+                    <div className="w-20 h-20 rounded-2xl bg-indigo-500/10 flex items-center justify-center mb-8 border border-indigo-500/20">
+                        <Settings className="w-10 h-10 text-indigo-400" />
+                    </div>
 
-                <h2 className="text-2xl font-semibold text-zinc-50 mb-3">Configurações</h2>
+                    <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-zinc-50 mb-4">Configurações</h2>
 
-                <p className="text-zinc-400 max-w-md mx-auto mb-6">
-                    Módulo de gerenciamento e configurações da conta em construção.
-                </p>
+                    <p className="text-zinc-400 text-lg max-w-md mx-auto mb-8">
+                        Módulo de gerenciamento e configurações da conta em construção.
+                    </p>
 
-                <div className="inline-flex items-center justify-center rounded-full bg-indigo-500/10 px-4 py-1.5 text-sm font-medium text-indigo-400 border border-indigo-500/20">
-                    <span className="relative flex h-2 w-2 mr-2">
-                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
-                        <span className="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
-                    </span>
-                    Em desenvolvimento
+                    <div className="inline-flex items-center justify-center rounded-full bg-indigo-500/10 px-4 py-1.5 text-sm font-medium text-indigo-400 border border-indigo-500/20">
+                        <span className="relative flex h-2 w-2 mr-2">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
+                        </span>
+                        Em desenvolvimento
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/app/(app)/accounts/page.tsx b/src/app/(app)/accounts/page.tsx
index e24ab5d..358ebe0 100644
--- a/src/app/(app)/accounts/page.tsx
+++ b/src/app/(app)/accounts/page.tsx
@@ -1,12 +1,20 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Plus, ChevronDown, ChevronRight } from "lucide-react";
 import { motion, useScroll, useTransform } from "framer-motion";
 import { cn } from "@/lib/utils";
 import { AccountCard } from "@/components/ui/AccountCard";
 import { AccountSlideOver } from "@/components/ui/AccountSlideOver";
+import { PageHeader } from "@/components/ui/PageHeader";
 import { ArrowRight, X } from "lucide-react";
+import { CreateAccountModal } from "@/components/ui/CreateAccountModal";
+import {
+    fetchAccounts,
+    createAccountAction,
+    updateAccountAction,
+    deleteAccountAction,
+} from "@/app/actions/accountActions";
 
 // Mock Data
 const MOCK_GIRO = [
@@ -142,11 +150,52 @@ export default function AccountsPage() {
     const [transferIntent, setTransferIntent] = useState<{ sourceId: string; targetId: string } | null>(null);
     const [transferValue, setTransferValue] = useState("");
 
-    const totalGiro = MOCK_GIRO.reduce((acc, curr) => acc + curr.balance, 0);
-    const totalCreditBills = MOCK_CREDIT.reduce((acc, curr) => acc + (curr.creditUsed || 0), 0);
+    // Create Account State
+    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [giroAccounts, setGiroAccounts] = useState<any[]>([]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [creditAccounts, setCreditAccounts] = useState<any[]>([]);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [vaultAccounts, setVaultAccounts] = useState<any[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isSeeding, setIsSeeding] = useState(false);
+
+    useEffect(() => {
+        let isMounted = true;
+        async function load() {
+            const data = await fetchAccounts();
+            if (data && isMounted && data.length > 0) {
+                const mapped = data.map((account) => ({
+                    id: account.id,
+                    name: account.name,
+                    institution: account.institution || "",
+                    category: account.category,
+                    balance: account.balance,
+                    colorHex: account.color_hex || "#8A05BE",
+                    lastSyncedAt: new Date(account.updated_at),
+                    members: [{ id: "u1", name: "Você", role: "owner" as const }],
+                    creditUsed: account.category === "credit" ? 0 : undefined,
+                }));
+
+                setGiroAccounts(mapped.filter((a) => ["checking", "wallet"].includes(a.category)));
+                setCreditAccounts(mapped.filter((a) => ["credit"].includes(a.category)));
+                setVaultAccounts(mapped.filter((a) => ["savings", "vault"].includes(a.category)));
+            }
+            if (isMounted) setIsLoading(false);
+        }
+        load();
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+
+    const totalGiro = giroAccounts.reduce((acc, curr) => acc + curr.balance, 0);
+    const totalCreditBills = creditAccounts.reduce((acc, curr) => acc + (curr.creditUsed || 0), 0);
     const realLiquidity = totalGiro - totalCreditBills;
 
-    const totalReserves = MOCK_VAULT.reduce((acc, curr) => acc + curr.balance, 0);
+    const totalReserves = vaultAccounts.reduce((acc, curr) => acc + curr.balance, 0);
 
     const formatCurrency = (val: number) => {
         return new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(val);
@@ -178,22 +227,128 @@ export default function AccountsPage() {
         e.preventDefault();
         setDragOverId(null);
         if (draggedAccountId && draggedAccountId !== targetId) {
+            const tempAll = [...giroAccounts, ...creditAccounts, ...vaultAccounts];
+            const targetAccount = tempAll.find((a) => a.id === targetId);
+
+            if (targetAccount?.category === "credit") {
+                alert(
+                    "Não é possível transferir saldo para um Cartão de Crédito. Ele deve estar vinculado a uma conta corrente.",
+                );
+                setDraggedAccountId(null);
+                return;
+            }
+
             setTransferIntent({ sourceId: draggedAccountId, targetId });
         }
         setDraggedAccountId(null);
     };
 
     // Combine all mock data to find specific accounts for the transfer modal
-    const ALL_ACCOUNTS = [...MOCK_GIRO, ...MOCK_CREDIT, ...MOCK_VAULT];
+    const ALL_ACCOUNTS = [...giroAccounts, ...creditAccounts, ...vaultAccounts];
+
+    const handleTransferValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value.replace(/\D/g, "");
+        if (!value) {
+            setTransferValue("");
+            return;
+        }
+        const numericValue = parseInt(value, 10) / 100;
+        const formatted = new Intl.NumberFormat("pt-BR", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(numericValue);
+        setTransferValue(formatted);
+    };
 
     const executeTransfer = () => {
-        console.log(`Transferring ${transferValue} from ${transferIntent?.sourceId} to ${transferIntent?.targetId}`);
+        const value = parseFloat(transferValue.replace(/\./g, "").replace(",", "."));
+        if (isNaN(value) || value <= 0 || !transferIntent) return;
+
+        const { sourceId, targetId } = transferIntent;
+
+        const updateBalance = (id: string, amount: number) => {
+            setGiroAccounts((prev) => prev.map((a) => (a.id === id ? { ...a, balance: a.balance + amount } : a)));
+            setCreditAccounts((prev) => prev.map((a) => (a.id === id ? { ...a, balance: a.balance + amount } : a)));
+            setVaultAccounts((prev) => prev.map((a) => (a.id === id ? { ...a, balance: a.balance + amount } : a)));
+        };
+
+        updateBalance(sourceId, -value);
+        updateBalance(targetId, value);
+
         setTransferIntent(null);
         setTransferValue("");
     };
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleUpdateAccount = async (id: string, updates: any) => {
+        const res = await updateAccountAction(id, updates);
+        if (res.success) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const mapUpdate = (prev: any[]) =>
+                prev.map((a) => (a.id === id ? { ...a, ...updates, colorHex: updates.color_hex || a.colorHex } : a));
+            setGiroAccounts(mapUpdate);
+            setCreditAccounts(mapUpdate);
+            setVaultAccounts(mapUpdate);
+        }
+    };
+
+    const handleDeleteAccount = async (id: string) => {
+        const res = await deleteAccountAction(id);
+        if (res.success) {
+            setGiroAccounts((prev) => prev.filter((a) => a.id !== id));
+            setCreditAccounts((prev) => prev.filter((a) => a.id !== id));
+            setVaultAccounts((prev) => prev.filter((a) => a.id !== id));
+        }
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleCreateAccount = async (newAccount: any) => {
+        const accountInsert = {
+            name: newAccount.name,
+            institution: newAccount.institution,
+            category: newAccount.category,
+            balance: newAccount.balance || 0,
+            color_hex: newAccount.colorHex,
+        };
+        const res = await createAccountAction(accountInsert as any);
+
+        if (res.success && res.data) {
+            const dbAccount = {
+                ...newAccount,
+                id: res.data.id,
+            };
+
+            if (
+                dbAccount.category === "checking" ||
+                dbAccount.category === "savings" ||
+                dbAccount.category === "wallet"
+            ) {
+                setGiroAccounts((prev) => [...prev, dbAccount]);
+            } else if (dbAccount.category === "credit") {
+                setCreditAccounts((prev) => [...prev, dbAccount]);
+            } else if (dbAccount.category === "vault") {
+                setVaultAccounts((prev) => [...prev, dbAccount]);
+            }
+        }
+    };
+
+    const handleSeedData = async () => {
+        setIsSeeding(true);
+        const defaults = [...MOCK_GIRO, ...MOCK_CREDIT, ...MOCK_VAULT];
+        for (const acc of defaults) {
+            await createAccountAction({
+                name: acc.name,
+                institution: acc.institution,
+                category: acc.category,
+                balance: acc.balance || 0,
+                color_hex: acc.colorHex,
+            } as any);
+        }
+        window.location.reload();
+    };
+
     return (
-        <div className="relative min-h-[calc(100vh-64px)] w-full p-6 md:p-8 lg:p-12 pb-32">
+        <div className="relative min-h-[calc(100vh-64px)] w-full pb-32">
             {/* Subtle Background Glow w/ Parallax */}
             <motion.div
                 style={{ y: yBg1 }}
@@ -205,34 +360,45 @@ export default function AccountsPage() {
             />
 
             {/* Header Macro Context */}
-            <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-16">
-                <div className="flex flex-col gap-1">
-                    <p className="text-zinc-400 font-medium">Liquidez Imediata</p>
-                    <div className="flex items-baseline gap-3">
-                        <h1 className="text-4xl md:text-5xl font-bold text-zinc-50 tabular-nums tracking-tight">
-                            {formatCurrency(realLiquidity)}
-                        </h1>
-                        <span className="text-xs text-zinc-500 bg-zinc-900/50 px-2 py-1 rounded-md border border-zinc-800">
-                            Livre de faturas fechadas
-                        </span>
-                    </div>
-
-                    <div className="mt-4 flex items-center gap-2 text-zinc-400">
-                        <p className="text-sm">Patrimônio Alocado (Reservas):</p>
-                        <span className="font-semibold">{formatCurrency(totalReserves)}</span>
+            <PageHeader
+                subtitle="Liquidez Imediata"
+                className="mb-16"
+                title={<span className="tabular-nums tracking-tight">{formatCurrency(realLiquidity)}</span>}
+                badge="Livre de faturas fechadas"
+                action={
+                    <div className="flex gap-4 items-center">
+                        {!isLoading &&
+                            giroAccounts.length === 0 &&
+                            creditAccounts.length === 0 &&
+                            vaultAccounts.length === 0 && (
+                                <button
+                                    onClick={handleSeedData}
+                                    disabled={isSeeding}
+                                    className="flex items-center gap-2 bg-zinc-800 text-zinc-300 px-6 py-3 rounded-xl font-semibold hover:bg-zinc-700 hover:text-white transition-all w-full md:w-auto justify-center disabled:opacity-50"
+                                >
+                                    {isSeeding ? "Populando..." : "Popular Teste"}
+                                </button>
+                            )}
+                        <button
+                            onClick={() => setIsCreateModalOpen(true)}
+                            className="flex items-center gap-2 bg-primary text-primary-foreground px-6 py-3 rounded-xl font-semibold hover:bg-primary/90 transition-all shadow-[0_0_20px_rgba(34,197,94,0.2)] hover:shadow-[0_0_30px_rgba(34,197,94,0.4)] w-full md:w-auto justify-center group"
+                        >
+                            <Plus size={20} className="transition-transform group-hover:rotate-90" />
+                            Nova Conta
+                        </button>
                     </div>
+                }
+            >
+                <div className="flex items-center gap-2 text-zinc-400">
+                    <p className="text-sm">Patrimônio Alocado (Reservas):</p>
+                    <span className="font-semibold">{formatCurrency(totalReserves)}</span>
                 </div>
-
-                <button className="flex items-center gap-2 bg-primary text-primary-foreground px-6 py-3 rounded-xl font-semibold hover:bg-primary/90 transition-all shadow-lg hover:shadow-primary/20 w-full md:w-auto justify-center group">
-                    <Plus size={20} className="transition-transform group-hover:rotate-90" />
-                    Nova Movimentação
-                </button>
-            </div>
+            </PageHeader>
 
             {/* Accordions */}
             <div className="flex flex-col gap-12">
                 <AccountSection title="Contas de Giro">
-                    {MOCK_GIRO.map((account) => (
+                    {giroAccounts.map((account) => (
                         <div
                             key={account.id}
                             className={cn("transition-transform", dragOverId === account.id && "scale-105 opacity-80")}
@@ -251,7 +417,7 @@ export default function AccountsPage() {
                 </AccountSection>
 
                 <AccountSection title="Passivos Circulantes">
-                    {MOCK_CREDIT.map((account) => (
+                    {creditAccounts.map((account) => (
                         <div
                             key={account.id}
                             className={cn("transition-transform", dragOverId === account.id && "scale-105 opacity-80")}
@@ -270,7 +436,7 @@ export default function AccountsPage() {
                 </AccountSection>
 
                 <AccountSection title="Reservas e Cofres" defaultOpen={false}>
-                    {MOCK_VAULT.map((account) => (
+                    {vaultAccounts.map((account) => (
                         <div
                             key={account.id}
                             className={cn("transition-transform", dragOverId === account.id && "scale-105 opacity-80")}
@@ -299,6 +465,9 @@ export default function AccountsPage() {
                     institution={selectedAccount.institution}
                     balance={selectedAccount.balance}
                     colorHex={selectedAccount.colorHex}
+                    category={selectedAccount.category}
+                    onUpdate={handleUpdateAccount}
+                    onDelete={handleDeleteAccount}
                 />
             )}
 
@@ -354,9 +523,10 @@ export default function AccountsPage() {
                                             R$
                                         </span>
                                         <input
-                                            type="number"
+                                            type="text"
+                                            inputMode="numeric"
                                             value={transferValue}
-                                            onChange={(e) => setTransferValue(e.target.value)}
+                                            onChange={handleTransferValueChange}
                                             autoFocus
                                             className="w-full text-center text-5xl font-bold bg-transparent border-none outline-none text-zinc-100 placeholder:text-zinc-800"
                                             placeholder="0,00"
@@ -366,7 +536,10 @@ export default function AccountsPage() {
 
                                 <button
                                     onClick={executeTransfer}
-                                    disabled={!transferValue || parseFloat(transferValue) <= 0}
+                                    disabled={
+                                        !transferValue ||
+                                        parseFloat(transferValue.replace(/\./g, "").replace(",", ".")) <= 0
+                                    }
                                     className="w-full py-4 rounded-xl bg-primary text-primary-foreground font-semibold disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary/90 transition-colors shadow-[0_0_20px_rgba(34,197,94,0.2)] hover:shadow-[0_0_30px_rgba(34,197,94,0.4)]"
                                 >
                                     Confirmar Transferência
@@ -375,6 +548,12 @@ export default function AccountsPage() {
                         </div>
                     );
                 })()}
+
+            <CreateAccountModal
+                isOpen={isCreateModalOpen}
+                onClose={() => setIsCreateModalOpen(false)}
+                onCreate={handleCreateAccount}
+            />
         </div>
     );
 }
diff --git a/src/app/(app)/dashboard/page.tsx b/src/app/(app)/dashboard/page.tsx
index ad71c8b..cb83825 100644
--- a/src/app/(app)/dashboard/page.tsx
+++ b/src/app/(app)/dashboard/page.tsx
@@ -1,27 +1,32 @@
 import React from "react";
 import { Construction } from "lucide-react";
+import { PageHeader } from "@/components/ui/PageHeader";
 
 export default function DashboardPage() {
     return (
-        <div className="flex flex-col items-center justify-center w-full max-w-4xl mx-auto p-6 text-center">
-            <div className="flex flex-col items-center justify-center p-12 bg-zinc-900/50 backdrop-blur-xl border border-white/5 shadow-2xl rounded-3xl w-full max-w-2xl">
-                <div className="w-20 h-20 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-8 border border-emerald-500/20">
-                    <Construction className="w-10 h-10 text-emerald-400" />
-                </div>
+        <div className="relative min-h-[calc(100vh-64px)] w-full pb-32 flex flex-col">
+            <PageHeader title="Dashboard" subtitle="Visão Geral" />
+
+            <div className="flex-1 flex flex-col items-center justify-center w-full max-w-4xl mx-auto text-center mt-12">
+                <div className="flex flex-col items-center justify-center p-12 bg-zinc-900/50 backdrop-blur-xl border border-white/5 shadow-2xl rounded-3xl w-full max-w-2xl">
+                    <div className="w-20 h-20 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-8 border border-emerald-500/20">
+                        <Construction className="w-10 h-10 text-emerald-400" />
+                    </div>
 
-                <h1 className="text-3xl md:text-4xl font-bold tracking-tight text-zinc-50 mb-4">Dashboard</h1>
+                    <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-zinc-50 mb-4">Dashboard</h2>
 
-                <p className="text-zinc-400 text-lg max-w-md mx-auto mb-8">
-                    Esta área está atualmente em construção. Em breve você terá acesso a todas as métricas detalhadas de
-                    fluxo de caixa aqui.
-                </p>
+                    <p className="text-zinc-400 text-lg max-w-md mx-auto mb-8">
+                        Esta área está atualmente em construção. Em breve você terá acesso a todas as métricas
+                        detalhadas de fluxo de caixa aqui.
+                    </p>
 
-                <div className="inline-flex items-center justify-center rounded-full bg-emerald-500/10 px-4 py-1.5 text-sm font-medium text-emerald-400 border border-emerald-500/20">
-                    <span className="relative flex h-2 w-2 mr-2">
-                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                        <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
-                    </span>
-                    Em desenvolvimento
+                    <div className="inline-flex items-center justify-center rounded-full bg-emerald-500/10 px-4 py-1.5 text-sm font-medium text-emerald-400 border border-emerald-500/20">
+                        <span className="relative flex h-2 w-2 mr-2">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+                        </span>
+                        Em desenvolvimento
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/app/(app)/investments/page.tsx b/src/app/(app)/investments/page.tsx
index 02c2ef9..50cbf29 100644
--- a/src/app/(app)/investments/page.tsx
+++ b/src/app/(app)/investments/page.tsx
@@ -1,27 +1,32 @@
 import React from "react";
 import { TrendingUp } from "lucide-react";
+import { PageHeader } from "@/components/ui/PageHeader";
 
 export default function InvestmentsPage() {
     return (
-        <div className="flex flex-col items-center justify-center w-full max-w-4xl mx-auto p-6 text-center">
-            <div className="flex flex-col items-center justify-center p-12 bg-zinc-900/50 backdrop-blur-xl border border-white/5 shadow-2xl rounded-3xl w-full max-w-2xl mt-12">
-                <div className="w-20 h-20 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-8 border border-emerald-500/20">
-                    <TrendingUp className="w-10 h-10 text-emerald-400" />
-                </div>
+        <div className="relative min-h-[calc(100vh-64px)] w-full pb-32 flex flex-col">
+            <PageHeader title="Investimentos" subtitle="Gestão de Patrimônio" />
+
+            <div className="flex-1 flex flex-col items-center justify-center w-full max-w-4xl mx-auto text-center mt-12">
+                <div className="flex flex-col items-center justify-center p-12 bg-zinc-900/50 backdrop-blur-xl border border-white/5 shadow-2xl rounded-3xl w-full max-w-2xl mt-12">
+                    <div className="w-20 h-20 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-8 border border-emerald-500/20">
+                        <TrendingUp className="w-10 h-10 text-emerald-400" />
+                    </div>
 
-                <h1 className="text-3xl md:text-4xl font-bold tracking-tight text-zinc-50 mb-4">Investimentos</h1>
+                    <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-zinc-50 mb-4">Investimentos</h2>
 
-                <p className="text-zinc-400 text-lg max-w-md mx-auto mb-8">
-                    Esta área está atualmente em construção. Em breve você terá acesso ao módulo de acompanhamento de
-                    investimentos aqui.
-                </p>
+                    <p className="text-zinc-400 text-lg max-w-md mx-auto mb-8">
+                        Esta área está atualmente em construção. Em breve você terá acesso ao módulo de acompanhamento
+                        de investimentos aqui.
+                    </p>
 
-                <div className="inline-flex items-center justify-center rounded-full bg-emerald-500/10 px-4 py-1.5 text-sm font-medium text-emerald-400 border border-emerald-500/20">
-                    <span className="relative flex h-2 w-2 mr-2">
-                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                        <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
-                    </span>
-                    Em desenvolvimento
+                    <div className="inline-flex items-center justify-center rounded-full bg-emerald-500/10 px-4 py-1.5 text-sm font-medium text-emerald-400 border border-emerald-500/20">
+                        <span className="relative flex h-2 w-2 mr-2">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+                        </span>
+                        Em desenvolvimento
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/app/(app)/invoices/page.tsx b/src/app/(app)/invoices/page.tsx
index ec322cc..8b51788 100644
--- a/src/app/(app)/invoices/page.tsx
+++ b/src/app/(app)/invoices/page.tsx
@@ -1,27 +1,32 @@
 import React from "react";
 import { Receipt } from "lucide-react";
+import { PageHeader } from "@/components/ui/PageHeader";
 
 export default function InvoicesPage() {
     return (
-        <div className="flex flex-col items-center justify-center w-full max-w-4xl mx-auto p-6 text-center">
-            <div className="flex flex-col items-center justify-center p-12 bg-zinc-900/50 backdrop-blur-xl border border-white/5 shadow-2xl rounded-3xl w-full max-w-2xl mt-12">
-                <div className="w-20 h-20 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-8 border border-emerald-500/20">
-                    <Receipt className="w-10 h-10 text-emerald-400" />
-                </div>
+        <div className="relative min-h-[calc(100vh-64px)] w-full pb-32 flex flex-col">
+            <PageHeader title="Faturas" subtitle="Controle de Cartões" />
+
+            <div className="flex-1 flex flex-col items-center justify-center w-full max-w-4xl mx-auto text-center mt-12">
+                <div className="flex flex-col items-center justify-center p-12 bg-zinc-900/50 backdrop-blur-xl border border-white/5 shadow-2xl rounded-3xl w-full max-w-2xl mt-12">
+                    <div className="w-20 h-20 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-8 border border-emerald-500/20">
+                        <Receipt className="w-10 h-10 text-emerald-400" />
+                    </div>
 
-                <h1 className="text-3xl md:text-4xl font-bold tracking-tight text-zinc-50 mb-4">Faturas</h1>
+                    <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-zinc-50 mb-4">Faturas</h2>
 
-                <p className="text-zinc-400 text-lg max-w-md mx-auto mb-8">
-                    Esta área está atualmente em construção. Em breve você terá acesso a todas as suas faturas de
-                    cartões aqui.
-                </p>
+                    <p className="text-zinc-400 text-lg max-w-md mx-auto mb-8">
+                        Esta área está atualmente em construção. Em breve você terá acesso a todas as suas faturas de
+                        cartões aqui.
+                    </p>
 
-                <div className="inline-flex items-center justify-center rounded-full bg-emerald-500/10 px-4 py-1.5 text-sm font-medium text-emerald-400 border border-emerald-500/20">
-                    <span className="relative flex h-2 w-2 mr-2">
-                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                        <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
-                    </span>
-                    Em desenvolvimento
+                    <div className="inline-flex items-center justify-center rounded-full bg-emerald-500/10 px-4 py-1.5 text-sm font-medium text-emerald-400 border border-emerald-500/20">
+                        <span className="relative flex h-2 w-2 mr-2">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+                        </span>
+                        Em desenvolvimento
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/app/(app)/settings/page.tsx b/src/app/(app)/settings/page.tsx
index 885c8dd..8c9060a 100644
--- a/src/app/(app)/settings/page.tsx
+++ b/src/app/(app)/settings/page.tsx
@@ -1,26 +1,32 @@
 import React from "react";
 import { Settings } from "lucide-react";
+import { PageHeader } from "@/components/ui/PageHeader";
 
 export default function SettingsPage() {
     return (
-        <div className="flex flex-col items-center justify-center w-full max-w-4xl mx-auto p-6 text-center">
-            <div className="flex flex-col items-center justify-center p-12 bg-zinc-900/50 backdrop-blur-xl border border-white/5 shadow-2xl rounded-3xl w-full max-w-2xl mt-12">
-                <div className="w-20 h-20 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-8 border border-emerald-500/20">
-                    <Settings className="w-10 h-10 text-emerald-400" />
-                </div>
+        <div className="relative min-h-[calc(100vh-64px)] w-full pb-32 flex flex-col">
+            <PageHeader title="Configurações" subtitle="Preferências do Usuário" />
+
+            <div className="flex-1 flex flex-col items-center justify-center w-full max-w-4xl mx-auto text-center mt-12">
+                <div className="flex flex-col items-center justify-center p-12 bg-zinc-900/50 backdrop-blur-xl border border-white/5 shadow-2xl rounded-3xl w-full max-w-2xl mt-12">
+                    <div className="w-20 h-20 rounded-2xl bg-emerald-500/10 flex items-center justify-center mb-8 border border-emerald-500/20">
+                        <Settings className="w-10 h-10 text-emerald-400" />
+                    </div>
 
-                <h1 className="text-3xl md:text-4xl font-bold tracking-tight text-zinc-50 mb-4">Configurações</h1>
+                    <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-zinc-50 mb-4">Configurações</h2>
 
-                <p className="text-zinc-400 text-lg max-w-md mx-auto mb-8">
-                    Esta área está atualmente em construção. Em breve você terá acesso às configurações exclusivas aqui.
-                </p>
+                    <p className="text-zinc-400 text-lg max-w-md mx-auto mb-8">
+                        Esta área está atualmente em construção. Em breve você terá acesso às configurações exclusivas
+                        aqui.
+                    </p>
 
-                <div className="inline-flex items-center justify-center rounded-full bg-emerald-500/10 px-4 py-1.5 text-sm font-medium text-emerald-400 border border-emerald-500/20">
-                    <span className="relative flex h-2 w-2 mr-2">
-                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
-                        <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
-                    </span>
-                    Em desenvolvimento
+                    <div className="inline-flex items-center justify-center rounded-full bg-emerald-500/10 px-4 py-1.5 text-sm font-medium text-emerald-400 border border-emerald-500/20">
+                        <span className="relative flex h-2 w-2 mr-2">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+                        </span>
+                        Em desenvolvimento
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/src/app/actions/accountActions.ts b/src/app/actions/accountActions.ts
new file mode 100644
index 0000000..3ee109a
--- /dev/null
+++ b/src/app/actions/accountActions.ts
@@ -0,0 +1,69 @@
+"use server";
+
+import { createClient } from "@/lib/supabase/server";
+import { revalidatePath } from "next/cache";
+import { Database } from "@/types/supabase";
+import { randomUUID } from "crypto";
+
+type AccountInsert = Database["public"]["Tables"]["accounts"]["Insert"];
+type AccountUpdate = Database["public"]["Tables"]["accounts"]["Update"];
+
+export async function fetchAccounts() {
+    const supabase = await createClient();
+    const { data, error } = await supabase.from("accounts").select("*").order("created_at", { ascending: false });
+
+    if (error) {
+        console.error("Error fetching accounts:", error);
+        return [];
+    }
+
+    return data;
+}
+
+export async function createAccountAction(account: AccountInsert) {
+    const supabase = await createClient();
+    const {
+        data: { user },
+    } = await supabase.auth.getUser();
+
+    if (!user) {
+        return { success: false, error: "Usuário não autenticado." };
+    }
+
+    const id = account.id || randomUUID();
+    const { error } = await supabase.from("accounts").insert({ ...account, id });
+
+    if (error) {
+        console.error("Error creating account:", error);
+        return { success: false, error: error.message };
+    }
+
+    revalidatePath("/accounts");
+    return { success: true, data: { ...account, id } };
+}
+
+export async function updateAccountAction(id: string, updates: AccountUpdate) {
+    const supabase = await createClient();
+    const { error } = await supabase.from("accounts").update(updates).eq("id", id);
+
+    if (error) {
+        console.error("Error updating account:", error);
+        return { success: false, error: error.message };
+    }
+
+    revalidatePath("/accounts");
+    return { success: true };
+}
+
+export async function deleteAccountAction(id: string) {
+    const supabase = await createClient();
+    const { error } = await supabase.from("accounts").delete().eq("id", id);
+
+    if (error) {
+        console.error("Error deleting account:", error);
+        return { success: false, error: error.message };
+    }
+
+    revalidatePath("/accounts");
+    return { success: true };
+}
diff --git a/src/app/actions/sendAccountInvite.ts b/src/app/actions/sendAccountInvite.ts
new file mode 100644
index 0000000..80fb1d5
--- /dev/null
+++ b/src/app/actions/sendAccountInvite.ts
@@ -0,0 +1,40 @@
+"use server";
+
+import { Resend } from "resend";
+import { AccountInviteEmail } from "@/components/emails/AccountInviteEmail";
+
+const resend = new Resend(process.env.RESEND_API_KEY || "re_123");
+
+export async function sendAccountInvite(data: {
+    email: string;
+    inviterName: string;
+    accountName: string;
+    role: string;
+}) {
+    try {
+        const baseUrl =
+            process.env.NODE_ENV === "development" ? "http://localhost:9991" : "https://finiza.inovacode.dev";
+        const inviteLink = `${baseUrl}/invite?email=${encodeURIComponent(data.email)}&role=${encodeURIComponent(data.role)}&account=${encodeURIComponent(data.accountName)}`;
+
+        const { data: resendData, error } = await resend.emails.send({
+            from: "Finiza <finiza@inovacode.dev>", // Replace with your verified domain
+            to: [data.email],
+            subject: `Convite para participar da conta: ${data.accountName}`,
+            react: AccountInviteEmail({
+                inviterName: data.inviterName,
+                accountName: data.accountName,
+                inviteLink,
+            }) as React.ReactElement,
+        });
+
+        if (error) {
+            console.error(error);
+            return { success: false, error: error.message };
+        }
+
+        return { success: true, data: resendData };
+    } catch (err: unknown) {
+        console.error(err);
+        return { success: false, error: err instanceof Error ? err.message : "Unknown error" };
+    }
+}
diff --git a/src/app/invite/page.tsx b/src/app/invite/page.tsx
new file mode 100644
index 0000000..caf8f9b
--- /dev/null
+++ b/src/app/invite/page.tsx
@@ -0,0 +1,22 @@
+import React, { Suspense } from "react";
+import { InviteView } from "@/components/invite/InviteView";
+
+export const metadata = {
+    title: "Convite Pendente | Finiza",
+    description: "Aceite seu convite para participar de uma conta no Finiza.",
+};
+
+export default function InvitePage() {
+    return (
+        <div className="min-h-screen w-full flex items-center justify-center bg-zinc-950 p-4 relative overflow-hidden">
+            {/* Background igual ao da tela de Auth */}
+            <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_50%,rgba(16,185,129,0.12),transparent)] pointer-events-none" />
+
+            <div className="relative z-10 w-full flex justify-center">
+                <Suspense fallback={<div className="text-zinc-400">Carregando informações do convite...</div>}>
+                    <InviteView />
+                </Suspense>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/auth/OtpForm.tsx b/src/components/auth/OtpForm.tsx
index c656eca..c8042f8 100644
--- a/src/components/auth/OtpForm.tsx
+++ b/src/components/auth/OtpForm.tsx
@@ -15,6 +15,9 @@ export function OtpForm() {
 
     const supabase = createClient();
     const router = useRouter();
+    // Obtém parâmetros de busca da URL para manter o redirect
+    const searchParams = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : null;
+    const redirectTo = searchParams?.get("redirect_to") || "/dashboard";
 
     const handleSendOtp = async (e: React.FormEvent) => {
         e.preventDefault();
@@ -52,7 +55,7 @@ export function OtpForm() {
 
             if (verifyError) throw verifyError;
 
-            router.push("/dashboard");
+            router.push(redirectTo);
             router.refresh();
         } catch (err) {
             setError((err as Error).message || "Código inválido ou expirado.");
diff --git a/src/components/emails/AccountInviteEmail.tsx b/src/components/emails/AccountInviteEmail.tsx
new file mode 100644
index 0000000..7d12b45
--- /dev/null
+++ b/src/components/emails/AccountInviteEmail.tsx
@@ -0,0 +1,212 @@
+import {
+    Body,
+    Button,
+    Container,
+    Head,
+    Heading,
+    Hr,
+    Html,
+    Link,
+    Preview,
+    Section,
+    Text,
+} from "@react-email/components";
+import React from "react";
+
+interface AccountInviteEmailProps {
+    inviterName: string;
+    accountName: string;
+    inviteLink: string;
+}
+
+export const AccountInviteEmail: React.FC<AccountInviteEmailProps> = ({
+    inviterName = "Você",
+    accountName = "Conta Conjunta",
+    inviteLink = "https://finiza.inovacode.dev/invite/123",
+}) => {
+    const previewText = `Você foi convidado(a) por ${inviterName} para participar da conta financeira ${accountName} no Finiza.`;
+
+    return (
+        <Html lang="pt-BR">
+            <Head>
+                <style>
+                    {`
+                    body {
+                        font-family:
+                            "Inter",
+                            -apple-system,
+                            BlinkMacSystemFont,
+                            "Segoe UI",
+                            Roboto,
+                            Helvetica,
+                            Arial,
+                            sans-serif;
+                    }
+                    `}
+                </style>
+            </Head>
+            <Preview>{previewText}</Preview>
+            <Body style={main}>
+                <Section style={containerWrapper}>
+                    <Container style={container}>
+                        <Section style={header}>
+                            <Text style={logo}>
+                                Finiza<span style={logoAccent}>.</span>
+                            </Text>
+                        </Section>
+
+                        <Section style={content}>
+                            <Heading style={title}>Você foi convidado!</Heading>
+
+                            <Text style={text}>
+                                Você foi convidado(a) por <strong style={{ color: "#fafafa" }}>{inviterName}</strong>{" "}
+                                para participar da conta financeira{" "}
+                                <strong style={{ color: "#fafafa" }}>{accountName}</strong> no Finiza.
+                            </Text>
+
+                            <Text style={text}>
+                                Ao aceitar este convite, você terá acesso à conta através da Sincronia Doméstica da
+                                plataforma.
+                            </Text>
+
+                            <Section style={buttonContainer}>
+                                <Button style={button} href={inviteLink}>
+                                    Aceitar Convite e Acessar Conta
+                                </Button>
+                            </Section>
+
+                            <Hr style={divider} />
+
+                            <Text style={{ ...text, fontSize: "14px", marginBottom: "0" }}>
+                                Se você não esperava por este convite, por favor, ignore este email de forma segura. O
+                                link expirará em breve.
+                            </Text>
+                        </Section>
+
+                        <Section style={footer}>
+                            <Text style={footerText}>
+                                &copy; {new Date().getFullYear()} Finiza. Todos os direitos reservados.
+                            </Text>
+                            <Text style={footerText}>
+                                Se precisar de ajuda, entre em contato através do nosso{" "}
+                                <Link href="#" style={link}>
+                                    suporte
+                                </Link>
+                                .
+                            </Text>
+                        </Section>
+                    </Container>
+                </Section>
+            </Body>
+        </Html>
+    );
+};
+
+const main = {
+    backgroundColor: "#09090b",
+    backgroundImage: "radial-gradient(circle at 50% -20%, rgba(120, 119, 198, 0.15), transparent)",
+    color: "#fafafa",
+    margin: "0",
+    padding: "0",
+    fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+};
+
+const containerWrapper = {
+    padding: "40px 20px",
+};
+
+const container = {
+    maxWidth: "600px",
+    margin: "0 auto",
+    backgroundColor: "#18181b",
+    background: "rgba(24, 24, 27, 0.6)",
+    borderRadius: "16px",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    boxShadow: "0 8px 32px 0 rgba(0, 0, 0, 0.3)",
+    overflow: "hidden",
+};
+
+const header = {
+    padding: "32px 24px",
+    textAlign: "center" as const,
+    borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
+};
+
+const logo = {
+    color: "#fafafa",
+    fontSize: "28px",
+    fontWeight: "700",
+    letterSpacing: "-1px",
+    textDecoration: "none",
+    margin: "0",
+};
+
+const logoAccent = {
+    color: "#34d399",
+};
+
+const content = {
+    padding: "40px 32px",
+};
+
+const title = {
+    fontSize: "22px",
+    fontWeight: "600",
+    color: "#fafafa",
+    marginTop: "0",
+    marginBottom: "16px",
+    textAlign: "center" as const,
+};
+
+const text = {
+    color: "#a1a1aa",
+    fontSize: "16px",
+    textAlign: "center" as const,
+    lineHeight: "1.6",
+    margin: "0 0 24px 0",
+};
+
+const buttonContainer = {
+    textAlign: "center" as const,
+    marginBottom: "32px",
+    marginTop: "32px",
+};
+
+const button = {
+    backgroundColor: "#10b981",
+    backgroundImage: "linear-gradient(to right, #34d399, #10b981)",
+    color: "#09090b",
+    fontWeight: "600",
+    textDecoration: "none",
+    padding: "14px 28px",
+    borderRadius: "8px",
+    fontSize: "16px",
+    boxShadow: "0 4px 14px 0 rgba(16, 185, 129, 0.39)",
+    display: "inline-block",
+};
+
+const divider = {
+    height: "1px",
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    margin: "32px 0 24px 0",
+    border: "none",
+    width: "100%",
+};
+
+const footer = {
+    padding: "0 32px 32px",
+    textAlign: "center" as const,
+};
+
+const footerText = {
+    margin: "0 0 8px 0",
+    fontSize: "13px",
+    color: "#71717a",
+};
+
+const link = {
+    color: "#34d399",
+    textDecoration: "none",
+};
+
+export default AccountInviteEmail;
diff --git a/src/components/invite/InviteView.tsx b/src/components/invite/InviteView.tsx
new file mode 100644
index 0000000..1656b13
--- /dev/null
+++ b/src/components/invite/InviteView.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { createClient } from "@/lib/supabase/client";
+import { useRouter, useSearchParams } from "next/navigation";
+import { GlassCard } from "@/components/ui/GlassCard";
+import { Loader2, UserPlus, CheckCircle2, ArrowRight } from "lucide-react";
+
+export function InviteView() {
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const supabase = createClient();
+
+    const email = searchParams?.get("email") || "";
+    const role = searchParams?.get("role") || "Leitor";
+    const account = searchParams?.get("account") || "Indefinida";
+
+    const [loading, setLoading] = useState(true);
+    const [userEmail, setUserEmail] = useState<string | null>(null);
+    const [accepted, setAccepted] = useState(false);
+
+    useEffect(() => {
+        let isMounted = true;
+
+        const checkAuth = async () => {
+            const {
+                data: { session },
+            } = await supabase.auth.getSession();
+
+            if (!isMounted) return;
+
+            if (!session) {
+                // Usuário não autenticado: enviamos para /auth com a query redirect_to apontando de volta pra cá
+                const currentFullParams = searchParams ? searchParams.toString() : "";
+                const inviteUrl = `/invite?${currentFullParams}`;
+                router.push(`/auth?redirect_to=${encodeURIComponent(inviteUrl)}`);
+                return;
+            }
+
+            // Autenticado: continua a renderizar o convite
+            setUserEmail(session.user.email ?? null);
+            setLoading(false);
+        };
+
+        checkAuth();
+
+        return () => {
+            isMounted = false;
+        };
+    }, [router, supabase, searchParams]);
+
+    const handleAcceptInvite = async () => {
+        setLoading(true);
+        // FIXME: Aqui entraria a chamada de API real do Supabase
+        // para inserir o registro na tabela de relacionamentos (account_users)
+        await new Promise((resolve) => setTimeout(resolve, 1500));
+        setAccepted(true);
+        setLoading(false);
+    };
+
+    if (loading) {
+        return (
+            <GlassCard className="w-full max-w-md p-8 flex flex-col items-center justify-center gap-4 min-h-[300px]">
+                <Loader2 className="w-8 h-8 text-emerald-500 animate-spin" />
+                <p className="text-zinc-400 animate-pulse">Verificando informações...</p>
+            </GlassCard>
+        );
+    }
+
+    if (accepted) {
+        return (
+            <GlassCard className="w-full max-w-md p-8 flex flex-col items-center text-center gap-6">
+                <div className="w-16 h-16 rounded-full bg-emerald-500/20 flex items-center justify-center border border-emerald-500/40">
+                    <CheckCircle2 className="w-8 h-8 text-emerald-400" />
+                </div>
+                <div>
+                    <h2 className="text-2xl font-semibold text-zinc-100 mb-2">Convite Aceito!</h2>
+                    <p className="text-zinc-400">
+                        Agora você tem acesso à conta <strong className="text-zinc-100">{account}</strong> com permissão
+                        de <strong className="text-zinc-100">{role}</strong>.
+                    </p>
+                </div>
+                <button
+                    onClick={() => router.push("/dashboard")}
+                    className="w-full py-3 bg-emerald-500 text-zinc-950 rounded-xl font-medium hover:bg-emerald-400 transition-all flex justify-center items-center gap-2 mt-4"
+                >
+                    Ir para o Dashboard <ArrowRight className="w-4 h-4" />
+                </button>
+            </GlassCard>
+        );
+    }
+
+    return (
+        <GlassCard className="w-full max-w-md p-8 flex flex-col items-center text-center gap-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
+            <div className="w-16 h-16 rounded-full bg-emerald-500/10 flex items-center justify-center border border-emerald-500/20">
+                <UserPlus className="w-8 h-8 text-emerald-400" />
+            </div>
+
+            <div className="flex flex-col gap-2">
+                <h2 className="text-2xl font-semibold text-zinc-100">Convite para Conta</h2>
+                <p className="text-zinc-400 text-sm">
+                    Você foi convidado(a) para acessar a Sincronia Doméstica desta conta no Finiza.
+                </p>
+            </div>
+
+            <div className="w-full p-4 bg-zinc-900/50 rounded-xl border border-white/5 flex flex-col gap-2 text-left">
+                <div className="flex justify-between items-center pb-2 border-b border-white/5">
+                    <span className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Conta Base</span>
+                    <span
+                        className="text-sm font-medium text-zinc-100 truncate max-w-[150px] text-right"
+                        title={account}
+                    >
+                        {account}
+                    </span>
+                </div>
+                <div className="flex justify-between items-center pt-2">
+                    <span className="text-xs font-semibold uppercase tracking-wider text-zinc-500">Sua Permissão</span>
+                    <span className="text-sm font-medium text-emerald-400">{role}</span>
+                </div>
+            </div>
+
+            {email && email !== userEmail && (
+                <div className="p-3 w-full rounded-lg bg-orange-500/10 border border-orange-500/20 text-orange-400 text-xs text-center leading-relaxed">
+                    Aviso: O convite visava <b>{email}</b>, mas você está conectando como <b>{userEmail}</b>. Ao
+                    prosseguir, o vínculo será feito ao perfil atual.
+                </div>
+            )}
+
+            <div className="flex flex-col w-full gap-3 mt-2">
+                <button
+                    onClick={handleAcceptInvite}
+                    disabled={loading}
+                    className="w-full py-3 bg-emerald-500 text-zinc-950 rounded-xl font-medium hover:bg-emerald-400 transition-all flex justify-center items-center gap-2"
+                >
+                    {loading && <Loader2 className="w-4 h-4 animate-spin" />}
+                    Aceitar e Acessar Conta
+                </button>
+                <button
+                    onClick={() => router.push("/dashboard")}
+                    className="text-sm text-zinc-500 hover:text-zinc-300 transition-colors py-2"
+                >
+                    Ignorar e ir para o Dashboard
+                </button>
+            </div>
+        </GlassCard>
+    );
+}
diff --git a/src/components/ui/AccountSlideOver.tsx b/src/components/ui/AccountSlideOver.tsx
index e50acc0..a76efe1 100644
--- a/src/components/ui/AccountSlideOver.tsx
+++ b/src/components/ui/AccountSlideOver.tsx
@@ -1,15 +1,20 @@
 import React, { useState, useEffect } from "react";
-import { X, Check, Trash2, Edit2, Zap } from "lucide-react";
+import { X, Check, Trash2, Edit2, Zap, Plus, Loader2, ChevronDown } from "lucide-react";
+import { HexColorPicker } from "react-colorful";
 import { cn } from "@/lib/utils";
+import { sendAccountInvite } from "@/app/actions/sendAccountInvite";
 
 interface AccountSlideOverProps {
     isOpen: boolean;
     onClose: () => void;
-    accountId: string;
+    accountId?: string;
     name: string;
     institution: string;
     balance: number;
     colorHex: string;
+    category?: string;
+    onUpdate?: (id: string, updates: Record<string, string | number | null>) => void;
+    onDelete?: (id: string) => void;
 }
 
 export function AccountSlideOver({
@@ -20,11 +25,63 @@ export function AccountSlideOver({
     institution,
     balance,
     colorHex,
+    category = "checking",
+    onUpdate,
+    onDelete,
 }: AccountSlideOverProps) {
+    const [tempCategory, setTempCategory] = useState(category);
+
+    useEffect(() => {
+        setTempCategory(category);
+    }, [category]);
+
     const [activeTab, setActiveTab] = useState<"ajuste" | "historico" | "config">("ajuste");
-    const [adjustedBalance, setAdjustedBalance] = useState(balance.toString());
+    const [adjustedBalance, setAdjustedBalance] = useState(() =>
+        new Intl.NumberFormat("pt-BR", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(balance),
+    );
+
+    const handleBalanceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        let value = e.target.value.replace(/\D/g, "");
+        if (value === "") value = "0";
+        const numericValue = parseInt(value, 10) / 100;
+        const formatted = new Intl.NumberFormat("pt-BR", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(numericValue);
+        setAdjustedBalance(formatted);
+    };
     const [swipeLeftId, setSwipeLeftId] = useState<string | null>(null);
 
+    const [isEditingInstitution, setIsEditingInstitution] = useState(false);
+    const [tempInstitution, setTempInstitution] = useState(institution);
+
+    const [isAddingPerson, setIsAddingPerson] = useState(false);
+    const [isInviting, setIsInviting] = useState(false);
+    const [newPersonEmail, setNewPersonEmail] = useState("");
+    const [addedPersons, setAddedPersons] = useState<{ email: string; role: string }[]>([]);
+
+    const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
+    const [actualColor, setActualColor] = useState(colorHex);
+
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
+    const handleInstitutionSave = () => {
+        setIsEditingInstitution(false);
+        if (accountId && tempInstitution !== institution && onUpdate) {
+            onUpdate(accountId, { institution: tempInstitution });
+        }
+    };
+
+    const handleColorSave = (newColor: string) => {
+        setActualColor(newColor);
+        if (accountId && newColor !== colorHex && onUpdate) {
+            onUpdate(accountId, { color_hex: newColor });
+        }
+    };
+
     useEffect(() => {
         if (isOpen) {
             document.body.style.overflow = "hidden";
@@ -50,6 +107,46 @@ export function AccountSlideOver({
         onClose();
     };
 
+    const handleInvitePerson = async () => {
+        if (!newPersonEmail) return;
+
+        setIsInviting(true);
+        try {
+            // Fake API call or connect to server action
+            const res = await sendAccountInvite({
+                email: newPersonEmail,
+                inviterName: "Você", // Default mock as the current auth user
+                accountName: name,
+                role: "Leitor",
+            });
+
+            if (res.success) {
+                // If ok, add dynamically
+                setAddedPersons((prev: { email: string; role: string }[]) => [
+                    ...prev,
+                    { email: newPersonEmail, role: "Leitor" },
+                ]);
+                setNewPersonEmail("");
+                setIsAddingPerson(false);
+            } else {
+                console.error("Failed to send invite:", res.error);
+                alert("Falha ao enviar convite. " + res.error);
+            }
+        } catch (error) {
+            console.error("Unexpected error:", error);
+            alert("Erro inesperado ao enviar convite.");
+            setIsInviting(false);
+        }
+    };
+
+    const handleDeleteAccount = () => {
+        if (accountId && onDelete) {
+            onDelete(accountId);
+        }
+        setIsDeleteModalOpen(false);
+        onClose();
+    };
+
     return (
         <>
             {/* Backdrop */}
@@ -69,15 +166,15 @@ export function AccountSlideOver({
             >
                 {/* Glow behind the sidebar */}
                 <div
-                    className="absolute -top-32 -right-32 w-64 h-64 rounded-full opacity-10 blur-[100px] pointer-events-none"
-                    style={{ backgroundColor: colorHex }}
+                    className="absolute -top-32 -right-32 w-64 h-64 rounded-full opacity-10 blur-[100px] pointer-events-none transition-colors duration-500"
+                    style={{ backgroundColor: actualColor }}
                 />
 
                 {/* Header */}
                 <div className="flex items-center justify-between p-6 border-b border-zinc-800/50">
                     <div className="flex flex-col">
                         <h2 className="text-xl font-semibold text-zinc-100">{name}</h2>
-                        <p className="text-sm text-zinc-400">{institution}</p>
+                        <p className="text-sm text-zinc-400">{tempInstitution}</p>
                     </div>
                     <button
                         onClick={onClose}
@@ -114,15 +211,15 @@ export function AccountSlideOver({
                         <div className="space-y-8 animate-in fade-in slide-in-from-right-4 duration-300">
                             <div className="text-center space-y-2">
                                 <p className="text-zinc-400 text-sm">Saldo real no app do banco</p>
-                                <div className="relative inline-block">
-                                    <span className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500 text-2xl">
-                                        R$
-                                    </span>
+                                <div className="flex items-center justify-center gap-2 max-w-full overflow-hidden">
+                                    <span className="text-zinc-500 text-2xl">R$</span>
                                     <input
-                                        type="number"
+                                        type="text"
+                                        inputMode="numeric"
                                         value={adjustedBalance}
-                                        onChange={(e) => setAdjustedBalance(e.target.value)}
-                                        className="w-full text-center text-4xl sm:text-5xl font-bold bg-transparent border-none outline-none text-zinc-100 placeholder:text-zinc-700 w-[280px]"
+                                        onChange={handleBalanceChange}
+                                        className="text-4xl sm:text-5xl font-bold bg-transparent border-none outline-none text-zinc-100 placeholder:text-zinc-700 p-0"
+                                        style={{ width: `${adjustedBalance.length || 1}ch` }}
                                     />
                                 </div>
                             </div>
@@ -159,8 +256,15 @@ export function AccountSlideOver({
                                     }}
                                 >
                                     {/* Fake background for swipe action */}
-                                    <div className="absolute inset-y-0 right-0 w-16 bg-red-500/10 border border-red-500/20 text-red-500 flex items-center justify-center rounded-r-lg">
-                                        <Trash2 size={18} />
+                                    <div
+                                        className={cn(
+                                            "absolute inset-y-0 right-4 h-full flex items-center justify-center transition-opacity duration-200",
+                                            swipeLeftId === t.id ? "opacity-100 visible" : "opacity-0 invisible",
+                                        )}
+                                    >
+                                        <button className="w-10 h-10 rounded-full bg-red-500/10 text-red-500 flex items-center justify-center hover:bg-red-500/20 transition-colors border border-red-500/20">
+                                            <Trash2 size={16} />
+                                        </button>
                                     </div>
 
                                     <div
@@ -195,6 +299,65 @@ export function AccountSlideOver({
 
                     {activeTab === "config" && (
                         <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-300">
+                            <div>
+                                <label className="text-xs text-zinc-500 uppercase tracking-wider font-semibold mb-2 block">
+                                    Tipo de Conta
+                                </label>
+                                <div className="flex bg-zinc-900 border border-zinc-800 rounded-lg focus-within:border-zinc-700 transition-colors relative">
+                                    <select
+                                        value={tempCategory}
+                                        onChange={(e) => setTempCategory(e.target.value)}
+                                        className="flex-1 bg-transparent px-4 py-3 outline-none text-zinc-100 appearance-none cursor-pointer"
+                                    >
+                                        <option value="checking" className="bg-zinc-900">
+                                            Conta Corrente
+                                        </option>
+                                        <option value="savings" className="bg-zinc-900">
+                                            Conta Poupança
+                                        </option>
+                                        <option value="credit" className="bg-zinc-900">
+                                            Cartão de Crédito
+                                        </option>
+                                        <option value="wallet" className="bg-zinc-900">
+                                            Carteira Física
+                                        </option>
+                                        <option value="vault" className="bg-zinc-900">
+                                            Cofre de Investimento
+                                        </option>
+                                    </select>
+                                    <div className="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-500 pointer-events-none">
+                                        <ChevronDown size={16} />
+                                    </div>
+                                </div>
+                            </div>
+
+                            {tempCategory === "credit" && (
+                                <div className="animate-in fade-in slide-in-from-top-2">
+                                    <label className="text-xs text-zinc-500 uppercase tracking-wider font-semibold mb-2 block">
+                                        Conta Corrente Vinculada
+                                    </label>
+                                    <div className="flex bg-zinc-900 border border-zinc-800 rounded-lg focus-within:border-zinc-700 transition-colors relative">
+                                        <select
+                                            defaultValue="1"
+                                            className="flex-1 bg-transparent px-4 py-3 outline-none text-zinc-100 appearance-none cursor-pointer"
+                                        >
+                                            <option value="1" className="bg-zinc-900 text-zinc-100">
+                                                Conta Corrente - Nubank
+                                            </option>
+                                            <option value="2" className="bg-zinc-900 text-zinc-100">
+                                                Conta Conjunta - Itaú
+                                            </option>
+                                        </select>
+                                        <div className="absolute right-4 top-1/2 -translate-y-1/2 text-zinc-500 pointer-events-none">
+                                            <ChevronDown size={16} />
+                                        </div>
+                                    </div>
+                                    <p className="text-xs text-zinc-500 mt-2">
+                                        O pagamento das faturas deste cartão será debitado desta conta no seu dashboard.
+                                    </p>
+                                </div>
+                            )}
+
                             <div>
                                 <label className="text-xs text-zinc-500 uppercase tracking-wider font-semibold mb-2 block">
                                     Nome da Conta
@@ -215,16 +378,89 @@ export function AccountSlideOver({
                                 <label className="text-xs text-zinc-500 uppercase tracking-wider font-semibold mb-2 block">
                                     Identidade Visual
                                 </label>
-                                <div className="flex gap-4 items-center">
-                                    <div
-                                        className="w-12 h-12 rounded-xl border border-zinc-800 flex items-center justify-center"
-                                        style={{ backgroundColor: `${colorHex}20` }}
-                                    >
-                                        <div className="w-6 h-6 rounded-full" style={{ backgroundColor: colorHex }} />
+                                <div className="space-y-4">
+                                    <div className="flex gap-4 items-center">
+                                        <button
+                                            onClick={() => setIsColorPickerOpen(!isColorPickerOpen)}
+                                            className="w-12 h-12 rounded-xl border border-zinc-800 flex items-center justify-center shrink-0 hover:scale-105 transition-transform"
+                                            style={{ backgroundColor: `${actualColor}20` }}
+                                        >
+                                            <div
+                                                className="w-6 h-6 rounded-full"
+                                                style={{ backgroundColor: actualColor }}
+                                            />
+                                        </button>
+                                        {isEditingInstitution ? (
+                                            <div className="flex bg-zinc-900 border border-zinc-800 rounded-lg flex-1 overflow-hidden focus-within:border-zinc-700 transition-colors animate-in fade-in slide-in-from-left-2">
+                                                <input
+                                                    type="text"
+                                                    autoFocus
+                                                    value={tempInstitution}
+                                                    onChange={(e) => setTempInstitution(e.target.value)}
+                                                    className="flex-1 bg-transparent px-3 py-2 text-sm outline-none text-zinc-100"
+                                                    placeholder="Nubank, Itaú..."
+                                                    onKeyDown={(e) => {
+                                                        if (e.key === "Enter") handleInstitutionSave();
+                                                    }}
+                                                />
+                                                <button
+                                                    onClick={handleInstitutionSave}
+                                                    className="px-3 text-primary hover:text-primary/80 bg-zinc-800/50 hover:bg-zinc-800"
+                                                >
+                                                    <Check size={16} />
+                                                </button>
+                                            </div>
+                                        ) : (
+                                            <div className="flex flex-col items-start animate-in fade-in">
+                                                <span className="text-sm text-zinc-200 font-medium">
+                                                    {tempInstitution}
+                                                </span>
+                                                <button
+                                                    onClick={() => setIsEditingInstitution(true)}
+                                                    className="text-xs text-zinc-500 hover:text-zinc-300 underline decoration-zinc-700 underline-offset-2 mt-0.5"
+                                                >
+                                                    Trocar instituição
+                                                </button>
+                                            </div>
+                                        )}
                                     </div>
-                                    <button className="text-sm text-zinc-400 hover:text-zinc-200 underline decoration-zinc-700 underline-offset-4">
-                                        Trocar instituição
-                                    </button>
+
+                                    {isColorPickerOpen && (
+                                        <div className="p-4 bg-zinc-900 border border-zinc-800 rounded-xl space-y-4 animate-in fade-in zoom-in-95">
+                                            <HexColorPicker
+                                                color={actualColor}
+                                                onChange={handleColorSave}
+                                                className="!w-full !h-40"
+                                            />
+                                            <div className="space-y-2">
+                                                <p className="text-xs text-zinc-500 font-medium">Cores rápidas</p>
+                                                <div className="flex flex-wrap gap-2">
+                                                    {[
+                                                        "#8A05BE", // Nubank Purple
+                                                        "#EC7000", // Itaú Orange
+                                                        "#10B981", // Emerald Green
+                                                        "#005CA9", // Caixa Blue
+                                                        "#FF7A00", // Inter Orange
+                                                        "#E11138", // Bradesco Red
+                                                        "#F4D03F", // Banco do Brasil Yellow
+                                                        "#34495E", // Dark Gray
+                                                    ].map((c) => (
+                                                        <button
+                                                            key={c}
+                                                            onClick={() => handleColorSave(c)}
+                                                            className={cn(
+                                                                "w-6 h-6 rounded-full transition-transform",
+                                                                actualColor === c
+                                                                    ? "ring-2 ring-zinc-400 ring-offset-2 ring-offset-zinc-900 scale-110"
+                                                                    : "hover:scale-110",
+                                                            )}
+                                                            style={{ backgroundColor: c }}
+                                                        />
+                                                    ))}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )}
                                 </div>
                             </div>
 
@@ -235,7 +471,7 @@ export function AccountSlideOver({
                                 <div className="p-4 rounded-lg bg-zinc-900 border border-zinc-800 space-y-4">
                                     <div className="flex items-center justify-between">
                                         <div className="flex items-center gap-3">
-                                            <div className="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center text-xs font-bold text-zinc-300 text-center uppercase">
+                                            <div className="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center text-xs font-bold text-zinc-300 text-center uppercase shrink-0">
                                                 EU
                                             </div>
                                             <div className="text-sm">
@@ -244,14 +480,90 @@ export function AccountSlideOver({
                                             </div>
                                         </div>
                                     </div>
-                                    <button className="text-sm text-primary hover:text-primary/80 font-medium">
-                                        + Adicionar pessoa
-                                    </button>
+
+                                    {addedPersons.map((person: { email: string; role: string }, idx: number) => (
+                                        <div
+                                            key={idx}
+                                            className="flex items-center justify-between animate-in fade-in slide-in-from-top-2"
+                                        >
+                                            <div className="flex items-center gap-3">
+                                                <div className="w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center text-xs font-bold text-zinc-400 text-center uppercase shrink-0">
+                                                    {person.email.charAt(0)}
+                                                </div>
+                                                <div className="text-sm">
+                                                    <span className="text-zinc-200">{person.email.split("@")[0]}</span>{" "}
+                                                    <span className="text-zinc-500">({person.role})</span>
+                                                </div>
+                                            </div>
+                                            <button
+                                                onClick={() =>
+                                                    setAddedPersons((prev: { email: string; role: string }[]) =>
+                                                        prev.filter(
+                                                            (_person: { email: string; role: string }, i: number) =>
+                                                                i !== idx,
+                                                        ),
+                                                    )
+                                                }
+                                                className="text-zinc-500 hover:text-red-400 p-1"
+                                            >
+                                                <X size={14} />
+                                            </button>
+                                        </div>
+                                    ))}
+
+                                    {isAddingPerson ? (
+                                        <div className="flex gap-2 animate-in fade-in zoom-in-95 duration-200 mt-2">
+                                            <div className="flex bg-zinc-950 border border-zinc-800 rounded-lg flex-1 overflow-hidden focus-within:border-zinc-700 transition-colors">
+                                                <input
+                                                    type="email"
+                                                    autoFocus
+                                                    value={newPersonEmail}
+                                                    onChange={(e) => setNewPersonEmail(e.target.value)}
+                                                    placeholder="E-mail do convidado..."
+                                                    className="flex-1 bg-transparent px-3 py-2 text-sm outline-none text-zinc-100 placeholder:text-zinc-700"
+                                                    disabled={isInviting}
+                                                    onKeyDown={(e) => {
+                                                        if (e.key === "Enter" && newPersonEmail && !isInviting) {
+                                                            handleInvitePerson();
+                                                        }
+                                                    }}
+                                                />
+                                            </div>
+                                            <button
+                                                onClick={handleInvitePerson}
+                                                disabled={isInviting || !newPersonEmail}
+                                                className="px-3 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors flex items-center justify-center shrink-0 disabled:opacity-50"
+                                            >
+                                                {isInviting ? (
+                                                    <Loader2 size={16} className="animate-spin" />
+                                                ) : (
+                                                    <Check size={16} />
+                                                )}
+                                            </button>
+                                            <button
+                                                onClick={() => setIsAddingPerson(false)}
+                                                disabled={isInviting}
+                                                className="px-3 py-2 bg-zinc-800 text-zinc-300 rounded-lg hover:bg-zinc-700 transition-colors flex items-center justify-center shrink-0 disabled:opacity-50"
+                                            >
+                                                <X size={16} />
+                                            </button>
+                                        </div>
+                                    ) : (
+                                        <button
+                                            onClick={() => setIsAddingPerson(true)}
+                                            className="text-sm text-primary hover:text-primary/80 font-medium flex items-center gap-1.5 mt-2"
+                                        >
+                                            <Plus size={16} /> Adicionar pessoa
+                                        </button>
+                                    )}
                                 </div>
                             </div>
 
                             <div className="pt-6 border-t border-zinc-800/50">
-                                <button className="text-sm text-red-400 hover:text-red-300 font-medium w-full text-left flex items-center gap-2">
+                                <button
+                                    onClick={() => setIsDeleteModalOpen(true)}
+                                    className="text-sm text-red-400 hover:text-red-300 font-medium w-full text-left flex items-center gap-2"
+                                >
                                     <Trash2 size={16} /> Deletar Conta e Histórico
                                 </button>
                             </div>
@@ -259,6 +571,38 @@ export function AccountSlideOver({
                     )}
                 </div>
             </div>
+
+            {/* Delete Confirmation Modal */}
+            {isDeleteModalOpen && (
+                <div className="fixed inset-0 z-[80] flex items-center justify-center p-4 bg-zinc-950/80 backdrop-blur-sm">
+                    <div className="bg-zinc-900 border border-zinc-800 p-6 rounded-2xl w-full max-w-sm shadow-2xl animate-in fade-in zoom-in-95 duration-200">
+                        <div className="mb-6">
+                            <div className="w-12 h-12 rounded-full bg-red-500/10 text-red-500 flex items-center justify-center mb-4">
+                                <Trash2 size={24} />
+                            </div>
+                            <h3 className="text-xl font-bold text-zinc-100 mb-2">Excluir Conta</h3>
+                            <p className="text-sm text-zinc-400">
+                                Tem certeza que deseja excluir a conta <strong className="text-zinc-200">{name}</strong>
+                                ? Esta ação apagará todo o histórico de movimentações e não pode ser desfeita.
+                            </p>
+                        </div>
+                        <div className="flex gap-3">
+                            <button
+                                onClick={() => setIsDeleteModalOpen(false)}
+                                className="flex-1 py-3 px-4 rounded-xl bg-zinc-800 text-zinc-200 font-medium hover:bg-zinc-700 transition-colors"
+                            >
+                                Cancelar
+                            </button>
+                            <button
+                                onClick={handleDeleteAccount}
+                                className="flex-1 py-3 px-4 rounded-xl bg-red-500 text-white font-medium hover:bg-red-600 transition-colors shadow-[0_0_15px_rgba(239,68,68,0.3)] hover:shadow-[0_0_20px_rgba(239,68,68,0.4)]"
+                            >
+                                Excluir Conta
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
         </>
     );
 }
diff --git a/src/components/ui/CreateAccountModal.tsx b/src/components/ui/CreateAccountModal.tsx
new file mode 100644
index 0000000..f3c7cb1
--- /dev/null
+++ b/src/components/ui/CreateAccountModal.tsx
@@ -0,0 +1,263 @@
+import React, { useState } from "react";
+import { X, Check, Aperture } from "lucide-react";
+import { HexColorPicker } from "react-colorful";
+import { cn } from "@/lib/utils";
+
+interface CreateAccountModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    onCreate: (account: any) => void;
+}
+
+const CATEGORIES = [
+    { value: "checking", label: "Conta Corrente" },
+    { value: "savings", label: "Conta Poupança" },
+    { value: "wallet", label: "Carteira (Dinheiro)" },
+    { value: "vault", label: "Cofre / Investimento" },
+    { value: "credit", label: "Cartão de Crédito" },
+];
+
+const COLORS = [
+    "#8A05BE", // Nubank Purple
+    "#EC7000", // Itaú Orange
+    "#10B981", // Emerald Green
+    "#005CA9", // Caixa Blue
+    "#FF7A00", // Inter Orange
+    "#E11138", // Bradesco Red
+    "#F4D03F", // Banco do Brasil Yellow
+    "#34495E", // Dark Gray
+];
+
+export function CreateAccountModal({ isOpen, onClose, onCreate }: CreateAccountModalProps) {
+    const [name, setName] = useState("");
+    const [institution, setInstitution] = useState("");
+    const [category, setCategory] = useState<"checking" | "savings" | "wallet" | "vault" | "credit">("checking");
+    const [colorHex, setColorHex] = useState(COLORS[0]);
+    const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
+    const [initialBalance, setInitialBalance] = useState("");
+
+    // Credit specific fields
+    const [creditLimit, setCreditLimit] = useState("");
+    const [creditClosingDays, setCreditClosingDays] = useState("5");
+
+    if (!isOpen) return null;
+
+    const handleBalanceChange = (e: React.ChangeEvent<HTMLInputElement>, setter: (val: string) => void) => {
+        const value = e.target.value.replace(/\D/g, "");
+        if (!value) {
+            setter("");
+            return;
+        }
+        const numericValue = parseInt(value, 10) / 100;
+        const formatted = new Intl.NumberFormat("pt-BR", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(numericValue);
+        setter(formatted);
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+
+        const parseValue = (val: string) => parseFloat(val.replace(/\./g, "").replace(",", ".")) || 0;
+
+        const balanceNum = parseValue(initialBalance);
+        const creditLimitNum = category === "credit" ? parseValue(creditLimit) : undefined;
+        const closingDaysNum = category === "credit" ? parseInt(creditClosingDays) || 0 : undefined;
+
+        const newAccount = {
+            id: Math.random().toString(36).substring(7),
+            name,
+            institution,
+            category,
+            colorHex,
+            balance: category === "credit" ? 0 : balanceNum, // Balance is 0 for credit card, "balance" here acts as total limit maybe, but we use creditUsed instead
+            creditLimit: creditLimitNum,
+            creditUsed: category === "credit" ? 0 : undefined,
+            creditClosingDays: closingDaysNum,
+            lastSyncedAt: new Date(),
+            members: [{ id: "u1", name: "Você", role: "owner" }],
+            initialTransactionAmount: category !== "credit" ? balanceNum : 0, // Useful for creating the initial transaction
+        };
+
+        onCreate(newAccount);
+        onClose();
+    };
+
+    return (
+        <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-zinc-950/80 backdrop-blur-sm overflow-y-auto">
+            <div className="bg-zinc-900 border border-zinc-800 p-6 rounded-3xl w-full max-w-lg shadow-2xl animate-in fade-in zoom-in-95 duration-200 my-8">
+                <div className="flex justify-between items-center mb-6">
+                    <div>
+                        <h3 className="text-xl font-bold text-zinc-100">Nova Conta</h3>
+                        <p className="text-sm text-zinc-400">Adicione uma nova conta ou cartão ao seu painel.</p>
+                    </div>
+                    <button onClick={onClose} className="text-zinc-500 hover:text-zinc-300 transition-colors">
+                        <X size={24} />
+                    </button>
+                </div>
+
+                <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+                    <div className="grid grid-cols-2 gap-4">
+                        <div className="flex flex-col gap-2">
+                            <label className="text-sm font-medium text-zinc-400">Nome da Conta</label>
+                            <input
+                                type="text"
+                                required
+                                value={name}
+                                onChange={(e) => setName(e.target.value)}
+                                placeholder="ex: Conta Nu"
+                                className="w-full bg-zinc-950 border border-zinc-800 rounded-xl px-4 py-3 text-zinc-100 placeholder:text-zinc-700 outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/50 transition-all"
+                            />
+                        </div>
+                        <div className="flex flex-col gap-2">
+                            <label className="text-sm font-medium text-zinc-400">Instituição</label>
+                            <input
+                                type="text"
+                                required
+                                value={institution}
+                                onChange={(e) => setInstitution(e.target.value)}
+                                placeholder="ex: Nubank"
+                                className="w-full bg-zinc-950 border border-zinc-800 rounded-xl px-4 py-3 text-zinc-100 placeholder:text-zinc-700 outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/50 transition-all"
+                            />
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col gap-2">
+                        <label className="text-sm font-medium text-zinc-400">Tipo de Conta</label>
+                        <select
+                            value={category}
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            onChange={(e) => setCategory(e.target.value as any)}
+                            className="w-full bg-zinc-950 border border-zinc-800 rounded-xl px-4 py-3 text-zinc-100 outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/50 transition-all appearance-none"
+                        >
+                            {CATEGORIES.map((cat) => (
+                                <option key={cat.value} value={cat.value}>
+                                    {cat.label}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+
+                    <div className="flex flex-col gap-2 relative">
+                        <label className="text-sm font-medium text-zinc-400">Cor de Identificação</label>
+                        <div className="flex flex-wrap gap-3">
+                            {COLORS.map((color) => (
+                                <button
+                                    key={color}
+                                    type="button"
+                                    onClick={() => {
+                                        setColorHex(color);
+                                        setIsColorPickerOpen(false);
+                                    }}
+                                    className={cn(
+                                        "w-10 h-10 rounded-full flex items-center justify-center transition-all",
+                                        colorHex === color && !isColorPickerOpen
+                                            ? "ring-2 ring-offset-2 ring-offset-zinc-900 ring-zinc-100 scale-110"
+                                            : "hover:scale-110",
+                                    )}
+                                    style={{ backgroundColor: color }}
+                                >
+                                    {colorHex === color && !isColorPickerOpen && (
+                                        <Check size={16} className="text-white mix-blend-difference" />
+                                    )}
+                                </button>
+                            ))}
+                            <button
+                                type="button"
+                                onClick={() => setIsColorPickerOpen(!isColorPickerOpen)}
+                                className={cn(
+                                    "w-10 h-10 rounded-full flex items-center justify-center transition-all bg-zinc-900 border border-zinc-800",
+                                    isColorPickerOpen || !COLORS.includes(colorHex)
+                                        ? "ring-2 ring-offset-2 ring-offset-zinc-900 ring-zinc-100 scale-110"
+                                        : "hover:scale-110",
+                                )}
+                                style={
+                                    !COLORS.includes(colorHex) && !isColorPickerOpen
+                                        ? { backgroundColor: colorHex }
+                                        : {}
+                                }
+                            >
+                                <Aperture
+                                    strokeWidth={1.5}
+                                    size={20}
+                                    className={cn(
+                                        "text-zinc-400",
+                                        !COLORS.includes(colorHex) && !isColorPickerOpen
+                                            ? "text-white mix-blend-difference"
+                                            : "",
+                                    )}
+                                />
+                            </button>
+                        </div>
+                        {isColorPickerOpen && (
+                            <div className="absolute top-full left-0 mt-3 p-4 bg-zinc-900 border border-zinc-800 rounded-2xl shadow-xl z-50 animate-in fade-in zoom-in-95">
+                                <HexColorPicker color={colorHex} onChange={setColorHex} className="!w-48 !h-48" />
+                            </div>
+                        )}
+                    </div>
+
+                    {category === "credit" ? (
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="flex flex-col gap-2">
+                                <label className="text-sm font-medium text-zinc-400">Limite de Crédito</label>
+                                <div className="relative">
+                                    <span className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">R$</span>
+                                    <input
+                                        type="text"
+                                        required
+                                        inputMode="numeric"
+                                        value={creditLimit}
+                                        onChange={(e) => handleBalanceChange(e, setCreditLimit)}
+                                        placeholder="0,00"
+                                        className="w-full bg-zinc-950 border border-zinc-800 rounded-xl pl-10 pr-4 py-3 text-zinc-100 outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/50 transition-all"
+                                    />
+                                </div>
+                            </div>
+                            <div className="flex flex-col gap-2">
+                                <label className="text-sm font-medium text-zinc-400">Dias para Fechar Fatura</label>
+                                <input
+                                    type="number"
+                                    required
+                                    min="1"
+                                    max="31"
+                                    value={creditClosingDays}
+                                    onChange={(e) => setCreditClosingDays(e.target.value)}
+                                    placeholder="ex: 5"
+                                    className="w-full bg-zinc-950 border border-zinc-800 rounded-xl px-4 py-3 text-zinc-100 outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/50 transition-all"
+                                />
+                            </div>
+                        </div>
+                    ) : (
+                        <div className="flex flex-col gap-2">
+                            <label className="text-sm font-medium text-zinc-400">Saldo Inicial</label>
+                            <div className="relative">
+                                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-500">R$</span>
+                                <input
+                                    type="text"
+                                    inputMode="numeric"
+                                    value={initialBalance}
+                                    onChange={(e) => handleBalanceChange(e, setInitialBalance)}
+                                    placeholder="0,00"
+                                    className="w-full bg-zinc-950 border border-zinc-800 rounded-xl pl-10 pr-4 py-3 text-zinc-100 outline-none focus:border-primary/50 focus:ring-1 focus:ring-primary/50 transition-all"
+                                />
+                            </div>
+                            <p className="text-xs text-zinc-500">Isso criará uma transação de lançamento inicial.</p>
+                        </div>
+                    )}
+
+                    <div className="pt-4 mt-2 border-t border-zinc-800">
+                        <button
+                            type="submit"
+                            disabled={!name || !institution}
+                            className="w-full py-4 rounded-xl bg-primary text-primary-foreground font-semibold disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary/90 transition-colors shadow-[0_0_20px_rgba(34,197,94,0.2)] hover:shadow-[0_0_30px_rgba(34,197,94,0.4)]"
+                        >
+                            Criar Conta
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
diff --git a/src/components/ui/InstallPrompt.tsx b/src/components/ui/InstallPrompt.tsx
index f2061b5..c2624bb 100644
--- a/src/components/ui/InstallPrompt.tsx
+++ b/src/components/ui/InstallPrompt.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Download, X } from "lucide-react";
+import { X } from "lucide-react";
 import { FinizaIcon } from "./FinizaIcon";
 
 interface BeforeInstallPromptEvent extends Event {
@@ -26,7 +26,10 @@ export function InstallPrompt() {
         const handleBeforeInstallPrompt = (e: Event) => {
             e.preventDefault();
             setDeferredPrompt(e as BeforeInstallPromptEvent);
-            setShowPrompt(true);
+            if (!sessionStorage.getItem("installPromptShown")) {
+                setShowPrompt(true);
+                sessionStorage.setItem("installPromptShown", "true");
+            }
         };
 
         window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
@@ -39,8 +42,13 @@ export function InstallPrompt() {
 
     useEffect(() => {
         if (isIOS && !isStandalone) {
-            const timer = setTimeout(() => setShowPrompt(true), 3000);
-            return () => clearTimeout(timer);
+            if (!sessionStorage.getItem("installPromptShown")) {
+                const timer = setTimeout(() => {
+                    setShowPrompt(true);
+                    sessionStorage.setItem("installPromptShown", "true");
+                }, 3000);
+                return () => clearTimeout(timer);
+            }
         }
     }, [isIOS, isStandalone]);
 
diff --git a/src/components/ui/PageHeader.tsx b/src/components/ui/PageHeader.tsx
new file mode 100644
index 0000000..cdf46ad
--- /dev/null
+++ b/src/components/ui/PageHeader.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+interface PageHeaderProps {
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    badge?: React.ReactNode;
+    children?: React.ReactNode;
+    action?: React.ReactNode;
+    className?: string;
+}
+
+export function PageHeader({ title, subtitle, badge, children, action, className }: PageHeaderProps) {
+    return (
+        <div className={cn("flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12", className)}>
+            <div className="flex flex-col gap-1">
+                {subtitle && <p className="text-zinc-400 font-medium">{subtitle}</p>}
+
+                <div className="flex items-baseline gap-3">
+                    <h1 className="text-4xl md:text-5xl font-bold text-zinc-50 tracking-tight">{title}</h1>
+                    {badge && (
+                        <span className="text-xs text-zinc-500 bg-zinc-900/50 px-2 py-1 rounded-md border border-zinc-800 shrink-0">
+                            {badge}
+                        </span>
+                    )}
+                </div>
+
+                {children && <div className="mt-4">{children}</div>}
+            </div>
+
+            {action && <div className="w-full md:w-auto shrink-0">{action}</div>}
+        </div>
+    );
+}
diff --git a/src/lib/supabase/server.ts b/src/lib/supabase/server.ts
index e69de29..495f9bf 100644
--- a/src/lib/supabase/server.ts
+++ b/src/lib/supabase/server.ts
@@ -0,0 +1,22 @@
+import { createServerClient } from "@supabase/ssr";
+import { cookies } from "next/headers";
+
+export async function createClient() {
+    const cookieStore = await cookies();
+
+    return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
+        cookies: {
+            getAll() {
+                return cookieStore.getAll();
+            },
+            setAll(cookiesToSet) {
+                try {
+                    cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options));
+                } catch {
+                    // The `setAll` method was called from a Server Component.
+                    // This can be ignored if you have middleware refreshing user sessions.
+                }
+            },
+        },
+    });
+}
diff --git a/supabase/migrations/20260227230000_add_account_insert_policies.sql b/supabase/migrations/20260227230000_add_account_insert_policies.sql
new file mode 100644
index 0000000..6d7cedd
--- /dev/null
+++ b/supabase/migrations/20260227230000_add_account_insert_policies.sql
@@ -0,0 +1,38 @@
+CREATE OR REPLACE FUNCTION public.handle_new_account() 
+RETURNS TRIGGER AS $$
+BEGIN
+  INSERT INTO public.account_members (account_id, user_id, role)
+  VALUES (NEW.id, auth.uid(), 'owner');
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql SECURITY DEFINER;
+
+CREATE TRIGGER on_account_created
+  AFTER INSERT ON public.accounts
+  FOR EACH ROW EXECUTE PROCEDURE public.handle_new_account();
+
+CREATE POLICY "contas_insercao_permitida" ON accounts 
+  FOR INSERT WITH CHECK (auth.uid() IS NOT NULL);
+
+CREATE POLICY "membros_insercao_permitida" ON account_members
+  FOR INSERT WITH CHECK (auth.uid() IS NOT NULL);
+
+CREATE POLICY "membros_modificacao_restrita" ON account_members
+  FOR UPDATE USING (
+    EXISTS (
+      SELECT 1 FROM account_members am
+      WHERE am.account_id = account_members.account_id 
+      AND am.user_id = auth.uid() 
+      AND am.role = 'owner'
+    )
+  );
+
+CREATE POLICY "membros_eliminacao_proprietario" ON account_members
+  FOR DELETE USING (
+    EXISTS (
+      SELECT 1 FROM account_members am
+      WHERE am.account_id = account_members.account_id 
+      AND am.user_id = auth.uid() 
+      AND am.role = 'owner'
+    )
+  );