diff --git a/gradesa/src/app/auth/auth.css b/gradesa/src/app/auth/auth.css
new file mode 100644
index 0000000..6e7c589
--- /dev/null
+++ b/gradesa/src/app/auth/auth.css
@@ -0,0 +1,48 @@
+.auth-container {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+.auth-box {
+    width: 100%;
+    max-width: 400px;
+    padding: 2rem;
+  }
+  
+.auth-title {
+    text-align: center;
+    margin-bottom: 1.5rem;
+  }
+
+.form-group {
+    margin-bottom: 1rem;
+  }
+
+.form-label {
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+
+.form-input {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+.form-button {
+    width: 100%;
+    padding: 0.5rem;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 1rem;
+  }
+
+.form-button:hover {
+    background-color: #0056b3;
+  }
diff --git a/gradesa/src/app/auth/layout.js b/gradesa/src/app/auth/layout.js
new file mode 100644
index 0000000..77586dd
--- /dev/null
+++ b/gradesa/src/app/auth/layout.js
@@ -0,0 +1,11 @@
+import './auth.css'
+
+export default function AuthLayout({ children }) {
+    return (
+      <div className="auth-container">
+        <div className="auth-box">
+          {children}
+        </div>
+      </div>
+    );
+  }
diff --git a/gradesa/src/app/auth/login/page.js b/gradesa/src/app/auth/login/page.js
new file mode 100644
index 0000000..bd25a1d
--- /dev/null
+++ b/gradesa/src/app/auth/login/page.js
@@ -0,0 +1,48 @@
+'use client'
+import { useState } from 'react';
+
+export default function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    console.log('Email:', email);
+    console.log('Password:', password);
+  }
+  
+  return (
+    <>
+      <h1 className="auth-title">Anmeldung</h1>
+      <form onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label className="form-label" htmlFor="email">E-Mail-Adresse</label>
+          <input
+            className="form-input"
+            type="email"
+            id="email"
+            name="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </div>
+
+        <div className="form-group">
+          <label className="form-label" htmlFor="password">Passwort</label>
+          <input
+            className="form-input"
+            type="password"
+            id="password"
+            name="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+        </div>
+
+        <button type="submit" className="form-button">Einloggen</button>
+      </form>
+    </>
+  );
+}