diff --git a/frontend/src/main.js b/frontend/src/main.js
index 1bb02b1..11706cb 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -4,10 +4,12 @@ import { createPinia } from 'pinia';
 import App from './App.vue';
 import router from './router';
 
-
+import Button from 'primevue/button';
 import PrimeVue from 'primevue/config';
 import Chart from 'primevue/chart';
 import Dropdown from 'primevue/dropdown';
+import InputText from 'primevue/inputtext';
+import Password from 'primevue/password';
 import '@/assets/styles.scss';
 
 const app = createApp(App);
@@ -17,9 +19,11 @@ app.use(router);
 
 app.use(PrimeVue, { ripple: true });
 
+app.component('Button', Button);
 app.component('Chart', Chart);
 app.component('Dropdown', Dropdown);
-
+app.component('InputText', InputText);
+app.component('Password', Password);
 app.mount('#app');
 
 
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index a00fdce..1b5b7aa 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 import AppLayout from '@/layout/AppLayout.vue';
 import HomeView from '../views/HomeView.vue';
 import Landing from '../views/Landing.vue';
+import Login from '../views/Login.vue';
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -10,6 +11,10 @@ const router = createRouter({
             path: '/',
             component: Landing
         },
+        {
+            path: '/login',
+            component: Login
+        },
         {
             path: '/home',
             component: AppLayout,
diff --git a/frontend/src/views/Button.vue b/frontend/src/views/Button.vue
new file mode 100644
index 0000000..ff23941
--- /dev/null
+++ b/frontend/src/views/Button.vue
@@ -0,0 +1,360 @@
+<script setup>
+import { ref } from 'vue';
+
+const items = ref([
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh'
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-times'
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Home',
+        icon: 'pi pi-home'
+    }
+]);
+
+const loading = ref([false, false, false]);
+
+const load = (index) => {
+    loading.value[index] = true;
+    setTimeout(() => (loading.value[index] = false), 1000);
+};
+</script>
+
+<template>
+    <div class="grid">
+        <div class="col-12 md:col-6">
+            <div class="card">
+                <h5>Default</h5>
+                <Button label="Submit" class="mr-2 mb-2"></Button>
+                <Button label="Disabled" class="mr-2 mb-2" :disabled="true"></Button>
+                <Button label="Link" class="p-button-link mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Severities</h5>
+                <Button label="Primary" class="mr-2 mb-2" />
+                <Button label="Secondary" class="p-button-secondary mr-2 mb-2" />
+                <Button label="Success" class="p-button-success mr-2 mb-2" />
+                <Button label="Info" class="p-button-info mr-2 mb-2" />
+                <Button label="Warning" class="p-button-warning mr-2 mb-2" />
+                <Button label="Danger" class="p-button-danger mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Text</h5>
+                <Button label="Primary" class="p-button-text mr-2 mb-2" />
+                <Button label="Secondary" class="p-button-secondary p-button-text mr-2 mb-2" />
+                <Button label="Success" class="p-button-success p-button-text mr-2 mb-2" />
+                <Button label="Info" class="p-button-info p-button-text mr-2 mb-2" />
+                <Button label="Warning" class="p-button-warning p-button-text mr-2 mb-2" />
+                <Button label="Help" class="p-button-help p-button-text mr-2 mb-2" />
+                <Button label="Danger" class="p-button-danger p-button-text mr-2 mb-2" />
+                <Button label="Plain" class="p-button-plain p-button-text mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Outlined</h5>
+                <Button label="Primary" class="p-button-outlined mr-2 mb-2" />
+                <Button label="Secondary" class="p-button-outlined p-button-secondary mr-2 mb-2" />
+                <Button label="Success" class="p-button-outlined p-button-success mr-2 mb-2" />
+                <Button label="Info" class="p-button-outlined p-button-info mr-2 mb-2" />
+                <Button label="Warning" class="p-button-outlined p-button-warning mr-2 mb-2" />
+                <Button label="Help" class="p-button-outlined p-button-help mr-2 mb-2" />
+                <Button label="Danger" class="p-button-outlined p-button-danger mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Button Group</h5>
+                <span class="p-buttonset">
+                    <Button label="Save" icon="pi pi-check" />
+                    <Button label="Delete" icon="pi pi-trash" />
+                    <Button label="Cancel" icon="pi pi-times" />
+                </span>
+            </div>
+
+            <div class="card">
+                <h5>SplitButton</h5>
+                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-secondary mr-2 mb-2">
+                </SplitButton>
+                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-success mr-2 mb-2">
+                </SplitButton>
+                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-info mr-2 mb-2">
+                </SplitButton>
+                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning mr-2 mb-2">
+                </SplitButton>
+                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-danger mr-2 mb-2">
+                </SplitButton>
+            </div>
+
+            <div class="card">
+                <h5>Templating</h5>
+                <div class="flex flex-wrap gap-2">
+                    <Button type="button" class="google">
+                        <span class="flex align-items-center px-2 bg-purple-700 text-white">
+                            <i className="pi pi-google"></i>
+                        </span>
+                        <span className="px-3 py-2 flex align-items-center text-white">Google</span>
+                    </Button>
+                    <Button type="button" class="twitter">
+                        <span class="flex align-items-center px-2 bg-blue-500 text-white">
+                            <i className="pi pi-twitter"></i>
+                        </span>
+                        <span className="px-3 py-2 flex align-items-center text-white">Twitter</span>
+                    </Button>
+                    <Button type="button" class="discord">
+                        <span class="flex align-items-center px-2 bg-bluegray-800 text-white">
+                            <i className="pi pi-discord"></i>
+                        </span>
+                        <span className="px-3 py-2 flex align-items-center text-white">Discord</span>
+                    </Button>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12 md:col-6">
+            <div class="card">
+                <h5>Icons</h5>
+                <Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button>
+                <Button label="Bookmark" icon="pi pi-bookmark" class="mr-2 mb-2"></Button>
+                <Button label="Bookmark" icon="pi pi-bookmark" iconPos="right" class="mr-2 mb-2"></Button>
+            </div>
+
+            <div class="card">
+                <h5>Raised</h5>
+                <Button label="Primary" class="p-button-raised mr-2 mb-2" />
+                <Button label="Secondary" class="p-button-raised p-button-secondary mr-2 mb-2" />
+                <Button label="Success" class="p-button-raised p-button-success mr-2 mb-2" />
+                <Button label="Info" class="p-button-raised p-button-info mr-2 mb-2" />
+                <Button label="Warning" class="p-button-raised p-button-warning mr-2 mb-2" />
+                <Button label="Danger" class="p-button-raised p-button-danger mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Rounded</h5>
+                <Button label="Primary" class="p-button-rounded mr-2 mb-2" />
+                <Button label="Secondary" class="p-button-rounded p-button-secondary mr-2 mb-2" />
+                <Button label="Success" class="p-button-rounded p-button-success mr-2 mb-2" />
+                <Button label="Info" class="p-button-rounded p-button-info mr-2 mb-2" />
+                <Button label="Warning" class="p-button-rounded p-button-warning mr-2 mb-2" />
+                <Button label="Danger" class="p-button-rounded p-button-danger mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Rounded Icons</h5>
+                <Button icon="pi pi-star-fill" class="p-button-rounded mr-2 mb-2" />
+                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary mr-2 mb-2" />
+                <Button icon="pi pi-check" class="p-button-rounded p-button-success mr-2 mb-2" />
+                <Button icon="pi pi-search" class="p-button-rounded p-button-info mr-2 mb-2" />
+                <Button icon="pi pi-user" class="p-button-rounded p-button-warning mr-2 mb-2" />
+                <Button icon="pi pi-sign-out" class="p-button-rounded p-button-danger mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Rounded Text</h5>
+                <Button icon="pi pi-check" class="p-button-rounded p-button-text mr-2 mb-2" />
+                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text mr-2 mb-2" />
+                <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text mr-2 mb-2" />
+                <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text mr-2 mb-2" />
+                <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text mr-2 mb-2" />
+                <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text mr-2 mb-2" />
+                <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text mr-2 mb-2" />
+                <Button icon="pi pi-filter" class="p-button-rounded p-button-plain p-button-text mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Rounded Outlined</h5>
+                <Button icon="pi pi-check" class="p-button-rounded p-button-outlined mr-2 mb-2" />
+                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined mr-2 mb-2" />
+                <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined mr-2 mb-2" />
+                <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined mr-2 mb-2" />
+                <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined mr-2 mb-2" />
+                <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined mr-2 mb-2" />
+                <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Loading</h5>
+                <Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" :loading="loading[0]"
+                    @click="load(0)" />
+                <Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" iconPos="right"
+                    :loading="loading[1]" @click="load(1)" />
+                <Button type="button" class="mr-2 mb-2" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
+                <Button type="button" class="mr-2 mb-2" label="Search" :loading="loading[3]" @click="load(3)" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.google {
+    background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    border-color: var(--purple-700);
+    display: flex;
+    align-items: stretch;
+    padding: 0;
+
+    &:enabled:hover {
+        background: linear-gradient(to left, var(--purple-600) 50%, var(--purple-700) 50%);
+        background-size: 200% 100%;
+        background-position: left bottom;
+        border-color: var(--purple-700);
+    }
+
+    &:focus {
+        box-shadow: 0 0 0 1px var(--purple-400);
+    }
+}
+
+.twitter {
+    background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    border-color: var(--blue-500);
+    padding: 0;
+    display: flex;
+    align-items: stretch;
+
+    &:enabled:hover {
+        background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
+        background-size: 200% 100%;
+        background-position: left bottom;
+        border-color: var(--blue-500);
+    }
+
+    &:focus {
+        box-shadow: 0 0 0 1px var(--blue-200);
+    }
+}
+
+.discord {
+    background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    border-color: var(--bluegray-800);
+    padding: 0;
+    display: flex;
+    align-items: stretch;
+
+    &:enabled:hover {
+        background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
+        background-size: 200% 100%;
+        background-position: left bottom;
+        border-color: var(--bluegray-800);
+    }
+
+    &:focus {
+        box-shadow: 0 0 0 1px var(--purple-500);
+    }
+}
+
+.template-button .p-button.twitter {
+    background: linear-gradient(to left, var(--blue-400) 50%, var(--blue-500) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--blue-500);
+}
+
+.template-button .p-button.twitter:hover {
+    background-position: left bottom;
+}
+
+.template-button .p-button.twitter i {
+    background-color: var(--blue-500);
+}
+
+.template-button .p-button.twitter:focus {
+    box-shadow: 0 0 0 1px var(--blue-200);
+}
+
+.template-button .p-button.slack {
+    background: linear-gradient(to left, var(--orange-400) 50%, var(--orange-500) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--orange-500);
+}
+
+.template-button .p-button.slack:hover {
+    background-position: left bottom;
+}
+
+.template-button .p-button.slack i {
+    background-color: var(--orange-500);
+}
+
+.template-button .p-button.slack:focus {
+    box-shadow: 0 0 0 1px var(--orange-200);
+}
+
+.template-button .p-button.amazon {
+    background: linear-gradient(to left, var(--yellow-400) 50%, var(--yellow-500) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #000;
+    border-color: var(--yellow-500);
+}
+
+.template-button .p-button.amazon:hover {
+    background-position: left bottom;
+}
+
+.template-button .p-button.amazon i {
+    background-color: var(--yellow-500);
+}
+
+.template-button .p-button.amazon:focus {
+    box-shadow: 0 0 0 1px var(--yellow-200);
+}
+
+.template-button .p-button.discord {
+    background: linear-gradient(to left, var(--bluegray-700) 50%, var(--bluegray-800) 50%);
+    background-size: 200% 100%;
+    background-position: right bottom;
+    transition: background-position 0.5s ease-out;
+    color: #fff;
+    border-color: var(--bluegray-800);
+}
+
+.template-button .p-button.discord:hover {
+    background-position: left bottom;
+}
+
+.template-button .p-button.discord i {
+    background-color: var(--bluegray-800);
+}
+
+.template-button .p-button.discord:focus {
+    box-shadow: 0 0 0 1px var(--bluegray-500);
+}
+
+@media screen and (max-width: 960px) {
+    -button .p-button {
+        margin-bottom: 0.5rem;
+    }
+
+    -button .p-button:not(.p-button-icon-only) {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    -button .p-buttonset .p-button {
+        margin-bottom: 0;
+    }
+}
+</style>
diff --git a/frontend/src/views/Landing.vue b/frontend/src/views/Landing.vue
index 043ed4a..8562cc8 100644
--- a/frontend/src/views/Landing.vue
+++ b/frontend/src/views/Landing.vue
@@ -20,9 +20,7 @@ const logoUrl = computed(() => {
         <div id="home" class="landing-wrapper overflow-hidden">
             <div
                 class="py-4 px-4 mx-0 md:mx-6 lg:mx-8 lg:px-8 flex align-items-center justify-content-between relative lg:static mb-3">
-                <a class="flex align-items-center" href="#"> <img :src="logoUrl" alt="Sakai Logo" height="50"
-                        class="mr-0 lg:mr-2" /><span
-                        class="text-900 font-medium text-2xl line-height-3 mr-8">SAKAI</span> </a>
+
                 <a class="cursor-pointer block lg:hidden text-700 p-ripple" v-ripple
                     v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
                     <i class="pi pi-bars text-4xl"></i>
@@ -33,7 +31,8 @@ const logoUrl = computed(() => {
                         class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
                         <li>
                             <a @click="smoothScroll('#hero')"
-                                class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
+                                class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple
+                                href="home">
                                 <span>Home</span>
                             </a>
                         </li>
@@ -44,35 +43,39 @@ const logoUrl = computed(() => {
                             </a>
                         </li>
                         <li>
-                            <a @click="smoothScroll('#highlights')"
+                            <a @click="smoothScroll('#moreinfo')"
                                 class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
-                                <span>Highlights</span>
+                                <span>More info</span>
                             </a>
                         </li>
                         <li>
-                            <a @click="smoothScroll('#pricing')"
+                            <a @click="smoothScroll('#downloads')"
                                 class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
-                                <span>Pricing</span>
+                                <span>Downloads</span>
                             </a>
                         </li>
+
                     </ul>
                     <div
                         class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
-                        <Button label="Login"
-                            class="p-button-text p-button-rounded border-none font-light line-height-2 text-blue-500"></Button>
-                        <Button label="Register"
-                            class="p-button-rounded border-none ml-5 font-light text-white line-height-2 bg-blue-500"></Button>
+                        <a href="/login">
+                            <Button label="Login"
+                                class="p-button-text p-button-rounded border-none font-light text-white line-height-2 bg-blue-500">
+                            </Button>
+                        </a>
                     </div>
+
                 </div>
             </div>
 
             <div id="hero" class="flex flex-column pt-4 px-4 lg:px-8 overflow-hidden"
                 style="background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, rgb(238, 239, 175) 0%, rgb(195, 227, 250) 100%); clip-path: ellipse(150% 87% at 93% 13%)">
                 <div class="mx-4 md:mx-8 mt-0 md:mt-4">
-                    <h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">Eu sem
-                            integer</span>eget magna fermentum</h1>
-                    <p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Sed blandit libero volutpat sed
-                        cras. Fames ac turpis egestas integer. Placerat in egestas erat...</p>
+                    <h1 class="text-6xl font-bold text-gray-900 line-height-2"><span class="font-light block">A.I.
+                            Development</span>Alai &
+                        Obelisk</h1>
+                    <p class="font-normal text-2xl line-height-3 md:mt-3 text-gray-700">Artificial Intelligence
+                        implementation in a 2D-based platform videogame using a self-made declarative language</p>
                     <Button label="Get Started"
                         class="p-button-rounded text-xl border-none mt-5 bg-blue-500 font-normal text-white line-height-3 px-3"></Button>
                 </div>
@@ -81,161 +84,11 @@ const logoUrl = computed(() => {
                 </div>
             </div>
 
-            <div id="features" class="py-4 px-4 lg:px-8 mt-5 mx-0 lg:mx-8">
-                <div class="grid justify-content-center">
-                    <div class="col-12 text-center mt-8 mb-4">
-                        <h2 class="text-900 font-normal mb-2">Marvelous Features</h2>
-                        <span class="text-600 text-2xl">Placerat in egestas erat...</span>
-                    </div>
 
-                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
-                        <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))">
-                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
-                                <div class="flex align-items-center justify-content-center bg-yellow-200 mb-3"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                                    <i class="pi pi-fw pi-users text-2xl text-yellow-700"></i>
-                                </div>
-                                <h5 class="mb-2 text-900">Easy to Use</h5>
-                                <span class="text-600">Posuere morbi leo urna molestie.</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
-                        <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))">
-                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
-                                <div class="flex align-items-center justify-content-center bg-cyan-200 mb-3"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                                    <i class="pi pi-fw pi-palette text-2xl text-cyan-700"></i>
-                                </div>
-                                <h5 class="mb-2 text-900">Fresh Design</h5>
-                                <span class="text-600">Semper risus in hendrerit.</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
-                        <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))">
-                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
-                                <div class="flex align-items-center justify-content-center bg-indigo-200"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                                    <i class="pi pi-fw pi-map text-2xl text-indigo-700"></i>
-                                </div>
-                                <h5 class="mb-2 text-900">Well Documented</h5>
-                                <span class="text-600">Non arcu risus quis varius quam quisque.</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
-                        <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(145, 210, 204, 0.2))">
-                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
-                                <div class="flex align-items-center justify-content-center bg-bluegray-200 mb-3"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                                    <i class="pi pi-fw pi-id-card text-2xl text-bluegray-700"></i>
-                                </div>
-                                <h5 class="mb-2 text-900">Responsive Layout</h5>
-                                <span class="text-600">Nulla malesuada pellentesque elit.</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 lg:pb-5 mt-4 lg:mt-0">
-                        <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(187, 199, 205, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2), rgba(160, 210, 250, 0.2))">
-                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
-                                <div class="flex align-items-center justify-content-center bg-orange-200 mb-3"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                                    <i class="pi pi-fw pi-star text-2xl text-orange-700"></i>
-                                </div>
-                                <h5 class="mb-2 text-900">Clean Code</h5>
-                                <span class="text-600">Condimentum lacinia quis vel eros.</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pb-5 mt-4 lg:mt-0">
-                        <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))">
-                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
-                                <div class="flex align-items-center justify-content-center bg-pink-200 mb-3"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                                    <i class="pi pi-fw pi-moon text-2xl text-pink-700"></i>
-                                </div>
-                                <h5 class="mb-2 text-900">Dark Mode</h5>
-                                <span class="text-600">Convallis tellus id interdum velit laoreet.</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
-                        <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))">
-                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
-                                <div class="flex align-items-center justify-content-center bg-teal-200 mb-3"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                                    <i class="pi pi-fw pi-shopping-cart text-2xl text-teal-700"></i>
-                                </div>
-                                <h5 class="mb-2 text-900">Ready to Use</h5>
-                                <span class="text-600">Mauris sit amet massa vitae.</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="col-12 md:col-12 lg:col-4 p-0 lg:pr-5 mt-4 lg:mt-0">
-                        <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))">
-                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
-                                <div class="flex align-items-center justify-content-center bg-blue-200 mb-3"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                                    <i class="pi pi-fw pi-globe text-2xl text-blue-700"></i>
-                                </div>
-                                <h5 class="mb-2 text-900">Modern Practices</h5>
-                                <span class="text-600">Elementum nibh tellus molestie nunc non.</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="col-12 md:col-12 lg:col-4 p-0 lg-4 mt-4 lg:mt-0">
-                        <div
-                            style="height: 160px; padding: 2px; border-radius: 10px; background: linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))">
-                            <div class="p-3 surface-card h-full" style="border-radius: 8px">
-                                <div class="flex align-items-center justify-content-center bg-purple-200 mb-3"
-                                    style="width: 3.5rem; height: 3.5rem; border-radius: 10px">
-                                    <i class="pi pi-fw pi-eye text-2xl text-purple-700"></i>
-                                </div>
-                                <h5 class="mb-2 text-900">Privacy</h5>
-                                <span class="text-600">Neque egestas congue quisque.</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="col-12 mt-8 mb-8 p-2 md:p-8"
-                        style="border-radius: 20px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #efe1af 0%, #c3dcfa 100%)">
-                        <div
-                            class="flex flex-column justify-content-center align-items-center text-center px-3 py-3 md:py-0">
-                            <h3 class="text-gray-900 mb-2">Joséphine Miller</h3>
-                            <span class="text-gray-600 text-2xl">Peak Interactive</span>
-                            <p class="text-gray-900 sm:line-height-2 md:line-height-4 text-2xl mt-4"
-                                style="max-width: 800px">
-                                “Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-                                nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
-                                officia deserunt mollit anim id est laborum.”
-                            </p>
-                            <img src="/demo/images/landing/peak-logo.svg" class="mt-4" alt="Company logo" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div id="highlights" class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
+            <div id="features" class="py-4 px-4 lg:px-8 mx-0 my-6 lg:mx-8">
                 <div class="text-center">
-                    <h2 class="text-900 font-normal mb-2">Powerful Everywhere</h2>
-                    <span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
+                    <h2 class="text-900 font-normal mb-2">Features</h2>
+
                 </div>
 
                 <div class="grid mt-8 pb-2 md:pb-8">
@@ -247,26 +100,26 @@ const logoUrl = computed(() => {
                     <div class="col-12 lg:col-6 my-auto flex flex-column lg:align-items-end text-center lg:text-right">
                         <div class="flex align-items-center justify-content-center bg-purple-200 align-self-center lg:align-self-end"
                             style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-mobile text-5xl text-purple-700"></i>
+                            <i class="pi pi-fw pi-palette text-5xl text-purple-700"></i>
                         </div>
-                        <h2 class="line-height-1 text-900 text-4xl font-normal">Congue Quisque Egestas</h2>
-                        <span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width: 650px">Lectus arcu
-                            bibendum at varius vel pharetra vel turpis nunc. Eget aliquet nibh praesent tristique magna
-                            sit amet purus gravida. Sit amet mattis vulputate enim nulla aliquet.</span>
+                        <h2 class="line-height-1 text-900 text-4xl font-normal">Alai</h2>
+                        <span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width: 650px">Alai is a
+                            2D-based platform videogame made with a friendly and easy-to-use game engine called
+                            "Godot". Alai contains within the game a player registration menu and recollection of data
+                            for each playthrough so the data can be analyzed for future use</span>
                     </div>
                 </div>
 
                 <div class="grid my-8 pt-2 md:pt-8">
                     <div class="col-12 lg:col-6 my-auto flex flex-column text-center lg:text-left lg:align-items-start">
-                        <div class="flex align-items-center justify-content-center bg-yellow-200 align-self-center lg:align-self-start"
+                        <div class="flex align-items-center justify-content-center bg-blue-200 align-self-center lg:align-self-start"
                             style="width: 4.2rem; height: 4.2rem; border-radius: 10px">
-                            <i class="pi pi-fw pi-desktop text-5xl text-yellow-700"></i>
+                            <i class="pi pi-fw pi-globe text-5xl text-blue-700"></i>
                         </div>
-                        <h2 class="line-height-1 text-900 text-4xl font-normal">Celerisque Eu Ultrices</h2>
-                        <span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width: 650px">Adipiscing
-                            commodo elit at imperdiet dui. Viverra nibh cras pulvinar mattis nunc sed blandit libero.
-                            Suspendisse in est ante in. Mauris pharetra et ultrices neque ornare aenean euismod
-                            elementum nisi.</span>
+                        <h2 class="line-height-1 text-900 text-4xl font-normal">Obelisk</h2>
+                        <span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width: 650px">A compiled
+                            and declarative self-made language with the purpose of the creation of an Artifitial
+                            Intelligence, inspired on the logical language "Prolog"</span>
                     </div>
 
                     <div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0"
@@ -276,157 +129,19 @@ const logoUrl = computed(() => {
                 </div>
             </div>
 
-            <div id="pricing" class="py-4 px-4 lg:px-8 my-2 md:my-4">
-                <div class="text-center">
-                    <h2 class="text-900 font-normal mb-2">Matchless Pricing</h2>
-                    <span class="text-600 text-2xl">Amet consectetur adipiscing elit...</span>
-                </div>
 
-                <div class="grid justify-content-between mt-8 md:mt-0">
-                    <div class="col-12 lg:col-4 p-0 md:p-3">
-                        <div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all"
-                            style="border-radius: 10px">
-                            <h3 class="text-900 text-center my-5">Free</h3>
-                            <img src="/demo/images/landing/free.svg" class="w-10 h-10 mx-auto" alt="free" />
-                            <div class="my-5 text-center">
-                                <span class="text-5xl font-bold mr-2 text-900">$0</span>
-                                <span class="text-600">per month</span>
-                                <Button label="Get Started"
-                                    class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></Button>
-                            </div>
-                            <Divider class="w-full bg-surface-200"></Divider>
-                            <ul class="my-5 list-none p-0 flex text-900 flex-column">
-                                <li class="py-2">
-                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
-                                    <span class="text-xl line-height-3">Responsive Layout</span>
-                                </li>
-                                <li class="py-2">
-                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
-                                    <span class="text-xl line-height-3">Unlimited Push Messages</span>
-                                </li>
-                                <li class="py-2">
-                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
-                                    <span class="text-xl line-height-3">50 Support Ticket</span>
-                                </li>
-                                <li class="py-2">
-                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
-                                    <span class="text-xl line-height-3">Free Shipping</span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-
-                    <div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
-                        <div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all"
-                            style="border-radius: 10px">
-                            <h3 class="text-900 text-center my-5">Startup</h3>
-                            <img src="/demo/images/landing/startup.svg" class="w-10 h-10 mx-auto" alt="startup" />
-                            <div class="my-5 text-center">
-                                <span class="text-5xl font-bold mr-2 text-900">$1</span>
-                                <span class="text-600">per month</span>
-                                <Button label="Try Free"
-                                    class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></Button>
-                            </div>
-                            <Divider class="w-full bg-surface-200"></Divider>
-                            <ul class="my-5 list-none p-0 flex text-900 flex-column">
-                                <li class="py-2">
-                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
-                                    <span class="text-xl line-height-3">Responsive Layout</span>
-                                </li>
-                                <li class="py-2">
-                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
-                                    <span class="text-xl line-height-3">Unlimited Push Messages</span>
-                                </li>
-                                <li class="py-2">
-                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
-                                    <span class="text-xl line-height-3">50 Support Ticket</span>
-                                </li>
-                                <li class="py-2">
-                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
-                                    <span class="text-xl line-height-3">Free Shipping</span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-
-                    <div class="col-12 lg:col-4 p-0 md:p-3 mt-4 md:mt-0">
-                        <div class="p-3 flex flex-column border-200 pricing-card cursor-pointer border-2 hover:border-primary transition-duration-300 transition-all"
-                            style="border-radius: 10px">
-                            <h3 class="text-900 text-center my-5">Enterprise</h3>
-                            <img src="/demo/images/landing/enterprise.svg" class="w-10 h-10 mx-auto" alt="enterprise" />
-                            <div class="my-5 text-center">
-                                <span class="text-5xl font-bold mr-2 text-900">$999</span>
-                                <span class="text-600">per month</span>
-                                <Button label="Get a Quote"
-                                    class="block mx-auto mt-4 p-button-rounded border-none ml-3 font-light line-height-2 bg-blue-500 text-white"></Button>
-                            </div>
-                            <Divider class="w-full bg-surface-200"></Divider>
-                            <ul class="my-5 list-none p-0 flex text-900 flex-column">
-                                <li class="py-2">
-                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
-                                    <span class="text-xl line-height-3">Responsive Layout</span>
-                                </li>
-                                <li class="py-2">
-                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
-                                    <span class="text-xl line-height-3">Unlimited Push Messages</span>
-                                </li>
-                                <li class="py-2">
-                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
-                                    <span class="text-xl line-height-3">50 Support Ticket</span>
-                                </li>
-                                <li class="py-2">
-                                    <i class="pi pi-fw pi-check text-xl text-cyan-500 mr-2"></i>
-                                    <span class="text-xl line-height-3">Free Shipping</span>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
 
             <div class="py-4 px-4 mx-0 mt-8 lg:mx-8">
                 <div class="grid justify-content-between">
                     <div class="col-12 md:col-2" style="margin-top: -1.5rem">
-                        <a @click="smoothScroll('#home')"
-                            class="flex flex-wrap align-items-center justify-content-center md:justify-content-start md:mb-0 mb-3 cursor-pointer">
-                            <img :src="logoUrl" alt="footer sections" width="50" height="50" class="mr-2" />
-                            <h4 class="font-medium text-3xl text-900">SAKAI</h4>
-                        </a>
+
                     </div>
 
-                    <div class="col-12 md:col-10 lg:col-7">
+                    <div class="col-12 md:col-10 lg:col-2">
                         <div class="grid text-center md:text-left">
                             <div class="col-12 md:col-3">
-                                <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Company</h4>
+                                <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Project</h4>
                                 <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">About Us</a>
-                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">News</a>
-                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Investor
-                                    Relations</a>
-                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Careers</a>
-                                <a class="line-height-3 text-xl block cursor-pointer text-700">Media Kit</a>
-                            </div>
-
-                            <div class="col-12 md:col-3 mt-4 md:mt-0">
-                                <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Resources</h4>
-                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Get Started</a>
-                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Learn</a>
-                                <a class="line-height-3 text-xl block cursor-pointer text-700">Case Studies</a>
-                            </div>
-
-                            <div class="col-12 md:col-3 mt-4 md:mt-0">
-                                <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Community</h4>
-                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Discord</a>
-                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Events<img
-                                        src="/demo/images/landing/new-badge.svg" class="ml-2" /></a>
-                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">FAQ</a>
-                                <a class="line-height-3 text-xl block cursor-pointer text-700">Blog</a>
-                            </div>
-
-                            <div class="col-12 md:col-3 mt-4 md:mt-0">
-                                <h4 class="font-medium text-2xl line-height-3 mb-3 text-900">Legal</h4>
-                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Brand Policy</a>
-                                <a class="line-height-3 text-xl block cursor-pointer mb-2 text-700">Privacy Policy</a>
-                                <a class="line-height-3 text-xl block cursor-pointer text-700">Terms of Service</a>
                             </div>
                         </div>
                     </div>
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
new file mode 100644
index 0000000..52be321
--- /dev/null
+++ b/frontend/src/views/Login.vue
@@ -0,0 +1,48 @@
+<script setup>
+import { ref } from 'vue';
+
+const username = ref('');
+const password = ref('');
+
+</script>
+
+<template>
+    <div
+        class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
+        <div class="flex flex-column align-items-center justify-content-center">
+
+            <div
+                style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
+                <div class="w-full surface-card py-8 px-5 sm:px-8" style="border-radius: 53px">
+                    <div class="text-center mb-5">
+                        <span class="text-600 font-medium">Log in to continue</span>
+                    </div>
+
+                    <div>
+                        <label for="username1" class="block text-900 text-xl font-medium mb-2">Username</label>
+                        <InputText id="username1" type="text" placeholder="Username" class="w-full md:w-30rem mb-5"
+                            style="padding: 1rem" v-model="username" />
+
+                        <label for="password1" class="block text-900 font-medium text-xl mb-2">Password</label>
+                        <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true"
+                            class="w-full mb-3" inputClass="w-full" inputStyle="padding:1rem" :feedback="false">
+                        </Password>
+                        <Button label="Log In" class="w-full p-3 text-xl"></Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.pi-eye {
+    transform: scale(1.6);
+    margin-right: 1rem;
+}
+
+.pi-eye-slash {
+    transform: scale(1.6);
+    margin-right: 1rem;
+}
+</style>