diff --git a/app/components/ui/Button.vue b/app/components/ui/Button.vue
index b4038a2..6555d38 100644
--- a/app/components/ui/Button.vue
+++ b/app/components/ui/Button.vue
@@ -1,9 +1,9 @@
 <template>
   <NuxtLink v-if="isLink" :to="to" :class="buttonClasses" v-bind="$attrs">
-    <slot></slot>
+    <slot />
   </NuxtLink>
-  <button v-else="isLink" :class="buttonClasses" v-bind="$attrs" :type="buttonType">
-    <slot></slot>
+  <button v-else :class="buttonClasses" v-bind="$attrs" :type="buttonType">
+    <slot />
   </button>
 </template>
 
diff --git a/app/components/ui/Input.vue b/app/components/ui/Input.vue
new file mode 100644
index 0000000..b629854
--- /dev/null
+++ b/app/components/ui/Input.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    type?: string;
+    placeholder: string;
+    label: string;
+  }>(),
+  {
+    type: "text",
+  },
+);
+
+const model = defineModel<string>();
+const id = useId();
+</script>
+
+<template>
+  <div>
+    <label :for="id" class="label mb-1">{{ label }}</label>
+    <input id="id" v-model="model" :type="type" :placeholder="placeholder" class="input w-full" />
+  </div>
+</template>
diff --git a/app/pages/login.vue b/app/pages/login.vue
index feda179..0eb5a89 100644
--- a/app/pages/login.vue
+++ b/app/pages/login.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-//Browser has the console logs not the server
+const email = ref("");
+const password = ref("");
+
 async function handleLogin() {
-  const email = document.getElementById("email") as HTMLInputElement;
-  const password = document.getElementById("password") as HTMLInputElement;
   try {
     console.log("Start Fetch");
     if (email?.value && password?.value) {
@@ -21,19 +21,21 @@ async function handleLogin() {
 </script>
 
 <template>
-  <form @submit.prevent="handleLogin" class="card card-border card-sm mb-8">
-    <div class="card-body">
-      <fieldset class="fieldset">
-        <legend class="fieldset-legend">Login Page</legend>
-        <label class="label">Email</label>
-        <input id="email" type="text" class="input" placeholder="email@example.com" />
+  <div class="flex flex-col items-center justify-center gap-4 mt-4">
+    <h1 class="text-xl my-8">Login to your account</h1>
+    <form class="w-full" @submit.prevent="handleLogin">
+      <fieldset
+        class="fieldset bg-base-200 border-base-300 border rounded-box w-full p-4 flex flex-col justify-stretch gap-4"
+      >
+        <legend class="sr-only">Login Page</legend>
 
-        <label class="label">Password</label>
-        <input id="password" type="password" class="input" placeholder="password" />
+        <UiInput v-model="email" label="Email" placeholder="email@example.com" />
+        <UiInput v-model="password" label="Password" type="password" placeholder="password" />
 
-        <UiButton isSubmit type="primary" class="mt-8">Login</UiButton>
+        <UiButton is-submit type="primary" class="mt-8">Login</UiButton>
       </fieldset>
-    </div>
-  </form>
-  <UiButton to="/register" type="secondary">New? Create an account</UiButton>
+    </form>
+    <span class="text-secondary-content text-xs">or</span>
+    <UiButton to="/register" type="secondary">New? Create an account</UiButton>
+  </div>
 </template>
diff --git a/app/pages/register.vue b/app/pages/register.vue
index 69c4e6b..d420020 100644
--- a/app/pages/register.vue
+++ b/app/pages/register.vue
@@ -1,14 +1,8 @@
 <script setup lang="ts">
-//Browser has the console logs not the server
+const email = ref("");
+const password = ref("");
+const name = ref("");
 async function handleRegister() {
-  const email = document.getElementById("email") as HTMLInputElement;
-  const password = document.getElementById("password") as HTMLInputElement;
-  const name =
-    (document.getElementById("name") as HTMLInputElement)?.value != null
-      ? (document.getElementById("name") as HTMLInputElement)
-      : { value: "noname" };
-  console.log(email?.value);
-  console.log(password?.value);
   try {
     console.log("Start Fetch");
     if (email?.value && password?.value) {
@@ -29,19 +23,21 @@ async function handleRegister() {
 </script>
 
 <template>
-  <form @submit.prevent="handleRegister">
-    <fieldset class="fieldset">
-      <legend class="fieldset-legend">Register Page</legend>
-      <label class="label">Email</label>
-      <input id="email" type="text" class="input" placeholder="email@example.com" />
+  <div class="flex flex-col items-center justify-center gap-4 mt-4">
+    <h1 class="text-xl my-8">Create an account</h1>
+    <form class="w-full" @submit.prevent="handleRegister">
+      <fieldset
+        class="fieldset bg-base-200 border-base-300 border rounded-box w-full p-4 flex flex-col justify-stretch gap-4"
+      >
+        <legend class="sr-only">Register Page</legend>
+        <UiInput v-model="email" label="Email" placeholder="email@example.com" />
+        <UiInput v-model="name" label="Name" placeholder="Socks Smith" />
+        <UiInput v-model="password" label="Password" type="password" placeholder="password" />
 
-      <label class="label">Name</label>
-      <input id="name" type="text" class="input" placeholder="Socks Smith" />
-
-      <label class="label">Password</label>
-      <input id="password" type="password" class="input" placeholder="password" />
-
-      <button class="btn">Register</button>
-    </fieldset>
-  </form>
+        <UiButton is-submit type="primary" class="mt-8">Register</UiButton>
+      </fieldset>
+    </form>
+    <span class="text-secondary-content text-xs">or</span>
+    <UiButton to="/login" type="secondary">Already have an account? Login</UiButton>
+  </div>
 </template>