diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index aff9094..8e24f3f 100644
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -1,7 +1,59 @@
 <template>
-  <div class="flex flex-center">
-    <h1>Huevos login</h1>
+  <div
+    class="bg-light-green window-height window-width row justify-center items-center"
+  >
+    <div class="column">
+      <div class="row">
+        <h5 class="text-h5 text-white q-my-md">Company & Co</h5>
+      </div>
+      <div class="row">
+        <q-card square bordered class="q-pa-lg shadow-1">
+          <q-card-section>
+            <q-form class="q-gutter-md">
+              <q-input
+                square
+                filled
+                clearable
+                v-model="email"
+                type="email"
+                label="email"
+              />
+              <q-input
+                square
+                filled
+                clearable
+                v-model="password"
+                type="password"
+                label="password"
+              />
+            </q-form>
+          </q-card-section>
+          <q-card-actions class="q-px-md">
+            <q-btn
+              unelevated
+              color="light-green-7"
+              size="lg"
+              class="full-width"
+              label="Login"
+            />
+          </q-card-actions>
+          <q-card-section class="text-center q-pa-none">
+            <p class="text-grey-6">Not reigistered? Created an Account</p>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
   </div>
 </template>
 
-<script></script>
+<script setup>
+import { ref } from "vue";
+const email = ref("");
+const password = ref("");
+</script>
+
+<style>
+.q-card {
+  width: 360px;
+}
+</style>
diff --git a/src/pages/RegisterPage.vue b/src/pages/RegisterPage.vue
index 343ad07..3d751e0 100644
--- a/src/pages/RegisterPage.vue
+++ b/src/pages/RegisterPage.vue
@@ -1,7 +1,59 @@
 <template>
-  <div class="flex flex-center">
-    <h1>Registro huevos</h1>
+  <div
+    class="bg-light-green window-height window-width row justify-center items-center"
+  >
+    <div class="column">
+      <div class="row">
+        <h5 class="text-h5 text-white q-my-md">Company & Co</h5>
+      </div>
+      <div class="row">
+        <q-card square bordered class="q-pa-lg shadow-1">
+          <q-card-section>
+            <q-form class="q-gutter-md">
+              <q-input
+                square
+                filled
+                clearable
+                v-model="email"
+                type="email"
+                label="email"
+              />
+              <q-input
+                square
+                filled
+                clearable
+                v-model="password"
+                type="password"
+                label="password"
+              />
+            </q-form>
+          </q-card-section>
+          <q-card-actions class="q-px-md">
+            <q-btn
+              unelevated
+              color="light-green-7"
+              size="lg"
+              class="full-width"
+              label="Register"
+            />
+          </q-card-actions>
+          <q-card-section class="text-center q-pa-none">
+            <p class="text-grey-6">Are you registered? Go to Login</p>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
   </div>
 </template>
 
-<script></script>
+<script setup>
+import { ref } from "vue";
+const email = ref("");
+const password = ref("");
+</script>
+
+<style>
+.q-card {
+  width: 360px;
+}
+</style>