diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/components.json b/frontend/components.json
similarity index 100%
rename from components.json
rename to frontend/components.json
diff --git a/eslint.config.js b/frontend/eslint.config.js
similarity index 100%
rename from eslint.config.js
rename to frontend/eslint.config.js
diff --git a/index.html b/frontend/index.html
similarity index 100%
rename from index.html
rename to frontend/index.html
diff --git a/package-lock.json b/frontend/package-lock.json
similarity index 100%
rename from package-lock.json
rename to frontend/package-lock.json
diff --git a/package.json b/frontend/package.json
similarity index 100%
rename from package.json
rename to frontend/package.json
diff --git a/postcss.config.js b/frontend/postcss.config.js
similarity index 100%
rename from postcss.config.js
rename to frontend/postcss.config.js
diff --git a/public/bg3.png b/frontend/public/bg3.png
similarity index 100%
rename from public/bg3.png
rename to frontend/public/bg3.png
diff --git a/public/vite.svg b/frontend/public/vite.svg
similarity index 100%
rename from public/vite.svg
rename to frontend/public/vite.svg
diff --git a/src/App.css b/frontend/src/App.css
similarity index 100%
rename from src/App.css
rename to frontend/src/App.css
diff --git a/src/App.tsx b/frontend/src/App.tsx
similarity index 79%
rename from src/App.tsx
rename to frontend/src/App.tsx
index 2caac10..0d32cb4 100644
--- a/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,6 +4,8 @@ import { TooltipProvider } from "./components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
+import SignUp from "./pages/Signup";
+import SignIn from "./pages/Signin";
 const queryClient = new QueryClient();
 
 const App = () => (
@@ -14,6 +16,8 @@ const App = () => (
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Index />} />
+          <Route path="/signup" element={<SignUp />} />
+          <Route path="/signin" element={<SignIn />} />
         </Routes>
       </BrowserRouter>
     </TooltipProvider>
diff --git a/src/assets/react.svg b/frontend/src/assets/react.svg
similarity index 100%
rename from src/assets/react.svg
rename to frontend/src/assets/react.svg
diff --git a/src/components/Features.tsx b/frontend/src/components/Features.tsx
similarity index 100%
rename from src/components/Features.tsx
rename to frontend/src/components/Features.tsx
diff --git a/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
similarity index 100%
rename from src/components/Footer.tsx
rename to frontend/src/components/Footer.tsx
diff --git a/src/components/Header.tsx b/frontend/src/components/Header.tsx
similarity index 100%
rename from src/components/Header.tsx
rename to frontend/src/components/Header.tsx
diff --git a/src/components/Hero.tsx b/frontend/src/components/Hero.tsx
similarity index 100%
rename from src/components/Hero.tsx
rename to frontend/src/components/Hero.tsx
diff --git a/frontend/src/components/InputField.tsx b/frontend/src/components/InputField.tsx
new file mode 100644
index 0000000..2e930f0
--- /dev/null
+++ b/frontend/src/components/InputField.tsx
@@ -0,0 +1,30 @@
+import { forwardRef } from "react";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+
+interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  error?: string;
+}
+
+export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
+  ({ label, error, ...props }, ref) => {
+    return (
+      <div className="space-y-2">
+        <Label htmlFor={props.id} className="text-sm font-medium">
+          {label}
+        </Label>
+        <Input
+          ref={ref}
+          {...props}
+          className={error ? "border-destructive focus-visible:ring-destructive" : ""}
+        />
+        {error && (
+          <p className="text-sm text-destructive font-medium">{error}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+InputField.displayName = "InputField";
\ No newline at end of file
diff --git a/src/components/TechStack.tsx b/frontend/src/components/TechStack.tsx
similarity index 95%
rename from src/components/TechStack.tsx
rename to frontend/src/components/TechStack.tsx
index f2e2d5a..49b0623 100644
--- a/src/components/TechStack.tsx
+++ b/frontend/src/components/TechStack.tsx
@@ -41,7 +41,7 @@ const TechStack = () => {
           {techCategories.map((category, index) => (
             <Card
               key={index}
-              className="p-6 bg-gradient-card border-border hover:shadow-card transition-all duration-300 hover:-translate-y-1 group animate-fade-in-up"
+              className="p-6 bg-gradient-card border-border hover:shadow-card transition-all duration-300 hover:bg-primary/10 hover:-translate-y-1 group animate-fade-in-up"
               style={{ animationDelay: `${index * 0.1}s` }}
             >
               <div className="mb-4 inline-block p-3 bg-background rounded-lg group-hover:text-primary transition-all">
diff --git a/src/components/ui/accordion.tsx b/frontend/src/components/ui/accordion.tsx
similarity index 100%
rename from src/components/ui/accordion.tsx
rename to frontend/src/components/ui/accordion.tsx
diff --git a/src/components/ui/alert-dialog.tsx b/frontend/src/components/ui/alert-dialog.tsx
similarity index 100%
rename from src/components/ui/alert-dialog.tsx
rename to frontend/src/components/ui/alert-dialog.tsx
diff --git a/src/components/ui/alert.tsx b/frontend/src/components/ui/alert.tsx
similarity index 100%
rename from src/components/ui/alert.tsx
rename to frontend/src/components/ui/alert.tsx
diff --git a/src/components/ui/aspect-ratio.tsx b/frontend/src/components/ui/aspect-ratio.tsx
similarity index 100%
rename from src/components/ui/aspect-ratio.tsx
rename to frontend/src/components/ui/aspect-ratio.tsx
diff --git a/src/components/ui/avatar.tsx b/frontend/src/components/ui/avatar.tsx
similarity index 100%
rename from src/components/ui/avatar.tsx
rename to frontend/src/components/ui/avatar.tsx
diff --git a/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
similarity index 100%
rename from src/components/ui/badge.tsx
rename to frontend/src/components/ui/badge.tsx
diff --git a/src/components/ui/breadcrumb.tsx b/frontend/src/components/ui/breadcrumb.tsx
similarity index 100%
rename from src/components/ui/breadcrumb.tsx
rename to frontend/src/components/ui/breadcrumb.tsx
diff --git a/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
similarity index 100%
rename from src/components/ui/button.tsx
rename to frontend/src/components/ui/button.tsx
diff --git a/src/components/ui/calendar.tsx b/frontend/src/components/ui/calendar.tsx
similarity index 100%
rename from src/components/ui/calendar.tsx
rename to frontend/src/components/ui/calendar.tsx
diff --git a/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
similarity index 100%
rename from src/components/ui/card.tsx
rename to frontend/src/components/ui/card.tsx
diff --git a/src/components/ui/carousel.tsx b/frontend/src/components/ui/carousel.tsx
similarity index 100%
rename from src/components/ui/carousel.tsx
rename to frontend/src/components/ui/carousel.tsx
diff --git a/src/components/ui/chart.tsx b/frontend/src/components/ui/chart.tsx
similarity index 100%
rename from src/components/ui/chart.tsx
rename to frontend/src/components/ui/chart.tsx
diff --git a/src/components/ui/checkbox.tsx b/frontend/src/components/ui/checkbox.tsx
similarity index 100%
rename from src/components/ui/checkbox.tsx
rename to frontend/src/components/ui/checkbox.tsx
diff --git a/src/components/ui/collapsible.tsx b/frontend/src/components/ui/collapsible.tsx
similarity index 100%
rename from src/components/ui/collapsible.tsx
rename to frontend/src/components/ui/collapsible.tsx
diff --git a/src/components/ui/command.tsx b/frontend/src/components/ui/command.tsx
similarity index 100%
rename from src/components/ui/command.tsx
rename to frontend/src/components/ui/command.tsx
diff --git a/src/components/ui/context-menu.tsx b/frontend/src/components/ui/context-menu.tsx
similarity index 100%
rename from src/components/ui/context-menu.tsx
rename to frontend/src/components/ui/context-menu.tsx
diff --git a/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
similarity index 100%
rename from src/components/ui/dialog.tsx
rename to frontend/src/components/ui/dialog.tsx
diff --git a/src/components/ui/drawer.tsx b/frontend/src/components/ui/drawer.tsx
similarity index 100%
rename from src/components/ui/drawer.tsx
rename to frontend/src/components/ui/drawer.tsx
diff --git a/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
similarity index 100%
rename from src/components/ui/dropdown-menu.tsx
rename to frontend/src/components/ui/dropdown-menu.tsx
diff --git a/src/components/ui/form.tsx b/frontend/src/components/ui/form.tsx
similarity index 100%
rename from src/components/ui/form.tsx
rename to frontend/src/components/ui/form.tsx
diff --git a/src/components/ui/hover-card.tsx b/frontend/src/components/ui/hover-card.tsx
similarity index 100%
rename from src/components/ui/hover-card.tsx
rename to frontend/src/components/ui/hover-card.tsx
diff --git a/src/components/ui/input-otp.tsx b/frontend/src/components/ui/input-otp.tsx
similarity index 100%
rename from src/components/ui/input-otp.tsx
rename to frontend/src/components/ui/input-otp.tsx
diff --git a/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
similarity index 100%
rename from src/components/ui/input.tsx
rename to frontend/src/components/ui/input.tsx
diff --git a/src/components/ui/label.tsx b/frontend/src/components/ui/label.tsx
similarity index 100%
rename from src/components/ui/label.tsx
rename to frontend/src/components/ui/label.tsx
diff --git a/src/components/ui/pagination.tsx b/frontend/src/components/ui/pagination.tsx
similarity index 100%
rename from src/components/ui/pagination.tsx
rename to frontend/src/components/ui/pagination.tsx
diff --git a/src/components/ui/popover.tsx b/frontend/src/components/ui/popover.tsx
similarity index 100%
rename from src/components/ui/popover.tsx
rename to frontend/src/components/ui/popover.tsx
diff --git a/src/components/ui/progress.tsx b/frontend/src/components/ui/progress.tsx
similarity index 100%
rename from src/components/ui/progress.tsx
rename to frontend/src/components/ui/progress.tsx
diff --git a/src/components/ui/radio-group.tsx b/frontend/src/components/ui/radio-group.tsx
similarity index 100%
rename from src/components/ui/radio-group.tsx
rename to frontend/src/components/ui/radio-group.tsx
diff --git a/src/components/ui/resizable.tsx b/frontend/src/components/ui/resizable.tsx
similarity index 100%
rename from src/components/ui/resizable.tsx
rename to frontend/src/components/ui/resizable.tsx
diff --git a/src/components/ui/scroll-area.tsx b/frontend/src/components/ui/scroll-area.tsx
similarity index 100%
rename from src/components/ui/scroll-area.tsx
rename to frontend/src/components/ui/scroll-area.tsx
diff --git a/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
similarity index 100%
rename from src/components/ui/select.tsx
rename to frontend/src/components/ui/select.tsx
diff --git a/src/components/ui/separator.tsx b/frontend/src/components/ui/separator.tsx
similarity index 100%
rename from src/components/ui/separator.tsx
rename to frontend/src/components/ui/separator.tsx
diff --git a/src/components/ui/sheet.tsx b/frontend/src/components/ui/sheet.tsx
similarity index 100%
rename from src/components/ui/sheet.tsx
rename to frontend/src/components/ui/sheet.tsx
diff --git a/src/components/ui/sidebar.tsx b/frontend/src/components/ui/sidebar.tsx
similarity index 100%
rename from src/components/ui/sidebar.tsx
rename to frontend/src/components/ui/sidebar.tsx
diff --git a/src/components/ui/skeleton.tsx b/frontend/src/components/ui/skeleton.tsx
similarity index 100%
rename from src/components/ui/skeleton.tsx
rename to frontend/src/components/ui/skeleton.tsx
diff --git a/src/components/ui/slider.tsx b/frontend/src/components/ui/slider.tsx
similarity index 100%
rename from src/components/ui/slider.tsx
rename to frontend/src/components/ui/slider.tsx
diff --git a/src/components/ui/sonner.tsx b/frontend/src/components/ui/sonner.tsx
similarity index 100%
rename from src/components/ui/sonner.tsx
rename to frontend/src/components/ui/sonner.tsx
diff --git a/src/components/ui/switch.tsx b/frontend/src/components/ui/switch.tsx
similarity index 100%
rename from src/components/ui/switch.tsx
rename to frontend/src/components/ui/switch.tsx
diff --git a/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
similarity index 100%
rename from src/components/ui/table.tsx
rename to frontend/src/components/ui/table.tsx
diff --git a/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
similarity index 100%
rename from src/components/ui/tabs.tsx
rename to frontend/src/components/ui/tabs.tsx
diff --git a/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
similarity index 100%
rename from src/components/ui/textarea.tsx
rename to frontend/src/components/ui/textarea.tsx
diff --git a/src/components/ui/toast.tsx b/frontend/src/components/ui/toast.tsx
similarity index 100%
rename from src/components/ui/toast.tsx
rename to frontend/src/components/ui/toast.tsx
diff --git a/src/components/ui/toaster.tsx b/frontend/src/components/ui/toaster.tsx
similarity index 100%
rename from src/components/ui/toaster.tsx
rename to frontend/src/components/ui/toaster.tsx
diff --git a/src/components/ui/toggle-group.tsx b/frontend/src/components/ui/toggle-group.tsx
similarity index 100%
rename from src/components/ui/toggle-group.tsx
rename to frontend/src/components/ui/toggle-group.tsx
diff --git a/src/components/ui/toggle.tsx b/frontend/src/components/ui/toggle.tsx
similarity index 100%
rename from src/components/ui/toggle.tsx
rename to frontend/src/components/ui/toggle.tsx
diff --git a/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
similarity index 100%
rename from src/components/ui/tooltip.tsx
rename to frontend/src/components/ui/tooltip.tsx
diff --git a/src/hooks/use-mobile.tsx b/frontend/src/hooks/use-mobile.tsx
similarity index 100%
rename from src/hooks/use-mobile.tsx
rename to frontend/src/hooks/use-mobile.tsx
diff --git a/src/hooks/use-toast.ts b/frontend/src/hooks/use-toast.ts
similarity index 100%
rename from src/hooks/use-toast.ts
rename to frontend/src/hooks/use-toast.ts
diff --git a/src/index.css b/frontend/src/index.css
similarity index 100%
rename from src/index.css
rename to frontend/src/index.css
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
new file mode 100644
index 0000000..3912111
--- /dev/null
+++ b/frontend/src/lib/api.ts
@@ -0,0 +1,67 @@
+export interface SignUpData {
+  email: string;
+  password: string;
+  confirmPassword: string;
+}
+
+export interface SignInData {
+  email: string;
+  password: string;
+}
+
+export interface AuthResponse {
+  success: boolean;
+  message: string;
+  user?: {
+    email: string;
+    id: string;
+  };
+}
+
+// Mock registration function
+export const mockRegister = async (data: SignUpData): Promise<AuthResponse> => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      // Simulate validation
+      if (data.email === "test@example.com") {
+        reject({
+          success: false,
+          message: "Email already exists",
+        });
+      } else {
+        resolve({
+          success: true,
+          message: "Registration successful!",
+          user: {
+            email: data.email,
+            id: Math.random().toString(36).substring(7),
+          },
+        });
+      }
+    }, 1500);
+  });
+};
+
+// Mock login function
+export const mockLogin = async (data: SignInData): Promise<AuthResponse> => {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      // Simulate authentication
+      if (data.email === "demo@peercall.com" && data.password === "password123") {
+        resolve({
+          success: true,
+          message: "Login successful!",
+          user: {
+            email: data.email,
+            id: "demo-user-123",
+          },
+        });
+      } else {
+        reject({
+          success: false,
+          message: "Invalid email or password",
+        });
+      }
+    }, 1500);
+  });
+};
\ No newline at end of file
diff --git a/src/lib/utils.ts b/frontend/src/lib/utils.ts
similarity index 100%
rename from src/lib/utils.ts
rename to frontend/src/lib/utils.ts
diff --git a/src/main.tsx b/frontend/src/main.tsx
similarity index 100%
rename from src/main.tsx
rename to frontend/src/main.tsx
diff --git a/src/pages/Index.tsx b/frontend/src/pages/Index.tsx
similarity index 100%
rename from src/pages/Index.tsx
rename to frontend/src/pages/Index.tsx
diff --git a/frontend/src/pages/Signin.tsx b/frontend/src/pages/Signin.tsx
new file mode 100644
index 0000000..ee5a568
--- /dev/null
+++ b/frontend/src/pages/Signin.tsx
@@ -0,0 +1,123 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { Link } from "react-router-dom";
+import { Button } from "../components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/ui/card";
+import { InputField } from "../components/InputField";
+import { toast } from "../hooks/use-toast";
+import { mockLogin, SignInData } from "../lib/api";
+import { Loader2 } from "lucide-react";
+
+const SignIn = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<SignInData>();
+
+  const onSubmit = async (data: SignInData) => {
+    setIsLoading(true);
+    try {
+      const response = await mockLogin(data);
+      toast({
+        title: "Welcome back!",
+        description: response.message,
+      });
+      reset();
+      // Navigate to dashboard or home page here
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description: error.message || "Login failed. Please try again.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-subtle px-4 py-8">
+      <Card className="w-full max-w-md shadow-card">
+        <CardHeader className="space-y-1 text-center">
+          <CardTitle className="text-3xl font-bold bg-gradient-primary bg-clip-text text-primary">
+            PeerCall
+          </CardTitle>
+          <CardDescription className="text-base">
+            Sign in to your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <InputField
+              label="Email"
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              {...register("email", {
+                required: "Email is required",
+                pattern: {
+                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                  message: "Invalid email address",
+                },
+              })}
+              error={errors.email?.message}
+            />
+
+            <InputField
+              label="Password"
+              id="password"
+              type="password"
+              placeholder="••••••••"
+              {...register("password", {
+                required: "Password is required",
+                minLength: {
+                  value: 6,
+                  message: "Password must be at least 6 characters",
+                },
+              })}
+              error={errors.password?.message}
+            />
+
+            <Button
+              type="submit"
+              className="w-full"
+              size="lg"
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Signing in...
+                </>
+              ) : (
+                "Sign In"
+              )}
+            </Button>
+          </form>
+
+          <div className="mt-4 text-center">
+            <p className="text-sm text-muted-foreground">
+              Demo credentials: demo@peercall.com / password123
+            </p>
+          </div>
+        </CardContent>
+        <CardFooter className="flex flex-col space-y-2">
+          <div className="text-sm text-muted-foreground text-center">
+            Don't have an account?{" "}
+            <Link
+              to="/signup"
+              className="text-primary hover:underline font-medium transition-colors"
+            >
+              Sign Up
+            </Link>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};
+
+export default SignIn;
\ No newline at end of file
diff --git a/frontend/src/pages/Signup.tsx b/frontend/src/pages/Signup.tsx
new file mode 100644
index 0000000..6b4d472
--- /dev/null
+++ b/frontend/src/pages/Signup.tsx
@@ -0,0 +1,138 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { Link } from "react-router-dom";
+import { Button } from "../components/ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../components/ui/card";
+import { InputField } from "../components/InputField";
+import { toast } from "../hooks/use-toast";
+import { mockRegister, SignUpData } from "../lib/api";
+import { Loader2 } from "lucide-react";
+
+interface SignUpFormData {
+  email: string;
+  password: string;
+  confirmPassword: string;
+}
+
+const SignUp = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+    reset,
+  } = useForm<SignUpFormData>();
+
+  const password = watch("password");
+
+  const onSubmit = async (data: SignUpFormData) => {
+    setIsLoading(true);
+    try {
+      const response = await mockRegister(data);
+      toast({
+        title: "Success!",
+        description: response.message,
+      });
+      reset();
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description: error.message || "Registration failed. Please try again.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-subtle px-4 py-8">
+      <Card className="w-full max-w-md shadow-card">
+        <CardHeader className="space-y-1 text-center">
+          <CardTitle className="text-3xl font-bold bg-gradient-primary bg-clip-text text-primary">
+            PeerCall
+          </CardTitle>
+          <CardDescription className="text-base">
+            Create your account to get started
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <InputField
+              label="Email"
+              id="email"
+              type="email"
+              placeholder="you@example.com"
+              {...register("email", {
+                required: "Email is required",
+                pattern: {
+                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+                  message: "Invalid email address",
+                },
+              })}
+              error={errors.email?.message}
+            />
+
+            <InputField
+              label="Password"
+              id="password"
+              type="password"
+              placeholder="••••••••"
+              {...register("password", {
+                required: "Password is required",
+                minLength: {
+                  value: 6,
+                  message: "Password must be at least 6 characters",
+                },
+              })}
+              error={errors.password?.message}
+            />
+
+            <InputField
+              label="Confirm Password"
+              id="confirmPassword"
+              type="password"
+              placeholder="••••••••"
+              {...register("confirmPassword", {
+                required: "Please confirm your password",
+                validate: (value) =>
+                  value === password || "Passwords do not match",
+              })}
+              error={errors.confirmPassword?.message}
+            />
+
+            <Button
+              type="submit"
+              className="w-full"
+              size="lg"
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Creating account...
+                </>
+              ) : (
+                "Sign Up"
+              )}
+            </Button>
+          </form>
+        </CardContent>
+        <CardFooter className="flex flex-col space-y-2">
+          <div className="text-sm text-muted-foreground text-center">
+            Already have an account?{" "}
+            <Link
+              to="/signin"
+              className="text-primary hover:underline font-medium transition-colors"
+            >
+              Sign In
+            </Link>
+          </div>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};
+
+export default SignUp;
\ No newline at end of file
diff --git a/tailwind.config.js b/frontend/tailwind.config.js
similarity index 100%
rename from tailwind.config.js
rename to frontend/tailwind.config.js
diff --git a/tailwind.config.ts b/frontend/tailwind.config.ts
similarity index 100%
rename from tailwind.config.ts
rename to frontend/tailwind.config.ts
diff --git a/tsconfig.app.json b/frontend/tsconfig.app.json
similarity index 95%
rename from tsconfig.app.json
rename to frontend/tsconfig.app.json
index 227a6c6..a9b5a59 100644
--- a/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -5,6 +5,7 @@
     "useDefineForClassFields": true,
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
+    "types": ["vite/client"],
     "skipLibCheck": true,
 
     /* Bundler mode */
diff --git a/tsconfig.json b/frontend/tsconfig.json
similarity index 100%
rename from tsconfig.json
rename to frontend/tsconfig.json
diff --git a/tsconfig.node.json b/frontend/tsconfig.node.json
similarity index 100%
rename from tsconfig.node.json
rename to frontend/tsconfig.node.json
diff --git a/vite.config.ts b/frontend/vite.config.ts
similarity index 100%
rename from vite.config.ts
rename to frontend/vite.config.ts