diff --git a/app/auth/login/page.tsx b/app/auth/login/page.tsx
index 4b3efe2..33a4479 100644
--- a/app/auth/login/page.tsx
+++ b/app/auth/login/page.tsx
@@ -1,30 +1,34 @@
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Mail, Lock, ArrowRight } from "lucide-react"
-import Link from "next/link"
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { Mail, Lock, ArrowRight } from "lucide-react";
+import Link from "next/link";
 
 export const metadata = {
   title: "Sign In | Django Rwanda Community",
   description: "Sign in to your Django Rwanda Community account",
-}
+};
 
 export default function LoginPage() {
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center">
+    <div className="min-h-screen flex items-center justify-center">
       <div className="mx-auto w-full max-w-md px-4">
         <div className="mb-8 text-center">
-          <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-accent text-primary-foreground font-bold text-lg">
+          <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary-light text-primary-foreground font-bold text-lg">
             D
           </div>
           <h1 className="text-3xl font-bold text-foreground">Welcome Back</h1>
-          <p className="mt-2 text-foreground/60">Sign in to your Django Rwanda Community account</p>
+          <p className="mt-2 text-foreground/60">
+            Sign in to your Django Rwanda Community account
+          </p>
         </div>
 
         <Card className="border border-border/50 p-8 bg-gradient-to-br from-background to-muted/50">
           <form className="space-y-4">
             {/* Email */}
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">Email Address</label>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Email Address
+              </label>
               <div className="relative">
                 <Mail className="absolute left-3 top-3 h-5 w-5 text-foreground/40" />
                 <input
@@ -37,7 +41,9 @@ export default function LoginPage() {
 
             {/* Password */}
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">Password</label>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Password
+              </label>
               <div className="relative">
                 <Lock className="absolute left-3 top-3 h-5 w-5 text-foreground/40" />
                 <input
@@ -51,7 +57,10 @@ export default function LoginPage() {
             {/* Remember me & Forgot password */}
             <div className="flex items-center justify-between text-sm">
               <label className="flex items-center gap-2 text-foreground/60">
-                <input type="checkbox" className="rounded border border-border" />
+                <input
+                  type="checkbox"
+                  className="rounded border border-border"
+                />
                 Remember me
               </label>
               <Link href="#" className="text-primary hover:text-primary/80">
@@ -60,7 +69,7 @@ export default function LoginPage() {
             </div>
 
             {/* Submit */}
-            <Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 py-2">
+            <Button variant="gradient" className="w-full py-2">
               Sign In
               <ArrowRight className="ml-2 h-4 w-4" />
             </Button>
@@ -87,11 +96,14 @@ export default function LoginPage() {
         {/* Sign up link */}
         <p className="mt-6 text-center text-sm text-foreground/60">
           Don&apos;t have an account?{" "}
-          <Link href="/auth/signup" className="font-medium text-primary hover:text-primary/80">
+          <Link
+            href="/auth/signup"
+            className="font-medium text-primary hover:text-primary/80"
+          >
             Sign up here
           </Link>
         </p>
       </div>
     </div>
-  )
+  );
 }
diff --git a/app/auth/signup/page.tsx b/app/auth/signup/page.tsx
index c3f4173..c9987ce 100644
--- a/app/auth/signup/page.tsx
+++ b/app/auth/signup/page.tsx
@@ -1,30 +1,36 @@
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { User, Mail, Lock, Zap } from "lucide-react"
-import Link from "next/link"
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { User, Mail, Lock, Zap } from "lucide-react";
+import Link from "next/link";
 
 export const metadata = {
   title: "Sign Up | Django Rwanda Community",
   description: "Create your Django Rwanda Community account",
-}
+};
 
 export default function SignupPage() {
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center">
+    <div className="min-h-screen flex items-center justify-center">
       <div className="mx-auto w-full max-w-md px-4">
         <div className="mb-8 text-center">
-          <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-accent text-primary-foreground font-bold text-lg">
+          <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary-light text-primary-foreground font-bold text-lg">
             D
           </div>
-          <h1 className="text-3xl font-bold text-foreground">Join Django Rwanda</h1>
-          <p className="mt-2 text-foreground/60">Create your account and start your journey</p>
+          <h1 className="text-3xl font-bold text-foreground">
+            Join Django Rwanda
+          </h1>
+          <p className="mt-2 text-foreground/60">
+            Create your account and start your journey
+          </p>
         </div>
 
         <Card className="border border-border/50 p-8 bg-gradient-to-br from-background to-muted/50">
           <form className="space-y-4">
             {/* Full Name */}
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">Full Name</label>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Full Name
+              </label>
               <div className="relative">
                 <User className="absolute left-3 top-3 h-5 w-5 text-foreground/40" />
                 <input
@@ -37,7 +43,9 @@ export default function SignupPage() {
 
             {/* Email */}
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">Email Address</label>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Email Address
+              </label>
               <div className="relative">
                 <Mail className="absolute left-3 top-3 h-5 w-5 text-foreground/40" />
                 <input
@@ -50,7 +58,9 @@ export default function SignupPage() {
 
             {/* Password */}
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">Password</label>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Password
+              </label>
               <div className="relative">
                 <Lock className="absolute left-3 top-3 h-5 w-5 text-foreground/40" />
                 <input
@@ -63,7 +73,9 @@ export default function SignupPage() {
 
             {/* Confirm Password */}
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">Confirm Password</label>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Confirm Password
+              </label>
               <div className="relative">
                 <Lock className="absolute left-3 top-3 h-5 w-5 text-foreground/40" />
                 <input
@@ -76,22 +88,36 @@ export default function SignupPage() {
 
             {/* Interests */}
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">What interests you?</label>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                What interests you?
+              </label>
               <div className="space-y-2">
                 <label className="flex items-center gap-2 text-foreground/60">
-                  <input type="checkbox" className="rounded border border-border" />
+                  <input
+                    type="checkbox"
+                    className="rounded border border-border"
+                  />
                   Learning Django
                 </label>
                 <label className="flex items-center gap-2 text-foreground/60">
-                  <input type="checkbox" className="rounded border border-border" />
+                  <input
+                    type="checkbox"
+                    className="rounded border border-border"
+                  />
                   Contributing to open source
                 </label>
                 <label className="flex items-center gap-2 text-foreground/60">
-                  <input type="checkbox" className="rounded border border-border" />
+                  <input
+                    type="checkbox"
+                    className="rounded border border-border"
+                  />
                   Networking with developers
                 </label>
                 <label className="flex items-center gap-2 text-foreground/60">
-                  <input type="checkbox" className="rounded border border-border" />
+                  <input
+                    type="checkbox"
+                    className="rounded border border-border"
+                  />
                   Starting a startup
                 </label>
               </div>
@@ -99,21 +125,30 @@ export default function SignupPage() {
 
             {/* Terms agreement */}
             <label className="flex items-start gap-2 text-sm text-foreground/60">
-              <input type="checkbox" className="mt-1 rounded border border-border" />
+              <input
+                type="checkbox"
+                className="mt-1 rounded border border-border"
+              />
               <span>
                 I agree to the{" "}
-                <Link href="/terms" className="text-primary hover:text-primary/80">
+                <Link
+                  href="/terms"
+                  className="text-primary hover:text-primary/80"
+                >
                   Terms of Service
                 </Link>{" "}
                 and{" "}
-                <Link href="/privacy" className="text-primary hover:text-primary/80">
+                <Link
+                  href="/privacy"
+                  className="text-primary hover:text-primary/80"
+                >
                   Privacy Policy
                 </Link>
               </span>
             </label>
 
             {/* Submit */}
-            <Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 py-2">
+            <Button variant="gradient" className="w-full py-2">
               Create Account
               <Zap className="ml-2 h-4 w-4" />
             </Button>
@@ -140,11 +175,14 @@ export default function SignupPage() {
         {/* Sign in link */}
         <p className="mt-6 text-center text-sm text-foreground/60">
           Already have an account?{" "}
-          <Link href="/auth/login" className="font-medium text-primary hover:text-primary/80">
+          <Link
+            href="/auth/login"
+            className="font-medium text-primary hover:text-primary/80"
+          >
             Sign in here
           </Link>
         </p>
       </div>
     </div>
-  )
+  );
 }
diff --git a/app/community/code-of-conduct/page.tsx b/app/community/code-of-conduct/page.tsx
index 3fd1fe9..84d9d1f 100644
--- a/app/community/code-of-conduct/page.tsx
+++ b/app/community/code-of-conduct/page.tsx
@@ -1,10 +1,10 @@
-import { Card } from "@/components/ui/card"
-import Link from "next/link"
+import { Card } from "@/src/components/ui/card";
+import Link from "next/link";
 
 export const metadata = {
   title: "Code of Conduct | Django Rwanda Community",
   description: "Our community values and principles",
-}
+};
 
 const sections = [
   {
@@ -32,17 +32,22 @@ const sections = [
     content:
       "Violations of this code of conduct will be taken seriously and may result in temporary or permanent removal from the community. Reports should be sent to conduct@djangorwanda.dev.",
   },
-]
+];
 
 export default function CodeOfConductPage() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen">
       <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
-          <Link href="/community" className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4">
+          <Link
+            href="/community"
+            className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4"
+          >
             ← Back to Community
           </Link>
-          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">Code of Conduct</h1>
+          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">
+            Code of Conduct
+          </h1>
           <p className="text-lg text-foreground/70">
             Our values and principles for a respectful and inclusive community.
           </p>
@@ -54,8 +59,12 @@ export default function CodeOfConductPage() {
           <div className="space-y-8">
             {sections.map((section, idx) => (
               <Card key={idx} className="border border-border/50 p-8">
-                <h2 className="mb-4 text-2xl font-bold text-foreground">{section.title}</h2>
-                {section.content && <p className="text-foreground/70 mb-4">{section.content}</p>}
+                <h2 className="mb-4 text-2xl font-bold text-foreground">
+                  {section.title}
+                </h2>
+                {section.content && (
+                  <p className="text-foreground/70 mb-4">{section.content}</p>
+                )}
                 {section.items && (
                   <ul className="space-y-2">
                     {section.items.map((item, i) => (
@@ -72,5 +81,5 @@ export default function CodeOfConductPage() {
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/community/contribute/page.tsx b/app/community/contribute/page.tsx
index aeffdb0..5625829 100644
--- a/app/community/contribute/page.tsx
+++ b/app/community/contribute/page.tsx
@@ -1,47 +1,57 @@
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { BookOpen, Code, Users, Megaphone } from "lucide-react"
-import Link from "next/link"
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { BookOpen, Code, Users, Megaphone } from "lucide-react";
+import Link from "next/link";
 
 export const metadata = {
   title: "Contribute | Django Rwanda Community",
   description: "Help shape the future of Django Rwanda",
-}
+};
 
 const contributionAreas = [
   {
     icon: Code,
     title: "Code & Development",
-    description: "Contribute to our open-source projects and help build solutions for African communities.",
+    description:
+      "Contribute to our open-source projects and help build solutions for African communities.",
   },
   {
     icon: BookOpen,
     title: "Content & Documentation",
-    description: "Help us create tutorials, guides, and documentation for the community.",
+    description:
+      "Help us create tutorials, guides, and documentation for the community.",
   },
   {
     icon: Users,
     title: "Community Support",
-    description: "Become a mentor, organize events, or moderate our community channels.",
+    description:
+      "Become a mentor, organize events, or moderate our community channels.",
   },
   {
     icon: Megaphone,
     title: "Marketing & Outreach",
-    description: "Help spread the word about Django Rwanda and grow our community.",
+    description:
+      "Help spread the word about Django Rwanda and grow our community.",
   },
-]
+];
 
 export default function ContributePage() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen">
       <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <Link href="/community" className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4">
+          <Link
+            href="/community"
+            className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4"
+          >
             ← Back to Community
           </Link>
-          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">How to Contribute</h1>
+          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">
+            How to Contribute
+          </h1>
           <p className="max-w-2xl text-lg text-foreground/70">
-            Every contribution matters. There are many ways to help build and improve Django Rwanda.
+            Every contribution matters. There are many ways to help build and
+            improve Django Rwanda.
           </p>
         </div>
       </section>
@@ -50,22 +60,26 @@ export default function ContributePage() {
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="grid gap-6 md:grid-cols-2 mb-12">
             {contributionAreas.map((area, idx) => {
-              const Icon = area.icon
+              const Icon = area.icon;
               return (
                 <Card key={idx} className="border border-border/50 p-8">
                   <div className="mb-4 inline-flex rounded-lg bg-primary/10 p-3">
                     <Icon className="h-6 w-6 text-primary" />
                   </div>
-                  <h3 className="mb-2 text-xl font-bold text-foreground">{area.title}</h3>
+                  <h3 className="mb-2 text-xl font-bold text-foreground">
+                    {area.title}
+                  </h3>
                   <p className="text-foreground/70">{area.description}</p>
                 </Card>
-              )
+              );
             })}
           </div>
 
           {/* Getting Started */}
           <Card className="border border-border/50 p-8 bg-gradient-to-r from-accent/5 to-primary/5">
-            <h2 className="mb-4 text-2xl font-bold text-foreground">Getting Started</h2>
+            <h2 className="mb-4 text-2xl font-bold text-foreground">
+              Getting Started
+            </h2>
             <ol className="space-y-3 text-foreground/70 mb-6">
               <li className="flex gap-3">
                 <span className="font-bold text-primary">1.</span>
@@ -85,13 +99,11 @@ export default function ContributePage() {
               </li>
             </ol>
             <Link href="https://github.com/djangorwanda" target="_blank">
-              <Button className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
-                View on GitHub
-              </Button>
+              <Button variant="gradient">View on GitHub</Button>
             </Link>
           </Card>
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/community/join/page.tsx b/app/community/join/page.tsx
index 530757a..90e643f 100644
--- a/app/community/join/page.tsx
+++ b/app/community/join/page.tsx
@@ -1,12 +1,12 @@
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Check } from "lucide-react"
-import Link from "next/link"
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { Check } from "lucide-react";
+import Link from "next/link";
 
 export const metadata = {
   title: "Join Community | Django Rwanda",
   description: "Become a member of Django Rwanda Community",
-}
+};
 
 const benefits = [
   "Access to exclusive workshops and training materials",
@@ -15,19 +15,25 @@ const benefits = [
   "Get mentorship from experienced developers",
   "Access to job board and opportunities",
   "Connect with 500+ community members",
-]
+];
 
 export default function JoinPage() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen">
       <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <Link href="/community" className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4">
+          <Link
+            href="/community"
+            className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4"
+          >
             ← Back to Community
           </Link>
-          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">Join Django Rwanda</h1>
+          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">
+            Join Django Rwanda
+          </h1>
           <p className="max-w-2xl text-lg text-foreground/70">
-            Be part of a vibrant community of African developers dedicated to innovation and learning.
+            Be part of a vibrant community of African developers dedicated to
+            innovation and learning.
           </p>
         </div>
       </section>
@@ -37,7 +43,9 @@ export default function JoinPage() {
           <div className="grid gap-12 md:grid-cols-2">
             {/* Benefits */}
             <div>
-              <h2 className="mb-6 text-2xl font-bold text-foreground">Membership Benefits</h2>
+              <h2 className="mb-6 text-2xl font-bold text-foreground">
+                Membership Benefits
+              </h2>
               <Card className="border border-border/50 p-8">
                 <ul className="space-y-4">
                   {benefits.map((benefit, idx) => (
@@ -52,7 +60,9 @@ export default function JoinPage() {
 
             {/* Signup Form */}
             <div>
-              <h2 className="mb-6 text-2xl font-bold text-foreground">Get Started</h2>
+              <h2 className="mb-6 text-2xl font-bold text-foreground">
+                Get Started
+              </h2>
               <Card className="border border-border/50 p-8 bg-gradient-to-br from-primary/5 to-accent/5">
                 <form className="space-y-4">
                   <input
@@ -76,7 +86,7 @@ export default function JoinPage() {
                     rows={4}
                     className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
                   />
-                  <Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+                  <Button variant="gradient" className="w-full">
                     Join Community
                   </Button>
                 </form>
@@ -86,5 +96,5 @@ export default function JoinPage() {
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/community/page.tsx b/app/community/page.tsx
index 63886aa..388f2a5 100644
--- a/app/community/page.tsx
+++ b/app/community/page.tsx
@@ -1,11 +1,11 @@
-import { Card } from "@/components/ui/card"
-import { Users, BookOpen, Share2, Gift, ArrowRight } from "lucide-react"
-import Link from "next/link"
+import { Card } from "@/src/components/ui/card";
+import { Users, BookOpen, Share2, Gift, ArrowRight } from "lucide-react";
+import Link from "next/link";
 
 export const metadata = {
   title: "Community | Django Rwanda",
   description: "Join the Django Rwanda Community and grow with us",
-}
+};
 
 const communityLinks = [
   {
@@ -40,18 +40,21 @@ const communityLinks = [
     icon: Gift,
     color: "from-primary/10 to-secondary/10",
   },
-]
+];
 
 export default function CommunityPage() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen">
       {/* Header */}
       <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="space-y-4">
-            <h1 className="text-4xl font-bold text-foreground md:text-5xl">Community</h1>
+            <h1 className="text-4xl font-bold text-foreground md:text-5xl">
+              Community
+            </h1>
             <p className="max-w-2xl text-lg text-foreground/70">
-              Join, learn, contribute, and grow with Django Rwanda. Choose your journey below.
+              Join, learn, contribute, and grow with Django Rwanda. Choose your
+              journey below.
             </p>
           </div>
         </div>
@@ -62,7 +65,7 @@ export default function CommunityPage() {
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="grid gap-6 md:grid-cols-2">
             {communityLinks.map((item) => {
-              const Icon = item.icon
+              const Icon = item.icon;
               return (
                 <Link key={item.id} href={item.href}>
                   <Card
@@ -71,19 +74,23 @@ export default function CommunityPage() {
                     <div className="mb-4 inline-flex rounded-lg bg-background p-3">
                       <Icon className="h-6 w-6 text-primary" />
                     </div>
-                    <h3 className="mb-2 text-2xl font-bold text-foreground">{item.title}</h3>
-                    <p className="mb-6 text-foreground/70">{item.description}</p>
+                    <h3 className="mb-2 text-2xl font-bold text-foreground">
+                      {item.title}
+                    </h3>
+                    <p className="mb-6 text-foreground/70">
+                      {item.description}
+                    </p>
                     <div className="flex items-center gap-2 text-primary font-medium">
                       Explore
                       <ArrowRight className="h-4 w-4" />
                     </div>
                   </Card>
                 </Link>
-              )
+              );
             })}
           </div>
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/community/sponsorship/page.tsx b/app/community/sponsorship/page.tsx
index 84aff23..24db96b 100644
--- a/app/community/sponsorship/page.tsx
+++ b/app/community/sponsorship/page.tsx
@@ -1,25 +1,35 @@
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Gift, Star, Crown, Zap } from "lucide-react"
-import Link from "next/link"
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { Gift, Star, Crown, Zap } from "lucide-react";
+import Link from "next/link";
 
 export const metadata = {
   title: "Sponsorship | Django Rwanda Community",
   description: "Partner with us to support the community",
-}
+};
 
 const sponsorshipTiers = [
   {
     name: "Bronze",
     price: "$500",
     icon: Gift,
-    benefits: ["Logo on website", "Social media mention", "Event booth access", "Community newsletter"],
+    benefits: [
+      "Logo on website",
+      "Social media mention",
+      "Event booth access",
+      "Community newsletter",
+    ],
   },
   {
     name: "Silver",
     price: "$2,500",
     icon: Star,
-    benefits: ["All Bronze benefits", "Speaking opportunity", "Job board listing", "Quarterly newsletter feature"],
+    benefits: [
+      "All Bronze benefits",
+      "Speaking opportunity",
+      "Job board listing",
+      "Quarterly newsletter feature",
+    ],
   },
   {
     name: "Gold",
@@ -36,21 +46,32 @@ const sponsorshipTiers = [
     name: "Platinum",
     price: "Custom",
     icon: Zap,
-    benefits: ["All Gold benefits", "Custom partnership plan", "Executive visibility", "Strategic collaboration"],
+    benefits: [
+      "All Gold benefits",
+      "Custom partnership plan",
+      "Executive visibility",
+      "Strategic collaboration",
+    ],
   },
-]
+];
 
 export default function SponsorshipPage() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen">
       <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <Link href="/community" className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4">
+          <Link
+            href="/community"
+            className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4"
+          >
             ← Back to Community
           </Link>
-          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">Become a Sponsor</h1>
+          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">
+            Become a Sponsor
+          </h1>
           <p className="max-w-2xl text-lg text-foreground/70">
-            Partner with Django Rwanda to support African developers and make a lasting impact on our community.
+            Partner with Django Rwanda to support African developers and make a
+            lasting impact on our community.
           </p>
         </div>
       </section>
@@ -59,10 +80,12 @@ export default function SponsorshipPage() {
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           {/* Sponsorship Tiers */}
           <div className="mb-16">
-            <h2 className="mb-8 text-3xl font-bold text-foreground">Sponsorship Packages</h2>
+            <h2 className="mb-8 text-3xl font-bold text-foreground">
+              Sponsorship Packages
+            </h2>
             <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
               {sponsorshipTiers.map((tier, idx) => {
-                const Icon = tier.icon
+                const Icon = tier.icon;
                 return (
                   <Card
                     key={idx}
@@ -71,36 +94,50 @@ export default function SponsorshipPage() {
                     <div className="mb-4 inline-flex rounded-lg bg-primary/10 p-3 w-fit">
                       <Icon className="h-6 w-6 text-primary" />
                     </div>
-                    <h3 className="text-xl font-bold text-foreground mb-1">{tier.name}</h3>
-                    <p className="text-2xl font-bold text-primary mb-6">{tier.price}</p>
+                    <h3 className="text-xl font-bold text-foreground mb-1">
+                      {tier.name}
+                    </h3>
+                    <p className="text-2xl font-bold text-primary mb-6">
+                      {tier.price}
+                    </p>
                     <ul className="flex-1 space-y-2 mb-6">
                       {tier.benefits.map((benefit, i) => (
-                        <li key={i} className="flex gap-2 text-sm text-foreground/70">
+                        <li
+                          key={i}
+                          className="flex gap-2 text-sm text-foreground/70"
+                        >
                           <span className="text-accent">✓</span>
                           <span>{benefit}</span>
                         </li>
                       ))}
                     </ul>
-                    <Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+                    <Button variant="gradient" className="w-full">
                       Get Started
                     </Button>
                   </Card>
-                )
+                );
               })}
             </div>
           </div>
 
           {/* Why Sponsor */}
           <Card className="border border-border/50 p-8 bg-gradient-to-r from-accent/5 to-primary/5">
-            <h2 className="mb-4 text-2xl font-bold text-foreground">Why Sponsor Django Rwanda?</h2>
+            <h2 className="mb-4 text-2xl font-bold text-foreground">
+              Why Sponsor Django Rwanda?
+            </h2>
             <ul className="space-y-3 text-foreground/70">
               <li className="flex gap-3">
                 <span className="text-primary">•</span>
-                <span>Reach 500+ active developers and tech professionals across Africa</span>
+                <span>
+                  Reach 500+ active developers and tech professionals across
+                  Africa
+                </span>
               </li>
               <li className="flex gap-3">
                 <span className="text-primary">•</span>
-                <span>Build brand recognition in the growing African tech ecosystem</span>
+                <span>
+                  Build brand recognition in the growing African tech ecosystem
+                </span>
               </li>
               <li className="flex gap-3">
                 <span className="text-primary">•</span>
@@ -117,7 +154,7 @@ export default function SponsorshipPage() {
           <div className="mt-12 text-center">
             <p className="mb-4 text-foreground/70">Ready to partner with us?</p>
             <Link href="/contact">
-              <Button className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+              <Button variant="gradient">
                 Contact Us for Sponsorship Info
               </Button>
             </Link>
@@ -125,5 +162,5 @@ export default function SponsorshipPage() {
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/contact/page.tsx b/app/contact/page.tsx
index 776f068..9ae5df8 100644
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@@ -1,18 +1,20 @@
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Mail, Phone, MapPin, Send } from "lucide-react"
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { Mail, Phone, MapPin, Send } from "lucide-react";
 
 export const metadata = {
   title: "Contact Us | Django Rwanda Community",
   description: "Get in touch with Django Rwanda Community",
-}
+};
 
 export default function ContactPage() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen">
       <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">Contact Us</h1>
+          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">
+            Contact Us
+          </h1>
           <p className="max-w-2xl text-lg text-foreground/70">
             Have questions or suggestions? We'd love to hear from you.
           </p>
@@ -25,7 +27,9 @@ export default function ContactPage() {
             {/* Contact Info */}
             <div className="space-y-8">
               <div>
-                <h2 className="mb-6 text-2xl font-bold text-foreground">Get in Touch</h2>
+                <h2 className="mb-6 text-2xl font-bold text-foreground">
+                  Get in Touch
+                </h2>
                 <div className="space-y-4">
                   <div className="flex gap-4">
                     <div className="rounded-lg bg-primary/10 p-3">
@@ -33,19 +37,25 @@ export default function ContactPage() {
                     </div>
                     <div>
                       <p className="font-semibold text-foreground">Email</p>
-                      <a href="mailto:hello@djangorwanda.dev" className="text-primary hover:text-primary/80">
+                      <a
+                        href="mailto:hello@djangorwanda.dev"
+                        className="text-primary hover:text-primary/80"
+                      >
                         hello@djangorwanda.dev
                       </a>
                     </div>
                   </div>
 
                   <div className="flex gap-4">
-                    <div className="rounded-lg bg-accent/10 p-3">
-                      <Phone className="h-6 w-6 text-accent" />
+                    <div className="rounded-lg bg-primary/10 p-3">
+                      <Phone className="h-6 w-6 text-primary" />
                     </div>
                     <div>
                       <p className="font-semibold text-foreground">Phone</p>
-                      <a href="tel:+250788123456" className="text-primary hover:text-primary/80">
+                      <a
+                        href="tel:+250788123456"
+                        className="text-primary hover:text-primary/80"
+                      >
                         +250 (0) 788 123 456
                       </a>
                     </div>
@@ -57,26 +67,35 @@ export default function ContactPage() {
                     </div>
                     <div>
                       <p className="font-semibold text-foreground">Location</p>
-                      <p className="text-foreground/70">Kigali Innovation Hub, Kigali, Rwanda</p>
+                      <p className="text-foreground/70">
+                        Kigali Innovation Hub, Kigali, Rwanda
+                      </p>
                     </div>
                   </div>
                 </div>
               </div>
 
-              <Card className="border border-border/50 p-6 bg-gradient-to-br from-primary/5 to-accent/5">
-                <h3 className="mb-3 font-bold text-foreground">Response Time</h3>
+              <Card className="border border-border/50 p-6 bg-gradient-to-br from-primary/5 to-primary-light/5">
+                <h3 className="mb-3 font-bold text-foreground">
+                  Response Time
+                </h3>
                 <p className="text-sm text-foreground/70">
-                  We typically respond to inquiries within 24 hours during business days.
+                  We typically respond to inquiries within 24 hours during
+                  business days.
                 </p>
               </Card>
             </div>
 
             {/* Contact Form */}
             <Card className="border border-border/50 p-8">
-              <h2 className="mb-6 text-2xl font-bold text-foreground">Send us a Message</h2>
+              <h2 className="mb-6 text-2xl font-bold text-foreground">
+                Send us a Message
+              </h2>
               <form className="space-y-4">
                 <div>
-                  <label className="mb-2 block text-sm font-medium text-foreground">Name</label>
+                  <label className="mb-2 block text-sm font-medium text-foreground">
+                    Name
+                  </label>
                   <input
                     type="text"
                     className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
@@ -84,7 +103,9 @@ export default function ContactPage() {
                 </div>
 
                 <div>
-                  <label className="mb-2 block text-sm font-medium text-foreground">Email</label>
+                  <label className="mb-2 block text-sm font-medium text-foreground">
+                    Email
+                  </label>
                   <input
                     type="email"
                     className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
@@ -92,7 +113,9 @@ export default function ContactPage() {
                 </div>
 
                 <div>
-                  <label className="mb-2 block text-sm font-medium text-foreground">Subject</label>
+                  <label className="mb-2 block text-sm font-medium text-foreground">
+                    Subject
+                  </label>
                   <input
                     type="text"
                     className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
@@ -100,14 +123,16 @@ export default function ContactPage() {
                 </div>
 
                 <div>
-                  <label className="mb-2 block text-sm font-medium text-foreground">Message</label>
+                  <label className="mb-2 block text-sm font-medium text-foreground">
+                    Message
+                  </label>
                   <textarea
                     rows={5}
                     className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
                   />
                 </div>
 
-                <Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+                <Button variant="gradient" className="w-full">
                   Send Message
                   <Send className="ml-2 h-4 w-4" />
                 </Button>
@@ -117,5 +142,5 @@ export default function ContactPage() {
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/events/[id]/page.tsx b/app/events/[id]/page.tsx
index 404309c..48ba75a 100644
--- a/app/events/[id]/page.tsx
+++ b/app/events/[id]/page.tsx
@@ -1,31 +1,35 @@
-import { events } from "@/lib/constants"
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Calendar, MapPin, Users, Clock, Share2, Bell } from "lucide-react"
-import Link from "next/link"
-import { notFound } from "next/navigation"
+import { events } from "@/src/lib/constants";
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { Calendar, MapPin, Users, Clock, Share2, Bell } from "lucide-react";
+import Link from "next/link";
+import { notFound } from "next/navigation";
 
 export async function generateStaticParams() {
   return events.map((event) => ({
     id: event.id.toString(),
-  }))
+  }));
 }
 
-export async function generateMetadata(props: { params: Promise<{ id: string }> }) {
-  const params = await props.params
-  const event = events.find((e) => e.id === Number.parseInt(params.id))
+export async function generateMetadata(props: {
+  params: Promise<{ id: string }>;
+}) {
+  const params = await props.params;
+  const event = events.find((e) => e.id === Number.parseInt(params.id));
   return {
     title: `${event?.title} | Django Rwanda Events`,
     description: event?.description,
-  }
+  };
 }
 
-export default async function EventDetailPage(props: { params: Promise<{ id: string }> }) {
-  const params = await props.params
-  const event = events.find((e) => e.id === Number.parseInt(params.id))
+export default async function EventDetailPage(props: {
+  params: Promise<{ id: string }>;
+}) {
+  const params = await props.params;
+  const event = events.find((e) => e.id === Number.parseInt(params.id));
 
   if (!event) {
-    notFound()
+    notFound();
   }
 
   const agenda = [
@@ -34,17 +38,22 @@ export default async function EventDetailPage(props: { params: Promise<{ id: str
     { time: "6:30 PM", activity: "Main Presentation" },
     { time: "7:15 PM", activity: "Q&A Session" },
     { time: "7:45 PM", activity: "Networking & Refreshments" },
-  ]
+  ];
 
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen">
       {/* Header */}
-      <section className="bg-gradient-to-b from-accent/10 to-background py-12 md:py-20">
+      <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
-          <Link href="/events" className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4">
+          <Link
+            href="/events"
+            className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4"
+          >
             ← Back to Events
           </Link>
-          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">{event.title}</h1>
+          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">
+            {event.title}
+          </h1>
           <p className="text-lg text-foreground/70">{event.description}</p>
         </div>
       </section>
@@ -56,35 +65,47 @@ export default async function EventDetailPage(props: { params: Promise<{ id: str
             {/* Main Content */}
             <div className="md:col-span-2 space-y-8">
               {/* Event Details Card */}
-              <Card className="border border-border/50 p-8 bg-gradient-to-r from-accent/5 to-primary/5">
-                <h2 className="mb-6 text-2xl font-bold text-foreground">Event Details</h2>
+              <Card className="border border-border/50 p-8 bg-gradient-to-r from-primary/5 to-primary-light/5">
+                <h2 className="mb-6 text-2xl font-bold text-foreground">
+                  Event Details
+                </h2>
                 <div className="space-y-4">
                   <div className="flex items-start gap-3">
                     <Calendar className="mt-1 h-5 w-5 text-primary" />
                     <div>
-                      <p className="text-sm font-medium text-foreground/60">Date</p>
+                      <p className="text-sm font-medium text-foreground/60">
+                        Date
+                      </p>
                       <p className="text-foreground">{event.date}</p>
                     </div>
                   </div>
                   <div className="flex items-start gap-3">
                     <Clock className="mt-1 h-5 w-5 text-primary" />
                     <div>
-                      <p className="text-sm font-medium text-foreground/60">Time</p>
+                      <p className="text-sm font-medium text-foreground/60">
+                        Time
+                      </p>
                       <p className="text-foreground">{event.time}</p>
                     </div>
                   </div>
                   <div className="flex items-start gap-3">
                     <MapPin className="mt-1 h-5 w-5 text-primary" />
                     <div>
-                      <p className="text-sm font-medium text-foreground/60">Location</p>
+                      <p className="text-sm font-medium text-foreground/60">
+                        Location
+                      </p>
                       <p className="text-foreground">{event.location}</p>
                     </div>
                   </div>
                   <div className="flex items-start gap-3">
                     <Users className="mt-1 h-5 w-5 text-primary" />
                     <div>
-                      <p className="text-sm font-medium text-foreground/60">Attendees</p>
-                      <p className="text-foreground">{event.attendees} people attending</p>
+                      <p className="text-sm font-medium text-foreground/60">
+                        Attendees
+                      </p>
+                      <p className="text-foreground">
+                        {event.attendees} people attending
+                      </p>
                     </div>
                   </div>
                 </div>
@@ -92,12 +113,19 @@ export default async function EventDetailPage(props: { params: Promise<{ id: str
 
               {/* Agenda */}
               <div>
-                <h2 className="mb-6 text-2xl font-bold text-foreground">Agenda</h2>
+                <h2 className="mb-6 text-2xl font-bold text-foreground">
+                  Agenda
+                </h2>
                 <div className="space-y-3">
                   {agenda.map((item, idx) => (
-                    <Card key={idx} className="border border-border/50 p-4 flex items-center gap-4">
+                    <Card
+                      key={idx}
+                      className="border border-border/50 p-4 flex items-center gap-4"
+                    >
                       <div className="rounded-lg bg-primary/10 px-3 py-2 min-w-fit">
-                        <p className="font-semibold text-primary text-sm">{item.time}</p>
+                        <p className="font-semibold text-primary text-sm">
+                          {item.time}
+                        </p>
                       </div>
                       <p className="text-foreground">{item.activity}</p>
                     </Card>
@@ -107,19 +135,28 @@ export default async function EventDetailPage(props: { params: Promise<{ id: str
 
               {/* What to Expect */}
               <Card className="border border-border/50 p-8">
-                <h2 className="mb-4 text-2xl font-bold text-foreground">What to Expect</h2>
+                <h2 className="mb-4 text-2xl font-bold text-foreground">
+                  What to Expect
+                </h2>
                 <ul className="space-y-3 text-foreground/70">
                   <li className="flex gap-3">
                     <span className="text-primary">•</span>
-                    <span>Network with Django developers and tech enthusiasts from across the region</span>
+                    <span>
+                      Network with Django developers and tech enthusiasts from
+                      across the region
+                    </span>
                   </li>
                   <li className="flex gap-3">
                     <span className="text-primary">•</span>
-                    <span>Learn from experienced speakers and community leaders</span>
+                    <span>
+                      Learn from experienced speakers and community leaders
+                    </span>
                   </li>
                   <li className="flex gap-3">
                     <span className="text-primary">•</span>
-                    <span>Discover job opportunities and collaboration possibilities</span>
+                    <span>
+                      Discover job opportunities and collaboration possibilities
+                    </span>
                   </li>
                   <li className="flex gap-3">
                     <span className="text-primary">•</span>
@@ -133,23 +170,38 @@ export default async function EventDetailPage(props: { params: Promise<{ id: str
             <div className="space-y-6">
               {/* Registration Card */}
               <Card className="sticky top-24 border border-border/50 p-6">
-                <h3 className="mb-4 font-bold text-foreground">Ready to attend?</h3>
-                <Link href={`/register/events/${event.id}`} className="block mb-3">
-                  <Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+                <h3 className="mb-4 font-bold text-foreground">
+                  Ready to attend?
+                </h3>
+                <Link
+                  href={`/register/events/${event.id}`}
+                  className="block mb-3"
+                >
+                  <Button variant="gradient" className="w-full">
                     Register Now
                   </Button>
                 </Link>
-                <p className="text-xs text-foreground/60">Limited spots available</p>
+                <p className="text-xs text-foreground/60">
+                  Limited spots available
+                </p>
               </Card>
 
               {/* Share */}
               <Card className="border border-border/50 p-6">
                 <h3 className="mb-4 font-bold text-foreground">Share Event</h3>
                 <div className="flex gap-2">
-                  <Button variant="outline" size="sm" className="flex-1 bg-transparent">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="flex-1 bg-transparent"
+                  >
                     <Share2 className="h-4 w-4" />
                   </Button>
-                  <Button variant="outline" size="sm" className="flex-1 bg-transparent">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="flex-1 bg-transparent"
+                  >
                     Copy Link
                   </Button>
                 </div>
@@ -170,5 +222,5 @@ export default async function EventDetailPage(props: { params: Promise<{ id: str
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/events/page.tsx b/app/events/page.tsx
index 57ba68f..8201427 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -1,24 +1,28 @@
-import { events } from "@/lib/constants"
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Calendar, MapPin, Users, Clock, ArrowRight } from "lucide-react"
-import Link from "next/link"
+import { events } from "@/src/lib/constants";
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { Calendar, MapPin, Users, Clock, ArrowRight } from "lucide-react";
+import Link from "next/link";
 
 export const metadata = {
   title: "Events & Meetups | Django Rwanda Community",
-  description: "Join our community events, meetups, and bootcamps across Africa",
-}
+  description:
+    "Join our community events, meetups, and bootcamps across Africa",
+};
 
 export default function EventsPage() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen">
       {/* Header */}
-      <section className="bg-gradient-to-b from-accent/10 to-background py-12 md:py-20">
+      <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="space-y-4">
-            <h1 className="text-4xl font-bold text-foreground md:text-5xl">Events & Meetups</h1>
+            <h1 className="text-4xl font-bold text-foreground md:text-5xl">
+              Events & Meetups
+            </h1>
             <p className="max-w-2xl text-lg text-foreground/70">
-              Connect with fellow developers through our regular meetups, bootcamps, and collaborative events.
+              Connect with fellow developers through our regular meetups,
+              bootcamps, and collaborative events.
             </p>
           </div>
         </div>
@@ -27,17 +31,21 @@ export default function EventsPage() {
       {/* Upcoming Events */}
       <section className="py-16 md:py-24">
         <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
-          <h2 className="mb-8 text-3xl font-bold text-foreground">Upcoming Events</h2>
+          <h2 className="mb-8 text-3xl font-bold text-foreground">
+            Upcoming Events
+          </h2>
           <div className="space-y-6">
             {events.map((event) => (
               <Card
                 key={event.id}
-                className="border border-border/50 p-6 transition-all hover:border-accent/50 hover:shadow-lg"
+                className="border border-border/50 p-6 transition-all hover:border-primary/50 hover:shadow-lg"
               >
                 <div className="flex flex-col gap-6 md:flex-row md:items-start md:justify-between">
                   {/* Event info */}
                   <div className="flex-1 space-y-4">
-                    <h3 className="text-2xl font-bold text-foreground">{event.title}</h3>
+                    <h3 className="text-2xl font-bold text-foreground">
+                      {event.title}
+                    </h3>
                     <p className="text-foreground/70">{event.description}</p>
 
                     {/* Details */}
@@ -63,7 +71,7 @@ export default function EventsPage() {
 
                   {/* CTA */}
                   <Link href={`/events/${event.id}`} className="md:w-auto">
-                    <Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 md:w-auto">
+                    <Button variant="gradient" className="w-full md:w-auto">
                       View Details
                       <ArrowRight className="ml-2 h-4 w-4" />
                     </Button>
@@ -75,5 +83,5 @@ export default function EventsPage() {
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/get-started/page.tsx b/app/get-started/page.tsx
index 9f3ed84..3b9d141 100644
--- a/app/get-started/page.tsx
+++ b/app/get-started/page.tsx
@@ -1,32 +1,35 @@
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { BookOpen, Users, Code, Lightbulb, ArrowRight } from "lucide-react"
-import Link from "next/link"
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { BookOpen, Users, Code, Lightbulb, ArrowRight } from "lucide-react";
+import Link from "next/link";
 
 export const metadata = {
   title: "Get Started | Django Rwanda Community",
   description: "Start your journey with Django Rwanda Community",
-}
+};
 
 const paths = [
   {
     icon: BookOpen,
     title: "I Want to Learn Django",
-    description: "Master Django through comprehensive workshops and training programs",
+    description:
+      "Master Django through comprehensive workshops and training programs",
     cta: "Browse Workshops",
     href: "/workshops",
   },
   {
     icon: Users,
     title: "I Want to Join the Community",
-    description: "Connect with other developers, attend events, and grow together",
+    description:
+      "Connect with other developers, attend events, and grow together",
     cta: "Join Us",
     href: "/community/join",
   },
   {
     icon: Code,
     title: "I Want to Contribute",
-    description: "Help build open-source projects and solve real-world problems",
+    description:
+      "Help build open-source projects and solve real-world problems",
     cta: "Learn How",
     href: "/community/contribute",
   },
@@ -37,18 +40,21 @@ const paths = [
     cta: "Explore Resources",
     href: "/resources",
   },
-]
+];
 
 export default function GetStartedPage() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen">
       {/* Header */}
       <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="space-y-4">
-            <h1 className="text-4xl font-bold text-foreground md:text-5xl">Get Started with Django Rwanda</h1>
+            <h1 className="text-4xl font-bold text-foreground md:text-5xl">
+              Get Started with Django Rwanda
+            </h1>
             <p className="max-w-2xl text-lg text-foreground/70">
-              Choose your path and begin your journey with Django Rwanda Community
+              Choose your path and begin your journey with Django Rwanda
+              Community
             </p>
           </div>
         </div>
@@ -59,7 +65,7 @@ export default function GetStartedPage() {
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="grid gap-6 md:grid-cols-2">
             {paths.map((path, idx) => {
-              const Icon = path.icon
+              const Icon = path.icon;
               return (
                 <Link key={idx} href={path.href}>
                   <Card className="group h-full border border-border/50 p-8 transition-all hover:border-primary/50 hover:shadow-lg cursor-pointer flex flex-col bg-gradient-to-br from-background to-muted/30">
@@ -67,16 +73,20 @@ export default function GetStartedPage() {
                       <Icon className="h-6 w-6 text-primary" />
                     </div>
 
-                    <h3 className="mb-2 text-2xl font-bold text-foreground">{path.title}</h3>
-                    <p className="mb-6 flex-1 text-foreground/70">{path.description}</p>
+                    <h3 className="mb-2 text-2xl font-bold text-foreground">
+                      {path.title}
+                    </h3>
+                    <p className="mb-6 flex-1 text-foreground/70">
+                      {path.description}
+                    </p>
 
-                    <Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+                    <Button variant="gradient" className="w-full">
                       {path.cta}
                       <ArrowRight className="ml-2 h-4 w-4" />
                     </Button>
                   </Card>
                 </Link>
-              )
+              );
             })}
           </div>
         </div>
@@ -85,18 +95,22 @@ export default function GetStartedPage() {
       {/* Quick Start */}
       <section className="border-t border-border bg-gradient-to-b from-muted to-background py-16 md:py-24">
         <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
-          <h2 className="mb-8 text-center text-3xl font-bold text-foreground">Quick Start in 3 Steps</h2>
+          <h2 className="mb-8 text-center text-3xl font-bold text-foreground">
+            Quick Start in 3 Steps
+          </h2>
           <div className="grid gap-8 md:grid-cols-3">
             {[
               {
                 step: "1",
                 title: "Sign Up",
-                description: "Create your free Django Rwanda Community account in minutes",
+                description:
+                  "Create your free Django Rwanda Community account in minutes",
               },
               {
                 step: "2",
                 title: "Introduce Yourself",
-                description: "Tell us about your interests and experience level",
+                description:
+                  "Tell us about your interests and experience level",
               },
               {
                 step: "3",
@@ -105,7 +119,7 @@ export default function GetStartedPage() {
               },
             ].map((item) => (
               <div key={item.step} className="text-center">
-                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-primary to-accent text-lg font-bold text-primary-foreground">
+                <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-primary to-primary-light text-lg font-bold text-primary-foreground">
                   {item.step}
                 </div>
                 <h3 className="mb-2 font-bold text-foreground">{item.title}</h3>
@@ -116,7 +130,7 @@ export default function GetStartedPage() {
 
           <div className="mt-12 text-center">
             <Link href="/auth/signup">
-              <Button className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+              <Button variant="gradient">
                 Create Your Account Now
                 <ArrowRight className="ml-2 h-4 w-4" />
               </Button>
@@ -125,5 +139,5 @@ export default function GetStartedPage() {
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/globals.css b/app/globals.css
index f69d7d3..6c1b22b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -4,25 +4,29 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  /* Primary Django Green - rich forest green */
-  --primary: oklch(0.45 0.15 155);
-  --primary-foreground: oklch(0.98 0.01 155);
+  /* Primary Django Green - #114b33 (dark forest green) */
+  --primary: oklch(0.32 0.08 160);
+  --primary-foreground: oklch(0.98 0.01 160);
 
-  /* Accent - Rwanda gold/yellow for highlights */
+  /* Primary Light - brighter teal green for visible gradients */
+  --primary-light: oklch(0.58 0.14 160);
+  --primary-light-foreground: oklch(0.98 0.01 160);
+
+  /* Accent - Rwanda gold/yellow for highlights (kept for branding) */
   --accent: oklch(0.75 0.16 85);
   --accent-foreground: oklch(0.2 0.02 85);
 
   /* Backgrounds - warm neutral */
   --background: oklch(0.985 0.005 90);
-  --foreground: oklch(0.18 0.02 155);
+  --foreground: oklch(0.18 0.02 160);
 
   /* Cards and surfaces */
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.18 0.02 155);
+  --card-foreground: oklch(0.18 0.02 160);
 
   /* Muted elements */
   --muted: oklch(0.94 0.008 90);
-  --muted-foreground: oklch(0.5 0.03 155);
+  --muted-foreground: oklch(0.5 0.03 160);
 
   /* Secondary - Rwanda sky blue */
   --secondary: oklch(0.65 0.12 230);
@@ -30,69 +34,73 @@
 
   --border: oklch(0.9 0.01 90);
   --input: oklch(0.96 0.008 90);
-  --ring: oklch(0.45 0.15 155);
+  --ring: oklch(0.32 0.08 160);
 
   /* Destructive - softer coral/terracotta instead of harsh red */
   --destructive: oklch(0.6 0.15 25);
   --destructive-foreground: oklch(0.98 0.01 25);
 
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.18 0.02 155);
+  --popover-foreground: oklch(0.18 0.02 160);
 
   --radius: 0.625rem;
 
   /* Sidebar tokens */
-  --sidebar: oklch(0.97 0.008 155);
-  --sidebar-foreground: oklch(0.18 0.02 155);
-  --sidebar-primary: oklch(0.45 0.15 155);
-  --sidebar-primary-foreground: oklch(0.98 0.01 155);
+  --sidebar: oklch(0.97 0.008 160);
+  --sidebar-foreground: oklch(0.18 0.02 160);
+  --sidebar-primary: oklch(0.32 0.08 160);
+  --sidebar-primary-foreground: oklch(0.98 0.01 160);
   --sidebar-accent: oklch(0.75 0.16 85);
   --sidebar-accent-foreground: oklch(0.2 0.02 85);
-  --sidebar-border: oklch(0.9 0.01 155);
-  --sidebar-ring: oklch(0.45 0.15 155);
+  --sidebar-border: oklch(0.9 0.01 160);
+  --sidebar-ring: oklch(0.32 0.08 160);
 }
 
 .dark {
-  /* Primary Django Green - lighter for dark mode */
-  --primary: oklch(0.65 0.14 155);
-  --primary-foreground: oklch(0.12 0.02 155);
+  /* Primary Django Green - lighter for dark mode visibility */
+  --primary: oklch(0.55 0.10 160);
+  --primary-foreground: oklch(0.12 0.02 160);
+
+  /* Primary Light - brighter teal green for dark mode gradients */
+  --primary-light: oklch(0.72 0.14 160);
+  --primary-light-foreground: oklch(0.12 0.02 160);
 
-  /* Accent - warm gold */
+  /* Accent - warm gold (kept for Rwanda branding) */
   --accent: oklch(0.72 0.15 85);
   --accent-foreground: oklch(0.15 0.02 85);
 
-  --background: oklch(0.12 0.015 155);
+  --background: oklch(0.12 0.015 160);
   --foreground: oklch(0.92 0.01 90);
 
-  --card: oklch(0.16 0.015 155);
+  --card: oklch(0.16 0.015 160);
   --card-foreground: oklch(0.92 0.01 90);
 
-  --muted: oklch(0.22 0.02 155);
+  --muted: oklch(0.22 0.02 160);
   --muted-foreground: oklch(0.65 0.03 90);
 
   /* Secondary - sky blue */
   --secondary: oklch(0.55 0.1 230);
   --secondary-foreground: oklch(0.95 0.01 230);
 
-  --border: oklch(0.25 0.015 155);
-  --input: oklch(0.2 0.015 155);
-  --ring: oklch(0.65 0.14 155);
+  --border: oklch(0.25 0.015 160);
+  --input: oklch(0.2 0.015 160);
+  --ring: oklch(0.55 0.10 160);
 
   /* Destructive - softer in dark mode */
   --destructive: oklch(0.55 0.12 25);
   --destructive-foreground: oklch(0.95 0.01 25);
 
-  --popover: oklch(0.16 0.015 155);
+  --popover: oklch(0.16 0.015 160);
   --popover-foreground: oklch(0.92 0.01 90);
 
-  --sidebar: oklch(0.14 0.015 155);
+  --sidebar: oklch(0.14 0.015 160);
   --sidebar-foreground: oklch(0.92 0.01 90);
-  --sidebar-primary: oklch(0.65 0.14 155);
-  --sidebar-primary-foreground: oklch(0.95 0.01 155);
+  --sidebar-primary: oklch(0.55 0.10 160);
+  --sidebar-primary-foreground: oklch(0.95 0.01 160);
   --sidebar-accent: oklch(0.72 0.15 85);
   --sidebar-accent-foreground: oklch(0.15 0.02 85);
-  --sidebar-border: oklch(0.25 0.015 155);
-  --sidebar-ring: oklch(0.65 0.14 155);
+  --sidebar-border: oklch(0.25 0.015 160);
+  --sidebar-ring: oklch(0.55 0.10 160);
 }
 
 @theme inline {
@@ -106,6 +114,8 @@
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
+  --color-primary-light: var(--primary-light);
+  --color-primary-light-foreground: var(--primary-light-foreground);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
@@ -139,3 +149,58 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Hero section custom animations - scoped to specific classes only */
+@layer utilities {
+  @keyframes hero-shimmer {
+    0% {
+      background-position: 200% center;
+    }
+    100% {
+      background-position: -200% center;
+    }
+  }
+
+  @keyframes hero-float-slow {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+
+  @keyframes hero-float-medium {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-15px);
+    }
+  }
+
+  @keyframes hero-float-fast {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-8px);
+    }
+  }
+
+  .animate-hero-float-slow {
+    animation: hero-float-slow 3s ease-in-out infinite;
+  }
+
+  .animate-hero-float-medium {
+    animation: hero-float-medium 4s ease-in-out infinite 1s;
+  }
+
+  .animate-hero-float-fast {
+    animation: hero-float-fast 3.5s ease-in-out infinite 2s;
+  }
+
+  .animate-hero-shimmer {
+    animation: hero-shimmer 3s linear infinite;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index a34ab5e..dbce630 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,8 @@ import type React from "react";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import { Analytics } from "@vercel/analytics/next";
+import { Header } from "@/src/components/header";
+import { Footer } from "@/src/components/footer";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -45,8 +47,14 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>
-      <body className="min-h-screen w-full overflow-x-hidden font-sans antialiased">
-        {children}
+      <body className="min-h-screen w-full overflow-x-hidden bg-background font-sans antialiased">
+        {/* Global grid pattern */}
+        <div className="pointer-events-none fixed inset-0 z-0 bg-[linear-gradient(to_right,var(--primary)_1px,transparent_1px),linear-gradient(to_bottom,var(--primary)_1px,transparent_1px)] bg-[size:4rem_4rem] opacity-[0.05]" />
+        <div className="relative z-10 flex min-h-screen flex-col">
+          <Header />
+          <main className="flex-1">{children}</main>
+          <Footer />
+        </div>
         <Analytics />
       </body>
     </html>
diff --git a/app/page.tsx b/app/page.tsx
index 1c24be5..7e5a2b3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,17 +1,14 @@
-import { Header } from "@/components/header";
-import { Hero } from "@/components/hero";
-import { CommunitySection } from "@/components/community-section";
-import { WorkshopsSection } from "@/components/workshops-section";
-import { EventsSection } from "@/components/events-section";
-import { OpenSourceSection } from "@/components/open-source-section";
-import { TeamSection } from "@/components/team-section";
-import { ResourcesSection } from "@/components/resources-section";
-import { Footer } from "@/components/footer";
+import { Hero } from "@/src/components/hero";
+import { CommunitySection } from "@/src/components/community-section";
+import { WorkshopsSection } from "@/src/components/workshops-section";
+import { EventsSection } from "@/src/components/events-section";
+import { OpenSourceSection } from "@/src/components/open-source-section";
+import { TeamSection } from "@/src/components/team-section";
+import { ResourcesSection } from "@/src/components/resources-section";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col">
-      <Header />
+    <>
       <Hero />
       <CommunitySection />
       <WorkshopsSection />
@@ -19,7 +16,6 @@ export default function Home() {
       <OpenSourceSection />
       <TeamSection />
       <ResourcesSection />
-      <Footer />
-    </main>
+    </>
   );
 }
diff --git a/app/privacy/page.tsx b/app/privacy/page.tsx
index 3ec3b5f..8215150 100644
--- a/app/privacy/page.tsx
+++ b/app/privacy/page.tsx
@@ -1,14 +1,16 @@
 export const metadata = {
   title: "Privacy Policy | Django Rwanda Community",
   description: "Our privacy policy and data protection practices",
-}
+};
 
 export default function PrivacyPage() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen">
       <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
-          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">Privacy Policy</h1>
+          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">
+            Privacy Policy
+          </h1>
           <p className="text-foreground/70">Last updated: January 2025</p>
         </div>
       </section>
@@ -17,58 +19,93 @@ export default function PrivacyPage() {
         <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 prose prose-invert max-w-none">
           <div className="space-y-8 text-foreground/70">
             <div>
-              <h2 className="mb-4 text-2xl font-bold text-foreground">1. Introduction</h2>
+              <h2 className="mb-4 text-2xl font-bold text-foreground">
+                1. Introduction
+              </h2>
               <p>
-                Django Rwanda Community (&quot;we,&quot; &quot;our,&quot; or &quot;us&quot;) operates the Django Rwanda
-                website. This page informs you of our policies regarding the collection, use, and disclosure of personal
-                data when you use our Service and the choices you have associated with that data.
+                Django Rwanda Community (&quot;we,&quot; &quot;our,&quot; or
+                &quot;us&quot;) operates the Django Rwanda website. This page
+                informs you of our policies regarding the collection, use, and
+                disclosure of personal data when you use our Service and the
+                choices you have associated with that data.
               </p>
             </div>
 
             <div>
-              <h2 className="mb-4 text-2xl font-bold text-foreground">2. Information Collection and Use</h2>
-              <p>We collect several different types of information for various purposes:</p>
+              <h2 className="mb-4 text-2xl font-bold text-foreground">
+                2. Information Collection and Use
+              </h2>
+              <p>
+                We collect several different types of information for various
+                purposes:
+              </p>
               <ul className="mt-4 space-y-2 list-disc list-inside">
-                <li>Personal Data: Name, email address, phone number, profile information</li>
-                <li>Usage Data: Automatically collected information about how you access our website</li>
-                <li>Cookies and Similar Technologies: For authentication and user preferences</li>
+                <li>
+                  Personal Data: Name, email address, phone number, profile
+                  information
+                </li>
+                <li>
+                  Usage Data: Automatically collected information about how you
+                  access our website
+                </li>
+                <li>
+                  Cookies and Similar Technologies: For authentication and user
+                  preferences
+                </li>
               </ul>
             </div>
 
             <div>
-              <h2 className="mb-4 text-2xl font-bold text-foreground">3. Use of Data</h2>
-              <p>Django Rwanda Community uses the collected data for various purposes:</p>
+              <h2 className="mb-4 text-2xl font-bold text-foreground">
+                3. Use of Data
+              </h2>
+              <p>
+                Django Rwanda Community uses the collected data for various
+                purposes:
+              </p>
               <ul className="mt-4 space-y-2 list-disc list-inside">
                 <li>Providing and maintaining our service</li>
                 <li>Notifying you about changes to our service</li>
                 <li>Allowing you to participate in interactive features</li>
                 <li>Providing customer support and assistance</li>
-                <li>Gathering analysis or valuable information for improving our service</li>
+                <li>
+                  Gathering analysis or valuable information for improving our
+                  service
+                </li>
               </ul>
             </div>
 
             <div>
-              <h2 className="mb-4 text-2xl font-bold text-foreground">4. Security of Data</h2>
+              <h2 className="mb-4 text-2xl font-bold text-foreground">
+                4. Security of Data
+              </h2>
               <p>
-                The security of your data is important to us but remember that no method of transmission over the
-                Internet is 100% secure. While we strive to use commercially acceptable means to protect your Personal
-                Data, we cannot guarantee its absolute security.
+                The security of your data is important to us but remember that
+                no method of transmission over the Internet is 100% secure.
+                While we strive to use commercially acceptable means to protect
+                your Personal Data, we cannot guarantee its absolute security.
               </p>
             </div>
 
             <div>
-              <h2 className="mb-4 text-2xl font-bold text-foreground">5. Changes to This Privacy Policy</h2>
+              <h2 className="mb-4 text-2xl font-bold text-foreground">
+                5. Changes to This Privacy Policy
+              </h2>
               <p>
-                We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new
-                Privacy Policy on this page and updating the &quot;Last updated&quot; date at the top of this Privacy
-                Policy.
+                We may update our Privacy Policy from time to time. We will
+                notify you of any changes by posting the new Privacy Policy on
+                this page and updating the &quot;Last updated&quot; date at the
+                top of this Privacy Policy.
               </p>
             </div>
 
             <div>
-              <h2 className="mb-4 text-2xl font-bold text-foreground">6. Contact Us</h2>
+              <h2 className="mb-4 text-2xl font-bold text-foreground">
+                6. Contact Us
+              </h2>
               <p>
-                If you have any questions about this Privacy Policy, please contact us at:
+                If you have any questions about this Privacy Policy, please
+                contact us at:
                 <br />
                 Email: privacy@djangorwanda.dev
               </p>
@@ -77,5 +114,5 @@ export default function PrivacyPage() {
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/register/events/[id]/page.tsx b/app/register/events/[id]/page.tsx
index 2b3e14c..620281b 100644
--- a/app/register/events/[id]/page.tsx
+++ b/app/register/events/[id]/page.tsx
@@ -1,37 +1,43 @@
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { events } from "@/lib/constants"
-import { Check } from "lucide-react"
-import { notFound } from "next/navigation"
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { events } from "@/src/lib/constants";
+import { Check } from "lucide-react";
+import { notFound } from "next/navigation";
 
 export async function generateStaticParams() {
   return events.map((event) => ({
     id: event.id.toString(),
-  }))
+  }));
 }
 
-export async function generateMetadata(props: { params: Promise<{ id: string }> }) {
-  const params = await props.params
-  const event = events.find((e) => e.id === Number.parseInt(params.id))
+export async function generateMetadata(props: {
+  params: Promise<{ id: string }>;
+}) {
+  const params = await props.params;
+  const event = events.find((e) => e.id === Number.parseInt(params.id));
   return {
     title: `Register for ${event?.title} | Django Rwanda`,
     description: `Register for the ${event?.title} event`,
-  }
+  };
 }
 
-export default async function EventRegistrationPage(props: { params: Promise<{ id: string }> }) {
-  const params = await props.params
-  const event = events.find((e) => e.id === Number.parseInt(params.id))
+export default async function EventRegistrationPage(props: {
+  params: Promise<{ id: string }>;
+}) {
+  const params = await props.params;
+  const event = events.find((e) => e.id === Number.parseInt(params.id));
 
   if (!event) {
-    notFound()
+    notFound();
   }
 
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center">
+    <div className="min-h-screen flex items-center justify-center">
       <div className="mx-auto w-full max-w-2xl px-4 py-8">
         <div className="mb-8 text-center">
-          <h1 className="text-3xl font-bold text-foreground">Register for Event</h1>
+          <h1 className="text-3xl font-bold text-foreground">
+            Register for Event
+          </h1>
           <p className="mt-2 text-lg text-primary font-medium">{event.title}</p>
         </div>
 
@@ -39,14 +45,18 @@ export default async function EventRegistrationPage(props: { params: Promise<{ i
           <form className="space-y-6">
             <div className="grid gap-4 md:grid-cols-2">
               <div>
-                <label className="mb-2 block text-sm font-medium text-foreground">First Name</label>
+                <label className="mb-2 block text-sm font-medium text-foreground">
+                  First Name
+                </label>
                 <input
                   type="text"
                   className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
                 />
               </div>
               <div>
-                <label className="mb-2 block text-sm font-medium text-foreground">Last Name</label>
+                <label className="mb-2 block text-sm font-medium text-foreground">
+                  Last Name
+                </label>
                 <input
                   type="text"
                   className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
@@ -55,7 +65,9 @@ export default async function EventRegistrationPage(props: { params: Promise<{ i
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">Email Address</label>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Email Address
+              </label>
               <input
                 type="email"
                 className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
@@ -63,7 +75,9 @@ export default async function EventRegistrationPage(props: { params: Promise<{ i
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">Phone Number</label>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Phone Number
+              </label>
               <input
                 type="tel"
                 className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
@@ -71,7 +85,9 @@ export default async function EventRegistrationPage(props: { params: Promise<{ i
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">Company/Organization</label>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Company/Organization
+              </label>
               <input
                 type="text"
                 className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
@@ -93,7 +109,9 @@ export default async function EventRegistrationPage(props: { params: Promise<{ i
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">Special Requests</label>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Special Requests
+              </label>
               <textarea
                 rows={3}
                 className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
@@ -103,10 +121,12 @@ export default async function EventRegistrationPage(props: { params: Promise<{ i
 
             <label className="flex items-center gap-2 text-sm text-foreground/60">
               <input type="checkbox" className="rounded border border-border" />
-              <span>I agree to the Code of Conduct and community guidelines</span>
+              <span>
+                I agree to the Code of Conduct and community guidelines
+              </span>
             </label>
 
-            <Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 py-3">
+            <Button variant="gradient" className="w-full py-3">
               Confirm Registration
               <Check className="ml-2 h-4 w-4" />
             </Button>
@@ -114,5 +134,5 @@ export default async function EventRegistrationPage(props: { params: Promise<{ i
         </Card>
       </div>
     </div>
-  )
+  );
 }
diff --git a/app/register/workshops/page.tsx b/app/register/workshops/page.tsx
index e7dc43f..52a5149 100644
--- a/app/register/workshops/page.tsx
+++ b/app/register/workshops/page.tsx
@@ -1,59 +1,83 @@
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Check } from "lucide-react"
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { Check } from "lucide-react";
 
 export const metadata = {
   title: "Workshop Registration | Django Rwanda",
   description: "Register for Django workshops",
-}
+};
 
 export default function WorkshopRegistrationPage() {
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center">
+    <div className="min-h-screen flex items-center justify-center">
       <div className="mx-auto w-full max-w-2xl px-4 py-8">
         <div className="mb-8 text-center">
-          <h1 className="text-3xl font-bold text-foreground">Workshop Registration</h1>
-          <p className="mt-2 text-foreground/60">Secure your spot in our next workshop</p>
+          <h1 className="text-3xl font-bold text-foreground">
+            Workshop Registration
+          </h1>
+          <p className="mt-2 text-foreground/60">
+            Secure your spot in our next workshop
+          </p>
         </div>
 
         <Card className="border border-border/50 p-8">
           <form className="space-y-6">
             <div className="grid gap-4 md:grid-cols-2">
               <div>
-                <label className="mb-2 block text-sm font-medium text-foreground">First Name</label>
+                <label className="mb-2 block text-sm font-medium text-foreground">
+                  First Name
+                </label>
                 <input
                   type="text"
+                  placeholder="Enter your first name"
                   className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
                 />
               </div>
               <div>
-                <label className="mb-2 block text-sm font-medium text-foreground">Last Name</label>
+                <label className="mb-2 block text-sm font-medium text-foreground">
+                  Last Name
+                </label>
                 <input
                   type="text"
+                  placeholder="Enter your last name"
                   className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
                 />
               </div>
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">Email Address</label>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Email Address
+              </label>
               <input
                 type="email"
+                placeholder="Enter your email address"
                 className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
               />
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">Phone Number</label>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Phone Number
+              </label>
               <input
                 type="tel"
+                placeholder="Enter your phone number"
                 className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
               />
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">Select Workshop</label>
-              <select className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-primary">
+              <label
+                htmlFor="workshop-select"
+                className="mb-2 block text-sm font-medium text-foreground"
+              >
+                Select Workshop
+              </label>
+              <select
+                id="workshop-select"
+                className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+              >
                 <option>Choose a workshop</option>
                 <option>Django Fundamentals</option>
                 <option>Advanced Django Patterns</option>
@@ -63,11 +87,20 @@ export default function WorkshopRegistrationPage() {
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">Experience Level</label>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Experience Level
+              </label>
               <div className="space-y-2">
                 {["Beginner", "Intermediate", "Advanced"].map((level) => (
-                  <label key={level} className="flex items-center gap-2 text-foreground/60">
-                    <input type="radio" name="experience" className="rounded border border-border" />
+                  <label
+                    key={level}
+                    className="flex items-center gap-2 text-foreground/60"
+                  >
+                    <input
+                      type="radio"
+                      name="experience"
+                      className="rounded border border-border"
+                    />
                     {level}
                   </label>
                 ))}
@@ -75,7 +108,9 @@ export default function WorkshopRegistrationPage() {
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">Additional Comments</label>
+              <label className="mb-2 block text-sm font-medium text-foreground">
+                Additional Comments
+              </label>
               <textarea
                 rows={4}
                 className="w-full rounded-lg border border-border bg-input px-4 py-2 text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
@@ -85,10 +120,12 @@ export default function WorkshopRegistrationPage() {
 
             <label className="flex items-center gap-2 text-sm text-foreground/60">
               <input type="checkbox" className="rounded border border-border" />
-              <span>I agree to receive updates and notifications about the workshop</span>
+              <span>
+                I agree to receive updates and notifications about the workshop
+              </span>
             </label>
 
-            <Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 py-3">
+            <Button variant="gradient" className="w-full py-3">
               Complete Registration
               <Check className="ml-2 h-4 w-4" />
             </Button>
@@ -96,5 +133,5 @@ export default function WorkshopRegistrationPage() {
         </Card>
       </div>
     </div>
-  )
+  );
 }
diff --git a/app/resources/funding-directory/page.tsx b/app/resources/funding-directory/page.tsx
index 3f91d5b..5668139 100644
--- a/app/resources/funding-directory/page.tsx
+++ b/app/resources/funding-directory/page.tsx
@@ -1,51 +1,85 @@
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { ExternalLink, DollarSign } from "lucide-react"
-import Link from "next/link"
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { ExternalLink, DollarSign } from "lucide-react";
+import Link from "next/link";
 
 export const metadata = {
   title: "Funding Directory | Django Rwanda Resources",
-  description: "Find investors, grants, and funding opportunities for African startups",
-}
+  description:
+    "Find investors, grants, and funding opportunities for African startups",
+};
 
 const fundingSources = [
   {
     category: "Venture Capital",
     items: [
-      { name: "Founder Institute Africa", description: "Pre-seed funding and mentorship" },
-      { name: "Disrupt Africa Ventures", description: "Early-stage African tech ventures" },
-      { name: "CcHub Investment", description: "Central Africa focused investments" },
+      {
+        name: "Founder Institute Africa",
+        description: "Pre-seed funding and mentorship",
+      },
+      {
+        name: "Disrupt Africa Ventures",
+        description: "Early-stage African tech ventures",
+      },
+      {
+        name: "CcHub Investment",
+        description: "Central Africa focused investments",
+      },
     ],
   },
   {
     category: "Grants & Accelerators",
     items: [
-      { name: "Google for Startups", description: "Free resources and potential funding" },
-      { name: "World Bank Business Competition", description: "Grant opportunities for tech startups" },
-      { name: "Kuza Community Fund", description: "African entrepreneur support" },
+      {
+        name: "Google for Startups",
+        description: "Free resources and potential funding",
+      },
+      {
+        name: "World Bank Business Competition",
+        description: "Grant opportunities for tech startups",
+      },
+      {
+        name: "Kuza Community Fund",
+        description: "African entrepreneur support",
+      },
     ],
   },
   {
     category: "Government Support",
     items: [
-      { name: "Rwanda Development Board", description: "Government support for tech companies" },
-      { name: "Vision 2050 Initiatives", description: "National development programs" },
-      { name: "Special Economic Zones", description: "Tax incentives and business support" },
+      {
+        name: "Rwanda Development Board",
+        description: "Government support for tech companies",
+      },
+      {
+        name: "Vision 2050 Initiatives",
+        description: "National development programs",
+      },
+      {
+        name: "Special Economic Zones",
+        description: "Tax incentives and business support",
+      },
     ],
   },
-]
+];
 
 export default function FundingDirectoryPage() {
   return (
-    <div className="min-h-screen bg-background">
-      <section className="bg-gradient-to-b from-accent/10 to-background py-12 md:py-20">
+    <div className="min-h-screen">
+      <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <Link href="/resources" className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4">
+          <Link
+            href="/resources"
+            className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4"
+          >
             ← Back to Resources
           </Link>
-          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">Funding Directory</h1>
+          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">
+            Funding Directory
+          </h1>
           <p className="max-w-2xl text-lg text-foreground/70">
-            Discover investors, grants, and funding opportunities to fuel your startup growth.
+            Discover investors, grants, and funding opportunities to fuel your
+            startup growth.
           </p>
         </div>
       </section>
@@ -56,15 +90,23 @@ export default function FundingDirectoryPage() {
             {fundingSources.map((category, idx) => (
               <div key={idx}>
                 <h2 className="mb-6 text-2xl font-bold text-foreground flex items-center gap-2">
-                  <DollarSign className="h-6 w-6 text-accent" />
+                  <DollarSign className="h-6 w-6 text-primary" />
                   {category.category}
                 </h2>
                 <div className="grid gap-4 md:grid-cols-3">
                   {category.items.map((item, i) => (
                     <Card key={i} className="border border-border/50 p-6">
-                      <h3 className="mb-2 font-bold text-foreground">{item.name}</h3>
-                      <p className="mb-4 text-sm text-foreground/70">{item.description}</p>
-                      <Button variant="outline" size="sm" className="w-full bg-transparent gap-2">
+                      <h3 className="mb-2 font-bold text-foreground">
+                        {item.name}
+                      </h3>
+                      <p className="mb-4 text-sm text-foreground/70">
+                        {item.description}
+                      </p>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="w-full bg-transparent gap-2"
+                      >
                         Learn More
                         <ExternalLink className="h-4 w-4" />
                       </Button>
@@ -77,5 +119,5 @@ export default function FundingDirectoryPage() {
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/resources/mentorship/page.tsx b/app/resources/mentorship/page.tsx
index d2e8b45..14c5e4b 100644
--- a/app/resources/mentorship/page.tsx
+++ b/app/resources/mentorship/page.tsx
@@ -1,30 +1,32 @@
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Users, Star, MessageSquare } from "lucide-react"
-import Link from "next/link"
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { Users, Star, MessageSquare } from "lucide-react";
+import Link from "next/link";
 
 export const metadata = {
   title: "Mentorship Network | Django Rwanda Resources",
   description: "Connect with experienced mentors and build your network",
-}
+};
 
 const mentorshipBenefits = [
   {
     icon: Users,
     title: "Connect with Experts",
-    description: "Meet experienced entrepreneurs and technical leaders in the Django community",
+    description:
+      "Meet experienced entrepreneurs and technical leaders in the Django community",
   },
   {
     icon: Star,
     title: "Get Guidance",
-    description: "Receive mentorship on startup strategy, technical decisions, and growth",
+    description:
+      "Receive mentorship on startup strategy, technical decisions, and growth",
   },
   {
     icon: MessageSquare,
     title: "Share Knowledge",
     description: "Learn from others' experiences and share your own expertise",
   },
-]
+];
 
 const mentors = [
   {
@@ -51,19 +53,25 @@ const mentors = [
     expertise: ["Partnerships", "Fundraising", "Growth Strategy"],
     availability: "By appointment",
   },
-]
+];
 
 export default function MentorshipPage() {
   return (
-    <div className="min-h-screen bg-background">
-      <section className="bg-gradient-to-b from-accent/10 to-background py-12 md:py-20">
+    <div className="min-h-screen">
+      <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <Link href="/resources" className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4">
+          <Link
+            href="/resources"
+            className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4"
+          >
             ← Back to Resources
           </Link>
-          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">Mentorship Network</h1>
+          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">
+            Mentorship Network
+          </h1>
           <p className="max-w-2xl text-lg text-foreground/70">
-            Get guidance from experienced mentors and accelerate your entrepreneurial journey.
+            Get guidance from experienced mentors and accelerate your
+            entrepreneurial journey.
           </p>
         </div>
       </section>
@@ -72,39 +80,54 @@ export default function MentorshipPage() {
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           {/* Benefits */}
           <div className="mb-16">
-            <h2 className="mb-8 text-2xl font-bold text-foreground">Why Join Our Mentorship Network?</h2>
+            <h2 className="mb-8 text-2xl font-bold text-foreground">
+              Why Join Our Mentorship Network?
+            </h2>
             <div className="grid gap-6 md:grid-cols-3">
               {mentorshipBenefits.map((benefit, idx) => {
-                const Icon = benefit.icon
+                const Icon = benefit.icon;
                 return (
                   <Card key={idx} className="border border-border/50 p-6">
-                    <div className="mb-4 inline-flex rounded-lg bg-accent/10 p-3">
-                      <Icon className="h-6 w-6 text-accent" />
+                    <div className="mb-4 inline-flex rounded-lg bg-primary/10 p-3">
+                      <Icon className="h-6 w-6 text-primary" />
                     </div>
-                    <h3 className="mb-2 font-bold text-foreground">{benefit.title}</h3>
-                    <p className="text-sm text-foreground/70">{benefit.description}</p>
+                    <h3 className="mb-2 font-bold text-foreground">
+                      {benefit.title}
+                    </h3>
+                    <p className="text-sm text-foreground/70">
+                      {benefit.description}
+                    </p>
                   </Card>
-                )
+                );
               })}
             </div>
           </div>
 
           {/* Mentors */}
           <div>
-            <h2 className="mb-8 text-2xl font-bold text-foreground">Meet Our Mentors</h2>
+            <h2 className="mb-8 text-2xl font-bold text-foreground">
+              Meet Our Mentors
+            </h2>
             <div className="grid gap-6 md:grid-cols-2">
               {mentors.map((mentor, idx) => (
                 <Card key={idx} className="border border-border/50 p-6">
-                  <h3 className="mb-1 text-lg font-bold text-foreground">{mentor.name}</h3>
+                  <h3 className="mb-1 text-lg font-bold text-foreground">
+                    {mentor.name}
+                  </h3>
                   <p className="mb-4 text-sm text-primary">{mentor.role}</p>
                   <div className="mb-4 flex flex-wrap gap-2">
                     {mentor.expertise.map((exp, i) => (
-                      <span key={i} className="text-xs rounded-full bg-primary/10 px-2 py-1 text-primary">
+                      <span
+                        key={i}
+                        className="text-xs rounded-full bg-primary/10 px-2 py-1 text-primary"
+                      >
                         {exp}
                       </span>
                     ))}
                   </div>
-                  <p className="mb-4 text-sm text-foreground/70">{mentor.availability}</p>
+                  <p className="mb-4 text-sm text-foreground/70">
+                    {mentor.availability}
+                  </p>
                   <Button variant="outline" className="w-full bg-transparent">
                     Request Mentoring
                   </Button>
@@ -115,5 +138,5 @@ export default function MentorshipPage() {
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/resources/page.tsx b/app/resources/page.tsx
index 77011d0..1fab2a8 100644
--- a/app/resources/page.tsx
+++ b/app/resources/page.tsx
@@ -1,32 +1,41 @@
-import { startupResources } from "@/lib/constants"
-import { Card } from "@/components/ui/card"
-import { BookOpen, DollarSign, Handshake, Lightbulb, ArrowRight } from "lucide-react"
-import Link from "next/link"
+import { startupResources } from "@/src/lib/constants";
+import { Card } from "@/src/components/ui/card";
+import {
+  BookOpen,
+  DollarSign,
+  Handshake,
+  Lightbulb,
+  ArrowRight,
+} from "lucide-react";
+import Link from "next/link";
 
 export const metadata = {
   title: "Resources for Entrepreneurs | Django Rwanda",
-  description: "Startup toolkit, funding directory, mentorship, and resources for African entrepreneurs",
-}
+  description:
+    "Startup toolkit, funding directory, mentorship, and resources for African entrepreneurs",
+};
 
-const resourceIcons = [BookOpen, DollarSign, Handshake, Lightbulb]
+const resourceIcons = [BookOpen, DollarSign, Handshake, Lightbulb];
 const resourceLinks = [
   "/resources/startup-toolkit",
   "/resources/funding-directory",
   "/resources/mentorship",
   "/resources/problem-solutions",
-]
+];
 
 export default function ResourcesPage() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen">
       {/* Header */}
-      <section className="bg-gradient-to-b from-accent/10 to-background py-12 md:py-20">
+      <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="space-y-4">
-            <h1 className="text-4xl font-bold text-foreground md:text-5xl">Resources for Entrepreneurs</h1>
+            <h1 className="text-4xl font-bold text-foreground md:text-5xl">
+              Resources for Entrepreneurs
+            </h1>
             <p className="max-w-2xl text-lg text-foreground/70">
-              Everything you need to launch and grow your startup. Access tools, funding, mentorship, and solutions for
-              African markets.
+              Everything you need to launch and grow your startup. Access tools,
+              funding, mentorship, and solutions for African markets.
             </p>
           </div>
         </div>
@@ -37,18 +46,22 @@ export default function ResourcesPage() {
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
             {startupResources.map((resource, idx) => {
-              const Icon = resourceIcons[idx]
+              const Icon = resourceIcons[idx];
               return (
                 <Link key={resource.id} href={resourceLinks[idx]}>
-                  <Card className="group h-full border border-border/50 p-8 transition-all hover:border-accent/50 hover:shadow-lg cursor-pointer flex flex-col">
+                  <Card className="group h-full border border-border/50 p-8 transition-all hover:border-primary/50 hover:shadow-lg cursor-pointer flex flex-col">
                     {/* Icon */}
-                    <div className="mb-4 inline-flex rounded-lg bg-gradient-to-br from-accent/10 to-primary/10 p-3 w-fit">
-                      <Icon className="h-6 w-6 text-accent" />
+                    <div className="mb-4 inline-flex rounded-lg bg-gradient-to-br from-primary/10 to-primary-light/10 p-3 w-fit">
+                      <Icon className="h-6 w-6 text-primary" />
                     </div>
 
                     {/* Content */}
-                    <h3 className="mb-2 text-lg font-bold text-foreground flex-1">{resource.title}</h3>
-                    <p className="mb-6 text-foreground/70">{resource.description}</p>
+                    <h3 className="mb-2 text-lg font-bold text-foreground flex-1">
+                      {resource.title}
+                    </h3>
+                    <p className="mb-6 text-foreground/70">
+                      {resource.description}
+                    </p>
 
                     {/* CTA */}
                     <div className="flex items-center gap-2 text-accent font-medium">
@@ -57,11 +70,11 @@ export default function ResourcesPage() {
                     </div>
                   </Card>
                 </Link>
-              )
+              );
             })}
           </div>
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/resources/problem-solutions/page.tsx b/app/resources/problem-solutions/page.tsx
index 5d6ad04..a567f22 100644
--- a/app/resources/problem-solutions/page.tsx
+++ b/app/resources/problem-solutions/page.tsx
@@ -1,19 +1,23 @@
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Lightbulb, TrendingUp, Users, MapPin } from "lucide-react"
-import Link from "next/link"
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { Lightbulb, TrendingUp, Users, MapPin } from "lucide-react";
+import Link from "next/link";
 
 export const metadata = {
   title: "Local Problem Solutions | Django Rwanda Resources",
   description: "Build solutions for challenges specific to African communities",
-}
+};
 
 const problemAreas = [
   {
     icon: Users,
     title: "Healthcare Access",
     description: "Solutions for improving healthcare delivery in remote areas",
-    ideas: ["Telemedicine platform for rural clinics", "Mobile health records system", "Vaccination tracking system"],
+    ideas: [
+      "Telemedicine platform for rural clinics",
+      "Mobile health records system",
+      "Vaccination tracking system",
+    ],
   },
   {
     icon: MapPin,
@@ -45,19 +49,25 @@ const problemAreas = [
       "Teacher training and resource portal",
     ],
   },
-]
+];
 
 export default function ProblemSolutionsPage() {
   return (
-    <div className="min-h-screen bg-background">
-      <section className="bg-gradient-to-b from-accent/10 to-background py-12 md:py-20">
+    <div className="min-h-screen">
+      <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <Link href="/resources" className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4">
+          <Link
+            href="/resources"
+            className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4"
+          >
             ← Back to Resources
           </Link>
-          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">Local Problem Solutions</h1>
+          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">
+            Local Problem Solutions
+          </h1>
           <p className="max-w-2xl text-lg text-foreground/70">
-            Discover challenges in African communities and build impactful solutions that create real change.
+            Discover challenges in African communities and build impactful
+            solutions that create real change.
           </p>
         </div>
       </section>
@@ -66,38 +76,45 @@ export default function ProblemSolutionsPage() {
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="space-y-12">
             {problemAreas.map((area, idx) => {
-              const Icon = area.icon
+              const Icon = area.icon;
               return (
                 <Card key={idx} className="border border-border/50 p-8">
                   <div className="mb-6 flex items-start gap-4">
-                    <div className="rounded-lg bg-accent/10 p-3">
-                      <Icon className="h-6 w-6 text-accent" />
+                    <div className="rounded-lg bg-primary/10 p-3">
+                      <Icon className="h-6 w-6 text-primary" />
                     </div>
                     <div>
-                      <h2 className="mb-2 text-2xl font-bold text-foreground">{area.title}</h2>
+                      <h2 className="mb-2 text-2xl font-bold text-foreground">
+                        {area.title}
+                      </h2>
                       <p className="text-foreground/70">{area.description}</p>
                     </div>
                   </div>
 
                   <div className="space-y-3 border-t border-border/30 pt-6">
-                    <h3 className="font-semibold text-foreground">Problem-Solution Ideas:</h3>
+                    <h3 className="font-semibold text-foreground">
+                      Problem-Solution Ideas:
+                    </h3>
                     {area.ideas.map((idea, i) => (
-                      <div key={i} className="flex items-start gap-3 text-foreground/70">
+                      <div
+                        key={i}
+                        className="flex items-start gap-3 text-foreground/70"
+                      >
                         <span className="mt-1 inline-block h-2 w-2 rounded-full bg-primary" />
                         <span>{idea}</span>
                       </div>
                     ))}
                   </div>
 
-                  <Button className="mt-6 bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+                  <Button variant="gradient" className="mt-6">
                     Explore Opportunities
                   </Button>
                 </Card>
-              )
+              );
             })}
           </div>
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/resources/startup-toolkit/page.tsx b/app/resources/startup-toolkit/page.tsx
index 1ba2079..43f5fe8 100644
--- a/app/resources/startup-toolkit/page.tsx
+++ b/app/resources/startup-toolkit/page.tsx
@@ -1,59 +1,101 @@
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Download } from "lucide-react"
-import Link from "next/link"
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { Download } from "lucide-react";
+import Link from "next/link";
 
 export const metadata = {
   title: "Startup Toolkit | Django Rwanda Resources",
   description: "Essential tools and guides for launching your startup",
-}
+};
 
 const toolkitSections = [
   {
     title: "Planning & Strategy",
     items: [
-      { name: "Business Model Canvas", description: "Template for mapping your business model" },
-      { name: "Go-to-Market Strategy Guide", description: "Step-by-step guide for market entry" },
-      { name: "Pitch Deck Template", description: "Professional presentation template" },
+      {
+        name: "Business Model Canvas",
+        description: "Template for mapping your business model",
+      },
+      {
+        name: "Go-to-Market Strategy Guide",
+        description: "Step-by-step guide for market entry",
+      },
+      {
+        name: "Pitch Deck Template",
+        description: "Professional presentation template",
+      },
     ],
   },
   {
     title: "Legal & Compliance",
     items: [
-      { name: "Business Registration Checklist", description: "Steps for registering in Rwanda" },
-      { name: "Terms & Conditions Template", description: "Legal documents for your business" },
-      { name: "Privacy Policy Generator", description: "GDPR-compliant privacy policy tool" },
+      {
+        name: "Business Registration Checklist",
+        description: "Steps for registering in Rwanda",
+      },
+      {
+        name: "Terms & Conditions Template",
+        description: "Legal documents for your business",
+      },
+      {
+        name: "Privacy Policy Generator",
+        description: "GDPR-compliant privacy policy tool",
+      },
     ],
   },
   {
     title: "Financial",
     items: [
-      { name: "Financial Projections Template", description: "3-year financial forecast tool" },
-      { name: "Budgeting Spreadsheet", description: "Track and manage your budget" },
-      { name: "Pricing Calculator", description: "Determine optimal pricing strategy" },
+      {
+        name: "Financial Projections Template",
+        description: "3-year financial forecast tool",
+      },
+      {
+        name: "Budgeting Spreadsheet",
+        description: "Track and manage your budget",
+      },
+      {
+        name: "Pricing Calculator",
+        description: "Determine optimal pricing strategy",
+      },
     ],
   },
   {
     title: "Marketing & Sales",
     items: [
-      { name: "Marketing Plan Template", description: "Comprehensive marketing strategy guide" },
-      { name: "Social Media Calendar", description: "Plan your social media content" },
-      { name: "Customer Acquisition Playbook", description: "Strategies for acquiring customers" },
+      {
+        name: "Marketing Plan Template",
+        description: "Comprehensive marketing strategy guide",
+      },
+      {
+        name: "Social Media Calendar",
+        description: "Plan your social media content",
+      },
+      {
+        name: "Customer Acquisition Playbook",
+        description: "Strategies for acquiring customers",
+      },
     ],
   },
-]
+];
 
 export default function StartupToolkitPage() {
   return (
-    <div className="min-h-screen bg-background">
-      <section className="bg-gradient-to-b from-accent/10 to-background py-12 md:py-20">
+    <div className="min-h-screen">
+      <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <Link href="/resources" className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4">
+          <Link
+            href="/resources"
+            className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4"
+          >
             ← Back to Resources
           </Link>
-          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">Startup Toolkit</h1>
+          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">
+            Startup Toolkit
+          </h1>
           <p className="max-w-2xl text-lg text-foreground/70">
-            Essential templates, guides, and tools to help you launch and grow your startup successfully.
+            Essential templates, guides, and tools to help you launch and grow
+            your startup successfully.
           </p>
         </div>
       </section>
@@ -63,13 +105,23 @@ export default function StartupToolkitPage() {
           <div className="space-y-12">
             {toolkitSections.map((section, idx) => (
               <div key={idx}>
-                <h2 className="mb-6 text-2xl font-bold text-foreground">{section.title}</h2>
+                <h2 className="mb-6 text-2xl font-bold text-foreground">
+                  {section.title}
+                </h2>
                 <div className="grid gap-4 md:grid-cols-3">
                   {section.items.map((item, i) => (
                     <Card key={i} className="border border-border/50 p-6">
-                      <h3 className="mb-2 font-bold text-foreground">{item.name}</h3>
-                      <p className="mb-4 text-sm text-foreground/70">{item.description}</p>
-                      <Button variant="outline" size="sm" className="w-full bg-transparent gap-2">
+                      <h3 className="mb-2 font-bold text-foreground">
+                        {item.name}
+                      </h3>
+                      <p className="mb-4 text-sm text-foreground/70">
+                        {item.description}
+                      </p>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="w-full bg-transparent gap-2"
+                      >
                         <Download className="h-4 w-4" />
                         Download
                       </Button>
@@ -82,5 +134,5 @@ export default function StartupToolkitPage() {
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/sitemap/page.tsx b/app/sitemap/page.tsx
index 6fb355d..eff0a86 100644
--- a/app/sitemap/page.tsx
+++ b/app/sitemap/page.tsx
@@ -1,11 +1,11 @@
-import Link from "next/link"
-import { Card } from "@/components/ui/card"
-import { Folder } from "lucide-react"
+import Link from "next/link";
+import { Card } from "@/src/components/ui/card";
+import { Folder } from "lucide-react";
 
 export const metadata = {
   title: "Sitemap | Django Rwanda Community",
   description: "Complete site structure and navigation",
-}
+};
 
 const sitemapSections = [
   {
@@ -62,15 +62,19 @@ const sitemapSections = [
       { label: "Sitemap", href: "/sitemap" },
     ],
   },
-]
+];
 
 export default function SitemapPage() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen">
       <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">Sitemap</h1>
-          <p className="text-foreground/70">Browse all pages and sections of Django Rwanda Community website</p>
+          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">
+            Sitemap
+          </h1>
+          <p className="text-foreground/70">
+            Browse all pages and sections of Django Rwanda Community website
+          </p>
         </div>
       </section>
 
@@ -86,7 +90,10 @@ export default function SitemapPage() {
                 <ul className="space-y-2">
                   {section.links.map((link, i) => (
                     <li key={i}>
-                      <Link href={link.href} className="text-sm text-primary hover:text-primary/80 transition-colors">
+                      <Link
+                        href={link.href}
+                        className="text-sm text-primary hover:text-primary/80 transition-colors"
+                      >
                         {link.label}
                       </Link>
                     </li>
@@ -98,5 +105,5 @@ export default function SitemapPage() {
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/terms/page.tsx b/app/terms/page.tsx
index 3efa487..e38eab4 100644
--- a/app/terms/page.tsx
+++ b/app/terms/page.tsx
@@ -1,14 +1,16 @@
 export const metadata = {
   title: "Terms of Service | Django Rwanda Community",
   description: "Our terms of service and conditions of use",
-}
+};
 
 export default function TermsPage() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen">
       <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
-          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">Terms of Service</h1>
+          <h1 className="text-4xl font-bold text-foreground md:text-5xl mb-4">
+            Terms of Service
+          </h1>
           <p className="text-foreground/70">Last updated: January 2025</p>
         </div>
       </section>
@@ -17,64 +19,98 @@ export default function TermsPage() {
         <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 prose prose-invert max-w-none">
           <div className="space-y-8 text-foreground/70">
             <div>
-              <h2 className="mb-4 text-2xl font-bold text-foreground">1. Acceptance of Terms</h2>
+              <h2 className="mb-4 text-2xl font-bold text-foreground">
+                1. Acceptance of Terms
+              </h2>
               <p>
-                By accessing and using the Django Rwanda Community website, you accept and agree to be bound by the
-                terms and provision of this agreement. If you do not agree to abide by the above, please do not use this
-                service.
+                By accessing and using the Django Rwanda Community website, you
+                accept and agree to be bound by the terms and provision of this
+                agreement. If you do not agree to abide by the above, please do
+                not use this service.
               </p>
             </div>
 
             <div>
-              <h2 className="mb-4 text-2xl font-bold text-foreground">2. Use License</h2>
+              <h2 className="mb-4 text-2xl font-bold text-foreground">
+                2. Use License
+              </h2>
               <p>
-                Permission is granted to temporarily download one copy of the materials (information or software) on
-                Django Rwanda Community&apos;s website for personal, non-commercial transitory viewing only. This is the
-                grant of a license, not a transfer of title, and under this license you may not:
+                Permission is granted to temporarily download one copy of the
+                materials (information or software) on Django Rwanda
+                Community&apos;s website for personal, non-commercial transitory
+                viewing only. This is the grant of a license, not a transfer of
+                title, and under this license you may not:
               </p>
               <ul className="mt-4 space-y-2 list-disc list-inside">
                 <li>Modify or copy the materials</li>
-                <li>Use the materials for any commercial purpose or for any public display</li>
-                <li>Attempt to decompile or reverse engineer any software on the website</li>
-                <li>Transfer the materials to another person or &quot;mirror&quot; the materials</li>
-                <li>Attempt to gain unauthorized access to any portion of the website</li>
+                <li>
+                  Use the materials for any commercial purpose or for any public
+                  display
+                </li>
+                <li>
+                  Attempt to decompile or reverse engineer any software on the
+                  website
+                </li>
+                <li>
+                  Transfer the materials to another person or &quot;mirror&quot;
+                  the materials
+                </li>
+                <li>
+                  Attempt to gain unauthorized access to any portion of the
+                  website
+                </li>
               </ul>
             </div>
 
             <div>
-              <h2 className="mb-4 text-2xl font-bold text-foreground">3. Disclaimer</h2>
+              <h2 className="mb-4 text-2xl font-bold text-foreground">
+                3. Disclaimer
+              </h2>
               <p>
-                The materials on Django Rwanda Community&apos;s website are provided on an &apos;as is&apos; basis.
-                Django Rwanda Community makes no warranties, expressed or implied, and hereby disclaims and negates all
-                other warranties including, without limitation, implied warranties or conditions of merchantability,
-                fitness for a particular purpose, or non-infringement of intellectual property or other violation of
-                rights.
+                The materials on Django Rwanda Community&apos;s website are
+                provided on an &apos;as is&apos; basis. Django Rwanda Community
+                makes no warranties, expressed or implied, and hereby disclaims
+                and negates all other warranties including, without limitation,
+                implied warranties or conditions of merchantability, fitness for
+                a particular purpose, or non-infringement of intellectual
+                property or other violation of rights.
               </p>
             </div>
 
             <div>
-              <h2 className="mb-4 text-2xl font-bold text-foreground">4. Limitations</h2>
+              <h2 className="mb-4 text-2xl font-bold text-foreground">
+                4. Limitations
+              </h2>
               <p>
-                In no event shall Django Rwanda Community or its suppliers be liable for any damages (including, without
-                limitation, damages for loss of data or profit, or due to business interruption) arising out of the use
-                or inability to use the materials on Django Rwanda Community&apos;s website.
+                In no event shall Django Rwanda Community or its suppliers be
+                liable for any damages (including, without limitation, damages
+                for loss of data or profit, or due to business interruption)
+                arising out of the use or inability to use the materials on
+                Django Rwanda Community&apos;s website.
               </p>
             </div>
 
             <div>
-              <h2 className="mb-4 text-2xl font-bold text-foreground">5. Accuracy of Materials</h2>
+              <h2 className="mb-4 text-2xl font-bold text-foreground">
+                5. Accuracy of Materials
+              </h2>
               <p>
-                The materials appearing on Django Rwanda Community&apos;s website could include technical,
-                typographical, or photographic errors. Django Rwanda Community does not warrant that any of the
-                materials on its website are accurate, complete, or current. Django Rwanda Community may make changes to
-                the materials contained on its website at any time without notice.
+                The materials appearing on Django Rwanda Community&apos;s
+                website could include technical, typographical, or photographic
+                errors. Django Rwanda Community does not warrant that any of the
+                materials on its website are accurate, complete, or current.
+                Django Rwanda Community may make changes to the materials
+                contained on its website at any time without notice.
               </p>
             </div>
 
             <div>
-              <h2 className="mb-4 text-2xl font-bold text-foreground">6. Contact Information</h2>
+              <h2 className="mb-4 text-2xl font-bold text-foreground">
+                6. Contact Information
+              </h2>
               <p>
-                For any questions about these Terms of Service, please contact us at:
+                For any questions about these Terms of Service, please contact
+                us at:
                 <br />
                 Email: legal@djangorwanda.dev
               </p>
@@ -83,5 +119,5 @@ export default function TermsPage() {
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/workshops/[id]/page.tsx b/app/workshops/[id]/page.tsx
index aadbeba..38d038c 100644
--- a/app/workshops/[id]/page.tsx
+++ b/app/workshops/[id]/page.tsx
@@ -1,63 +1,86 @@
-import { workshops } from "@/lib/constants"
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Clock, Calendar } from "lucide-react"
-import Image from "next/image"
-import Link from "next/link"
-import { notFound } from "next/navigation"
+import { workshops } from "@/src/lib/constants";
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { Badge } from "@/src/components/ui/badge";
+import { Clock, Calendar } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { notFound } from "next/navigation";
 
 export async function generateStaticParams() {
   return workshops.map((workshop) => ({
     id: workshop.id.toString(),
-  }))
+  }));
 }
 
-export async function generateMetadata(props: { params: Promise<{ id: string }> }) {
-  const params = await props.params
-  const workshop = workshops.find((w) => w.id === Number.parseInt(params.id))
+export async function generateMetadata(props: {
+  params: Promise<{ id: string }>;
+}) {
+  const params = await props.params;
+  const workshop = workshops.find((w) => w.id === Number.parseInt(params.id));
   return {
     title: `${workshop?.title} | Django Workshop`,
     description: workshop?.description,
-  }
+  };
 }
 
-export default async function WorkshopDetailPage(props: { params: Promise<{ id: string }> }) {
-  const params = await props.params
-  const workshop = workshops.find((w) => w.id === Number.parseInt(params.id))
+export default async function WorkshopDetailPage(props: {
+  params: Promise<{ id: string }>;
+}) {
+  const params = await props.params;
+  const workshop = workshops.find((w) => w.id === Number.parseInt(params.id));
 
   if (!workshop) {
-    notFound()
+    notFound();
   }
 
   const syllabus = [
-    { week: 1, topics: ["Introduction to Django", "Project Setup", "Models & Database"] },
+    {
+      week: 1,
+      topics: ["Introduction to Django", "Project Setup", "Models & Database"],
+    },
     { week: 2, topics: ["Views & URL Routing", "Templates", "Static Files"] },
-    { week: 3, topics: ["Forms & Validation", "Authentication", "Permissions"] },
+    {
+      week: 3,
+      topics: ["Forms & Validation", "Authentication", "Permissions"],
+    },
     { week: 4, topics: ["Deployment", "Best Practices", "Project Showcase"] },
-  ]
+  ];
 
   const schedule = [
-    { day: "Monday & Wednesday", time: "6:00 PM - 8:00 PM", type: "Live Sessions" },
+    {
+      day: "Monday & Wednesday",
+      time: "6:00 PM - 8:00 PM",
+      type: "Live Sessions",
+    },
     { day: "Friday", time: "4:00 PM - 6:00 PM", type: "Q&A & Office Hours" },
     { day: "Self-paced", time: "Anytime", type: "Video Lessons & Assignments" },
-  ]
+  ];
 
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen">
       {/* Header */}
       <section className="relative overflow-hidden bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <Link href="/workshops" className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4">
+          <Link
+            href="/workshops"
+            className="inline-flex items-center gap-1 text-primary hover:text-primary/80 mb-4"
+          >
             ← Back to Workshops
           </Link>
           <div className="space-y-4">
             <div className="flex items-start justify-between gap-4">
               <div className="space-y-4">
-                <h1 className="text-4xl font-bold text-foreground md:text-5xl">{workshop.title}</h1>
-                <p className="max-w-2xl text-lg text-foreground/70">{workshop.description}</p>
+                <h1 className="text-4xl font-bold text-foreground md:text-5xl">
+                  {workshop.title}
+                </h1>
+                <p className="max-w-2xl text-lg text-foreground/70">
+                  {workshop.description}
+                </p>
                 <div className="flex flex-wrap gap-3 items-center pt-4">
-                  <Badge className="bg-secondary/20 text-secondary">{workshop.level}</Badge>
+                  <Badge className="bg-secondary/20 text-secondary">
+                    {workshop.level}
+                  </Badge>
                   <div className="flex items-center gap-2 text-foreground/60">
                     <Clock className="h-4 w-4" />
                     <span>{workshop.duration}</span>
@@ -75,35 +98,53 @@ export default async function WorkshopDetailPage(props: { params: Promise<{ id:
           <div className="space-y-12">
             {/* Featured Image */}
             <div className="relative h-96 overflow-hidden rounded-lg bg-muted">
-              <Image src={workshop.image || "/placeholder.svg"} alt={workshop.title} fill className="object-cover" />
+              <Image
+                src={workshop.image || "/placeholder.svg"}
+                alt={workshop.title}
+                fill
+                className="object-cover"
+              />
             </div>
 
             {/* Overview */}
             <Card className="border border-border/50 p-8">
-              <h2 className="mb-4 text-2xl font-bold text-foreground">Course Overview</h2>
+              <h2 className="mb-4 text-2xl font-bold text-foreground">
+                Course Overview
+              </h2>
               <p className="mb-4 text-foreground/70">
-                This {workshop.duration} {workshop.level.toLowerCase()} level course is designed to help you master{" "}
-                {workshop.title.toLowerCase()}. You'll learn through hands-on projects, real-world examples, and
-                guidance from experienced instructors.
+                This {workshop.duration} {workshop.level.toLowerCase()} level
+                course is designed to help you master{" "}
+                {workshop.title.toLowerCase()}. You&apos;ll learn through
+                hands-on projects, real-world examples, and guidance from
+                experienced instructors.
               </p>
               <p className="text-foreground/70">
-                By the end of this course, you'll have built multiple applications and be ready to contribute to
-                production Django projects.
+                By the end of this course, you&apos;ll have built multiple
+                applications and be ready to contribute to production Django
+                projects.
               </p>
             </Card>
 
             {/* Schedule */}
             <div>
-              <h2 className="mb-6 text-2xl font-bold text-foreground">Class Schedule</h2>
+              <h2 className="mb-6 text-2xl font-bold text-foreground">
+                Class Schedule
+              </h2>
               <div className="grid gap-4 md:grid-cols-3">
                 {schedule.map((item, idx) => (
                   <Card key={idx} className="border border-border/50 p-6">
-                    <div className="mb-2 inline-flex rounded-lg bg-accent/10 p-2">
-                      <Calendar className="h-5 w-5 text-accent" />
+                    <div className="mb-2 inline-flex rounded-lg bg-primary/10 p-2">
+                      <Calendar className="h-5 w-5 text-primary" />
                     </div>
-                    <h3 className="font-semibold text-foreground">{item.type}</h3>
-                    <p className="mt-2 text-sm text-foreground/60">{item.day}</p>
-                    <p className="text-sm text-primary font-medium">{item.time}</p>
+                    <h3 className="font-semibold text-foreground">
+                      {item.type}
+                    </h3>
+                    <p className="mt-2 text-sm text-foreground/60">
+                      {item.day}
+                    </p>
+                    <p className="text-sm text-primary font-medium">
+                      {item.time}
+                    </p>
                   </Card>
                 ))}
               </div>
@@ -111,14 +152,21 @@ export default async function WorkshopDetailPage(props: { params: Promise<{ id:
 
             {/* Syllabus */}
             <div>
-              <h2 className="mb-6 text-2xl font-bold text-foreground">Course Syllabus</h2>
+              <h2 className="mb-6 text-2xl font-bold text-foreground">
+                Course Syllabus
+              </h2>
               <div className="space-y-4">
                 {syllabus.map((week) => (
                   <Card key={week.week} className="border border-border/50 p-6">
-                    <h3 className="font-semibold text-foreground mb-3">Week {week.week}</h3>
+                    <h3 className="font-semibold text-foreground mb-3">
+                      Week {week.week}
+                    </h3>
                     <ul className="space-y-2">
                       {week.topics.map((topic) => (
-                        <li key={topic} className="flex items-start gap-3 text-foreground/70">
+                        <li
+                          key={topic}
+                          className="flex items-start gap-3 text-foreground/70"
+                        >
                           <span className="mt-1 inline-block h-2 w-2 rounded-full bg-primary" />
                           {topic}
                         </li>
@@ -130,10 +178,15 @@ export default async function WorkshopDetailPage(props: { params: Promise<{ id:
             </div>
 
             {/* Requirements */}
-            <Card className="border border-border/50 p-8 bg-gradient-to-r from-accent/5 to-primary/5">
-              <h2 className="mb-4 text-2xl font-bold text-foreground">Prerequisites</h2>
+            <Card className="border border-border/50 p-8 bg-gradient-to-r from-primary/5 to-primary-light/5">
+              <h2 className="mb-4 text-2xl font-bold text-foreground">
+                Prerequisites
+              </h2>
               <ul className="space-y-2 text-foreground/70">
-                <li>• Basic Python knowledge or completion of Python fundamentals course</li>
+                <li>
+                  • Basic Python knowledge or completion of Python fundamentals
+                  course
+                </li>
                 <li>• Understanding of HTML and CSS</li>
                 <li>• A computer with Python installed</li>
                 <li>• 5-7 hours per week for coursework and assignments</li>
@@ -143,12 +196,15 @@ export default async function WorkshopDetailPage(props: { params: Promise<{ id:
             {/* CTA */}
             <div className="flex flex-col gap-4 sm:flex-row sm:justify-center pt-4">
               <Link href="/register/workshops" className="flex-1 sm:flex-none">
-                <Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 text-lg py-6">
+                <Button variant="gradient" className="w-full text-lg py-6">
                   Enroll Now
                 </Button>
               </Link>
               <Link href="/contact" className="flex-1 sm:flex-none">
-                <Button variant="outline" className="w-full text-lg py-6 bg-transparent">
+                <Button
+                  variant="outline"
+                  className="w-full text-lg py-6 bg-transparent"
+                >
                   Ask Questions
                 </Button>
               </Link>
@@ -157,5 +213,5 @@ export default async function WorkshopDetailPage(props: { params: Promise<{ id:
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/app/workshops/page.tsx b/app/workshops/page.tsx
index a214f06..e04fbd4 100644
--- a/app/workshops/page.tsx
+++ b/app/workshops/page.tsx
@@ -1,26 +1,30 @@
-import { workshops } from "@/lib/constants"
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Clock, BarChart3, ArrowRight } from "lucide-react"
-import Image from "next/image"
-import Link from "next/link"
+import { workshops } from "@/src/lib/constants";
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { Badge } from "@/src/components/ui/badge";
+import { Clock, BarChart3, ArrowRight } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
 
 export const metadata = {
   title: "Django Workshops | Learn Django",
-  description: "Comprehensive Django workshops from fundamentals to advanced patterns",
-}
+  description:
+    "Comprehensive Django workshops from fundamentals to advanced patterns",
+};
 
 export default function WorkshopsPage() {
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen">
       {/* Header */}
       <section className="bg-gradient-to-b from-primary/10 to-background py-12 md:py-20">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="space-y-4">
-            <h1 className="text-4xl font-bold text-foreground md:text-5xl">Learning & Workshops</h1>
+            <h1 className="text-4xl font-bold text-foreground md:text-5xl">
+              Learning & Workshops
+            </h1>
             <p className="max-w-2xl text-lg text-foreground/70">
-              Master Django through our comprehensive workshops. Choose your level and start learning today.
+              Master Django through our comprehensive workshops. Choose your
+              level and start learning today.
             </p>
           </div>
         </div>
@@ -48,14 +52,19 @@ export default function WorkshopsPage() {
 
                 {/* Content */}
                 <div className="flex flex-1 flex-col space-y-4 p-6">
-                  <h2 className="text-2xl font-bold text-foreground">{workshop.title}</h2>
+                  <h2 className="text-2xl font-bold text-foreground">
+                    {workshop.title}
+                  </h2>
                   <p className="text-foreground/70">{workshop.description}</p>
 
                   {/* Meta info */}
                   <div className="space-y-3 border-t border-border/30 pt-4">
                     <div className="flex items-center gap-2">
-                      <BarChart3 className="h-4 w-4 text-accent" />
-                      <Badge variant="secondary" className="bg-secondary/20 text-secondary">
+                      <BarChart3 className="h-4 w-4 text-primary" />
+                      <Badge
+                        variant="secondary"
+                        className="bg-secondary/20 text-secondary"
+                      >
                         {workshop.level}
                       </Badge>
                     </div>
@@ -67,7 +76,7 @@ export default function WorkshopsPage() {
 
                   {/* CTA */}
                   <Link href={`/workshops/${workshop.id}`} className="mt-auto">
-                    <Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+                    <Button variant="gradient" className="w-full">
                       View Details
                       <ArrowRight className="ml-2 h-4 w-4" />
                     </Button>
@@ -79,5 +88,5 @@ export default function WorkshopsPage() {
         </div>
       </section>
     </div>
-  )
+  );
 }
diff --git a/components/hero.tsx b/components/hero.tsx
deleted file mode 100644
index 17e3094..0000000
--- a/components/hero.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { ArrowRight, Sparkles } from "lucide-react";
-import Link from "next/link";
-
-export function Hero() {
-  return (
-    <section className="relative flex min-h-[calc(100vh-4rem)] items-center overflow-hidden bg-gradient-to-b from-background via-background to-muted">
-      {/* Animated background elements */}
-      <div className="absolute inset-0 overflow-hidden">
-        <div className="absolute -top-40 -right-40 h-80 w-80 rounded-full bg-accent/20 blur-3xl" />
-        <div className="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-primary/20 blur-3xl" />
-        <div className="absolute top-1/2 left-1/2 h-80 w-80 rounded-full bg-secondary/10 blur-3xl" />
-      </div>
-
-      {/* Content */}
-      <div className="relative mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-12 md:py-16">
-        <div className="space-y-8 text-center">
-          {/* Badge */}
-          <div className="inline-flex items-center gap-2 rounded-full border border-accent/30 bg-accent/5 px-4 py-2">
-            <Sparkles className="h-4 w-4 text-accent" />
-            <span className="text-sm font-medium text-accent">
-              Welcome to the Django Rwanda Community
-            </span>
-          </div>
-
-          {/* Main headline */}
-          <div className="space-y-4">
-            <h1 className="text-balance text-4xl font-bold leading-tight text-foreground md:text-6xl lg:text-7xl">
-              Empower African Developers with{" "}
-              <span className="bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent">
-                Django
-              </span>
-            </h1>
-            <p className="text-balance mx-auto max-w-2xl text-lg text-foreground/70 md:text-xl">
-              Join a vibrant community of developers building innovative
-              solutions. Learn, contribute, collaborate, and shape the future of
-              tech in Africa.
-            </p>
-          </div>
-
-          {/* CTA Buttons */}
-          <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
-            <Link href="/get-started">
-              <Button
-                size="lg"
-                className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 text-lg"
-              >
-                Get Started
-                <ArrowRight className="ml-2 h-5 w-5" />
-              </Button>
-            </Link>
-            <Link href="/resources">
-              <Button
-                size="lg"
-                variant="outline"
-                className="text-lg bg-transparent"
-              >
-                Explore Resources
-              </Button>
-            </Link>
-          </div>
-
-          {/* Stats */}
-          <div className="grid grid-cols-3 gap-4 pt-12 md:gap-8">
-            <div className="space-y-2">
-              <div className="text-2xl font-bold text-primary md:text-3xl">
-                500+
-              </div>
-              <p className="text-sm text-foreground/60">Community Members</p>
-            </div>
-            <div className="space-y-2">
-              <div className="text-2xl font-bold text-accent md:text-3xl">
-                50+
-              </div>
-              <p className="text-sm text-foreground/60">Events Hosted</p>
-            </div>
-            <div className="space-y-2">
-              <div className="text-2xl font-bold text-secondary md:text-3xl">
-                20+
-              </div>
-              <p className="text-sm text-foreground/60">Open Source Projects</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
deleted file mode 100644
index f64632d..0000000
--- a/components/ui/button.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost:
-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-        'icon-sm': 'size-8',
-        'icon-lg': 'size-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : 'button'
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }
diff --git a/components/ui/spinner.tsx b/components/ui/spinner.tsx
deleted file mode 100644
index e51fc6d..0000000
--- a/components/ui/spinner.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Loader2Icon } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-
-function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <Loader2Icon
-      role="status"
-      aria-label="Loading"
-      className={cn('size-4 animate-spin', className)}
-      {...props}
-    />
-  )
-}
-
-export { Spinner }
diff --git a/components/community-section.tsx b/src/components/community-section.tsx
similarity index 60%
rename from components/community-section.tsx
rename to src/components/community-section.tsx
index 4013454..6704c5c 100644
--- a/components/community-section.tsx
+++ b/src/components/community-section.tsx
@@ -1,8 +1,8 @@
-import { communityMission } from "@/lib/constants"
-import { Card } from "@/components/ui/card"
-import { Heart, Users, Lightbulb, Globe } from "lucide-react"
+import { communityMission } from "@/src/lib/constants";
+import { Card } from "@/src/components/ui/card";
+import { Heart, Users, Lightbulb, Globe } from "lucide-react";
 
-const valueIcons = [Heart, Users, Lightbulb, Globe]
+const valueIcons = [Heart, Users, Lightbulb, Globe];
 
 export function CommunitySection() {
   return (
@@ -10,36 +10,44 @@ export function CommunitySection() {
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}
         <div className="mb-16 space-y-4 text-center">
-          <h2 className="text-3xl font-bold text-foreground md:text-5xl">{communityMission.title}</h2>
-          <p className="text-xl font-semibold text-accent">{communityMission.subtitle}</p>
-          <p className="text-balance mx-auto max-w-2xl text-foreground/70">{communityMission.description}</p>
+          <h2 className="text-3xl font-bold text-foreground md:text-5xl">
+            {communityMission.title}
+          </h2>
+          <p className="text-xl font-semibold text-accent">
+            {communityMission.subtitle}
+          </p>
+          <p className="text-balance mx-auto max-w-2xl text-foreground/70">
+            {communityMission.description}
+          </p>
         </div>
 
         {/* Values grid */}
         <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
           {communityMission.values.map((value, idx) => {
-            const Icon = valueIcons[idx]
+            const Icon = valueIcons[idx];
             return (
               <Card
                 key={value.title}
-                className="group relative overflow-hidden border border-border/50 bg-card p-8 transition-all hover:border-accent/50 hover:shadow-lg"
+                className="group relative overflow-hidden border border-border/50 bg-card p-8 transition-all hover:border-primary/50 hover:shadow-lg"
               >
                 {/* Background gradient on hover */}
-                <div className="absolute inset-0 bg-gradient-to-br from-accent/0 to-primary/0 transition-all group-hover:from-accent/5 group-hover:to-primary/5" />
+                <div className="absolute inset-0 bg-gradient-to-br from-primary/0 to-primary-light/0 transition-all group-hover:from-primary/5 group-hover:to-primary-light/5" />
 
                 {/* Content */}
                 <div className="relative space-y-4">
-                  <div className="inline-flex rounded-lg bg-gradient-to-br from-primary/10 to-accent/10 p-3">
+                  <div className="inline-flex rounded-lg bg-gradient-to-br from-primary/10 to-primary-light/10 p-3">
                     <Icon className="h-6 w-6 text-primary" />
                   </div>
-                  <h3 className="text-lg font-bold text-foreground">{value.title}</h3>
+                  <h3 className="text-lg font-bold text-foreground">
+                    {value.title}
+                  </h3>
                   <p className="text-foreground/70">{value.description}</p>
                 </div>
               </Card>
-            )
+            );
           })}
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/components/events-section.tsx b/src/components/events-section.tsx
similarity index 80%
rename from components/events-section.tsx
rename to src/components/events-section.tsx
index d51a630..05f2be2 100644
--- a/components/events-section.tsx
+++ b/src/components/events-section.tsx
@@ -1,8 +1,8 @@
-import { events } from "@/lib/constants"
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Calendar, MapPin, Users, Clock } from "lucide-react"
-import Link from "next/link"
+import { events } from "@/src/lib/constants";
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { Calendar, MapPin, Users, Clock } from "lucide-react";
+import Link from "next/link";
 
 export function EventsSection() {
   return (
@@ -10,10 +10,12 @@ export function EventsSection() {
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}
         <div className="mb-16 space-y-4">
-          <h2 className="text-3xl font-bold text-foreground md:text-5xl">Events & Meetups</h2>
+          <h2 className="text-3xl font-bold text-foreground md:text-5xl">
+            Events & Meetups
+          </h2>
           <p className="max-w-2xl text-foreground/70">
-            Connect with fellow developers through our regular meetups, bootcamps, and collaborative events across
-            Africa.
+            Connect with fellow developers through our regular meetups,
+            bootcamps, and collaborative events across Africa.
           </p>
         </div>
 
@@ -22,12 +24,14 @@ export function EventsSection() {
           {events.map((event) => (
             <Card
               key={event.id}
-              className="group overflow-hidden border border-border/50 transition-all hover:border-accent/50 hover:shadow-lg"
+              className="group overflow-hidden border border-border/50 transition-all hover:border-primary/50 hover:shadow-lg"
             >
               <div className="flex flex-col gap-6 p-6 md:flex-row md:items-center md:justify-between">
                 {/* Event info */}
                 <div className="flex-1 space-y-3">
-                  <h3 className="text-xl font-bold text-foreground">{event.title}</h3>
+                  <h3 className="text-xl font-bold text-foreground">
+                    {event.title}
+                  </h3>
                   <p className="text-foreground/70">{event.description}</p>
 
                   {/* Details */}
@@ -53,7 +57,7 @@ export function EventsSection() {
 
                 {/* CTA */}
                 <Link href={`/events/${event.id}`} className="block md:w-auto">
-                  <Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 md:w-auto">
+                  <Button variant="gradient" className="w-full md:w-auto">
                     View Details
                   </Button>
                 </Link>
@@ -63,5 +67,5 @@ export function EventsSection() {
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/components/footer.tsx b/src/components/footer.tsx
similarity index 71%
rename from components/footer.tsx
rename to src/components/footer.tsx
index f0b64f8..6dd94cf 100644
--- a/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,6 +1,6 @@
-import { Button } from "@/components/ui/button"
-import Link from "next/link"
-import { Mail, Github, Twitter } from "lucide-react"
+import { Button } from "@/src/components/ui/button";
+import Link from "next/link";
+import { Mail, Github, Twitter } from "lucide-react";
 
 export function Footer() {
   return (
@@ -10,13 +10,14 @@ export function Footer() {
           {/* Brand */}
           <div className="space-y-4">
             <Link href="/" className="flex items-center gap-2">
-              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-accent text-primary-foreground font-bold">
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary-light text-primary-foreground font-bold">
                 D
               </div>
               <span className="font-bold text-foreground">Django Rwanda</span>
             </Link>
             <p className="text-sm text-foreground/60">
-              Empowering African developers through Django, open source, and community-driven innovation.
+              Empowering African developers through Django, open source, and
+              community-driven innovation.
             </p>
             <div className="flex gap-3">
               <Link
@@ -47,22 +48,34 @@ export function Footer() {
             <h4 className="mb-4 font-semibold text-foreground">Navigation</h4>
             <ul className="space-y-2">
               <li>
-                <Link href="/" className="text-sm text-foreground/60 transition-colors hover:text-foreground">
+                <Link
+                  href="/"
+                  className="text-sm text-foreground/60 transition-colors hover:text-foreground"
+                >
                   Home
                 </Link>
               </li>
               <li>
-                <Link href="/#community" className="text-sm text-foreground/60 transition-colors hover:text-foreground">
+                <Link
+                  href="/#community"
+                  className="text-sm text-foreground/60 transition-colors hover:text-foreground"
+                >
                   Community
                 </Link>
               </li>
               <li>
-                <Link href="/workshops" className="text-sm text-foreground/60 transition-colors hover:text-foreground">
+                <Link
+                  href="/workshops"
+                  className="text-sm text-foreground/60 transition-colors hover:text-foreground"
+                >
                   Workshops
                 </Link>
               </li>
               <li>
-                <Link href="/events" className="text-sm text-foreground/60 transition-colors hover:text-foreground">
+                <Link
+                  href="/events"
+                  className="text-sm text-foreground/60 transition-colors hover:text-foreground"
+                >
                   Events
                 </Link>
               </li>
@@ -111,14 +124,16 @@ export function Footer() {
           {/* Contact CTA */}
           <div className="space-y-4">
             <h4 className="font-semibold text-foreground">Get Involved</h4>
-            <p className="text-sm text-foreground/60">Stay updated with the latest news and opportunities.</p>
+            <p className="text-sm text-foreground/60">
+              Stay updated with the latest news and opportunities.
+            </p>
             <div className="flex">
               <input
                 type="email"
                 placeholder="Your email"
                 className="flex-1 rounded-l-lg border border-border bg-input px-4 py-2 text-sm placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary"
               />
-              <Button className="rounded-l-none bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+              <Button variant="gradient" className="rounded-l-none">
                 Join
               </Button>
             </div>
@@ -128,15 +143,26 @@ export function Footer() {
         {/* Bottom */}
         <div className="mt-12 border-t border-border/30 pt-8">
           <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
-            <p className="text-sm text-foreground/60">&copy; 2025 Django Rwanda Community. All rights reserved.</p>
+            <p className="text-sm text-foreground/60">
+              &copy; 2025 Django Rwanda Community. All rights reserved.
+            </p>
             <div className="flex gap-6">
-              <Link href="/privacy" className="text-sm text-foreground/60 transition-colors hover:text-foreground">
+              <Link
+                href="/privacy"
+                className="text-sm text-foreground/60 transition-colors hover:text-foreground"
+              >
                 Privacy
               </Link>
-              <Link href="/terms" className="text-sm text-foreground/60 transition-colors hover:text-foreground">
+              <Link
+                href="/terms"
+                className="text-sm text-foreground/60 transition-colors hover:text-foreground"
+              >
                 Terms
               </Link>
-              <Link href="/sitemap" className="text-sm text-foreground/60 transition-colors hover:text-foreground">
+              <Link
+                href="/sitemap"
+                className="text-sm text-foreground/60 transition-colors hover:text-foreground"
+              >
                 Sitemap
               </Link>
             </div>
@@ -144,5 +170,5 @@ export function Footer() {
         </div>
       </div>
     </footer>
-  )
+  );
 }
diff --git a/components/header.tsx b/src/components/header.tsx
similarity index 73%
rename from components/header.tsx
rename to src/components/header.tsx
index afc8b86..cd863fe 100644
--- a/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import Link from "next/link"
-import { useState } from "react"
-import { navigationItems } from "@/lib/constants"
-import { Menu, X } from "lucide-react"
-import { Button } from "@/components/ui/button"
+import Link from "next/link";
+import { useState } from "react";
+import { navigationItems } from "@/src/lib/constants";
+import { Menu, X } from "lucide-react";
+import { Button } from "@/src/components/ui/button";
 
 export function Header() {
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
 
   return (
     <header className="sticky top-0 z-50 w-full border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -15,10 +15,12 @@ export function Header() {
         <div className="flex h-16 items-center justify-between">
           {/* Logo */}
           <Link href="/" className="flex items-center gap-2">
-            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-accent text-primary-foreground font-bold">
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-primary to-primary-light text-primary-foreground font-bold">
               D
             </div>
-            <span className="hidden font-bold text-foreground sm:inline-block">Django Rwanda</span>
+            <span className="hidden font-bold text-foreground sm:inline-block">
+              Django Rwanda
+            </span>
           </Link>
 
           {/* Desktop Navigation */}
@@ -40,15 +42,21 @@ export function Header() {
               <Button variant="outline">Sign In</Button>
             </Link>
             <Link href="/community/join">
-              <Button className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
-                Join Community
-              </Button>
+              <Button variant="gradient">Join Community</Button>
             </Link>
           </div>
 
           {/* Mobile Menu Button */}
-          <button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)} aria-label="Toggle menu">
-            {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+          <button
+            className="md:hidden"
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+            aria-label="Toggle menu"
+          >
+            {isMenuOpen ? (
+              <X className="h-6 w-6" />
+            ) : (
+              <Menu className="h-6 w-6" />
+            )}
           </button>
         </div>
 
@@ -73,7 +81,7 @@ export function Header() {
                   </Button>
                 </Link>
                 <Link href="/community/join">
-                  <Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+                  <Button variant="gradient" className="w-full">
                     Join Community
                   </Button>
                 </Link>
@@ -83,5 +91,5 @@ export function Header() {
         )}
       </div>
     </header>
-  )
+  );
 }
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
new file mode 100644
index 0000000..e337b84
--- /dev/null
+++ b/src/components/hero.tsx
@@ -0,0 +1,117 @@
+import { Button } from "@/src/components/ui/button";
+import { ArrowRight, Sparkles, Code2, Users, Zap } from "lucide-react";
+import Link from "next/link";
+
+export function Hero() {
+  return (
+    <section className="relative flex min-h-[calc(100vh-4rem)] items-center overflow-hidden bg-gradient-to-br from-primary/5 via-background to-primary-light/5">
+      {/* Animated background elements */}
+      <div className="absolute inset-0 overflow-hidden">
+        {/* Primary green glows */}
+        <div className="absolute -top-40 -right-40 h-96 w-96 rounded-full bg-primary/25 blur-3xl animate-pulse" />
+        <div className="absolute -bottom-40 -left-40 h-96 w-96 rounded-full bg-primary-light/20 blur-3xl" />
+        <div className="absolute top-1/3 left-1/4 h-64 w-64 rounded-full bg-primary/15 blur-3xl" />
+        <div className="absolute bottom-1/4 right-1/4 h-72 w-72 rounded-full bg-primary-light/15 blur-3xl animate-pulse" />
+
+        {/* Floating decorative elements */}
+        <div className="absolute top-20 left-10 h-2 w-2 rounded-full bg-primary/40 animate-hero-float-slow" />
+        <div className="absolute top-40 right-20 h-3 w-3 rounded-full bg-primary-light/50 animate-hero-float-medium" />
+        <div className="absolute bottom-32 left-1/4 h-2 w-2 rounded-full bg-primary/30 animate-hero-float-fast" />
+      </div>
+
+      {/* Content */}
+      <div className="relative mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-12 md:py-16">
+        <div className="space-y-8 text-center">
+          {/* Badge */}
+          <div className="inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/5 px-4 py-2 backdrop-blur-sm">
+            <Sparkles className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium text-primary">
+              Welcome to the Django Rwanda Community
+            </span>
+          </div>
+
+          {/* Main headline */}
+          <div className="space-y-4">
+            <h1 className="text-balance text-4xl font-bold leading-tight text-foreground md:text-6xl lg:text-7xl">
+              Empower African Developers with{" "}
+              <span className="relative">
+                <span className="bg-gradient-to-r from-primary via-primary-light to-primary bg-clip-text text-transparent bg-[length:200%_auto] animate-hero-shimmer">
+                  Django
+                </span>
+                <span className="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-primary to-primary-light rounded-full opacity-60" />
+              </span>
+            </h1>
+            <p className="text-balance mx-auto max-w-2xl text-lg text-foreground/70 md:text-xl">
+              Join a vibrant community of developers building innovative
+              solutions. Learn, contribute, collaborate, and shape the future of
+              tech in Africa.
+            </p>
+          </div>
+
+          {/* CTA Buttons */}
+          <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
+            <Link href="/get-started">
+              <Button
+                size="lg"
+                variant="gradient"
+                className="text-lg shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 transition-all"
+              >
+                Get Started
+                <ArrowRight className="ml-2 h-5 w-5" />
+              </Button>
+            </Link>
+            <Link href="/resources">
+              <Button
+                size="lg"
+                variant="outline"
+                className="text-lg bg-transparent border-primary/30 hover:bg-primary/5 hover:border-primary/50"
+              >
+                Explore Resources
+              </Button>
+            </Link>
+          </div>
+
+          {/* Stats with green styling */}
+          <div className="grid grid-cols-3 gap-4 pt-12 md:gap-8">
+            <div className="group relative space-y-2 rounded-2xl border border-primary/10 bg-gradient-to-br from-primary/5 to-transparent p-6 transition-all hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5">
+              <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-primary-light/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
+              <div className="relative flex items-center justify-center gap-2">
+                <Users className="h-5 w-5 text-primary hidden sm:block" />
+                <span className="text-2xl font-bold text-primary md:text-3xl">
+                  500+
+                </span>
+              </div>
+              <p className="relative text-sm text-foreground/60">
+                Community Members
+              </p>
+            </div>
+            <div className="group relative space-y-2 rounded-2xl border border-primary-light/10 bg-gradient-to-br from-primary-light/5 to-transparent p-6 transition-all hover:border-primary-light/30 hover:shadow-lg hover:shadow-primary-light/5">
+              <div className="absolute inset-0 bg-gradient-to-br from-primary-light/5 to-primary/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
+              <div className="relative flex items-center justify-center gap-2">
+                <Zap className="h-5 w-5 text-primary-light hidden sm:block" />
+                <span className="text-2xl font-bold text-primary-light md:text-3xl">
+                  50+
+                </span>
+              </div>
+              <p className="relative text-sm text-foreground/60">
+                Events Hosted
+              </p>
+            </div>
+            <div className="group relative space-y-2 rounded-2xl border border-primary/10 bg-gradient-to-br from-primary/5 to-transparent p-6 transition-all hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5">
+              <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-primary-light/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity" />
+              <div className="relative flex items-center justify-center gap-2">
+                <Code2 className="h-5 w-5 text-primary hidden sm:block" />
+                <span className="text-2xl font-bold text-primary md:text-3xl">
+                  20+
+                </span>
+              </div>
+              <p className="relative text-sm text-foreground/60">
+                Open Source Projects
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/open-source-section.tsx b/src/components/open-source-section.tsx
similarity index 60%
rename from components/open-source-section.tsx
rename to src/components/open-source-section.tsx
index 028472f..a4442a6 100644
--- a/components/open-source-section.tsx
+++ b/src/components/open-source-section.tsx
@@ -1,20 +1,23 @@
-import { openSourceProjects } from "@/lib/constants"
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Github, Star, UsersIcon } from "lucide-react"
-import Link from "next/link"
+import { openSourceProjects } from "@/src/lib/constants";
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { Badge } from "@/src/components/ui/badge";
+import { Github, Star, UsersIcon } from "lucide-react";
+import Link from "next/link";
 
 export function OpenSourceSection() {
   return (
-    <section id="open-source" className="relative bg-gradient-to-b from-background to-muted py-20 md:py-32">
+    <section id="open-source" className="relative py-20 md:py-32">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}
         <div className="mb-16 space-y-4">
-          <h2 className="text-3xl font-bold text-foreground md:text-5xl">Open Source & Contribution</h2>
+          <h2 className="text-3xl font-bold text-foreground md:text-5xl">
+            Open Source & Contribution
+          </h2>
           <p className="max-w-2xl text-foreground/70">
-            Join our thriving open-source ecosystem. Contribute to projects that matter, learn from experienced
-            developers, and build solutions for African communities.
+            Join our thriving open-source ecosystem. Contribute to projects that
+            matter, learn from experienced developers, and build solutions for
+            African communities.
           </p>
         </div>
 
@@ -27,30 +30,39 @@ export function OpenSourceSection() {
             >
               {/* Header with icon */}
               <div className="mb-4 flex items-start justify-between">
-                <div className="inline-flex rounded-lg bg-gradient-to-br from-primary/10 to-accent/10 p-3">
+                <div className="inline-flex rounded-lg bg-gradient-to-br from-primary/10 to-primary-light/10 p-3">
                   <Github className="h-6 w-6 text-primary" />
                 </div>
                 <Badge className="bg-accent/10 text-accent">Open Source</Badge>
               </div>
 
               {/* Content */}
-              <h3 className="mb-2 text-lg font-bold text-foreground">{project.title}</h3>
+              <h3 className="mb-2 text-lg font-bold text-foreground">
+                {project.title}
+              </h3>
               <p className="flex-1 text-foreground/70">{project.description}</p>
 
               {/* Stats */}
               <div className="my-6 flex gap-4 border-y border-border/30 py-4">
                 <div className="flex items-center gap-1">
                   <Star className="h-4 w-4 text-accent" />
-                  <span className="text-sm font-medium text-foreground">{project.stars}</span>
+                  <span className="text-sm font-medium text-foreground">
+                    {project.stars}
+                  </span>
                 </div>
                 <div className="flex items-center gap-1">
                   <UsersIcon className="h-4 w-4 text-primary" />
-                  <span className="text-sm font-medium text-foreground">{project.contributors} contributors</span>
+                  <span className="text-sm font-medium text-foreground">
+                    {project.contributors} contributors
+                  </span>
                 </div>
               </div>
 
               {/* CTA */}
-              <Button variant="outline" className="w-full border-primary/30 hover:bg-primary/5 bg-transparent">
+              <Button
+                variant="outline"
+                className="w-full border-primary/30 hover:bg-primary/5 bg-transparent"
+              >
                 Contribute
               </Button>
             </Card>
@@ -58,19 +70,20 @@ export function OpenSourceSection() {
         </div>
 
         {/* Contribution CTA */}
-        <div className="mt-16 rounded-lg border border-accent/30 bg-gradient-to-r from-accent/5 to-primary/5 p-8 text-center md:p-12">
-          <h3 className="mb-2 text-2xl font-bold text-foreground">Ready to Contribute?</h3>
+        <div className="mt-16 rounded-lg border border-primary/30 bg-gradient-to-r from-primary/5 to-primary-light/5 p-8 text-center md:p-12">
+          <h3 className="mb-2 text-2xl font-bold text-foreground">
+            Ready to Contribute?
+          </h3>
           <p className="mb-6 text-foreground/70">
-            Every contribution matters. Whether you're a beginner or experienced developer, there's a place for you in
-            our open-source community.
+            Every contribution matters. Whether you&apos;re a beginner or
+            experienced developer, there&apos;s a place for you in our
+            open-source community.
           </p>
           <Link href="/community/contribute">
-            <Button className="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
-              Start Contributing Today
-            </Button>
+            <Button variant="gradient">Start Contributing Today</Button>
           </Link>
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/components/resources-section.tsx b/src/components/resources-section.tsx
similarity index 60%
rename from components/resources-section.tsx
rename to src/components/resources-section.tsx
index ff7b876..37b50dd 100644
--- a/components/resources-section.tsx
+++ b/src/components/resources-section.tsx
@@ -1,16 +1,16 @@
-import { startupResources } from "@/lib/constants"
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { BookOpen, DollarSign, Handshake, Lightbulb } from "lucide-react"
-import Link from "next/link"
+import { startupResources } from "@/src/lib/constants";
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { BookOpen, DollarSign, Handshake, Lightbulb } from "lucide-react";
+import Link from "next/link";
 
-const resourceIcons = [BookOpen, DollarSign, Handshake, Lightbulb]
+const resourceIcons = [BookOpen, DollarSign, Handshake, Lightbulb];
 const resourceHrefs = [
   "/resources/startup-toolkit",
   "/resources/funding-directory",
   "/resources/mentorship",
   "/resources/problem-solutions",
-]
+];
 
 export function ResourcesSection() {
   return (
@@ -18,42 +18,52 @@ export function ResourcesSection() {
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}
         <div className="mb-16 space-y-4">
-          <h2 className="text-3xl font-bold text-foreground md:text-5xl">Resources for Entrepreneurs</h2>
+          <h2 className="text-3xl font-bold text-foreground md:text-5xl">
+            Resources for Entrepreneurs
+          </h2>
           <p className="max-w-2xl text-foreground/70">
-            Build local solutions to African challenges. Access startup resources, connect with mentors, and transform
-            your ideas into thriving businesses.
+            Build local solutions to African challenges. Access startup
+            resources, connect with mentors, and transform your ideas into
+            thriving businesses.
           </p>
         </div>
 
         {/* Resources grid */}
         <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
           {startupResources.map((resource, idx) => {
-            const Icon = resourceIcons[idx]
+            const Icon = resourceIcons[idx];
             return (
               <Card
                 key={resource.id}
-                className="group flex flex-col border border-border/50 p-8 transition-all hover:border-accent/50 hover:shadow-lg"
+                className="group flex flex-col border border-border/50 p-8 transition-all hover:border-primary/50 hover:shadow-lg"
               >
                 {/* Icon */}
-                <div className="mb-4 inline-flex rounded-lg bg-gradient-to-br from-accent/10 to-primary/10 p-3">
-                  <Icon className="h-6 w-6 text-accent" />
+                <div className="mb-4 inline-flex rounded-lg bg-gradient-to-br from-primary/10 to-primary-light/10 p-3">
+                  <Icon className="h-6 w-6 text-primary" />
                 </div>
 
                 {/* Content */}
-                <h3 className="mb-2 text-lg font-bold text-foreground">{resource.title}</h3>
-                <p className="flex-1 text-foreground/70">{resource.description}</p>
+                <h3 className="mb-2 text-lg font-bold text-foreground">
+                  {resource.title}
+                </h3>
+                <p className="flex-1 text-foreground/70">
+                  {resource.description}
+                </p>
 
                 {/* CTA */}
                 <Link href={resourceHrefs[idx]}>
-                  <Button variant="outline" className="w-full mt-4 border-accent/30 hover:bg-accent/5 bg-transparent">
+                  <Button
+                    variant="outline"
+                    className="w-full mt-4 border-primary/30 hover:bg-primary/5 bg-transparent"
+                  >
                     Explore
                   </Button>
                 </Link>
               </Card>
-            )
+            );
           })}
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/components/team-section.tsx b/src/components/team-section.tsx
similarity index 76%
rename from components/team-section.tsx
rename to src/components/team-section.tsx
index 86306f5..1050fde 100644
--- a/components/team-section.tsx
+++ b/src/components/team-section.tsx
@@ -1,14 +1,11 @@
-import { teamMembers } from "@/lib/constants";
-import { Card } from "@/components/ui/card";
+import { teamMembers } from "@/src/lib/constants";
+import { Card } from "@/src/components/ui/card";
 import Image from "next/image";
 import { Github, Linkedin, Twitter } from "lucide-react";
 
 export function TeamSection() {
   return (
-    <section
-      id="team"
-      className="relative py-20 md:py-32 bg-gradient-to-b from-muted to-background"
-    >
+    <section id="team" className="relative py-20 md:py-32">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}
         <div className="mb-16 space-y-4 text-center">
@@ -32,7 +29,7 @@ export function TeamSection() {
               className="group relative overflow-hidden border border-border/50 bg-card transition-all hover:border-primary/50 hover:shadow-lg"
             >
               {/* Image */}
-              <div className="relative mx-auto mt-6 h-28 w-28 overflow-hidden rounded-full bg-gradient-to-br from-primary/20 to-accent/20">
+              <div className="relative mx-auto mt-6 h-28 w-28 overflow-hidden rounded-full bg-gradient-to-br from-primary/20 to-primary-light/20">
                 <Image
                   src={member.image}
                   alt={member.name}
@@ -56,13 +53,22 @@ export function TeamSection() {
 
                 {/* Social links placeholder */}
                 <div className="flex justify-center gap-3 pt-2">
-                  <button className="rounded-full bg-muted p-2 text-foreground/60 transition-colors hover:bg-primary hover:text-primary-foreground">
+                  <button
+                    aria-label="Twitter"
+                    className="rounded-full bg-muted p-2 text-foreground/60 transition-colors hover:bg-primary hover:text-primary-foreground"
+                  >
                     <Twitter className="h-4 w-4" />
                   </button>
-                  <button className="rounded-full bg-muted p-2 text-foreground/60 transition-colors hover:bg-primary hover:text-primary-foreground">
+                  <button
+                    aria-label="LinkedIn"
+                    className="rounded-full bg-muted p-2 text-foreground/60 transition-colors hover:bg-primary hover:text-primary-foreground"
+                  >
                     <Linkedin className="h-4 w-4" />
                   </button>
-                  <button className="rounded-full bg-muted p-2 text-foreground/60 transition-colors hover:bg-primary hover:text-primary-foreground">
+                  <button
+                    aria-label="GitHub"
+                    className="rounded-full bg-muted p-2 text-foreground/60 transition-colors hover:bg-primary hover:text-primary-foreground"
+                  >
                     <Github className="h-4 w-4" />
                   </button>
                 </div>
@@ -83,7 +89,7 @@ export function TeamSection() {
             </p>
             <a
               href="/community/contribute"
-              className="inline-flex items-center rounded-lg bg-gradient-to-r from-primary to-accent px-6 py-3 font-medium text-primary-foreground transition-all hover:from-primary/90 hover:to-accent/90"
+              className="inline-flex items-center rounded-lg bg-gradient-to-r from-primary to-primary-light px-6 py-3 font-medium text-primary-foreground transition-all hover:opacity-90"
             >
               Get Involved
             </a>
diff --git a/components/theme-provider.tsx b/src/components/theme-provider.tsx
similarity index 100%
rename from components/theme-provider.tsx
rename to src/components/theme-provider.tsx
diff --git a/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
similarity index 77%
rename from components/ui/accordion.tsx
rename to src/components/ui/accordion.tsx
index e538a33..3c4a45c 100644
--- a/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { ChevronDownIcon } from 'lucide-react'
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function Accordion({
   ...props
 }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
 }
 
 function AccordionItem({
@@ -19,10 +19,10 @@ function AccordionItem({
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn('border-b last:border-b-0', className)}
+      className={cn("border-b last:border-b-0", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AccordionTrigger({
@@ -35,7 +35,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
           className,
         )}
         {...props}
@@ -44,7 +44,7 @@ function AccordionTrigger({
         <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
-  )
+  );
 }
 
 function AccordionContent({
@@ -58,9 +58,9 @@ function AccordionContent({
       className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
       {...props}
     >
-      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
     </AccordionPrimitive.Content>
-  )
+  );
 }
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
similarity index 76%
rename from components/ui/alert-dialog.tsx
rename to src/components/ui/alert-dialog.tsx
index 9704452..fc37b16 100644
--- a/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
+import { cn } from "@/src/lib/utils";
+import { buttonVariants } from "@/src/components/ui/button";
 
 function AlertDialog({
   ...props
 }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
 function AlertDialogTrigger({
@@ -17,7 +17,7 @@ function AlertDialogTrigger({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
   return (
     <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
+  );
 }
 
 function AlertDialogPortal({
@@ -25,7 +25,7 @@ function AlertDialogPortal({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
   return (
     <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
+  );
 }
 
 function AlertDialogOverlay({
@@ -36,12 +36,12 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogContent({
@@ -54,42 +54,42 @@ function AlertDialogContent({
       <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
           className,
         )}
         {...props}
       />
     </AlertDialogPortal>
-  )
+  );
 }
 
 function AlertDialogHeader({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
+}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-header"
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogFooter({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
+}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-footer"
       className={cn(
-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogTitle({
@@ -99,10 +99,10 @@ function AlertDialogTitle({
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      className={cn('text-lg font-semibold', className)}
+      className={cn("text-lg font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogDescription({
@@ -112,10 +112,10 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogAction({
@@ -127,7 +127,7 @@ function AlertDialogAction({
       className={cn(buttonVariants(), className)}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDialogCancel({
@@ -136,10 +136,10 @@ function AlertDialogCancel({
 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
   return (
     <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: 'outline' }), className)}
+      className={cn(buttonVariants({ variant: "outline" }), className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -154,4 +154,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-}
+};
diff --git a/components/ui/alert.tsx b/src/components/ui/alert.tsx
similarity index 52%
rename from components/ui/alert.tsx
rename to src/components/ui/alert.tsx
index e6751ab..2814345 100644
--- a/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -1,29 +1,29 @@
-import * as React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
-        default: 'bg-card text-card-foreground',
+        default: "bg-card text-card-foreground",
         destructive:
-          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: "default",
     },
   },
-)
+);
 
 function Alert({
   className,
   variant,
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
   return (
     <div
       data-slot="alert"
@@ -31,36 +31,36 @@ function Alert({
       className={cn(alertVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
-function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-title"
       className={cn(
-        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AlertDescription({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
+}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-description"
       className={cn(
-        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };
diff --git a/components/ui/aspect-ratio.tsx b/src/components/ui/aspect-ratio.tsx
similarity index 100%
rename from components/ui/aspect-ratio.tsx
rename to src/components/ui/aspect-ratio.tsx
diff --git a/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
similarity index 63%
rename from components/ui/avatar.tsx
rename to src/components/ui/avatar.tsx
index aa98465..84ad3c7 100644
--- a/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function Avatar({
   className,
@@ -13,12 +13,12 @@ function Avatar({
     <AvatarPrimitive.Root
       data-slot="avatar"
       className={cn(
-        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function AvatarImage({
@@ -28,10 +28,10 @@ function AvatarImage({
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
-      className={cn('aspect-square size-full', className)}
+      className={cn("aspect-square size-full", className)}
       {...props}
     />
-  )
+  );
 }
 
 function AvatarFallback({
@@ -42,12 +42,12 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        'bg-muted flex size-full items-center justify-center rounded-full',
+        "bg-muted flex size-full items-center justify-center rounded-full",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/components/ui/badge.tsx b/src/components/ui/badge.tsx
similarity index 51%
rename from components/ui/badge.tsx
rename to src/components/ui/badge.tsx
index fc4126b..13763f3 100644
--- a/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -1,38 +1,38 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {
         default:
-          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary:
-          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
-          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: "default",
     },
   },
-)
+);
 
 function Badge({
   className,
   variant,
   asChild = false,
   ...props
-}: React.ComponentProps<'span'> &
+}: React.ComponentProps<"span"> &
   VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'span'
+  const Comp = asChild ? Slot : "span";
 
   return (
     <Comp
@@ -40,7 +40,7 @@ function Badge({
       className={cn(badgeVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
similarity index 62%
rename from components/ui/breadcrumb.tsx
rename to src/components/ui/breadcrumb.tsx
index 1750ff2..7b8db3f 100644
--- a/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -1,101 +1,101 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { ChevronRight, MoreHorizontal } from 'lucide-react'
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
-function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
 }
 
-function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
   return (
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
   return (
     <li
       data-slot="breadcrumb-item"
-      className={cn('inline-flex items-center gap-1.5', className)}
+      className={cn("inline-flex items-center gap-1.5", className)}
       {...props}
     />
-  )
+  );
 }
 
 function BreadcrumbLink({
   asChild,
   className,
   ...props
-}: React.ComponentProps<'a'> & {
-  asChild?: boolean
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
 }) {
-  const Comp = asChild ? Slot : 'a'
+  const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
       data-slot="breadcrumb-link"
-      className={cn('hover:text-foreground transition-colors', className)}
+      className={cn("hover:text-foreground transition-colors", className)}
       {...props}
     />
-  )
+  );
 }
 
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="breadcrumb-page"
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn('text-foreground font-normal', className)}
+      className={cn("text-foreground font-normal", className)}
       {...props}
     />
-  )
+  );
 }
 
 function BreadcrumbSeparator({
   children,
   className,
   ...props
-}: React.ComponentProps<'li'>) {
+}: React.ComponentProps<"li">) {
   return (
     <li
       data-slot="breadcrumb-separator"
       role="presentation"
       aria-hidden="true"
-      className={cn('[&>svg]:size-3.5', className)}
+      className={cn("[&>svg]:size-3.5", className)}
       {...props}
     >
       {children ?? <ChevronRight />}
     </li>
-  )
+  );
 }
 
 function BreadcrumbEllipsis({
   className,
   ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="breadcrumb-ellipsis"
       role="presentation"
       aria-hidden="true"
-      className={cn('flex size-9 items-center justify-center', className)}
+      className={cn("flex size-9 items-center justify-center", className)}
       {...props}
     >
       <MoreHorizontal className="size-4" />
       <span className="sr-only">More</span>
     </span>
-  )
+  );
 }
 
 export {
@@ -106,4 +106,4 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-}
+};
diff --git a/components/ui/button-group.tsx b/src/components/ui/button-group.tsx
similarity index 67%
rename from components/ui/button-group.tsx
rename to src/components/ui/button-group.tsx
index 09d4430..2b86a30 100644
--- a/components/ui/button-group.tsx
+++ b/src/components/ui/button-group.tsx
@@ -1,8 +1,8 @@
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from '@/lib/utils'
-import { Separator } from '@/components/ui/separator'
+import { cn } from "@/src/lib/utils";
+import { Separator } from "@/src/components/ui/separator";
 
 const buttonGroupVariants = cva(
   "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
@@ -10,22 +10,22 @@ const buttonGroupVariants = cva(
     variants: {
       orientation: {
         horizontal:
-          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
         vertical:
-          'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
       },
     },
     defaultVariants: {
-      orientation: 'horizontal',
+      orientation: "horizontal",
     },
   },
-)
+);
 
 function ButtonGroup({
   className,
   orientation,
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
   return (
     <div
       role="group"
@@ -34,17 +34,17 @@ function ButtonGroup({
       className={cn(buttonGroupVariants({ orientation }), className)}
       {...props}
     />
-  )
+  );
 }
 
 function ButtonGroupText({
   className,
   asChild = false,
   ...props
-}: React.ComponentProps<'div'> & {
-  asChild?: boolean
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean;
 }) {
-  const Comp = asChild ? Slot : 'div'
+  const Comp = asChild ? Slot : "div";
 
   return (
     <Comp
@@ -54,12 +54,12 @@ function ButtonGroupText({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ButtonGroupSeparator({
   className,
-  orientation = 'vertical',
+  orientation = "vertical",
   ...props
 }: React.ComponentProps<typeof Separator>) {
   return (
@@ -67,12 +67,12 @@ function ButtonGroupSeparator({
       data-slot="button-group-separator"
       orientation={orientation}
       className={cn(
-        'bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto',
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -80,4 +80,4 @@ export {
   ButtonGroupSeparator,
   ButtonGroupText,
   buttonGroupVariants,
-}
+};
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..f09b51d
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,62 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/src/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        gradient:
+          "bg-gradient-to-r from-primary to-primary-light text-primary-foreground hover:from-primary/90 hover:to-primary-light/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
diff --git a/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
similarity index 59%
rename from components/ui/calendar.tsx
rename to src/components/ui/calendar.tsx
index eaa373e..2e33374 100644
--- a/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -1,35 +1,35 @@
-'use client'
+"use client";
 
-import * as React from 'react'
+import * as React from "react";
 import {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-} from 'lucide-react'
-import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'
+} from "lucide-react";
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
 
-import { cn } from '@/lib/utils'
-import { Button, buttonVariants } from '@/components/ui/button'
+import { cn } from "@/src/lib/utils";
+import { Button, buttonVariants } from "@/src/components/ui/button";
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
-  captionLayout = 'label',
-  buttonVariant = 'ghost',
+  captionLayout = "label",
+  buttonVariant = "ghost",
   formatters,
   components,
   ...props
 }: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>['variant']
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className,
@@ -37,91 +37,91 @@ function Calendar({
       captionLayout={captionLayout}
       formatters={{
         formatMonthDropdown: (date) =>
-          date.toLocaleString('default', { month: 'short' }),
+          date.toLocaleString("default", { month: "short" }),
         ...formatters,
       }}
       classNames={{
-        root: cn('w-fit', defaultClassNames.root),
+        root: cn("w-fit", defaultClassNames.root),
         months: cn(
-          'flex gap-4 flex-col md:flex-row relative',
+          "flex gap-4 flex-col md:flex-row relative",
           defaultClassNames.months,
         ),
-        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
         nav: cn(
-          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
           defaultClassNames.nav,
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
           defaultClassNames.button_previous,
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
           defaultClassNames.button_next,
         ),
         month_caption: cn(
-          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
           defaultClassNames.month_caption,
         ),
         dropdowns: cn(
-          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
           defaultClassNames.dropdowns,
         ),
         dropdown_root: cn(
-          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
           defaultClassNames.dropdown_root,
         ),
         dropdown: cn(
-          'absolute bg-popover inset-0 opacity-0',
+          "absolute bg-popover inset-0 opacity-0",
           defaultClassNames.dropdown,
         ),
         caption_label: cn(
-          'select-none font-medium',
-          captionLayout === 'label'
-            ? 'text-sm'
-            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
           defaultClassNames.caption_label,
         ),
-        table: 'w-full border-collapse',
-        weekdays: cn('flex', defaultClassNames.weekdays),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
           defaultClassNames.weekday,
         ),
-        week: cn('flex w-full mt-2', defaultClassNames.week),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
         week_number_header: cn(
-          'select-none w-(--cell-size)',
+          "select-none w-(--cell-size)",
           defaultClassNames.week_number_header,
         ),
         week_number: cn(
-          'text-[0.8rem] select-none text-muted-foreground',
+          "text-[0.8rem] select-none text-muted-foreground",
           defaultClassNames.week_number,
         ),
         day: cn(
-          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
           defaultClassNames.day,
         ),
         range_start: cn(
-          'rounded-l-md bg-accent',
+          "rounded-l-md bg-accent",
           defaultClassNames.range_start,
         ),
-        range_middle: cn('rounded-none', defaultClassNames.range_middle),
-        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
         today: cn(
-          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
           defaultClassNames.today,
         ),
         outside: cn(
-          'text-muted-foreground aria-selected:text-muted-foreground',
+          "text-muted-foreground aria-selected:text-muted-foreground",
           defaultClassNames.outside,
         ),
         disabled: cn(
-          'text-muted-foreground opacity-50',
+          "text-muted-foreground opacity-50",
           defaultClassNames.disabled,
         ),
-        hidden: cn('invisible', defaultClassNames.hidden),
+        hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
@@ -133,27 +133,27 @@ function Calendar({
               className={cn(className)}
               {...props}
             />
-          )
+          );
         },
         Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === 'left') {
+          if (orientation === "left") {
             return (
-              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
-            )
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            );
           }
 
-          if (orientation === 'right') {
+          if (orientation === "right") {
             return (
               <ChevronRightIcon
-                className={cn('size-4', className)}
+                className={cn("size-4", className)}
                 {...props}
               />
-            )
+            );
           }
 
           return (
-            <ChevronDownIcon className={cn('size-4', className)} {...props} />
-          )
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          );
         },
         DayButton: CalendarDayButton,
         WeekNumber: ({ children, ...props }) => {
@@ -163,13 +163,13 @@ function Calendar({
                 {children}
               </div>
             </td>
-          )
+          );
         },
         ...components,
       }}
       {...props}
     />
-  )
+  );
 }
 
 function CalendarDayButton({
@@ -178,12 +178,12 @@ function CalendarDayButton({
   modifiers,
   ...props
 }: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
+  const defaultClassNames = getDefaultClassNames();
 
-  const ref = React.useRef<HTMLButtonElement>(null)
+  const ref = React.useRef<HTMLButtonElement>(null);
   React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
-  }, [modifiers.focused])
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
 
   return (
     <Button
@@ -201,13 +201,13 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Calendar, CalendarDayButton }
+export { Calendar, CalendarDayButton };
diff --git a/components/ui/card.tsx b/src/components/ui/card.tsx
similarity index 62%
rename from components/ui/card.tsx
rename to src/components/ui/card.tsx
index db7dd3c..19d15e7 100644
--- a/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,84 +1,84 @@
-import * as React from 'react'
+import * as React from "react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
-function Card({ className, ...props }: React.ComponentProps<'div'>) {
+function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card"
       className={cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-header"
       className={cn(
-        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-title"
-      className={cn('leading-none font-semibold', className)}
+      className={cn("leading-none font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
-function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
-function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-action"
       className={cn(
-        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-content"
-      className={cn('px-6', className)}
+      className={cn("px-6", className)}
       {...props}
     />
-  )
+  );
 }
 
-function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-footer"
-      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -89,4 +89,4 @@ export {
   CardAction,
   CardDescription,
   CardContent,
-}
+};
diff --git a/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
similarity index 54%
rename from components/ui/carousel.tsx
rename to src/components/ui/carousel.tsx
index d4a768e..4bb28da 100644
--- a/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -1,108 +1,108 @@
-'use client'
+"use client";
 
-import * as React from 'react'
+import * as React from "react";
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
-} from 'embla-carousel-react'
-import { ArrowLeft, ArrowRight } from 'lucide-react'
+} from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
 
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
+import { cn } from "@/src/lib/utils";
+import { Button } from "@/src/components/ui/button";
 
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
 
 type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: 'horizontal' | 'vertical'
-  setApi?: (api: CarouselApi) => void
-}
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext)
+  const context = React.useContext(CarouselContext);
 
   if (!context) {
-    throw new Error('useCarousel must be used within a <Carousel />')
+    throw new Error("useCarousel must be used within a <Carousel />");
   }
 
-  return context
+  return context;
 }
 
 function Carousel({
-  orientation = 'horizontal',
+  orientation = "horizontal",
   opts,
   setApi,
   plugins,
   className,
   children,
   ...props
-}: React.ComponentProps<'div'> & CarouselProps) {
+}: React.ComponentProps<"div"> & CarouselProps) {
   const [carouselRef, api] = useEmblaCarousel(
     {
       ...opts,
-      axis: orientation === 'horizontal' ? 'x' : 'y',
+      axis: orientation === "horizontal" ? "x" : "y",
     },
     plugins,
-  )
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-  const [canScrollNext, setCanScrollNext] = React.useState(false)
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
 
   const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return
-    setCanScrollPrev(api.canScrollPrev())
-    setCanScrollNext(api.canScrollNext())
-  }, [])
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
 
   const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev()
-  }, [api])
+    api?.scrollPrev();
+  }, [api]);
 
   const scrollNext = React.useCallback(() => {
-    api?.scrollNext()
-  }, [api])
+    api?.scrollNext();
+  }, [api]);
 
   const handleKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault()
-        scrollPrev()
-      } else if (event.key === 'ArrowRight') {
-        event.preventDefault()
-        scrollNext()
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
       }
     },
     [scrollPrev, scrollNext],
-  )
+  );
 
   React.useEffect(() => {
-    if (!api || !setApi) return
-    setApi(api)
-  }, [api, setApi])
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
 
   React.useEffect(() => {
-    if (!api) return
-    onSelect(api)
-    api.on('reInit', onSelect)
-    api.on('select', onSelect)
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
 
     return () => {
-      api?.off('select', onSelect)
-    }
-  }, [api, onSelect])
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
 
   return (
     <CarouselContext.Provider
@@ -111,7 +111,7 @@ function Carousel({
         api: api,
         opts,
         orientation:
-          orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
         scrollPrev,
         scrollNext,
         canScrollPrev,
@@ -120,7 +120,7 @@ function Carousel({
     >
       <div
         onKeyDownCapture={handleKeyDown}
-        className={cn('relative', className)}
+        className={cn("relative", className)}
         role="region"
         aria-roledescription="carousel"
         data-slot="carousel"
@@ -129,11 +129,11 @@ function Carousel({
         {children}
       </div>
     </CarouselContext.Provider>
-  )
+  );
 }
 
-function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
-  const { carouselRef, orientation } = useCarousel()
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel();
 
   return (
     <div
@@ -143,18 +143,18 @@ function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
     >
       <div
         className={cn(
-          'flex',
-          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
           className,
         )}
         {...props}
       />
     </div>
-  )
+  );
 }
 
-function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
-  const { orientation } = useCarousel()
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel();
 
   return (
     <div
@@ -162,22 +162,22 @@ function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
       aria-roledescription="slide"
       data-slot="carousel-item"
       className={cn(
-        'min-w-0 shrink-0 grow-0 basis-full',
-        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CarouselPrevious({
   className,
-  variant = 'outline',
-  size = 'icon',
+  variant = "outline",
+  size = "icon",
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
   return (
     <Button
@@ -185,10 +185,10 @@ function CarouselPrevious({
       variant={variant}
       size={size}
       className={cn(
-        'absolute size-8 rounded-full',
-        orientation === 'horizontal'
-          ? 'top-1/2 -left-12 -translate-y-1/2'
-          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
         className,
       )}
       disabled={!canScrollPrev}
@@ -198,16 +198,16 @@ function CarouselPrevious({
       <ArrowLeft />
       <span className="sr-only">Previous slide</span>
     </Button>
-  )
+  );
 }
 
 function CarouselNext({
   className,
-  variant = 'outline',
-  size = 'icon',
+  variant = "outline",
+  size = "icon",
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
 
   return (
     <Button
@@ -215,10 +215,10 @@ function CarouselNext({
       variant={variant}
       size={size}
       className={cn(
-        'absolute size-8 rounded-full',
-        orientation === 'horizontal'
-          ? 'top-1/2 -right-12 -translate-y-1/2'
-          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
         className,
       )}
       disabled={!canScrollNext}
@@ -228,7 +228,7 @@ function CarouselNext({
       <ArrowRight />
       <span className="sr-only">Next slide</span>
     </Button>
-  )
+  );
 }
 
 export {
@@ -238,4 +238,4 @@ export {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
-}
+};
diff --git a/components/ui/chart.tsx b/src/components/ui/chart.tsx
similarity index 65%
rename from components/ui/chart.tsx
rename to src/components/ui/chart.tsx
index 421fe58..57e640a 100644
--- a/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -1,37 +1,37 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as RechartsPrimitive from 'recharts'
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: '', dark: '.dark' } as const
+const THEMES = { light: "", dark: ".dark" } as const;
 
 export type ChartConfig = {
   [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
   } & (
     | { color?: string; theme?: never }
     | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
+  );
+};
 
 type ChartContextProps = {
-  config: ChartConfig
-}
+  config: ChartConfig;
+};
 
-const ChartContext = React.createContext<ChartContextProps | null>(null)
+const ChartContext = React.createContext<ChartContextProps | null>(null);
 
 function useChart() {
-  const context = React.useContext(ChartContext)
+  const context = React.useContext(ChartContext);
 
   if (!context) {
-    throw new Error('useChart must be used within a <ChartContainer />')
+    throw new Error("useChart must be used within a <ChartContainer />");
   }
 
-  return context
+  return context;
 }
 
 function ChartContainer({
@@ -40,14 +40,14 @@ function ChartContainer({
   children,
   config,
   ...props
-}: React.ComponentProps<'div'> & {
-  config: ChartConfig
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig;
   children: React.ComponentProps<
     typeof RechartsPrimitive.ResponsiveContainer
-  >['children']
+  >["children"];
 }) {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -66,16 +66,16 @@ function ChartContainer({
         </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
-  )
+  );
 }
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
   const colorConfig = Object.entries(config).filter(
     ([, config]) => config.theme || config.color,
-  )
+  );
 
   if (!colorConfig.length) {
-    return null
+    return null;
   }
 
   return (
@@ -89,26 +89,26 @@ ${colorConfig
   .map(([key, itemConfig]) => {
     const color =
       itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
   })
-  .join('\n')}
+  .join("\n")}
 }
 `,
           )
-          .join('\n'),
+          .join("\n"),
       }}
     />
-  )
-}
+  );
+};
 
-const ChartTooltip = RechartsPrimitive.Tooltip
+const ChartTooltip = RechartsPrimitive.Tooltip;
 
 function ChartTooltipContent({
   active,
   payload,
   className,
-  indicator = 'dot',
+  indicator = "dot",
   hideLabel = false,
   hideIndicator = false,
   label,
@@ -119,41 +119,41 @@ function ChartTooltipContent({
   nameKey,
   labelKey,
 }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<'div'> & {
-    hideLabel?: boolean
-    hideIndicator?: boolean
-    indicator?: 'line' | 'dot' | 'dashed'
-    nameKey?: string
-    labelKey?: string
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
   }) {
-  const { config } = useChart()
+  const { config } = useChart();
 
   const tooltipLabel = React.useMemo(() => {
     if (hideLabel || !payload?.length) {
-      return null
+      return null;
     }
 
-    const [item] = payload
-    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
     const value =
-      !labelKey && typeof label === 'string'
+      !labelKey && typeof label === "string"
         ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label
+        : itemConfig?.label;
 
     if (labelFormatter) {
       return (
-        <div className={cn('font-medium', labelClassName)}>
+        <div className={cn("font-medium", labelClassName)}>
           {labelFormatter(value, payload)}
         </div>
-      )
+      );
     }
 
     if (!value) {
-      return null
+      return null;
     }
 
-    return <div className={cn('font-medium', labelClassName)}>{value}</div>
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
   }, [
     label,
     labelFormatter,
@@ -162,34 +162,34 @@ function ChartTooltipContent({
     labelClassName,
     config,
     labelKey,
-  ])
+  ]);
 
   if (!active || !payload?.length) {
-    return null
+    return null;
   }
 
-  const nestLabel = payload.length === 1 && indicator !== 'dot'
+  const nestLabel = payload.length === 1 && indicator !== "dot";
 
   return (
     <div
       className={cn(
-        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
         className,
       )}
     >
       {!nestLabel ? tooltipLabel : null}
       <div className="grid gap-1.5">
         {payload.map((item, index) => {
-          const key = `${nameKey || item.name || item.dataKey || 'value'}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-          const indicatorColor = color || item.payload.fill || item.color
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload.fill || item.color;
 
           return (
             <div
               key={item.dataKey}
               className={cn(
-                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
-                indicator === 'dot' && 'items-center',
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center",
               )}
             >
               {formatter && item?.value !== undefined && item.name ? (
@@ -202,19 +202,19 @@ function ChartTooltipContent({
                     !hideIndicator && (
                       <div
                         className={cn(
-                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
+                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                           {
-                            'h-2.5 w-2.5': indicator === 'dot',
-                            'w-1': indicator === 'line',
-                            'w-0 border-[1.5px] border-dashed bg-transparent':
-                              indicator === 'dashed',
-                            'my-0.5': nestLabel && indicator === 'dashed',
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent":
+                              indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
                           },
                         )}
                         style={
                           {
-                            '--color-bg': indicatorColor,
-                            '--color-border': indicatorColor,
+                            "--color-bg": indicatorColor,
+                            "--color-border": indicatorColor,
                           } as React.CSSProperties
                         }
                       />
@@ -222,8 +222,8 @@ function ChartTooltipContent({
                   )}
                   <div
                     className={cn(
-                      'flex flex-1 justify-between leading-none',
-                      nestLabel ? 'items-end' : 'items-center',
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center",
                     )}
                   >
                     <div className="grid gap-1.5">
@@ -241,49 +241,49 @@ function ChartTooltipContent({
                 </>
               )}
             </div>
-          )
+          );
         })}
       </div>
     </div>
-  )
+  );
 }
 
-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = RechartsPrimitive.Legend;
 
 function ChartLegendContent({
   className,
   hideIcon = false,
   payload,
-  verticalAlign = 'bottom',
+  verticalAlign = "bottom",
   nameKey,
-}: React.ComponentProps<'div'> &
-  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
-    hideIcon?: boolean
-    nameKey?: string
+}: React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
   }) {
-  const { config } = useChart()
+  const { config } = useChart();
 
   if (!payload?.length) {
-    return null
+    return null;
   }
 
   return (
     <div
       className={cn(
-        'flex items-center justify-center gap-4',
-        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
         className,
       )}
     >
       {payload.map((item) => {
-        const key = `${nameKey || item.dataKey || 'value'}`
-        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
         return (
           <div
             key={item.value}
             className={
-              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
             }
           >
             {itemConfig?.icon && !hideIcon ? (
@@ -298,10 +298,10 @@ function ChartLegendContent({
             )}
             {itemConfig?.label}
           </div>
-        )
+        );
       })}
     </div>
-  )
+  );
 }
 
 // Helper to extract item config from a payload.
@@ -310,37 +310,37 @@ function getPayloadConfigFromPayload(
   payload: unknown,
   key: string,
 ) {
-  if (typeof payload !== 'object' || payload === null) {
-    return undefined
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
   }
 
   const payloadPayload =
-    'payload' in payload &&
-    typeof payload.payload === 'object' &&
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
     payload.payload !== null
       ? payload.payload
-      : undefined
+      : undefined;
 
-  let configLabelKey: string = key
+  let configLabelKey: string = key;
 
   if (
     key in payload &&
-    typeof payload[key as keyof typeof payload] === 'string'
+    typeof payload[key as keyof typeof payload] === "string"
   ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
+    configLabelKey = payload[key as keyof typeof payload] as string;
   } else if (
     payloadPayload &&
     key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
   ) {
     configLabelKey = payloadPayload[
       key as keyof typeof payloadPayload
-    ] as string
+    ] as string;
   }
 
   return configLabelKey in config
     ? config[configLabelKey]
-    : config[key as keyof typeof config]
+    : config[key as keyof typeof config];
 }
 
 export {
@@ -350,4 +350,4 @@ export {
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
-}
+};
diff --git a/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
similarity index 73%
rename from components/ui/checkbox.tsx
rename to src/components/ui/checkbox.tsx
index 37d340f..0ef7b78 100644
--- a/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { CheckIcon } from 'lucide-react'
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function Checkbox({
   className,
@@ -14,7 +14,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
@@ -26,7 +26,7 @@ function Checkbox({
         <CheckIcon className="size-3.5" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-  )
+  );
 }
 
-export { Checkbox }
+export { Checkbox };
diff --git a/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
similarity index 100%
rename from components/ui/collapsible.tsx
rename to src/components/ui/collapsible.tsx
diff --git a/components/ui/command.tsx b/src/components/ui/command.tsx
similarity index 78%
rename from components/ui/command.tsx
rename to src/components/ui/command.tsx
index 4833ca8..713a7a3 100644
--- a/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -1,17 +1,17 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import { Command as CommandPrimitive } from 'cmdk'
-import { SearchIcon } from 'lucide-react'
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog'
+} from "@/src/components/ui/dialog";
 
 function Command({
   className,
@@ -21,26 +21,26 @@ function Command({
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CommandDialog({
-  title = 'Command Palette',
-  description = 'Search for a command to run...',
+  title = "Command Palette",
+  description = "Search for a command to run...",
   children,
   className,
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
 }) {
   return (
     <Dialog {...props}>
@@ -49,7 +49,7 @@ function CommandDialog({
         <DialogDescription>{description}</DialogDescription>
       </DialogHeader>
       <DialogContent
-        className={cn('overflow-hidden p-0', className)}
+        className={cn("overflow-hidden p-0", className)}
         showCloseButton={showCloseButton}
       >
         <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
@@ -57,7 +57,7 @@ function CommandDialog({
         </Command>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
 
 function CommandInput({
@@ -73,13 +73,13 @@ function CommandInput({
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(
-          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         {...props}
       />
     </div>
-  )
+  );
 }
 
 function CommandList({
@@ -90,12 +90,12 @@ function CommandList({
     <CommandPrimitive.List
       data-slot="command-list"
       className={cn(
-        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CommandEmpty({
@@ -107,7 +107,7 @@ function CommandEmpty({
       className="py-6 text-center text-sm"
       {...props}
     />
-  )
+  );
 }
 
 function CommandGroup({
@@ -118,12 +118,12 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CommandSeparator({
@@ -133,10 +133,10 @@ function CommandSeparator({
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn('bg-border -mx-1 h-px', className)}
+      className={cn("bg-border -mx-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
 function CommandItem({
@@ -152,23 +152,23 @@ function CommandItem({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function CommandShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="command-shortcut"
       className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
+        "text-muted-foreground ml-auto text-xs tracking-widest",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -181,4 +181,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};
diff --git a/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
similarity index 88%
rename from components/ui/context-menu.tsx
rename to src/components/ui/context-menu.tsx
index 9e536f2..7d0e6af 100644
--- a/components/ui/context-menu.tsx
+++ b/src/components/ui/context-menu.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function ContextMenu({
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
 }
 
 function ContextMenuTrigger({
@@ -17,7 +17,7 @@ function ContextMenuTrigger({
 }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
   return (
     <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
-  )
+  );
 }
 
 function ContextMenuGroup({
@@ -25,7 +25,7 @@ function ContextMenuGroup({
 }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
   return (
     <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-  )
+  );
 }
 
 function ContextMenuPortal({
@@ -33,13 +33,13 @@ function ContextMenuPortal({
 }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
   return (
     <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-  )
+  );
 }
 
 function ContextMenuSub({
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
 }
 
 function ContextMenuRadioGroup({
@@ -50,7 +50,7 @@ function ContextMenuRadioGroup({
       data-slot="context-menu-radio-group"
       {...props}
     />
-  )
+  );
 }
 
 function ContextMenuSubTrigger({
@@ -59,7 +59,7 @@ function ContextMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <ContextMenuPrimitive.SubTrigger
@@ -74,7 +74,7 @@ function ContextMenuSubTrigger({
       {children}
       <ChevronRightIcon className="ml-auto" />
     </ContextMenuPrimitive.SubTrigger>
-  )
+  );
 }
 
 function ContextMenuSubContent({
@@ -85,12 +85,12 @@ function ContextMenuSubContent({
     <ContextMenuPrimitive.SubContent
       data-slot="context-menu-sub-content"
       className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ContextMenuContent({
@@ -102,23 +102,23 @@ function ContextMenuContent({
       <ContextMenuPrimitive.Content
         data-slot="context-menu-content"
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
           className,
         )}
         {...props}
       />
     </ContextMenuPrimitive.Portal>
-  )
+  );
 }
 
 function ContextMenuItem({
   className,
   inset,
-  variant = 'default',
+  variant = "default",
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: 'default' | 'destructive'
+  inset?: boolean;
+  variant?: "default" | "destructive";
 }) {
   return (
     <ContextMenuPrimitive.Item
@@ -131,7 +131,7 @@ function ContextMenuItem({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ContextMenuCheckboxItem({
@@ -157,7 +157,7 @@ function ContextMenuCheckboxItem({
       </span>
       {children}
     </ContextMenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function ContextMenuRadioItem({
@@ -181,7 +181,7 @@ function ContextMenuRadioItem({
       </span>
       {children}
     </ContextMenuPrimitive.RadioItem>
-  )
+  );
 }
 
 function ContextMenuLabel({
@@ -189,19 +189,19 @@ function ContextMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <ContextMenuPrimitive.Label
       data-slot="context-menu-label"
       data-inset={inset}
       className={cn(
-        'text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ContextMenuSeparator({
@@ -211,26 +211,26 @@ function ContextMenuSeparator({
   return (
     <ContextMenuPrimitive.Separator
       data-slot="context-menu-separator"
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
 function ContextMenuShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="context-menu-shortcut"
       className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
+        "text-muted-foreground ml-auto text-xs tracking-widest",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -249,4 +249,4 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
-}
+};
diff --git a/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
similarity index 78%
rename from components/ui/dialog.tsx
rename to src/components/ui/dialog.tsx
index 243fb19..997aecf 100644
--- a/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,33 +1,33 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { XIcon } from 'lucide-react'
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
@@ -38,12 +38,12 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogContent({
@@ -52,7 +52,7 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+  showCloseButton?: boolean;
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
@@ -60,7 +60,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
           className,
         )}
         {...props}
@@ -77,30 +77,30 @@ function DialogContent({
         )}
       </DialogPrimitive.Content>
     </DialogPortal>
-  )
+  );
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
-  )
+  );
 }
 
-function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="dialog-footer"
       className={cn(
-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogTitle({
@@ -110,10 +110,10 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn('text-lg leading-none font-semibold', className)}
+      className={cn("text-lg leading-none font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DialogDescription({
@@ -123,10 +123,10 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -140,4 +140,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+};
diff --git a/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
similarity index 74%
rename from components/ui/drawer.tsx
rename to src/components/ui/drawer.tsx
index 307bdce..7d26106 100644
--- a/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -1,32 +1,32 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import { Drawer as DrawerPrimitive } from 'vaul'
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function Drawer({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
 }
 
 function DrawerTrigger({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
 }
 
 function DrawerPortal({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
 }
 
 function DrawerClose({
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
 }
 
 function DrawerOverlay({
@@ -37,12 +37,12 @@ function DrawerOverlay({
     <DrawerPrimitive.Overlay
       data-slot="drawer-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DrawerContent({
@@ -56,11 +56,11 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
-          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
-          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
-          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
-          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
           className,
         )}
         {...props}
@@ -69,30 +69,30 @@ function DrawerContent({
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
-  )
+  );
 }
 
-function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-header"
       className={cn(
-        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="drawer-footer"
-      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DrawerTitle({
@@ -102,10 +102,10 @@ function DrawerTitle({
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
-      className={cn('text-foreground font-semibold', className)}
+      className={cn("text-foreground font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DrawerDescription({
@@ -115,10 +115,10 @@ function DrawerDescription({
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -132,4 +132,4 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-}
+};
diff --git a/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
similarity index 89%
rename from components/ui/dropdown-menu.tsx
rename to src/components/ui/dropdown-menu.tsx
index a2096fa..6b6c25b 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,15 +1,15 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
 function DropdownMenuPortal({
@@ -17,7 +17,7 @@ function DropdownMenuPortal({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
   return (
     <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
+  );
 }
 
 function DropdownMenuTrigger({
@@ -28,7 +28,7 @@ function DropdownMenuTrigger({
       data-slot="dropdown-menu-trigger"
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuContent({
@@ -42,13 +42,13 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
           className,
         )}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
-  )
+  );
 }
 
 function DropdownMenuGroup({
@@ -56,17 +56,17 @@ function DropdownMenuGroup({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
   return (
     <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
+  );
 }
 
 function DropdownMenuItem({
   className,
   inset,
-  variant = 'default',
+  variant = "default",
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: 'default' | 'destructive'
+  inset?: boolean;
+  variant?: "default" | "destructive";
 }) {
   return (
     <DropdownMenuPrimitive.Item
@@ -79,7 +79,7 @@ function DropdownMenuItem({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuCheckboxItem({
@@ -105,7 +105,7 @@ function DropdownMenuCheckboxItem({
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function DropdownMenuRadioGroup({
@@ -116,7 +116,7 @@ function DropdownMenuRadioGroup({
       data-slot="dropdown-menu-radio-group"
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuRadioItem({
@@ -140,7 +140,7 @@ function DropdownMenuRadioItem({
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
-  )
+  );
 }
 
 function DropdownMenuLabel({
@@ -148,19 +148,19 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuSeparator({
@@ -170,32 +170,32 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
+        "text-muted-foreground ml-auto text-xs tracking-widest",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuSub({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuSubTrigger({
@@ -204,7 +204,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
@@ -219,7 +219,7 @@ function DropdownMenuSubTrigger({
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
-  )
+  );
 }
 
 function DropdownMenuSubContent({
@@ -230,12 +230,12 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -254,4 +254,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-}
+};
diff --git a/components/ui/empty.tsx b/src/components/ui/empty.tsx
similarity index 62%
rename from components/ui/empty.tsx
rename to src/components/ui/empty.tsx
index 2c57e94..cd30002 100644
--- a/components/ui/empty.tsx
+++ b/src/components/ui/empty.tsx
@@ -1,53 +1,53 @@
-import { cva, type VariantProps } from 'class-variance-authority'
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
-function Empty({ className, ...props }: React.ComponentProps<'div'>) {
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="empty"
       className={cn(
-        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="empty-header"
       className={cn(
-        'flex max-w-sm flex-col items-center gap-2 text-center',
+        "flex max-w-sm flex-col items-center gap-2 text-center",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 const emptyMediaVariants = cva(
-  'flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: 'bg-transparent',
+        default: "bg-transparent",
         icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: "default",
     },
   },
-)
+);
 
 function EmptyMedia({
   className,
-  variant = 'default',
+  variant = "default",
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
   return (
     <div
       data-slot="empty-icon"
@@ -55,43 +55,43 @@ function EmptyMedia({
       className={cn(emptyMediaVariants({ variant, className }))}
       {...props}
     />
-  )
+  );
 }
 
-function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="empty-title"
-      className={cn('text-lg font-medium tracking-tight', className)}
+      className={cn("text-lg font-medium tracking-tight", className)}
       {...props}
     />
-  )
+  );
 }
 
-function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
   return (
     <div
       data-slot="empty-description"
       className={cn(
-        'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="empty-content"
       className={cn(
-        'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -101,4 +101,4 @@ export {
   EmptyDescription,
   EmptyContent,
   EmptyMedia,
-}
+};
diff --git a/components/ui/field.tsx b/src/components/ui/field.tsx
similarity index 55%
rename from components/ui/field.tsx
rename to src/components/ui/field.tsx
index f4c2f21..2c35488 100644
--- a/components/ui/field.tsx
+++ b/src/components/ui/field.tsx
@@ -1,88 +1,88 @@
-'use client'
+"use client";
 
-import { useMemo } from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
+import { useMemo } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from '@/lib/utils'
-import { Label } from '@/components/ui/label'
-import { Separator } from '@/components/ui/separator'
+import { cn } from "@/src/lib/utils";
+import { Label } from "@/src/components/ui/label";
+import { Separator } from "@/src/components/ui/separator";
 
-function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
   return (
     <fieldset
       data-slot="field-set"
       className={cn(
-        'flex flex-col gap-6',
-        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldLegend({
   className,
-  variant = 'legend',
+  variant = "legend",
   ...props
-}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
   return (
     <legend
       data-slot="field-legend"
       data-variant={variant}
       className={cn(
-        'mb-3 font-medium',
-        'data-[variant=legend]:text-base',
-        'data-[variant=label]:text-sm',
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="field-group"
       className={cn(
-        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 const fieldVariants = cva(
-  'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
   {
     variants: {
       orientation: {
-        vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
         horizontal: [
-          'flex-row items-center',
-          '[&>[data-slot=field-label]]:flex-auto',
-          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
         ],
         responsive: [
-          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
-          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
-          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
         ],
       },
     },
     defaultVariants: {
-      orientation: 'vertical',
+      orientation: "vertical",
     },
   },
-)
+);
 
 function Field({
   className,
-  orientation = 'vertical',
+  orientation = "vertical",
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
   return (
     <div
       role="group"
@@ -91,20 +91,20 @@ function Field({
       className={cn(fieldVariants({ orientation }), className)}
       {...props}
     />
-  )
+  );
 }
 
-function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="field-content"
       className={cn(
-        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldLabel({
@@ -115,57 +115,57 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
-        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
-        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="field-label"
       className={cn(
-        'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
   return (
     <p
       data-slot="field-description"
       className={cn(
-        'text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
-        'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
-        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function FieldSeparator({
   children,
   className,
   ...props
-}: React.ComponentProps<'div'> & {
-  children?: React.ReactNode
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode;
 }) {
   return (
     <div
       data-slot="field-separator"
       data-content={!!children}
       className={cn(
-        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
         className,
       )}
       {...props}
@@ -180,7 +180,7 @@ function FieldSeparator({
         </span>
       )}
     </div>
-  )
+  );
 }
 
 function FieldError({
@@ -188,20 +188,20 @@ function FieldError({
   children,
   errors,
   ...props
-}: React.ComponentProps<'div'> & {
-  errors?: Array<{ message?: string } | undefined>
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>;
 }) {
   const content = useMemo(() => {
     if (children) {
-      return children
+      return children;
     }
 
     if (!errors) {
-      return null
+      return null;
     }
 
     if (errors.length === 1 && errors[0]?.message) {
-      return errors[0].message
+      return errors[0].message;
     }
 
     return (
@@ -211,23 +211,23 @@ function FieldError({
             error?.message && <li key={index}>{error.message}</li>,
         )}
       </ul>
-    )
-  }, [children, errors])
+    );
+  }, [children, errors]);
 
   if (!content) {
-    return null
+    return null;
   }
 
   return (
     <div
       role="alert"
       data-slot="field-error"
-      className={cn('text-destructive text-sm font-normal', className)}
+      className={cn("text-destructive text-sm font-normal", className)}
       {...props}
     >
       {content}
     </div>
-  )
+  );
 }
 
 export {
@@ -241,4 +241,4 @@ export {
   FieldSet,
   FieldContent,
   FieldTitle,
-}
+};
diff --git a/components/ui/form.tsx b/src/components/ui/form.tsx
similarity index 66%
rename from components/ui/form.tsx
rename to src/components/ui/form.tsx
index 6233f94..4df8d13 100644
--- a/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -1,8 +1,8 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { Slot } from '@radix-ui/react-slot'
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,
   FormProvider,
@@ -11,23 +11,23 @@ import {
   type ControllerProps,
   type FieldPath,
   type FieldValues,
-} from 'react-hook-form'
+} from "react-hook-form";
 
-import { cn } from '@/lib/utils'
-import { Label } from '@/components/ui/label'
+import { cn } from "@/src/lib/utils";
+import { Label } from "@/src/components/ui/label";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+  name: TName;
+};
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
   {} as FormFieldContextValue,
-)
+);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
@@ -39,21 +39,21 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  )
-}
+  );
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState } = useFormContext()
-  const formState = useFormState({ name: fieldContext.name })
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>')
+    throw new Error("useFormField should be used within <FormField>");
   }
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -62,50 +62,51 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
-}
+  };
+};
 
 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};
 
 const FormItemContext = React.createContext<FormItemContextValue>(
   {} as FormItemContextValue,
-)
+);
 
-function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
-  const id = React.useId()
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
       <div
         data-slot="form-item"
-        className={cn('grid gap-2', className)}
+        className={cn("grid gap-2", className)}
         {...props}
       />
     </FormItemContext.Provider>
-  )
+  );
 }
 
 function FormLabel({
   className,
   ...props
 }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
       data-slot="form-label"
       data-error={!!error}
-      className={cn('data-[error=true]:text-destructive', className)}
+      className={cn("data-[error=true]:text-destructive", className)}
       htmlFor={formItemId}
       {...props}
     />
-  )
+  );
 }
 
 function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
 
   return (
     <Slot
@@ -119,40 +120,40 @@ function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
       aria-invalid={!!error}
       {...props}
     />
-  )
+  );
 }
 
-function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
-  const { formDescriptionId } = useFormField()
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
       data-slot="form-description"
       id={formDescriptionId}
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
-function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? '') : props.children
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
     <p
       data-slot="form-message"
       id={formMessageId}
-      className={cn('text-destructive text-sm', className)}
+      className={cn("text-destructive text-sm", className)}
       {...props}
     >
       {body}
     </p>
-  )
+  );
 }
 
 export {
@@ -164,4 +165,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};
diff --git a/components/ui/hover-card.tsx b/src/components/ui/hover-card.tsx
similarity index 76%
rename from components/ui/hover-card.tsx
rename to src/components/ui/hover-card.tsx
index 55d6f76..e8556db 100644
--- a/components/ui/hover-card.tsx
+++ b/src/components/ui/hover-card.tsx
@@ -1,14 +1,14 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function HoverCard({
   ...props
 }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
 }
 
 function HoverCardTrigger({
@@ -16,12 +16,12 @@ function HoverCardTrigger({
 }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
   return (
     <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  )
+  );
 }
 
 function HoverCardContent({
   className,
-  align = 'center',
+  align = "center",
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
@@ -32,13 +32,13 @@ function HoverCardContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
           className,
         )}
         {...props}
       />
     </HoverCardPrimitive.Portal>
-  )
+  );
 }
 
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/components/ui/input-group.tsx b/src/components/ui/input-group.tsx
similarity index 54%
rename from components/ui/input-group.tsx
rename to src/components/ui/input-group.tsx
index 183d297..358703e 100644
--- a/components/ui/input-group.tsx
+++ b/src/components/ui/input-group.tsx
@@ -1,38 +1,38 @@
-'use client'
+"use client";
 
-import { cva, type VariantProps } from 'class-variance-authority'
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
+import { cn } from "@/src/lib/utils";
+import { Button } from "@/src/components/ui/button";
+import { Input } from "@/src/components/ui/input";
+import { Textarea } from "@/src/components/ui/textarea";
 
-function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="input-group"
       role="group"
       className={cn(
-        'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
-        'h-9 has-[>textarea]:h-auto',
+        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
+        "h-9 has-[>textarea]:h-auto",
 
         // Variants based on alignment.
-        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
-        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
-        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
-        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
 
         // Focus state.
-        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
 
         // Error state.
-        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
 
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 const inputGroupAddonVariants = cva(
@@ -40,27 +40,27 @@ const inputGroupAddonVariants = cva(
   {
     variants: {
       align: {
-        'inline-start':
-          'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
-        'inline-end':
-          'order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]',
-        'block-start':
-          'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
-        'block-end':
-          'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
       },
     },
     defaultVariants: {
-      align: 'inline-start',
+      align: "inline-start",
     },
   },
-)
+);
 
 function InputGroupAddon({
   className,
-  align = 'inline-start',
+  align = "inline-start",
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
   return (
     <div
       role="group"
@@ -68,41 +68,41 @@ function InputGroupAddon({
       data-align={align}
       className={cn(inputGroupAddonVariants({ align }), className)}
       onClick={(e) => {
-        if ((e.target as HTMLElement).closest('button')) {
-          return
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
         }
-        e.currentTarget.parentElement?.querySelector('input')?.focus()
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
       }}
       {...props}
     />
-  )
+  );
 }
 
 const inputGroupButtonVariants = cva(
-  'text-sm shadow-none flex gap-2 items-center',
+  "text-sm shadow-none flex gap-2 items-center",
   {
     variants: {
       size: {
         xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-        sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
-        'icon-xs':
-          'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
-        'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
+        sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
       },
     },
     defaultVariants: {
-      size: 'xs',
+      size: "xs",
     },
   },
-)
+);
 
 function InputGroupButton({
   className,
-  type = 'button',
-  variant = 'ghost',
-  size = 'xs',
+  type = "button",
+  variant = "ghost",
+  size = "xs",
   ...props
-}: Omit<React.ComponentProps<typeof Button>, 'size'> &
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
   VariantProps<typeof inputGroupButtonVariants>) {
   return (
     <Button
@@ -112,10 +112,10 @@ function InputGroupButton({
       className={cn(inputGroupButtonVariants({ size }), className)}
       {...props}
     />
-  )
+  );
 }
 
-function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       className={cn(
@@ -124,39 +124,39 @@ function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
       )}
       {...props}
     />
-  )
+  );
 }
 
 function InputGroupInput({
   className,
   ...props
-}: React.ComponentProps<'input'>) {
+}: React.ComponentProps<"input">) {
   return (
     <Input
       data-slot="input-group-control"
       className={cn(
-        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function InputGroupTextarea({
   className,
   ...props
-}: React.ComponentProps<'textarea'>) {
+}: React.ComponentProps<"textarea">) {
   return (
     <Textarea
       data-slot="input-group-control"
       className={cn(
-        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -166,4 +166,4 @@ export {
   InputGroupText,
   InputGroupInput,
   InputGroupTextarea,
-}
+};
diff --git a/components/ui/input-otp.tsx b/src/components/ui/input-otp.tsx
similarity index 69%
rename from components/ui/input-otp.tsx
rename to src/components/ui/input-otp.tsx
index 3f6c477..9b373ab 100644
--- a/components/ui/input-otp.tsx
+++ b/src/components/ui/input-otp.tsx
@@ -1,57 +1,57 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import { OTPInput, OTPInputContext } from 'input-otp'
-import { MinusIcon } from 'lucide-react'
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function InputOTP({
   className,
   containerClassName,
   ...props
 }: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string
+  containerClassName?: string;
 }) {
   return (
     <OTPInput
       data-slot="input-otp"
       containerClassName={cn(
-        'flex items-center gap-2 has-disabled:opacity-50',
+        "flex items-center gap-2 has-disabled:opacity-50",
         containerClassName,
       )}
-      className={cn('disabled:cursor-not-allowed', className)}
+      className={cn("disabled:cursor-not-allowed", className)}
       {...props}
     />
-  )
+  );
 }
 
-function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="input-otp-group"
-      className={cn('flex items-center', className)}
+      className={cn("flex items-center", className)}
       {...props}
     />
-  )
+  );
 }
 
 function InputOTPSlot({
   index,
   className,
   ...props
-}: React.ComponentProps<'div'> & {
-  index: number
+}: React.ComponentProps<"div"> & {
+  index: number;
 }) {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
 
   return (
     <div
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
+        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
         className,
       )}
       {...props}
@@ -63,15 +63,15 @@ function InputOTPSlot({
         </div>
       )}
     </div>
-  )
+  );
 }
 
-function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
   return (
     <div data-slot="input-otp-separator" role="separator" {...props}>
       <MinusIcon />
     </div>
-  )
+  );
 }
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
diff --git a/components/ui/input.tsx b/src/components/ui/input.tsx
similarity index 60%
rename from components/ui/input.tsx
rename to src/components/ui/input.tsx
index f199a06..9c3f40e 100644
--- a/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,21 +1,21 @@
-import * as React from 'react'
+import * as React from "react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
     <input
       type={type}
       data-slot="input"
       className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Input }
+export { Input };
diff --git a/components/ui/item.tsx b/src/components/ui/item.tsx
similarity index 61%
rename from components/ui/item.tsx
rename to src/components/ui/item.tsx
index efdf58c..846fbcf 100644
--- a/components/ui/item.tsx
+++ b/src/components/ui/item.tsx
@@ -1,19 +1,19 @@
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from '@/lib/utils'
-import { Separator } from '@/components/ui/separator'
+import { cn } from "@/src/lib/utils";
+import { Separator } from "@/src/components/ui/separator";
 
-function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       role="list"
       data-slot="item-group"
-      className={cn('group/item-group flex flex-col', className)}
+      className={cn("group/item-group flex flex-col", className)}
       {...props}
     />
-  )
+  );
 }
 
 function ItemSeparator({
@@ -24,42 +24,42 @@ function ItemSeparator({
     <Separator
       data-slot="item-separator"
       orientation="horizontal"
-      className={cn('my-0', className)}
+      className={cn("my-0", className)}
       {...props}
     />
-  )
+  );
 }
 
 const itemVariants = cva(
-  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a&]:hover:bg-accent/50 [a&]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a&]:hover:bg-accent/50 [a&]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
   {
     variants: {
       variant: {
-        default: 'bg-transparent',
-        outline: 'border-border',
-        muted: 'bg-muted/50',
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
       },
       size: {
-        default: 'p-4 gap-4 ',
-        sm: 'py-3 px-4 gap-2.5',
+        default: "p-4 gap-4 ",
+        sm: "py-3 px-4 gap-2.5",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
   },
-)
+);
 
 function Item({
   className,
-  variant = 'default',
-  size = 'default',
+  variant = "default",
+  size = "default",
   asChild = false,
   ...props
-}: React.ComponentProps<'div'> &
+}: React.ComponentProps<"div"> &
   VariantProps<typeof itemVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'div'
+  const Comp = asChild ? Slot : "div";
   return (
     <Comp
       data-slot="item"
@@ -68,31 +68,31 @@ function Item({
       className={cn(itemVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
 const itemMediaVariants = cva(
-  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5',
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
   {
     variants: {
       variant: {
-        default: 'bg-transparent',
+        default: "bg-transparent",
         icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
         image:
-          'size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover',
+          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: "default",
     },
   },
-)
+);
 
 function ItemMedia({
   className,
-  variant = 'default',
+  variant = "default",
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
   return (
     <div
       data-slot="item-media"
@@ -100,83 +100,83 @@ function ItemMedia({
       className={cn(itemMediaVariants({ variant, className }))}
       {...props}
     />
-  )
+  );
 }
 
-function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="item-content"
       className={cn(
-        'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none',
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="item-title"
       className={cn(
-        'flex w-fit items-center gap-2 text-sm leading-snug font-medium',
+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
   return (
     <p
       data-slot="item-description"
       className={cn(
-        'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
-        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="item-actions"
-      className={cn('flex items-center gap-2', className)}
+      className={cn("flex items-center gap-2", className)}
       {...props}
     />
-  )
+  );
 }
 
-function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="item-header"
       className={cn(
-        'flex basis-full items-center justify-between gap-2',
+        "flex basis-full items-center justify-between gap-2",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="item-footer"
       className={cn(
-        'flex basis-full items-center justify-between gap-2',
+        "flex basis-full items-center justify-between gap-2",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -190,4 +190,4 @@ export {
   ItemDescription,
   ItemHeader,
   ItemFooter,
-}
+};
diff --git a/components/ui/kbd.tsx b/src/components/ui/kbd.tsx
similarity index 50%
rename from components/ui/kbd.tsx
rename to src/components/ui/kbd.tsx
index 9897f35..ea1b5e8 100644
--- a/components/ui/kbd.tsx
+++ b/src/components/ui/kbd.tsx
@@ -1,28 +1,28 @@
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
-function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
   return (
     <kbd
       data-slot="kbd"
       className={cn(
-        'bg-muted w-fit text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
+        "bg-muted w-fit text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
         "[&_svg:not([class*='size-'])]:size-3",
-        '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <kbd
       data-slot="kbd-group"
-      className={cn('inline-flex items-center gap-1', className)}
+      className={cn("inline-flex items-center gap-1", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Kbd, KbdGroup }
+export { Kbd, KbdGroup };
diff --git a/components/ui/label.tsx b/src/components/ui/label.tsx
similarity index 58%
rename from components/ui/label.tsx
rename to src/components/ui/label.tsx
index 5d66da2..baeae42 100644
--- a/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function Label({
   className,
@@ -13,12 +13,12 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Label }
+export { Label };
diff --git a/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
similarity index 86%
rename from components/ui/menubar.tsx
rename to src/components/ui/menubar.tsx
index 791360c..12b575f 100644
--- a/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as MenubarPrimitive from '@radix-ui/react-menubar'
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function Menubar({
   className,
@@ -14,30 +14,30 @@ function Menubar({
     <MenubarPrimitive.Root
       data-slot="menubar"
       className={cn(
-        'bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs',
+        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarMenu({
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
 }
 
 function MenubarGroup({
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
 }
 
 function MenubarPortal({
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
 }
 
 function MenubarRadioGroup({
@@ -45,7 +45,7 @@ function MenubarRadioGroup({
 }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
   return (
     <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
-  )
+  );
 }
 
 function MenubarTrigger({
@@ -56,17 +56,17 @@ function MenubarTrigger({
     <MenubarPrimitive.Trigger
       data-slot="menubar-trigger"
       className={cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarContent({
   className,
-  align = 'start',
+  align = "start",
   alignOffset = -4,
   sideOffset = 8,
   ...props
@@ -79,23 +79,23 @@ function MenubarContent({
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
           className,
         )}
         {...props}
       />
     </MenubarPortal>
-  )
+  );
 }
 
 function MenubarItem({
   className,
   inset,
-  variant = 'default',
+  variant = "default",
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
-  inset?: boolean
-  variant?: 'default' | 'destructive'
+  inset?: boolean;
+  variant?: "default" | "destructive";
 }) {
   return (
     <MenubarPrimitive.Item
@@ -108,7 +108,7 @@ function MenubarItem({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarCheckboxItem({
@@ -134,7 +134,7 @@ function MenubarCheckboxItem({
       </span>
       {children}
     </MenubarPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function MenubarRadioItem({
@@ -158,7 +158,7 @@ function MenubarRadioItem({
       </span>
       {children}
     </MenubarPrimitive.RadioItem>
-  )
+  );
 }
 
 function MenubarLabel({
@@ -166,19 +166,19 @@ function MenubarLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <MenubarPrimitive.Label
       data-slot="menubar-label"
       data-inset={inset}
       className={cn(
-        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarSeparator({
@@ -188,32 +188,32 @@ function MenubarSeparator({
   return (
     <MenubarPrimitive.Separator
       data-slot="menubar-separator"
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="menubar-shortcut"
       className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
+        "text-muted-foreground ml-auto text-xs tracking-widest",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function MenubarSub({
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
 }
 
 function MenubarSubTrigger({
@@ -222,14 +222,14 @@ function MenubarSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <MenubarPrimitive.SubTrigger
       data-slot="menubar-sub-trigger"
       data-inset={inset}
       className={cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
         className,
       )}
       {...props}
@@ -237,7 +237,7 @@ function MenubarSubTrigger({
       {children}
       <ChevronRightIcon className="ml-auto h-4 w-4" />
     </MenubarPrimitive.SubTrigger>
-  )
+  );
 }
 
 function MenubarSubContent({
@@ -248,12 +248,12 @@ function MenubarSubContent({
     <MenubarPrimitive.SubContent
       data-slot="menubar-sub-content"
       className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -273,4 +273,4 @@ export {
   MenubarSub,
   MenubarSubTrigger,
   MenubarSubContent,
-}
+};
diff --git a/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
similarity index 82%
rename from components/ui/navigation-menu.tsx
rename to src/components/ui/navigation-menu.tsx
index 53e7543..7bbd268 100644
--- a/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react'
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
-import { cva } from 'class-variance-authority'
-import { ChevronDownIcon } from 'lucide-react'
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function NavigationMenu({
   className,
@@ -11,14 +11,14 @@ function NavigationMenu({
   viewport = true,
   ...props
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean
+  viewport?: boolean;
 }) {
   return (
     <NavigationMenuPrimitive.Root
       data-slot="navigation-menu"
       data-viewport={viewport}
       className={cn(
-        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
         className,
       )}
       {...props}
@@ -26,7 +26,7 @@ function NavigationMenu({
       {children}
       {viewport && <NavigationMenuViewport />}
     </NavigationMenuPrimitive.Root>
-  )
+  );
 }
 
 function NavigationMenuList({
@@ -37,12 +37,12 @@ function NavigationMenuList({
     <NavigationMenuPrimitive.List
       data-slot="navigation-menu-list"
       className={cn(
-        'group flex flex-1 list-none items-center justify-center gap-1',
+        "group flex flex-1 list-none items-center justify-center gap-1",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function NavigationMenuItem({
@@ -52,15 +52,15 @@ function NavigationMenuItem({
   return (
     <NavigationMenuPrimitive.Item
       data-slot="navigation-menu-item"
-      className={cn('relative', className)}
+      className={cn("relative", className)}
       {...props}
     />
-  )
+  );
 }
 
 const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
-)
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+);
 
 function NavigationMenuTrigger({
   className,
@@ -70,16 +70,16 @@ function NavigationMenuTrigger({
   return (
     <NavigationMenuPrimitive.Trigger
       data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
       {...props}
     >
-      {children}{' '}
+      {children}{" "}
       <ChevronDownIcon
         className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
         aria-hidden="true"
       />
     </NavigationMenuPrimitive.Trigger>
-  )
+  );
 }
 
 function NavigationMenuContent({
@@ -90,13 +90,13 @@ function NavigationMenuContent({
     <NavigationMenuPrimitive.Content
       data-slot="navigation-menu-content"
       className={cn(
-        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
-        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function NavigationMenuViewport({
@@ -105,18 +105,18 @@ function NavigationMenuViewport({
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
   return (
     <div
-      className={'absolute top-full left-0 isolate z-50 flex justify-center'}
+      className={"absolute top-full left-0 isolate z-50 flex justify-center"}
     >
       <NavigationMenuPrimitive.Viewport
         data-slot="navigation-menu-viewport"
         className={cn(
-          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
           className,
         )}
         {...props}
       />
     </div>
-  )
+  );
 }
 
 function NavigationMenuLink({
@@ -132,7 +132,7 @@ function NavigationMenuLink({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function NavigationMenuIndicator({
@@ -143,14 +143,14 @@ function NavigationMenuIndicator({
     <NavigationMenuPrimitive.Indicator
       data-slot="navigation-menu-indicator"
       className={cn(
-        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
         className,
       )}
       {...props}
     >
       <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
     </NavigationMenuPrimitive.Indicator>
-  )
+  );
 }
 
 export {
@@ -163,4 +163,4 @@ export {
   NavigationMenuIndicator,
   NavigationMenuViewport,
   navigationMenuTriggerStyle,
-}
+};
diff --git a/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
similarity index 66%
rename from components/ui/pagination.tsx
rename to src/components/ui/pagination.tsx
index ce8f25d..3119f29 100644
--- a/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -1,68 +1,68 @@
-import * as React from 'react'
+import * as React from "react";
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
   MoreHorizontalIcon,
-} from 'lucide-react'
+} from "lucide-react";
 
-import { cn } from '@/lib/utils'
-import { Button, buttonVariants } from '@/components/ui/button'
+import { cn } from "@/src/lib/utils";
+import { Button, buttonVariants } from "@/src/components/ui/button";
 
-function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
     <nav
       role="navigation"
       aria-label="pagination"
       data-slot="pagination"
-      className={cn('mx-auto flex w-full justify-center', className)}
+      className={cn("mx-auto flex w-full justify-center", className)}
       {...props}
     />
-  )
+  );
 }
 
 function PaginationContent({
   className,
   ...props
-}: React.ComponentProps<'ul'>) {
+}: React.ComponentProps<"ul">) {
   return (
     <ul
       data-slot="pagination-content"
-      className={cn('flex flex-row items-center gap-1', className)}
+      className={cn("flex flex-row items-center gap-1", className)}
       {...props}
     />
-  )
+  );
 }
 
-function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
-  return <li data-slot="pagination-item" {...props} />
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />;
 }
 
 type PaginationLinkProps = {
-  isActive?: boolean
-} & Pick<React.ComponentProps<typeof Button>, 'size'> &
-  React.ComponentProps<'a'>
+  isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">;
 
 function PaginationLink({
   className,
   isActive,
-  size = 'icon',
+  size = "icon",
   ...props
 }: PaginationLinkProps) {
   return (
     <a
-      aria-current={isActive ? 'page' : undefined}
+      aria-current={isActive ? "page" : undefined}
       data-slot="pagination-link"
       data-active={isActive}
       className={cn(
         buttonVariants({
-          variant: isActive ? 'outline' : 'ghost',
+          variant: isActive ? "outline" : "ghost",
           size,
         }),
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function PaginationPrevious({
@@ -73,13 +73,13 @@ function PaginationPrevious({
     <PaginationLink
       aria-label="Go to previous page"
       size="default"
-      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
       {...props}
     >
       <ChevronLeftIcon />
       <span className="hidden sm:block">Previous</span>
     </PaginationLink>
-  )
+  );
 }
 
 function PaginationNext({
@@ -90,30 +90,30 @@ function PaginationNext({
     <PaginationLink
       aria-label="Go to next page"
       size="default"
-      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
       {...props}
     >
       <span className="hidden sm:block">Next</span>
       <ChevronRightIcon />
     </PaginationLink>
-  )
+  );
 }
 
 function PaginationEllipsis({
   className,
   ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
   return (
     <span
       aria-hidden
       data-slot="pagination-ellipsis"
-      className={cn('flex size-9 items-center justify-center', className)}
+      className={cn("flex size-9 items-center justify-center", className)}
       {...props}
     >
       <MoreHorizontalIcon className="size-4" />
       <span className="sr-only">More pages</span>
     </span>
-  )
+  );
 }
 
 export {
@@ -124,4 +124,4 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
-}
+};
diff --git a/components/ui/popover.tsx b/src/components/ui/popover.tsx
similarity index 81%
rename from components/ui/popover.tsx
rename to src/components/ui/popover.tsx
index b4fc827..bed7f21 100644
--- a/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,25 +1,25 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function Popover({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
 function PopoverTrigger({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
 function PopoverContent({
   className,
-  align = 'center',
+  align = "center",
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
@@ -30,19 +30,19 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
           className,
         )}
         {...props}
       />
     </PopoverPrimitive.Portal>
-  )
+  );
 }
 
 function PopoverAnchor({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/components/ui/progress.tsx b/src/components/ui/progress.tsx
similarity index 67%
rename from components/ui/progress.tsx
rename to src/components/ui/progress.tsx
index ab38305..376dd12 100644
--- a/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as ProgressPrimitive from '@radix-ui/react-progress'
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function Progress({
   className,
@@ -14,7 +14,7 @@ function Progress({
     <ProgressPrimitive.Root
       data-slot="progress"
       className={cn(
-        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
         className,
       )}
       {...props}
@@ -25,7 +25,7 @@ function Progress({
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>
-  )
+  );
 }
 
-export { Progress }
+export { Progress };
diff --git a/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
similarity index 71%
rename from components/ui/radio-group.tsx
rename to src/components/ui/radio-group.tsx
index e9af867..182d014 100644
--- a/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
-import { CircleIcon } from 'lucide-react'
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { CircleIcon } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function RadioGroup({
   className,
@@ -13,10 +13,10 @@ function RadioGroup({
   return (
     <RadioGroupPrimitive.Root
       data-slot="radio-group"
-      className={cn('grid gap-3', className)}
+      className={cn("grid gap-3", className)}
       {...props}
     />
-  )
+  );
 }
 
 function RadioGroupItem({
@@ -27,7 +27,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
@@ -39,7 +39,7 @@ function RadioGroupItem({
         <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  )
+  );
 }
 
-export { RadioGroup, RadioGroupItem }
+export { RadioGroup, RadioGroupItem };
diff --git a/components/ui/resizable.tsx b/src/components/ui/resizable.tsx
similarity index 77%
rename from components/ui/resizable.tsx
rename to src/components/ui/resizable.tsx
index 5c2f91d..27ab0de 100644
--- a/components/ui/resizable.tsx
+++ b/src/components/ui/resizable.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import { GripVerticalIcon } from 'lucide-react'
-import * as ResizablePrimitive from 'react-resizable-panels'
+import * as React from "react";
+import { GripVerticalIcon } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function ResizablePanelGroup({
   className,
@@ -14,18 +14,18 @@ function ResizablePanelGroup({
     <ResizablePrimitive.PanelGroup
       data-slot="resizable-panel-group"
       className={cn(
-        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function ResizablePanel({
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
 }
 
 function ResizableHandle({
@@ -33,13 +33,13 @@ function ResizableHandle({
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
+  withHandle?: boolean;
 }) {
   return (
     <ResizablePrimitive.PanelResizeHandle
       data-slot="resizable-handle"
       className={cn(
-        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
         className,
       )}
       {...props}
@@ -50,7 +50,7 @@ function ResizableHandle({
         </div>
       )}
     </ResizablePrimitive.PanelResizeHandle>
-  )
+  );
 }
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
similarity index 68%
rename from components/ui/scroll-area.tsx
rename to src/components/ui/scroll-area.tsx
index dc98eb0..13be4ee 100644
--- a/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function ScrollArea({
   className,
@@ -13,7 +13,7 @@ function ScrollArea({
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
-      className={cn('relative', className)}
+      className={cn("relative", className)}
       {...props}
     >
       <ScrollAreaPrimitive.Viewport
@@ -25,12 +25,12 @@ function ScrollArea({
       <ScrollBar />
       <ScrollAreaPrimitive.Corner />
     </ScrollAreaPrimitive.Root>
-  )
+  );
 }
 
 function ScrollBar({
   className,
-  orientation = 'vertical',
+  orientation = "vertical",
   ...props
 }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
   return (
@@ -38,11 +38,11 @@ function ScrollBar({
       data-slot="scroll-area-scrollbar"
       orientation={orientation}
       className={cn(
-        'flex touch-none p-px transition-colors select-none',
-        orientation === 'vertical' &&
-          'h-full w-2.5 border-l border-l-transparent',
-        orientation === 'horizontal' &&
-          'h-2.5 flex-col border-t border-t-transparent',
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
         className,
       )}
       {...props}
@@ -52,7 +52,7 @@ function ScrollBar({
         className="bg-border relative flex-1 rounded-full"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  )
+  );
 }
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/components/ui/select.tsx b/src/components/ui/select.tsx
similarity index 82%
rename from components/ui/select.tsx
rename to src/components/ui/select.tsx
index 5db0bca..06efd59 100644
--- a/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,36 +1,36 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as SelectPrimitive from '@radix-ui/react-select'
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function Select({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
 function SelectGroup({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
 function SelectValue({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
 function SelectTrigger({
   className,
-  size = 'default',
+  size = "default",
   children,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: 'sm' | 'default'
+  size?: "sm" | "default";
 }) {
   return (
     <SelectPrimitive.Trigger
@@ -47,13 +47,13 @@ function SelectTrigger({
         <ChevronDownIcon className="size-4 opacity-50" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
-  )
+  );
 }
 
 function SelectContent({
   className,
   children,
-  position = 'popper',
+  position = "popper",
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
   return (
@@ -61,9 +61,9 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
-          position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className,
         )}
         position={position}
@@ -72,9 +72,9 @@ function SelectContent({
         <SelectScrollUpButton />
         <SelectPrimitive.Viewport
           className={cn(
-            'p-1',
-            position === 'popper' &&
-              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
           )}
         >
           {children}
@@ -82,7 +82,7 @@ function SelectContent({
         <SelectScrollDownButton />
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
-  )
+  );
 }
 
 function SelectLabel({
@@ -92,10 +92,10 @@ function SelectLabel({
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
-      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectItem({
@@ -119,7 +119,7 @@ function SelectItem({
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
-  )
+  );
 }
 
 function SelectSeparator({
@@ -129,10 +129,10 @@ function SelectSeparator({
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SelectScrollUpButton({
@@ -143,14 +143,14 @@ function SelectScrollUpButton({
     <SelectPrimitive.ScrollUpButton
       data-slot="select-scroll-up-button"
       className={cn(
-        'flex cursor-default items-center justify-center py-1',
+        "flex cursor-default items-center justify-center py-1",
         className,
       )}
       {...props}
     >
       <ChevronUpIcon className="size-4" />
     </SelectPrimitive.ScrollUpButton>
-  )
+  );
 }
 
 function SelectScrollDownButton({
@@ -161,14 +161,14 @@ function SelectScrollDownButton({
     <SelectPrimitive.ScrollDownButton
       data-slot="select-scroll-down-button"
       className={cn(
-        'flex cursor-default items-center justify-center py-1',
+        "flex cursor-default items-center justify-center py-1",
         className,
       )}
       {...props}
     >
       <ChevronDownIcon className="size-4" />
     </SelectPrimitive.ScrollDownButton>
-  )
+  );
 }
 
 export {
@@ -182,4 +182,4 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-}
+};
diff --git a/components/ui/separator.tsx b/src/components/ui/separator.tsx
similarity index 56%
rename from components/ui/separator.tsx
rename to src/components/ui/separator.tsx
index f43aaf5..f1a8612 100644
--- a/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function Separator({
   className,
-  orientation = 'horizontal',
+  orientation = "horizontal",
   decorative = true,
   ...props
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
@@ -17,12 +17,12 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Separator }
+export { Separator };
diff --git a/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
similarity index 67%
rename from components/ui/sheet.tsx
rename to src/components/ui/sheet.tsx
index 51041fa..655b5fb 100644
--- a/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -1,31 +1,31 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as SheetPrimitive from '@radix-ui/react-dialog'
-import { XIcon } from 'lucide-react'
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
 function SheetTrigger({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
 function SheetClose({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
 function SheetPortal({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
 function SheetOverlay({
@@ -36,21 +36,21 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SheetContent({
   className,
   children,
-  side = 'right',
+  side = "right",
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: 'top' | 'right' | 'bottom' | 'left'
+  side?: "top" | "right" | "bottom" | "left";
 }) {
   return (
     <SheetPortal>
@@ -58,15 +58,15 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-          side === 'right' &&
-            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-          side === 'left' &&
-            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-          side === 'top' &&
-            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-          side === 'bottom' &&
-            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
           className,
         )}
         {...props}
@@ -78,27 +78,27 @@ function SheetContent({
         </SheetPrimitive.Close>
       </SheetPrimitive.Content>
     </SheetPortal>
-  )
+  );
 }
 
-function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sheet-header"
-      className={cn('flex flex-col gap-1.5 p-4', className)}
+      className={cn("flex flex-col gap-1.5 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
-function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sheet-footer"
-      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetTitle({
@@ -108,10 +108,10 @@ function SheetTitle({
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn('text-foreground font-semibold', className)}
+      className={cn("text-foreground font-semibold", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SheetDescription({
@@ -121,10 +121,10 @@ function SheetDescription({
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn('text-muted-foreground text-sm', className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -136,4 +136,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};
diff --git a/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
similarity index 59%
rename from components/ui/sidebar.tsx
rename to src/components/ui/sidebar.tsx
index ee74343..e633681 100644
--- a/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -1,56 +1,56 @@
-'use client'
-
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
-import { cva, VariantProps } from 'class-variance-authority'
-import { PanelLeftIcon } from 'lucide-react'
-
-import { useIsMobile } from '@/hooks/use-mobile'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Separator } from '@/components/ui/separator'
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, VariantProps } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+
+import { useIsMobile } from "@/src/hooks/use-mobile";
+import { cn } from "@/src/lib/utils";
+import { Button } from "@/src/components/ui/button";
+import { Input } from "@/src/components/ui/input";
+import { Separator } from "@/src/components/ui/separator";
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from '@/components/ui/sheet'
-import { Skeleton } from '@/components/ui/skeleton'
+} from "@/src/components/ui/sheet";
+import { Skeleton } from "@/src/components/ui/skeleton";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/components/ui/tooltip'
+} from "@/src/components/ui/tooltip";
 
-const SIDEBAR_COOKIE_NAME = 'sidebar_state'
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = '16rem'
-const SIDEBAR_WIDTH_MOBILE = '18rem'
-const SIDEBAR_WIDTH_ICON = '3rem'
-const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 
 type SidebarContextProps = {
-  state: 'expanded' | 'collapsed'
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
 
-const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
 
 function useSidebar() {
-  const context = React.useContext(SidebarContext)
+  const context = React.useContext(SidebarContext);
   if (!context) {
-    throw new Error('useSidebar must be used within a SidebarProvider.')
+    throw new Error("useSidebar must be used within a SidebarProvider.");
   }
 
-  return context
+  return context;
 }
 
 function SidebarProvider({
@@ -61,37 +61,37 @@ function SidebarProvider({
   style,
   children,
   ...props
-}: React.ComponentProps<'div'> & {
-  defaultOpen?: boolean
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) {
-  const isMobile = useIsMobile()
-  const [openMobile, setOpenMobile] = React.useState(false)
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
 
   // This is the internal state of the sidebar.
   // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen)
-  const open = openProp ?? _open
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
   const setOpen = React.useCallback(
     (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === 'function' ? value(open) : value
+      const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
-        setOpenProp(openState)
+        setOpenProp(openState);
       } else {
-        _setOpen(openState)
+        _setOpen(openState);
       }
 
       // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
     [setOpenProp, open],
-  )
+  );
 
   // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
-  }, [isMobile, setOpen, setOpenMobile])
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
 
   // Adds a keyboard shortcut to toggle the sidebar.
   React.useEffect(() => {
@@ -100,18 +100,18 @@ function SidebarProvider({
         event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
         (event.metaKey || event.ctrlKey)
       ) {
-        event.preventDefault()
-        toggleSidebar()
+        event.preventDefault();
+        toggleSidebar();
       }
-    }
+    };
 
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [toggleSidebar])
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
 
   // We add a state so that we can do data-state="expanded" or "collapsed".
   // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? 'expanded' : 'collapsed'
+  const state = open ? "expanded" : "collapsed";
 
   const contextValue = React.useMemo<SidebarContextProps>(
     () => ({
@@ -124,7 +124,7 @@ function SidebarProvider({
       toggleSidebar,
     }),
     [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
-  )
+  );
 
   return (
     <SidebarContext.Provider value={contextValue}>
@@ -133,13 +133,13 @@ function SidebarProvider({
           data-slot="sidebar-wrapper"
           style={
             {
-              '--sidebar-width': SIDEBAR_WIDTH,
-              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
               ...style,
             } as React.CSSProperties
           }
           className={cn(
-            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
             className,
           )}
           {...props}
@@ -148,36 +148,36 @@ function SidebarProvider({
         </div>
       </TooltipProvider>
     </SidebarContext.Provider>
-  )
+  );
 }
 
 function Sidebar({
-  side = 'left',
-  variant = 'sidebar',
-  collapsible = 'offcanvas',
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
   className,
   children,
   ...props
-}: React.ComponentProps<'div'> & {
-  side?: 'left' | 'right'
-  variant?: 'sidebar' | 'floating' | 'inset'
-  collapsible?: 'offcanvas' | 'icon' | 'none'
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
-  if (collapsible === 'none') {
+  if (collapsible === "none") {
     return (
       <div
         data-slot="sidebar"
         className={cn(
-          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
           className,
         )}
         {...props}
       >
         {children}
       </div>
-    )
+    );
   }
 
   if (isMobile) {
@@ -190,7 +190,7 @@ function Sidebar({
           className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
           style={
             {
-              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
             } as React.CSSProperties
           }
           side={side}
@@ -202,14 +202,14 @@ function Sidebar({
           <div className="flex h-full w-full flex-col">{children}</div>
         </SheetContent>
       </Sheet>
-    )
+    );
   }
 
   return (
     <div
       className="group peer text-sidebar-foreground hidden md:block"
       data-state={state}
-      data-collapsible={state === 'collapsed' ? collapsible : ''}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
       data-side={side}
       data-slot="sidebar"
@@ -218,25 +218,25 @@ function Sidebar({
       <div
         data-slot="sidebar-gap"
         className={cn(
-          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-          'group-data-[collapsible=offcanvas]:w-0',
-          'group-data-[side=right]:rotate-180',
-          variant === 'floating' || variant === 'inset'
-            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
         )}
       />
       <div
         data-slot="sidebar-container"
         className={cn(
-          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
-          side === 'left'
-            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
           // Adjust the padding for floating and inset variants.
-          variant === 'floating' || variant === 'inset'
-            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
           className,
         )}
         {...props}
@@ -250,7 +250,7 @@ function Sidebar({
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 function SidebarTrigger({
@@ -258,7 +258,7 @@ function SidebarTrigger({
   onClick,
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar()
+  const { toggleSidebar } = useSidebar();
 
   return (
     <Button
@@ -266,21 +266,21 @@ function SidebarTrigger({
       data-slot="sidebar-trigger"
       variant="ghost"
       size="icon"
-      className={cn('size-7', className)}
+      className={cn("size-7", className)}
       onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
+        onClick?.(event);
+        toggleSidebar();
       }}
       {...props}
     >
       <PanelLeftIcon />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
-  )
+  );
 }
 
-function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
-  const { toggleSidebar } = useSidebar()
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar();
 
   return (
     <button
@@ -291,31 +291,31 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
-        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
-        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
   return (
     <main
       data-slot="sidebar-inset"
       className={cn(
-        'bg-background relative flex w-full flex-1 flex-col',
-        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        "bg-background relative flex w-full flex-1 flex-col",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarInput({
@@ -326,32 +326,32 @@ function SidebarInput({
     <Input
       data-slot="sidebar-input"
       data-sidebar="input"
-      className={cn('bg-background h-8 w-full shadow-none', className)}
+      className={cn("bg-background h-8 w-full shadow-none", className)}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn('flex flex-col gap-2 p-2', className)}
+      className={cn("flex flex-col gap-2 p-2", className)}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-footer"
       data-sidebar="footer"
-      className={cn('flex flex-col gap-2 p-2', className)}
+      className={cn("flex flex-col gap-2 p-2", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarSeparator({
@@ -362,154 +362,154 @@ function SidebarSeparator({
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn('bg-sidebar-border mx-2 w-auto', className)}
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-group"
       data-sidebar="group"
-      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarGroupLabel({
   className,
   asChild = false,
   ...props
-}: React.ComponentProps<'div'> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'div'
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div";
 
   return (
     <Comp
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       className={cn(
-        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarGroupAction({
   className,
   asChild = false,
   ...props
-}: React.ComponentProps<'button'> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : 'button'
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
-        'after:absolute after:-inset-2 md:after:hidden',
-        'group-data-[collapsible=icon]:hidden',
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarGroupContent({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
+}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-group-content"
       data-sidebar="group-content"
-      className={cn('w-full text-sm', className)}
+      className={cn("w-full text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
   return (
     <ul
       data-slot="sidebar-menu"
       data-sidebar="menu"
-      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
       {...props}
     />
-  )
+  );
 }
 
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
   return (
     <li
       data-slot="sidebar-menu-item"
       data-sidebar="menu-item"
-      className={cn('group/menu-item relative', className)}
+      className={cn("group/menu-item relative", className)}
       {...props}
     />
-  )
+  );
 }
 
 const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
-        default: 'h-8 text-sm',
-        sm: 'h-7 text-xs',
-        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
   },
-)
+);
 
 function SidebarMenuButton({
   asChild = false,
   isActive = false,
-  variant = 'default',
-  size = 'default',
+  variant = "default",
+  size = "default",
   tooltip,
   className,
   ...props
-}: React.ComponentProps<'button'> & {
-  asChild?: boolean
-  isActive?: boolean
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
 } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : 'button'
-  const { isMobile, state } = useSidebar()
+  const Comp = asChild ? Slot : "button";
+  const { isMobile, state } = useSidebar();
 
   const button = (
     <Comp
@@ -520,16 +520,16 @@ function SidebarMenuButton({
       className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
       {...props}
     />
-  )
+  );
 
   if (!tooltip) {
-    return button
+    return button;
   }
 
-  if (typeof tooltip === 'string') {
+  if (typeof tooltip === "string") {
     tooltip = {
       children: tooltip,
-    }
+    };
   }
 
   return (
@@ -538,11 +538,11 @@ function SidebarMenuButton({
       <TooltipContent
         side="right"
         align="center"
-        hidden={state !== 'collapsed' || isMobile}
+        hidden={state !== "collapsed" || isMobile}
         {...tooltip}
       />
     </Tooltip>
-  )
+  );
 }
 
 function SidebarMenuAction({
@@ -550,72 +550,72 @@ function SidebarMenuAction({
   asChild = false,
   showOnHover = false,
   ...props
-}: React.ComponentProps<'button'> & {
-  asChild?: boolean
-  showOnHover?: boolean
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
 }) {
-  const Comp = asChild ? Slot : 'button'
+  const Comp = asChild ? Slot : "button";
 
   return (
     <Comp
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
-        'after:absolute after:-inset-2 md:after:hidden',
-        'peer-data-[size=sm]/menu-button:top-1',
-        'peer-data-[size=default]/menu-button:top-1.5',
-        'peer-data-[size=lg]/menu-button:top-2.5',
-        'group-data-[collapsible=icon]:hidden',
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
         showOnHover &&
-          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuBadge({
   className,
   ...props
-}: React.ComponentProps<'div'>) {
+}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
-        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-        'peer-data-[size=sm]/menu-button:top-1',
-        'peer-data-[size=default]/menu-button:top-1.5',
-        'peer-data-[size=lg]/menu-button:top-2.5',
-        'group-data-[collapsible=icon]:hidden',
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuSkeleton({
   className,
   showIcon = false,
   ...props
-}: React.ComponentProps<'div'> & {
-  showIcon?: boolean
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean;
 }) {
   // Random width between 50 to 90%.
   const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
 
   return (
     <div
       data-slot="sidebar-menu-skeleton"
       data-sidebar="menu-skeleton"
-      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
       {...props}
     >
       {showIcon && (
@@ -629,55 +629,55 @@ function SidebarMenuSkeleton({
         data-sidebar="menu-skeleton-text"
         style={
           {
-            '--skeleton-width': width,
+            "--skeleton-width": width,
           } as React.CSSProperties
         }
       />
     </div>
-  )
+  );
 }
 
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
   return (
     <ul
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
       className={cn(
-        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
-        'group-data-[collapsible=icon]:hidden',
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuSubItem({
   className,
   ...props
-}: React.ComponentProps<'li'>) {
+}: React.ComponentProps<"li">) {
   return (
     <li
       data-slot="sidebar-menu-sub-item"
       data-sidebar="menu-sub-item"
-      className={cn('group/menu-sub-item relative', className)}
+      className={cn("group/menu-sub-item relative", className)}
       {...props}
     />
-  )
+  );
 }
 
 function SidebarMenuSubButton({
   asChild = false,
-  size = 'md',
+  size = "md",
   isActive = false,
   className,
   ...props
-}: React.ComponentProps<'a'> & {
-  asChild?: boolean
-  size?: 'sm' | 'md'
-  isActive?: boolean
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+  size?: "sm" | "md";
+  isActive?: boolean;
 }) {
-  const Comp = asChild ? Slot : 'a'
+  const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
@@ -686,16 +686,16 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-        size === 'sm' && 'text-xs',
-        size === 'md' && 'text-sm',
-        'group-data-[collapsible=icon]:hidden',
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -723,4 +723,4 @@ export {
   SidebarSeparator,
   SidebarTrigger,
   useSidebar,
-}
+};
diff --git a/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
similarity index 51%
rename from components/ui/skeleton.tsx
rename to src/components/ui/skeleton.tsx
index e3beb90..10bc683 100644
--- a/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -1,13 +1,13 @@
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
-function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn('bg-accent animate-pulse rounded-md', className)}
+      className={cn("bg-accent animate-pulse rounded-md", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/components/ui/slider.tsx b/src/components/ui/slider.tsx
similarity index 76%
rename from components/ui/slider.tsx
rename to src/components/ui/slider.tsx
index 773e064..62f03a6 100644
--- a/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as SliderPrimitive from '@radix-ui/react-slider'
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function Slider({
   className,
@@ -21,7 +21,7 @@ function Slider({
           ? defaultValue
           : [min, max],
     [value, defaultValue, min, max],
-  )
+  );
 
   return (
     <SliderPrimitive.Root
@@ -31,7 +31,7 @@ function Slider({
       min={min}
       max={max}
       className={cn(
-        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
         className,
       )}
       {...props}
@@ -39,13 +39,13 @@ function Slider({
       <SliderPrimitive.Track
         data-slot="slider-track"
         className={
-          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
         }
       >
         <SliderPrimitive.Range
           data-slot="slider-range"
           className={
-            'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
           }
         />
       </SliderPrimitive.Track>
@@ -57,7 +57,7 @@ function Slider({
         />
       ))}
     </SliderPrimitive.Root>
-  )
+  );
 }
 
-export { Slider }
+export { Slider };
diff --git a/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
similarity index 100%
rename from components/ui/sonner.tsx
rename to src/components/ui/sonner.tsx
diff --git a/src/components/ui/spinner.tsx b/src/components/ui/spinner.tsx
new file mode 100644
index 0000000..7ba2f5f
--- /dev/null
+++ b/src/components/ui/spinner.tsx
@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react";
+
+import { cn } from "@/src/lib/utils";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };
diff --git a/components/ui/switch.tsx b/src/components/ui/switch.tsx
similarity index 68%
rename from components/ui/switch.tsx
rename to src/components/ui/switch.tsx
index 3c4cfa3..2ce3172 100644
--- a/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as SwitchPrimitive from '@radix-ui/react-switch'
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function Switch({
   className,
@@ -13,7 +13,7 @@ function Switch({
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
@@ -21,11 +21,11 @@ function Switch({
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={
-          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
         }
       />
     </SwitchPrimitive.Root>
-  )
+  );
 }
 
-export { Switch }
+export { Switch };
diff --git a/components/ui/table.tsx b/src/components/ui/table.tsx
similarity index 63%
rename from components/ui/table.tsx
rename to src/components/ui/table.tsx
index fcdd10c..9a5a732 100644
--- a/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -1,10 +1,10 @@
-'use client'
+"use client";
 
-import * as React from 'react'
+import * as React from "react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
-function Table({ className, ...props }: React.ComponentProps<'table'>) {
+function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (
     <div
       data-slot="table-container"
@@ -12,96 +12,96 @@ function Table({ className, ...props }: React.ComponentProps<'table'>) {
     >
       <table
         data-slot="table"
-        className={cn('w-full caption-bottom text-sm', className)}
+        className={cn("w-full caption-bottom text-sm", className)}
         {...props}
       />
     </div>
-  )
+  );
 }
 
-function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
   return (
     <thead
       data-slot="table-header"
-      className={cn('[&_tr]:border-b', className)}
+      className={cn("[&_tr]:border-b", className)}
       {...props}
     />
-  )
+  );
 }
 
-function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
   return (
     <tbody
       data-slot="table-body"
-      className={cn('[&_tr:last-child]:border-0', className)}
+      className={cn("[&_tr:last-child]:border-0", className)}
       {...props}
     />
-  )
+  );
 }
 
-function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
   return (
     <tfoot
       data-slot="table-footer"
       className={cn(
-        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
   return (
     <tr
       data-slot="table-row"
       className={cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
   return (
     <th
       data-slot="table-head"
       className={cn(
-        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
   return (
     <td
       data-slot="table-cell"
       className={cn(
-        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TableCaption({
   className,
   ...props
-}: React.ComponentProps<'caption'>) {
+}: React.ComponentProps<"caption">) {
   return (
     <caption
       data-slot="table-caption"
-      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -113,4 +113,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-}
+};
diff --git a/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
similarity index 78%
rename from components/ui/tabs.tsx
rename to src/components/ui/tabs.tsx
index ff67104..509cced 100644
--- a/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as TabsPrimitive from '@radix-ui/react-tabs'
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function Tabs({
   className,
@@ -12,10 +12,10 @@ function Tabs({
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
-      className={cn('flex flex-col gap-2', className)}
+      className={cn("flex flex-col gap-2", className)}
       {...props}
     />
-  )
+  );
 }
 
 function TabsList({
@@ -26,12 +26,12 @@ function TabsList({
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
-        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsTrigger({
@@ -47,7 +47,7 @@ function TabsTrigger({
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TabsContent({
@@ -57,10 +57,10 @@ function TabsContent({
   return (
     <TabsPrimitive.Content
       data-slot="tabs-content"
-      className={cn('flex-1 outline-none', className)}
+      className={cn("flex-1 outline-none", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
similarity index 75%
rename from components/ui/textarea.tsx
rename to src/components/ui/textarea.tsx
index 3809775..c09aff2 100644
--- a/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react'
+import * as React from "react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
-function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
     <textarea
       data-slot="textarea"
       className={cn(
-        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Textarea }
+export { Textarea };
diff --git a/components/ui/toast.tsx b/src/components/ui/toast.tsx
similarity index 74%
rename from components/ui/toast.tsx
rename to src/components/ui/toast.tsx
index 40eedf5..fffdf61 100644
--- a/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -1,13 +1,13 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as ToastPrimitives from '@radix-ui/react-toast'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { X } from 'lucide-react'
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
-const ToastProvider = ToastPrimitives.Provider
+const ToastProvider = ToastPrimitives.Provider;
 
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
@@ -16,29 +16,29 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       className,
     )}
     {...props}
   />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
-        default: 'border bg-background text-foreground',
+        default: "border bg-background text-foreground",
         destructive:
-          'destructive group border-destructive bg-destructive text-destructive-foreground',
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
       },
     },
     defaultVariants: {
-      variant: 'default',
+      variant: "default",
     },
   },
-)
+);
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
@@ -51,9 +51,9 @@ const Toast = React.forwardRef<
       className={cn(toastVariants({ variant }), className)}
       {...props}
     />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
 
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
@@ -62,13 +62,13 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
       className,
     )}
     {...props}
   />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
 
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
@@ -77,7 +77,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className,
     )}
     toast-close=""
@@ -85,8 +85,8 @@ const ToastClose = React.forwardRef<
   >
     <X className="h-4 w-4" />
   </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
 
 const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
@@ -94,11 +94,11 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
-    className={cn('text-sm font-semibold', className)}
+    className={cn("text-sm font-semibold", className)}
     {...props}
   />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
@@ -106,15 +106,15 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn('text-sm opacity-90', className)}
+    className={cn("text-sm opacity-90", className)}
     {...props}
   />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 
-type ToastActionElement = React.ReactElement<typeof ToastAction>
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
 export {
   type ToastProps,
@@ -126,4 +126,4 @@ export {
   ToastDescription,
   ToastClose,
   ToastAction,
-}
+};
diff --git a/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
similarity index 81%
rename from components/ui/toaster.tsx
rename to src/components/ui/toaster.tsx
index 3b91885..9808fcf 100644
--- a/components/ui/toaster.tsx
+++ b/src/components/ui/toaster.tsx
@@ -1,6 +1,6 @@
-'use client'
+"use client";
 
-import { useToast } from '@/hooks/use-toast'
+import { useToast } from "@/src/hooks/use-toast";
 import {
   Toast,
   ToastClose,
@@ -8,10 +8,10 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from '@/components/ui/toast'
+} from "@/src/components/ui/toast";
 
 export function Toaster() {
-  const { toasts } = useToast()
+  const { toasts } = useToast();
 
   return (
     <ToastProvider>
@@ -27,9 +27,9 @@ export function Toaster() {
             {action}
             <ToastClose />
           </Toast>
-        )
+        );
       })}
       <ToastViewport />
     </ToastProvider>
-  )
+  );
 }
diff --git a/components/ui/toggle-group.tsx b/src/components/ui/toggle-group.tsx
similarity index 69%
rename from components/ui/toggle-group.tsx
rename to src/components/ui/toggle-group.tsx
index 0ab9971..05b10eb 100644
--- a/components/ui/toggle-group.tsx
+++ b/src/components/ui/toggle-group.tsx
@@ -1,18 +1,18 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
-import { type VariantProps } from 'class-variance-authority'
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
 
-import { cn } from '@/lib/utils'
-import { toggleVariants } from '@/components/ui/toggle'
+import { cn } from "@/src/lib/utils";
+import { toggleVariants } from "@/src/components/ui/toggle";
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>
 >({
-  size: 'default',
-  variant: 'default',
-})
+  size: "default",
+  variant: "default",
+});
 
 function ToggleGroup({
   className,
@@ -28,7 +28,7 @@ function ToggleGroup({
       data-variant={variant}
       data-size={size}
       className={cn(
-        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
         className,
       )}
       {...props}
@@ -37,7 +37,7 @@ function ToggleGroup({
         {children}
       </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
-  )
+  );
 }
 
 function ToggleGroupItem({
@@ -48,7 +48,7 @@ function ToggleGroupItem({
   ...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
   VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext)
+  const context = React.useContext(ToggleGroupContext);
 
   return (
     <ToggleGroupPrimitive.Item
@@ -60,14 +60,14 @@ function ToggleGroupItem({
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
         className,
       )}
       {...props}
     >
       {children}
     </ToggleGroupPrimitive.Item>
-  )
+  );
 }
 
-export { ToggleGroup, ToggleGroupItem }
+export { ToggleGroup, ToggleGroupItem };
diff --git a/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
similarity index 65%
rename from components/ui/toggle.tsx
rename to src/components/ui/toggle.tsx
index ad6b286..fbe22ca 100644
--- a/components/ui/toggle.tsx
+++ b/src/components/ui/toggle.tsx
@@ -1,32 +1,32 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as TogglePrimitive from '@radix-ui/react-toggle'
-import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
     variants: {
       variant: {
-        default: 'bg-transparent',
+        default: "bg-transparent",
         outline:
-          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        default: 'h-9 px-2 min-w-9',
-        sm: 'h-8 px-1.5 min-w-8',
-        lg: 'h-10 px-2.5 min-w-10',
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
   },
-)
+);
 
 function Toggle({
   className,
@@ -41,7 +41,7 @@ function Toggle({
       className={cn(toggleVariants({ variant, size, className }))}
       {...props}
     />
-  )
+  );
 }
 
-export { Toggle, toggleVariants }
+export { Toggle, toggleVariants };
diff --git a/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
similarity index 84%
rename from components/ui/tooltip.tsx
rename to src/components/ui/tooltip.tsx
index 877239c..072613d 100644
--- a/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,9 +1,9 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/src/lib/utils";
 
 function TooltipProvider({
   delayDuration = 0,
@@ -15,7 +15,7 @@ function TooltipProvider({
       delayDuration={delayDuration}
       {...props}
     />
-  )
+  );
 }
 
 function Tooltip({
@@ -25,13 +25,13 @@ function Tooltip({
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
     </TooltipProvider>
-  )
+  );
 }
 
 function TooltipTrigger({
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
 function TooltipContent({
@@ -46,7 +46,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
           className,
         )}
         {...props}
@@ -55,7 +55,7 @@ function TooltipContent({
         <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
-  )
+  );
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/components/ui/use-mobile.tsx b/src/components/ui/use-mobile.tsx
similarity index 100%
rename from components/ui/use-mobile.tsx
rename to src/components/ui/use-mobile.tsx
diff --git a/hooks/use-toast.ts b/src/components/ui/use-toast.ts
similarity index 97%
rename from hooks/use-toast.ts
rename to src/components/ui/use-toast.ts
index 8932bc5..a82ef54 100644
--- a/hooks/use-toast.ts
+++ b/src/components/ui/use-toast.ts
@@ -3,7 +3,7 @@
 // Inspired by react-hot-toast library
 import * as React from 'react'
 
-import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
+import type { ToastActionElement, ToastProps } from '@/src/components/ui/toast'
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
diff --git a/components/workshops-section.tsx b/src/components/workshops-section.tsx
similarity index 68%
rename from components/workshops-section.tsx
rename to src/components/workshops-section.tsx
index b37d838..2b3f840 100644
--- a/components/workshops-section.tsx
+++ b/src/components/workshops-section.tsx
@@ -1,21 +1,23 @@
-import { workshops } from "@/lib/constants"
-import { Card } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Clock, BarChart3 } from "lucide-react"
-import Image from "next/image"
-import Link from "next/link"
+import { workshops } from "@/src/lib/constants";
+import { Card } from "@/src/components/ui/card";
+import { Button } from "@/src/components/ui/button";
+import { Badge } from "@/src/components/ui/badge";
+import { Clock, BarChart3 } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
 
 export function WorkshopsSection() {
   return (
-    <section id="workshops" className="relative bg-gradient-to-b from-background to-muted py-20 md:py-32">
+    <section id="workshops" className="relative py-20 md:py-32">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Section header */}
         <div className="mb-16 space-y-4">
-          <h2 className="text-3xl font-bold text-foreground md:text-5xl">Learning & Workshops</h2>
+          <h2 className="text-3xl font-bold text-foreground md:text-5xl">
+            Learning & Workshops
+          </h2>
           <p className="max-w-2xl text-foreground/70">
-            Master Django through our comprehensive workshops, from fundamentals to advanced patterns. Learn by doing
-            with real-world projects.
+            Master Django through our comprehensive workshops, from fundamentals
+            to advanced patterns. Learn by doing with real-world projects.
           </p>
         </div>
 
@@ -40,16 +42,23 @@ export function WorkshopsSection() {
               {/* Content */}
               <div className="space-y-4 p-6">
                 <div className="flex items-start justify-between gap-2">
-                  <h3 className="text-lg font-bold text-foreground">{workshop.title}</h3>
+                  <h3 className="text-lg font-bold text-foreground">
+                    {workshop.title}
+                  </h3>
                 </div>
 
-                <p className="text-sm text-foreground/70">{workshop.description}</p>
+                <p className="text-sm text-foreground/70">
+                  {workshop.description}
+                </p>
 
                 {/* Meta info */}
                 <div className="space-y-2 border-t border-border/30 pt-4">
                   <div className="flex items-center gap-2 text-sm">
-                    <BarChart3 className="h-4 w-4 text-accent" />
-                    <Badge variant="secondary" className="bg-secondary/20 text-secondary">
+                    <BarChart3 className="h-4 w-4 text-primary" />
+                    <Badge
+                      variant="secondary"
+                      className="bg-secondary/20 text-secondary"
+                    >
                       {workshop.level}
                     </Badge>
                   </div>
@@ -61,7 +70,7 @@ export function WorkshopsSection() {
 
                 {/* CTA */}
                 <Link href={`/workshops/${workshop.id}`} className="block">
-                  <Button className="w-full bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90">
+                  <Button variant="gradient" className="w-full">
                     Learn More
                   </Button>
                 </Link>
@@ -71,5 +80,5 @@ export function WorkshopsSection() {
         </div>
       </div>
     </section>
-  )
+  );
 }
diff --git a/hooks/use-mobile.ts b/src/hooks/use-mobile.ts
similarity index 100%
rename from hooks/use-mobile.ts
rename to src/hooks/use-mobile.ts
diff --git a/components/ui/use-toast.ts b/src/hooks/use-toast.ts
similarity index 97%
rename from components/ui/use-toast.ts
rename to src/hooks/use-toast.ts
index 8932bc5..a82ef54 100644
--- a/components/ui/use-toast.ts
+++ b/src/hooks/use-toast.ts
@@ -3,7 +3,7 @@
 // Inspired by react-hot-toast library
 import * as React from 'react'
 
-import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
+import type { ToastActionElement, ToastProps } from '@/src/components/ui/toast'
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
diff --git a/lib/constants.ts b/src/lib/constants.ts
similarity index 96%
rename from lib/constants.ts
rename to src/lib/constants.ts
index ee61610..db8a8e8 100644
--- a/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1,3 +1,5 @@
+import { id } from "date-fns/locale"
+
 // Community content constants
 export const navigationItems = [
   { label: "Home", href: "#home" },
@@ -196,5 +198,12 @@ export const teamMembers = [
     role: "Django Girls Community Lead",
     image: "/placeholder-user.svg",
     bio: "Empowering women in tech through Django Girls initiatives.",
+  },
+  {
+    id: 7,
+    name: "Didas Mbarushimana",
+    role: "Community Advocate",
+    image: "/placeholder-user.svg",
+    bio: "Promoting community values and advocating for member needs.",
   }
 ]
diff --git a/lib/utils.ts b/src/lib/utils.ts
similarity index 100%
rename from lib/utils.ts
rename to src/lib/utils.ts