diff --git a/app/dashboard/career/[id]/client-page.tsx b/app/dashboard/career/[id]/client-page.tsx
new file mode 100644
index 0000000..c7e4ff5
--- /dev/null
+++ b/app/dashboard/career/[id]/client-page.tsx
@@ -0,0 +1,353 @@
+"use client"
+
+import type React from "react"
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import Link from "next/link"
+import { ArrowLeft } from "lucide-react"
+
+import { AnimatedList } from "@/components/animated-list"
+import { AnimatedSection } from "@/components/animated-section"
+import { DashboardHeader } from "@/components/dashboard-header"
+import { FileUpload } from "@/components/file-upload"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { useToast } from "@/components/ui/use-toast"
+
+interface EditCareerPageClientProps {
+  id?: string
+}
+
+interface CareerEntry {
+  id: string
+  position: string
+  company: string
+  startDate: string
+  endDate: string
+  description: string
+  location?: string | null
+  logoUrl?: string | null
+}
+
+export default function EditCareerPageClient({ id }: EditCareerPageClientProps) {
+  const router = useRouter()
+  const { toast } = useToast()
+  const [isLoading, setIsLoading] = useState(true)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [careerEntry, setCareerEntry] = useState<CareerEntry | null>(null)
+  const [isPresentPosition, setIsPresentPosition] = useState(false)
+  const [logoUrl, setLogoUrl] = useState("")
+
+  useEffect(() => {
+    if (id) {
+      return
+    }
+
+    console.error("Missing career id in route params")
+    toast({
+      title: "Invalid route",
+      description: "The career entry identifier is missing from the URL.",
+      variant: "destructive",
+    })
+    setIsLoading(false)
+  }, [id, toast])
+
+  useEffect(() => {
+    if (!id) {
+      return
+    }
+
+    async function fetchCareerEntry() {
+      try {
+        const response = await fetch(`/api/career/${id}`)
+
+        if (!response.ok) {
+          throw new Error("Failed to fetch career entry")
+        }
+
+        const data: { career: CareerEntry } = await response.json()
+        setCareerEntry(data.career)
+        setIsPresentPosition(data.career.endDate === "Present")
+        setLogoUrl(data.career.logoUrl || "")
+      } catch (error) {
+        console.error("Error fetching career entry:", error)
+        toast({
+          title: "Error",
+          description: "Failed to load career entry details",
+          variant: "destructive",
+        })
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchCareerEntry()
+  }, [id, toast])
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setIsSubmitting(true)
+
+    if (!id) {
+      toast({
+        title: "Missing career entry",
+        description: "We couldn't determine which career entry should be updated.",
+        variant: "destructive",
+      })
+      setIsSubmitting(false)
+      return
+    }
+
+    const formData = new FormData(event.currentTarget)
+    const position = formData.get("position") as string
+    const company = formData.get("company") as string
+    const startDate = formData.get("startDate") as string
+    const endDate = isPresentPosition ? "Present" : (formData.get("endDate") as string)
+    const description = formData.get("description") as string
+    const location = formData.get("location") as string
+
+    try {
+      const response = await fetch(`/api/career/${id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          position,
+          company,
+          startDate,
+          endDate,
+          description,
+          location,
+          logoUrl,
+        }),
+      })
+
+      if (!response.ok) {
+        const error = await response.json()
+        throw new Error(error.error || "Failed to update career entry")
+      }
+
+      toast({
+        title: "Career entry updated",
+        description: "Your career entry has been updated successfully.",
+      })
+
+      router.push("/dashboard/career")
+      router.refresh()
+    } catch (error) {
+      console.error("Career entry update error:", error)
+      toast({
+        title: "Update failed",
+        description: error instanceof Error ? error.message : "Something went wrong",
+        variant: "destructive",
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  async function handleDelete() {
+    if (!confirm("Are you sure you want to delete this career entry?")) {
+      return
+    }
+
+    if (!id) {
+      toast({
+        title: "Missing career entry",
+        description: "We couldn't determine which career entry should be deleted.",
+        variant: "destructive",
+      })
+      return
+    }
+
+    try {
+      const response = await fetch(`/api/career/${id}`, {
+        method: "DELETE",
+      })
+
+      if (!response.ok) {
+        const error = await response.json()
+        throw new Error(error.error || "Failed to delete career entry")
+      }
+
+      toast({
+        title: "Career entry deleted",
+        description: "Your career entry has been deleted successfully.",
+      })
+
+      router.push("/dashboard/career")
+      router.refresh()
+    } catch (error) {
+      console.error("Career entry deletion error:", error)
+      toast({
+        title: "Deletion failed",
+        description: error instanceof Error ? error.message : "Something went wrong",
+        variant: "destructive",
+      })
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <AnimatedSection className="space-y-6">
+        <DashboardHeader heading="Edit Career Entry" text="Loading career entry details..." />
+        <div className="flex items-center justify-center h-32">
+          <p className="text-muted-foreground">Loading...</p>
+        </div>
+      </AnimatedSection>
+    )
+  }
+
+  if (!careerEntry) {
+    return (
+      <AnimatedSection className="space-y-6">
+        <DashboardHeader heading="Edit Career Entry" text="Career entry not found" />
+        <div className="flex flex-col items-center justify-center h-32 gap-4">
+          <p className="text-muted-foreground">The requested career entry could not be found.</p>
+          <Link href="/dashboard/career">
+            <Button>Back to Career</Button>
+          </Link>
+        </div>
+      </AnimatedSection>
+    )
+  }
+
+  const formatDateForInput = (dateString: string | null) => {
+    if (!dateString || dateString === "Present") return ""
+    const date = new Date(dateString)
+    return date.toISOString().split("T")[0]
+  }
+
+  return (
+    <AnimatedSection className="space-y-6">
+      <DashboardHeader heading="Edit Career Entry" text="Update your career position details">
+        <Link href="/dashboard/career">
+          <Button variant="outline" size="sm" className="gap-1">
+            <ArrowLeft className="h-4 w-4" /> Back to Career
+          </Button>
+        </Link>
+      </DashboardHeader>
+      <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
+        <CardHeader>
+          <CardTitle>Position Details</CardTitle>
+          <CardDescription>Update the details of your career position.</CardDescription>
+        </CardHeader>
+        <form onSubmit={handleSubmit}>
+          <CardContent>
+            <AnimatedList className="space-y-4" initialDelay={0.1}>
+              <div className="space-y-2">
+                <Label htmlFor="position">Position</Label>
+                <Input
+                  id="position"
+                  name="position"
+                  defaultValue={careerEntry.position}
+                  placeholder="Job position"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="company">Company</Label>
+                <Input
+                  id="company"
+                  name="company"
+                  defaultValue={careerEntry.company}
+                  placeholder="Company name"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="location">Location</Label>
+                <Input
+                  id="location"
+                  name="location"
+                  defaultValue={careerEntry.location || ""}
+                  placeholder="City, Country"
+                />
+              </div>
+              <FileUpload
+                id="company-logo"
+                label="Company Logo"
+                value={logoUrl}
+                onChange={setLogoUrl}
+                accept="image/*"
+                maxSize={1}
+              />
+              <AnimatedList className="grid grid-cols-1 gap-4 md:grid-cols-2" stagger={0.12}>
+                <div className="space-y-2">
+                  <Label htmlFor="startDate">Start Date</Label>
+                  <Input
+                    id="startDate"
+                    name="startDate"
+                    type="date"
+                    defaultValue={formatDateForInput(careerEntry.startDate)}
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="endDate">End Date</Label>
+                  <div className="flex items-center gap-3 rounded-lg border border-primary/10 bg-muted/20 p-3">
+                    <Input
+                      id="endDate"
+                      name="endDate"
+                      type="date"
+                      defaultValue={
+                        !isPresentPosition
+                          ? formatDateForInput(careerEntry.endDate)
+                          : ""
+                      }
+                      disabled={isPresentPosition}
+                    />
+                    <div className="flex items-center gap-2">
+                      <input
+                        id="present"
+                        name="present"
+                        type="checkbox"
+                        checked={isPresentPosition}
+                        onChange={(event) => setIsPresentPosition(event.target.checked)}
+                        className="h-4 w-4 rounded border border-primary/20"
+                      />
+                      <Label htmlFor="present" className="text-sm">
+                        Present
+                      </Label>
+                    </div>
+                  </div>
+                </div>
+              </AnimatedList>
+              <div className="space-y-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  name="description"
+                  defaultValue={careerEntry.description}
+                  placeholder="Describe your responsibilities and achievements"
+                  rows={5}
+                  required
+                />
+              </div>
+            </AnimatedList>
+          </CardContent>
+          <CardFooter className="flex items-center justify-between border-t border-primary/10 bg-muted/30 py-4">
+            <Button type="button" variant="destructive" onClick={handleDelete} disabled={isSubmitting}>
+              Delete Entry
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? "Saving..." : "Save Changes"}
+            </Button>
+          </CardFooter>
+        </form>
+      </Card>
+    </AnimatedSection>
+  )
+}
diff --git a/app/dashboard/career/[id]/page.tsx b/app/dashboard/career/[id]/page.tsx
index 27d8ee0..fa3d3a8 100644
--- a/app/dashboard/career/[id]/page.tsx
+++ b/app/dashboard/career/[id]/page.tsx
@@ -1,362 +1,11 @@
-"use client"
-
-import type React from "react"
-
-import { useState, useEffect } from "react"
-import { useRouter } from "next/navigation"
-import Link from "next/link"
-import { ArrowLeft } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Textarea } from "@/components/ui/textarea"
-import { useToast } from "@/components/ui/use-toast"
-import { DashboardHeader } from "@/components/dashboard-header"
-import { FileUpload } from "@/components/file-upload"
-import { AnimatedSection } from "@/components/animated-section"
-import { AnimatedList } from "@/components/animated-list"
+import EditCareerPageClient from "./client-page"
 
 interface EditCareerPageProps {
-  params: {
-    id?: string
-  }
-}
-
-interface CareerEntry {
-  id: string
-  position: string
-  company: string
-  startDate: string
-  endDate: string
-  description: string
-  location?: string | null
-  logoUrl?: string | null
-}
-
-interface CareerEntry {
-  id: string
-  position: string
-  company: string
-  startDate: string
-  endDate: string
-  description: string
-  location?: string | null
-  logoUrl?: string | null
+  params: Promise<{ id?: string }>
 }
 
-export default function EditCareerPage({ params }: EditCareerPageProps) {
-  const router = useRouter()
-  const { toast } = useToast()
-  const [isLoading, setIsLoading] = useState(true)
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [careerEntry, setCareerEntry] = useState<CareerEntry | null>(null)
-  const [isPresentPosition, setIsPresentPosition] = useState(false)
-  const [logoUrl, setLogoUrl] = useState("")
-  const [careerId, setCareerId] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!params?.id) {
-      console.error("Missing career id in route params")
-      toast({
-        title: "Invalid route",
-        description: "The career entry identifier is missing from the URL.",
-        variant: "destructive",
-      })
-      setIsLoading(false)
-      return
-    }
-
-    setCareerId(params.id)
-  }, [params, toast])
-
-  useEffect(() => {
-    if (!careerId) {
-      return
-    }
-
-    async function fetchCareerEntry() {
-      try {
-        const response = await fetch(`/api/career/${careerId}`)
-
-        if (!response.ok) {
-          throw new Error("Failed to fetch career entry")
-        }
-
-        const data: { career: CareerEntry } = await response.json()
-        setCareerEntry(data.career)
-        setIsPresentPosition(data.career.endDate === "Present")
-        setLogoUrl(data.career.logoUrl || "")
-      } catch (error) {
-        console.error("Error fetching career entry:", error)
-        toast({
-          title: "Error",
-          description: "Failed to load career entry details",
-          variant: "destructive",
-        })
-      } finally {
-        setIsLoading(false)
-      }
-    }
-
-    fetchCareerEntry()
-  }, [careerId, toast])
-
-  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    setIsSubmitting(true)
-
-    if (!careerId) {
-      toast({
-        title: "Missing career entry",
-        description: "We couldn't determine which career entry should be updated.",
-        variant: "destructive",
-      })
-      setIsSubmitting(false)
-      return
-    }
-
-    const formData = new FormData(event.currentTarget)
-    const position = formData.get("position") as string
-    const company = formData.get("company") as string
-    const startDate = formData.get("startDate") as string
-    const endDate = isPresentPosition ? "Present" : (formData.get("endDate") as string)
-    const description = formData.get("description") as string
-    const location = formData.get("location") as string
-
-    try {
-      const response = await fetch(`/api/career/${careerId}`, {
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          position,
-          company,
-          startDate,
-          endDate,
-          description,
-          location,
-          logoUrl,
-        }),
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || "Failed to update career entry")
-      }
-
-      toast({
-        title: "Career entry updated",
-        description: "Your career entry has been updated successfully.",
-      })
-
-      router.push("/dashboard/career")
-      router.refresh()
-    } catch (error) {
-      console.error("Career entry update error:", error)
-      toast({
-        title: "Update failed",
-        description: error instanceof Error ? error.message : "Something went wrong",
-        variant: "destructive",
-      })
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  async function handleDelete() {
-    if (!confirm("Are you sure you want to delete this career entry?")) {
-      return
-    }
-
-    if (!careerId) {
-      toast({
-        title: "Missing career entry",
-        description: "We couldn't determine which career entry should be deleted.",
-        variant: "destructive",
-      })
-      return
-    }
-
-    try {
-      const response = await fetch(`/api/career/${careerId}`, {
-        method: "DELETE",
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || "Failed to delete career entry")
-      }
-
-      toast({
-        title: "Career entry deleted",
-        description: "Your career entry has been deleted successfully.",
-      })
-
-      router.push("/dashboard/career")
-      router.refresh()
-    } catch (error) {
-      console.error("Career entry deletion error:", error)
-      toast({
-        title: "Deletion failed",
-        description: error instanceof Error ? error.message : "Something went wrong",
-        variant: "destructive",
-      })
-    }
-  }
-
-  if (isLoading) {
-    return (
-      <AnimatedSection className="space-y-6">
-        <DashboardHeader heading="Edit Career Entry" text="Loading career entry details..." />
-        <div className="flex items-center justify-center h-32">
-          <p className="text-muted-foreground">Loading...</p>
-        </div>
-      </AnimatedSection>
-    )
-  }
-
-  if (!careerEntry) {
-    return (
-      <AnimatedSection className="space-y-6">
-        <DashboardHeader heading="Edit Career Entry" text="Career entry not found" />
-        <div className="flex flex-col items-center justify-center h-32 gap-4">
-          <p className="text-muted-foreground">The requested career entry could not be found.</p>
-          <Link href="/dashboard/career">
-            <Button>Back to Career</Button>
-          </Link>
-        </div>
-      </AnimatedSection>
-    )
-  }
-
-  // Format date string for input field (yyyy-MM-dd)
-  const formatDateForInput = (dateString: string | null) => {
-    if (!dateString || dateString === "Present") return ""
-    const date = new Date(dateString)
-    return date.toISOString().split("T")[0]
-  }
+export default async function EditCareerPage({ params }: EditCareerPageProps) {
+  const resolvedParams = await params
 
-  return (
-    <AnimatedSection className="space-y-6">
-      <DashboardHeader heading="Edit Career Entry" text="Update your career position details">
-        <Link href="/dashboard/career">
-          <Button variant="outline" size="sm" className="gap-1">
-            <ArrowLeft className="h-4 w-4" /> Back to Career
-          </Button>
-        </Link>
-      </DashboardHeader>
-      <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
-        <CardHeader>
-          <CardTitle>Position Details</CardTitle>
-          <CardDescription>Update the details of your career position.</CardDescription>
-        </CardHeader>
-        <form onSubmit={handleSubmit}>
-          <CardContent>
-            <AnimatedList className="space-y-4" initialDelay={0.1}>
-              <div className="space-y-2">
-                <Label htmlFor="position">Position</Label>
-                <Input
-                  id="position"
-                  name="position"
-                  defaultValue={careerEntry.position}
-                  placeholder="Job position"
-                  required
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="company">Company</Label>
-                <Input
-                  id="company"
-                  name="company"
-                  defaultValue={careerEntry.company}
-                  placeholder="Company name"
-                  required
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="location">Location</Label>
-                <Input
-                  id="location"
-                  name="location"
-                  defaultValue={careerEntry.location || ""}
-                  placeholder="City, Country"
-                />
-              </div>
-              <FileUpload
-                id="company-logo"
-                label="Company Logo"
-                value={logoUrl}
-                onChange={setLogoUrl}
-                accept="image/*"
-                maxSize={1}
-              />
-              <AnimatedList className="grid grid-cols-1 gap-4 md:grid-cols-2" stagger={0.12}>
-                <div className="space-y-2">
-                  <Label htmlFor="startDate">Start Date</Label>
-                  <Input
-                    id="startDate"
-                    name="startDate"
-                    type="date"
-                    defaultValue={formatDateForInput(careerEntry.startDate)}
-                    required
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="endDate">End Date</Label>
-                  <div className="flex items-center gap-3 rounded-lg border border-primary/10 bg-muted/20 p-3">
-                    <Input
-                      id="endDate"
-                      name="endDate"
-                      type="date"
-                      defaultValue={formatDateForInput(careerEntry.endDate)}
-                      disabled={isPresentPosition}
-                    />
-                    <label className="flex items-center gap-2 text-sm">
-                      <input
-                        type="checkbox"
-                        checked={isPresentPosition}
-                        onChange={(event) => setIsPresentPosition(event.target.checked)}
-                      />
-                      Present
-                    </label>
-                  </div>
-                </div>
-              </AnimatedList>
-              <div className="space-y-2">
-                <Label htmlFor="description">Description</Label>
-                <Textarea
-                  id="description"
-                  name="description"
-                  defaultValue={careerEntry.description}
-                  placeholder="Job description and responsibilities"
-                  rows={5}
-                  required
-                />
-              </div>
-            </AnimatedList>
-          </CardContent>
-          <CardFooter>
-            <AnimatedList className="flex w-full flex-col gap-4 sm:flex-row sm:justify-between" stagger={0.12}>
-              <Button type="button" variant="destructive" onClick={handleDelete}>
-                Delete Entry
-              </Button>
-              <Button type="submit" disabled={isSubmitting}>
-                {isSubmitting ? "Saving..." : "Save Changes"}
-              </Button>
-            </AnimatedList>
-          </CardFooter>
-        </form>
-      </Card>
-    </AnimatedSection>
-  )
+  return <EditCareerPageClient id={resolvedParams?.id} />
 }
diff --git a/app/dashboard/certificates/[id]/client-page.tsx b/app/dashboard/certificates/[id]/client-page.tsx
new file mode 100644
index 0000000..0490844
--- /dev/null
+++ b/app/dashboard/certificates/[id]/client-page.tsx
@@ -0,0 +1,289 @@
+"use client"
+
+import type React from "react"
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import Link from "next/link"
+import { ArrowLeft } from "lucide-react"
+
+import { AnimatedList } from "@/components/animated-list"
+import { AnimatedSection } from "@/components/animated-section"
+import { DashboardHeader } from "@/components/dashboard-header"
+import { FileUpload } from "@/components/file-upload"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { useToast } from "@/components/ui/use-toast"
+import type { Certificate } from "@/types/database"
+
+interface EditCertificatePageClientProps {
+  id?: string
+}
+
+export default function EditCertificatePageClient({ id }: EditCertificatePageClientProps) {
+  const router = useRouter()
+  const { toast } = useToast()
+  const [isLoading, setIsLoading] = useState(true)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [certificate, setCertificate] = useState<Certificate | null>(null)
+  const [imageUrl, setImageUrl] = useState("")
+
+  useEffect(() => {
+    if (id) {
+      return
+    }
+
+    console.error("Missing certificate id in route params")
+    toast({
+      title: "Invalid route",
+      description: "The certificate identifier is missing from the URL.",
+      variant: "destructive",
+    })
+    setIsLoading(false)
+  }, [id, toast])
+
+  useEffect(() => {
+    if (!id) {
+      return
+    }
+
+    async function fetchCertificate() {
+      try {
+        const response = await fetch(`/api/certificates/${id}`)
+
+        if (!response.ok) {
+          throw new Error("Failed to fetch certificate")
+        }
+
+        const data: { certificate: Certificate } = await response.json()
+        setCertificate(data.certificate)
+        setImageUrl(data.certificate.imageUrl || "")
+      } catch (error) {
+        console.error("Error fetching certificate:", error)
+        toast({
+          title: "Error",
+          description: "Failed to load certificate details",
+          variant: "destructive",
+        })
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchCertificate()
+  }, [id, toast])
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setIsSubmitting(true)
+
+    if (!id) {
+      toast({
+        title: "Missing certificate",
+        description: "We couldn't determine which certificate should be updated.",
+        variant: "destructive",
+      })
+      setIsSubmitting(false)
+      return
+    }
+
+    const formData = new FormData(event.currentTarget)
+    const name = formData.get("name") as string
+    const issuer = formData.get("issuer") as string
+    const date = formData.get("date") as string
+    const link = formData.get("link") as string
+
+    try {
+      const response = await fetch(`/api/certificates/${id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name,
+          issuer,
+          date,
+          link,
+          imageUrl,
+        }),
+      })
+
+      if (!response.ok) {
+        const error = await response.json()
+        throw new Error(error.error || "Failed to update certificate")
+      }
+
+      toast({
+        title: "Certificate updated",
+        description: "Your certificate has been updated successfully.",
+      })
+
+      router.push("/dashboard/certificates")
+      router.refresh()
+    } catch (error) {
+      console.error("Certificate update error:", error)
+      toast({
+        title: "Update failed",
+        description: error instanceof Error ? error.message : "Something went wrong",
+        variant: "destructive",
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  async function handleDelete() {
+    if (!confirm("Are you sure you want to delete this certificate?")) {
+      return
+    }
+
+    if (!id) {
+      toast({
+        title: "Missing certificate",
+        description: "We couldn't determine which certificate should be deleted.",
+        variant: "destructive",
+      })
+      return
+    }
+
+    try {
+      const response = await fetch(`/api/certificates/${id}`, {
+        method: "DELETE",
+      })
+
+      if (!response.ok) {
+        const error = await response.json()
+        throw new Error(error.error || "Failed to delete certificate")
+      }
+
+      toast({
+        title: "Certificate deleted",
+        description: "Your certificate has been deleted successfully.",
+      })
+
+      router.push("/dashboard/certificates")
+      router.refresh()
+    } catch (error) {
+      console.error("Certificate deletion error:", error)
+      toast({
+        title: "Deletion failed",
+        description: error instanceof Error ? error.message : "Something went wrong",
+        variant: "destructive",
+      })
+    }
+  }
+
+  const formatDateForInput = (value: string | Date | null | undefined) => {
+    if (!value) {
+      return ""
+    }
+
+    if (typeof value === "string") {
+      return value
+    }
+
+    return value.toISOString().split("T")[0]
+  }
+
+  if (isLoading) {
+    return (
+      <AnimatedSection className="space-y-6">
+        <DashboardHeader heading="Edit Certificate" text="Loading certificate details..." />
+        <div className="flex items-center justify-center h-32">
+          <p className="text-muted-foreground">Loading...</p>
+        </div>
+      </AnimatedSection>
+    )
+  }
+
+  if (!certificate) {
+    return (
+      <AnimatedSection className="space-y-6">
+        <DashboardHeader heading="Edit Certificate" text="Certificate not found" />
+        <div className="flex flex-col items-center justify-center h-32 gap-4">
+          <p className="text-muted-foreground">The requested certificate could not be found.</p>
+          <Link href="/dashboard/certificates">
+            <Button>Back to Certificates</Button>
+          </Link>
+        </div>
+      </AnimatedSection>
+    )
+  }
+
+  return (
+    <AnimatedSection className="space-y-6">
+      <DashboardHeader heading="Edit Certificate" text="Update your certificate details">
+        <Link href="/dashboard/certificates">
+          <Button variant="outline" size="sm" className="gap-1">
+            <ArrowLeft className="h-4 w-4" /> Back to Certificates
+          </Button>
+        </Link>
+      </DashboardHeader>
+      <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
+        <form onSubmit={handleSubmit}>
+          <CardHeader>
+            <CardTitle>Certificate Details</CardTitle>
+            <CardDescription>Update the details of your certificate.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AnimatedList className="space-y-4" initialDelay={0.1}>
+              <div className="space-y-2">
+                <Label htmlFor="name">Certificate Name</Label>
+                <Input id="name" name="name" defaultValue={certificate.name} required />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="issuer">Issuer</Label>
+                <Input id="issuer" name="issuer" defaultValue={certificate.issuer} required />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="date">Date Earned</Label>
+                <Input
+                  id="date"
+                  name="date"
+                  type="date"
+                  defaultValue={formatDateForInput(certificate.date)}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="link">Certificate URL</Label>
+                <Input
+                  id="link"
+                  name="link"
+                  type="url"
+                  defaultValue={certificate.link || ""}
+                  placeholder="https://example.com/certificate"
+                />
+              </div>
+              <FileUpload
+                id="certificate-image"
+                label="Certificate Image"
+                value={imageUrl}
+                onChange={setImageUrl}
+                accept="image/*"
+                maxSize={2}
+              />
+            </AnimatedList>
+          </CardContent>
+          <CardFooter className="flex items-center justify-between border-t border-primary/10 bg-muted/30 py-4">
+            <Button type="button" variant="destructive" onClick={handleDelete} disabled={isSubmitting}>
+              Delete Certificate
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? "Saving..." : "Save Changes"}
+            </Button>
+          </CardFooter>
+        </form>
+      </Card>
+    </AnimatedSection>
+  )
+}
diff --git a/app/dashboard/certificates/[id]/page.tsx b/app/dashboard/certificates/[id]/page.tsx
index bf0cd5c..5c1428e 100644
--- a/app/dashboard/certificates/[id]/page.tsx
+++ b/app/dashboard/certificates/[id]/page.tsx
@@ -1,300 +1,11 @@
-"use client"
-
-import type React from "react"
-
-import { useState, useEffect } from "react"
-import { useRouter } from "next/navigation"
-import Link from "next/link"
-import { ArrowLeft } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { useToast } from "@/components/ui/use-toast"
-import { DashboardHeader } from "@/components/dashboard-header"
-import { FileUpload } from "@/components/file-upload"
-import type { Certificate } from "@/types/database"
-import { AnimatedSection } from "@/components/animated-section"
-import { AnimatedList } from "@/components/animated-list"
+import EditCertificatePageClient from "./client-page"
 
 interface EditCertificatePageProps {
-  params: {
-    id?: string
-  }
+  params: Promise<{ id?: string }>
 }
 
-export default function EditCertificatePage({ params }: EditCertificatePageProps) {
-  const router = useRouter()
-  const { toast } = useToast()
-  const [isLoading, setIsLoading] = useState(true)
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [certificate, setCertificate] = useState<Certificate | null>(null)
-  const [imageUrl, setImageUrl] = useState("")
-  const [certificateId, setCertificateId] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!params?.id) {
-      console.error("Missing certificate id in route params")
-      toast({
-        title: "Invalid route",
-        description: "The certificate identifier is missing from the URL.",
-        variant: "destructive",
-      })
-      setIsLoading(false)
-      return
-    }
-
-    setCertificateId(params.id)
-  }, [params, toast])
-
-  useEffect(() => {
-    if (!certificateId) {
-      return
-    }
-
-    async function fetchCertificate() {
-      try {
-        const response = await fetch(`/api/certificates/${certificateId}`)
-
-        if (!response.ok) {
-          throw new Error("Failed to fetch certificate")
-        }
-
-        const data: { certificate: Certificate } = await response.json()
-        setCertificate(data.certificate)
-        setImageUrl(data.certificate.imageUrl || "")
-      } catch (error) {
-        console.error("Error fetching certificate:", error)
-        toast({
-          title: "Error",
-          description: "Failed to load certificate details",
-          variant: "destructive",
-        })
-      } finally {
-        setIsLoading(false)
-      }
-    }
-
-    fetchCertificate()
-  }, [certificateId, toast])
-
-  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    setIsSubmitting(true)
-
-    if (!certificateId) {
-      toast({
-        title: "Missing certificate",
-        description: "We couldn't determine which certificate should be updated.",
-        variant: "destructive",
-      })
-      setIsSubmitting(false)
-      return
-    }
-
-    const formData = new FormData(event.currentTarget)
-    const name = formData.get("name") as string
-    const issuer = formData.get("issuer") as string
-    const date = formData.get("date") as string
-    const link = formData.get("link") as string
-
-    try {
-      const response = await fetch(`/api/certificates/${certificateId}`, {
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          name,
-          issuer,
-          date,
-          link,
-          imageUrl,
-        }),
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || "Failed to update certificate")
-      }
-
-      toast({
-        title: "Certificate updated",
-        description: "Your certificate has been updated successfully.",
-      })
-
-      router.push("/dashboard/certificates")
-      router.refresh()
-    } catch (error) {
-      console.error("Certificate update error:", error)
-      toast({
-        title: "Update failed",
-        description: error instanceof Error ? error.message : "Something went wrong",
-        variant: "destructive",
-      })
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  async function handleDelete() {
-    if (!confirm("Are you sure you want to delete this certificate?")) {
-      return
-    }
-
-    if (!certificateId) {
-      toast({
-        title: "Missing certificate",
-        description: "We couldn't determine which certificate should be deleted.",
-        variant: "destructive",
-      })
-      return
-    }
-
-    try {
-      const response = await fetch(`/api/certificates/${certificateId}`, {
-        method: "DELETE",
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || "Failed to delete certificate")
-      }
-
-      toast({
-        title: "Certificate deleted",
-        description: "Your certificate has been deleted successfully.",
-      })
-
-      router.push("/dashboard/certificates")
-      router.refresh()
-    } catch (error) {
-      console.error("Certificate deletion error:", error)
-      toast({
-        title: "Deletion failed",
-        description: error instanceof Error ? error.message : "Something went wrong",
-        variant: "destructive",
-      })
-    }
-  }
-
-  if (isLoading) {
-    return (
-      <AnimatedSection className="space-y-6">
-        <DashboardHeader heading="Edit Certificate" text="Loading certificate details..." />
-        <div className="flex items-center justify-center h-32">
-          <p className="text-muted-foreground">Loading...</p>
-        </div>
-      </AnimatedSection>
-    )
-  }
-
-  if (!certificate) {
-    return (
-      <AnimatedSection className="space-y-6">
-        <DashboardHeader heading="Edit Certificate" text="Certificate not found" />
-        <div className="flex flex-col items-center justify-center h-32 gap-4">
-          <p className="text-muted-foreground">The requested certificate could not be found.</p>
-          <Link href="/dashboard/certificates">
-            <Button>Back to Certificates</Button>
-          </Link>
-        </div>
-      </AnimatedSection>
-    )
-  }
-
-  // Format date string for input field (yyyy-MM-dd)
-  const formatDateForInput = (dateValue: string | Date) => {
-    const date = typeof dateValue === "string" ? new Date(dateValue) : dateValue
-    return date.toISOString().split("T")[0]
-  }
+export default async function EditCertificatePage({ params }: EditCertificatePageProps) {
+  const resolvedParams = await params
 
-  return (
-    <AnimatedSection className="space-y-6">
-      <DashboardHeader heading="Edit Certificate" text="Update your certificate details">
-        <Link href="/dashboard/certificates">
-          <Button variant="outline" size="sm" className="gap-1">
-            <ArrowLeft className="h-4 w-4" /> Back to Certificates
-          </Button>
-        </Link>
-      </DashboardHeader>
-      <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
-        <CardHeader>
-          <CardTitle>Certificate Details</CardTitle>
-          <CardDescription>Update the details of your certificate.</CardDescription>
-        </CardHeader>
-        <form onSubmit={handleSubmit}>
-          <CardContent>
-            <AnimatedList className="space-y-4" initialDelay={0.1}>
-              <div className="space-y-2">
-                <Label htmlFor="name">Certificate Name</Label>
-                <Input
-                  id="name"
-                  name="name"
-                  defaultValue={certificate.name}
-                  placeholder="Certificate name"
-                  required
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="issuer">Issuer</Label>
-                <Input
-                  id="issuer"
-                  name="issuer"
-                  defaultValue={certificate.issuer}
-                  placeholder="Certificate issuer"
-                  required
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="date">Date</Label>
-                <Input
-                  id="date"
-                  name="date"
-                  type="date"
-                  defaultValue={formatDateForInput(certificate.date)}
-                  required
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="link">Certificate Link</Label>
-                <Input
-                  id="link"
-                  name="link"
-                  defaultValue={certificate.link || ""}
-                  placeholder="https://example.com/certificate"
-                />
-              </div>
-              <FileUpload
-                id="certificate-image"
-                label="Certificate Image"
-                value={imageUrl}
-                onChange={setImageUrl}
-                accept="image/*"
-                maxSize={2}
-              />
-            </AnimatedList>
-          </CardContent>
-          <CardFooter>
-            <AnimatedList className="flex w-full flex-col gap-4 sm:flex-row sm:justify-between" stagger={0.12}>
-              <Button type="button" variant="destructive" onClick={handleDelete}>
-                Delete Certificate
-              </Button>
-              <Button type="submit" disabled={isSubmitting}>
-                {isSubmitting ? "Saving..." : "Save Changes"}
-              </Button>
-            </AnimatedList>
-          </CardFooter>
-        </form>
-      </Card>
-    </AnimatedSection>
-  )
+  return <EditCertificatePageClient id={resolvedParams?.id} />
 }
diff --git a/app/dashboard/contacts/[id]/client-page.tsx b/app/dashboard/contacts/[id]/client-page.tsx
new file mode 100644
index 0000000..976f2ac
--- /dev/null
+++ b/app/dashboard/contacts/[id]/client-page.tsx
@@ -0,0 +1,440 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { format } from "date-fns"
+import { Archive, ArrowLeft, CheckCircle, Eye, Mail, Trash2, User } from "lucide-react"
+
+import { AnimatedList } from "@/components/animated-list"
+import { AnimatedSection } from "@/components/animated-section"
+import { DashboardHeader } from "@/components/dashboard-header"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Textarea } from "@/components/ui/textarea"
+import { useToast } from "@/components/ui/use-toast"
+
+interface Contact {
+  id: string
+  name: string
+  email: string
+  subject: string
+  message: string
+  status: "unread" | "read" | "replied" | "archived"
+  notes?: string | null
+  createdAt: string
+}
+
+interface ContactDetailsPageClientProps {
+  id?: string
+}
+
+export default function ContactDetailsPageClient({ id }: ContactDetailsPageClientProps) {
+  const router = useRouter()
+  const { toast } = useToast()
+  const [contact, setContact] = useState<Contact | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [notes, setNotes] = useState("")
+  const [savingNotes, setSavingNotes] = useState(false)
+
+  useEffect(() => {
+    if (id) {
+      return
+    }
+
+    console.error("Missing contact id in route params")
+    toast({
+      title: "Invalid route",
+      description: "The contact identifier is missing from the URL.",
+      variant: "destructive",
+    })
+    setLoading(false)
+  }, [id, toast])
+
+  const handleStatusChange = useCallback(
+    async (newStatus: Contact["status"]) => {
+      if (!id) {
+        toast({
+          title: "Missing contact",
+          description: "We couldn't determine which contact to update.",
+          variant: "destructive",
+        })
+        return
+      }
+
+      try {
+        const response = await fetch(`/api/contacts/${id}`, {
+          method: "PATCH",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ status: newStatus }),
+        })
+
+        if (!response.ok) {
+          throw new Error("Failed to update contact status")
+        }
+
+        const data = await response.json()
+        setContact(data.contact)
+
+        toast({
+          title: "Status updated",
+          description: `Contact marked as ${newStatus}`,
+        })
+      } catch (error) {
+        console.error("Error updating contact status:", error)
+        toast({
+          title: "Error",
+          description: "Failed to update contact status",
+          variant: "destructive",
+        })
+      }
+    },
+    [id, toast],
+  )
+
+  useEffect(() => {
+    if (!id) {
+      return
+    }
+
+    async function fetchContact() {
+      setLoading(true)
+      try {
+        const response = await fetch(`/api/contacts/${id}`)
+        if (!response.ok) {
+          throw new Error("Failed to fetch contact")
+        }
+
+        const data = await response.json()
+        setContact(data.contact)
+        setNotes(data.contact.notes || "")
+
+        if (data.contact.status === "unread") {
+          await handleStatusChange("read")
+        }
+      } catch (error) {
+        console.error("Error fetching contact:", error)
+        toast({
+          title: "Error",
+          description: "Failed to load contact details",
+          variant: "destructive",
+        })
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchContact()
+  }, [id, toast, handleStatusChange])
+
+  async function handleDelete() {
+    if (!confirm("Are you sure you want to delete this contact?")) {
+      return
+    }
+
+    if (!id) {
+      toast({
+        title: "Missing contact",
+        description: "We couldn't determine which contact to delete.",
+        variant: "destructive",
+      })
+      return
+    }
+
+    try {
+      const response = await fetch(`/api/contacts/${id}`, {
+        method: "DELETE",
+      })
+
+      if (!response.ok) {
+        throw new Error("Failed to delete contact")
+      }
+
+      toast({
+        title: "Contact deleted",
+        description: "The contact has been deleted successfully",
+      })
+
+      router.push("/dashboard/contacts")
+    } catch (error) {
+      console.error("Error deleting contact:", error)
+      toast({
+        title: "Error",
+        description: "Failed to delete contact",
+        variant: "destructive",
+      })
+    }
+  }
+
+  async function saveNotes() {
+    if (!id) {
+      toast({
+        title: "Missing contact",
+        description: "We couldn't determine which contact to update.",
+        variant: "destructive",
+      })
+      return
+    }
+
+    setSavingNotes(true)
+    try {
+      const response = await fetch(`/api/contacts/${id}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ notes }),
+      })
+
+      if (!response.ok) {
+        throw new Error("Failed to save notes")
+      }
+
+      toast({
+        title: "Notes saved",
+        description: "Your notes have been saved successfully",
+      })
+    } catch (error) {
+      console.error("Error saving notes:", error)
+      toast({
+        title: "Error",
+        description: "Failed to save notes",
+        variant: "destructive",
+      })
+    } finally {
+      setSavingNotes(false)
+    }
+  }
+
+  function getStatusBadge(status: string) {
+    switch (status) {
+      case "unread":
+        return (
+          <Badge
+            variant="secondary"
+            className="bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100"
+          >
+            Unread
+          </Badge>
+        )
+      case "read":
+        return (
+          <Badge
+            variant="secondary"
+            className="bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100"
+          >
+            Read
+          </Badge>
+        )
+      case "replied":
+        return (
+          <Badge
+            variant="secondary"
+            className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100"
+          >
+            Replied
+          </Badge>
+        )
+      case "archived":
+        return (
+          <Badge
+            variant="secondary"
+            className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100"
+          >
+            Archived
+          </Badge>
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <AnimatedSection className="space-y-6">
+      <DashboardHeader heading="Contact Details" text="View and manage contact message">
+        <Link href="/dashboard/contacts">
+          <Button variant="outline" size="sm" className="gap-1">
+            <ArrowLeft className="h-4 w-4" /> Back to Contacts
+          </Button>
+        </Link>
+      </DashboardHeader>
+
+      {loading ? (
+        <AnimatedSection className="space-y-4">
+          <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
+            <CardHeader>
+              <Skeleton className="h-8 w-1/3" />
+              <Skeleton className="h-4 w-1/4" />
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-3/4" />
+            </CardContent>
+          </Card>
+        </AnimatedSection>
+      ) : contact ? (
+        <AnimatedList className="grid gap-6" initialDelay={0.05}>
+          <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle>{contact.subject || "No Subject"}</CardTitle>
+                  <CardDescription>
+                    Received on {format(new Date(contact.createdAt), "MMMM d, yyyy 'at' h:mm a")}
+                  </CardDescription>
+                </div>
+                <div>{getStatusBadge(contact.status)}</div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <AnimatedList className="space-y-6" stagger={0.1}>
+                <div className="flex flex-col gap-1 rounded-lg border border-primary/10 bg-muted/20 p-4">
+                  <div className="flex items-center gap-2">
+                    <User className="h-5 w-5 text-muted-foreground" />
+                    <span className="font-medium">{contact.name}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Mail className="h-5 w-5 text-muted-foreground" />
+                    <a href={`mailto:${contact.email}`} className="text-primary hover:underline">
+                      {contact.email}
+                    </a>
+                  </div>
+                </div>
+
+                <div>
+                  <h3 className="mb-2 font-medium">Message</h3>
+                  <div className="rounded-lg border border-primary/10 bg-background/60 p-4 whitespace-pre-wrap shadow-sm">
+                    {contact.message}
+                  </div>
+                </div>
+
+                <Separator />
+
+                <div>
+                  <h3 className="mb-2 font-medium">Notes</h3>
+                  <Textarea
+                    value={notes}
+                    onChange={(e) => setNotes(e.target.value)}
+                    placeholder="Add your notes here..."
+                    rows={4}
+                    className="resize-none"
+                  />
+                  <Button onClick={saveNotes} disabled={savingNotes} className="mt-2">
+                    {savingNotes ? "Saving..." : "Save Notes"}
+                  </Button>
+                </div>
+              </AnimatedList>
+            </CardContent>
+            <CardFooter>
+              <AnimatedList
+                className="flex w-full flex-col gap-4 border-t border-primary/10 pt-6 sm:flex-row sm:items-center sm:justify-between"
+                stagger={0.12}
+              >
+                <div className="flex flex-wrap gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={() => handleStatusChange("read")}
+                    disabled={contact.status === "read"}
+                  >
+                    <Eye className="mr-2 h-4 w-4" /> Mark as Read
+                  </Button>
+                  <Button
+                    variant="outline"
+                    onClick={() => handleStatusChange("replied")}
+                    disabled={contact.status === "replied"}
+                  >
+                    <CheckCircle className="mr-2 h-4 w-4" /> Mark as Replied
+                  </Button>
+                  <Button
+                    variant="outline"
+                    onClick={() => handleStatusChange("archived")}
+                    disabled={contact.status === "archived"}
+                  >
+                    <Archive className="mr-2 h-4 w-4" /> Archive
+                  </Button>
+                </div>
+                <Button variant="destructive" onClick={handleDelete}>
+                  <Trash2 className="mr-2 h-4 w-4" /> Delete
+                </Button>
+              </AnimatedList>
+            </CardFooter>
+          </Card>
+
+          <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
+            <CardHeader>
+              <CardTitle>Reply to Contact</CardTitle>
+              <CardDescription>Send an email response to this contact</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <AnimatedList className="space-y-4" stagger={0.1}>
+                <AnimatedList className="grid grid-cols-1 gap-4 md:grid-cols-2" stagger={0.1} initialDelay={0.05}>
+                  <div>
+                    <label className="text-sm font-medium">To</label>
+                    <div className="mt-1 rounded-md border border-primary/10 bg-background/60 p-2">
+                      {contact.email}
+                    </div>
+                  </div>
+                  <div>
+                    <label className="text-sm font-medium">Subject</label>
+                    <div className="mt-1 rounded-md border border-primary/10 bg-background/60 p-2">
+                      Re: {contact.subject || "No Subject"}
+                    </div>
+                  </div>
+                </AnimatedList>
+                <div>
+                  <label className="text-sm font-medium">Message</label>
+                  <Textarea
+                    placeholder="Type your reply here..."
+                    rows={6}
+                    className="mt-1 resize-none"
+                    defaultValue={`Dear ${contact.name},\n\nThank you for your message. \n\n\n\nBest regards,\nYour Name`}
+                  />
+                </div>
+              </AnimatedList>
+            </CardContent>
+            <CardFooter>
+              <Button
+                onClick={() => {
+                  toast({
+                    title: "Email functionality not implemented",
+                    description: "This is a demo. Email sending is not implemented.",
+                  })
+                  handleStatusChange("replied")
+                }}
+              >
+                Send Reply
+              </Button>
+            </CardFooter>
+          </Card>
+        </AnimatedList>
+      ) : (
+        <AnimatedSection>
+          <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
+            <CardContent className="flex flex-col items-center justify-center py-10 text-center space-y-2">
+              <h3 className="text-lg font-medium">Contact not found</h3>
+              <p className="text-muted-foreground">
+                The contact you're looking for doesn't exist or has been deleted.
+              </p>
+              <Button asChild className="mt-2">
+                <Link href="/dashboard/contacts">Back to Contacts</Link>
+              </Button>
+            </CardContent>
+          </Card>
+        </AnimatedSection>
+      )}
+    </AnimatedSection>
+  )
+}
diff --git a/app/dashboard/contacts/[id]/page.tsx b/app/dashboard/contacts/[id]/page.tsx
index c20d0fc..ff30264 100644
--- a/app/dashboard/contacts/[id]/page.tsx
+++ b/app/dashboard/contacts/[id]/page.tsx
@@ -1,446 +1,11 @@
-"use client"
-
-import { useState, useEffect, useCallback } from "react"
-import { useRouter } from "next/navigation"
-import Link from "next/link"
-import { format } from "date-fns"
-import { Archive, ArrowLeft, CheckCircle, Eye, Mail, Trash2, User } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import { Textarea } from "@/components/ui/textarea"
-import { useToast } from "@/components/ui/use-toast"
-import { DashboardHeader } from "@/components/dashboard-header"
-import { Badge } from "@/components/ui/badge"
-import { Skeleton } from "@/components/ui/skeleton"
-import { Separator } from "@/components/ui/separator"
-import { AnimatedSection } from "@/components/animated-section"
-import { AnimatedList } from "@/components/animated-list"
-
-interface Contact {
-  id: string
-  name: string
-  email: string
-  subject: string
-  message: string
-  status: "unread" | "read" | "replied" | "archived"
-  notes?: string | null
-  createdAt: string
-}
+import ContactDetailsPageClient from "./client-page"
 
 interface ContactDetailsPageProps {
-  params: {
-    id?: string
-  }
+  params: Promise<{ id?: string }>
 }
 
-export default function ContactDetailsPage({ params }: ContactDetailsPageProps) {
-  const router = useRouter()
-  const { toast } = useToast()
-  const [contact, setContact] = useState<Contact | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [notes, setNotes] = useState("")
-  const [savingNotes, setSavingNotes] = useState(false)
-  const [contactId, setContactId] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!params?.id) {
-      console.error("Missing contact id in route params")
-      toast({
-        title: "Invalid route",
-        description: "The contact identifier is missing from the URL.",
-        variant: "destructive",
-      })
-      setLoading(false)
-      return
-    }
-
-    setContactId(params.id)
-  }, [params, toast])
-
-  const handleStatusChange = useCallback(
-    async (newStatus: Contact["status"]) => {
-      if (!contactId) {
-        toast({
-          title: "Missing contact",
-          description: "We couldn't determine which contact to update.",
-          variant: "destructive",
-        })
-        return
-      }
-
-      try {
-        const response = await fetch(`/api/contacts/${contactId}`, {
-          method: "PATCH",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({ status: newStatus }),
-        })
-
-        if (!response.ok) {
-          throw new Error("Failed to update contact status")
-        }
-
-        const data = await response.json()
-        setContact(data.contact)
-
-        toast({
-          title: "Status updated",
-          description: `Contact marked as ${newStatus}`,
-        })
-      } catch (error) {
-        console.error("Error updating contact status:", error)
-        toast({
-          title: "Error",
-          description: "Failed to update contact status",
-          variant: "destructive",
-        })
-      }
-    },
-    [contactId, toast],
-  )
-
-  // Fetch contact details
-  useEffect(() => {
-    if (!contactId) {
-      return
-    }
-
-    async function fetchContact() {
-      setLoading(true)
-      try {
-        const response = await fetch(`/api/contacts/${contactId}`)
-        if (!response.ok) {
-          throw new Error("Failed to fetch contact")
-        }
-
-        const data = await response.json()
-        setContact(data.contact)
-        setNotes(data.contact.notes || "")
-
-        // If the contact is unread, mark it as read
-        if (data.contact.status === "unread") {
-          await handleStatusChange("read")
-        }
-      } catch (error) {
-        console.error("Error fetching contact:", error)
-        toast({
-          title: "Error",
-          description: "Failed to load contact details",
-          variant: "destructive",
-        })
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    fetchContact()
-  }, [contactId, toast, handleStatusChange])
-
-  // Handle delete
-  async function handleDelete() {
-    if (!confirm("Are you sure you want to delete this contact?")) {
-      return
-    }
-
-    if (!contactId) {
-      toast({
-        title: "Missing contact",
-        description: "We couldn't determine which contact to delete.",
-        variant: "destructive",
-      })
-      return
-    }
-
-    try {
-      const response = await fetch(`/api/contacts/${contactId}`, {
-        method: "DELETE",
-      })
-
-      if (!response.ok) {
-        throw new Error("Failed to delete contact")
-      }
-
-      toast({
-        title: "Contact deleted",
-        description: "The contact has been deleted successfully",
-      })
-
-      router.push("/dashboard/contacts")
-    } catch (error) {
-      console.error("Error deleting contact:", error)
-      toast({
-        title: "Error",
-        description: "Failed to delete contact",
-        variant: "destructive",
-      })
-    }
-  }
-
-  // Save notes
-  async function saveNotes() {
-    if (!contactId) {
-      toast({
-        title: "Missing contact",
-        description: "We couldn't determine which contact to update.",
-        variant: "destructive",
-      })
-      return
-    }
-
-    setSavingNotes(true)
-    try {
-      const response = await fetch(`/api/contacts/${contactId}`, {
-        method: "PATCH",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ notes }),
-      })
-
-      if (!response.ok) {
-        throw new Error("Failed to save notes")
-      }
-
-      toast({
-        title: "Notes saved",
-        description: "Your notes have been saved successfully",
-      })
-    } catch (error) {
-      console.error("Error saving notes:", error)
-      toast({
-        title: "Error",
-        description: "Failed to save notes",
-        variant: "destructive",
-      })
-    } finally {
-      setSavingNotes(false)
-    }
-  }
-
-  // Get status badge
-  function getStatusBadge(status: string) {
-    switch (status) {
-      case "unread":
-        return (
-          <Badge
-            variant="secondary"
-            className="bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100"
-          >
-            Unread
-          </Badge>
-        )
-      case "read":
-        return (
-          <Badge
-            variant="secondary"
-            className="bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-100"
-          >
-            Read
-          </Badge>
-        )
-      case "replied":
-        return (
-          <Badge
-            variant="secondary"
-            className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100"
-          >
-            Replied
-          </Badge>
-        )
-      case "archived":
-        return (
-          <Badge
-            variant="secondary"
-            className="bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100"
-          >
-            Archived
-          </Badge>
-        )
-      default:
-        return null
-    }
-  }
-
-  return (
-    <AnimatedSection className="space-y-6">
-      <DashboardHeader heading="Contact Details" text="View and manage contact message">
-        <Link href="/dashboard/contacts">
-          <Button variant="outline" size="sm" className="gap-1">
-            <ArrowLeft className="h-4 w-4" /> Back to Contacts
-          </Button>
-        </Link>
-      </DashboardHeader>
-
-      {loading ? (
-        <AnimatedSection className="space-y-4">
-          <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
-            <CardHeader>
-              <Skeleton className="h-8 w-1/3" />
-              <Skeleton className="h-4 w-1/4" />
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <Skeleton className="h-4 w-full" />
-              <Skeleton className="h-4 w-full" />
-              <Skeleton className="h-4 w-3/4" />
-            </CardContent>
-          </Card>
-        </AnimatedSection>
-      ) : contact ? (
-        <AnimatedList className="grid gap-6" initialDelay={0.05}>
-          <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
-            <CardHeader>
-              <div className="flex items-center justify-between">
-                <div>
-                  <CardTitle>{contact.subject || "No Subject"}</CardTitle>
-                  <CardDescription>
-                    Received on {format(new Date(contact.createdAt), "MMMM d, yyyy 'at' h:mm a")}
-                  </CardDescription>
-                </div>
-                <div>{getStatusBadge(contact.status)}</div>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <AnimatedList className="space-y-6" stagger={0.1}>
-                <div className="flex flex-col gap-1 rounded-lg border border-primary/10 bg-muted/20 p-4">
-                  <div className="flex items-center gap-2">
-                    <User className="h-5 w-5 text-muted-foreground" />
-                    <span className="font-medium">{contact.name}</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Mail className="h-5 w-5 text-muted-foreground" />
-                    <a href={`mailto:${contact.email}`} className="text-primary hover:underline">
-                      {contact.email}
-                    </a>
-                  </div>
-                </div>
-
-                <div>
-                  <h3 className="mb-2 font-medium">Message</h3>
-                  <div className="rounded-lg border border-primary/10 bg-background/60 p-4 whitespace-pre-wrap shadow-sm">
-                    {contact.message}
-                  </div>
-                </div>
-
-                <Separator />
-
-                <div>
-                  <h3 className="mb-2 font-medium">Notes</h3>
-                  <Textarea
-                    value={notes}
-                    onChange={(e) => setNotes(e.target.value)}
-                    placeholder="Add your notes here..."
-                    rows={4}
-                    className="resize-none"
-                  />
-                  <Button onClick={saveNotes} disabled={savingNotes} className="mt-2">
-                    {savingNotes ? "Saving..." : "Save Notes"}
-                  </Button>
-                </div>
-              </AnimatedList>
-            </CardContent>
-            <CardFooter>
-              <AnimatedList className="flex w-full flex-col gap-4 border-t border-primary/10 pt-6 sm:flex-row sm:items-center sm:justify-between" stagger={0.12}>
-                <div className="flex flex-wrap gap-2">
-                  <Button
-                    variant="outline"
-                    onClick={() => handleStatusChange("read")}
-                    disabled={contact.status === "read"}
-                  >
-                    <Eye className="mr-2 h-4 w-4" /> Mark as Read
-                  </Button>
-                  <Button
-                    variant="outline"
-                    onClick={() => handleStatusChange("replied")}
-                    disabled={contact.status === "replied"}
-                  >
-                    <CheckCircle className="mr-2 h-4 w-4" /> Mark as Replied
-                  </Button>
-                  <Button
-                    variant="outline"
-                    onClick={() => handleStatusChange("archived")}
-                    disabled={contact.status === "archived"}
-                  >
-                    <Archive className="mr-2 h-4 w-4" /> Archive
-                  </Button>
-                </div>
-                <Button variant="destructive" onClick={handleDelete}>
-                  <Trash2 className="mr-2 h-4 w-4" /> Delete
-                </Button>
-              </AnimatedList>
-            </CardFooter>
-          </Card>
+export default async function ContactDetailsPage({ params }: ContactDetailsPageProps) {
+  const resolvedParams = await params
 
-          <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
-            <CardHeader>
-              <CardTitle>Reply to Contact</CardTitle>
-              <CardDescription>Send an email response to this contact</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <AnimatedList className="space-y-4" stagger={0.1}>
-                <AnimatedList className="grid grid-cols-1 gap-4 md:grid-cols-2" stagger={0.1} initialDelay={0.05}>
-                  <div>
-                    <label className="text-sm font-medium">To</label>
-                    <div className="mt-1 rounded-md border border-primary/10 bg-background/60 p-2">
-                      {contact.email}
-                    </div>
-                  </div>
-                  <div>
-                    <label className="text-sm font-medium">Subject</label>
-                    <div className="mt-1 rounded-md border border-primary/10 bg-background/60 p-2">
-                      Re: {contact.subject || "No Subject"}
-                    </div>
-                  </div>
-                </AnimatedList>
-                <div>
-                  <label className="text-sm font-medium">Message</label>
-                  <Textarea
-                    placeholder="Type your reply here..."
-                    rows={6}
-                    className="mt-1 resize-none"
-                    defaultValue={`Dear ${contact.name},\n\nThank you for your message. \n\n\n\nBest regards,\nYour Name`}
-                  />
-                </div>
-              </AnimatedList>
-            </CardContent>
-            <CardFooter>
-              <Button
-                onClick={() => {
-                  toast({
-                    title: "Email functionality not implemented",
-                    description: "This is a demo. Email sending is not implemented.",
-                  })
-                  handleStatusChange("replied")
-                }}
-              >
-                Send Reply
-              </Button>
-            </CardFooter>
-          </Card>
-        </AnimatedList>
-      ) : (
-        <AnimatedSection>
-          <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
-            <CardContent className="flex flex-col items-center justify-center py-10 text-center space-y-2">
-              <h3 className="text-lg font-medium">Contact not found</h3>
-              <p className="text-muted-foreground">
-                The contact you're looking for doesn't exist or has been deleted.
-              </p>
-              <Button asChild className="mt-2">
-                <Link href="/dashboard/contacts">Back to Contacts</Link>
-              </Button>
-            </CardContent>
-          </Card>
-        </AnimatedSection>
-      )}
-    </AnimatedSection>
-  )
+  return <ContactDetailsPageClient id={resolvedParams?.id} />
 }
diff --git a/app/dashboard/projects/[id]/client-page.tsx b/app/dashboard/projects/[id]/client-page.tsx
new file mode 100644
index 0000000..78455a2
--- /dev/null
+++ b/app/dashboard/projects/[id]/client-page.tsx
@@ -0,0 +1,517 @@
+"use client"
+
+import type React from "react"
+
+import { useEffect, useRef, useState } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { ArrowLeft, Upload, X } from "lucide-react"
+
+import { AnimatedList } from "@/components/animated-list"
+import { AnimatedSection } from "@/components/animated-section"
+import { DashboardHeader } from "@/components/dashboard-header"
+import { FeatureInput } from "@/components/feature-input"
+import type { FeatureDraft } from "@/components/feature-input"
+import { FileUpload } from "@/components/file-upload"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { useToast } from "@/components/ui/use-toast"
+import { PROJECT_LONGFORM_MAX_LENGTH } from "@/lib/project-validation"
+import type { Project } from "@/types/database"
+
+interface EditProjectPageClientProps {
+  id?: string
+}
+
+export default function EditProjectPageClient({ id }: EditProjectPageClientProps) {
+  const router = useRouter()
+  const { toast } = useToast()
+  const [isLoading, setIsLoading] = useState(true)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [project, setProject] = useState<Project | null>(null)
+  const [imageUrl, setImageUrl] = useState("")
+  const [logoUrl, setLogoUrl] = useState("")
+  const [logContent, setLogContent] = useState("")
+  const [features, setFeatures] = useState<FeatureDraft[]>([])
+  const logFileInputRef = useRef<HTMLInputElement>(null)
+  const [uploadingLog, setUploadingLog] = useState(false)
+  const formattedLongFormLimit = new Intl.NumberFormat().format(PROJECT_LONGFORM_MAX_LENGTH)
+
+  useEffect(() => {
+    if (id) {
+      return
+    }
+
+    console.error("Missing project id in route params")
+    toast({
+      title: "Invalid route",
+      description: "The project identifier is missing from the URL.",
+      variant: "destructive",
+    })
+    setIsLoading(false)
+  }, [id, toast])
+
+  useEffect(() => {
+    if (!id) {
+      return
+    }
+
+    async function fetchProject() {
+      try {
+        const response = await fetch(`/api/projects/${id}`)
+
+        if (!response.ok) {
+          throw new Error("Failed to fetch project")
+        }
+
+        const data: {
+          project: Project & {
+            features?: Array<{ id: string; name: string; description: string | null }>
+          }
+        } = await response.json()
+
+        setProject(data.project)
+        setImageUrl(data.project.imageUrl || "")
+        setLogoUrl(data.project.logoUrl || "")
+        setLogContent(data.project.logContent || "")
+        setFeatures(
+          (data.project.features || []).map((feature) => ({
+            id: feature.id,
+            name: feature.name,
+            description: feature.description ?? "",
+          })),
+        )
+      } catch (error) {
+        console.error("Error fetching project:", error)
+        toast({
+          title: "Error",
+          description: "Failed to load project details",
+          variant: "destructive",
+        })
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchProject()
+  }, [id, toast])
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setIsSubmitting(true)
+
+    if (!id) {
+      toast({
+        title: "Missing project",
+        description: "We couldn't determine which project should be updated.",
+        variant: "destructive",
+      })
+      setIsSubmitting(false)
+      return
+    }
+
+    const formData = new FormData(event.currentTarget)
+    const title = formData.get("title") as string
+    const description = formData.get("description") as string
+    const technologies = formData.get("technologies") as string
+    const link = formData.get("link") as string
+    const githubUrl = formData.get("githubUrl") as string
+    const featured = Boolean(formData.get("featured"))
+    const developmentProcess = formData.get("developmentProcess") as string
+    const challengesFaced = formData.get("challengesFaced") as string
+    const futurePlans = formData.get("futurePlans") as string
+    const safeLogContent =
+      logContent.length > PROJECT_LONGFORM_MAX_LENGTH
+        ? logContent.slice(0, PROJECT_LONGFORM_MAX_LENGTH)
+        : logContent
+
+    try {
+      const response = await fetch(`/api/projects/${id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          title,
+          description,
+          technologies,
+          link,
+          githubUrl,
+          imageUrl,
+          logoUrl,
+          featured,
+          developmentProcess,
+          challengesFaced,
+          futurePlans,
+          logContent: safeLogContent,
+          features: features
+            .filter((feature) => feature.name.trim().length > 0)
+            .map((feature) => ({
+              name: feature.name,
+              description: feature.description.trim() ? feature.description : null,
+            })),
+        }),
+      })
+
+      if (!response.ok) {
+        const error = await response.json()
+        throw new Error(error.error || "Failed to update project")
+      }
+
+      toast({
+        title: "Project updated",
+        description: "Your project has been updated successfully.",
+      })
+
+      router.push("/dashboard/projects")
+      router.refresh()
+    } catch (error) {
+      console.error("Project update error:", error)
+      toast({
+        title: "Update failed",
+        description: error instanceof Error ? error.message : "Something went wrong",
+        variant: "destructive",
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  async function handleDelete() {
+    if (!confirm("Are you sure you want to delete this project?")) {
+      return
+    }
+
+    if (!id) {
+      toast({
+        title: "Missing project",
+        description: "We couldn't determine which project should be deleted.",
+        variant: "destructive",
+      })
+      return
+    }
+
+    try {
+      const response = await fetch(`/api/projects/${id}`, {
+        method: "DELETE",
+      })
+
+      if (!response.ok) {
+        const error = await response.json()
+        throw new Error(error.error || "Failed to delete project")
+      }
+
+      toast({
+        title: "Project deleted",
+        description: "Your project has been deleted successfully.",
+      })
+
+      router.push("/dashboard/projects")
+      router.refresh()
+    } catch (error) {
+      console.error("Project deletion error:", error)
+      toast({
+        title: "Deletion failed",
+        description: error instanceof Error ? error.message : "Something went wrong",
+        variant: "destructive",
+      })
+    }
+  }
+
+  async function handleLogFileUpload(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    setUploadingLog(true)
+
+    try {
+      const text = await file.text()
+      if (text.length > PROJECT_LONGFORM_MAX_LENGTH) {
+        setLogContent(text.slice(0, PROJECT_LONGFORM_MAX_LENGTH))
+        toast({
+          title: "Log truncated",
+          description: `The uploaded log exceeded ${formattedLongFormLimit} characters and was truncated to fit the storage limit.`,
+        })
+      } else {
+        setLogContent(text)
+        toast({
+          title: "Log file loaded",
+          description: "Log file has been loaded successfully.",
+        })
+      }
+    } catch (error) {
+      console.error("Log file reading error:", error)
+      toast({
+        title: "File reading failed",
+        description: error instanceof Error ? error.message : "Something went wrong",
+        variant: "destructive",
+      })
+    } finally {
+      setUploadingLog(false)
+    }
+  }
+
+  function triggerLogFileInput() {
+    logFileInputRef.current?.click()
+  }
+
+  function removeLogFile() {
+    setLogContent("")
+    if (logFileInputRef.current) {
+      logFileInputRef.current.value = ""
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <AnimatedSection className="space-y-6">
+        <DashboardHeader heading="Edit Project" text="Loading project details..." />
+        <div className="flex items-center justify-center h-32">
+          <p className="text-muted-foreground">Loading...</p>
+        </div>
+      </AnimatedSection>
+    )
+  }
+
+  if (!project) {
+    return (
+      <AnimatedSection className="space-y-6">
+        <DashboardHeader heading="Edit Project" text="Project not found" />
+        <div className="flex flex-col items-center justify-center h-32 gap-4">
+          <p className="text-muted-foreground">The requested project could not be found.</p>
+          <Link href="/dashboard/projects">
+            <Button>Back to Projects</Button>
+          </Link>
+        </div>
+      </AnimatedSection>
+    )
+  }
+
+  return (
+    <AnimatedSection className="space-y-6">
+      <DashboardHeader heading="Edit Project" text="Update your project details">
+        <Link href="/dashboard/projects">
+          <Button variant="outline" size="sm" className="gap-1">
+            <ArrowLeft className="h-4 w-4" /> Back to Projects
+          </Button>
+        </Link>
+      </DashboardHeader>
+      <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
+        <CardHeader>
+          <CardTitle>Project Details</CardTitle>
+          <CardDescription>Update the details of your project.</CardDescription>
+        </CardHeader>
+        <form onSubmit={handleSubmit}>
+          <CardContent>
+            <AnimatedList className="space-y-6" initialDelay={0.1}>
+              <div className="space-y-2">
+                <Label htmlFor="title">Title</Label>
+                <Input
+                  id="title"
+                  name="title"
+                  defaultValue={project.title}
+                  placeholder="Project title"
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  name="description"
+                  defaultValue={project.description}
+                  placeholder="Project description"
+                  rows={5}
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="technologies">Technologies</Label>
+                <Input
+                  id="technologies"
+                  name="technologies"
+                  defaultValue={project.technologies}
+                  placeholder="Next.js, TypeScript, Tailwind CSS"
+                  required
+                />
+                <p className="text-sm text-muted-foreground">Separate technologies with commas</p>
+              </div>
+
+              <AnimatedList className="grid grid-cols-1 gap-6 md:grid-cols-2" stagger={0.12}>
+                <div className="space-y-2">
+                  <Label htmlFor="link">Project Link</Label>
+                  <Input
+                    id="link"
+                    name="link"
+                    defaultValue={project.link || ""}
+                    placeholder="https://example.com/project"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="githubUrl">GitHub Repository</Label>
+                  <Input
+                    id="githubUrl"
+                    name="githubUrl"
+                    defaultValue={project.githubUrl || ""}
+                    placeholder="https://github.com/username/repo"
+                  />
+                </div>
+              </AnimatedList>
+
+              <AnimatedList className="grid grid-cols-1 gap-6 md:grid-cols-2" stagger={0.12} initialDelay={0.08}>
+                <FileUpload
+                  id="project-image"
+                  label="Project Screenshot"
+                  value={imageUrl}
+                  onChange={setImageUrl}
+                  accept="image/*"
+                  maxSize={2}
+                />
+
+                <FileUpload
+                  id="project-logo"
+                  label="Project Logo"
+                  value={logoUrl}
+                  onChange={setLogoUrl}
+                  accept="image/*"
+                  maxSize={1}
+                />
+              </AnimatedList>
+
+              <div className="space-y-4">
+                <Label className="font-medium">Feature Highlights</Label>
+                <FeatureInput features={features} onChange={setFeatures} />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="developmentProcess">Development Process</Label>
+                <Textarea
+                  id="developmentProcess"
+                  name="developmentProcess"
+                  placeholder="Describe your development process, methodology, and approach"
+                  rows={3}
+                  maxLength={PROJECT_LONGFORM_MAX_LENGTH}
+                  defaultValue={
+                    project.developmentProcess ||
+                    "This project was developed using an agile methodology, with regular iterations and feedback cycles. The development process included planning, design, implementation, testing, and deployment phases."
+                  }
+                />
+                <p className="text-xs text-muted-foreground">
+                  Maximum {formattedLongFormLimit} characters. Longer entries will be trimmed automatically.
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="challengesFaced">Challenges Faced</Label>
+                <Textarea
+                  id="challengesFaced"
+                  name="challengesFaced"
+                  placeholder="Describe any challenges you faced during development and how you overcame them"
+                  rows={3}
+                  maxLength={PROJECT_LONGFORM_MAX_LENGTH}
+                  defaultValue={project.challengesFaced || ""}
+                />
+                <p className="text-xs text-muted-foreground">Maximum {formattedLongFormLimit} characters.</p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="futurePlans">Future Plans</Label>
+                <Textarea
+                  id="futurePlans"
+                  name="futurePlans"
+                  placeholder="Describe any future plans or improvements for this project"
+                  rows={3}
+                  maxLength={PROJECT_LONGFORM_MAX_LENGTH}
+                  defaultValue={project.futurePlans || ""}
+                />
+                <p className="text-xs text-muted-foreground">Maximum {formattedLongFormLimit} characters.</p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="log-file">Project Log File</Label>
+                <div className="mt-2 flex flex-col gap-4">
+                  {logContent && (
+                    <div className="relative overflow-hidden rounded-md border p-3 bg-gray-900 text-gray-200">
+                      <pre className="text-xs overflow-auto max-h-40">
+                        {logContent.slice(0, 500)}
+                        {logContent.length > 500 && "..."}
+                      </pre>
+                      <Button
+                        type="button"
+                        variant="destructive"
+                        size="icon"
+                        className="absolute right-2 top-2 h-6 w-6 rounded-full"
+                        onClick={removeLogFile}
+                      >
+                        <X className="h-3 w-3" />
+                        <span className="sr-only">Remove log file</span>
+                      </Button>
+                    </div>
+                  )}
+                  <div className="flex items-center gap-4">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={triggerLogFileInput}
+                      disabled={uploadingLog}
+                    >
+                      <Upload className="mr-2 h-4 w-4" />
+                      {logContent ? "Change Log File" : "Upload Log File"}
+                    </Button>
+                    <input
+                      ref={logFileInputRef}
+                      id="log-file"
+                      type="file"
+                      accept=".log,.txt"
+                      className="hidden"
+                      onChange={handleLogFileUpload}
+                      disabled={uploadingLog}
+                    />
+                    {uploadingLog && <p className="text-sm text-muted-foreground">Loading log file...</p>}
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    Maximum {formattedLongFormLimit} characters of log content will be stored.
+                  </p>
+                </div>
+              </div>
+
+              <div className="flex items-center space-x-2 rounded-lg border border-primary/10 bg-muted/20 p-4">
+                <input
+                  id="featured"
+                  name="featured"
+                  type="checkbox"
+                  defaultChecked={project.featured}
+                  className="h-4 w-4 rounded border-gray-300"
+                />
+                <Label htmlFor="featured">Featured Project</Label>
+              </div>
+            </AnimatedList>
+          </CardContent>
+          <CardFooter>
+            <AnimatedList className="flex w-full flex-col gap-4 sm:flex-row sm:justify-between" stagger={0.12}>
+              <Button type="button" variant="destructive" onClick={handleDelete}>
+                Delete Project
+              </Button>
+              <Button type="submit" disabled={isSubmitting || uploadingLog}>
+                {isSubmitting ? "Saving..." : "Save Changes"}
+              </Button>
+            </AnimatedList>
+          </CardFooter>
+        </form>
+      </Card>
+    </AnimatedSection>
+  )
+}
diff --git a/app/dashboard/projects/[id]/page.tsx b/app/dashboard/projects/[id]/page.tsx
index 0847b3e..53cd4cc 100644
--- a/app/dashboard/projects/[id]/page.tsx
+++ b/app/dashboard/projects/[id]/page.tsx
@@ -1,528 +1,11 @@
-"use client"
-
-import type React from "react"
-
-import { useState, useEffect, useRef } from "react"
-import { useRouter } from "next/navigation"
-import Link from "next/link"
-import { ArrowLeft, Upload, X } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Textarea } from "@/components/ui/textarea"
-import { useToast } from "@/components/ui/use-toast"
-import { DashboardHeader } from "@/components/dashboard-header"
-import { FileUpload } from "@/components/file-upload"
-import { FeatureInput } from "@/components/feature-input"
-import type { FeatureDraft } from "@/components/feature-input"
-import type { Project } from "@/types/database"
-import { AnimatedSection } from "@/components/animated-section"
-import { AnimatedList } from "@/components/animated-list"
-import { PROJECT_LONGFORM_MAX_LENGTH } from "@/lib/project-validation"
+import EditProjectPageClient from "./client-page"
 
 interface EditProjectPageProps {
-  params: {
-    id?: string
-  }
+  params: Promise<{ id?: string }>
 }
 
-export default function EditProjectPage({ params }: EditProjectPageProps) {
-  const router = useRouter()
-  const { toast } = useToast()
-  const [isLoading, setIsLoading] = useState(true)
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [project, setProject] = useState<Project | null>(null)
-  const [imageUrl, setImageUrl] = useState("")
-  const [logoUrl, setLogoUrl] = useState("")
-  const [logContent, setLogContent] = useState("")
-  const [features, setFeatures] = useState<FeatureDraft[]>([])
-  const logFileInputRef = useRef<HTMLInputElement>(null)
-  const [uploadingLog, setUploadingLog] = useState(false)
-  const [projectId, setProjectId] = useState<string | null>(null)
-  const formattedLongFormLimit = new Intl.NumberFormat().format(PROJECT_LONGFORM_MAX_LENGTH)
-
-  useEffect(() => {
-    if (!params?.id) {
-      console.error("Missing project id in route params")
-      toast({
-        title: "Invalid route",
-        description: "The project identifier is missing from the URL.",
-        variant: "destructive",
-      })
-      setIsLoading(false)
-      return
-    }
-
-    setProjectId(params.id)
-  }, [params, toast])
-
-  useEffect(() => {
-    if (!projectId) {
-      return
-    }
-
-    async function fetchProject() {
-      try {
-        const response = await fetch(`/api/projects/${projectId}`)
-
-        if (!response.ok) {
-          throw new Error("Failed to fetch project")
-        }
-
-        const data: {
-          project: Project & {
-            features?: Array<{ id: string; name: string; description: string | null }>
-          }
-        } = await response.json()
-
-        setProject(data.project)
-        setImageUrl(data.project.imageUrl || "")
-        setLogoUrl(data.project.logoUrl || "")
-        setLogContent(data.project.logContent || "")
-        setFeatures(
-          (data.project.features || []).map((feature) => ({
-            id: feature.id,
-            name: feature.name,
-            description: feature.description ?? "",
-          })),
-        )
-      } catch (error) {
-        console.error("Error fetching project:", error)
-        toast({
-          title: "Error",
-          description: "Failed to load project details",
-          variant: "destructive",
-        })
-      } finally {
-        setIsLoading(false)
-      }
-    }
-
-    fetchProject()
-  }, [projectId, toast])
-
-  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    setIsSubmitting(true)
-
-    if (!projectId) {
-      toast({
-        title: "Missing project",
-        description: "We couldn't determine which project should be updated.",
-        variant: "destructive",
-      })
-      setIsSubmitting(false)
-      return
-    }
-
-    const formData = new FormData(event.currentTarget)
-    const title = formData.get("title") as string
-    const description = formData.get("description") as string
-    const technologies = formData.get("technologies") as string
-    const link = formData.get("link") as string
-    const githubUrl = formData.get("githubUrl") as string
-    const featured = Boolean(formData.get("featured"))
-    const developmentProcess = formData.get("developmentProcess") as string
-    const challengesFaced = formData.get("challengesFaced") as string
-    const futurePlans = formData.get("futurePlans") as string
-    const safeLogContent =
-      logContent.length > PROJECT_LONGFORM_MAX_LENGTH
-        ? logContent.slice(0, PROJECT_LONGFORM_MAX_LENGTH)
-        : logContent
-
-    try {
-      const response = await fetch(`/api/projects/${projectId}`, {
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          title,
-          description,
-          technologies,
-          link,
-          githubUrl,
-          imageUrl,
-          logoUrl,
-          featured,
-          developmentProcess,
-          challengesFaced,
-          futurePlans,
-          logContent: safeLogContent,
-          features: features
-            .filter((feature) => feature.name.trim().length > 0)
-            .map((feature) => ({
-              name: feature.name,
-              description: feature.description.trim() ? feature.description : null,
-            })),
-        }),
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || "Failed to update project")
-      }
-
-      toast({
-        title: "Project updated",
-        description: "Your project has been updated successfully.",
-      })
-
-      router.push("/dashboard/projects")
-      router.refresh()
-    } catch (error) {
-      console.error("Project update error:", error)
-      toast({
-        title: "Update failed",
-        description: error instanceof Error ? error.message : "Something went wrong",
-        variant: "destructive",
-      })
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  async function handleDelete() {
-    if (!confirm("Are you sure you want to delete this project?")) {
-      return
-    }
-
-    if (!projectId) {
-      toast({
-        title: "Missing project",
-        description: "We couldn't determine which project should be deleted.",
-        variant: "destructive",
-      })
-      return
-    }
-
-    try {
-      const response = await fetch(`/api/projects/${projectId}`, {
-        method: "DELETE",
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || "Failed to delete project")
-      }
-
-      toast({
-        title: "Project deleted",
-        description: "Your project has been deleted successfully.",
-      })
-
-      router.push("/dashboard/projects")
-      router.refresh()
-    } catch (error) {
-      console.error("Project deletion error:", error)
-      toast({
-        title: "Deletion failed",
-        description: error instanceof Error ? error.message : "Something went wrong",
-        variant: "destructive",
-      })
-    }
-  }
-
-  async function handleLogFileUpload(event: React.ChangeEvent<HTMLInputElement>) {
-    const file = event.target.files?.[0]
-    if (!file) return
-
-    setUploadingLog(true)
-
-    try {
-      // Read file content
-      const text = await file.text()
-      if (text.length > PROJECT_LONGFORM_MAX_LENGTH) {
-        setLogContent(text.slice(0, PROJECT_LONGFORM_MAX_LENGTH))
-        toast({
-          title: "Log truncated",
-          description: `The uploaded log exceeded ${formattedLongFormLimit} characters and was truncated to fit the storage limit.`,
-        })
-      } else {
-        setLogContent(text)
-        toast({
-          title: "Log file loaded",
-          description: "Log file has been loaded successfully.",
-        })
-      }
-    } catch (error) {
-      console.error("Log file reading error:", error)
-      toast({
-        title: "File reading failed",
-        description: error instanceof Error ? error.message : "Something went wrong",
-        variant: "destructive",
-      })
-    } finally {
-      setUploadingLog(false)
-    }
-  }
-
-  function triggerLogFileInput() {
-    logFileInputRef.current?.click()
-  }
-
-  function removeLogFile() {
-    setLogContent("")
-    if (logFileInputRef.current) {
-      logFileInputRef.current.value = ""
-    }
-  }
-
-  if (isLoading) {
-    return (
-      <AnimatedSection className="space-y-6">
-        <DashboardHeader heading="Edit Project" text="Loading project details..." />
-        <div className="flex items-center justify-center h-32">
-          <p className="text-muted-foreground">Loading...</p>
-        </div>
-      </AnimatedSection>
-    )
-  }
-
-  if (!project) {
-    return (
-      <AnimatedSection className="space-y-6">
-        <DashboardHeader heading="Edit Project" text="Project not found" />
-        <div className="flex flex-col items-center justify-center h-32 gap-4">
-          <p className="text-muted-foreground">The requested project could not be found.</p>
-          <Link href="/dashboard/projects">
-            <Button>Back to Projects</Button>
-          </Link>
-        </div>
-      </AnimatedSection>
-    )
-  }
-
-  return (
-    <AnimatedSection className="space-y-6">
-      <DashboardHeader heading="Edit Project" text="Update your project details">
-        <Link href="/dashboard/projects">
-          <Button variant="outline" size="sm" className="gap-1">
-            <ArrowLeft className="h-4 w-4" /> Back to Projects
-          </Button>
-        </Link>
-      </DashboardHeader>
-      <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
-        <CardHeader>
-          <CardTitle>Project Details</CardTitle>
-          <CardDescription>Update the details of your project.</CardDescription>
-        </CardHeader>
-        <form onSubmit={handleSubmit}>
-          <CardContent>
-            <AnimatedList className="space-y-6" initialDelay={0.1}>
-              <div className="space-y-2">
-                <Label htmlFor="title">Title</Label>
-                <Input
-                  id="title"
-                name="title"
-                defaultValue={project.title}
-                placeholder="Project title"
-                required
-              />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="description">Description</Label>
-                <Textarea
-                  id="description"
-                name="description"
-                defaultValue={project.description}
-                placeholder="Project description"
-                rows={5}
-                required
-              />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="technologies">Technologies</Label>
-                <Input
-                  id="technologies"
-                name="technologies"
-                defaultValue={project.technologies}
-                placeholder="Next.js, TypeScript, Tailwind CSS"
-                required
-              />
-                <p className="text-sm text-muted-foreground">Separate technologies with commas</p>
-              </div>
-
-              <AnimatedList className="grid grid-cols-1 gap-6 md:grid-cols-2" stagger={0.12}>
-                <div className="space-y-2">
-                  <Label htmlFor="link">Project Link</Label>
-                  <Input
-                    id="link"
-                    name="link"
-                    defaultValue={project.link || ""}
-                    placeholder="https://example.com/project"
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="githubUrl">GitHub Repository</Label>
-                  <Input
-                    id="githubUrl"
-                    name="githubUrl"
-                    defaultValue={project.githubUrl || ""}
-                    placeholder="https://github.com/username/repo"
-                  />
-                </div>
-              </AnimatedList>
-
-              <AnimatedList className="grid grid-cols-1 gap-6 md:grid-cols-2" stagger={0.12} initialDelay={0.08}>
-                <FileUpload
-                  id="project-image"
-                  label="Project Screenshot"
-                  value={imageUrl}
-                  onChange={setImageUrl}
-                  accept="image/*"
-                  maxSize={2}
-                />
-
-                <FileUpload
-                  id="project-logo"
-                  label="Project Logo"
-                  value={logoUrl}
-                  onChange={setLogoUrl}
-                  accept="image/*"
-                  maxSize={1}
-                />
-              </AnimatedList>
-
-              <div className="space-y-4">
-                <Label className="font-medium">Feature Highlights</Label>
-                <FeatureInput features={features} onChange={setFeatures} />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="developmentProcess">Development Process</Label>
-                <Textarea
-                  id="developmentProcess"
-                  name="developmentProcess"
-                  placeholder="Describe your development process, methodology, and approach"
-                  rows={3}
-                  maxLength={PROJECT_LONGFORM_MAX_LENGTH}
-                  defaultValue={
-                    project.developmentProcess ||
-                    "This project was developed using an agile methodology, with regular iterations and feedback cycles. The development process included planning, design, implementation, testing, and deployment phases."
-                  }
-                />
-                <p className="text-xs text-muted-foreground">
-                  Maximum {formattedLongFormLimit} characters. Longer entries will be trimmed automatically.
-                </p>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="challengesFaced">Challenges Faced</Label>
-                <Textarea
-                  id="challengesFaced"
-                  name="challengesFaced"
-                  placeholder="Describe any challenges you faced during development and how you overcame them"
-                  rows={3}
-                  maxLength={PROJECT_LONGFORM_MAX_LENGTH}
-                  defaultValue={project.challengesFaced || ""}
-                />
-                <p className="text-xs text-muted-foreground">
-                  Maximum {formattedLongFormLimit} characters.
-                </p>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="futurePlans">Future Plans</Label>
-                <Textarea
-                  id="futurePlans"
-                  name="futurePlans"
-                  placeholder="Describe any future plans or improvements for this project"
-                  rows={3}
-                  maxLength={PROJECT_LONGFORM_MAX_LENGTH}
-                  defaultValue={project.futurePlans || ""}
-                />
-                <p className="text-xs text-muted-foreground">
-                  Maximum {formattedLongFormLimit} characters.
-                </p>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="log-file">Project Log File</Label>
-                <div className="mt-2 flex flex-col gap-4">
-                  {logContent && (
-                  <div className="relative overflow-hidden rounded-md border p-3 bg-gray-900 text-gray-200">
-                    <pre className="text-xs overflow-auto max-h-40">
-                      {logContent.slice(0, 500)}
-                      {logContent.length > 500 && "..."}
-                    </pre>
-                    <Button
-                      type="button"
-                      variant="destructive"
-                      size="icon"
-                      className="absolute right-2 top-2 h-6 w-6 rounded-full"
-                      onClick={removeLogFile}
-                    >
-                      <X className="h-3 w-3" />
-                      <span className="sr-only">Remove log file</span>
-                    </Button>
-                  </div>
-                )}
-                <div className="flex items-center gap-4">
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={triggerLogFileInput}
-                    disabled={uploadingLog}
-                  >
-                    <Upload className="mr-2 h-4 w-4" />
-                    {logContent ? "Change Log File" : "Upload Log File"}
-                  </Button>
-                  <input
-                    ref={logFileInputRef}
-                    id="log-file"
-                    type="file"
-                    accept=".log,.txt"
-                    className="hidden"
-                    onChange={handleLogFileUpload}
-                    disabled={uploadingLog}
-                  />
-                  {uploadingLog && (
-                    <p className="text-sm text-muted-foreground">Loading log file...</p>
-                  )}
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  Maximum {formattedLongFormLimit} characters of log content will be stored.
-                </p>
-              </div>
-            </div>
+export default async function EditProjectPage({ params }: EditProjectPageProps) {
+  const resolvedParams = await params
 
-              <div className="flex items-center space-x-2 rounded-lg border border-primary/10 bg-muted/20 p-4">
-                <input
-                  id="featured"
-                  name="featured"
-                  type="checkbox"
-                  defaultChecked={project.featured}
-                  className="h-4 w-4 rounded border-gray-300"
-                />
-                <Label htmlFor="featured">Featured Project</Label>
-              </div>
-            </AnimatedList>
-          </CardContent>
-          <CardFooter>
-            <AnimatedList className="flex w-full flex-col gap-4 sm:flex-row sm:justify-between" stagger={0.12}>
-              <Button type="button" variant="destructive" onClick={handleDelete}>
-                Delete Project
-              </Button>
-              <Button type="submit" disabled={isSubmitting || uploadingLog}>
-                {isSubmitting ? "Saving..." : "Save Changes"}
-              </Button>
-            </AnimatedList>
-          </CardFooter>
-        </form>
-      </Card>
-    </AnimatedSection>
-  )
+  return <EditProjectPageClient id={resolvedParams?.id} />
 }
diff --git a/app/dashboard/projects/[id]/view/page.tsx b/app/dashboard/projects/[id]/view/page.tsx
index c0b1da6..840227d 100644
--- a/app/dashboard/projects/[id]/view/page.tsx
+++ b/app/dashboard/projects/[id]/view/page.tsx
@@ -39,12 +39,12 @@ function formatDate(value: Date | string): string {
   }).format(date)
 }
 
-export default async function ProjectViewPage({
-  params,
-}: {
-  params: { id: string }
-}) {
-  const { id } = params
+interface ProjectViewPageProps {
+  params: Promise<{ id: string }>
+}
+
+export default async function ProjectViewPage({ params }: ProjectViewPageProps) {
+  const { id } = await params
   const session = await getServerSession(authOptions)
 
   if (!session || !session.user?.id) {
diff --git a/app/dashboard/skills/[id]/client-page.tsx b/app/dashboard/skills/[id]/client-page.tsx
new file mode 100644
index 0000000..72a5117
--- /dev/null
+++ b/app/dashboard/skills/[id]/client-page.tsx
@@ -0,0 +1,308 @@
+"use client"
+
+import type React from "react"
+
+import { useEffect, useState } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { ArrowLeft, icons } from "lucide-react"
+import * as LucideIcons from "lucide-react"
+
+import { AnimatedList } from "@/components/animated-list"
+import { AnimatedSection } from "@/components/animated-section"
+import { DashboardHeader } from "@/components/dashboard-header"
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { useToast } from "@/components/ui/use-toast"
+import type { Skill } from "@/types/database"
+
+const iconNames = Object.keys(icons)
+  .filter((key) => key !== "default")
+  .sort((a, b) => a.localeCompare(b))
+
+interface EditSkillPageClientProps {
+  id?: string
+}
+
+export default function EditSkillPageClient({ id }: EditSkillPageClientProps) {
+  const router = useRouter()
+  const { toast } = useToast()
+  const [isLoading, setIsLoading] = useState(true)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [skill, setSkill] = useState<Skill | null>(null)
+  const [selectedIcon, setSelectedIcon] = useState<string>("Code")
+
+  const IconComponent = selectedIcon
+    ? (LucideIcons[selectedIcon as keyof typeof LucideIcons] as React.FC<{ className?: string }>)
+    : null
+
+  useEffect(() => {
+    if (id) {
+      return
+    }
+
+    console.error("Missing skill id in route params")
+    toast({
+      title: "Invalid route",
+      description: "The skill identifier is missing from the URL.",
+      variant: "destructive",
+    })
+    setIsLoading(false)
+  }, [id, toast])
+
+  useEffect(() => {
+    if (!id) {
+      return
+    }
+
+    async function fetchSkill() {
+      try {
+        const response = await fetch(`/api/skills/${id}`)
+
+        if (!response.ok) {
+          throw new Error("Failed to fetch skill")
+        }
+
+        const data: { skill: Skill } = await response.json()
+        setSkill(data.skill)
+        if (data.skill.iconName) {
+          setSelectedIcon(data.skill.iconName)
+        }
+      } catch (error) {
+        console.error("Error fetching skill:", error)
+        toast({
+          title: "Error",
+          description: "Failed to load skill details",
+          variant: "destructive",
+        })
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchSkill()
+  }, [id, toast])
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setIsSubmitting(true)
+
+    if (!id) {
+      toast({
+        title: "Missing skill",
+        description: "We couldn't determine which skill should be updated.",
+        variant: "destructive",
+      })
+      setIsSubmitting(false)
+      return
+    }
+
+    const formData = new FormData(event.currentTarget)
+    const name = formData.get("name") as string
+    const category = formData.get("category") as string
+    const level = formData.get("level") as string
+    const years = Number(formData.get("years"))
+    const iconName = selectedIcon
+
+    try {
+      const response = await fetch(`/api/skills/${id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name,
+          category,
+          level,
+          years,
+          iconName,
+        }),
+      })
+
+      if (!response.ok) {
+        const error = await response.json()
+        throw new Error(error.error || "Failed to update skill")
+      }
+
+      toast({
+        title: "Skill updated",
+        description: "Your skill has been updated successfully.",
+      })
+
+      router.push("/dashboard/skills")
+      router.refresh()
+    } catch (error) {
+      console.error("Skill update error:", error)
+      toast({
+        title: "Update failed",
+        description: error instanceof Error ? error.message : "Something went wrong",
+        variant: "destructive",
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  async function handleDelete() {
+    if (!confirm("Are you sure you want to delete this skill?")) {
+      return
+    }
+
+    if (!id) {
+      toast({
+        title: "Missing skill",
+        description: "We couldn't determine which skill should be deleted.",
+        variant: "destructive",
+      })
+      return
+    }
+
+    try {
+      const response = await fetch(`/api/skills/${id}`, {
+        method: "DELETE",
+      })
+
+      if (!response.ok) {
+        const error = await response.json()
+        throw new Error(error.error || "Failed to delete skill")
+      }
+
+      toast({
+        title: "Skill deleted",
+        description: "Your skill has been deleted successfully.",
+      })
+
+      router.push("/dashboard/skills")
+      router.refresh()
+    } catch (error) {
+      console.error("Skill deletion error:", error)
+      toast({
+        title: "Deletion failed",
+        description: error instanceof Error ? error.message : "Something went wrong",
+        variant: "destructive",
+      })
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <AnimatedSection className="space-y-6">
+        <DashboardHeader heading="Edit Skill" text="Loading skill details..." />
+        <div className="flex items-center justify-center h-32">
+          <p className="text-muted-foreground">Loading...</p>
+        </div>
+      </AnimatedSection>
+    )
+  }
+
+  if (!skill) {
+    return (
+      <AnimatedSection className="space-y-6">
+        <DashboardHeader heading="Edit Skill" text="Skill not found" />
+        <div className="flex flex-col items-center justify-center h-32 gap-4">
+          <p className="text-muted-foreground">The requested skill could not be found.</p>
+          <Link href="/dashboard/skills">
+            <Button>Back to Skills</Button>
+          </Link>
+        </div>
+      </AnimatedSection>
+    )
+  }
+
+  return (
+    <AnimatedSection className="space-y-6">
+      <DashboardHeader heading="Edit Skill" text="Update your skill details">
+        <Link href="/dashboard/skills">
+          <Button variant="outline" size="sm" className="gap-1">
+            <ArrowLeft className="h-4 w-4" /> Back to Skills
+          </Button>
+        </Link>
+      </DashboardHeader>
+      <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
+        <form onSubmit={handleSubmit}>
+          <CardHeader>
+            <CardTitle>Skill Details</CardTitle>
+            <CardDescription>Update the details of your skill.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <AnimatedList className="space-y-4" initialDelay={0.1}>
+              <div className="space-y-2">
+                <Label htmlFor="name">Skill Name</Label>
+                <Input id="name" name="name" defaultValue={skill.name} required />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="category">Category</Label>
+                <Input id="category" name="category" defaultValue={skill.category || ""} required />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="level">Skill Level</Label>
+                <Select name="level" defaultValue={skill.level}>
+                  <SelectTrigger id="level">
+                    <SelectValue placeholder="Select skill level" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="Beginner">Beginner</SelectItem>
+                    <SelectItem value="Intermediate">Intermediate</SelectItem>
+                    <SelectItem value="Advanced">Advanced</SelectItem>
+                    <SelectItem value="Expert">Expert</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="years">Years of Experience</Label>
+                <Input id="years" name="years" type="number" min={0} defaultValue={skill.years || 0} required />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="icon">Icon</Label>
+                <Select value={selectedIcon} onValueChange={setSelectedIcon}>
+                  <SelectTrigger id="icon">
+                    <SelectValue placeholder="Select an icon">
+                      {selectedIcon}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectContent className="max-h-72">
+                    {iconNames.map((iconName) => (
+                      <SelectItem key={iconName} value={iconName}>
+                        {iconName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {IconComponent && (
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <IconComponent className="h-5 w-5" />
+                    <span>Preview</span>
+                  </div>
+                )}
+              </div>
+            </AnimatedList>
+          </CardContent>
+          <CardFooter className="flex items-center justify-between border-t border-primary/10 bg-muted/30 py-4">
+            <Button type="button" variant="destructive" onClick={handleDelete} disabled={isSubmitting}>
+              Delete Skill
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? "Saving..." : "Save Changes"}
+            </Button>
+          </CardFooter>
+        </form>
+      </Card>
+    </AnimatedSection>
+  )
+}
diff --git a/app/dashboard/skills/[id]/page.tsx b/app/dashboard/skills/[id]/page.tsx
index a8c55f2..01604c5 100644
--- a/app/dashboard/skills/[id]/page.tsx
+++ b/app/dashboard/skills/[id]/page.tsx
@@ -1,345 +1,11 @@
-"use client"
-
-import type React from "react"
-
-import { useState, useEffect } from "react"
-import { useRouter } from "next/navigation"
-import Link from "next/link"
-import { ArrowLeft, icons } from "lucide-react"
-import * as LucideIcons from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { useToast } from "@/components/ui/use-toast"
-import { DashboardHeader } from "@/components/dashboard-header"
-import type { Skill } from "@/types/database"
-import { AnimatedSection } from "@/components/animated-section"
-import { AnimatedList } from "@/components/animated-list"
-
-// Get all available Lucide icons
-const iconNames = Object.keys(icons)
-  .filter((key) => key !== "default")
-  .sort((a, b) => a.localeCompare(b))
+import EditSkillPageClient from "./client-page"
 
 interface EditSkillPageProps {
-  params: {
-    id?: string
-  }
+  params: Promise<{ id?: string }>
 }
 
-export default function EditSkillPage({ params }: EditSkillPageProps) {
-  const router = useRouter()
-  const { toast } = useToast()
-  const [isLoading, setIsLoading] = useState(true)
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [skill, setSkill] = useState<Skill | null>(null)
-  const [selectedIcon, setSelectedIcon] = useState<string>("Code")
-  const [skillId, setSkillId] = useState<string | null>(null)
-
-  // For icon preview
-  const IconComponent = selectedIcon
-    ? (LucideIcons[selectedIcon as keyof typeof LucideIcons] as React.FC<{ className?: string }>)
-    : null
-
-  useEffect(() => {
-    if (!params?.id) {
-      console.error("Missing skill id in route params")
-      toast({
-        title: "Invalid route",
-        description: "The skill identifier is missing from the URL.",
-        variant: "destructive",
-      })
-      setIsLoading(false)
-      return
-    }
-
-    setSkillId(params.id)
-  }, [params, toast])
-
-  useEffect(() => {
-    if (!skillId) {
-      return
-    }
-
-    async function fetchSkill() {
-      try {
-        const response = await fetch(`/api/skills/${skillId}`)
-
-        if (!response.ok) {
-          throw new Error("Failed to fetch skill")
-        }
-
-        const data: { skill: Skill } = await response.json()
-        setSkill(data.skill)
-        if (data.skill.iconName) {
-          setSelectedIcon(data.skill.iconName)
-        }
-      } catch (error) {
-        console.error("Error fetching skill:", error)
-        toast({
-          title: "Error",
-          description: "Failed to load skill details",
-          variant: "destructive",
-        })
-      } finally {
-        setIsLoading(false)
-      }
-    }
-
-    fetchSkill()
-  }, [skillId, toast])
-
-  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    setIsSubmitting(true)
-
-    if (!skillId) {
-      toast({
-        title: "Missing skill",
-        description: "We couldn't determine which skill should be updated.",
-        variant: "destructive",
-      })
-      setIsSubmitting(false)
-      return
-    }
-
-    const formData = new FormData(event.currentTarget)
-    const name = formData.get("name") as string
-    const category = formData.get("category") as string
-    const level = formData.get("level") as string
-    const years = Number(formData.get("years"))
-    const iconName = selectedIcon
-
-    try {
-      const response = await fetch(`/api/skills/${skillId}`, {
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          name,
-          category,
-          level,
-          years,
-          iconName,
-        }),
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || "Failed to update skill")
-      }
-
-      toast({
-        title: "Skill updated",
-        description: "Your skill has been updated successfully.",
-      })
-
-      router.push("/dashboard/skills")
-      router.refresh()
-    } catch (error) {
-      console.error("Skill update error:", error)
-      toast({
-        title: "Update failed",
-        description: error instanceof Error ? error.message : "Something went wrong",
-        variant: "destructive",
-      })
-    } finally {
-      setIsSubmitting(false)
-    }
-  }
-
-  async function handleDelete() {
-    if (!confirm("Are you sure you want to delete this skill?")) {
-      return
-    }
-
-    if (!skillId) {
-      toast({
-        title: "Missing skill",
-        description: "We couldn't determine which skill should be deleted.",
-        variant: "destructive",
-      })
-      return
-    }
-
-    try {
-      const response = await fetch(`/api/skills/${skillId}`, {
-        method: "DELETE",
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || "Failed to delete skill")
-      }
-
-      toast({
-        title: "Skill deleted",
-        description: "Your skill has been deleted successfully.",
-      })
-
-      router.push("/dashboard/skills")
-      router.refresh()
-    } catch (error) {
-      console.error("Skill deletion error:", error)
-      toast({
-        title: "Deletion failed",
-        description: error instanceof Error ? error.message : "Something went wrong",
-        variant: "destructive",
-      })
-    }
-  }
-
-  if (isLoading) {
-    return (
-      <AnimatedSection className="space-y-6">
-        <DashboardHeader heading="Edit Skill" text="Loading skill details..." />
-        <div className="flex items-center justify-center h-32">
-          <p className="text-muted-foreground">Loading...</p>
-        </div>
-      </AnimatedSection>
-    )
-  }
-
-  if (!skill) {
-    return (
-      <AnimatedSection className="space-y-6">
-        <DashboardHeader heading="Edit Skill" text="Skill not found" />
-        <div className="flex flex-col items-center justify-center h-32 gap-4">
-          <p className="text-muted-foreground">The requested skill could not be found.</p>
-          <Link href="/dashboard/skills">
-            <Button>Back to Skills</Button>
-          </Link>
-        </div>
-      </AnimatedSection>
-    )
-  }
+export default async function EditSkillPage({ params }: EditSkillPageProps) {
+  const resolvedParams = await params
 
-  return (
-    <AnimatedSection className="space-y-6">
-      <DashboardHeader heading="Edit Skill" text="Update your skill details">
-        <Link href="/dashboard/skills">
-          <Button variant="outline" size="sm" className="gap-1">
-            <ArrowLeft className="h-4 w-4" /> Back to Skills
-          </Button>
-        </Link>
-      </DashboardHeader>
-      <Card className="bg-background/60 backdrop-blur-sm border-primary/20 shadow-lg">
-        <CardHeader>
-          <CardTitle>Skill Details</CardTitle>
-          <CardDescription>Update the details of your skill.</CardDescription>
-        </CardHeader>
-        <form onSubmit={handleSubmit}>
-          <CardContent>
-            <AnimatedList className="space-y-4" initialDelay={0.1}>
-              <div className="space-y-2">
-                <Label htmlFor="name">Skill Name</Label>
-                <Input
-                  id="name"
-                  name="name"
-                  defaultValue={skill.name}
-                  placeholder="Skill name"
-                  required
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="category">Category</Label>
-                <Select name="category" defaultValue={skill.category}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select category" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="Frontend">Frontend</SelectItem>
-                    <SelectItem value="Backend">Backend</SelectItem>
-                    <SelectItem value="Database">Database</SelectItem>
-                    <SelectItem value="DevOps">DevOps</SelectItem>
-                    <SelectItem value="Language">Language</SelectItem>
-                    <SelectItem value="Other">Other</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <AnimatedList className="grid grid-cols-1 gap-4 md:grid-cols-2" stagger={0.12}>
-                <div className="space-y-2">
-                  <Label htmlFor="level">Level</Label>
-                  <Select name="level" defaultValue={skill.level}>
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select level" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="Beginner">Beginner</SelectItem>
-                      <SelectItem value="Intermediate">Intermediate</SelectItem>
-                      <SelectItem value="Advanced">Advanced</SelectItem>
-                      <SelectItem value="Expert">Expert</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="years">Years of Experience</Label>
-                  <Input
-                    id="years"
-                    name="years"
-                    type="number"
-                    min="0"
-                    step="0.5"
-                    defaultValue={skill.years}
-                    required
-                  />
-                </div>
-              </AnimatedList>
-              <div className="space-y-2">
-                <Label htmlFor="iconName">Icon</Label>
-                <AnimatedList className="flex flex-col gap-4 md:flex-row" stagger={0.12} initialDelay={0.05}>
-                  <div className="flex h-12 w-12 items-center justify-center rounded-md border border-primary/10 bg-muted/40">
-                    {IconComponent ? (
-                      <IconComponent className="h-6 w-6 text-primary" />
-                    ) : (
-                      <span className="text-xs text-muted-foreground">Preview</span>
-                    )}
-                  </div>
-                  <Select value={selectedIcon} onValueChange={setSelectedIcon}>
-                    <SelectTrigger className="w-full">
-                      <SelectValue placeholder="Select icon" />
-                    </SelectTrigger>
-                    <SelectContent className="max-h-[300px]">
-                      {iconNames.map((iconName) => (
-                        <SelectItem key={iconName} value={iconName}>
-                          {iconName}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </AnimatedList>
-              </div>
-            </AnimatedList>
-          </CardContent>
-          <CardFooter>
-            <AnimatedList className="flex w-full flex-col gap-4 sm:flex-row sm:justify-between" stagger={0.12}>
-              <Button type="button" variant="destructive" onClick={handleDelete}>
-                Delete Skill
-              </Button>
-              <Button type="submit" disabled={isSubmitting}>
-                {isSubmitting ? "Saving..." : "Save Changes"}
-              </Button>
-            </AnimatedList>
-          </CardFooter>
-        </form>
-      </Card>
-    </AnimatedSection>
-  )
+  return <EditSkillPageClient id={resolvedParams?.id} />
 }