diff --git a/app/pages/login.vue b/app/pages/login.vue
index 2d4e396..5ac8458 100644
--- a/app/pages/login.vue
+++ b/app/pages/login.vue
@@ -1,19 +1,20 @@
 <template>
   <div class="login-container">
     <h2>Smurf Habits</h2>
-    <form @submit.prevent>
+    <form @submit.prevent="handleLogin">
+      <div v-if="error" class="error-message">{{ error }}</div>
       <div class="form-group">
         <label for="email">Email</label>
-        <input type="email" id="email" placeholder="papa@smurf.village" />
+        <input v-model="email" type="email" id="email" placeholder="papa@smurf.village" required />
       </div>
       <div class="form-group">
         <label for="password">Password</label>
-        <input type="password" id="password" />
+        <input v-model="password" type="password" id="password" required />
       </div>
-      <button type="submit">Login</button>
+      <button type="submit" :disabled="loading">{{ loading ? 'Logging in...' : 'Login' }}</button>
     </form>
     <div class="register-link">
-      <p>No account? <a href="#">Register</a></p>
+      <p>No account? <NuxtLink to="/register">Register</NuxtLink></p>
     </div>
   </div>
 </template>
@@ -22,6 +23,21 @@
 definePageMeta({
   layout: 'login',
 });
+
+const { login, loading } = useAuth();
+const email = ref('');
+const password = ref('');
+const error = ref<string | null>(null);
+
+const handleLogin = async () => {
+  error.value = null;
+  try {
+    await login(email.value, password.value);
+  } catch (err: any) {
+    console.error(err);
+    error.value = err.data?.message || 'Login failed. Please check your credentials.';
+  }
+};
 </script>
 
 <style scoped>
@@ -69,7 +85,20 @@ button {
   font-size: 16px;
 }
 
+button:disabled {
+  background-color: #a3bde3;
+  cursor: not-allowed;
+}
+
 .register-link {
   margin-top: 20px;
 }
+
+.error-message {
+  color: #bf616a;
+  background-color: #fbe2e5;
+  padding: 10px;
+  border-radius: 4px;
+  margin-bottom: 15px;
+}
 </style>
diff --git a/app/pages/register.vue b/app/pages/register.vue
new file mode 100644
index 0000000..dcdca61
--- /dev/null
+++ b/app/pages/register.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="register-container">
+    <h2>Create Account</h2>
+    <form @submit.prevent="handleRegister">
+      <div v-if="error" class="error-message">{{ error }}</div>
+      
+      <div class="form-group">
+        <label for="email">Email</label>
+        <input v-model="email" type="email" id="email" required />
+      </div>
+      
+      <div class="form-group">
+        <label for="nickname">Nickname (optional)</label>
+        <input v-model="nickname" type="text" id="nickname" />
+      </div>
+
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input v-model="password" type="password" id="password" required />
+      </div>
+      
+      <button type="submit" :disabled="loading">
+        {{ loading ? 'Registering...' : 'Register' }}
+      </button>
+    </form>
+    
+    <div class="login-link">
+      <p>Already have an account? <NuxtLink to="/login">Log In</NuxtLink></p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'login', // Using the same simple layout as the login page
+});
+
+const api = useApi();
+
+const email = ref('');
+const password = ref('');
+const nickname = ref('');
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+const handleRegister = async () => {
+  if (!email.value || !password.value) {
+    error.value = 'Email and Password are required.';
+    return;
+  }
+
+  loading.value = true;
+  error.value = null;
+
+  try {
+    await api('/auth/register', {
+      method: 'POST',
+      body: {
+        email: email.value,
+        password: password.value,
+        nickname: nickname.value || undefined, // Send undefined if empty
+      },
+    });
+
+    // On success, redirect to login page
+    await navigateTo('/login');
+
+  } catch (err: any) {
+    console.error('Registration failed:', err);
+    error.value = err.data?.message || 'An unexpected error occurred.';
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.register-container {
+  width: 100%;
+  max-width: 350px;
+  padding: 20px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+h2 {
+  color: #4a90e2;
+  margin-bottom: 20px;
+}
+
+.form-group {
+  margin-bottom: 15px;
+  text-align: left;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  width: 100%;
+  padding: 10px;
+  background-color: #4a90e2;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+button:disabled {
+  background-color: #a3bde3;
+  cursor: not-allowed;
+}
+
+.login-link {
+  margin-top: 20px;
+}
+
+.error-message {
+  color: #bf616a;
+  background-color: #fbe2e5;
+  padding: 10px;
+  border-radius: 4px;
+  margin-bottom: 15px;
+}
+</style>