diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
new file mode 100644
index 0000000..514de9c
--- /dev/null
+++ b/src/app/register/page.tsx
@@ -0,0 +1,382 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
+import { Eye, EyeOff, AlertCircle, CheckCircle } from "lucide-react";
+
+interface FormData {
+  firstName: string;
+  lastName: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+  userType: "student" | "teacher" | "";
+}
+
+interface FormErrors {
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+  password?: string;
+  confirmPassword?: string;
+  userType?: string;
+}
+
+export default function RegisterPage() {
+  const navItems = [
+    { name: "Ana Sayfa", id: "/" },
+    { name: "Öğretmenler", id: "/teachers" },
+    { name: "Etkinlikler", id: "events" },
+    { name: "Çalışma Programı", id: "schedule" },
+  ];
+
+  const [formData, setFormData] = useState<FormData>({
+    firstName: "",    lastName: "",    email: "",    password: "",    confirmPassword: "",    userType: ""});
+
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitSuccess, setSubmitSuccess] = useState(false);
+
+  const validateForm = (): boolean => {
+    const newErrors: FormErrors = {};
+
+    if (!formData.firstName.trim()) {
+      newErrors.firstName = "Ad gereklidir";
+    } else if (formData.firstName.length < 2) {
+      newErrors.firstName = "Ad en az 2 karakter olmalıdır";
+    }
+
+    if (!formData.lastName.trim()) {
+      newErrors.lastName = "Soyad gereklidir";
+    } else if (formData.lastName.length < 2) {
+      newErrors.lastName = "Soyad en az 2 karakter olmalıdır";
+    }
+
+    if (!formData.email.trim()) {
+      newErrors.email = "E-posta gereklidir";
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = "Geçerli bir e-posta adresi girin";
+    }
+
+    if (!formData.password) {
+      newErrors.password = "Şifre gereklidir";
+    } else if (formData.password.length < 8) {
+      newErrors.password = "Şifre en az 8 karakter olmalıdır";
+    } else if (!/[A-Z]/.test(formData.password)) {
+      newErrors.password = "Şifre en az bir büyük harf içermelidir";
+    } else if (!/[0-9]/.test(formData.password)) {
+      newErrors.password = "Şifre en az bir rakam içermelidir";
+    }
+
+    if (formData.password !== formData.confirmPassword) {
+      newErrors.confirmPassword = "Şifreler eşleşmiyor";
+    }
+
+    if (!formData.userType) {
+      newErrors.userType = "Kullanıcı türünü seçin";
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+    if (errors[name as keyof FormErrors]) {
+      setErrors((prev) => ({
+        ...prev,
+        [name]: undefined,
+      }));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch("/api/auth/register", {
+        method: "POST",        headers: {
+          "Content-Type": "application/json"},
+        body: JSON.stringify({
+          firstName: formData.firstName,
+          lastName: formData.lastName,
+          email: formData.email,
+          password: formData.password,
+          userType: formData.userType,
+        }),
+      });
+
+      if (response.ok) {
+        setSubmitSuccess(true);
+        setFormData({
+          firstName: "",          lastName: "",          email: "",          password: "",          confirmPassword: "",          userType: ""});
+        setTimeout(() => {
+          setSubmitSuccess(false);
+        }, 5000);
+      } else {
+        const data = await response.json();
+        setErrors({ email: data.message || "Kayıt başarısız oldu" });
+      }
+    } catch (error) {
+      setErrors({ email: "Bir hata oluştu. Lütfen tekrar deneyin." });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="mediumSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          brandName="Öğretmen Platformu"
+          bottomLeftText="Eğitim Topluluğu"
+          bottomRightText="info@platform.com"
+        />
+      </div>
+
+      <div className="min-h-screen pt-24 pb-20 px-4">
+        <div className="max-w-md mx-auto">
+          <div className="mb-8">
+            <h1 className="text-3xl font-bold mb-2">Hesap Oluştur</h1>
+            <p className="text-gray-600">Eğitim yolculuğunuza bugün başlayın</p>
+          </div>
+
+          {submitSuccess && (
+            <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-start gap-3">
+              <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
+              <div>
+                <h3 className="font-semibold text-green-900">Başarılı!</h3>
+                <p className="text-sm text-green-800 mt-1">
+                  Hesabınız başarıyla oluşturuldu. Şimdi giriş yapabilirsiniz.
+                </p>
+              </div>
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <div>
+              <label htmlFor="userType" className="block text-sm font-medium mb-2">
+                Kullanıcı Türünü Seçin *
+              </label>
+              <select
+                id="userType"
+                name="userType"
+                value={formData.userType}
+                onChange={handleChange}
+                className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  errors.userType ? "border-red-500" : "border-gray-300"
+                }`}
+              >
+                <option value="">Seçin...</option>
+                <option value="student">Öğrenci</option>
+                <option value="teacher">Öğretmen</option>
+              </select>
+              {errors.userType && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.userType}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="firstName" className="block text-sm font-medium mb-2">
+                Ad *
+              </label>
+              <input
+                type="text"
+                id="firstName"
+                name="firstName"
+                value={formData.firstName}
+                onChange={handleChange}
+                placeholder="Adınızı girin"
+                className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  errors.firstName ? "border-red-500" : "border-gray-300"
+                }`}
+              />
+              {errors.firstName && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.firstName}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="lastName" className="block text-sm font-medium mb-2">
+                Soyad *
+              </label>
+              <input
+                type="text"
+                id="lastName"
+                name="lastName"
+                value={formData.lastName}
+                onChange={handleChange}
+                placeholder="Soyadınızı girin"
+                className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  errors.lastName ? "border-red-500" : "border-gray-300"
+                }`}
+              />
+              {errors.lastName && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.lastName}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium mb-2">
+                E-posta *
+              </label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                placeholder="your@email.com"
+                className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  errors.email ? "border-red-500" : "border-gray-300"
+                }`}
+              />
+              {errors.email && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.email}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="password" className="block text-sm font-medium mb-2">
+                Şifre *
+              </label>
+              <div className="relative">
+                <input
+                  type={showPassword ? "text" : "password"}
+                  id="password"
+                  name="password"
+                  value={formData.password}
+                  onChange={handleChange}
+                  placeholder="En az 8 karakter"
+                  className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10 ${
+                    errors.password ? "border-red-500" : "border-gray-300"
+                  }`}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500"
+                >
+                  {showPassword ? (
+                    <EyeOff className="w-5 h-5" />
+                  ) : (
+                    <Eye className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+              {errors.password && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.password}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label htmlFor="confirmPassword" className="block text-sm font-medium mb-2">
+                Şifreyi Onayla *
+              </label>
+              <div className="relative">
+                <input
+                  type={showConfirmPassword ? "text" : "password"}
+                  id="confirmPassword"
+                  name="confirmPassword"
+                  value={formData.confirmPassword}
+                  onChange={handleChange}
+                  placeholder="Şifreyi tekrar girin"
+                  className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10 ${
+                    errors.confirmPassword ? "border-red-500" : "border-gray-300"
+                  }`}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500"
+                >
+                  {showConfirmPassword ? (
+                    <EyeOff className="w-5 h-5" />
+                  ) : (
+                    <Eye className="w-5 h-5" />
+                  )}
+                </button>
+              </div>
+              {errors.confirmPassword && (
+                <div className="flex items-center gap-2 mt-2 text-red-600 text-sm">
+                  <AlertCircle className="w-4 h-4" />
+                  {errors.confirmPassword}
+                </div>
+              )}
+            </div>
+
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white font-semibold py-2 rounded-lg transition-colors"
+            >
+              {isSubmitting ? "Kaydediliyor..." : "Hesap Oluştur"}
+            </button>
+          </form>
+
+          <div className="mt-6 text-center text-sm text-gray-600">
+            <p>
+              Zaten hesabınız var mı?{" "}
+              <a href="/login" className="text-blue-600 hover:underline font-medium">
+                Giriş yapın
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Öğretmen Platformu"
+          leftLink={{
+            text: "Gizlilik Politikası",            href: "#"}}
+          rightLink={{
+            text: "Kullanım Şartları",            href: "#"}}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}