diff --git a/apps/registry/app/[username]/ProfileLayout.js b/apps/registry/app/[username]/ProfileLayout.js
index b082c614..17345829 100644
--- a/apps/registry/app/[username]/ProfileLayout.js
+++ b/apps/registry/app/[username]/ProfileLayout.js
@@ -7,6 +7,7 @@ import Link from 'next/link';
 import { ProfileProvider } from './ProfileContext';
 import gravatar from 'gravatar';
 import { MapPin } from 'lucide-react';
+import { Button } from '@repo/ui/components/ui/button';
 
 export default function Layout({ children, resume, username, session }) {
   const router = useRouter();
@@ -47,7 +48,7 @@ export default function Layout({ children, resume, username, session }) {
                 {resume.basics.label}
               </p>
               <div className="flex items-center mb-2 text-sm text-gray-500">
-                <MapPin className="w-4 h-4 mr-1 text-secondary-500" />
+                <MapPin className="w-4 h-4 mr-1 text-primary" />
                 <span>
                   {resume.basics.location.countryCode ||
                     'Location not available'}
@@ -55,24 +56,20 @@ export default function Layout({ children, resume, username, session }) {
               </div>
               <a
                 href={`mailto:${resume.basics.email}`}
-                className="mb-4 text-sm text-secondary-500 hover:underline"
+                className="mb-4 text-sm text-primary hover:underline"
               >
                 {resume.basics.email}
               </a>
               <div className="flex flex-col items-center mt-4 space-y-2">
                 <a href={`/${username}`} target="_blank">
-                  <button className="bg-secondary-100 text-secondary-800 py-2 px-4 rounded hover:bg-secondary-200 transition-colors duration-200">
-                    View Resume
-                  </button>
+                  <Button>View Resume</Button>
                 </a>
               </div>
+              <br />
               {session && (
-                <button
-                  onClick={() => router.push('/editor')}
-                  className="mt-4 bg-secondary-500 text-white py-2 px-4 rounded hover:bg-secondary-700 transition-colors duration-200"
-                >
+                <Button onClick={() => router.push('/editor')}>
                   Edit Resume
-                </button>
+                </Button>
               )}
             </div>
           </div>
@@ -84,8 +81,8 @@ export default function Layout({ children, resume, username, session }) {
                 <span
                   className={`text-gray-700 hover:text-gray-900 py-2 px-4 rounded-full ${
                     pathname === link.href
-                      ? 'bg-secondary-500 text-white'
-                      : 'bg-secondary-100 hover:bg-secondary-200'
+                      ? 'bg-primary text-white'
+                      : 'bg-secondary-light hover:bg-secondary'
                   } transition-colors duration-200`}
                 >
                   {link.label}
diff --git a/apps/registry/app/components/ResumeEditor.js b/apps/registry/app/components/ResumeEditor.js
index 34125d6f..c930a6d9 100644
--- a/apps/registry/app/components/ResumeEditor.js
+++ b/apps/registry/app/components/ResumeEditor.js
@@ -5,7 +5,7 @@ import { useRef, useEffect, useState } from 'react';
 // import { render } from '../../../../themes/stackoverflow/dist';
 import { render } from '../../../../packages/jsonresume-theme-professional';
 import Button from './Button/Button';
-import Link from '@jsonresume/ui/Link';
+import Link from 'next/link';
 import schema from './schema';
 
 const HtmlIframe = ({ htmlString }) => {
diff --git a/apps/registry/app/components/SignIn.js b/apps/registry/app/components/SignIn.js
index a5deeac8..f34f46f8 100644
--- a/apps/registry/app/components/SignIn.js
+++ b/apps/registry/app/components/SignIn.js
@@ -5,11 +5,6 @@ import { Button } from '@repo/ui/components/ui/button';
 export default function SignIn() {
   return (
     <div className="text-lg m-8 w-[400px] mx-auto p-8 bg-white rounded-lg shadow-md">
-      <Button>Click me</Button>
-
-      <Button variant="destructive" disabled>
-        Destructive
-      </Button>
       <div className="mb-6 text-gray-700">
         <p>
           Welcome to the JSON Resume Registry! Seamlessly sync your resume.json
@@ -31,12 +26,9 @@ export default function SignIn() {
           await signIn('github');
         }}
       >
-        <button
-          type="submit"
-          className="w-full py-3 px-4 bg-secondary-600 text-white rounded-md flex items-center justify-center hover:bg-secondary-700 transition-colors duration-200"
-        >
+        <Button type="submit">
           <Github size={20} className="mr-2" /> Sign in with GitHub
-        </button>
+        </Button>
       </form>
       <div className="mt-8 text-gray-500">
         <h3 className="text-gray-800 mb-3 text-xl">Upcoming Features</h3>
diff --git a/apps/registry/package.json b/apps/registry/package.json
index a33b3d73..28419917 100644
--- a/apps/registry/package.json
+++ b/apps/registry/package.json
@@ -17,10 +17,10 @@
     "@jsonresume/schema": "^1.2.0",
     "@jsonresume/theme-papirus": "workspace:*",
     "@jsonresume/theme-stackoverflow": "workspace:*",
-    "@repo/ui": "workspace:*",
     "@monaco-editor/react": "^4.6.0",
     "@pinecone-database/pinecone": "^0.1.6",
     "@prisma/client": "^4.15.0",
+    "@repo/ui": "workspace:*",
     "@supabase/supabase-js": "^2.39.6",
     "@tailwindcss/typography": "^0.5.13",
     "@vercel/analytics": "^1.3.1",
@@ -103,19 +103,20 @@
     "react-markdown": "^8.0.7",
     "react-speech-recognition": "^3.10.0",
     "resume-schema": "^1.0.0",
+    "sonner": "^1.5.0",
     "styled-components": "6.1.11",
     "tailwindcss": "^3.4.3",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.40.0",
+    "@repo/eslint-config-custom": "workspace:*",
     "@types/node": "^20.10.0",
     "caniuse-lite": "^1.0.30001566",
     "eslint": "^8.55.0",
-    "@repo/eslint-config-custom": "workspace:*",
-    "tsconfig": "workspace:*",
     "eslint-config-next": "^14.2.5",
     "playwright": "^1.40.0",
+    "tsconfig": "workspace:*",
     "typescript": "^5.3.2"
   }
 }
diff --git a/packages/ui/components.json b/packages/ui/components.json
index 71921148..d2191f60 100644
--- a/packages/ui/components.json
+++ b/packages/ui/components.json
@@ -6,7 +6,7 @@
   "tailwind": {
     "config": "tailwind.config.ts",
     "css": "src/globals.css",
-    "baseColor": "slate",
+    "baseColor": "yellow",
     "cssVariables": true,
     "prefix": ""
   },
diff --git a/packages/ui/src/components/ui/card.tsx b/packages/ui/src/components/ui/card.tsx
new file mode 100644
index 00000000..543bd117
--- /dev/null
+++ b/packages/ui/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@repo/ui/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css
index 6a67af6a..e808c10e 100644
--- a/packages/ui/src/globals.css
+++ b/packages/ui/src/globals.css
@@ -77,4 +77,5 @@
 
 html, body {
   font-family: 'Open Sans', sans-serif;
+  font-size: 12px;
 }
\ No newline at end of file
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
index 1e0f4952..f6d4d4c3 100644
--- a/packages/ui/tailwind.config.js
+++ b/packages/ui/tailwind.config.js
@@ -3,11 +3,11 @@ import tailwindcssAnimate from 'tailwindcss-animate';
 const config = {
   darkMode: ['class'],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-    '../../packages/ui/src/**/*.{ts,tsx}',
+    './pages/**/*.{js,jsx,ts,tsx}',
+    './components/**/*.{js,jsx,ts,tsx}',
+    './app/**/*.{js,jsx,ts,tsx}',
+    './src/**/*.{js,jsx,ts,tsx}',
+    '../../packages/ui/src/**/*.{js,jsx,ts,tsx}',
   ],
   prefix: '',
   theme: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 37674ca0..18f3deed 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -453,6 +453,9 @@ importers:
       resume-schema:
         specifier: ^1.0.0
         version: 1.0.0
+      sonner:
+        specifier: ^1.5.0
+        version: 1.5.0(react-dom@18.3.1)(react@18.3.1)
       styled-components:
         specifier: 6.1.11
         version: 6.1.11(react-dom@18.3.1)(react@18.3.1)