diff --git a/.vscode/settings.json b/.vscode/settings.json
index 8aad976..30a46fb 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
   "css.lint.unknownAtRules": "ignore",
-  "cSpell.words": ["nextjs", "signup"]
+  "cSpell.words": ["conve", "nextjs", "signup"]
 }
diff --git a/src/app/account/[[...account]]/page.tsx b/src/app/account/[[...account]]/page.tsx
index b468c61..af51cee 100644
--- a/src/app/account/[[...account]]/page.tsx
+++ b/src/app/account/[[...account]]/page.tsx
@@ -3,7 +3,13 @@ import { UserProfile } from '@clerk/nextjs';
 export default function AccountPage() {
   return (
     <main className='flex flex-col items-center'>
-      <UserProfile />
+      <UserProfile
+        appearance={{
+          elements: {
+            card: 'shadow-md',
+          },
+        }}
+      />
     </main>
   );
 }
diff --git a/src/app/signup/[[...signup]]/page.tsx b/src/app/signup/[[...signup]]/page.tsx
index 5715451..1c38b2f 100644
--- a/src/app/signup/[[...signup]]/page.tsx
+++ b/src/app/signup/[[...signup]]/page.tsx
@@ -3,7 +3,13 @@ import { SignUp } from '@clerk/nextjs';
 export default function SignUpPage() {
   return (
     <main className='flex flex-col items-center'>
-      <SignUp />
+      <SignUp
+        appearance={{
+          elements: {
+            card: 'shadow-md',
+          },
+        }}
+      />
     </main>
   );
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index d82212f..b6d5d73 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -4,7 +4,14 @@ import Link from 'next/link';
 export default function Navbar() {
   return (
     <nav className='flex items-center justify-between p-5 shadow-md'>
-      <ul className='flex items-center gap-4'></ul>
+      <ul className='flex items-center gap-4'>
+        <li>
+          conve
+          <span className='font-bold italic text-4xl text-primary-accent'>
+            X
+          </span>
+        </li>
+      </ul>
       <ul className='flex items-center gap-4'>
         <SignedIn>
           <li>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b48a652..fda34da 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -7,7 +7,11 @@ const config: Config = {
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'primary-accent': '#3743e5',
+      },
+    },
   },
   plugins: [],
 };