diff --git a/src/app/page.tsx b/src/app/page.tsx
index 95a31c9..2d050e4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,15 +3,15 @@ import { MetaForm } from "@/components/meta-form";
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[1fr_auto] items-center justify-items-center min-h-screen p-4 sm:p-8 font-[family-name:var(--font-geist-sans)] bg-gray-50 dark:bg-gray-900">
+    <div className="grid grid-rows-[1fr_auto] items-center justify-items-center min-h-screen p-4 sm:p-8 font-[family-name:var(--font-geist-sans)] bg-background">
       <main className="flex flex-col gap-8 row-start-1 items-center w-full max-w-2xl">
         <div className="text-center space-y-2">
-          <h1 className="text-3xl sm:text-4xl font-bold text-gray-800 dark:text-white">
+          <h1 className="text-3xl sm:text-4xl font-bold text-foreground">
             Meta Tag Extractor
           </h1>
-          <p className="text-gray-600 dark:text-gray-300">
+          <p className="text-muted-foreground">
             Enter a URL to extract its meta title and description.
-          </p>
+          p>
         </div>
         <MetaForm />
       </main>
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 5de3418..b9d54b1 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -4,7 +4,7 @@ export const Footer = () => {
   return (
     <footer className="w-full max-w-2xl p-4 row-start-2">
       <div className="flex justify-between items-center">
-        <p className="text-sm text-gray-500 dark:text-gray-400">
+        <p className="text-sm text-muted-foreground">
           v0.1.0
         </p>
         <ThemeToggle />
diff --git a/src/components/meta-form.tsx b/src/components/meta-form.tsx
index 586bba7..f5dcfed 100644
--- a/src/components/meta-form.tsx
+++ b/src/components/meta-form.tsx
@@ -41,7 +41,7 @@ export function MetaForm() {
     <div className="w-full space-y-6">
       <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row items-center gap-3">
         <div className="relative w-full">
-          <Globe className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" />
+          <Globe className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
           <Input
             name="url"
             type="url"
@@ -56,9 +56,9 @@ export function MetaForm() {
       </form>
 
       {error && (
-        <Card className="bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-500/30">
+        <Card className="border-destructive bg-destructive/10">
           <CardContent className="p-4">
-            <p className="text-red-600 dark:text-red-400 text-center">{error}</p>
+            <p className="text-destructive text-center">{error}</p>
           </CardContent>
         </Card>
       )}
@@ -66,18 +66,18 @@ export function MetaForm() {
       {metaData && (
         <Card className="w-full shadow-lg rounded-lg">
           <CardHeader>
-            <CardTitle className="text-xl text-gray-800 dark:text-white">Extraction Results</CardTitle>
+            <CardTitle className="text-xl text-card-foreground">Extraction Results</CardTitle>
           </CardHeader>
           <CardContent className="space-y-4">
             <div>
-              <h3 className="font-semibold text-gray-700 dark:text-gray-300">Meta Title</h3>
-              <p className="text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 p-3 rounded-md mt-1">
+              <h3 className="font-semibold text-card-foreground">Meta Title</h3>
+              <p className="text-muted-foreground bg-muted p-3 rounded-md mt-1">
                 {metaData.title || "Not found"}
               </p>
             </div>
             <div>
-              <h3 className="font-semibold text-gray-700 dark:text-gray-300">Meta Description</h3>
-              <p className="text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 p-3 rounded-md mt-1">
+              <h3 className="font-semibold text-card-foreground">Meta Description</h3>
+              <p className="text-muted-foreground bg-muted p-3 rounded-md mt-1">
                 {metaData.description || "Not found"}
               </p>
             </div>