From 390b74526a56992da39f37c457c725454a769fb7 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Tue, 1 Sep 2026 18:43:54 +0100
Subject: [PATCH 01/33] feat: new navbar, home, footer for 2026

---
 package.json                                  |   4 +-
 public/images/sinf-2026-sm.svg                |   3 +
 resources/css/app.css                         | 219 +++++++-
 resources/js/Components/Dropdown.vue          | 114 +++--
 resources/js/Components/DropdownLink.vue      |  33 +-
 resources/js/Components/DropdownTrigger.vue   |  11 +-
 resources/js/Components/Footer.vue            | 172 +++++--
 resources/js/Components/HamburgerMenu.vue     | 425 ++++++++++++----
 .../js/Components/Home/EnrollSection.vue      |  49 +-
 resources/js/Components/Home/SpeakerSlide.vue | 164 ++++--
 .../js/Components/Home/SpeakersCarousel.vue   | 153 ++++--
 resources/js/Components/Home/Sponsor.vue      | 110 ++--
 .../js/Components/Home/SponsorBanner.vue      | 136 +----
 resources/js/Components/NavLink.vue           |  22 +-
 resources/js/Components/Navbar.vue            | 468 ++++++++++++------
 resources/js/Components/ResponsiveNavLink.vue |  23 +-
 resources/js/Layouts/AppLayout.vue            |  39 +-
 resources/js/Pages/Home.vue                   | 460 ++++++++---------
 resources/js/Pages/Maintenance.vue            | 163 +++---
 resources/views/app.blade.php                 |   5 +-
 .../views/vendor/mail/html/themes/default.css |   2 +-
 21 files changed, 1815 insertions(+), 960 deletions(-)
 create mode 100644 public/images/sinf-2026-sm.svg

diff --git a/package.json b/package.json
index 71a91bb6..43b61d20 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
     "scripts": {
         "dev": "vite",
         "build": "vite build",
-        "format": "prettier --check *.js *.ts resources/js/",
-        "format:fix": "prettier --write *.js *.ts resources/js/",
+        "format": "prettier --check vite.config.ts resources/js/ resources/css/",
+        "format:fix": "prettier --write vite.config.ts resources/js/ resources/css/",
         "lint": "eslint resources/js/",
         "lint:fix": "eslint --fix resources/js/",
         "type-check": "vue-tsc --noEmit -p tsconfig.app.json"
diff --git a/public/images/sinf-2026-sm.svg b/public/images/sinf-2026-sm.svg
new file mode 100644
index 00000000..4f593613
--- /dev/null
+++ b/public/images/sinf-2026-sm.svg
@@ -0,0 +1,3 @@
+<svg width="602" height="602" viewBox="0 0 602 602" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.4772 301H193.04C221.672 301 249.133 312.376 269.379 332.626C289.626 352.875 301 380.34 301 408.977V545.514C301 560.495 306.95 574.863 317.542 585.456C328.133 596.049 342.499 602 357.477 602H545.523C560.501 602 574.867 596.049 585.458 585.456C596.05 574.863 602 560.495 602 545.514V357.486C602 342.505 596.05 328.137 585.458 317.544C574.867 306.951 560.501 301 545.523 301H408.961C380.328 301 352.867 289.624 332.621 269.374C312.374 249.125 301 221.66 301 193.023V56.4857C301 41.5048 295.05 27.1374 284.458 16.5443C273.867 5.95116 259.501 0 244.523 0H56.4772C41.4985 0 27.1333 5.95116 16.5418 16.5443C5.95026 27.1374 0 41.5048 0 56.4857L0 244.514C0 259.495 5.95026 273.863 16.5418 284.456C27.1333 295.049 41.4985 301 56.4772 301Z" fill="#F9F9F9"/>
+</svg>
diff --git a/resources/css/app.css b/resources/css/app.css
index e4a081bf..e349bc63 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,18 +1,30 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
 @plugin "@tailwindcss/forms";
 @plugin "@tailwindcss/typography";
 
 @theme {
-    --font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    --font-sans:
+        "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
         "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+        "Noto Color Emoji";
 
     --color-text-color: #ffffff;
-    --color-2025-bg-green: #59B672;
-    --color-2025-blue: #3A9699;
-    --color-2025-bg: #1A74C2;
-    --color-2025-blue-dark: #0F3D57;
+
+    /* 2026 Theme: Core Brand & Ambient Glow Palette */
+    --color-sinf-crimson: rgb(154, 0, 54);
+    --color-sinf-crimson-dark: rgb(64, 0, 23);
+    --color-sinf-purple: rgb(106, 0, 255);
+    --color-sinf-purple-dark: rgb(34, 1, 153);
+    --color-sinf-surface: #111215;
+    --color-sinf-surface-dark: #090a0c;
+
+    /* Previous Editions Theme Colors */
+    --color-2025-bg-green: #59b672;
+    --color-2025-blue: #3a9699;
+    --color-2025-bg: #1a74c2;
+    --color-2025-blue-dark: #0f3d57;
     --color-2023-bg: rgb(248, 245, 231);
     --color-2023-red: rgb(217, 79, 4);
     --color-2023-red-dark: rgb(177, 93, 93);
@@ -20,17 +32,41 @@
     --color-2023-teal-dark: rgb(2, 82, 89);
     --color-2023-orange: rgb(242, 147, 37);
 
-    --background-image-2025-bg-gradient: linear-gradient(45deg, #0f3d56 0%, #1A74C2 80%, #59B672 100%);
+    --background-image-2025-bg-gradient: linear-gradient(
+        45deg,
+        #0f3d56 0%,
+        #1a74c2 80%,
+        #59b672 100%
+    );
 
-    --shadow-sm: 2px 2px 0 -1px var(--tw-shadow-color, currentColor), 2px 2px 0 0 black;
-    --shadow: 4px 4px 0 -1px var(--tw-shadow-color, currentColor), 4px 4px 0 0 black;
-    --shadow-md: 6px 6px 0 -1px var(--tw-shadow-color, currentColor), 6px 6px 0 0 black;
-    --shadow-lg: 8px 8px 0 -1px var(--tw-shadow-color, currentColor), 8px 8px 0 0 black;
-    --shadow-xl: 12px 12px 0 -1px var(--tw-shadow-color, currentColor), 12px 12px 0 0 black;
-    --shadow-2xl: 16px 16px 0 -1px var(--tw-shadow-color, currentColor), 16px 16px 0 0 black;
+    /* Shadows & Inset Highlights */
+    --shadow-sm:
+        2px 2px 0 -1px var(--tw-shadow-color, currentColor), 2px 2px 0 0 black;
+    --shadow:
+        4px 4px 0 -1px var(--tw-shadow-color, currentColor), 4px 4px 0 0 black;
+    --shadow-md:
+        6px 6px 0 -1px var(--tw-shadow-color, currentColor), 6px 6px 0 0 black;
+    --shadow-lg:
+        8px 8px 0 -1px var(--tw-shadow-color, currentColor), 8px 8px 0 0 black;
+    --shadow-xl:
+        12px 12px 0 -1px var(--tw-shadow-color, currentColor),
+        12px 12px 0 0 black;
+    --shadow-2xl:
+        16px 16px 0 -1px var(--tw-shadow-color, currentColor),
+        16px 16px 0 0 black;
 
-    --animate-2023-maintenance-jump: 2023-jump 2s cubic-bezier(0.46, 0.03, 0.52, 0.96)
-        infinite;
+    --shadow-pill-inset: inset 0 1px 1px rgba(255, 255, 255, 0.05);
+    --shadow-pill-active: inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
+    --shadow-dropdown: 0 20px 50px rgba(0, 0, 0, 0.8);
+
+    /* Keyframe Animations */
+    --animate-2023-maintenance-jump: 2023-jump 2s
+        cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
+    --animate-float-crimson-1: float-crimson-1 10s ease-in-out infinite;
+    --animate-float-purple-1: float-purple-1 12s ease-in-out infinite;
+    --animate-float-crimson-2: float-crimson-2 9s ease-in-out infinite;
+    --animate-float-purple-2: float-purple-2 11s ease-in-out infinite;
+    --animate-spin-slow: spin 25s linear infinite;
 
     --breakpoint-ml: 900px;
     --breakpoint-xs: 500px;
@@ -46,6 +82,157 @@
     }
 }
 
+@keyframes float-crimson-1 {
+    0%,
+    100% {
+        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
+        opacity: 0.85;
+    }
+    33% {
+        transform: translate3d(-18vw, 12vh, 0) scale(1.2) rotate(45deg);
+        opacity: 1;
+    }
+    66% {
+        transform: translate3d(-8vw, -15vh, 0) scale(0.9) rotate(-30deg);
+        opacity: 0.75;
+    }
+}
+
+@keyframes float-purple-1 {
+    0%,
+    100% {
+        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
+        opacity: 0.8;
+    }
+    33% {
+        transform: translate3d(18vw, -14vh, 0) scale(0.85) rotate(-45deg);
+        opacity: 0.65;
+    }
+    66% {
+        transform: translate3d(10vw, 16vh, 0) scale(1.25) rotate(35deg);
+        opacity: 0.95;
+    }
+}
+
+@keyframes float-crimson-2 {
+    0%,
+    100% {
+        transform: translate3d(0, 0, 0) scale(1);
+        opacity: 0.7;
+    }
+    50% {
+        transform: translate3d(-20vw, -18vh, 0) scale(1.3);
+        opacity: 0.95;
+    }
+}
+
+@keyframes float-purple-2 {
+    0%,
+    100% {
+        transform: translate3d(0, 0, 0) scale(1);
+        opacity: 0.65;
+    }
+    50% {
+        transform: translate3d(20vw, 18vh, 0) scale(1.3);
+        opacity: 0.9;
+    }
+}
+
+@utility pill-container {
+    display: flex;
+    align-items: center;
+    border-radius: 9999px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 0.25rem;
+    box-shadow: var(--shadow-pill-inset);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+}
+
+@utility pill-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    border-radius: 9999px;
+    padding: 0.375rem 0.875rem;
+    font-size: 13px;
+    font-weight: 500;
+    color: #d4d4d4;
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+        background-color: rgba(255, 255, 255, 0.08);
+        color: #ffffff;
+    }
+
+    &:active {
+        transform: scale(0.95);
+    }
+
+    &:focus {
+        outline: none;
+    }
+}
+
+@utility pill-item-active {
+    background-color: rgba(255, 255, 255, 0.14);
+    font-weight: 600;
+    color: #ffffff;
+    box-shadow: var(--shadow-pill-active);
+}
+
+@utility glass-dropdown {
+    border-radius: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background-color: rgba(17, 18, 21, 0.95);
+    box-shadow: var(--shadow-dropdown);
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+}
+
+@utility glow-orb-crimson-1 {
+    background: radial-gradient(
+        ellipse 70% 60% at 50% 50%,
+        rgb(154 0 54 / 100%) 0%,
+        rgb(154 0 54 / 60%) 40%,
+        rgb(64 0 23 / 25%) 70%,
+        transparent 100%
+    );
+    animation: var(--animate-float-crimson-1);
+}
+
+@utility glow-orb-purple-1 {
+    background: radial-gradient(
+        ellipse 70% 60% at 50% 50%,
+        rgb(106 0 255 / 95%) 0%,
+        rgb(106 0 255 / 55%) 40%,
+        rgb(34 1 153 / 25%) 70%,
+        transparent 100%
+    );
+    animation: var(--animate-float-purple-1);
+}
+
+@utility glow-orb-crimson-2 {
+    background: radial-gradient(
+        ellipse 80% 50% at 50% 50%,
+        rgb(154 0 54 / 85%) 0%,
+        rgb(64 0 23 / 35%) 50%,
+        transparent 100%
+    );
+    animation: var(--animate-float-crimson-2);
+}
+
+@utility glow-orb-purple-2 {
+    background: radial-gradient(
+        ellipse 80% 50% at 50% 50%,
+        rgb(106 0 255 / 85%) 0%,
+        rgb(34 1 153 / 35%) 50%,
+        transparent 100%
+    );
+    animation: var(--animate-float-purple-2);
+}
+
 @layer base {
     *,
     ::after,
diff --git a/resources/js/Components/Dropdown.vue b/resources/js/Components/Dropdown.vue
index 209bf1e3..175e7c78 100644
--- a/resources/js/Components/Dropdown.vue
+++ b/resources/js/Components/Dropdown.vue
@@ -2,59 +2,115 @@
 import { computed, onMounted, onUnmounted, ref } from "vue";
 
 interface Props {
+    align?: "left" | "right" | "center";
     width?: string | number;
-    contentClasses?: string[];
+    contentClasses?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
+    align: "center",
     width: "48",
-    contentClasses: () => ["text-2023-red-dark", "text-center"],
+    contentClasses: "p-1.5",
 });
 
-let open = ref(false);
+const open = ref(false);
+let closeTimer: ReturnType<typeof setTimeout> | null = null;
+
+const onMouseEnter = () => {
+    if (closeTimer) {
+        clearTimeout(closeTimer);
+        closeTimer = null;
+    }
+    open.value = true;
+};
+
+const onMouseLeave = () => {
+    closeTimer = setTimeout(() => {
+        open.value = false;
+    }, 150);
+};
+
+const toggle = () => {
+    open.value = !open.value;
+};
+
+const close = () => {
+    open.value = false;
+};
 
 const closeOnEscape = (e: KeyboardEvent) => {
     if (open.value && e.key === "Escape") open.value = false;
 };
 
-onMounted(() => document.addEventListener("keydown", closeOnEscape));
-onUnmounted(() => document.removeEventListener("keydown", closeOnEscape));
+const handleClickOutside = (e: MouseEvent) => {
+    const target = e.target as HTMLElement | null;
+    if (!target?.closest("[data-dropdown-root]")) {
+        open.value = false;
+    }
+};
+
+onMounted(() => {
+    document.addEventListener("keydown", closeOnEscape);
+    document.addEventListener("click", handleClickOutside);
+});
+
+onUnmounted(() => {
+    document.removeEventListener("keydown", closeOnEscape);
+    document.removeEventListener("click", handleClickOutside);
+});
 
 const widthClass = computed(() => {
-    return {
-        "20": "w-20",
-        "32": "w-32",
-        "48": "w-48",
-    }[props.width.toString()];
+    return (
+        {
+            "20": "w-20",
+            "32": "w-32",
+            "48": "w-48",
+            "52": "w-52",
+            "56": "w-56",
+            "64": "w-64",
+        }[props.width.toString()] || "w-48"
+    );
+});
+
+const alignmentClasses = computed(() => {
+    if (props.align === "left") {
+        return "left-0";
+    } else if (props.align === "right") {
+        return "right-0";
+    }
+    return "left-1/2 -translate-x-1/2";
 });
 </script>
 
 <template>
-    <div class="relative">
-        <div class="h-full" @mouseover="open = true" @mouseleave="open = false">
-            <slot name="trigger" />
+    <div
+        data-dropdown-root
+        class="relative"
+        @mouseenter="onMouseEnter"
+        @mouseleave="onMouseLeave"
+    >
+        <div @click="toggle">
+            <slot name="trigger" :open="open" />
         </div>
 
-        <div
-            v-show="open"
-            class="fixed z-40 justify-center"
-            @click="open = false"
-        />
-
-        <transition>
+        <Transition
+            enter-active-class="transition duration-150 ease-out"
+            enter-from-class="opacity-0 scale-95 -translate-y-1"
+            enter-to-class="opacity-100 scale-100 translate-y-0"
+            leave-active-class="transition duration-100 ease-in"
+            leave-from-class="opacity-100 scale-100 translate-y-0"
+            leave-to-class="opacity-0 scale-95 -translate-y-1"
+        >
             <div
-                v-show="open"
-                class="absolute left-1/2 z-50 -translate-x-1/2"
-                :class="[widthClass]"
-                style="display: none"
-                @mouseover="open = true"
-                @mouseleave="open = false"
-                @click="open = false"
+                v-if="open"
+                class="glass-dropdown absolute z-50 mt-2 ring-1 ring-white/5"
+                :class="[widthClass, alignmentClasses]"
+                @click="close"
             >
                 <div :class="contentClasses">
-                    <slot name="content" />
+                    <slot name="content" :close="close" />
                 </div>
             </div>
-        </transition>
+        </Transition>
     </div>
 </template>
diff --git a/resources/js/Components/DropdownLink.vue b/resources/js/Components/DropdownLink.vue
index 833286fa..77680d24 100644
--- a/resources/js/Components/DropdownLink.vue
+++ b/resources/js/Components/DropdownLink.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from "vue";
 import { Link } from "@inertiajs/vue3";
 
 interface Props {
@@ -6,6 +7,7 @@ interface Props {
     href?: string;
     method?: "get" | "post";
     only?: string[];
+    danger?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -13,28 +15,43 @@ const props = withDefaults(defineProps<Props>(), {
     as: undefined,
     method: "get",
     only: undefined,
+    danger: false,
 });
 
-const classes =
-    "block w-full px-2 py-2 text-md text-white underline font-semibold first:rounded-t-lg last:rounded-b-lg bg-white/20 filter cursor-pointer hover:brightness-90 focus:outline-hidden focus:bg-2025-blue transition duration-150 ease-in-out";
+const isExternalOrAnchor = computed(() => {
+    if (props.method === "post" || props.as === "button") return false;
+    return (
+        props.as === "a" ||
+        props.href.startsWith("#") ||
+        props.href.startsWith("/#")
+    );
+});
+
+const classes = computed(() => {
+    return props.danger || props.method === "post"
+        ? "group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl px-3 py-2 text-left text-xs font-medium text-red-400 transition-colors hover:bg-red-500/10 hover:text-red-300 focus:outline-none"
+        : "group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl px-3 py-2 text-left text-xs font-medium text-neutral-300 transition-colors hover:bg-white/[0.08] hover:text-white focus:outline-none";
+});
 </script>
 
 <template>
-    <button v-if="as === 'button'" type="submit" :class="classes">
-        <slot />
-    </button>
-
-    <a v-else-if="as === 'a'" :href="props.href" :class="classes">
+    <a
+        v-if="isExternalOrAnchor"
+        :href="props.href"
+        :class="classes"
+        target="_blank"
+        rel="noopener noreferrer"
+    >
         <slot />
     </a>
 
     <Link
         v-else
         :href="props.href"
+        :as="props.as"
         :method="props.method"
         :class="classes"
         :only="props.only"
-        preserve-state
     >
         <slot />
     </Link>
diff --git a/resources/js/Components/DropdownTrigger.vue b/resources/js/Components/DropdownTrigger.vue
index a58604c1..69d80e81 100644
--- a/resources/js/Components/DropdownTrigger.vue
+++ b/resources/js/Components/DropdownTrigger.vue
@@ -1,6 +1,15 @@
+<script setup lang="ts">
+interface Props {
+    active?: boolean;
+}
+defineProps<Props>();
+</script>
+
 <template>
     <button
-        class="text-2023-teal inline-flex h-full cursor-pointer items-center p-1 text-lg leading-5 font-medium transition duration-150 ease-in-out focus:outline-hidden lg:text-lg"
+        type="button"
+        class="inline-flex cursor-pointer items-center gap-1 rounded-full px-3 py-1.5 text-[13px] font-medium text-neutral-300 transition-all duration-150 hover:bg-white/8 hover:text-white focus:outline-none"
+        :class="{ 'bg-white/8 text-white': active }"
     >
         <slot />
     </button>
diff --git a/resources/js/Components/Footer.vue b/resources/js/Components/Footer.vue
index 4570b39f..cd0c7a02 100644
--- a/resources/js/Components/Footer.vue
+++ b/resources/js/Components/Footer.vue
@@ -1,70 +1,146 @@
 <script setup lang="ts">
-const contacts = [
+import { Link } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
+
+const socialLinks = [
     {
-        social: "facebook",
-        url: "https://www.facebook.com/sinfFEUP/",
+        name: "Instagram",
+        url: "https://www.instagram.com/sinffeup/",
+        icon: "instagram",
     },
     {
-        social: "linkedin",
+        name: "LinkedIn",
         url: "https://pt.linkedin.com/company/sinffeup",
+        icon: "linkedin",
     },
     {
-        social: "instagram",
-        url: "https://www.instagram.com/sinffeup/?hl=en",
-    },
-    {
-        social: "web",
-        url: "mailto:geral@sinf.pt",
+        name: "Facebook",
+        url: "https://www.facebook.com/sinffeup/",
+        icon: "facebook",
     },
 ];
+
+const currentYear = new Date().getFullYear();
 </script>
 
 <template>
-    <footer class="bg-2025-blue-dark py-8">
-        <section
-            class="relative flex content-center items-center justify-center p-8 md:mx-[30%] lg:mx-[35%]"
+    <footer class="relative mt-24 overflow-hidden px-4 py-14 sm:px-6 lg:px-8">
+        <div
+            class="pointer-events-none absolute inset-0 -z-10 overflow-hidden"
+            aria-hidden="true"
         >
             <div
-                class="hidden w-full flex-row items-center justify-evenly md:flex"
-            >
-                <template v-for="platform in contacts" :key="platform">
+                class="absolute inset-0 backdrop-blur-[2px]"
+                style="
+                    mask-image: linear-gradient(
+                        to top,
+                        rgba(0, 0, 0, 1) 0%,
+                        rgba(0, 0, 0, 0) 100%
+                    );
+                    -webkit-mask-image: linear-gradient(
+                        to top,
+                        rgba(0, 0, 0, 1) 0%,
+                        rgba(0, 0, 0, 0) 100%
+                    );
+                "
+            />
+            <div
+                class="absolute inset-0 backdrop-blur-[6px]"
+                style="
+                    mask-image: linear-gradient(
+                        to top,
+                        rgba(0, 0, 0, 1) 0%,
+                        rgba(0, 0, 0, 0) 75%
+                    );
+                    -webkit-mask-image: linear-gradient(
+                        to top,
+                        rgba(0, 0, 0, 1) 0%,
+                        rgba(0, 0, 0, 0) 75%
+                    );
+                "
+            />
+            <div
+                class="absolute inset-0 backdrop-blur-md"
+                style="
+                    mask-image: linear-gradient(
+                        to top,
+                        rgba(0, 0, 0, 1) 0%,
+                        rgba(0, 0, 0, 0) 50%
+                    );
+                    -webkit-mask-image: linear-gradient(
+                        to top,
+                        rgba(0, 0, 0, 1) 0%,
+                        rgba(0, 0, 0, 0) 50%
+                    );
+                "
+            />
+            <div
+                class="absolute inset-0 backdrop-blur-xl"
+                style="
+                    mask-image: linear-gradient(
+                        to top,
+                        rgba(0, 0, 0, 1) 0%,
+                        rgba(0, 0, 0, 0) 30%
+                    );
+                    -webkit-mask-image: linear-gradient(
+                        to top,
+                        rgba(0, 0, 0, 1) 0%,
+                        rgba(0, 0, 0, 0) 30%
+                    );
+                "
+            />
+            <div
+                class="absolute inset-0 bg-linear-to-t from-black/90 via-black/55 to-black/0"
+            />
+            <div
+                class="absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-white/10 to-transparent"
+            />
+        </div>
+
+        <div
+            class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-8 md:flex-row"
+        >
+            <div class="flex flex-col items-center gap-3 md:items-start">
+                <Link
+                    :href="route('home')"
+                    class="transition-opacity hover:opacity-80"
+                >
+                    <img
+                        src="/images/sinf2026.svg"
+                        alt="SINF 2026"
+                        class="h-7 w-auto sm:h-8"
+                    />
+                </Link>
+                <p class="text-center text-xs text-neutral-400 md:text-left">
+                    Copyright &copy; {{ currentYear }}
                     <a
-                        class="flex w-fit rounded-full p-2.5"
+                        href="https://niaefeup.pt/"
                         target="_blank"
-                        :href="platform.url"
+                        rel="noopener noreferrer"
+                        class="font-semibold text-white transition-colors"
                     >
-                        <img
-                            :src="`/images/${platform.social}.svg`"
-                            class="h-20 w-20 filter-[drop-shadow(0_0_0_rgba(0,0,0,0))] hover:scale-105 hover:drop-shadow-[0_8px_20px_rgba(255,255,255,0.28)]"
-                        />
-                    </a>
-                </template>
+                        NIAEFEUP </a
+                    >. Todos os direitos reservados.
+                </p>
             </div>
-            <div class="flex flex-col items-center gap-2 md:hidden">
-                <div class="grid grid-cols-2 justify-center gap-3">
-                    <template v-for="platform in contacts" :key="platform">
-                        <a
-                            class="flex w-fit rounded-full p-2.5"
-                            target="_blank"
-                            :href="platform.url"
-                        >
-                            <img
-                                :src="`/images/${platform.social}.svg`"
-                                class="h-20 w-20"
-                            />
-                        </a>
-                    </template>
-                </div>
+
+            <div class="pill-container gap-1 px-2 py-1 shadow-none">
+                <a
+                    v-for="social in socialLinks"
+                    :key="social.name"
+                    :href="social.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    :aria-label="social.name"
+                    class="flex h-8 w-8 items-center justify-center rounded-full p-1.5 transition-all duration-200 hover:scale-110 hover:bg-white/10"
+                >
+                    <img
+                        :src="`/images/${social.icon}.svg`"
+                        :alt="social.name"
+                        class="h-full w-full object-contain"
+                    />
+                </a>
             </div>
-        </section>
-        <div class="text-text-color container mx-auto text-center font-bold">
-            <p>
-                Copyright &copy; 2025
-                <a href="https://ni.fe.up.pt/">NIAEFEUP</a>, todos os direitos
-                reservados
-            </p>
         </div>
     </footer>
 </template>
-
-<style></style>
diff --git a/resources/js/Components/HamburgerMenu.vue b/resources/js/Components/HamburgerMenu.vue
index 407ea7c7..4362c534 100644
--- a/resources/js/Components/HamburgerMenu.vue
+++ b/resources/js/Components/HamburgerMenu.vue
@@ -1,147 +1,378 @@
 <script setup lang="ts">
-import { onUnmounted, ref, watch } from "vue";
-import ResponsiveNavLink from "@/Components/ResponsiveNavLink.vue";
+import { ref, watch, onMounted, onUnmounted } from "vue";
+import { Link } from "@inertiajs/vue3";
 import { route, type HasQueryParam } from "ziggy-js";
+import ResponsiveNavLink from "@/Components/ResponsiveNavLink.vue";
 import type Competition from "@/Types/Competition";
-import { OhVueIcon } from "oh-vue-icons";
+import type { User } from "@/Types/User";
 
-interface Route {
+interface RouteItem {
     label: string;
+    href?: string;
     _query?: HasQueryParam["_query"];
 }
-type Routes = Record<string, Route>;
+
+type Routes = Record<string, RouteItem>;
 
 const props = defineProps<{
     modelValue?: boolean;
     options: {
         pages: Routes;
+        homeSections?: Routes;
         competitions: Competition[];
         editions: number[];
+        currentEdition?: number;
     };
+    user?: User;
+    isAdmin?: boolean;
 }>();
 
 const emit = defineEmits<{
     (e: "update:modelValue", value: boolean): void;
 }>();
 
-const internalOpen = ref<boolean>(props.modelValue ?? false);
+const internalOpen = ref(props.modelValue ?? false);
 
 watch(
     () => props.modelValue,
     (val) => {
-        if (val !== undefined && val !== internalOpen.value)
+        if (val !== undefined && val !== internalOpen.value) {
             internalOpen.value = val;
+        }
     },
 );
 
 watch(internalOpen, (val) => {
     emit("update:modelValue", val);
-    document.body.classList.toggle("overflow-hidden", val);
+    if (typeof document !== "undefined") {
+        document.body.classList.toggle("overflow-hidden", val);
+    }
+});
+
+const closeMenu = () => {
+    internalOpen.value = false;
+};
+
+const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape" && internalOpen.value) {
+        closeMenu();
+    }
+};
+
+onMounted(() => {
+    window.addEventListener("keydown", handleKeyDown);
 });
 
 onUnmounted(() => {
-    document.body.classList.remove("overflow-hidden");
+    window.removeEventListener("keydown", handleKeyDown);
+    if (typeof document !== "undefined") {
+        document.body.classList.remove("overflow-hidden");
+    }
 });
+
+const isCurrentRoute = (name: string) => {
+    try {
+        return route().current(name);
+    } catch {
+        return false;
+    }
+};
+
+const getPageRoute = (name: string, query?: HasQueryParam["_query"]) => {
+    try {
+        return route(route().has(name) ? name : "home", { _query: query });
+    } catch {
+        return "/";
+    }
+};
 </script>
 
 <template>
-    <div class="flex md:hidden">
+    <div class="pill-container md:hidden">
         <button
-            aria-label="Open navigation menu"
-            class="inline-flex items-center justify-center px-2 text-white"
+            type="button"
+            class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-300 transition-all hover:bg-white/8 hover:text-white focus:outline-none"
+            aria-label="Menu"
             @click="internalOpen = !internalOpen"
         >
-            <template v-if="!internalOpen">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="w-10 text-white"
-                    viewBox="0 0 512 512"
-                >
-                    <path
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-miterlimit="10"
-                        stroke-width="48"
-                        d="M88 152h336M88 256h336M88 360h336"
-                    />
-                </svg>
-            </template>
-            <template v-else>
-                <OhVueIcon
-                    name="io-close"
-                    scale="2.1"
-                    fill="#FFFFFF"
-                ></OhVueIcon>
-            </template>
+            <svg
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M4 6h16M4 12h16M4 18h16"
+                />
+            </svg>
         </button>
     </div>
-    <teleport to="body">
-        <div
-            v-show="internalOpen"
-            class="fixed top-0 left-0 z-20 m-0 flex h-screen w-full flex-col bg-black/30 py-6 text-2xl font-semibold text-white backdrop-blur-3xl md:hidden"
-            style="padding-top: 4.9rem"
+
+    <Teleport to="body">
+        <Transition
+            enter-active-class="transition-all duration-300 ease-out"
+            enter-from-class="opacity-0 -translate-y-4"
+            enter-to-class="opacity-100 translate-y-0"
+            leave-active-class="transition-all duration-200 ease-in"
+            leave-from-class="opacity-100 translate-y-0"
+            leave-to-class="opacity-0 -translate-y-4"
         >
-            <div class="flex flex-col items-center">
-                <template
-                    v-for="({ label, _query }, page) in props.options.pages"
-                    :key="page"
-                >
-                    <ResponsiveNavLink
-                        :href="
-                            route(route().has(page) ? page : 'home', {
-                                _query,
-                            })
-                        "
-                        :active="page === route().current()"
-                    >
-                        {{ label }}
-                    </ResponsiveNavLink>
-                </template>
-            </div>
-            <section
-                v-if="props.options.competitions.length > 0"
-                class="flex flex-col items-center pt-6"
+            <div
+                v-if="internalOpen"
+                class="bg-sinf-surface-dark/95 fixed inset-0 z-100 flex flex-col justify-between overflow-y-auto p-5 pt-4 shadow-2xl backdrop-blur-3xl md:hidden"
             >
-                <h2 class="text-2025-bg-green pb-3 text-center font-bold">
-                    Competições
-                </h2>
-                <template
-                    v-for="competition in props.options.competitions"
-                    :key="competition.id"
-                >
-                    <ResponsiveNavLink
-                        :href="
-                            route('competition.show', {
-                                competition: competition.slug,
-                            })
-                        "
+                <div>
+                    <div
+                        class="flex items-center justify-between border-b border-white/8 pb-4"
                     >
-                        {{ competition.name }}
-                    </ResponsiveNavLink>
-                </template>
-            </section>
-            <section class="py-6">
-                <h2 class="text-2025-bg-green pb-3 text-center font-bold">
-                    Edições
-                </h2>
-                <div
-                    class="flex w-full flex-wrap justify-center gap-5 px-12"
-                    style="grid-template-columns: repeat(auto-fill, 100px)"
-                >
-                    <template
-                        v-for="edition in props.options.editions"
-                        :key="`navbar-edition-link-${edition}`"
-                    >
-                        <ResponsiveNavLink
-                            :href="`https://${edition}.sinf.pt`"
-                            :active="edition === new Date().getFullYear()"
+                        <Link
+                            :href="route('home')"
+                            class="flex items-center gap-2.5"
+                            @click="closeMenu"
+                        >
+                            <img
+                                class="h-6 w-auto"
+                                src="/images/sinf2026.svg"
+                                alt="SINF Logo"
+                            />
+                        </Link>
+
+                        <button
+                            type="button"
+                            class="flex h-9 w-9 items-center justify-center rounded-xl border border-white/8 bg-white/4 text-neutral-300 transition-colors hover:bg-white/8 hover:text-white focus:outline-none"
+                            aria-label="Fechar menu"
+                            @click="closeMenu"
                         >
-                            {{ edition }}
-                        </ResponsiveNavLink>
+                            <svg
+                                class="h-5 w-5"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M6 18L18 6M6 6l12 12"
+                                />
+                            </svg>
+                        </button>
+                    </div>
+
+                    <div class="mt-5 space-y-6">
+                        <div>
+                            <div
+                                class="px-2 pb-2 text-[11px] font-semibold tracking-wider text-neutral-500 uppercase"
+                            >
+                                Navegação
+                            </div>
+                            <div class="space-y-1">
+                                <template
+                                    v-for="(
+                                        { label, href }, key
+                                    ) in options.homeSections"
+                                    :key="key"
+                                >
+                                    <ResponsiveNavLink
+                                        :href="href || '/'"
+                                        @click="closeMenu"
+                                    >
+                                        <span>{{ label }}</span>
+                                        <svg
+                                            class="h-4 w-4 text-neutral-500"
+                                            fill="none"
+                                            viewBox="0 0 24 24"
+                                            stroke="currentColor"
+                                        >
+                                            <path
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                stroke-width="2"
+                                                d="M9 5l7 7-7 7"
+                                            />
+                                        </svg>
+                                    </ResponsiveNavLink>
+                                </template>
+
+                                <template
+                                    v-for="(
+                                        { label, _query }, pageKey
+                                    ) in options.pages"
+                                    :key="pageKey"
+                                >
+                                    <ResponsiveNavLink
+                                        :href="getPageRoute(pageKey, _query)"
+                                        :active="isCurrentRoute(pageKey)"
+                                        @click="closeMenu"
+                                    >
+                                        <span>{{ label }}</span>
+                                        <svg
+                                            class="h-4 w-4 text-neutral-500"
+                                            fill="none"
+                                            viewBox="0 0 24 24"
+                                            stroke="currentColor"
+                                        >
+                                            <path
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                stroke-width="2"
+                                                d="M9 5l7 7-7 7"
+                                            />
+                                        </svg>
+                                    </ResponsiveNavLink>
+                                </template>
+                            </div>
+                        </div>
+
+                        <div v-if="options.competitions.length > 0">
+                            <div
+                                class="px-2 pb-2 text-[11px] font-semibold tracking-wider text-neutral-500 uppercase"
+                            >
+                                Competições
+                            </div>
+                            <div class="space-y-1">
+                                <template
+                                    v-for="comp in options.competitions"
+                                    :key="comp.id"
+                                >
+                                    <ResponsiveNavLink
+                                        :href="
+                                            route('competition.show', {
+                                                competition: comp.slug,
+                                            })
+                                        "
+                                        @click="closeMenu"
+                                    >
+                                        <span>{{ comp.name }}</span>
+                                        <svg
+                                            class="h-4 w-4 text-neutral-500"
+                                            fill="none"
+                                            viewBox="0 0 24 24"
+                                            stroke="currentColor"
+                                        >
+                                            <path
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                stroke-width="2"
+                                                d="M9 5l7 7-7 7"
+                                            />
+                                        </svg>
+                                    </ResponsiveNavLink>
+                                </template>
+                            </div>
+                        </div>
+
+                        <div>
+                            <div
+                                class="px-2 pb-2 text-[11px] font-semibold tracking-wider text-neutral-500 uppercase"
+                            >
+                                Edições Anteriores
+                            </div>
+                            <div class="grid grid-cols-3 gap-2">
+                                <template
+                                    v-for="edition in options.editions"
+                                    :key="`mobile-edition-${edition}`"
+                                >
+                                    <a
+                                        v-if="
+                                            edition !==
+                                            (options.currentEdition || 2026)
+                                        "
+                                        :href="`https://${edition}.sinf.pt`"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        class="flex items-center justify-center gap-1 rounded-xl border border-white/6 bg-white/3 py-2 text-xs font-medium text-neutral-300 transition-colors hover:border-white/20 hover:bg-white/8 hover:text-white"
+                                    >
+                                        <span>{{ edition }}</span>
+                                    </a>
+                                    <div
+                                        v-else
+                                        class="flex items-center justify-center gap-1.5 rounded-xl border border-emerald-500/30 bg-emerald-500/10 py-2 text-xs font-semibold text-emerald-300"
+                                    >
+                                        <span>{{ edition }}</span>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mt-8 border-t border-white/8 pt-4">
+                    <template v-if="user">
+                        <div
+                            class="mb-3 flex items-center gap-3 rounded-2xl border border-white/8 bg-white/3 p-3"
+                        >
+                            <img
+                                :src="user.profile_photo_url"
+                                :alt="user.name"
+                                class="h-10 w-10 rounded-full object-cover ring-2 ring-white/10"
+                            />
+                            <div class="min-w-0 flex-1">
+                                <p
+                                    class="truncate text-sm font-semibold text-white"
+                                >
+                                    {{ user.name }}
+                                </p>
+                                <p class="truncate text-xs text-neutral-400">
+                                    {{ user.email }}
+                                </p>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-2 gap-2">
+                            <Link
+                                :href="route('profile.show')"
+                                class="flex items-center justify-center gap-2 rounded-xl border border-white/8 bg-white/4 py-2.5 text-xs font-medium text-white transition-colors hover:bg-white/8"
+                                @click="closeMenu"
+                            >
+                                <span>Perfil</span>
+                            </Link>
+                            <Link
+                                v-if="isAdmin"
+                                :href="route('admin.index')"
+                                class="flex items-center justify-center gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 py-2.5 text-xs font-medium text-amber-300 transition-colors hover:bg-amber-500/20"
+                                @click="closeMenu"
+                            >
+                                <span>Admin</span>
+                            </Link>
+                            <Link
+                                :href="route('logout')"
+                                method="post"
+                                as="button"
+                                class="flex items-center justify-center gap-2 rounded-xl border border-red-500/20 bg-red-500/10 py-2.5 text-xs font-medium text-red-300 transition-colors hover:bg-red-500/20"
+                                :class="{ 'col-span-2': isAdmin }"
+                                @click="closeMenu"
+                            >
+                                <span>Logout</span>
+                            </Link>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <Link
+                            :href="route('login')"
+                            class="flex w-full items-center justify-center gap-2 rounded-xl bg-white py-3 text-sm font-semibold text-black shadow-lg transition-transform active:scale-98"
+                            @click="closeMenu"
+                        >
+                            <span>Entrar</span>
+                            <svg
+                                class="h-4 w-4"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M14 5l7 7m0 0l-7 7m7-7H3"
+                                />
+                            </svg>
+                        </Link>
                     </template>
                 </div>
-            </section>
-        </div>
-    </teleport>
+            </div>
+        </Transition>
+    </Teleport>
 </template>
diff --git a/resources/js/Components/Home/EnrollSection.vue b/resources/js/Components/Home/EnrollSection.vue
index 63716fa3..c2971bf5 100644
--- a/resources/js/Components/Home/EnrollSection.vue
+++ b/resources/js/Components/Home/EnrollSection.vue
@@ -1,34 +1,33 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
 import { router } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 </script>
 
 <template>
-    <section
-        id="enroll-section"
-        class="max-xs:items-center relative mx-10 flex h-full flex-col items-center"
-    >
-        <div
-            class="bg-2025-bg-blue mx-10 flex h-full flex-1 flex-col items-center text-center text-3xl font-bold text-white sm:p-12"
+    <div id="enroll-section" class="flex flex-col items-center">
+        <button
+            type="button"
+            class="group inline-flex items-center gap-3 rounded-full bg-white px-8 py-4 text-sm font-semibold text-black shadow-[0_0_35px_rgba(255,255,255,0.25)] transition-all duration-200 hover:scale-105 hover:bg-neutral-100 hover:shadow-[0_0_50px_rgba(255,255,255,0.45)] focus:outline-none active:scale-95 sm:text-base"
+            @click="
+                $page.props.auth.user
+                    ? router.put(route('enroll'))
+                    : router.get(route('register'))
+            "
         >
-            <PrimaryButton
-                class="bg-2025-blue"
-                shadow="teal"
-                text-size="sm:text-4xl"
-                padding="sm:px-8"
-                @click="
-                    $page.props.auth.user
-                        ? router.put(route('enroll'))
-                        : router.get(route('register'))
-                "
-                >Inscrever-me</PrimaryButton
+            <span>Inscrever-me</span>
+            <svg
+                class="h-4 w-4 text-neutral-800 transition-transform duration-200 group-hover:translate-x-1"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
             >
-        </div>
-        <!-- <p
-            class="w-fit py-2 text-center text-3xl font-bold text-text-color sm:text-4xl"
-        >
-            Estamos à tua espera!
-        </p> -->
-    </section>
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M14 5l7 7m0 0l-7 7m7-7H3"
+                />
+            </svg>
+        </button>
+    </div>
 </template>
diff --git a/resources/js/Components/Home/SpeakerSlide.vue b/resources/js/Components/Home/SpeakerSlide.vue
index 893f0e71..f13416c1 100644
--- a/resources/js/Components/Home/SpeakerSlide.vue
+++ b/resources/js/Components/Home/SpeakerSlide.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { SpeakerUser } from "@/Types/User";
 import { computed } from "vue";
-import { OhVueIcon } from "oh-vue-icons";
 
 interface Props {
     speaker: SpeakerUser;
@@ -15,71 +14,134 @@ const socialMedia = computed(() => {
         Object.entries(speaker.value.usertype?.social_media ?? {}).filter(
             ([key, value]) =>
                 ["github", "linkedin", "website"].includes(key) &&
-                value != null,
+                value != null &&
+                value !== "",
         ),
     ) as Record<"github" | "linkedin" | "website", string>;
 });
 
-const socialIcon: Record<string, string> = {
-    github: "io-logo-github",
-    linkedin: "io-logo-linkedin",
-    website: "io-globe",
-};
-
-const speakerName = (name: string) => {
-    const nameArray = name.split(" ");
-    return `${nameArray[0]} ${nameArray[nameArray.length - 1]}`;
-};
+const displayName = computed(() => {
+    if (speaker.value.usertype?.display_name) {
+        return speaker.value.usertype.display_name;
+    }
+    return speaker.value.name;
+});
 </script>
 
 <template>
-    <div class="flex flex-col items-center transition-all duration-500">
+    <div
+        class="group relative flex h-full w-full flex-col justify-between rounded-3xl border border-white/8 bg-black/50 p-4 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.015] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-5"
+    >
         <div
-            class="relative flex aspect-square w-40 items-center justify-center overflow-hidden rounded-full sm:w-48 md:w-56 lg:w-64"
+            class="relative aspect-square w-full overflow-hidden rounded-2xl bg-neutral-900 ring-1 ring-white/10"
         >
             <img
                 :src="speaker.profile_photo_url"
-                class="h-full w-full object-cover"
-                alt=""
+                :alt="displayName"
+                class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
             />
+
             <div
-                v-if="Object.keys(socialMedia).length > 0"
-                class="socials absolute -bottom-32 flex w-full flex-row items-center justify-center pt-1 pb-10 transition-all"
-            >
-                <a
-                    v-for="(social, key, idx) in socialMedia"
-                    :key="idx"
-                    :href="social"
-                    target="_blank"
-                >
-                    <OhVueIcon
-                        :fill="'#FFFFFF'"
-                        :stroke="'#1A74C2'"
-                        :name="socialIcon[key]"
-                        scale="1.4"
-                    />
-                </a>
-            </div>
+                class="absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+            />
         </div>
 
-        <p class="max-w-52 py-4 text-center text-lg wrap-break-word text-white">
-            {{ speaker.usertype?.display_name ?? speakerName(speaker.name) }}
-        </p>
-    </div>
-</template>
+        <div class="mt-4 flex flex-1 flex-col justify-between">
+            <div>
+                <h4
+                    class="truncate text-base font-bold tracking-tight text-white transition-colors group-hover:text-neutral-200"
+                >
+                    {{ displayName }}
+                </h4>
+                <p
+                    class="mt-1 line-clamp-2 min-h-9 text-xs leading-relaxed font-light text-neutral-400"
+                >
+                    <span v-if="speaker.usertype?.title">
+                        {{ speaker.usertype.title }}
+                    </span>
+                    <span
+                        v-if="
+                            speaker.usertype?.title &&
+                            speaker.usertype?.organization
+                        "
+                        class="mx-1 text-neutral-600"
+                        >•</span
+                    >
+                    <span
+                        v-if="speaker.usertype?.organization"
+                        class="font-medium text-neutral-300"
+                    >
+                        {{ speaker.usertype.organization }}
+                    </span>
+                </p>
+            </div>
 
-<style>
-.carousel__viewport {
-    overflow: hidden !important;
-}
+            <div class="mt-4 flex min-h-9 items-center justify-between pt-3">
+                <div class="flex items-center gap-2">
+                    <a
+                        v-if="socialMedia.github"
+                        :href="socialMedia.github"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-all hover:bg-white/10 hover:text-white"
+                        aria-label="GitHub"
+                    >
+                        <svg
+                            class="h-4 w-4"
+                            fill="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                            />
+                        </svg>
+                    </a>
 
-.carousel__slide {
-    display: flex;
-    justify-content: center;
-}
+                    <a
+                        v-if="socialMedia.linkedin"
+                        :href="socialMedia.linkedin"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-all hover:bg-white/10 hover:text-white"
+                        aria-label="LinkedIn"
+                    >
+                        <svg
+                            class="h-4 w-4"
+                            fill="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path
+                                d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"
+                            />
+                        </svg>
+                    </a>
 
-.carousel__slide--active .rounded-full {
-    transform: scale(1.1);
-    transform-origin: center;
-}
-</style>
+                    <a
+                        v-if="socialMedia.website"
+                        :href="socialMedia.website"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-all hover:bg-white/10 hover:text-white"
+                        aria-label="Website"
+                    >
+                        <svg
+                            class="h-4 w-4"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
+                            />
+                        </svg>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Components/Home/SpeakersCarousel.vue b/resources/js/Components/Home/SpeakersCarousel.vue
index 711f344f..cc6aaa84 100644
--- a/resources/js/Components/Home/SpeakersCarousel.vue
+++ b/resources/js/Components/Home/SpeakersCarousel.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/carousel.css";
 import SpeakerSlide from "./SpeakerSlide.vue";
 import type { SpeakerUser, User } from "@/Types/User";
-import { OhVueIcon } from "oh-vue-icons";
 
 interface Props {
     speakers: User[];
@@ -12,11 +11,37 @@ interface Props {
 
 defineProps<Props>();
 
-const carousel = ref<typeof Carousel | null>(null);
+interface CarouselInstance {
+    next: () => void;
+    prev: () => void;
+}
+
+const carousel = ref<CarouselInstance | null>(null);
 
 const breakpoints = {
+    480: {
+        itemsToShow: 1.8,
+        snapAlign: "center" as const,
+    },
+    640: {
+        itemsToShow: 2.3,
+        snapAlign: "center" as const,
+    },
+    768: {
+        itemsToShow: 3.2,
+        snapAlign: "center" as const,
+    },
     1024: {
-        itemsToShow: 4,
+        itemsToShow: 4.2,
+        snapAlign: "center" as const,
+    },
+    1280: {
+        itemsToShow: 5.2,
+        snapAlign: "center" as const,
+    },
+    1536: {
+        itemsToShow: 6.2,
+        snapAlign: "center" as const,
     },
 };
 
@@ -27,51 +52,93 @@ const next = () => {
 const prev = () => {
     carousel.value?.prev();
 };
-
-const wrapperHeight = () => {
-    const wrapperHeight: number | undefined = document.querySelector(
-        "li.carousel__slide--next > div",
-    )?.scrollHeight;
-    const track: HTMLElement | null =
-        document.querySelector("ol.carousel__track");
-
-    if (track)
-        track.style.height = wrapperHeight ? wrapperHeight + 80 + "px" : "100%";
-};
-
-onMounted(async () => {
-    window.addEventListener("resize", wrapperHeight);
-
-    await new Promise((r) => setTimeout(r, 500)).then(wrapperHeight);
-});
 </script>
 
 <template>
-    <Carousel
-        ref="carousel"
-        snap-align="center"
-        :items-to-show="2"
-        :autoplay="2000"
-        :wrap-around="true"
-        :breakpoints="breakpoints"
-    >
-        <Slide v-for="speaker in speakers as SpeakerUser[]" :key="speaker.id">
-            <SpeakerSlide :speaker="speaker" />
-        </Slide>
-    </Carousel>
-    <div class="align-center flex justify-center gap-3 text-white">
-        <button @click="prev">
-            <OhVueIcon name="io-arrow-back" scale="2"></OhVueIcon>
-        </button>
-        <button @click="next">
-            <OhVueIcon name="io-arrow-forward" scale="2"></OhVueIcon>
-        </button>
+    <div class="relative w-full overflow-hidden">
+        <Carousel
+            ref="carousel"
+            :items-to-show="1.3"
+            :wrap-around="speakers.length > 3"
+            :breakpoints="breakpoints"
+            :transition="800"
+            :autoplay="speakers.length > 3 ? 3500 : 0"
+            :pause-autoplay-on-hover="true"
+            class="w-full"
+        >
+            <Slide
+                v-for="speaker in speakers as SpeakerUser[]"
+                :key="speaker.id"
+                class="flex h-auto items-stretch px-2 py-4 sm:px-3"
+            >
+                <SpeakerSlide :speaker="speaker" />
+            </Slide>
+        </Carousel>
+
+        <div
+            v-if="speakers.length > 1"
+            class="mt-6 flex items-center justify-center gap-3"
+        >
+            <button
+                type="button"
+                class="pill-container h-10 w-10 justify-center text-neutral-300 transition-all hover:scale-110 hover:text-white focus:outline-none active:scale-95"
+                aria-label="Previous speaker"
+                @click="prev"
+            >
+                <svg
+                    class="h-4 w-4"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M15 19l-7-7 7-7"
+                    />
+                </svg>
+            </button>
+            <button
+                type="button"
+                class="pill-container h-10 w-10 justify-center text-neutral-300 transition-all hover:scale-110 hover:text-white focus:outline-none active:scale-95"
+                aria-label="Next speaker"
+                @click="next"
+            >
+                <svg
+                    class="h-4 w-4"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M9 5l7 7-7 7"
+                    />
+                </svg>
+            </button>
+        </div>
     </div>
 </template>
 
 <style>
-.carousel__slide--active {
-    opacity: 1;
-    transform: scale(1.1);
+.carousel__viewport {
+    overflow: hidden;
+    padding: 10px 0;
+}
+
+.carousel__track {
+    display: flex;
+    align-items: stretch;
+    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
+}
+
+.carousel__slide {
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    height: auto;
 }
 </style>
diff --git a/resources/js/Components/Home/Sponsor.vue b/resources/js/Components/Home/Sponsor.vue
index 8f89a4f5..b8eb8dab 100644
--- a/resources/js/Components/Home/Sponsor.vue
+++ b/resources/js/Components/Home/Sponsor.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { CompanyUser } from "@/Types/User";
-import { OhVueIcon } from "oh-vue-icons";
 import { ref } from "vue";
 import { VueFinalModal } from "vue-final-modal";
 import "vue-final-modal/style.css";
@@ -17,60 +16,89 @@ defineProps<Props>();
 </script>
 
 <template>
-    <!-- Sponsor logo thumbnail -->
-    <img
-        v-bind="$attrs"
-        class="col-span-2 h-full w-full cursor-pointer object-contain p-10 transition-transform duration-200 hover:scale-105"
-        :src="company?.profile_photo_url"
-        :alt="company?.name"
+    <button
+        type="button"
+        class="group flex h-28 w-48 items-center justify-center rounded-3xl border border-white/8 bg-black/50 p-5 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.015] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] focus:outline-none sm:h-32 sm:w-56 sm:p-6"
         @click="options.modelValue = true"
-    />
+    >
+        <img
+            :src="company?.profile_photo_url"
+            :alt="company?.name"
+            class="max-h-14 max-w-[85%] object-contain opacity-85 brightness-95 transition-all duration-300 ease-out group-hover:scale-105 group-hover:opacity-100 group-hover:brightness-110 sm:max-h-16"
+        />
+    </button>
 
-    <!-- Modal -->
     <VueFinalModal
         v-model="options.modelValue"
-        class="flex items-center justify-center"
-        overlay-class="bg-[rgba(0,0,0,0.7)]! backdrop-blur-xs"
+        class="z-50 flex items-center justify-center p-4"
+        overlay-class="bg-black/75 backdrop-blur-sm"
         content-class="
-      max-w-xl min-w-[20em] mx-4 p-8 gap-7
-      rounded-2xl bg-2025-blue text-white
-      border-0 ring-1 ring-white/10 shadow-none bg-clip-padding outline-hidden
-      flex flex-col items-center justify-center
-    "
+            relative w-full max-w-lg rounded-3xl border border-white/10
+            bg-[#111215] p-6 sm:p-8 text-white backdrop-blur-2xl shadow-none
+            flex flex-col items-center gap-6
+        "
     >
-        <!-- Company logo-->
+        <button
+            type="button"
+            class="pill-container absolute top-4 right-4 h-8 w-8 justify-center text-neutral-400 transition-colors hover:text-white"
+            aria-label="Close modal"
+            @click="options.modelValue = false"
+        >
+            <svg
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M6 18L18 6M6 6l12 12"
+                />
+            </svg>
+        </button>
+
         <img
             :src="company?.profile_photo_url"
             :alt="company?.name"
-            class="mx-auto block h-auto max-w-[18em] object-contain p-3"
+            class="mt-2 h-16 max-w-[70%] object-contain"
         />
 
-        <!-- Text content -->
-        <div
-            class="flex w-full max-w-prose flex-col items-center gap-4 text-center"
-        >
-            <a
-                v-if="company?.usertype?.social_media?.website"
-                class="text-2xl font-bold underline decoration-white transition hover:text-gray-200"
-                :href="company.usertype.social_media.website"
-                target="_blank"
-            >
-                {{ company.name }}
-                <OhVueIcon
-                    class="mb-[2px] ml-1"
-                    name="io-open"
-                    fill="white"
-                    scale="1.1"
-                />
-            </a>
-            <span v-else class="text-2xl font-bold underline decoration-white">
-                {{ company?.name }}
-            </span>
+        <div class="flex w-full flex-col items-center gap-4 text-center">
+            <div class="flex flex-wrap items-center justify-center gap-3">
+                <h3 class="text-xl font-bold text-white">
+                    {{ company?.name }}
+                </h3>
+                <a
+                    v-if="company?.usertype?.social_media?.website"
+                    :href="company.usertype.social_media.website"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="pill-container pill-item gap-1.5 px-3 py-1 text-xs font-medium text-neutral-300 hover:text-white"
+                >
+                    <span>Website</span>
+                    <svg
+                        class="h-3.5 w-3.5"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                        />
+                    </svg>
+                </a>
+            </div>
 
             <div
-                class="prose prose-invert text-justify leading-relaxed wrap-break-word max-md:max-h-96 max-md:overflow-y-auto"
+                v-if="company?.usertype?.description_html"
+                class="prose prose-invert prose-sm max-h-72 w-full overflow-y-auto px-2 text-justify leading-relaxed text-neutral-300"
                 v-html="company?.usertype?.description_html"
-            ></div>
+            />
         </div>
     </VueFinalModal>
 </template>
diff --git a/resources/js/Components/Home/SponsorBanner.vue b/resources/js/Components/Home/SponsorBanner.vue
index b3408c26..ccc711bc 100644
--- a/resources/js/Components/Home/SponsorBanner.vue
+++ b/resources/js/Components/Home/SponsorBanner.vue
@@ -1,142 +1,44 @@
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import { Carousel, Slide } from "vue3-carousel";
 import Sponsor from "./Sponsor.vue";
 import type SponsorType from "@/Types/Sponsor";
 import type { CompanyUser } from "@/Types/User";
-import { OhVueIcon } from "oh-vue-icons";
 
-const carousel = ref<typeof Carousel | null>(null);
-const next = () => carousel.value?.next();
-const prev = () => carousel.value?.prev();
-
-const props = defineProps<{
+defineProps<{
     sponsors: SponsorType[];
     color: string;
     title: string;
     idx: number;
 }>();
-
-const sizes = ["max-h-72", "max-h-56", "max-h-40"];
-const size = computed(() => sizes[props.idx % sizes.length]);
 </script>
 
 <template>
-    <!-- Desktop -->
-    <section
-        class="relative flex w-full flex-col items-center gap-8 overflow-hidden rounded-2xl border-[3px] bg-white/5 p-10 shadow-[0_0_40px_-12px_rgba(255,255,255,0.18)] backdrop-blur-xs max-lg:hidden"
-        :style="{ '--tier': color, borderColor: 'var(--tier)' }"
-    >
-        <h3 class="text-3xl font-bold" :style="{ color: 'var(--tier)' }">
-            {{ title }}
-        </h3>
+    <div class="w-full">
+        <div class="mb-6 flex items-center justify-center">
+            <div class="pill-container gap-2.5 px-4 py-1.5 shadow-none">
+                <h3
+                    class="text-xs font-semibold tracking-wider text-neutral-200 uppercase"
+                >
+                    {{ title }}
+                </h3>
+            </div>
+        </div>
 
         <div
             v-if="sponsors.length"
-            class="grid w-full justify-items-center gap-10"
-            :style="{
-                gridTemplateColumns: `repeat(auto-fit, minmax(5em, 1fr))`,
-            }"
+            class="flex flex-wrap items-center justify-center gap-4 sm:gap-6"
         >
             <Sponsor
                 v-for="sponsor in sponsors"
                 :key="sponsor.id"
                 :company="sponsor.company?.user as CompanyUser"
-                class="flex w-full max-w-[200px] items-center justify-center filter-[drop-shadow(0_0_0_rgba(0,0,0,0))] transition-transform duration-300 hover:scale-105 hover:drop-shadow-[0_8px_20px_rgba(255,255,255,0.28)]"
-                :style="{
-                    '--halo': `color-mix(in srgb, ${color} 40%, white 0%)`,
-                }"
-            />
-        </div>
-        <p v-else class="text-2xl font-semibold text-white/80 italic">
-            Em breve...
-        </p>
-    </section>
-    <!-- Mobile -->
-    <section
-        v-if="sponsors.length"
-        class="relative -mx-[calc(50vw-50%)] flex w-screen flex-col items-center gap-6 overflow-hidden border-t-[3px] border-b-[3px] border-white/20 bg-white/5 px-4 py-10 backdrop-blur-xs lg:hidden"
-        :style="{ '--tier': color, borderColor: 'var(--tier)' }"
-    >
-        <h3
-            class="mb-4 text-center text-2xl font-bold"
-            :style="{ color: 'var(--tier)' }"
-        >
-            {{ title }}
-        </h3>
-
-        <!-- Single sponsor -->
-        <div v-if="sponsors.length === 1" class="flex w-full justify-center">
-            <Sponsor
-                :class="[size]"
-                :company="sponsors[0].company?.user as CompanyUser"
-                class="transition-transform duration-300 hover:scale-105 hover:drop-shadow-[0_8px_20px_rgba(255,255,255,0.28)]"
             />
         </div>
-
-        <!-- Multiple sponsors -->
-        <template v-else>
-            <div class="relative w-full overflow-hidden">
-                <Carousel
-                    ref="carousel"
-                    :wrap-around="true"
-                    :autoplay="2500"
-                    snap-align="center"
-                    :items-to-show="1"
-                    :transition="600"
-                    class="w-full overflow-hidden"
-                >
-                    <Slide v-for="sponsor in sponsors" :key="sponsor.id">
-                        <div
-                            class="flex h-72 items-center justify-center sm:h-88"
-                            :class="[size]"
-                        >
-                            <Sponsor
-                                :company="sponsor.company?.user as CompanyUser"
-                                class="filter-[drop-shadow(0_0_0_rgba(0,0,0,0))] transition-transform duration-300 hover:scale-105 hover:drop-shadow-[0_8px_20px_rgba(255,255,255,0.28)]"
-                            />
-                        </div>
-                    </Slide>
-                </Carousel>
-
-                <!-- Controls -->
-                <button
-                    class="absolute top-1/2 left-3 -translate-y-1/2 text-white opacity-80 transition hover:opacity-100"
-                    @click="prev"
-                >
-                    <OhVueIcon name="io-arrow-back" scale="2" />
-                </button>
-                <button
-                    class="absolute top-1/2 right-3 -translate-y-1/2 text-white opacity-80 transition hover:opacity-100"
-                    @click="next"
-                >
-                    <OhVueIcon name="io-arrow-forward" scale="2" />
-                </button>
+        <div v-else class="flex justify-center">
+            <div
+                class="pill-container px-6 py-2.5 font-mono text-xs text-neutral-500"
+            >
+                Em breve...
             </div>
-        </template>
-    </section>
+        </div>
+    </div>
 </template>
-
-<style scoped>
-.max-h-72 {
-    max-height: 18rem;
-}
-.max-h-56 {
-    max-height: 14rem;
-}
-.max-h-40 {
-    max-height: 10rem;
-}
-
-@media (max-width: 640px) {
-    .max-h-72 {
-        max-height: 16rem;
-    }
-    .max-h-56 {
-        max-height: 12rem;
-    }
-    .max-h-40 {
-        max-height: 9rem;
-    }
-}
-</style>
diff --git a/resources/js/Components/NavLink.vue b/resources/js/Components/NavLink.vue
index 0dfa6f84..e5ef9e22 100644
--- a/resources/js/Components/NavLink.vue
+++ b/resources/js/Components/NavLink.vue
@@ -5,19 +5,33 @@ import { Link } from "@inertiajs/vue3";
 interface Props {
     href: string;
     active?: boolean;
+    as?: "a" | "button";
 }
 
 const props = defineProps<Props>();
 
+const isExternalOrAnchor = computed(() => {
+    return (
+        props.as === "a" ||
+        props.href.startsWith("#") ||
+        props.href.startsWith("/#") ||
+        props.href.startsWith("http")
+    );
+});
+
 const classes = computed(() => {
-    return props.active
-        ? "inline-flex items-center px-1 py-1 text-lg lg:text-lg font-medium leading-5 text-2025-white focus:outline-hidden focus:border-2023-teal transition duration-150 ease-in-out"
-        : "inline-flex items-center px-1 py-1 text-lg lg:text-lg font-medium leading-5 text-2025-white hover:border-2023-teal focus:outline-hidden focus:border-2023-teal transition duration-150 ease-in-out";
+    return props.active ? "pill-item pill-item-active" : "pill-item";
 });
 </script>
 
 <template>
-    <Link :href="href" :class="classes">
+    <a v-if="isExternalOrAnchor" :href="href" :class="classes">
+        <slot />
+    </a>
+    <button v-else-if="as === 'button'" type="button" :class="classes">
+        <slot />
+    </button>
+    <Link v-else :href="href" :class="classes">
         <slot />
     </Link>
 </template>
diff --git a/resources/js/Components/Navbar.vue b/resources/js/Components/Navbar.vue
index fc3dcfae..9d443e52 100644
--- a/resources/js/Components/Navbar.vue
+++ b/resources/js/Components/Navbar.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { Link, usePage, router } from "@inertiajs/vue3";
+import { route, type HasQueryParam } from "ziggy-js";
+import { isAdmin as checkIsAdmin, type User } from "@/Types/User";
+import type Competition from "@/Types/Competition";
 import NavLink from "@/Components/NavLink.vue";
 import Dropdown from "@/Components/Dropdown.vue";
 import DropdownTrigger from "@/Components/DropdownTrigger.vue";
 import DropdownLink from "@/Components/DropdownLink.vue";
 import HamburgerMenu from "@/Components/HamburgerMenu.vue";
-import { ref, onMounted, onUnmounted } from "vue";
-import { route, type HasQueryParam } from "ziggy-js";
-import { usePage } from "@inertiajs/vue3";
-import { OhVueIcon } from "oh-vue-icons";
-import { isAdmin as checkIsAdmin } from "@/Types/User";
 
-interface Route {
+interface RouteItem {
     label: string;
+    href?: string;
     _query?: HasQueryParam["_query"];
 }
-type Routes = Record<string, Route>;
+
+type Routes = Record<string, RouteItem>;
 
 const homeSections: Routes = {
-    aboutus: {
-        label: "Sobre nós",
-    },
-    speakers: { label: "Oradores" },
-    sponsors: { label: "Patrocínios" },
+    aboutus: { label: "Sobre nós", href: "/#aboutus" },
+    speakers: { label: "Oradores", href: "/#speakers" },
+    sponsors: { label: "Patrocínios", href: "/#sponsors" },
 };
 
 const pageRoutes: Routes = {
@@ -30,27 +30,55 @@ const pageRoutes: Routes = {
     team: { label: "Equipa" },
 };
 
-const editionRoutes = [2024, 2023, 2022, 2021, 2020, 2019, 2018];
+const editions = [2026, 2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018];
+const currentEdition = 2026;
+
+const page = usePage();
 
-const { props } = usePage();
+const user = computed(() => page.props.auth?.user as User | undefined);
+const isAdmin = computed(() => checkIsAdmin(user.value));
+const competitions = computed<Competition[]>(
+    () => (page.props.competitions as Competition[] | undefined) || [],
+);
 
-const options = {
+const isScrolled = ref(false);
+const isMobileMenuOpen = ref(false);
+
+const options = computed(() => ({
     pages: pageRoutes,
-    competitions: props.competitions,
-    editions: editionRoutes,
+    homeSections,
+    competitions: competitions.value,
+    editions,
+    currentEdition,
+}));
+
+const handleScroll = () => {
+    isScrolled.value = window.scrollY > 15;
 };
 
-const isAdmin = checkIsAdmin(props.auth.user);
+const logout = () => {
+    router.post(route("logout"));
+};
 
-const isScrolled = ref(false);
-const isMenuOpen = ref(false);
+const isCurrentRoute = (name: string) => {
+    try {
+        return route().current(name);
+    } catch {
+        return false;
+    }
+};
 
-const handleScroll = () => {
-    isScrolled.value = window.scrollY > 20; // adjust threshold
+const getPageRoute = (name: string, query?: HasQueryParam["_query"]) => {
+    try {
+        return route(route().has(name) ? name : "home", { _query: query });
+    } catch {
+        return "/";
+    }
 };
 
 onMounted(() => {
-    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
 });
 
 onUnmounted(() => {
@@ -59,150 +87,300 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <nav
-        :class="[
-            'absolute top-0 left-0 flex w-full py-2',
-            isScrolled
-                ? 'backdrop-blur-3xl'
-                : isMenuOpen
-                  ? 'bg-transparent'
-                  : 'bg-transparent',
-        ]"
+    <header
+        class="sticky top-0 z-50 w-full bg-transparent transition-all duration-300 ease-in-out"
     >
-        <Dropdown align="center" width="32" class="ml-10 max-md:hidden">
-            <template #trigger>
-                <DropdownTrigger class="group">
-                    <a :href="route('home')">
-                        <img
-                            class="w-24 max-md:w-16"
-                            src="/images/cy-sinf-small.svg"
-                            alt="Stylized SINF logo"
-                        />
-                    </a>
-                </DropdownTrigger>
-            </template>
-            <template #content>
-                <template v-for="({ label }, page) in homeSections" :key="page">
-                    <DropdownLink
-                        :href="page !== 'home' ? `/#${page}` : route(page)"
-                    >
+        <div
+            class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8"
+        >
+            <div class="pill-container">
+                <Link
+                    :href="route('home')"
+                    class="group flex items-center rounded-full px-2.5 py-1.5 transition-all duration-150 hover:bg-white/8 active:scale-95"
+                >
+                    <img
+                        class="h-4 w-auto transition-all duration-200 group-hover:brightness-110 group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.3)]"
+                        src="/images/sinf-2026-sm.svg"
+                        alt="SINF Logo"
+                    />
+                </Link>
+            </div>
+
+            <nav class="pill-container hidden gap-0.5 md:flex">
+                <template
+                    v-for="({ label, href }, key) in homeSections"
+                    :key="key"
+                >
+                    <NavLink :href="href || '/'">
                         {{ label }}
-                    </DropdownLink>
+                    </NavLink>
                 </template>
-            </template>
-        </Dropdown>
-        <NavLink :href="route('home')" class="md:hidden">
-            <img
-                class="ml-3 w-24 p-2 max-md:w-16"
-                src="/images/cy-sinf-small.svg"
-                alt="Stylized SINF logo"
-            />
-        </NavLink>
-        <div class="ml-4 hidden w-full min-w-fit md:flex lg:gap-4">
-            <template
-                v-for="({ label, _query }, page) in pageRoutes"
-                :key="page"
-            >
-                <NavLink
-                    class="text-text-color hover:text-text-color"
-                    :href="
-                        route(route().has(page) ? page : 'home', {
-                            _query,
-                        })
-                    "
-                    :active="page === route().current()"
+
+                <template
+                    v-for="({ label, _query }, pageKey) in pageRoutes"
+                    :key="pageKey"
                 >
-                    {{ label }}
-                </NavLink>
-            </template>
-            <Dropdown
-                v-if="props.competitions.length > 0"
-                align="center"
-                width="32"
-            >
-                <template #trigger>
-                    <DropdownTrigger class="text-text-color"
-                        >Competições</DropdownTrigger
+                    <NavLink
+                        :href="getPageRoute(pageKey, _query)"
+                        :active="isCurrentRoute(pageKey)"
                     >
+                        {{ label }}
+                    </NavLink>
                 </template>
-                <template #content>
-                    <template
-                        v-for="competition in props.competitions"
-                        :key="competition.id"
-                    >
-                        <DropdownLink
-                            :href="
-                                route('competition.show', {
-                                    competition: competition.slug,
-                                })
-                            "
-                        >
-                            {{ competition.name }}
-                        </DropdownLink>
-                    </template>
-                </template>
-            </Dropdown>
-        </div>
 
-        <div class="mr-4 flex w-full justify-end">
-            <div class="hidden h-full gap-1 md:flex lg:gap-4">
-                <Dropdown align="center" width="20">
-                    <template #trigger>
-                        <DropdownTrigger class="text-text-color">
-                            2025
+                <Dropdown
+                    v-if="competitions.length > 0"
+                    align="center"
+                    width="52"
+                >
+                    <template #trigger="{ open }">
+                        <DropdownTrigger :active="open">
+                            <span>Competições</span>
+                            <svg
+                                class="h-3.5 w-3.5 text-neutral-400 transition-transform duration-200"
+                                :class="{ 'rotate-180 text-white': open }"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M19 9l-7 7-7-7"
+                                />
+                            </svg>
                         </DropdownTrigger>
                     </template>
+
                     <template #content>
-                        <template
-                            v-for="edition in editionRoutes"
-                            :key="edition"
-                        >
+                        <template v-for="comp in competitions" :key="comp.id">
                             <DropdownLink
-                                as="a"
-                                :href="`https://${edition}.sinf.pt`"
+                                :href="
+                                    route('competition.show', {
+                                        competition: comp.slug,
+                                    })
+                                "
                             >
-                                {{ edition }}
+                                <span>{{ comp.name }}</span>
+                                <svg
+                                    class="h-3.5 w-3.5 text-neutral-500 opacity-0 transition-all duration-150 group-hover:translate-x-0.5 group-hover:text-white group-hover:opacity-100"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    stroke="currentColor"
+                                >
+                                    <path
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M9 5l7 7-7 7"
+                                    />
+                                </svg>
                             </DropdownLink>
                         </template>
                     </template>
                 </Dropdown>
-            </div>
+            </nav>
 
-            <div class="ml-2 flex items-center lg:mx-4">
-                <template v-if="$page.props.auth.user">
-                    <Dropdown align="right" :width="isAdmin ? '32' : '20'">
-                        <template #trigger>
-                            <img
-                                class="h-10 w-10 cursor-pointer rounded-full object-cover"
-                                :src="$page.props.auth.user.profile_photo_url"
-                                :alt="$page.props.auth.user.name"
-                            />
+            <div class="flex items-center gap-2.5">
+                <div class="pill-container hidden md:flex">
+                    <Dropdown align="right" width="48">
+                        <template #trigger="{ open }">
+                            <button
+                                type="button"
+                                class="flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium text-neutral-300 transition-all duration-150 hover:bg-white/8 hover:text-white focus:outline-none"
+                                :class="{
+                                    'bg-white/8 text-white': open,
+                                }"
+                            >
+                                <span>{{ currentEdition }}</span>
+                                <svg
+                                    class="h-3 w-3 text-neutral-400 transition-transform duration-200"
+                                    :class="{ 'rotate-180 text-white': open }"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    stroke="currentColor"
+                                >
+                                    <path
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M19 9l-7 7-7-7"
+                                    />
+                                </svg>
+                            </button>
                         </template>
+
                         <template #content>
-                            <DropdownLink :href="route('profile.show')">
-                                Perfil
-                            </DropdownLink>
-                            <DropdownLink
-                                v-if="isAdmin"
-                                :href="route('admin.index')"
+                            <div class="p-1">
+                                <div
+                                    class="px-2.5 py-1 text-[10px] font-semibold text-neutral-500 uppercase"
+                                >
+                                    Edições Anteriores
+                                </div>
+                                <div class="mt-1 grid grid-cols-2 gap-1">
+                                    <template
+                                        v-for="edition in editions"
+                                        :key="edition"
+                                    >
+                                        <a
+                                            v-if="edition !== currentEdition"
+                                            :href="`https://${edition}.sinf.pt`"
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            class="flex items-center justify-center gap-1 rounded-lg px-2 py-1.5 text-xs font-medium text-neutral-300 transition-colors hover:bg-white/8 hover:text-white"
+                                        >
+                                            <span>{{ edition }}</span>
+                                        </a>
+                                        <div
+                                            v-else
+                                            class="flex items-center justify-center gap-1 rounded-lg bg-white/8 px-2 py-1.5 text-xs font-semibold text-white"
+                                        >
+                                            <span>{{ edition }}</span>
+                                        </div>
+                                    </template>
+                                </div>
+                            </div>
+                        </template>
+                    </Dropdown>
+                </div>
+
+                <div v-if="user" class="pill-container">
+                    <Dropdown align="right" width="56">
+                        <template #trigger="{ open }">
+                            <button
+                                type="button"
+                                class="flex items-center gap-2 rounded-full p-0.5 transition-all hover:bg-white/8 focus:outline-none"
+                                :class="{ 'bg-white/8': open }"
                             >
-                                Administração
-                            </DropdownLink>
-                            <DropdownLink :href="route('logout')" method="post">
-                                Logout
-                            </DropdownLink>
+                                <img
+                                    class="h-7 w-7 rounded-full object-cover ring-1 ring-white/20 transition-all hover:ring-white/50"
+                                    :src="user.profile_photo_url"
+                                    :alt="user.name"
+                                />
+                            </button>
+                        </template>
+
+                        <template #content>
+                            <div class="border-b border-white/8 px-3 py-2.5">
+                                <p
+                                    class="truncate text-xs font-semibold text-white"
+                                >
+                                    {{ user.name }}
+                                </p>
+                                <p
+                                    class="truncate text-[11px] text-neutral-400"
+                                >
+                                    {{ user.email }}
+                                </p>
+                                <span
+                                    v-if="isAdmin"
+                                    class="mt-1.5 inline-block rounded-md border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-semibold text-amber-300"
+                                >
+                                    Administrador
+                                </span>
+                            </div>
+
+                            <div class="mt-1 space-y-0.5">
+                                <DropdownLink :href="route('profile.show')">
+                                    <span class="flex items-center gap-2.5">
+                                        <svg
+                                            class="h-4 w-4 text-neutral-400"
+                                            fill="none"
+                                            viewBox="0 0 24 24"
+                                            stroke="currentColor"
+                                        >
+                                            <path
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                stroke-width="2"
+                                                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                                            />
+                                        </svg>
+                                        <span>Perfil</span>
+                                    </span>
+                                </DropdownLink>
+
+                                <DropdownLink
+                                    v-if="isAdmin"
+                                    :href="route('admin.index')"
+                                >
+                                    <span class="flex items-center gap-2.5">
+                                        <svg
+                                            class="h-4 w-4 text-neutral-400"
+                                            fill="none"
+                                            viewBox="0 0 24 24"
+                                            stroke="currentColor"
+                                        >
+                                            <path
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                stroke-width="2"
+                                                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+                                            />
+                                        </svg>
+                                        <span>Administração</span>
+                                    </span>
+                                </DropdownLink>
+
+                                <div class="border-t border-white/6 pt-1">
+                                    <button
+                                        type="button"
+                                        class="group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl px-3 py-2 text-left text-xs font-medium text-red-400 transition-colors hover:bg-red-500/10 hover:text-red-300 focus:outline-none"
+                                        @click="logout"
+                                    >
+                                        <span class="flex items-center gap-2.5">
+                                            <svg
+                                                class="h-4 w-4 text-red-400"
+                                                fill="none"
+                                                viewBox="0 0 24 24"
+                                                stroke="currentColor"
+                                            >
+                                                <path
+                                                    stroke-linecap="round"
+                                                    stroke-linejoin="round"
+                                                    stroke-width="2"
+                                                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+                                                />
+                                            </svg>
+                                            <span>Logout</span>
+                                        </span>
+                                    </button>
+                                </div>
+                            </div>
                         </template>
                     </Dropdown>
-                </template>
-                <template v-else>
-                    <a :href="route('login')">
-                        <OhVueIcon name="io-person" scale="1.7" fill="#ffffff">
-                        </OhVueIcon>
-                    </a>
-                </template>
-            </div>
+                </div>
+
+                <div v-else class="pill-container">
+                    <Link
+                        :href="route('login')"
+                        class="group inline-flex items-center gap-2 rounded-full px-3.5 py-1.5 text-xs font-medium text-neutral-300 transition-all duration-150 hover:bg-white/8 hover:text-white active:scale-95"
+                    >
+                        <span>Entrar</span>
+                        <svg
+                            class="h-3.5 w-3.5 text-neutral-400 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-white"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M14 5l7 7m0 0l-7 7m7-7H3"
+                            />
+                        </svg>
+                    </Link>
+                </div>
 
-            <HamburgerMenu v-model="isMenuOpen" :options="options" />
+                <HamburgerMenu
+                    v-model="isMobileMenuOpen"
+                    :options="options"
+                    :user="user"
+                    :is-admin="isAdmin"
+                />
+            </div>
         </div>
-    </nav>
+    </header>
 </template>
diff --git a/resources/js/Components/ResponsiveNavLink.vue b/resources/js/Components/ResponsiveNavLink.vue
index 0e6c2722..0d8ca8cf 100644
--- a/resources/js/Components/ResponsiveNavLink.vue
+++ b/resources/js/Components/ResponsiveNavLink.vue
@@ -5,24 +5,33 @@ import { Link } from "@inertiajs/vue3";
 interface Props {
     active?: boolean;
     href: string;
-    as?: "button";
+    as?: "button" | "a";
+    method?: "get" | "post";
 }
 
 const props = defineProps<Props>();
 
+const isExternalOrAnchor = computed(() => {
+    if (props.method === "post" || props.as === "button") return false;
+    return (
+        props.as === "a" ||
+        props.href.startsWith("#") ||
+        props.href.startsWith("/#")
+    );
+});
+
 const classes = computed(() => {
     return props.active
-        ? "flex flex-col w-fit py-4 bg-transparent underline text-white text-center font-medium cursor-pointer focus:outline-hidden transition duration-150 ease-in-out"
-        : "flex flex-col w-fit py-4 bg-transparent hover:underline focus:underline text-white text-center font-medium leading-5 cursor-pointer focus:outline-hidden transition duration-150 ease-in-out";
+        ? "flex w-full items-center justify-between rounded-xl bg-white/[0.12] px-3.5 py-3 text-sm font-semibold text-white shadow-[inset_0_1px_0_0_rgba(255,255,255,0.2)] transition-all duration-150 active:scale-[0.99] focus:outline-none"
+        : "flex w-full items-center justify-between rounded-xl px-3.5 py-3 text-sm font-medium text-neutral-300 transition-all duration-150 hover:bg-white/[0.08] hover:text-white active:scale-[0.99] focus:outline-none";
 });
 </script>
 
 <template>
-    <button v-if="as == 'button'" :class="classes">
+    <a v-if="isExternalOrAnchor" :href="href" :class="classes">
         <slot />
-    </button>
-
-    <Link v-else :href="href" :class="classes">
+    </a>
+    <Link v-else :href="href" :as="as" :method="method" :class="classes">
         <slot />
     </Link>
 </template>
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 79754904..5bc950ad 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -2,7 +2,6 @@
 import { Head } from "@inertiajs/vue3";
 import Navbar from "@/Components/Navbar.vue";
 import Footer from "@/Components/Footer.vue";
-import Banner from "@/Components/Banner.vue";
 
 interface Props {
     title: string;
@@ -12,21 +11,35 @@ defineProps<Props>();
 </script>
 
 <template>
-    <div>
+    <div class="relative min-h-screen bg-black text-white">
         <Head :title="title" />
-        <div class="sticky top-0 z-30">
-            <Navbar />
+
+        <div
+            class="pointer-events-none fixed inset-0 z-0 overflow-hidden"
+            aria-hidden="true"
+        >
+            <div
+                class="glow-orb-crimson-1 absolute top-[-20%] right-[-15%] h-[85vh] w-[80vw] rounded-[100%] blur-[70px] will-change-transform sm:blur-[100px]"
+            />
+
+            <div
+                class="glow-orb-purple-1 absolute bottom-[-20%] left-[-15%] h-[85vh] w-[80vw] rounded-[100%] blur-[70px] will-change-transform sm:blur-[100px]"
+            />
+
+            <div
+                class="glow-orb-crimson-2 absolute right-[-5%] bottom-[-10%] h-[65vh] w-[60vw] rounded-[100%] blur-[60px] will-change-transform sm:blur-[90px]"
+            />
+
+            <div
+                class="glow-orb-purple-2 absolute top-[-10%] left-[-5%] h-[65vh] w-[60vw] rounded-[100%] blur-[60px] will-change-transform sm:blur-[90px]"
+            />
         </div>
-        <main class="bg-2025-bg-gradient min-h-screen py-24">
-            <Banner />
+
+        <main class="relative z-10 min-h-screen">
+            <Navbar />
+            <!-- <Banner /> -->
             <slot />
+            <Footer class="relative z-10" />
         </main>
-        <Footer />
     </div>
 </template>
-
-<style>
-html {
-    scroll-behavior: smooth;
-}
-</style>
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
index 97d5ecb3..05d713e6 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -1,291 +1,309 @@
 <script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { router } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import SpeakersCarousel from "@/Components/Home/SpeakersCarousel.vue";
 import SponsorBanner from "@/Components/Home/SponsorBanner.vue";
-import EnrollSection from "@/Components/Home/EnrollSection.vue";
 import InfoPopup from "@/Components/Home/InfoPopup.vue";
 import type Edition from "@/Types/Edition";
 import type EventDay from "@/Types/EventDay";
 import type { User } from "@/Types/User";
-import { OhVueIcon } from "oh-vue-icons";
 import type SponsorTier from "@/Types/SponsorTier";
-import { ref, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
 
-const sections = ref<HTMLElement[]>([]);
-const currentIdx = ref(0);
+interface Props {
+    edition: Edition;
+    sponsorTiers: SponsorTier[];
+    speakers: User[];
+    days: EventDay[];
+    activityCount: number;
+    talkCount: number;
+    standCount: number;
+    canEnroll: boolean;
+}
 
-const atBottom = computed(() => {
-    return (
-        sections.value.length > 0 &&
-        currentIdx.value >= sections.value.length - 1
-    );
-});
+defineProps<Props>();
 
-function getSortedSections(): HTMLElement[] {
-    const list = Array.from(document.querySelectorAll<HTMLElement>("section"));
-    return list.sort((a, b) => (a.offsetTop ?? 0) - (b.offsetTop ?? 0));
-}
+const isAtBottom = ref(false);
+
+function updateScrollState() {
+    const scrollY = window.scrollY || window.pageYOffset;
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
 
-function scrollToSection(idx: number) {
-    const el = sections.value[idx];
-    if (!el) return;
-    el.scrollIntoView({ behavior: "smooth", block: "start" });
+    isAtBottom.value = scrollY + windowHeight >= documentHeight - 60;
 }
 
-function goNextOrTop() {
-    if (atBottom.value) {
+function handleQuickScroll() {
+    if (isAtBottom.value) {
         window.scrollTo({ top: 0, behavior: "smooth" });
         return;
     }
-    const next = Math.min(currentIdx.value + 1, sections.value.length - 1);
-    scrollToSection(next);
-}
-
-let observer: IntersectionObserver | null = null;
-let savedOnResize: (() => void) | null = null;
-
-function setupObserver() {
-    if (observer) observer.disconnect();
-
-    observer = new IntersectionObserver(
-        (entries) => {
-            const visible = entries
-                .filter((e) => e.isIntersecting)
-                .sort(
-                    (a, b) =>
-                        (b.intersectionRatio ?? 0) - (a.intersectionRatio ?? 0),
-                );
 
-            if (visible[0]) {
-                const idx = sections.value.findIndex(
-                    (s) => s === visible[0].target,
-                );
-                if (idx >= 0) currentIdx.value = idx;
-            } else {
-                const y = window.scrollY + window.innerHeight * 0.35;
-                let nearest = 0;
-                let minDelta = Number.POSITIVE_INFINITY;
-                sections.value.forEach((s, i) => {
-                    const top = s.getBoundingClientRect().top + window.scrollY;
-                    const delta = Math.abs(top - y);
-                    if (delta < minDelta) {
-                        minDelta = delta;
-                        nearest = i;
-                    }
-                });
-                currentIdx.value = nearest;
-            }
-        },
-        {
-            root: null,
-            threshold: [0.25, 0.5, 0.75],
-        },
+    const sections = Array.from(
+        document.querySelectorAll<HTMLElement>("section"),
     );
+    if (!sections.length) return;
 
-    sections.value.forEach((s) => observer!.observe(s));
-}
+    const currentY = window.scrollY || window.pageYOffset;
+    const navOffset = 70;
 
-onMounted(async () => {
-    await nextTick();
-    sections.value = getSortedSections();
-    setupObserver();
+    const nextSection = sections.find((section) => {
+        const top = section.getBoundingClientRect().top + currentY;
+        return top > currentY + navOffset + 20;
+    });
 
-    const onResize = () => {
-        sections.value = getSortedSections();
-        setupObserver();
-    };
-    window.addEventListener("resize", onResize);
-    window.addEventListener("orientationchange", onResize);
+    if (nextSection) {
+        const targetY =
+            nextSection.getBoundingClientRect().top + currentY - navOffset;
+        window.scrollTo({ top: targetY, behavior: "smooth" });
+    } else {
+        window.scrollTo({
+            top: document.documentElement.scrollHeight,
+            behavior: "smooth",
+        });
+    }
+}
 
-    savedOnResize = onResize;
+onMounted(() => {
+    updateScrollState();
+    window.addEventListener("scroll", updateScrollState, { passive: true });
+    window.addEventListener("resize", updateScrollState, { passive: true });
 });
 
 onBeforeUnmount(() => {
-    if (observer) observer.disconnect();
-    if (savedOnResize) {
-        window.removeEventListener("resize", savedOnResize);
-        window.removeEventListener("orientationchange", savedOnResize);
-        savedOnResize = null;
-    }
+    window.removeEventListener("scroll", updateScrollState);
+    window.removeEventListener("resize", updateScrollState);
 });
-
-interface Props {
-    edition: Edition;
-    sponsorTiers: SponsorTier[];
-    speakers: User[];
-    days: EventDay[];
-    activityCount: number;
-    talkCount: number;
-    standCount: number;
-    canEnroll: boolean;
-}
-
-defineProps<Props>();
 </script>
 
 <template>
     <AppLayout title="Home">
         <InfoPopup v-if="$page.props.auth.user && canEnroll" />
+
         <button
-            v-if="canEnroll"
             type="button"
-            aria-label="Scroll to next section"
-            class="group bg-2025-bg-green fixed right-12 bottom-10 z-50 grid h-12 w-12 place-items-center rounded-full text-white filter-[drop-shadow(0_0_0_rgba(0,0,0,0))] transition-transform duration-300 hover:scale-105 hover:drop-shadow-[0_8px_20px_rgba(255,255,255,0.28)] focus:outline-hidden"
-            @click="goNextOrTop"
+            :aria-label="
+                isAtBottom ? 'Scroll to top' : 'Scroll to next section'
+            "
+            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
+            @click="handleQuickScroll"
         >
-            <OhVueIcon
-                :name="atBottom ? 'io-arrow-up' : 'io-arrow-down'"
-                fill="white"
-            />
+            <svg
+                v-if="isAtBottom"
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 10l7-7m0 0l7 7m-7-7v18"
+                />
+            </svg>
+            <svg
+                v-else
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 14l-7 7m0 0l-7-7m7 7V3"
+                />
+            </svg>
         </button>
-        <!-- LOGO & DATE -->
+
         <section
-            class="relative flex min-h-screen flex-col content-center items-center justify-evenly gap-16 py-16"
+            class="relative flex min-h-[calc(100vh-5rem)] flex-col items-center justify-center gap-8 px-4 py-16 text-center"
         >
-            <img
-                id="svg-1"
-                class="animate-2023-maintenance-jump max-ml:hidden absolute left-[7%] w-36 opacity-50"
-                src="images/cy-sinf.svg"
-                alt="Stylized SINF logo"
-            />
-            <img
-                id="svg-2"
-                class="animate-2023-maintenance-jump max-ml:hidden absolute top-16 right-[7%] w-32 opacity-50"
-                src="images/rc-sinf.svg"
-                alt="Stylized SINF logo"
-            />
-            <img
-                id="svg-3"
-                class="animate-2023-maintenance-jump max-ml:hidden absolute right-[15%] bottom-24 w-24 opacity-50"
-                src="images/oc-sinf.svg"
-                alt="Stylized SINF logo"
-            />
-
             <div class="relative">
                 <img
-                    class="max-ml:w-[300px] w-96"
-                    src="images/sinf logo.png"
-                    alt="Stylized SINF logo"
+                    class="h-16 w-auto max-w-[85vw] object-contain drop-shadow-[0_0_20px_rgba(255,255,255,0.2)] transition-all duration-300 hover:brightness-110 sm:h-24 md:h-32"
+                    src="/images/sinf2026.svg"
+                    alt="Semana de Informática 2026"
                 />
             </div>
 
-            <p class="margin-0 text-text-color text-2xl font-bold">
-                21 a 24 de outubro
+            <p
+                class="text-lg font-medium text-neutral-300 sm:text-xl md:text-2xl"
+            >
+                16 a 19 de novembro
             </p>
 
-            <!-- CALL TO ACTION -->
-            <EnrollSection v-if="canEnroll" id="enroll-wrapper" />
+            <div v-if="canEnroll" class="pill-container">
+                <button
+                    type="button"
+                    class="pill-item px-6 py-2 text-sm font-semibold sm:text-base"
+                    @click="
+                        $page.props.auth.user
+                            ? router.put(route('enroll'))
+                            : router.get(route('register'))
+                    "
+                >
+                    Inscrever-me
+                </button>
+            </div>
         </section>
 
-        <!-- ABOUT US -->
         <section
-            class="relative my-8 grid grid-flow-row grid-cols-2 bg-white/5 text-justify backdrop-blur-xs max-lg:grid-flow-col max-lg:grid-cols-1 max-lg:grid-rows-2"
+            id="aboutus"
+            class="relative mx-auto max-w-5xl px-4 py-20 sm:px-6 lg:px-8"
         >
-            <h2
-                id="aboutus"
-                class="bg-2025-blue absolute -top-9 left-[calc(50%-88.2415px)] w-fit rounded-md p-3 text-3xl font-bold text-white"
-            >
-                Sobre nós
-            </h2>
-            <p class="p-20 text-lg text-white max-lg:pb-10">
-                {{ $t("homePage.aboutUsText1") }}
-            </p>
-            <p class="p-20 text-lg text-white max-lg:py-10">
-                {{ $t("homePage.aboutUsText2") }}
-            </p>
+            <div class="mb-10 flex justify-center">
+                <div class="pill-container">
+                    <span class="pill-item font-semibold text-white">
+                        Sobre nós
+                    </span>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+                <div
+                    class="rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.01] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8"
+                >
+                    <p
+                        class="text-justify text-base leading-relaxed text-neutral-300 sm:text-lg"
+                    >
+                        {{ $t("homePage.aboutUsText1") }}
+                    </p>
+                </div>
+                <div
+                    class="rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.01] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8"
+                >
+                    <p
+                        class="text-justify text-base leading-relaxed text-neutral-300 sm:text-lg"
+                    >
+                        {{ $t("homePage.aboutUsText2") }}
+                    </p>
+                </div>
+            </div>
         </section>
 
-        <!-- GENERAL INFO -->
-        <section class="max-xs:items-center relative flex flex-col py-24">
-            <p
-                class="bg-2025-blue-dark mr-[5px] flex w-fit place-self-center rounded-md p-3 text-2xl font-bold text-white"
-            >
-                Este ano temos
-            </p>
+        <section class="relative mx-auto max-w-5xl px-4 py-20 sm:px-6 lg:px-8">
+            <div class="mb-10 flex justify-center">
+                <div class="pill-container">
+                    <span class="pill-item font-semibold text-white">
+                        Este ano temos
+                    </span>
+                </div>
+            </div>
 
-            <template
-                v-if="
-                    days.length !== 0 ||
-                    standCount !== 0 ||
-                    talkCount !== 0 ||
-                    activityCount !== 0
-                "
-            >
+            <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-4">
                 <div
-                    class="text-text-color max-xs:grid-cols-1 mx-[10%] mt-10 grid gap-4 rounded-md border-0 bg-white/5 p-12 text-xl font-bold shadow-[0_0_40px_-12px_rgba(255,255,255,0.18)] ring-1 ring-white/10 filter-[drop-shadow(0_0_0_rgba(0,0,0,0))] backdrop-blur-xs transition-transform duration-300 hover:scale-105 hover:drop-shadow-[0_8px_20px_rgba(255,255,255,0.28)] focus:outline-hidden max-lg:grid-cols-2 md:flex md:flex-row md:items-center md:justify-around"
+                    v-if="days.length !== 0"
+                    class="group flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.02] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8"
                 >
-                    <span v-if="days.length !== 0" class="text-center"
-                        >{{ days.length }} dias</span
+                    <span
+                        class="text-3xl font-bold text-white transition-colors group-hover:text-neutral-100 sm:text-4xl"
                     >
-                    <span v-if="standCount !== 0" class="text-center"
-                        >{{ standCount }} bancas</span
+                        {{ days.length }}
+                    </span>
+                    <span
+                        class="mt-2 font-mono text-xs font-medium tracking-wider text-neutral-400 uppercase transition-colors group-hover:text-neutral-300"
                     >
-                    <span v-if="talkCount !== 0" class="text-center"
-                        >{{ talkCount }} palestras</span
+                        dias
+                    </span>
+                </div>
+
+                <div
+                    v-if="standCount !== 0"
+                    class="group flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.02] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8"
+                >
+                    <span
+                        class="text-3xl font-bold text-white transition-colors group-hover:text-neutral-100 sm:text-4xl"
                     >
-                    <span v-if="activityCount !== 0" class="text-center"
-                        >{{ activityCount }} atividades</span
+                        {{ standCount }}
+                    </span>
+                    <span
+                        class="mt-2 font-mono text-xs font-medium tracking-wider text-neutral-400 uppercase transition-colors group-hover:text-neutral-300"
                     >
+                        bancas
+                    </span>
                 </div>
-            </template>
-            <template v-else>
+
                 <div
-                    class="text-2023-teal max-xs:grid-cols-1 mx-[10%] flex items-center justify-center gap-4 border-[3px] bg-white/5 p-12 text-xl font-bold shadow-2xl shadow-[0_0_40px_-12px_rgba(255,255,255,0.18)] backdrop-blur-xs max-lg:grid-cols-2"
+                    v-if="talkCount !== 0"
+                    class="group flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.02] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8"
                 >
-                    Muitas novidades para ti! Está quase...
+                    <span
+                        class="text-3xl font-bold text-white transition-colors group-hover:text-neutral-100 sm:text-4xl"
+                    >
+                        {{ talkCount }}
+                    </span>
+                    <span
+                        class="mt-2 font-mono text-xs font-medium tracking-wider text-neutral-400 uppercase transition-colors group-hover:text-neutral-300"
+                    >
+                        palestras
+                    </span>
                 </div>
-            </template>
+
+                <div
+                    v-if="activityCount !== 0"
+                    class="group flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.02] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8"
+                >
+                    <span
+                        class="text-3xl font-bold text-white transition-colors group-hover:text-neutral-100 sm:text-4xl"
+                    >
+                        {{ activityCount }}
+                    </span>
+                    <span
+                        class="mt-2 font-mono text-xs font-medium tracking-wider text-neutral-400 uppercase transition-colors group-hover:text-neutral-300"
+                    >
+                        atividades
+                    </span>
+                </div>
+            </div>
         </section>
-        <!-- SPEAKERS -->
-        <section
-            id="speakers"
-            class="grid-rows-[repeat(3, 1fr)] my-10 mb-5 grid grid-cols-1 gap-10"
-        >
-            <p
-                class="bg-2025-blue-dark mr-[5px] flex w-fit place-self-center rounded-md p-3 text-2xl font-bold text-white"
-            >
-                Oradores
-            </p>
-            <template v-if="speakers.length != 0">
-                <SpeakersCarousel :speakers="speakers ?? []"></SpeakersCarousel>
+
+        <section id="speakers" class="relative w-full overflow-hidden py-20">
+            <div class="mb-10 flex justify-center px-4">
+                <div class="pill-container">
+                    <span class="pill-item font-semibold text-white">
+                        Oradores
+                    </span>
+                </div>
+            </div>
+
+            <template v-if="speakers.length !== 0">
+                <div class="w-full px-2 sm:px-4 md:px-6">
+                    <SpeakersCarousel :speakers="speakers" />
+                </div>
             </template>
-            <template v-else>
-                <p
-                    class="flex w-fit place-self-center text-2xl font-bold text-white"
-                >
+            <div v-else class="flex justify-center px-4">
+                <div class="pill-container px-6 py-3 text-sm text-neutral-400">
                     Em breve...
-                </p>
-            </template>
+                </div>
+            </div>
         </section>
-        <!-- SPONSORS -->
-        <section id="sponsors" class="flex flex-col gap-10 px-20 py-20">
-            <p
-                class="bg-2025-blue-dark mr-[5px] flex w-min place-self-center rounded-md p-3 text-2xl font-bold text-white"
-            >
-                Patrocínios
-            </p>
-            <SponsorBanner
-                v-for="(tier, idx) in sponsorTiers"
-                :key="tier.id"
-                :title="tier.name"
-                :sponsors="tier.sponsors ?? []"
-                :color="tier.color"
-                :idx="idx"
-            ></SponsorBanner>
+
+        <section
+            id="sponsors"
+            class="relative mx-auto max-w-6xl px-4 py-20 sm:px-6 lg:px-8"
+        >
+            <div class="mb-10 flex justify-center">
+                <div class="pill-container">
+                    <span class="pill-item font-semibold text-white">
+                        Patrocínios
+                    </span>
+                </div>
+            </div>
+
+            <div class="space-y-12">
+                <SponsorBanner
+                    v-for="(tier, idx) in sponsorTiers"
+                    :key="tier.id"
+                    :title="tier.name"
+                    :sponsors="tier.sponsors ?? []"
+                    :color="tier.color"
+                    :idx="idx"
+                />
+            </div>
         </section>
     </AppLayout>
 </template>
-
-<style>
-#svg-1 {
-    animation-delay: -0.5s;
-}
-
-#svg-2 {
-    animation-delay: -1s;
-}
-
-#svg-3 {
-    animation-delay: -0.8s;
-}
-</style>
diff --git a/resources/js/Pages/Maintenance.vue b/resources/js/Pages/Maintenance.vue
index 13195eb1..3b7b7beb 100644
--- a/resources/js/Pages/Maintenance.vue
+++ b/resources/js/Pages/Maintenance.vue
@@ -4,99 +4,84 @@ import { Head } from "@inertiajs/vue3";
 
 <template>
     <Head title="semana de informática 2026" />
-    <!-- TODO: localization -->
-    <main class="maintenance-bg min-h-screen bg-black">
+
+    <div class="relative min-h-screen bg-black text-white">
         <div
-            class="flex min-h-screen flex-col content-center items-center justify-evenly"
+            class="pointer-events-none fixed inset-0 z-0 overflow-hidden"
+            aria-hidden="true"
         >
-            <div class="relative flex flex-col items-center">
-                <img
-                    id="svg-logo"
-                    class="w-96 p-4 select-none"
-                    src="images/sinf2026.svg"
-                    alt="SINF 2026 logo"
-                />
-                <p
-                    class="absolute top-full inset-x-0 mt-12 sm:mt-24 text-center font-['Inter'] text-lg font-medium tracking-wide text-white select-none"
-                    style="font-family: 'Inter', sans-serif;"
-                >
-                    Brevemente
-                </p>
-                <div
-                    class="absolute top-full inset-x-0 mt-22 sm:mt-34 flex flex-row items-center justify-center space-x-3 select-none"
-                >
-                    <a
-                        href="https://www.instagram.com/sinffeup/"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="text-white transition-opacity hover:opacity-80"
-                    >
-                        <img
-                            class="w-4"
-                            src="images/instagram.svg"
-                            alt="Instagram"
-                        />
-                    </a>
-                    <a
-                        href="https://www.facebook.com/sinffeup/"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="text-white transition-opacity hover:opacity-80"
+            <div
+                class="glow-orb-crimson-1 absolute top-[-20%] right-[-15%] h-[85vh] w-[80vw] rounded-[100%] blur-[70px] will-change-transform sm:blur-[100px]"
+            />
+            <div
+                class="glow-orb-purple-1 absolute bottom-[-20%] left-[-15%] h-[85vh] w-[80vw] rounded-[100%] blur-[70px] will-change-transform sm:blur-[100px]"
+            />
+            <div
+                class="glow-orb-crimson-2 absolute right-[-5%] bottom-[-10%] h-[65vh] w-[60vw] rounded-[100%] blur-[60px] will-change-transform sm:blur-[90px]"
+            />
+            <div
+                class="glow-orb-purple-2 absolute top-[-10%] left-[-5%] h-[65vh] w-[60vw] rounded-[100%] blur-[60px] will-change-transform sm:blur-[90px]"
+            />
+        </div>
+
+        <main class="relative z-10 min-h-screen">
+            <div
+                class="flex min-h-screen flex-col content-center items-center justify-evenly"
+            >
+                <div class="relative flex flex-col items-center">
+                    <img
+                        id="svg-logo"
+                        class="h-32 p-4 select-none"
+                        src="/images/sinf2026.svg"
+                        alt="SINF 2026 logo"
+                    />
+                    <p
+                        class="absolute inset-x-0 top-full mt-12 text-center text-lg font-medium tracking-wide text-white select-none sm:mt-24"
                     >
-                        <img
-                            class="w-4"
-                            src="images/facebook.svg"
-                            alt="Facebook"
-                        />
-                    </a>
-                    <a
-                        href="https://www.linkedin.com/company/sinffeup"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="text-white transition-opacity hover:opacity-80"
+                        Brevemente
+                    </p>
+                    <div
+                        class="absolute inset-x-0 top-full mt-22 flex flex-row items-center justify-center space-x-3 select-none sm:mt-34"
                     >
-                        <img
-                            class="w-4"
-                            src="images/linkedin.svg"
-                            alt="LinkedIn"
-                        />
-                    </a>
+                        <a
+                            href="https://www.instagram.com/sinffeup/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="text-white transition-opacity hover:opacity-80"
+                        >
+                            <img
+                                class="w-4"
+                                src="/images/instagram.svg"
+                                alt="Instagram"
+                            />
+                        </a>
+                        <a
+                            href="https://www.facebook.com/sinffeup/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="text-white transition-opacity hover:opacity-80"
+                        >
+                            <img
+                                class="w-4"
+                                src="/images/facebook.svg"
+                                alt="Facebook"
+                            />
+                        </a>
+                        <a
+                            href="https://www.linkedin.com/company/sinffeup"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="text-white transition-opacity hover:opacity-80"
+                        >
+                            <img
+                                class="w-4"
+                                src="/images/linkedin.svg"
+                                alt="LinkedIn"
+                            />
+                        </a>
+                    </div>
                 </div>
             </div>
-        </div>
-    </main>
+        </main>
+    </div>
 </template>
-
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
-
-.maintenance-bg {
-    background-image:
-        radial-gradient(
-            ellipse 70% 20% at 58% 46%,
-            rgb(154 0 54 / 100%) 0%,
-            rgb(64 0 23 / 0%) 100%
-        ),
-        radial-gradient(
-            ellipse 70% 20% at 42% 54%,
-            rgb(106 0 255 / 85%) 0%,
-            rgb(34 1 153 / 0%) 100%
-        );
-}
-
-@media (min-width: 640px) {
-    .maintenance-bg {
-        background-image:
-            radial-gradient(
-                ellipse 30% 24% at 58% 44%,
-                rgb(154 0 54 / 100%) 0%,
-                rgb(64 0 23 / 0%) 100%
-            ),
-            radial-gradient(
-                ellipse 30% 24% at 42% 58%,
-                rgb(106 0 255 / 85%) 0%,
-                rgb(34 1 153 / 0%) 100%
-            );
-    }
-}
-</style>
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index e7dd77da..2943f0c9 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -16,8 +16,9 @@
     <title data-inertia>{{ config('app.name', 'Laravel') }}</title>
 
     <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.bunny.net">
-    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
 
     <!-- Scripts -->
     @routes
diff --git a/resources/views/vendor/mail/html/themes/default.css b/resources/views/vendor/mail/html/themes/default.css
index 49de5a7c..9100f9b2 100644
--- a/resources/views/vendor/mail/html/themes/default.css
+++ b/resources/views/vendor/mail/html/themes/default.css
@@ -287,4 +287,4 @@ img {
 
 /* .break-all {
     word-break: break-all;
-} */
\ No newline at end of file
+} */

From e6497d6ca564ffb6d6c9a6cd06670c2a7d0b8e71 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Tue, 1 Sep 2026 19:06:25 +0100
Subject: [PATCH 02/33] chore: made the glowing orbs random

---
 resources/js/Components/GlowingOrbs.vue | 103 ++++++++++++++++++++++++
 resources/js/Layouts/AppLayout.vue      |  23 +-----
 resources/js/Pages/Maintenance.vue      |  19 +----
 3 files changed, 108 insertions(+), 37 deletions(-)
 create mode 100644 resources/js/Components/GlowingOrbs.vue

diff --git a/resources/js/Components/GlowingOrbs.vue b/resources/js/Components/GlowingOrbs.vue
new file mode 100644
index 00000000..f919efb6
--- /dev/null
+++ b/resources/js/Components/GlowingOrbs.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+interface Orb {
+    id: number;
+    className: string;
+    style: {
+        top: string;
+        left: string;
+        animationDelay: string;
+    };
+}
+
+interface Zone {
+    minTop: number;
+    maxTop: number;
+    minLeft: number;
+    maxLeft: number;
+}
+
+const getRandomInRange = (min: number, max: number): number => {
+    return Math.round(min + Math.random() * (max - min));
+};
+
+const shuffleArray = <T,>(array: T[]): T[] => {
+    const arr = [...array];
+    for (let i = arr.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        const current = arr[i];
+        const randomItem = arr[j];
+        if (current !== undefined && randomItem !== undefined) {
+            arr[i] = randomItem;
+            arr[j] = current;
+        }
+    }
+    return arr;
+};
+
+const zones: Zone[] = [
+    { minTop: -30, maxTop: 15, minLeft: -25, maxLeft: 20 },
+    { minTop: -30, maxTop: 15, minLeft: 45, maxLeft: 85 },
+    { minTop: 45, maxTop: 85, minLeft: -25, maxLeft: 20 },
+    { minTop: 45, maxTop: 85, minLeft: 45, maxLeft: 85 },
+];
+
+const orbDefinitions = [
+    {
+        className:
+            "glow-orb-crimson-1 absolute h-[85vh] w-[80vw] rounded-[100%] blur-[70px] will-change-transform sm:blur-[100px]",
+        maxDelay: 10,
+    },
+    {
+        className:
+            "glow-orb-purple-1 absolute h-[85vh] w-[80vw] rounded-[100%] blur-[70px] will-change-transform sm:blur-[100px]",
+        maxDelay: 12,
+    },
+    {
+        className:
+            "glow-orb-crimson-2 absolute h-[65vh] w-[60vw] rounded-[100%] blur-[60px] will-change-transform sm:blur-[90px]",
+        maxDelay: 9,
+    },
+    {
+        className:
+            "glow-orb-purple-2 absolute h-[65vh] w-[60vw] rounded-[100%] blur-[60px] will-change-transform sm:blur-[90px]",
+        maxDelay: 11,
+    },
+];
+
+const shuffledZones = shuffleArray(zones);
+
+const orbs = ref<Orb[]>(
+    orbDefinitions.map((orb, index) => {
+        const zone = shuffledZones[index] ?? zones[index];
+        const top = getRandomInRange(zone.minTop, zone.maxTop);
+        const left = getRandomInRange(zone.minLeft, zone.maxLeft);
+        const delay = (-(Math.random() * orb.maxDelay)).toFixed(2);
+
+        return {
+            id: index,
+            className: orb.className,
+            style: {
+                top: `${top}%`,
+                left: `${left}%`,
+                animationDelay: `${delay}s`,
+            },
+        };
+    }),
+);
+</script>
+
+<template>
+    <div
+        class="pointer-events-none fixed inset-0 z-0 overflow-hidden"
+        aria-hidden="true"
+    >
+        <div
+            v-for="orb in orbs"
+            :key="orb.id"
+            :class="orb.className"
+            :style="orb.style"
+        />
+    </div>
+</template>
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 5bc950ad..9e7e0768 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -3,6 +3,8 @@ import { Head } from "@inertiajs/vue3";
 import Navbar from "@/Components/Navbar.vue";
 import Footer from "@/Components/Footer.vue";
 
+import GlowingOrbs from "@/Components/GlowingOrbs.vue";
+
 interface Props {
     title: string;
 }
@@ -14,26 +16,7 @@ defineProps<Props>();
     <div class="relative min-h-screen bg-black text-white">
         <Head :title="title" />
 
-        <div
-            class="pointer-events-none fixed inset-0 z-0 overflow-hidden"
-            aria-hidden="true"
-        >
-            <div
-                class="glow-orb-crimson-1 absolute top-[-20%] right-[-15%] h-[85vh] w-[80vw] rounded-[100%] blur-[70px] will-change-transform sm:blur-[100px]"
-            />
-
-            <div
-                class="glow-orb-purple-1 absolute bottom-[-20%] left-[-15%] h-[85vh] w-[80vw] rounded-[100%] blur-[70px] will-change-transform sm:blur-[100px]"
-            />
-
-            <div
-                class="glow-orb-crimson-2 absolute right-[-5%] bottom-[-10%] h-[65vh] w-[60vw] rounded-[100%] blur-[60px] will-change-transform sm:blur-[90px]"
-            />
-
-            <div
-                class="glow-orb-purple-2 absolute top-[-10%] left-[-5%] h-[65vh] w-[60vw] rounded-[100%] blur-[60px] will-change-transform sm:blur-[90px]"
-            />
-        </div>
+        <GlowingOrbs />
 
         <main class="relative z-10 min-h-screen">
             <Navbar />
diff --git a/resources/js/Pages/Maintenance.vue b/resources/js/Pages/Maintenance.vue
index 3b7b7beb..323a07c7 100644
--- a/resources/js/Pages/Maintenance.vue
+++ b/resources/js/Pages/Maintenance.vue
@@ -1,28 +1,13 @@
 <script setup lang="ts">
 import { Head } from "@inertiajs/vue3";
+import GlowingOrbs from "@/Components/GlowingOrbs.vue";
 </script>
 
 <template>
     <Head title="semana de informática 2026" />
 
     <div class="relative min-h-screen bg-black text-white">
-        <div
-            class="pointer-events-none fixed inset-0 z-0 overflow-hidden"
-            aria-hidden="true"
-        >
-            <div
-                class="glow-orb-crimson-1 absolute top-[-20%] right-[-15%] h-[85vh] w-[80vw] rounded-[100%] blur-[70px] will-change-transform sm:blur-[100px]"
-            />
-            <div
-                class="glow-orb-purple-1 absolute bottom-[-20%] left-[-15%] h-[85vh] w-[80vw] rounded-[100%] blur-[70px] will-change-transform sm:blur-[100px]"
-            />
-            <div
-                class="glow-orb-crimson-2 absolute right-[-5%] bottom-[-10%] h-[65vh] w-[60vw] rounded-[100%] blur-[60px] will-change-transform sm:blur-[90px]"
-            />
-            <div
-                class="glow-orb-purple-2 absolute top-[-10%] left-[-5%] h-[65vh] w-[60vw] rounded-[100%] blur-[60px] will-change-transform sm:blur-[90px]"
-            />
-        </div>
+        <GlowingOrbs />
 
         <main class="relative z-10 min-h-screen">
             <div

From 3c6ebe886b68ad177e93fdeadcdde4ff73fe569e Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Tue, 1 Sep 2026 19:42:23 +0100
Subject: [PATCH 03/33] feat: program page

---
 app/Http/Controllers/ProgramController.php    |   2 +
 .../js/Components/Program/ProgramDayPanel.vue | 294 +++++++++---------
 .../Components/Program/ProgramDaySelector.vue |  95 ++++++
 .../Program/TimeLine/ActivityTimelineItem.vue | 196 +++++++++---
 .../TimeLine/CompetitionTimelineItem.vue      | 113 ++++---
 .../Program/TimeLine/StandDisplay.vue         |  58 ++--
 .../Program/TimeLine/TalkTimelineItem.vue     | 172 +++++++---
 .../Program/TimeLine/TimelinePoint.vue        |  35 ++-
 .../Program/TimeLine/WithTimeline.vue         |  34 +-
 resources/js/Pages/Program.vue                |  79 ++---
 10 files changed, 711 insertions(+), 367 deletions(-)
 create mode 100644 resources/js/Components/Program/ProgramDaySelector.vue

diff --git a/app/Http/Controllers/ProgramController.php b/app/Http/Controllers/ProgramController.php
index ac51b7f8..4b455dac 100644
--- a/app/Http/Controllers/ProgramController.php
+++ b/app/Http/Controllers/ProgramController.php
@@ -36,6 +36,7 @@ public function show(Request $request)
 
             if ($totalDays === 0) {
                 return Inertia::render('Program', [
+                    'days' => fn () => [],
                     'eventDay' => fn () => null,
                     'queryDay' => fn () => 0,
                     'totalDays' => fn () => 0,
@@ -55,6 +56,7 @@ public function show(Request $request)
         $eventDay?->competitions;
 
         return Inertia::render('Program', [
+            'days' => fn () => $edition->event_days()->orderBy('date', 'ASC')->get(['id', 'date', 'theme']),
             'eventDay' => fn () => $eventDay?->load([
                 'stands' => [
                     'sponsor' => [
diff --git a/resources/js/Components/Program/ProgramDayPanel.vue b/resources/js/Components/Program/ProgramDayPanel.vue
index 32e4979d..7152a966 100644
--- a/resources/js/Components/Program/ProgramDayPanel.vue
+++ b/resources/js/Components/Program/ProgramDayPanel.vue
@@ -1,178 +1,171 @@
 <script setup lang="ts">
 import type EventDay from "@/Types/EventDay";
-import { ref, onMounted, watch, type UnwrapRef, computed } from "vue";
+import { ref, computed, watch } from "vue";
 import WithTimeline from "@/Components/Program/TimeLine/WithTimeline.vue";
 import StandDisplay from "@/Components/Program/TimeLine/StandDisplay.vue";
-import ActivityTimelineAction from "./TimeLine/ActivityTimelineItem.vue";
-import TalkTimelineAction from "./TimeLine/TalkTimelineItem.vue";
+import ActivityTimelineItem from "./TimeLine/ActivityTimelineItem.vue";
+import TalkTimelineItem from "./TimeLine/TalkTimelineItem.vue";
 import CompetitionTimelineItem from "./TimeLine/CompetitionTimelineItem.vue";
-import type Event from "@/Types/Event";
 
 interface Props {
     day: EventDay;
 }
 
 const props = defineProps<Props>();
-
 const day = computed(() => props.day);
 
-const selected = ref<HTMLElement | null>(null);
-const selectedType = ref<"talk" | "activity" | "stand" | "competitions">(
-    "talk",
-);
+type TabType = "talk" | "activity" | "stand" | "competitions";
 
-const noInfo = computed(
-    () =>
-        day.value.activities?.length === 0 &&
-        day.value.talks?.length === 0 &&
-        day.value.stands?.length === 0 &&
-        day.value.competitions?.length === 0,
-);
-
-const toggle = ({ target }: MouseEvent) => {
-    selected.value = target as HTMLElement;
-};
+interface TabOption {
+    id: TabType;
+    label: string;
+    count: number;
+}
 
-watch(selected, (newValue, oldValue) => {
-    oldValue?.classList.toggle("selected");
-    newValue?.classList.toggle("selected");
-    selectedType.value =
-        (newValue?.dataset.type as UnwrapRef<typeof selectedType>) ?? "talk";
+const availableTabs = computed<TabOption[]>(() => {
+    const tabs: TabOption[] = [];
+    if (day.value.talks?.length) {
+        tabs.push({
+            id: "talk",
+            label: "Palestras",
+            count: day.value.talks.length,
+        });
+    }
+    if (day.value.activities?.length) {
+        tabs.push({
+            id: "activity",
+            label: "Atividades",
+            count: day.value.activities.length,
+        });
+    }
+    if (day.value.stands?.length) {
+        tabs.push({
+            id: "stand",
+            label: "Bancas",
+            count: day.value.stands.length,
+        });
+    }
+    if (day.value.competitions?.length) {
+        tabs.push({
+            id: "competitions",
+            label: "Competições",
+            count: day.value.competitions.length,
+        });
+    }
+    return tabs;
 });
 
-const times = ref<{ start?: string; end?: string }>({
-    start: undefined,
-    end: undefined,
-});
+const selectedType = ref<TabType>(availableTabs.value[0]?.id ?? "talk");
 
+// If day changes or current tab has no items, switch to first available tab
 watch(
-    selectedType,
-    (_selectedType) => {
-        const parseTimeString = (time: string) => {
-            return `1970-01-01T${time}.000000Z`;
-        };
-
-        let items: Event[] = [];
-        switch (_selectedType) {
-            case "activity":
-                items = day.value.activities ?? [];
-                break;
-            case "talk":
-                items = day.value.talks ?? [];
-                break;
-            case "stand":
-                times.value = {
-                    start: "1970-01-01T08:00:00.000000Z",
-                    end: "1970-01-01T17:00:00.000000Z",
-                };
-                return;
-            case "competitions":
-                if (day.value.competitions?.length === 0)
-                    times.value = {
-                        start: undefined,
-                        end: undefined,
-                    };
-                else {
-                    times.value = {
-                        start: day.value.competitions?.[0].date_start,
-                        end: day.value.competitions?.[
-                            day.value.competitions.length - 1
-                        ].date_end,
-                    };
-                }
-                return;
-        }
-
-        if (items.length === 0) {
-            times.value = {
-                start: undefined,
-                end: undefined,
-            };
-            return;
+    availableTabs,
+    (tabs) => {
+        if (!tabs.some((t) => t.id === selectedType.value) && tabs.length > 0) {
+            const firstTab = tabs[0];
+            if (firstTab) {
+                selectedType.value = firstTab.id;
+            }
         }
-
-        const startTime = parseTimeString(items[0].time_start);
-        const endTime = parseTimeString(items[items.length - 1].time_end);
-
-        times.value = { start: startTime, end: endTime };
-    },
-    {
-        immediate: true,
     },
+    { immediate: true },
 );
 
-onMounted(() => {
-    selected.value = document.querySelector(
-        "#tab-picker > button:first-of-type",
-    ) as HTMLElement;
-    if (selected.value) {
-        selectedType.value =
-            (selected.value.dataset.type as UnwrapRef<typeof selectedType>) ??
-            "talk";
+const times = computed<{ start?: string; end?: string }>(() => {
+    const parseTimeString = (time: string) => `1970-01-01T${time}.000000Z`;
+
+    switch (selectedType.value) {
+        case "activity": {
+            const items = day.value.activities ?? [];
+            if (!items.length) return {};
+            const first = items[0];
+            const last = items[items.length - 1];
+            return {
+                start: first ? parseTimeString(first.time_start) : undefined,
+                end: last ? parseTimeString(last.time_end) : undefined,
+            };
+        }
+        case "talk": {
+            const items = day.value.talks ?? [];
+            if (!items.length) return {};
+            const first = items[0];
+            const last = items[items.length - 1];
+            return {
+                start: first ? parseTimeString(first.time_start) : undefined,
+                end: last ? parseTimeString(last.time_end) : undefined,
+            };
+        }
+        case "stand":
+            return {
+                start: "1970-01-01T08:00:00.000000Z",
+                end: "1970-01-01T17:00:00.000000Z",
+            };
+        case "competitions": {
+            const comps = day.value.competitions ?? [];
+            if (!comps.length) return {};
+            const first = comps[0];
+            const last = comps[comps.length - 1];
+            return {
+                start: first?.date_start,
+                end: last?.date_end,
+            };
+        }
+        default:
+            return {};
     }
 });
 </script>
 
 <template>
-    <section class="h-full w-full">
+    <div class="w-full">
+        <div v-if="availableTabs.length > 1" class="mb-10 flex justify-center">
+            <div class="pill-container flex-wrap justify-center gap-1.5 p-1">
+                <button
+                    v-for="tab in availableTabs"
+                    :key="tab.id"
+                    type="button"
+                    class="pill-item cursor-pointer gap-2 px-4 py-2 text-sm font-medium transition-all"
+                    :class="{ 'pill-item-active': selectedType === tab.id }"
+                    @click="selectedType = tab.id"
+                >
+                    <span>{{ tab.label }}</span>
+                    <span
+                        class="rounded-full px-1.5 py-0.5 text-[11px] transition-colors"
+                        :class="
+                            selectedType === tab.id
+                                ? 'bg-white/20 text-white'
+                                : 'bg-white/5 text-neutral-400'
+                        "
+                    >
+                        {{ tab.count }}
+                    </span>
+                </button>
+            </div>
+        </div>
+
         <div
-            id="tab-picker"
-            class="mx-auto flex w-fit flex-row flex-wrap justify-center gap-4 rounded-md bg-white/5 p-2 font-bold text-[#2596be] shadow-[0_0_40px_-12px_rgba(255,255,255,0.18)] backdrop-blur-xs"
+            v-if="availableTabs.length === 0"
+            class="flex flex-col items-center justify-center py-20 text-center"
         >
-            <button
-                v-if="(day.talks?.length ?? 0) > 0"
-                class=""
-                data-type="talk"
-                @click="toggle"
-            >
-                Palestras
-            </button>
-            <button
-                v-if="(day.activities?.length ?? 0) > 0"
-                class=""
-                data-type="activity"
-                @click="toggle"
-            >
-                Atividades
-            </button>
-            <button
-                v-if="(day.stands?.length ?? 0) > 0"
-                class=""
-                data-type="stand"
-                @click="toggle"
-            >
-                Bancas
-            </button>
-            <button
-                v-if="(day.competitions?.length ?? 0) > 0"
-                class=""
-                data-type="competitions"
-                @click="toggle"
-            >
-                Competições
-            </button>
+            <div class="pill-container mb-3 px-5 py-2">
+                <span class="text-sm font-medium text-neutral-400">
+                    Sem eventos agendados
+                </span>
+            </div>
+            <p class="text-xs text-neutral-500">
+                Nenhuma atividade ou palestra disponível para este dia de
+                momento.
+            </p>
         </div>
-    </section>
-    <!--<p
-        v-if="
-            (selectedType === 'talk' || selectedType === 'activity') && !noInfo
-        "
-        class="mr-2 mt-5 max-w-2xl rounded-md  p-2.5 px-8 text-justify text-lg font-bold text-text-color  bg-white/5 backdrop-blur-xs shadow-[0_0_40px_-12px_rgba(255,255,255,0.18)] "
-    >
-        {{ day.theme }}
-    </p>-->
-    <template v-if="noInfo">
-        <p class="text-2023-teal-dark pt-40 text-4xl font-bold">Em breve...</p>
-    </template>
-    <template v-else>
-        <WithTimeline :start-time="times.start" :end-time="times.end">
-            <div class="flex flex-col gap-8">
-                <template v-if="selectedType === 'stand'">
-                    <StandDisplay :stands="day.stands!" />
-                </template>
 
-                <template v-else-if="selectedType === 'activity'">
-                    <ActivityTimelineAction
+        <template v-else-if="selectedType === 'stand'">
+            <StandDisplay :stands="day.stands ?? []" />
+        </template>
+
+        <template v-else>
+            <WithTimeline :start-time="times.start" :end-time="times.end">
+                <template v-if="selectedType === 'activity'">
+                    <ActivityTimelineItem
                         v-for="activity in day.activities"
                         :key="activity.id"
                         :event="activity"
@@ -180,7 +173,7 @@ onMounted(() => {
                 </template>
 
                 <template v-else-if="selectedType === 'talk'">
-                    <TalkTimelineAction
+                    <TalkTimelineItem
                         v-for="talk in day.talks"
                         :key="talk.id"
                         :event="talk"
@@ -194,14 +187,7 @@ onMounted(() => {
                         :competition="competition"
                     />
                 </template>
-            </div>
-        </WithTimeline>
-    </template>
+            </WithTimeline>
+        </template>
+    </div>
 </template>
-
-<style scoped>
-.selected {
-    color: #ffffff;
-    text-decoration: underline;
-}
-</style>
diff --git a/resources/js/Components/Program/ProgramDaySelector.vue b/resources/js/Components/Program/ProgramDaySelector.vue
new file mode 100644
index 00000000..f81ca31d
--- /dev/null
+++ b/resources/js/Components/Program/ProgramDaySelector.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Link } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
+import type EventDay from "@/Types/EventDay";
+
+interface Props {
+    days?: EventDay[];
+    totalDays: number;
+    queryDay: number;
+    eventDay?: EventDay;
+}
+
+const props = defineProps<Props>();
+
+const formatShortDate = (dateStr?: Date | string): string => {
+    if (!dateStr) return "";
+    try {
+        const d = new Date(dateStr);
+        return d
+            .toLocaleDateString("pt-PT", {
+                day: "numeric",
+                month: "short",
+                timeZone: "Europe/Lisbon",
+            })
+            .replace(".", "");
+    } catch {
+        return "";
+    }
+};
+
+const formattedFullDate = computed(() => {
+    if (!props.eventDay?.date) return "";
+    try {
+        const d = new Date(props.eventDay.date);
+        const dateStr = d.toLocaleDateString("pt-PT", {
+            weekday: "long",
+            day: "numeric",
+            month: "long",
+            timeZone: "Europe/Lisbon",
+        });
+        return dateStr.charAt(0).toUpperCase() + dateStr.slice(1);
+    } catch {
+        return "";
+    }
+});
+</script>
+
+<template>
+    <section class="mb-5 flex flex-col items-center gap-4 text-center">
+        <div v-if="totalDays > 1" class="flex justify-center">
+            <div class="pill-container flex-wrap justify-center gap-1.5 p-1.5">
+                <Link
+                    v-for="dayIndex in totalDays"
+                    :key="dayIndex"
+                    :href="
+                        route(route().current() ?? 'program', {
+                            day: dayIndex,
+                        })
+                    "
+                    class="pill-item cursor-pointer gap-2 px-4 py-2 text-sm font-medium transition-all duration-200"
+                    :class="{
+                        'pill-item-active': dayIndex === queryDay,
+                    }"
+                    :only="['eventDay', 'queryDay']"
+                    preserve-state
+                    preserve-scroll
+                >
+                    <span class="font-semibold">Dia {{ dayIndex }}</span>
+                    <template
+                        v-if="
+                            dayIndex === queryDay &&
+                            days &&
+                            days[dayIndex - 1]
+                        "
+                    >
+                        <span class="opacity-35">•</span>
+                        <span class="text-xs opacity-85">
+                            {{ formatShortDate(days[dayIndex - 1]?.date) }}
+                        </span>
+                    </template>
+                </Link>
+            </div>
+        </div>
+
+        <div v-if="eventDay" class="flex flex-col items-center gap-1.5">
+            <p
+                v-if="eventDay.theme"
+                class="max-w-2xl text-sm font-normal leading-relaxed sm:text-base"
+            >
+                {{ eventDay.theme }}
+            </p>
+        </div>
+    </section>
+</template>
diff --git a/resources/js/Components/Program/TimeLine/ActivityTimelineItem.vue b/resources/js/Components/Program/TimeLine/ActivityTimelineItem.vue
index 0c6e8290..95094ace 100644
--- a/resources/js/Components/Program/TimeLine/ActivityTimelineItem.vue
+++ b/resources/js/Components/Program/TimeLine/ActivityTimelineItem.vue
@@ -10,56 +10,172 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-
 const event = computed(() => props.event);
+const speakers = computed(() => event.value.users?.filter(isSpeaker) ?? []);
 
-const speakers = computed(() => event.value.users?.filter(isSpeaker));
-
-const formatTimeString = (time: string): string => {
-    return `1970-01-01T${time}.000000Z`;
+const formatTime = (time?: string): string => {
+    if (!time) return "";
+    const isoString = time.includes("T") ? time : `1970-01-01T${time}.000000Z`;
+    try {
+        const d = new Date(isoString);
+        return d.toLocaleTimeString("pt-PT", {
+            hour: "2-digit",
+            minute: "2-digit",
+            timeZone: "Europe/Lisbon",
+        });
+    } catch {
+        return time.slice(0, 5);
+    }
 };
 </script>
 
 <template>
-    <article class="relative flex flex-col border-b-2 border-white pb-4">
-        <h2 class="text-text-color text-2xl font-bold">
-            <em
-                ><Link
+    <div class="group relative">
+        <div
+            class="absolute top-8 -left-9.25 hidden h-2.5 w-2.5 rounded-full bg-neutral-600 ring-4 ring-black transition-all duration-300 group-hover:scale-125 sm:flex"
+        />
+
+        <article
+            class="rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out hover:scale-[1.01] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-7"
+        >
+            <div class="mb-4 flex flex-wrap items-center gap-2.5">
+                <div
+                    v-if="event.time_start"
+                    class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
+                >
+                    <svg
+                        class="h-3.5 w-3.5 text-neutral-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                        />
+                    </svg>
+                    <span>
+                        {{ formatTime(event.time_start) }}
+                        <template v-if="event.time_end">
+                            - {{ formatTime(event.time_end) }}
+                        </template>
+                    </span>
+                </div>
+
+                <div
+                    v-if="event.location"
+                    class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
+                >
+                    <svg
+                        class="h-3.5 w-3.5 text-neutral-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+                        />
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+                        />
+                    </svg>
+                    <span>{{ event.location }}</span>
+                </div>
+
+                <div
+                    v-if="event.capacity"
+                    class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
+                >
+                    <svg
+                        class="h-3.5 w-3.5 text-neutral-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+                        />
+                    </svg>
+                    <span>{{ event.capacity }} vagas</span>
+                </div>
+            </div>
+
+            <h3 class="text-xl font-bold tracking-tight sm:text-2xl">
+                <Link
                     :href="route('event.show', { event: event.id })"
+                    class="inline-flex items-center gap-2 text-white transition-colors hover:text-neutral-200"
                     preserve-state
                     preserve-scroll
-                    >{{ event.name }}</Link
-                ></em
+                >
+                    <span>{{ event.name }}</span>
+                    <svg
+                        class="h-4 w-4 text-neutral-500 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-white"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M14 5l7 7m0 0l-7 7m7-7H3"
+                        />
+                    </svg>
+                </Link>
+            </h3>
+
+            <p
+                v-if="event.topic"
+                class="mt-2 text-sm leading-relaxed text-neutral-300 sm:text-base"
             >
-        </h2>
-        <p class="text-text-color text-lg">{{ event.topic }}</p>
-        <ul v-if="speakers" class="flex flex-col">
-            <li
-                v-for="user in speakers"
-                :key="user.id"
-                class="text-text-color font-bold"
+                {{ event.topic }}
+            </p>
+
+            <div
+                v-if="speakers.length > 0"
+                class="mt-5 flex flex-wrap items-center gap-3 border-t border-white/8 pt-4"
             >
-                {{ user.name
-                }}<template v-if="user.usertype?.organization">
-                    | {{ user.usertype.organization }}</template
+                <div
+                    v-for="user in speakers"
+                    :key="user.id"
+                    class="flex items-center gap-2.5 rounded-full bg-white/5 py-1 pr-3.5 pl-1 ring-1 ring-white/10 backdrop-blur-xs"
                 >
-            </li>
-        </ul>
-        <span v-if="event.capacity" class="text-text-color"
-            >Capacidade:
-            <span class="font-bold">{{ event.capacity }}</span></span
-        >
-        <span v-if="event.location" class="text-text-color"
-            >Local: <span class="font-bold">{{ event.location }}</span></span
-        >
-        <span class="text-text-color">
-            {{ $d(new Date(formatTimeString(event.time_start)), "hourMinute") }}
-            -
-            {{ $d(new Date(formatTimeString(event.time_end)), "hourMinute") }}
-        </span>
-        <span
-            class="bg-2025-blue absolute top-0 -left-[calc(2rem+17.75px)] inline-flex h-8 w-8 items-center justify-center rounded-md text-xl font-semibold text-white"
-            >i</span
-        >
-    </article>
+                    <img
+                        v-if="user.profile_photo_url"
+                        :src="user.profile_photo_url"
+                        :alt="user.name"
+                        class="h-7 w-7 rounded-full object-cover ring-1 ring-white/20"
+                    />
+                    <div
+                        v-else
+                        class="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-800 text-xs font-bold text-white"
+                    >
+                        {{ user.name.charAt(0) }}
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="text-xs font-semibold text-white">
+                            {{ user.name }}
+                        </span>
+                        <span
+                            v-if="user.usertype?.organization"
+                            class="text-[11px] text-neutral-400"
+                        >
+                            {{ user.usertype.organization }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </article>
+    </div>
 </template>
diff --git a/resources/js/Components/Program/TimeLine/CompetitionTimelineItem.vue b/resources/js/Components/Program/TimeLine/CompetitionTimelineItem.vue
index 7cfa65da..03c4b961 100644
--- a/resources/js/Components/Program/TimeLine/CompetitionTimelineItem.vue
+++ b/resources/js/Components/Program/TimeLine/CompetitionTimelineItem.vue
@@ -9,53 +9,92 @@ interface Props {
 
 defineProps<Props>();
 
-const formattedDate = (
-    startDate: string,
-    separator: string,
-    endDate: string,
-) => {
-    const startDateArray = startDate.split(" ");
-    const endDateArray = endDate.split(" ");
-
-    let pointer = 0;
-
-    while (startDateArray[pointer] === endDateArray[pointer]) pointer++;
-
-    endDate = endDateArray.slice(pointer).join(" ");
-
-    return `${startDate} ${separator} ${endDate}`;
+const formatDateTime = (dateStr?: string): string => {
+    if (!dateStr) return "";
+    try {
+        const d = new Date(dateStr);
+        return d.toLocaleDateString("pt-PT", {
+            day: "numeric",
+            month: "short",
+            hour: "2-digit",
+            minute: "2-digit",
+            timeZone: "Europe/Lisbon",
+        });
+    } catch {
+        return dateStr;
+    }
 };
 </script>
 
 <template>
-    <article class="relative flex flex-col border-b-2 border-white pb-4">
-        <h2 class="text-text-color text-2xl font-bold">
-            <em
-                ><Link
+    <div class="group relative">
+        <div
+            class="absolute top-8 -left-9.25 hidden h-2.5 w-2.5 rounded-full bg-neutral-600 ring-4 ring-black transition-all duration-300 group-hover:scale-125 sm:flex"
+        />
+
+        <article
+            class="rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out hover:scale-[1.01] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-7"
+        >
+            <div class="mb-4 flex flex-wrap items-center gap-2.5">
+                <div
+                    class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
+                >
+                    <svg
+                        class="h-3.5 w-3.5 text-neutral-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        />
+                    </svg>
+                    <span>
+                        {{ formatDateTime(competition.date_start) }}
+                        <template v-if="competition.date_end">
+                            - {{ formatDateTime(competition.date_end) }}
+                        </template>
+                    </span>
+                </div>
+            </div>
+
+            <h3 class="text-xl font-bold tracking-tight sm:text-2xl">
+                <Link
                     :href="
                         route('competition.show', {
                             competition: competition.slug,
                         })
                     "
+                    class="inline-flex items-center gap-2 text-white transition-colors hover:text-neutral-200"
                     preserve-state
                     preserve-scroll
-                    >{{ competition.name }}</Link
-                ></em
+                >
+                    <span>{{ competition.name }}</span>
+                    <svg
+                        class="h-4 w-4 text-neutral-500 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-white"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M14 5l7 7m0 0l-7 7m7-7H3"
+                        />
+                    </svg>
+                </Link>
+            </h3>
+
+            <p
+                v-if="competition.theme"
+                class="mt-2 text-sm leading-relaxed text-neutral-300 sm:text-base"
             >
-        </h2>
-        <p class="text-text-color text-lg">{{ competition.theme }}</p>
-        <span class="text-text-color">
-            {{
-                formattedDate(
-                    $d(new Date(competition.date_start), "fullTime"),
-                    "-",
-                    $d(new Date(competition.date_end), "fullTime"),
-                )
-            }}
-        </span>
-        <span
-            class="bg-2025-blue absolute top-0 -left-[calc(2rem+17.75px)] inline-flex h-8 w-8 items-center justify-center rounded-md text-xl font-semibold text-white"
-            >i</span
-        >
-    </article>
+                {{ competition.theme }}
+            </p>
+        </article>
+    </div>
 </template>
diff --git a/resources/js/Components/Program/TimeLine/StandDisplay.vue b/resources/js/Components/Program/TimeLine/StandDisplay.vue
index 6f19e51d..cd24e930 100644
--- a/resources/js/Components/Program/TimeLine/StandDisplay.vue
+++ b/resources/js/Components/Program/TimeLine/StandDisplay.vue
@@ -13,12 +13,11 @@ const props = defineProps<Props>();
 
 const stands = computed(() => props.stands);
 
-const standTiers = computed(() =>
+const standTiers = computed<Record<number, SponsorTier>>(() =>
     Object.fromEntries(
-        stands.value.map((stand) => [
-            stand.sponsor?.tier?.id,
-            stand.sponsor?.tier,
-        ]),
+        stands.value
+            .filter((stand) => stand.sponsor?.tier != null)
+            .map((stand) => [stand.sponsor!.tier!.id, stand.sponsor!.tier!]),
     ),
 );
 
@@ -31,14 +30,12 @@ const standsPerTier = computed(() => {
         acc.get(tier.id)!.push(stand);
 
         return acc;
-    }, new Map<SponsorTier["id"], Stand[]>());
+    }, new Map<number, Stand[]>());
 
     const sortedEntries = Array.from(grouped.entries()).sort(([idA], [idB]) => {
-        const tierA = stands.value.find((s) => s.sponsor?.tier?.id === idA)
-            ?.sponsor?.tier;
-        const tierB = stands.value.find((s) => s.sponsor?.tier?.id === idB)
-            ?.sponsor?.tier;
-        return -((tierA?.rank ?? Infinity) - (tierB?.rank ?? Infinity));
+        const tierA = standTiers.value[idA];
+        const tierB = standTiers.value[idB];
+        return -((tierA?.rank ?? 0) - (tierB?.rank ?? 0));
     });
 
     return new Map(sortedEntries);
@@ -46,29 +43,30 @@ const standsPerTier = computed(() => {
 </script>
 
 <template>
-    <div class="flex flex-col gap-12">
+    <div class="space-y-12 py-4">
         <template v-for="[tierId, tierStands] in standsPerTier" :key="tierId">
-            <section v-if="tierStands.length > 0" class="flex flex-col gap-3">
-                <span
-                    class="text-3xl font-bold"
-                    :style="`color: ${standTiers[tierId].color}`"
+            <section v-if="tierStands.length > 0" class="w-full">
+                <div class="mb-6 flex items-center justify-center">
+                    <div class="pill-container gap-2.5 px-4 py-1.5 shadow-none">
+                        <h3
+                            class="text-xs font-semibold tracking-wider uppercase"
+                            :style="{
+                                color: standTiers[tierId]?.color || '#ffffff',
+                            }"
+                        >
+                            {{ standTiers[tierId]?.name }}
+                        </h3>
+                    </div>
+                </div>
+
+                <div
+                    class="flex flex-wrap items-center justify-center gap-4 sm:gap-6"
                 >
-                    {{ standTiers[tierId].name }}
-                </span>
-                <div class="flex flex-row flex-wrap gap-4">
-                    <div
+                    <Sponsor
                         v-for="stand in tierStands"
                         :key="stand.id"
-                        class="w-48 border border-black shadow-lg"
-                        :style="`color: ${standTiers[tierId].color}`"
-                    >
-                        <Sponsor
-                            :company="
-                                stand.sponsor?.company?.user as CompanyUser
-                            "
-                        >
-                        </Sponsor>
-                    </div>
+                        :company="stand.sponsor?.company?.user as CompanyUser"
+                    />
                 </div>
             </section>
         </template>
diff --git a/resources/js/Components/Program/TimeLine/TalkTimelineItem.vue b/resources/js/Components/Program/TimeLine/TalkTimelineItem.vue
index 7fa58c4a..08fc811b 100644
--- a/resources/js/Components/Program/TimeLine/TalkTimelineItem.vue
+++ b/resources/js/Components/Program/TimeLine/TalkTimelineItem.vue
@@ -10,52 +10,152 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-
 const event = computed(() => props.event);
+const speakers = computed(() => event.value.users?.filter(isSpeaker) ?? []);
 
-const speakers = computed(() => event.value.users?.filter(isSpeaker));
-
-const formatTimeString = (time: string): string => {
-    return `1970-01-01T${time}.000000Z`;
+const formatTime = (time?: string): string => {
+    if (!time) return "";
+    const isoString = time.includes("T") ? time : `1970-01-01T${time}.000000Z`;
+    try {
+        const d = new Date(isoString);
+        return d.toLocaleTimeString("pt-PT", {
+            hour: "2-digit",
+            minute: "2-digit",
+            timeZone: "Europe/Lisbon",
+        });
+    } catch {
+        return time.slice(0, 5);
+    }
 };
 </script>
 
 <template>
-    <article class="relative flex flex-col border-b-2 border-white pb-4">
-        <h2 class="text-text-color text-2xl font-bold">
-            <em
-                ><Link
+    <div class="group relative">
+        <div
+            class="absolute top-8 -left-9.25 hidden h-2.5 w-2.5 rounded-full bg-neutral-600 ring-4 ring-black transition-all duration-300 group-hover:scale-125 sm:flex"
+        />
+
+        <article
+            class="rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out hover:scale-[1.01] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-7"
+        >
+            <div class="mb-4 flex flex-wrap items-center gap-2.5">
+                <div
+                    v-if="event.time_start"
+                    class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
+                >
+                    <svg
+                        class="h-3.5 w-3.5 text-neutral-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                        />
+                    </svg>
+                    <span>
+                        {{ formatTime(event.time_start) }}
+                        <template v-if="event.time_end">
+                            - {{ formatTime(event.time_end) }}
+                        </template>
+                    </span>
+                </div>
+
+                <div
+                    v-if="event.location"
+                    class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
+                >
+                    <svg
+                        class="h-3.5 w-3.5 text-neutral-400"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+                        />
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+                        />
+                    </svg>
+                    <span>{{ event.location }}</span>
+                </div>
+            </div>
+
+            <h3 class="text-xl font-bold tracking-tight sm:text-2xl">
+                <Link
                     :href="route('event.show', { event: event.id })"
+                    class="inline-flex items-center gap-2 text-white transition-colors hover:text-neutral-200"
                     preserve-state
                     preserve-scroll
-                    >{{ event.name }}</Link
-                ></em
+                >
+                    <span>{{ event.name }}</span>
+                    <svg
+                        class="h-4 w-4 text-neutral-500 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-white"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M14 5l7 7m0 0l-7 7m7-7H3"
+                        />
+                    </svg>
+                </Link>
+            </h3>
+
+            <p
+                v-if="event.topic"
+                class="mt-2 text-sm leading-relaxed text-neutral-300 sm:text-base"
             >
-        </h2>
-        <p class="text-text-color text-lg">{{ event.topic }}</p>
-        <ul v-if="speakers" class="flex flex-col">
-            <li
-                v-for="user in speakers"
-                :key="user.id"
-                class="text-text-color font-bold"
+                {{ event.topic }}
+            </p>
+
+            <div
+                v-if="speakers.length > 0"
+                class="mt-5 flex flex-wrap items-center gap-3 border-t border-white/8 pt-4"
             >
-                {{ user.name
-                }}<span v-if="user.usertype?.organization">
-                    | {{ user.usertype?.organization }}</span
+                <div
+                    v-for="user in speakers"
+                    :key="user.id"
+                    class="flex items-center gap-2.5 rounded-full bg-white/5 py-1 pr-3.5 pl-1 ring-1 ring-white/10 backdrop-blur-xs"
                 >
-            </li>
-        </ul>
-        <span v-if="event.location" class="text-text-color"
-            >Local: <span class="font-bold">{{ event.location }}</span></span
-        >
-        <span class="text-text-color">
-            {{ $d(new Date(formatTimeString(event.time_start)), "hourMinute") }}
-            -
-            {{ $d(new Date(formatTimeString(event.time_end)), "hourMinute") }}
-        </span>
-        <span
-            class="bg-2025-blue absolute top-0 -left-[calc(2rem+17.75px)] inline-flex h-8 w-8 items-center justify-center rounded-md text-xl font-semibold text-white"
-            >i</span
-        >
-    </article>
+                    <img
+                        v-if="user.profile_photo_url"
+                        :src="user.profile_photo_url"
+                        :alt="user.name"
+                        class="h-7 w-7 rounded-full object-cover ring-1 ring-white/20"
+                    />
+                    <div
+                        v-else
+                        class="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-800 text-xs font-bold text-white"
+                    >
+                        {{ user.name.charAt(0) }}
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="text-xs font-semibold text-white">
+                            {{ user.name }}
+                        </span>
+                        <span
+                            v-if="user.usertype?.organization"
+                            class="text-[11px] text-neutral-400"
+                        >
+                            {{ user.usertype.organization }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </article>
+    </div>
 </template>
diff --git a/resources/js/Components/Program/TimeLine/TimelinePoint.vue b/resources/js/Components/Program/TimeLine/TimelinePoint.vue
index 4ca03882..4f7eaa2e 100644
--- a/resources/js/Components/Program/TimeLine/TimelinePoint.vue
+++ b/resources/js/Components/Program/TimeLine/TimelinePoint.vue
@@ -2,23 +2,36 @@
 interface Props {
     label: string;
     timestamp?: string;
+    type?: "start" | "end";
 }
 
 defineProps<Props>();
+
+const formatTime = (time?: string): string => {
+    if (!time) return "";
+    const isoString = time.includes("T") ? time : `1970-01-01T${time}.000000Z`;
+    try {
+        const d = new Date(isoString);
+        return d.toLocaleTimeString("pt-PT", {
+            hour: "2-digit",
+            minute: "2-digit",
+            timeZone: "Europe/Lisbon",
+        });
+    } catch {
+        return time.slice(0, 5);
+    }
+};
 </script>
 
 <template>
-    <div class="relative my-4">
-        <span
-            class="absolute top-1/2 left-[-2.865rem] h-6 w-6 -translate-y-1/2 rounded-2xl bg-white"
-        ></span>
-        <div class="flex flex-col md:block">
-            <span class="text-text-color text-2xl font-bold">{{ label }}</span>
-            <span
-                v-if="timestamp"
-                class="text-text-color font-bold md:absolute md:top-1/2 md:-left-28 md:-translate-y-1/2 md:text-xl"
-                >{{ $d(new Date(timestamp), "hourMinute") }}</span
-            >
+    <div class="flex items-center gap-3 py-2">
+        <div
+            class="pill-container gap-2 px-3.5 py-1 text-xs text-neutral-300 shadow-none"
+        >
+            <span class="font-medium text-white">{{ label }}</span>
+            <span v-if="timestamp" class="text-neutral-400">
+                • {{ formatTime(timestamp) }}
+            </span>
         </div>
     </div>
 </template>
diff --git a/resources/js/Components/Program/TimeLine/WithTimeline.vue b/resources/js/Components/Program/TimeLine/WithTimeline.vue
index 9a3b41a4..498c90b1 100644
--- a/resources/js/Components/Program/TimeLine/WithTimeline.vue
+++ b/resources/js/Components/Program/TimeLine/WithTimeline.vue
@@ -1,20 +1,34 @@
 <script setup lang="ts">
 import TimelinePoint from "./TimelinePoint.vue";
 
-type Times = {
+interface Props {
     startTime?: string;
     endTime?: string;
-};
+}
 
-defineProps<Times>();
+defineProps<Props>();
 </script>
 
 <template>
-    <section
-        class="mt-10 h-full w-full border-l-4 border-white p-8 py-10 lg:w-4/6"
-    >
-        <TimelinePoint :timestamp="startTime" label="Início" />
-        <slot />
-        <TimelinePoint :timestamp="endTime" label="Fim" />
-    </section>
+    <div class="relative mx-auto w-full max-w-4xl py-4">
+        <TimelinePoint
+            v-if="startTime"
+            :timestamp="startTime"
+            label="Início"
+            type="start"
+        />
+
+        <div
+            class="relative my-6 space-y-6 sm:border-l sm:border-white/10 sm:pl-8"
+        >
+            <slot />
+        </div>
+
+        <TimelinePoint
+            v-if="endTime"
+            :timestamp="endTime"
+            label="Fim"
+            type="end"
+        />
+    </div>
 </template>
diff --git a/resources/js/Pages/Program.vue b/resources/js/Pages/Program.vue
index f26805b1..42c0f117 100644
--- a/resources/js/Pages/Program.vue
+++ b/resources/js/Pages/Program.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import AppLayout from "@/Layouts/AppLayout.vue";
+import ProgramDaySelector from "@/Components/Program/ProgramDaySelector.vue";
 import ProgramDayPanel from "@/Components/Program/ProgramDayPanel.vue";
 import type EventDay from "@/Types/EventDay";
-import { route } from "ziggy-js";
-import { Link } from "@inertiajs/vue3";
 
 interface Props {
+    days?: EventDay[];
     eventDay?: EventDay;
     queryDay: number;
     totalDays: number;
@@ -16,55 +16,36 @@ defineProps<Props>();
 
 <template>
     <AppLayout title="Programa">
-        <div
-            v-if="totalDays !== 0 && eventDay !== undefined"
-            class="flex flex-col items-center px-10 py-10 md:px-40"
-        >
-            <h2
-                class="bg-2025-blue mb-10 w-fit rounded-md p-2 px-5 text-3xl font-bold text-white"
-            >
-                Programa
-            </h2>
+        <div class="relative mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8">
+
+            <template v-if="totalDays !== 0 && eventDay !== undefined">
+                <ProgramDaySelector
+                    :days="days"
+                    :total-days="totalDays"
+                    :query-day="queryDay"
+                    :event-day="eventDay"
+                />
 
-            <section class="mb-5 flex flex-col items-center gap-5">
-                <div
-                    id="daySelection"
-                    class="flex w-fit flex-row flex-wrap justify-center gap-4"
-                >
-                    <template v-for="(day, idx) in totalDays" :key="idx">
-                        <Link
-                            :href="
-                                route(route().current() ?? 'program', {
-                                    day,
-                                })
-                            "
-                            as="span"
-                            :only="['eventDay', 'queryDay']"
-                            class="bg-2025-bg inline-flex h-16 w-16 cursor-pointer items-center justify-center rounded-xl rounded-xs text-xl font-bold text-white filter-[drop-shadow(0_0_0_rgba(0,0,0,0))] transition transition-transform duration-300 hover:scale-105 hover:drop-shadow-[0_8px_20px_rgba(255,255,255,0.28)] focus:outline-hidden"
-                            :class="day == queryDay ? 'bg-2025-blue' : ''"
-                            preserve-state
-                            preserve-scroll
-                        >
-                            {{ day }}
-                        </Link>
-                    </template>
+                <ProgramDayPanel
+                    :key="eventDay.id"
+                    :day="eventDay"
+                    :query-day="queryDay"
+                />
+            </template>
+
+            <div
+                v-else
+                class="flex flex-col items-center justify-center py-28 text-center"
+            >
+                <div class="pill-container mb-4 px-6 py-2.5">
+                    <span class="text-sm font-medium text-neutral-400">
+                        Em breve...
+                    </span>
                 </div>
-                <span class="text-text-color font-bold">{{
-                    $d(new Date(eventDay.date), "long")
-                }}</span>
-            </section>
-            <ProgramDayPanel :key="eventDay.id" :day="eventDay" />
-        </div>
-        <div v-else class="flex items-center justify-center">
-            <p class="pt-80 text-center text-5xl font-bold text-white">
-                Em breve...
-            </p>
+                <p class="max-w-md text-sm text-neutral-400">
+                    O programa da edição 2026 estará disponível brevemente.
+                </p>
+            </div>
         </div>
     </AppLayout>
 </template>
-
-<style scoped>
-.selected {
-    background-color: rgb(242, 147, 37);
-}
-</style>

From 8d0ad993eddfdb92f42e52986c21737df8f89c79 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Tue, 1 Sep 2026 19:49:10 +0100
Subject: [PATCH 04/33] changed background color to almost black

---
 resources/js/Layouts/AppLayout.vue | 2 +-
 resources/js/Pages/Maintenance.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 9e7e0768..e2de1cac 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -13,7 +13,7 @@ defineProps<Props>();
 </script>
 
 <template>
-    <div class="relative min-h-screen bg-black text-white">
+    <div class="relative min-h-screen bg-olive-950 text-white">
         <Head :title="title" />
 
         <GlowingOrbs />
diff --git a/resources/js/Pages/Maintenance.vue b/resources/js/Pages/Maintenance.vue
index 323a07c7..9e17c83d 100644
--- a/resources/js/Pages/Maintenance.vue
+++ b/resources/js/Pages/Maintenance.vue
@@ -6,7 +6,7 @@ import GlowingOrbs from "@/Components/GlowingOrbs.vue";
 <template>
     <Head title="semana de informática 2026" />
 
-    <div class="relative min-h-screen bg-black text-white">
+    <div class="relative min-h-screen bg-olive-950 text-white">
         <GlowingOrbs />
 
         <main class="relative z-10 min-h-screen">

From 4f52d2c065c42e1f90b51a413e1bf80209a11127 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Tue, 1 Sep 2026 20:22:34 +0100
Subject: [PATCH 05/33] feat: shop page done

---
 .../Components/Program/ProgramDaySelector.vue |  25 +-
 resources/js/Components/Shop/ShopItem.vue     | 539 ++++++++++++++----
 resources/js/Pages/Program.vue                |   1 -
 resources/js/Pages/Shop.vue                   |  89 +--
 resources/js/Types/ShopPage.ts                |  16 +-
 5 files changed, 501 insertions(+), 169 deletions(-)

diff --git a/resources/js/Components/Program/ProgramDaySelector.vue b/resources/js/Components/Program/ProgramDaySelector.vue
index f81ca31d..25fcfa2c 100644
--- a/resources/js/Components/Program/ProgramDaySelector.vue
+++ b/resources/js/Components/Program/ProgramDaySelector.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import { Link } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import type EventDay from "@/Types/EventDay";
@@ -11,7 +10,7 @@ interface Props {
     eventDay?: EventDay;
 }
 
-const props = defineProps<Props>();
+defineProps<Props>();
 
 const formatShortDate = (dateStr?: Date | string): string => {
     if (!dateStr) return "";
@@ -28,22 +27,6 @@ const formatShortDate = (dateStr?: Date | string): string => {
         return "";
     }
 };
-
-const formattedFullDate = computed(() => {
-    if (!props.eventDay?.date) return "";
-    try {
-        const d = new Date(props.eventDay.date);
-        const dateStr = d.toLocaleDateString("pt-PT", {
-            weekday: "long",
-            day: "numeric",
-            month: "long",
-            timeZone: "Europe/Lisbon",
-        });
-        return dateStr.charAt(0).toUpperCase() + dateStr.slice(1);
-    } catch {
-        return "";
-    }
-});
 </script>
 
 <template>
@@ -69,9 +52,7 @@ const formattedFullDate = computed(() => {
                     <span class="font-semibold">Dia {{ dayIndex }}</span>
                     <template
                         v-if="
-                            dayIndex === queryDay &&
-                            days &&
-                            days[dayIndex - 1]
+                            dayIndex === queryDay && days && days[dayIndex - 1]
                         "
                     >
                         <span class="opacity-35">•</span>
@@ -86,7 +67,7 @@ const formattedFullDate = computed(() => {
         <div v-if="eventDay" class="flex flex-col items-center gap-1.5">
             <p
                 v-if="eventDay.theme"
-                class="max-w-2xl text-sm font-normal leading-relaxed sm:text-base"
+                class="max-w-2xl text-sm leading-relaxed font-normal sm:text-base"
             >
                 {{ eventDay.theme }}
             </p>
diff --git a/resources/js/Components/Shop/ShopItem.vue b/resources/js/Components/Shop/ShopItem.vue
index e1a8c79b..f3dc08c5 100644
--- a/resources/js/Components/Shop/ShopItem.vue
+++ b/resources/js/Components/Shop/ShopItem.vue
@@ -1,158 +1,501 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import { reactive, ref, watch } from "vue";
+import { ref, computed, watch } from "vue";
 import { VueFinalModal } from "vue-final-modal";
 import "vue-final-modal/style.css";
-import type { User } from "@/Types/User";
-import { Link, router } from "@inertiajs/vue3";
+import { router } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import { type BuyableProduct } from "@/Types/ShopPage";
-
-const modalOpen = ref(false);
+import type { BuyableProduct } from "@/Types/ShopPage";
 
 interface Props {
     product: BuyableProduct;
-    user?: User;
+    points?: number;
     isEnrolled?: boolean;
     isParticipant?: boolean;
 }
 
 const props = defineProps<Props>();
+const modalOpen = ref(false);
+const isBuying = ref(false);
+const isRedeemingId = ref<number | null>(null);
+const deliverySearch = ref("");
 
-const product = reactive<BuyableProduct>({ ...props.product });
-
-watch(
-    () => props.product,
-    (newVal) => Object.assign(product, newVal),
+const product = computed(() => props.product);
+const isOutOfStock = computed(() => (product.value.stock ?? 0) <= 0);
+const hasEnrollments = computed(
+    () =>
+        product.value.enrollments !== null &&
+        product.value.enrollments !== undefined,
 );
 
-const buyProduct = () => {
-    router.post(route("shop.product.buy", { product: product.id }), undefined, {
-        preserveState: true,
-        onFinish: () => (modalOpen.value = false),
+const pendingDeliveriesCount = computed(() => {
+    if (!product.value.enrollments) return 0;
+    return product.value.enrollments.filter((e) => !e.pivot?.redeemed).length;
+});
+
+const totalDeliveriesCount = computed(() => {
+    return product.value.enrollments?.length ?? 0;
+});
+
+const filteredEnrollments = computed(() => {
+    const list = product.value.enrollments ?? [];
+    const q = deliverySearch.value.trim().toLowerCase();
+    if (!q) return list;
+    return list.filter((e) => {
+        const name = e.participant?.user?.name?.toLowerCase() ?? "";
+        const email = e.participant?.user?.email?.toLowerCase() ?? "";
+        return name.includes(q) || email.includes(q);
     });
+});
+
+const hasEnoughPoints = computed(() => {
+    if (props.points === undefined || props.points === null) return true;
+    return props.points >= product.value.price;
+});
+
+type ModalTab = "buy" | "deliveries";
+const activeTab = ref<ModalTab>("buy");
+
+watch(modalOpen, (isOpen) => {
+    if (isOpen) {
+        deliverySearch.value = "";
+        activeTab.value =
+            isOutOfStock.value && hasEnrollments.value ? "deliveries" : "buy";
+    }
+});
+
+const buyProduct = () => {
+    isBuying.value = true;
+    router.post(
+        route("shop.product.buy", { product: product.value.id }),
+        undefined,
+        {
+            preserveState: true,
+            onFinish: () => {
+                isBuying.value = false;
+                modalOpen.value = false;
+            },
+        },
+    );
+};
+
+const redeemProduct = (enrollmentId: number) => {
+    isRedeemingId.value = enrollmentId;
+    router.post(
+        route("shop.product.redeem", {
+            product: product.value.id,
+            enrollment: enrollmentId,
+        }),
+        undefined,
+        {
+            preserveState: true,
+            preserveScroll: true,
+            onFinish: () => {
+                isRedeemingId.value = null;
+            },
+        },
+    );
 };
 </script>
 
 <template>
-    <!-- CARD (glass style + hover) -->
     <div
-        class="group relative flex max-w-[20em] flex-col rounded-2xl border-0 bg-white/5 p-10 shadow-[0_0_40px_-12px_rgba(255,255,255,0.18)] ring-1 ring-white/10 backdrop-blur-xs transition-all duration-300 select-none hover:scale-[1.02] hover:shadow-[0_0_40px_-6px_rgba(29,155,240,0.45)] max-lg:p-8"
+        class="group relative flex h-full w-full flex-col justify-between rounded-3xl border border-white/8 bg-black/50 p-4 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.015] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-5"
     >
-        <!-- IMAGE -->
         <div
-            class="mb-6 flex h-[16em] items-center justify-center overflow-hidden rounded-xl bg-black/10"
+            class="relative aspect-square w-full overflow-hidden rounded-2xl bg-neutral-900 ring-1 ring-white/10"
         >
             <img
+                v-if="product.image_product_url"
                 :src="product.image_product_url"
-                alt=""
-                class="max-h-full max-w-full object-contain transition-transform duration-300 group-hover:scale-105"
+                :alt="product.name"
+                class="h-full w-full object-contain p-4 transition-transform duration-500 ease-out group-hover:scale-105"
+            />
+            <div
+                v-else
+                class="flex h-full w-full items-center justify-center text-neutral-600"
+            >
+                <svg
+                    class="h-10 w-10 opacity-30"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="1.5"
+                        d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+                    />
+                </svg>
+            </div>
+
+            <div
+                class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
             />
         </div>
 
-        <!-- NAME + PRICE + CTA -->
-        <div class="flex flex-1 flex-col justify-between gap-4 text-white">
-            <h2 class="mb-4 text-start text-xl font-bold">
-                {{ product.name }}
-            </h2>
-            <p>Quantidade: {{ product.stock }}</p>
+        <div class="mt-4 flex flex-1 flex-col justify-between">
+            <div>
+                <h4
+                    class="truncate text-base font-bold tracking-tight text-white transition-colors group-hover:text-neutral-200"
+                >
+                    {{ product.name }}
+                </h4>
+                <p
+                    class="mt-1 line-clamp-2 min-h-9 text-xs leading-relaxed font-light text-neutral-400"
+                >
+                    <span v-if="!isOutOfStock">
+                        {{ product.stock }}
+                        {{
+                            product.stock === 1
+                                ? "unidade disponível"
+                                : "unidades disponíveis"
+                        }}
+                    </span>
+                    <span v-else class="text-neutral-500">
+                        Item atualmente fora de stock
+                    </span>
+                </p>
+            </div>
 
-            <div class="flex items-center justify-between">
-                <div class="flex items-center gap-2 text-xl">
-                    <p>{{ product.price }}</p>
+            <div
+                class="mt-4 flex min-h-9 items-center justify-between border-t border-white/5 pt-3"
+            >
+                <div
+                    class="flex items-center gap-1.5 font-mono text-sm font-bold text-white"
+                >
+                    <span>{{ product.price }}</span>
                     <img
-                        class="w-5"
+                        class="h-3.5 w-3.5 object-contain"
+                        alt="SINFrão"
                         title="SINFrão"
-                        src="/images/cy-sinf-small.svg"
+                        src="/images/sinf-2026-sm.svg"
                     />
                 </div>
 
                 <button
-                    class="bg-2025-blue hover:text-2025-blue rounded-md px-4 py-2 text-sm font-semibold text-white transition-all duration-200 hover:bg-white focus:ring-2 focus:ring-white/60 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
-                    :disabled="!product.canBeBought && !product.enrollments"
+                    type="button"
+                    class="pill-container pill-item cursor-pointer gap-1 px-3.5 py-1 text-xs font-semibold transition-all"
+                    :class="[
+                        isOutOfStock && !hasEnrollments
+                            ? 'cursor-not-allowed text-neutral-500 opacity-40 hover:bg-transparent'
+                            : 'text-white hover:bg-white/15 active:scale-95',
+                    ]"
+                    :disabled="isOutOfStock && !hasEnrollments"
                     @click="modalOpen = true"
                 >
-                    Comprar
+                    <span v-if="hasEnrollments && isOutOfStock">Gerir</span>
+                    <span v-else-if="isOutOfStock">Esgotado</span>
+                    <span v-else>Comprar</span>
                 </button>
             </div>
         </div>
     </div>
 
-    <!-- MODAL -->
     <VueFinalModal
         v-model="modalOpen"
-        class="flex items-center justify-center overflow-clip"
-        content-class="max-w-xl max-h-[80%] mx-4 p-6
-                    rounded-xl border-[3px] border-2025-blue
-                    bg-2025-blue
-                    flex relative justify-center items-center flex-col gap-8"
+        class="z-50 flex items-center justify-center p-4"
+        overlay-class="bg-black/80 backdrop-blur-sm"
+        content-class="
+            relative w-full max-w-lg rounded-3xl border border-white/10
+            bg-[#111215] p-6 sm:p-7 text-white
+            flex flex-col gap-6 max-h-[90vh] overflow-hidden
+        "
     >
-        <template v-if="isEnrolled">
-            <img :src="product.image_product_url" class="w-48 object-contain" />
-            <p class="text-text-color">
-                Confirmar compra de <b>{{ product.name }}</b> por
-                {{ product.price }}?
-            </p>
-            <PrimaryButton @click="buyProduct">Comprar</PrimaryButton>
-        </template>
-
-        <template v-else>
-            <p class="text-text-color">
-                Antes de comprares este produto, inscreve-te!
-            </p>
-            <PrimaryButton
-                color="orange"
-                shadow="teal"
-                text-size="text-xl"
-                padding="sm:px-8"
-                @click="
-                    $page.props.auth.user
-                        ? router.put(route('enroll'))
-                        : router.get(route('register'))
-                "
+        <button
+            type="button"
+            class="pill-container absolute top-4 right-4 z-10 h-8 w-8 cursor-pointer justify-center text-neutral-400 transition-colors hover:text-white"
+            aria-label="Fechar"
+            @click="modalOpen = false"
+        >
+            <svg
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M6 18L18 6M6 6l12 12"
+                />
+            </svg>
+        </button>
+
+        <div
+            class="flex items-center gap-4 rounded-2xl border border-white/8 bg-white/5 p-3.5 pr-10 sm:p-4"
+        >
+            <div
+                class="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-neutral-900/80 p-2 ring-1 ring-white/10 sm:h-20 sm:w-20"
+            >
+                <img
+                    v-if="product.image_product_url"
+                    :src="product.image_product_url"
+                    :alt="product.name"
+                    class="max-h-full max-w-full object-contain"
+                />
+                <svg
+                    v-else
+                    class="h-7 w-7 text-neutral-600"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="1.5"
+                        d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+                    />
+                </svg>
+            </div>
+
+            <div class="min-w-0 flex-1 space-y-1.5">
+                <h3 class="truncate text-base font-bold text-white sm:text-lg">
+                    {{ product.name }}
+                </h3>
+                <div class="flex flex-wrap items-center gap-2">
+                    <div
+                        class="pill-container gap-1 px-2.5 py-0.5 text-xs text-white shadow-none"
+                    >
+                        <span class="font-bold">{{ product.price }}</span>
+                        <img
+                            class="h-3.5 w-3.5 object-contain"
+                            alt="SINFrão"
+                            src="/images/sinf-2026-sm.svg"
+                        />
+                    </div>
+                    <span
+                        v-if="isOutOfStock"
+                        class="rounded-full bg-red-500/15 px-2.5 py-0.5 text-[11px] text-red-400 ring-1 ring-red-500/20"
+                    >
+                        Esgotado
+                    </span>
+                    <span v-else class="text-xs text-neutral-400">
+                        {{ product.stock }} disponíveis
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="hasEnrollments" class="-my-2 flex justify-center">
+            <div
+                class="pill-container w-full justify-center gap-1 p-1 sm:w-auto"
+            >
+                <button
+                    type="button"
+                    class="pill-item flex-1 cursor-pointer justify-center gap-1.5 text-xs font-medium sm:flex-initial sm:text-sm"
+                    :class="{ 'pill-item-active': activeTab === 'buy' }"
+                    @click="activeTab = 'buy'"
+                >
+                    <span>Comprar</span>
+                </button>
+                <button
+                    type="button"
+                    class="pill-item flex-1 cursor-pointer justify-center gap-2 text-xs font-medium sm:flex-initial sm:text-sm"
+                    :class="{ 'pill-item-active': activeTab === 'deliveries' }"
+                    @click="activeTab = 'deliveries'"
+                >
+                    <span>Entregas</span>
+                    <span
+                        class="py-0.2 rounded-full px-1.5 text-[10px]"
+                        :class="
+                            pendingDeliveriesCount > 0
+                                ? 'bg-amber-500/25 text-amber-300 ring-1 ring-amber-500/30'
+                                : 'bg-white/10 text-neutral-400'
+                        "
+                    >
+                        {{ pendingDeliveriesCount }}
+                    </span>
+                </button>
+            </div>
+        </div>
+
+        <div v-if="activeTab === 'buy'" class="w-full space-y-4">
+            <div
+                v-if="isOutOfStock"
+                class="space-y-2 rounded-2xl border border-white/8 bg-white/5 p-4 text-center"
             >
-                Inscrever-me
-            </PrimaryButton>
-        </template>
-
-        <template
-            v-if="
-                product.enrollments !== null &&
-                product.enrollments !== undefined
-            "
+                <p class="text-sm font-medium text-neutral-300">
+                    Este produto está temporariamente esgotado.
+                </p>
+                <p class="text-xs text-neutral-500">
+                    Fica atento a eventuais reposições de stock durante o
+                    evento.
+                </p>
+            </div>
+
+            <template v-else-if="isEnrolled">
+                <div
+                    v-if="points !== null && points !== undefined"
+                    class="space-y-2.5 rounded-2xl border border-white/8 bg-white/5 p-4 text-xs"
+                >
+                    <div
+                        class="flex items-center justify-between text-neutral-400"
+                    >
+                        <span>O teu saldo atual:</span>
+                        <span class="font-bold text-white"
+                            >{{ points }} SINFrões</span
+                        >
+                    </div>
+                    <div
+                        class="flex items-center justify-between text-neutral-400"
+                    >
+                        <span>Preço do produto:</span>
+                        <span class="font-bold text-red-400"
+                            >-{{ product.price }} SINFrões</span
+                        >
+                    </div>
+                    <div
+                        class="flex items-center justify-between border-t border-white/8 pt-2 font-bold"
+                        :class="
+                            hasEnoughPoints
+                                ? 'text-emerald-400'
+                                : 'text-red-400'
+                        "
+                    >
+                        <span>Saldo após compra:</span>
+                        <span>{{ points - product.price }} SINFrões</span>
+                    </div>
+                </div>
+
+                <div
+                    v-if="
+                        !hasEnoughPoints &&
+                        points !== undefined &&
+                        points !== null
+                    "
+                    class="rounded-2xl border border-red-500/20 bg-red-500/10 p-3.5 text-center text-xs text-red-300"
+                >
+                    Precisas de mais
+                    <span class="font-bold"
+                        >{{ product.price - points }} SINFrões</span
+                    >
+                    para efetuar esta compra.
+                </div>
+
+                <div class="flex items-center justify-end gap-3 pt-2">
+                    <button
+                        type="button"
+                        class="pill-container pill-item cursor-pointer px-5 py-2 text-xs font-medium text-neutral-400 hover:text-white"
+                        @click="modalOpen = false"
+                    >
+                        Cancelar
+                    </button>
+                    <button
+                        type="button"
+                        class="pill-container pill-item bg-sinf-crimson/80 hover:bg-sinf-crimson cursor-pointer px-6 py-2 text-xs font-semibold text-white transition-all active:scale-95 disabled:cursor-not-allowed disabled:opacity-40"
+                        :disabled="!hasEnoughPoints || isBuying"
+                        @click="buyProduct"
+                    >
+                        <span v-if="isBuying">A processar...</span>
+                        <span v-else>Confirmar Compra</span>
+                    </button>
+                </div>
+            </template>
+
+            <template v-else>
+                <div
+                    class="flex flex-col items-center justify-center space-y-4 rounded-2xl border border-white/8 bg-white/5 p-5 text-center"
+                >
+                    <p class="text-sm leading-relaxed text-neutral-300">
+                        Para comprares produtos na loja oficial, precisas de te
+                        inscrever na SINF 2026.
+                    </p>
+                    <button
+                        type="button"
+                        class="pill-container pill-item bg-sinf-purple/80 hover:bg-sinf-purple cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95"
+                        @click="
+                            $page.props.auth.user
+                                ? router.put(route('enroll'))
+                                : router.get(route('register'))
+                        "
+                    >
+                        Inscrever-me
+                    </button>
+                </div>
+            </template>
+        </div>
+
+        <div
+            v-else-if="activeTab === 'deliveries'"
+            class="flex min-h-0 w-full flex-1 flex-col space-y-3"
         >
             <div
-                v-if="product.enrollments.length > 0"
-                class="border-2025-blue flex max-h-72 w-full flex-col items-center overflow-y-auto rounded-lg border-[3px] bg-white/5 shadow-[0_0_20px_-8px_rgba(255,255,255,0.2)] backdrop-blur-xs"
+                class="flex items-center justify-between text-xs text-neutral-400"
+            >
+                <span>{{ totalDeliveriesCount }} compras registadas</span>
+                <span
+                    :class="
+                        pendingDeliveriesCount > 0
+                            ? 'font-semibold text-amber-400'
+                            : 'text-emerald-400'
+                    "
+                >
+                    {{ pendingDeliveriesCount }} por entregar
+                </span>
+            </div>
+
+            <div v-if="totalDeliveriesCount > 3" class="relative">
+                <input
+                    v-model="deliverySearch"
+                    type="text"
+                    placeholder="Pesquisar participante ou email..."
+                    class="w-full rounded-2xl border border-white/10 bg-white/5 px-3.5 py-2 text-xs text-white placeholder-neutral-500 focus:border-white/20 focus:ring-1 focus:ring-white/20 focus:outline-hidden"
+                />
+            </div>
+
+            <div
+                v-if="filteredEnrollments.length > 0"
+                class="max-h-64 space-y-2 overflow-y-auto pr-1"
             >
                 <div
-                    v-for="enrollment in product.enrollments"
+                    v-for="enrollment in filteredEnrollments"
                     :key="enrollment.id"
-                    class="even:bg-2025-blue/15 flex w-full items-center justify-between gap-3 p-3"
+                    class="flex items-center justify-between gap-3 rounded-2xl border border-white/8 bg-white/5 p-3 text-xs"
                 >
-                    {{ enrollment.participant?.user?.name ?? enrollment.id }} -
-                    {{ enrollment.participant?.user?.email ?? enrollment.id }}
-                    <Link
-                        v-if="!enrollment.pivot.redeemed"
-                        :href="
-                            route('shop.product.redeem', {
-                                product: product.id,
-                                enrollment: enrollment.id,
-                            })
-                        "
-                        method="post"
-                        class="font-semibold text-white hover:underline"
+                    <div class="flex min-w-0 flex-col">
+                        <span class="truncate font-semibold text-white">
+                            {{
+                                enrollment.participant?.user?.name ??
+                                `Inscrição #${enrollment.id}`
+                            }}
+                        </span>
+                        <span class="truncate text-[11px] text-neutral-400">
+                            {{ enrollment.participant?.user?.email }}
+                        </span>
+                    </div>
+
+                    <span
+                        v-if="enrollment.pivot?.redeemed"
+                        class="shrink-0 rounded-full bg-emerald-500/15 px-2.5 py-1 text-[10px] text-emerald-400 ring-1 ring-emerald-500/25"
+                    >
+                        Entregue
+                    </span>
+                    <button
+                        v-else
+                        type="button"
+                        class="pill-container pill-item shrink-0 cursor-pointer bg-white/10 px-3 py-1 text-[11px] font-semibold text-white transition-colors hover:bg-white/20 active:scale-95 disabled:opacity-50"
+                        :disabled="isRedeemingId === enrollment.id"
+                        @click="redeemProduct(enrollment.id)"
                     >
-                        Entregar
-                    </Link>
+                        <span v-if="isRedeemingId === enrollment.id">...</span>
+                        <span v-else>Entregar</span>
+                    </button>
                 </div>
             </div>
 
-            <div v-else class="flex h-full flex-1 items-center justify-center">
-                <p class="text-2025-blue text-center text-2xl font-bold">
-                    Ainda nenhum participante comprou este produto.
-                </p>
+            <div
+                v-else
+                class="rounded-2xl border border-white/5 bg-white/2 py-6 text-center text-xs text-neutral-500"
+            >
+                {{
+                    deliverySearch
+                        ? "Nenhum participante encontrado com esse termo."
+                        : "Ainda nenhum participante comprou este produto."
+                }}
             </div>
-        </template>
+        </div>
     </VueFinalModal>
 </template>
diff --git a/resources/js/Pages/Program.vue b/resources/js/Pages/Program.vue
index 42c0f117..764d8b90 100644
--- a/resources/js/Pages/Program.vue
+++ b/resources/js/Pages/Program.vue
@@ -17,7 +17,6 @@ defineProps<Props>();
 <template>
     <AppLayout title="Programa">
         <div class="relative mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8">
-
             <template v-if="totalDays !== 0 && eventDay !== undefined">
                 <ProgramDaySelector
                     :days="days"
diff --git a/resources/js/Pages/Shop.vue b/resources/js/Pages/Shop.vue
index 936cf7c4..c2696f1d 100644
--- a/resources/js/Pages/Shop.vue
+++ b/resources/js/Pages/Shop.vue
@@ -15,53 +15,60 @@ defineProps<Props>();
 
 <template>
     <AppLayout title="Loja">
-        <template v-if="products.length > 0">
+        <div class="relative mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
             <div
-                class="flex content-center items-center justify-center self-center py-4"
+                v-if="points !== null && points !== undefined"
+                class="mb-10 flex justify-center"
             >
-                <h2
-                    id="aboutus"
-                    class="bg-2025-blue mb-5 w-fit rounded-md p-3 px-6 text-3xl font-bold text-white xl:text-3xl 2xl:text-4xl"
+                <div
+                    class="pill-container gap-2.5 px-5 py-2 text-xs text-neutral-300 shadow-none sm:text-sm"
                 >
-                    Loja
-                </h2>
+                    <span>O teu saldo:</span>
+                    <span
+                        class="flex items-center gap-1.5 font-bold text-white"
+                    >
+                        <span class="text-sm font-semibold sm:text-base">{{
+                            points
+                        }}</span>
+                        <img
+                            class="h-4 w-4 object-contain"
+                            alt="SINFrão"
+                            title="SINFrão"
+                            src="/images/sinf-2026-sm.svg"
+                        />
+                    </span>
+                </div>
             </div>
-            <p
-                v-if="points !== null"
-                class="text-text-color py-10 text-center text-xl font-bold"
-            >
-                Tens {{ points }}
-                <img
-                    class="inline w-5 align-text-top"
-                    alt="SINFrão"
-                    title="SINFrão"
-                    src="/images/cy-sinf-small.svg"
-                />
-            </p>
-            <section
-                class="align-center grid justify-center gap-10 px-32"
-                style="
-                    grid-template-columns: repeat(
-                        auto-fill,
-                        minmax(18em, 20em)
-                    );
-                "
+
+            <template v-if="products.length > 0">
+                <section
+                    class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 md:grid-cols-3 lg:grid-cols-4"
+                >
+                    <ShopItem
+                        v-for="product in products"
+                        :key="product.id"
+                        :product="product"
+                        :points="points"
+                        :is-participant="isParticipant"
+                        :is-enrolled="isEnrolled"
+                    />
+                </section>
+            </template>
+
+            <div
+                v-else
+                class="flex flex-col items-center justify-center py-28 text-center"
             >
-                <ShopItem
-                    v-for="product in products"
-                    :key="product.id"
-                    :product="product"
-                    :is-participant="isParticipant"
-                    :is-enrolled="isEnrolled"
-                />
-            </section>
-        </template>
-        <template v-else>
-            <div class="flex items-center justify-center">
-                <p class="pt-80 text-center text-5xl font-bold text-white">
-                    Em breve...
+                <div class="pill-container mb-4 px-6 py-2.5">
+                    <span class="text-sm font-medium text-neutral-400">
+                        Em breve...
+                    </span>
+                </div>
+                <p class="max-w-md text-sm text-neutral-400">
+                    A loja da edição 2026 estará disponível brevemente. Fica
+                    atento às novidades!
                 </p>
             </div>
-        </template>
+        </div>
     </AppLayout>
 </template>
diff --git a/resources/js/Types/ShopPage.ts b/resources/js/Types/ShopPage.ts
index 76e40a8d..86786a9e 100644
--- a/resources/js/Types/ShopPage.ts
+++ b/resources/js/Types/ShopPage.ts
@@ -1,11 +1,13 @@
 import type Enrollment from "./Enrollment";
 import type Product from "./Product";
 
-export type BuyableProduct = Product & {
-    canBeBought: number;
-    enrollments?: (Enrollment & {
-        pivot: {
-            redeemed: boolean;
-        };
-    })[];
+export interface EnrollmentWithRedeemed extends Enrollment {
+    pivot: {
+        redeemed: boolean;
+    };
+}
+
+export type BuyableProduct = Omit<Product, "enrollments"> & {
+    canBeBought?: boolean | number;
+    enrollments?: EnrollmentWithRedeemed[];
 };

From 19c7b3790d2eda5b6d3c07e88c79dc074dcac86a Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Tue, 1 Sep 2026 21:32:05 +0100
Subject: [PATCH 06/33] feat: team page

---
 .../js/Components/Team/DepartmentSection.vue  |  38 +++
 .../js/Components/Team/DepartmentSelector.vue |  78 +++++
 resources/js/Components/Team/SINFTeam.vue     |  41 +--
 resources/js/Components/Team/TeamMember.vue   | 276 ++++++++++++++----
 resources/js/Pages/Team.vue                   | 166 +++++++++--
 5 files changed, 484 insertions(+), 115 deletions(-)
 create mode 100644 resources/js/Components/Team/DepartmentSection.vue
 create mode 100644 resources/js/Components/Team/DepartmentSelector.vue

diff --git a/resources/js/Components/Team/DepartmentSection.vue b/resources/js/Components/Team/DepartmentSection.vue
new file mode 100644
index 00000000..a5c5813f
--- /dev/null
+++ b/resources/js/Components/Team/DepartmentSection.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type Department from "@/Types/Department";
+import TeamMember from "./TeamMember.vue";
+
+interface Props {
+    department: Department;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+    <section
+        v-if="(department.staff?.length ?? 0) > 0"
+        :id="`dept-${department.id}`"
+        class="w-full"
+    >
+        <div class="mb-8 flex items-center justify-center">
+            <div class="pill-container gap-2 px-5 py-2 shadow-none">
+                <h3
+                    class="text-xs font-semibold tracking-wider text-neutral-200 uppercase sm:text-sm"
+                >
+                    {{ department.name }}
+                </h3>
+            </div>
+        </div>
+
+        <div
+            class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 md:grid-cols-3 lg:grid-cols-4"
+        >
+            <TeamMember
+                v-for="staff in department.staff"
+                :key="staff.id"
+                :staff="staff"
+            />
+        </div>
+    </section>
+</template>
diff --git a/resources/js/Components/Team/DepartmentSelector.vue b/resources/js/Components/Team/DepartmentSelector.vue
new file mode 100644
index 00000000..1ee06623
--- /dev/null
+++ b/resources/js/Components/Team/DepartmentSelector.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type Department from "@/Types/Department";
+
+interface Props {
+    departments: Department[];
+    selectedId: number | null;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "select", id: number | null): void;
+}>();
+
+const departmentsWithStaff = computed(() =>
+    props.departments.filter((d) => (d.staff?.length ?? 0) > 0),
+);
+
+const totalMembers = computed(() =>
+    departmentsWithStaff.value.reduce(
+        (sum, d) => sum + (d.staff?.length ?? 0),
+        0,
+    ),
+);
+</script>
+
+<template>
+    <div
+        v-if="departmentsWithStaff.length > 1"
+        class="mb-10 flex justify-center"
+    >
+        <div
+            class="pill-container max-w-full flex-wrap justify-center gap-1.5 p-1.5"
+        >
+            <button
+                type="button"
+                class="pill-item cursor-pointer gap-1.5 px-4 py-2 text-xs font-medium transition-all duration-200 sm:text-sm"
+                :class="{ 'pill-item-active': selectedId === null }"
+                @click="emit('select', null)"
+            >
+                <span>Todos</span>
+                <span
+                    class="py-0.2 rounded-full px-1.5 text-[10px] transition-colors"
+                    :class="
+                        selectedId === null
+                            ? 'bg-white/20 text-white'
+                            : 'bg-white/8 text-neutral-400'
+                    "
+                >
+                    {{ totalMembers }}
+                </span>
+            </button>
+
+            <button
+                v-for="dept in departmentsWithStaff"
+                :key="dept.id"
+                type="button"
+                class="pill-item cursor-pointer gap-1.5 px-4 py-2 text-xs font-medium transition-all duration-200 sm:text-sm"
+                :class="{ 'pill-item-active': selectedId === dept.id }"
+                @click="emit('select', dept.id)"
+            >
+                <span>{{ dept.name }}</span>
+                <span
+                    v-if="dept.staff?.length"
+                    class="py-0.2 rounded-full px-1.5 text-[10px] transition-colors"
+                    :class="
+                        selectedId === dept.id
+                            ? 'bg-white/20 text-white'
+                            : 'bg-white/8 text-neutral-400'
+                    "
+                >
+                    {{ dept.staff.length }}
+                </span>
+            </button>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Components/Team/SINFTeam.vue b/resources/js/Components/Team/SINFTeam.vue
index 413209a9..05708c12 100644
--- a/resources/js/Components/Team/SINFTeam.vue
+++ b/resources/js/Components/Team/SINFTeam.vue
@@ -1,42 +1,15 @@
 <script setup lang="ts">
 import type Department from "@/Types/Department";
-import TeamMember from "./TeamMember.vue";
+import DepartmentSection from "./DepartmentSection.vue";
 
-const shadowColor: Record<string, string> = {
-    orange: "shadow-black/80",
-    "teal-dark": "shadow-2023-teal-dark",
-    "red-dark": "shadow-2023-red-dark",
-    red: "shadow-2023-red",
-    teal: "shadow-2023-teal",
-};
-
-defineProps<{
+interface Props {
     department: Department;
-    color: string;
-}>();
+    color?: string;
+}
+
+defineProps<Props>();
 </script>
 
 <template>
-    <section
-        v-if="(department.staff?.length ?? 0) > 0"
-        class="flex flex-col items-center gap-4"
-    >
-        <p
-            class="text-text-color bg-2025-blue-dark w-fit rounded-md p-2 px-6 text-center text-xl font-bold"
-            :class="shadowColor[color]"
-        >
-            {{ department.name }}
-        </p>
-        <section class="flex flex-row flex-wrap justify-center gap-4">
-            <div
-                v-for="(staff, idx) in department.staff"
-                :key="idx"
-                class="flex flex-col items-center"
-            >
-                <TeamMember :staff="staff" :color="color"></TeamMember>
-            </div>
-        </section>
-    </section>
+    <DepartmentSection :department="department" />
 </template>
-
-<style></style>
diff --git a/resources/js/Components/Team/TeamMember.vue b/resources/js/Components/Team/TeamMember.vue
index 3551780a..0782f907 100644
--- a/resources/js/Components/Team/TeamMember.vue
+++ b/resources/js/Components/Team/TeamMember.vue
@@ -1,72 +1,242 @@
 <script setup lang="ts">
+import { computed, ref } from "vue";
 import type Staff from "@/Types/Staff";
-import { OhVueIcon } from "oh-vue-icons";
-import { computed } from "vue";
 
-const socialIcon: Record<string, string> = {
-    github: "io-logo-github",
-    linkedin: "io-logo-linkedin",
-    website: "io-globe",
-};
+interface Props {
+    staff: Staff;
+}
 
-const bgColor: Record<string, string> = {
-    orange: "bg-2023-orange",
-    "teal-dark": "bg-2023-teal-dark",
-    "red-dark": "bg-2023-red-dark",
-    red: "bg-2023-red",
-    teal: "bg-2023-teal",
-};
+const props = defineProps<Props>();
 
-const props = defineProps<{
-    color: string;
-    staff: Staff;
-}>();
+const imageError = ref(false);
 
 const staff = computed(() => props.staff);
-const color = computed(() => props.color);
-
-const socialMedia = computed(() => {
-    return Object.fromEntries(
-        Object.entries(staff.value.participant?.social_media ?? {}).filter(
-            ([key, value]) =>
-                ["github", "linkedin", "website"].includes(key) &&
-                value != null,
-        ),
-    ) as Record<"github" | "linkedin" | "website", string>;
+const user = computed(() => staff.value.participant?.user);
+const name = computed(() => user.value?.name ?? "Membro da Equipa");
+const photoUrl = computed(() => user.value?.profile_photo_url);
+const isCoordinator = computed(() => Boolean(staff.value.coordinator));
+
+const rawSocialMedia = computed(() => {
+    const p = staff.value.participant as
+        | (typeof staff.value.participant & {
+              socialMedia?: Record<string, string | null | undefined>;
+          })
+        | undefined;
+    return p?.social_media ?? p?.socialMedia ?? {};
+});
+
+const formatSocialUrl = (platform: string, val: string): string => {
+    const trimmed = val.trim();
+    if (!trimmed) return "";
+    if (platform === "email") {
+        return trimmed.startsWith("mailto:") ? trimmed : `mailto:${trimmed}`;
+    }
+    if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) {
+        return trimmed;
+    }
+    if (platform === "github") {
+        return `https://github.com/${trimmed.replace(/^@/, "")}`;
+    }
+    if (platform === "linkedin") {
+        return `https://linkedin.com/in/${trimmed.replace(/^@/, "")}`;
+    }
+    if (platform === "instagram") {
+        return `https://instagram.com/${trimmed.replace(/^@/, "")}`;
+    }
+    if (platform === "twitter") {
+        return `https://x.com/${trimmed.replace(/^@/, "")}`;
+    }
+    return `https://${trimmed}`;
+};
+
+const socialLinks = computed(() => {
+    const supported = [
+        "github",
+        "linkedin",
+        "website",
+        "instagram",
+        "twitter",
+        "email",
+    ] as const;
+    const entries: {
+        platform: (typeof supported)[number];
+        url: string;
+        label: string;
+    }[] = [];
+
+    for (const key of supported) {
+        const val = rawSocialMedia.value[key];
+        if (typeof val === "string" && val.trim().length > 0) {
+            entries.push({
+                platform: key,
+                url: formatSocialUrl(key, val),
+                label:
+                    key === "email"
+                        ? "Email"
+                        : key === "website"
+                          ? "Website"
+                          : key.charAt(0).toUpperCase() + key.slice(1),
+            });
+        }
+    }
+
+    return entries;
 });
 </script>
 
 <template>
     <div
-        class="group relative flex w-fit flex-col items-center overflow-hidden rounded-full"
+        class="group relative flex h-full w-full flex-col justify-between rounded-3xl border border-white/8 bg-black/50 p-4 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.015] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-5"
     >
-        <img
-            :src="staff.participant?.user?.profile_photo_url"
-            :alt="`${staff.participant?.user?.name}'s image`"
-            class="h-40 w-40 rounded-full object-cover shadow transition-all duration-300 group-hover:scale-[1.02] group-hover:shadow-2xl group-hover:brightness-95"
-        />
         <div
-            v-if="Object.keys(socialMedia).length > 0"
-            class="absolute -bottom-32 flex w-full flex-row items-center justify-center pt-1 pb-10 transition-all group-hover:-bottom-7"
-            :class="bgColor[color]"
+            class="relative aspect-square w-full overflow-hidden rounded-2xl bg-neutral-900 ring-1 ring-white/10"
         >
-            <a
-                v-for="(social, key, idx) in socialMedia"
-                :key="idx"
-                :href="social"
-                target="_blank"
+            <img
+                v-if="photoUrl && !imageError"
+                :src="photoUrl"
+                :alt="name"
+                class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+                @error="imageError = true"
+            />
+            <div
+                v-else
+                class="flex h-full w-full items-center justify-center bg-neutral-900 text-neutral-600"
             >
-                <OhVueIcon
-                    fill="white"
-                    :name="socialIcon[key]"
-                    scale="1.4"
-                ></OhVueIcon>
-            </a>
+                <svg
+                    class="h-16 w-16 opacity-40"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="1.5"
+                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                    />
+                </svg>
+            </div>
+
+            <div
+                class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+            />
+        </div>
+
+        <div class="mt-4 flex flex-1 flex-col justify-between">
+            <div>
+                <h4
+                    class="truncate text-base font-bold tracking-tight text-white transition-colors group-hover:text-neutral-200"
+                >
+                    {{ name }}
+                </h4>
+                <p class="mt-1 line-clamp-1 text-xs text-neutral-400">
+                    <span
+                        v-if="isCoordinator"
+                        class="font-medium text-neutral-400"
+                    >
+                        Coordenador(a)
+                    </span>
+                    <span v-else class="text-neutral-400">
+                        Membro da Equipa
+                    </span>
+                </p>
+            </div>
+
+            <div
+                class="mt-4 flex min-h-8 items-center justify-between border-t border-white/5 pt-3"
+            >
+                <div
+                    v-if="socialLinks.length > 0"
+                    class="flex flex-wrap items-center gap-1.5"
+                >
+                    <a
+                        v-for="item in socialLinks"
+                        :key="item.platform"
+                        :href="item.url"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-all hover:bg-white/10 hover:text-white"
+                        :aria-label="item.label"
+                    >
+                        <svg
+                            v-if="item.platform === 'github'"
+                            class="h-4 w-4"
+                            fill="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path
+                                fill-rule="evenodd"
+                                clip-rule="evenodd"
+                                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                            />
+                        </svg>
+
+                        <svg
+                            v-else-if="item.platform === 'linkedin'"
+                            class="h-4 w-4"
+                            fill="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path
+                                d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"
+                            />
+                        </svg>
+
+                        <svg
+                            v-else-if="item.platform === 'website'"
+                            class="h-4 w-4"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
+                            />
+                        </svg>
+
+                        <svg
+                            v-else-if="item.platform === 'instagram'"
+                            class="h-4 w-4"
+                            fill="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path
+                                d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"
+                            />
+                        </svg>
+
+                        <svg
+                            v-else-if="item.platform === 'twitter'"
+                            class="h-4 w-4"
+                            fill="currentColor"
+                            viewBox="0 0 24 24"
+                        >
+                            <path
+                                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+                            />
+                        </svg>
+
+                        <svg
+                            v-else-if="item.platform === 'email'"
+                            class="h-4 w-4"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                            />
+                        </svg>
+                    </a>
+                </div>
+                <div v-else class="text-[11px] text-neutral-600">SINF 2026</div>
+            </div>
         </div>
     </div>
-    <p class="text-text-color max-w-[13em] text-center font-bold">
-        {{ staff.participant?.user?.name }}
-    </p>
 </template>
-
-<style></style>
diff --git a/resources/js/Pages/Team.vue b/resources/js/Pages/Team.vue
index 4245aaea..3cbccc2e 100644
--- a/resources/js/Pages/Team.vue
+++ b/resources/js/Pages/Team.vue
@@ -1,46 +1,156 @@
 <script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 import type Department from "@/Types/Department";
 import AppLayout from "@/Layouts/AppLayout.vue";
-import SINFTeam from "@/Components/Team/SINFTeam.vue";
+import DepartmentSection from "@/Components/Team/DepartmentSection.vue";
+import DepartmentSelector from "@/Components/Team/DepartmentSelector.vue";
 
 interface Props {
     departments: Department[];
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
-const colors: Array<string> = ["2025-bg"];
+const selectedDepartmentId = ref<number | null>(null);
+const isAtBottom = ref(false);
+
+const departmentsWithStaff = computed(() =>
+    props.departments.filter((d) => (d.staff?.length ?? 0) > 0),
+);
+
+const hasStaff = computed(() => departmentsWithStaff.value.length > 0);
+
+const displayedDepartments = computed(() => {
+    if (selectedDepartmentId.value === null) {
+        return departmentsWithStaff.value;
+    }
+    return departmentsWithStaff.value.filter(
+        (d) => d.id === selectedDepartmentId.value,
+    );
+});
+
+function updateScrollState() {
+    const scrollY = window.scrollY || window.pageYOffset;
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+
+    isAtBottom.value = scrollY + windowHeight >= documentHeight - 60;
+}
+
+function handleQuickScroll() {
+    if (isAtBottom.value) {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+        return;
+    }
+
+    const sections = Array.from(
+        document.querySelectorAll<HTMLElement>("section"),
+    );
+    if (!sections.length) return;
+
+    const currentY = window.scrollY || window.pageYOffset;
+    const navOffset = 70;
+
+    const nextSection = sections.find((section) => {
+        const top = section.getBoundingClientRect().top + currentY;
+        return top > currentY + navOffset + 20;
+    });
+
+    if (nextSection) {
+        const targetY =
+            nextSection.getBoundingClientRect().top + currentY - navOffset;
+        window.scrollTo({ top: targetY, behavior: "smooth" });
+    } else {
+        window.scrollTo({
+            top: document.documentElement.scrollHeight,
+            behavior: "smooth",
+        });
+    }
+}
+
+onMounted(() => {
+    updateScrollState();
+    window.addEventListener("scroll", updateScrollState, { passive: true });
+    window.addEventListener("resize", updateScrollState, { passive: true });
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener("scroll", updateScrollState);
+    window.removeEventListener("resize", updateScrollState);
+});
 </script>
 
 <template>
     <AppLayout title="Equipa">
-        <div
-            v-if="departments.length > 0"
-            class="flex flex-col items-center gap-7 py-4"
+        <button
+            v-if="hasStaff && displayedDepartments.length > 1"
+            type="button"
+            :aria-label="
+                isAtBottom ? 'Scroll to top' : 'Scroll to next department'
+            "
+            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
+            @click="handleQuickScroll"
         >
-            <h2
-                class="w-fi bg-2025-blue rounded-md p-3 text-center text-2xl font-bold text-white xl:text-3xl 2xl:text-4xl"
+            <svg
+                v-if="isAtBottom"
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
             >
-                Equipa
-            </h2>
-            <SINFTeam
-                v-for="department in departments"
-                :key="department.id"
-                :color="colors[department.id % colors.length]"
-                :department="department"
-            ></SINFTeam>
-        </div>
-        <div v-else>
-            <p class="pt-80 text-center text-5xl font-bold text-white">
-                Em breve...
-            </p>
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 10l7-7m0 0l7 7m-7-7v18"
+                />
+            </svg>
+            <svg
+                v-else
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 14l-7 7m0 0l-7-7m7 7V3"
+                />
+            </svg>
+        </button>
+
+        <div class="relative mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
+            <template v-if="hasStaff">
+                <DepartmentSelector
+                    :departments="departments"
+                    :selected-id="selectedDepartmentId"
+                    @select="selectedDepartmentId = $event"
+                />
+
+                <div class="space-y-16 sm:space-y-20">
+                    <DepartmentSection
+                        v-for="department in displayedDepartments"
+                        :key="department.id"
+                        :department="department"
+                    />
+                </div>
+            </template>
+
+            <div
+                v-else
+                class="flex flex-col items-center justify-center py-28 text-center"
+            >
+                <div class="pill-container mb-4 px-6 py-2.5">
+                    <span class="text-sm font-medium text-neutral-400">
+                        Em breve...
+                    </span>
+                </div>
+                <p class="max-w-md text-sm text-neutral-400">
+                    A equipa da edição 2026 estará disponível brevemente.
+                </p>
+            </div>
         </div>
     </AppLayout>
 </template>
-
-<style scoped>
-main {
-    padding: 2rem;
-    padding-inline: 4rem;
-}
-</style>

From c038acad763ca3cf4b023bc8d3d7a8c91d03d688 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Tue, 1 Sep 2026 23:45:46 +0100
Subject: [PATCH 07/33] feat: competition pages

---
 .../Competition/CompetitionLeaderboard.vue    |  88 +++
 .../js/Components/Competition/Podium.vue      | 240 +++++++++
 resources/js/Components/Podium.vue            | 434 +--------------
 resources/js/Pages/Competition.vue            | 500 ++++++++++++------
 4 files changed, 693 insertions(+), 569 deletions(-)
 create mode 100644 resources/js/Components/Competition/CompetitionLeaderboard.vue
 create mode 100644 resources/js/Components/Competition/Podium.vue

diff --git a/resources/js/Components/Competition/CompetitionLeaderboard.vue b/resources/js/Components/Competition/CompetitionLeaderboard.vue
new file mode 100644
index 00000000..67b560b1
--- /dev/null
+++ b/resources/js/Components/Competition/CompetitionLeaderboard.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type CompetitionTeam from "@/Types/CompetitionTeam";
+
+interface Props {
+    teams?: CompetitionTeam[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    teams: () => [],
+});
+</script>
+
+<template>
+    <section class="w-full">
+        <div
+            v-if="props.teams.length > 0"
+            class="overflow-hidden rounded-3xl border border-white/8 bg-black/50 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md"
+        >
+            <div class="divide-y divide-white/5">
+                <div
+                    v-for="(team, index) in props.teams"
+                    :key="team.id"
+                    class="group flex items-center justify-between gap-4 px-5 py-4 transition-colors duration-150 hover:bg-white/4 sm:px-6 sm:py-4.5"
+                >
+                    <div class="flex min-w-0 items-center gap-4 sm:gap-6">
+                        <span
+                            class="w-6 shrink-0 font-mono text-xs font-bold sm:w-8 sm:text-sm"
+                            :class="[
+                                index === 0
+                                    ? 'text-amber-300'
+                                    : index === 1
+                                      ? 'text-slate-300'
+                                      : index === 2
+                                        ? 'text-amber-500'
+                                        : 'text-neutral-500',
+                            ]"
+                        >
+                            #{{ index + 1 }}
+                        </span>
+
+                        <div class="min-w-0 flex-1">
+                            <h4
+                                class="truncate text-sm font-bold text-white transition-colors group-hover:text-neutral-200 sm:text-base"
+                            >
+                                {{ team.name }}
+                            </h4>
+                            <p
+                                v-if="team.members && team.members.length > 0"
+                                class="mt-0.5 truncate text-xs text-neutral-400"
+                            >
+                                {{
+                                    team.members
+                                        .map((m) => m.user?.name)
+                                        .filter(Boolean)
+                                        .join(", ")
+                                }}
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="shrink-0">
+                        <div
+                            class="pill-container gap-1 px-3 py-1 text-xs font-bold text-white shadow-none sm:text-sm"
+                        >
+                            <span>{{ team.points }}</span>
+                            <span class="text-[10px] font-normal text-neutral-400 sm:text-xs">pts</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Empty State -->
+        <div
+            v-else
+            class="flex flex-col items-center justify-center py-20 text-center"
+        >
+            <div class="pill-container mb-3 px-5 py-2">
+                <span class="text-sm font-medium text-neutral-400">
+                    Sem equipas registadas
+                </span>
+            </div>
+            <p class="text-xs text-neutral-500">
+                Ainda não existem equipas registadas nesta competição.
+            </p>
+        </div>
+    </section>
+</template>
diff --git a/resources/js/Components/Competition/Podium.vue b/resources/js/Components/Competition/Podium.vue
new file mode 100644
index 00000000..14deb171
--- /dev/null
+++ b/resources/js/Components/Competition/Podium.vue
@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type CompetitionTeam from "@/Types/CompetitionTeam";
+import type { CompetitionPrizes } from "@/Types/Competition";
+
+interface Props {
+    mode?: "winners" | "prizes";
+    prizes?: CompetitionPrizes[];
+    leaderboard?: CompetitionTeam[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    mode: "winners",
+    prizes: () => [],
+    leaderboard: () => [],
+});
+
+const teamFirst = computed(() => props.leaderboard[0]);
+const teamSecond = computed(() => props.leaderboard[1]);
+const teamThird = computed(() => props.leaderboard[2]);
+
+const prizeFirst = computed(
+    () => props.prizes.find((p) => p.place === 1) ?? props.prizes[0],
+);
+const prizeSecond = computed(
+    () => props.prizes.find((p) => p.place === 2) ?? props.prizes[1],
+);
+const prizeThird = computed(
+    () => props.prizes.find((p) => p.place === 3) ?? props.prizes[2],
+);
+</script>
+
+<template>
+    <section class="relative mx-auto flex w-full flex-col items-center py-4">
+        <div
+            class="relative flex w-full max-w-4xl items-end justify-center gap-3 px-2 sm:gap-6 sm:px-6"
+        >
+            <div class="flex flex-1 flex-col items-center">
+                <div
+                    v-if="mode === 'prizes'"
+                    class="group relative mb-3 flex flex-col items-center"
+                >
+                    <div
+                        class="relative flex h-20 w-20 items-center justify-center overflow-hidden rounded-2xl border border-slate-300/40 bg-neutral-900 p-1.5 shadow-[0_0_20px_rgba(203,213,225,0.15)] ring-2 ring-slate-300/30 backdrop-blur-md transition-transform duration-300 group-hover:scale-105 sm:h-28 sm:w-28 sm:p-2 md:h-32 md:w-32"
+                    >
+                        <img
+                            v-if="prizeSecond?.prize_image_url"
+                            :src="prizeSecond.prize_image_url"
+                            alt="2º Prémio"
+                            class="h-full w-full rounded-xl object-contain p-1"
+                        />
+                        <div
+                            v-else
+                            class="flex h-full w-full items-center justify-center text-slate-400"
+                        >
+                            <svg
+                                class="h-10 w-10 opacity-50"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="1.5"
+                                    d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
+                                />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mb-3 text-center">
+                    <p
+                        v-if="mode === 'winners' && teamSecond"
+                        class="max-w-25 truncate text-xs font-bold text-white sm:max-w-35 sm:text-sm"
+                    >
+                        {{ teamSecond.name }}
+                    </p>
+                    <p
+                        v-if="mode === 'winners' && teamSecond"
+                        class="text-[11px] font-medium text-slate-300/80 sm:text-xs"
+                    >
+                        {{ teamSecond.points }} pts
+                    </p>
+                    <p
+                        v-else-if="mode === 'prizes' && prizeSecond"
+                        class="text-xs font-medium text-neutral-300 sm:text-sm"
+                    >
+                        2º Prémio
+                    </p>
+                </div>
+
+                <div
+                    class="flex h-28 w-full flex-col items-center justify-center rounded-t-2xl border-x border-t border-slate-300/20 bg-linear-to-b from-slate-400/10 via-black/50 to-black/80 p-2 shadow-[inset_0_1px_1px_rgba(255,255,255,0.08)] backdrop-blur-md sm:h-36 md:h-44"
+                >
+                    <span
+                        class="font-mono text-3xl font-black text-slate-300/30 sm:text-5xl md:text-6xl"
+                    >
+                        2
+                    </span>
+                </div>
+            </div>
+
+            <div class="flex flex-1 flex-col items-center">
+                <div
+                    v-if="mode === 'prizes'"
+                    class="group relative mb-3 flex flex-col items-center"
+                >
+                    <div
+                        class="relative flex h-24 w-24 items-center justify-center overflow-hidden rounded-2xl border border-amber-400/50 bg-neutral-900 p-1.5 shadow-[0_0_30px_rgba(251,191,36,0.25)] ring-2 ring-amber-400/50 backdrop-blur-md transition-transform duration-300 group-hover:scale-105 sm:h-36 sm:w-36 sm:p-2.5 md:h-40 md:w-40"
+                    >
+                        <img
+                            v-if="prizeFirst?.prize_image_url"
+                            :src="prizeFirst.prize_image_url"
+                            alt="1º Prémio"
+                            class="h-full w-full rounded-xl object-contain p-1"
+                        />
+                        <div
+                            v-else
+                            class="flex h-full w-full items-center justify-center text-amber-400"
+                        >
+                            <svg
+                                class="h-12 w-12 opacity-60"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="1.5"
+                                    d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
+                                />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mb-3 text-center">
+                    <p
+                        v-if="mode === 'winners' && teamFirst"
+                        class="max-w-30 truncate text-sm font-bold text-white sm:max-w-40 sm:text-base"
+                    >
+                        {{ teamFirst.name }}
+                    </p>
+                    <p
+                        v-if="mode === 'winners' && teamFirst"
+                        class="text-xs font-semibold text-amber-300 sm:text-sm"
+                    >
+                        {{ teamFirst.points }} pts
+                    </p>
+                    <p
+                        v-else-if="mode === 'prizes' && prizeFirst"
+                        class="text-xs font-semibold text-amber-300 sm:text-sm"
+                    >
+                        1º Prémio
+                    </p>
+                </div>
+
+                <div
+                    class="flex h-36 w-full flex-col items-center justify-center rounded-t-2xl border-x border-t border-amber-400/30 bg-linear-to-b from-amber-500/15 via-black/50 to-black/80 p-2 shadow-[inset_0_1px_1px_rgba(255,255,255,0.12)] backdrop-blur-md sm:h-48 md:h-56"
+                >
+                    <span
+                        class="font-mono text-4xl font-black text-amber-400/35 sm:text-6xl md:text-7xl"
+                    >
+                        1
+                    </span>
+                </div>
+            </div>
+
+            <div class="flex flex-1 flex-col items-center">
+                <div
+                    v-if="mode === 'prizes'"
+                    class="group relative mb-3 flex flex-col items-center"
+                >
+                    <div
+                        class="relative flex h-20 w-20 items-center justify-center overflow-hidden rounded-2xl border border-amber-700/40 bg-neutral-900 p-1.5 shadow-[0_0_20px_rgba(180,83,9,0.15)] ring-2 ring-amber-700/30 backdrop-blur-md transition-transform duration-300 group-hover:scale-105 sm:h-28 sm:w-28 sm:p-2 md:h-32 md:w-32"
+                    >
+                        <img
+                            v-if="prizeThird?.prize_image_url"
+                            :src="prizeThird.prize_image_url"
+                            alt="3º Prémio"
+                            class="h-full w-full rounded-xl object-contain p-1"
+                        />
+                        <div
+                            v-else
+                            class="flex h-full w-full items-center justify-center text-amber-700"
+                        >
+                            <svg
+                                class="h-10 w-10 opacity-50"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="1.5"
+                                    d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
+                                />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="mb-3 text-center">
+                    <p
+                        v-if="mode === 'winners' && teamThird"
+                        class="max-w-25 truncate text-xs font-bold text-white sm:max-w-35 sm:text-sm"
+                    >
+                        {{ teamThird.name }}
+                    </p>
+                    <p
+                        v-if="mode === 'winners' && teamThird"
+                        class="text-[11px] font-medium text-amber-400/80 sm:text-xs"
+                    >
+                        {{ teamThird.points }} pts
+                    </p>
+                    <p
+                        v-else-if="mode === 'prizes' && prizeThird"
+                        class="text-xs font-medium text-neutral-300 sm:text-sm"
+                    >
+                        3º Prémio
+                    </p>
+                </div>
+
+                <div
+                    class="flex h-24 w-full flex-col items-center justify-center rounded-t-2xl border-x border-t border-amber-700/20 bg-linear-to-b from-amber-800/10 via-black/50 to-black/80 p-2 shadow-[inset_0_1px_1px_rgba(255,255,255,0.06)] backdrop-blur-md sm:h-32 md:h-36"
+                >
+                    <span
+                        class="font-mono text-3xl font-black text-amber-700/30 sm:text-5xl md:text-6xl"
+                    >
+                        3
+                    </span>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
diff --git a/resources/js/Components/Podium.vue b/resources/js/Components/Podium.vue
index 6c90567d..a0fa1205 100644
--- a/resources/js/Components/Podium.vue
+++ b/resources/js/Components/Podium.vue
@@ -1,431 +1,27 @@
 <script setup lang="ts">
 import type CompetitionTeam from "@/Types/CompetitionTeam";
 import { type CompetitionPrizes } from "@/Types/Competition";
-import { computed } from "vue";
+import CompetitionPodium from "@/Components/Competition/Podium.vue";
 
 interface Props {
-    prizes: CompetitionPrizes[];
-    leaderboard: CompetitionTeam[];
+    mode?: "winners" | "prizes";
+    prizes?: CompetitionPrizes[];
+    leaderboard?: CompetitionTeam[];
+    isOver?: boolean;
 }
 
-const props = defineProps<Props>();
-
-// const leaderboard = computed(() => props.leaderboard);
-// const prizes = computed(() => props.prizes);
-
-const images = computed(() => {
-    if (props.prizes.length > 0 && props.leaderboard.length <= 3)
-        return [
-            props.prizes[0].prize_image_url,
-            props.prizes[1].prize_image_url,
-            props.prizes[2].prize_image_url,
-        ];
-
-    if (props.prizes.length === 0 && props.leaderboard.length < 3) return [];
-
-    return props.leaderboard.map((team) =>
-        team.image_competition_team_url
-            ? team.image_competition_team_url
-            : `https://ui-avatars.com/api/?size=512&name=${team.name
-                  .split(" ")
-                  .map((t) => t[0])
-                  .join("+")}&color=ffffff&background=3a9699`,
-    );
+withDefaults(defineProps<Props>(), {
+    mode: "winners",
+    prizes: () => [],
+    leaderboard: () => [],
+    isOver: false,
 });
-
-const hasLeaderboardTeams = computed(() => props.leaderboard.length >= 3);
 </script>
 
 <template>
-    <section class="relative flex flex-col items-center justify-center py-8">
-        <svg
-            v-if="props.prizes.length > 0"
-            width="75%"
-            height="75%"
-            viewBox="0 0 1220 582"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <g filter="url(#filter0_i_541_2)">
-                <rect
-                    x="806"
-                    y="440.72"
-                    width="398"
-                    height="141.28"
-                    fill="#D48145"
-                />
-            </g>
-            <rect x="790" y="435" width="430" height="10.8677" fill="#D48145" />
-            <path
-                d="M1015.8 513.918C1018.53 514.373 1020.9 515.444 1022.91 517.132C1024.99 518.755 1026.58 520.801 1027.69 523.268C1028.85 525.67 1029.44 528.397 1029.44 531.449C1029.44 535.474 1028.37 538.98 1026.23 541.967C1024.08 544.954 1021.03 547.259 1017.07 548.882C1013.11 550.505 1008.44 551.317 1003.05 551.317C998.111 551.317 993.696 550.57 989.801 549.077C985.97 547.648 982.659 545.506 979.867 542.649L988.242 531.546C989.996 533.299 992.008 534.663 994.281 535.637C996.553 536.61 999.215 537.097 1002.27 537.097C1005.97 537.097 1008.73 536.448 1010.55 535.15C1012.36 533.786 1013.27 531.741 1013.27 529.014C1013.27 526.092 1012.17 523.885 1009.96 522.391C1007.82 520.898 1004.41 520.151 999.735 520.151H996.813V508.951H1000.03C1003.6 508.951 1006.42 508.205 1008.5 506.711C1010.58 505.153 1011.62 503.173 1011.62 500.77C1011.62 499.342 1011.26 498.141 1010.55 497.167C1009.9 496.193 1008.95 495.479 1007.72 495.024C1006.55 494.505 1005.12 494.245 1003.44 494.245C1000.84 494.245 998.436 494.862 996.229 496.095C994.021 497.329 992.171 499.147 990.677 501.549L980.841 490.252C982.269 488.369 984.217 486.746 986.684 485.382C989.216 483.954 992.073 482.85 995.255 482.071C998.436 481.292 1001.75 480.902 1005.19 480.902C1009.8 480.902 1013.82 481.617 1017.27 483.045C1020.77 484.473 1023.47 486.486 1025.35 489.083C1027.3 491.615 1028.27 494.635 1028.27 498.141C1028.27 500.673 1027.75 503.075 1026.71 505.348C1025.67 507.555 1024.21 509.438 1022.33 510.996C1020.45 512.49 1018.27 513.464 1015.8 513.918Z"
-                fill="#F8F5E7"
-            />
-            <g filter="url(#filter1_i_541_2)">
-                <rect
-                    x="16"
-                    y="404.198"
-                    width="398"
-                    height="177.802"
-                    fill="#C3C3C3"
-                />
-            </g>
-            <rect y="397" width="430" height="13.677" fill="#C3C3C3" />
-            <path
-                d="M181.55 533C181.55 528.952 181.852 525.334 182.455 522.148C183.144 518.961 184.22 516.076 185.685 513.492C187.235 510.822 189.259 508.367 191.757 506.128C194.341 503.802 197.571 501.606 201.446 499.539C205.494 497.386 208.853 495.577 211.523 494.113C214.28 492.562 216.476 491.27 218.112 490.237C219.749 489.203 220.869 488.213 221.471 487.265C222.16 486.232 222.505 485.112 222.505 483.906C222.505 482.27 222.117 480.849 221.342 479.643C220.567 478.437 219.447 477.533 217.983 476.93C216.519 476.241 214.71 475.896 212.557 475.896C210.834 475.896 209.198 476.112 207.648 476.542C206.097 476.973 204.59 477.619 203.126 478.48C201.748 479.341 200.413 480.375 199.121 481.581C197.829 482.7 196.537 483.992 195.245 485.457L182.196 470.212C183.661 468.748 185.512 467.283 187.752 465.819C190.077 464.355 192.704 463.063 195.633 461.943C198.561 460.738 201.748 459.79 205.193 459.101C208.724 458.326 212.385 457.938 216.174 457.938C222.376 457.938 227.587 458.886 231.807 460.781C236.113 462.589 239.386 465.173 241.626 468.532C243.865 471.891 244.985 475.853 244.985 480.418C244.985 483.346 244.511 485.93 243.564 488.17C242.702 490.323 241.54 492.261 240.075 493.983C238.611 495.706 236.932 497.256 235.037 498.634C233.228 500.012 231.419 501.261 229.611 502.381C227.544 503.415 225.606 504.448 223.797 505.482C221.988 506.429 220.309 507.377 218.758 508.324C217.208 509.185 215.744 510.133 214.366 511.166C213.074 512.114 211.825 513.19 210.619 514.396H246.406V533H181.55Z"
-                fill="#F8F5E7"
-            />
-            <g filter="url(#filter2_i_541_2)">
-                <rect x="408" y="335" width="398" height="247" fill="#F2BC30" />
-            </g>
-            <rect x="392" y="325" width="430" height="19" fill="#F2BC30" />
-            <path
-                d="M641.47 489.897V511H578.161V489.897H598.971V452.527C598.091 453.7 596.724 454.872 594.867 456.044C593.011 457.217 590.911 458.34 588.566 459.415C586.319 460.49 584.023 461.369 581.678 462.053C579.333 462.639 577.184 462.932 575.23 462.932V441.243C576.891 441.243 578.942 440.754 581.385 439.777C583.827 438.703 586.27 437.384 588.712 435.821C591.253 434.257 593.451 432.694 595.307 431.131C597.261 429.568 598.482 428.298 598.971 427.321H622.858V489.897H641.47Z"
-                fill="#F8F5E7"
-            />
-
-            <clipPath id="first">
-                <rect
-                    x="471.5"
-                    y="3.5"
-                    width="271"
-                    height="271"
-                    rx="135.5"
-                    stroke="#007172"
-                    stroke-width="7"
-                />
-            </clipPath>
-            <image
-                width="271"
-                height="271"
-                x="471.5"
-                y="3.5"
-                :href="images[0]"
-                clip-path="url(#first)"
-            />
-            <clipPath id="second">
-                <rect
-                    x="69.5"
-                    y="76.5"
-                    width="271"
-                    height="271"
-                    rx="135.5"
-                    stroke="#007172"
-                    stroke-width="7"
-                />
-            </clipPath>
-            <image
-                width="271"
-                height="271"
-                x="69.5"
-                y="76.5"
-                :href="images[1]"
-                clip-path="url(#second)"
-            />
-
-            <clipPath id="third">
-                <rect
-                    x="873.5"
-                    y="98.5"
-                    width="271"
-                    height="271"
-                    rx="135.5"
-                    stroke="#007172"
-                    stroke-width="7"
-                />
-            </clipPath>
-            <image
-                width="271"
-                height="271"
-                x="873.5"
-                y="98.5"
-                :href="images[2]"
-                clip-path="url(#third)"
-            />
-
-            <defs>
-                <filter
-                    id="filter0_i_541_2"
-                    x="806"
-                    y="440.72"
-                    width="398"
-                    height="141.28"
-                    filterUnits="userSpaceOnUse"
-                    color-interpolation-filters="sRGB"
-                >
-                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                    <feBlend
-                        mode="normal"
-                        in="SourceGraphic"
-                        in2="BackgroundImageFix"
-                        result="shape"
-                    />
-                    <feColorMatrix
-                        in="SourceAlpha"
-                        type="matrix"
-                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                        result="hardAlpha"
-                    />
-                    <feOffset dy="21" />
-                    <feComposite
-                        in2="hardAlpha"
-                        operator="arithmetic"
-                        k2="-1"
-                        k3="1"
-                    />
-                    <feColorMatrix
-                        type="matrix"
-                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-                    />
-                    <feBlend
-                        mode="normal"
-                        in2="shape"
-                        result="effect1_innerShadow_541_2"
-                    />
-                </filter>
-                <filter
-                    id="filter1_i_541_2"
-                    x="16"
-                    y="404.198"
-                    width="398"
-                    height="177.802"
-                    filterUnits="userSpaceOnUse"
-                    color-interpolation-filters="sRGB"
-                >
-                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                    <feBlend
-                        mode="normal"
-                        in="SourceGraphic"
-                        in2="BackgroundImageFix"
-                        result="shape"
-                    />
-                    <feColorMatrix
-                        in="SourceAlpha"
-                        type="matrix"
-                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                        result="hardAlpha"
-                    />
-                    <feOffset dy="21" />
-                    <feComposite
-                        in2="hardAlpha"
-                        operator="arithmetic"
-                        k2="-1"
-                        k3="1"
-                    />
-                    <feColorMatrix
-                        type="matrix"
-                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-                    />
-                    <feBlend
-                        mode="normal"
-                        in2="shape"
-                        result="effect1_innerShadow_541_2"
-                    />
-                </filter>
-                <filter
-                    id="filter2_i_541_2"
-                    x="408"
-                    y="335"
-                    width="398"
-                    height="247"
-                    filterUnits="userSpaceOnUse"
-                    color-interpolation-filters="sRGB"
-                >
-                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                    <feBlend
-                        mode="normal"
-                        in="SourceGraphic"
-                        in2="BackgroundImageFix"
-                        result="shape"
-                    />
-                    <feColorMatrix
-                        in="SourceAlpha"
-                        type="matrix"
-                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                        result="hardAlpha"
-                    />
-                    <feOffset dy="21" />
-                    <feComposite
-                        in2="hardAlpha"
-                        operator="arithmetic"
-                        k2="-1"
-                        k3="1"
-                    />
-                    <feColorMatrix
-                        type="matrix"
-                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-                    />
-                    <feBlend
-                        mode="normal"
-                        in2="shape"
-                        result="effect1_innerShadow_541_2"
-                    />
-                </filter>
-                <filter
-                    id="filter3_i_541_2"
-                    x="582"
-                    y="264"
-                    width="50"
-                    height="50"
-                    filterUnits="userSpaceOnUse"
-                    color-interpolation-filters="sRGB"
-                >
-                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                    <feBlend
-                        mode="normal"
-                        in="SourceGraphic"
-                        in2="BackgroundImageFix"
-                        result="shape"
-                    />
-                    <feColorMatrix
-                        in="SourceAlpha"
-                        type="matrix"
-                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                        result="hardAlpha"
-                    />
-                    <feMorphology
-                        radius="6"
-                        operator="erode"
-                        in="SourceAlpha"
-                        result="effect1_innerShadow_541_2"
-                    />
-                    <feOffset />
-                    <feComposite
-                        in2="hardAlpha"
-                        operator="arithmetic"
-                        k2="-1"
-                        k3="1"
-                    />
-                    <feColorMatrix
-                        type="matrix"
-                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-                    />
-                    <feBlend
-                        mode="normal"
-                        in2="shape"
-                        result="effect1_innerShadow_541_2"
-                    />
-                </filter>
-                <filter
-                    id="filter4_i_541_2"
-                    x="180"
-                    y="335"
-                    width="50"
-                    height="50"
-                    filterUnits="userSpaceOnUse"
-                    color-interpolation-filters="sRGB"
-                >
-                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                    <feBlend
-                        mode="normal"
-                        in="SourceGraphic"
-                        in2="BackgroundImageFix"
-                        result="shape"
-                    />
-                    <feColorMatrix
-                        in="SourceAlpha"
-                        type="matrix"
-                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                        result="hardAlpha"
-                    />
-                    <feMorphology
-                        radius="6"
-                        operator="erode"
-                        in="SourceAlpha"
-                        result="effect1_innerShadow_541_2"
-                    />
-                    <feOffset />
-                    <feComposite
-                        in2="hardAlpha"
-                        operator="arithmetic"
-                        k2="-1"
-                        k3="1"
-                    />
-                    <feColorMatrix
-                        type="matrix"
-                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-                    />
-                    <feBlend
-                        mode="normal"
-                        in2="shape"
-                        result="effect1_innerShadow_541_2"
-                    />
-                </filter>
-                <filter
-                    id="filter5_i_541_2"
-                    x="984"
-                    y="359"
-                    width="50"
-                    height="50"
-                    filterUnits="userSpaceOnUse"
-                    color-interpolation-filters="sRGB"
-                >
-                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                    <feBlend
-                        mode="normal"
-                        in="SourceGraphic"
-                        in2="BackgroundImageFix"
-                        result="shape"
-                    />
-                    <feColorMatrix
-                        in="SourceAlpha"
-                        type="matrix"
-                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                        result="hardAlpha"
-                    />
-                    <feMorphology
-                        radius="6"
-                        operator="erode"
-                        in="SourceAlpha"
-                        result="effect1_innerShadow_541_2"
-                    />
-                    <feOffset />
-                    <feComposite
-                        in2="hardAlpha"
-                        operator="arithmetic"
-                        k2="-1"
-                        k3="1"
-                    />
-                    <feColorMatrix
-                        type="matrix"
-                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-                    />
-                    <feBlend
-                        mode="normal"
-                        in2="shape"
-                        result="effect1_innerShadow_541_2"
-                    />
-                </filter>
-            </defs>
-        </svg>
-
-        <div
-            v-if="hasLeaderboardTeams"
-            class="text-text-color ax-xs:grid-cols-1 mt-10 hidden w-3/4 grid-cols-3 items-center gap-4 px-1.5 text-center align-middle md:grid"
-        >
-            <div
-                class="align-center max-xs:row-start-2 flex flex-col items-center truncate px-1 text-xl text-wrap"
-            >
-                <span class="font-bold whitespace-normal">{{
-                    leaderboard[1].name
-                }}</span>
-                <span class="">{{ leaderboard[1].points }}</span>
-            </div>
-            <div
-                class="align-center flex flex-col items-center truncate px-3 text-2xl text-wrap"
-            >
-                <span class="font-bold whitespace-normal">{{
-                    leaderboard[0].name
-                }}</span>
-                <span class="">{{ leaderboard[0].points }}</span>
-            </div>
-            <div
-                class="align-center flex flex-col items-center truncate px-1 text-lg text-wrap"
-            >
-                <span class="font-bold whitespace-normal">{{
-                    leaderboard[2].name
-                }}</span>
-                <span class="">{{ leaderboard[2].points }}</span>
-            </div>
-        </div>
-    </section>
+    <CompetitionPodium
+        :mode="mode"
+        :prizes="prizes"
+        :leaderboard="leaderboard"
+    />
 </template>
diff --git a/resources/js/Pages/Competition.vue b/resources/js/Pages/Competition.vue
index 4903d226..3dd5ab41 100644
--- a/resources/js/Pages/Competition.vue
+++ b/resources/js/Pages/Competition.vue
@@ -1,188 +1,388 @@
 <script setup lang="ts">
-import Podium from "@/Components/Podium.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { router, usePage } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
 import AppLayout from "@/Layouts/AppLayout.vue";
+import Podium from "@/Components/Competition/Podium.vue";
+import CompetitionLeaderboard from "@/Components/Competition/CompetitionLeaderboard.vue";
 import type Competition from "@/Types/Competition";
-import { router } from "@inertiajs/vue3";
-// import { computed } from "vue";
-import { route } from "ziggy-js";
-import { isAdmin } from "@/Types/User";
-import { computed } from "vue";
 import type { CompetitionPrizes } from "@/Types/Competition";
+import { type User } from "@/Types/User";
 
 interface Props {
     competition: Competition;
     isParticipant: boolean;
     isEnrolled: boolean;
     isOver: boolean;
-    prizes: CompetitionPrizes[];
+    prizes?: CompetitionPrizes[];
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    prizes: () => [],
+});
+
+const page = usePage();
+const user = computed(() => page.props.auth?.user as User | undefined);
+
 const competition = computed(() => props.competition);
 const leaderboard = computed(() => competition.value.teams?.slice(0, 3) ?? []);
 
-const formattedDate = (
-    startDate: string,
-    separator: string,
-    endDate: string,
-) => {
-    const startDateArray = startDate.split(" ");
-    const endDateArray = endDate.split(" ");
+const formatDateRange = (startStr?: string, endStr?: string): string => {
+    if (!startStr || !endStr) return "";
+    try {
+        const s = new Date(startStr);
+        const e = new Date(endStr);
+        const startDay = s.toLocaleDateString("pt-PT", {
+            day: "numeric",
+            month: "short",
+            timeZone: "Europe/Lisbon",
+        });
+        const startTime = s.toLocaleTimeString("pt-PT", {
+            hour: "2-digit",
+            minute: "2-digit",
+            timeZone: "Europe/Lisbon",
+        });
+        const endTime = e.toLocaleTimeString("pt-PT", {
+            hour: "2-digit",
+            minute: "2-digit",
+            timeZone: "Europe/Lisbon",
+        });
+        const endDay = e.toLocaleDateString("pt-PT", {
+            day: "numeric",
+            month: "short",
+            timeZone: "Europe/Lisbon",
+        });
 
-    let pointer = 0;
+        if (startDay === endDay) {
+            return `${startDay}, ${startTime} - ${endTime}`;
+        }
+        return `${startDay} ${startTime} — ${endDay} ${endTime}`;
+    } catch {
+        return "";
+    }
+};
 
-    while (startDateArray[pointer] === endDateArray[pointer]) pointer++;
+const handleEnrollClick = () => {
+    if (user.value) {
+        router.put(route("enroll"));
+    } else {
+        router.get(route("register"));
+    }
+};
 
-    endDate = endDateArray.slice(pointer).join(" ");
+type CompetitionTab = "teams" | "prizes" | "regulation";
 
-    return `${startDate} ${separator} ${endDate}`;
-};
-</script>
+const hasTeams = computed(() => (competition.value.teams?.length ?? 0) > 0);
+const hasPrizes = computed(() => (props.prizes?.length ?? 0) > 0);
+const hasRegulation = computed(() =>
+    Boolean(competition.value.regulation_html),
+);
 
-<template>
-    <AppLayout title="Competição">
-        <header class="flex flex-col items-center gap-4 p-4 text-center">
-            <h2
-                class="bg-2025-blue w-fit rounded-lg p-3 text-center text-2xl font-bold text-white xl:text-3xl 2xl:text-4xl"
-            >
-                {{ competition.name }}
-            </h2>
-            <span
-                class="text-text-color inline-flex w-3/4 justify-center pt-4 text-xl font-bold"
-                >{{ competition.theme }}</span
-            >
-            <span
-                class="text-text-color inline-flex justify-center text-xl font-bold"
-                >{{
-                    formattedDate(
-                        $d(new Date(competition.date_start), "fullTime"),
-                        "-",
-                        $d(new Date(competition.date_end), "fullTime"),
-                    )
-                }}
-            </span>
-        </header>
-
-        <section
-            v-if="competition.description && competition.description !== ''"
-            class="justitfy-center flex w-full flex-col items-center gap-4 p-4"
-        >
-            <h2
-                class="bg-2025-blue-dark w-fit rounded-md p-2 px-5 text-3xl font-bold text-white"
-            >
-                Descrição
-            </h2>
+const availableTabs = computed(() => {
+    const list: { key: CompetitionTab; label: string; count?: number }[] = [];
+    if (hasTeams.value) {
+        list.push({
+            key: "teams",
+            label: "Equipas",
+            count: competition.value.teams?.length,
+        });
+    }
+    if (hasPrizes.value) {
+        list.push({
+            key: "prizes",
+            label: "Prémios",
+            count: props.prizes?.length,
+        });
+    }
+    if (hasRegulation.value) {
+        list.push({
+            key: "regulation",
+            label: "Regulamento",
+        });
+    }
+    return list;
+});
+
+const defaultTab = computed<CompetitionTab>(() => {
+    if (hasTeams.value) return "teams";
+    if (hasPrizes.value) return "prizes";
+    return "regulation";
+});
+
+const activeTab = ref<CompetitionTab>(defaultTab.value);
+
+const isAtBottom = ref(false);
+
+function updateScrollState() {
+    const scrollY = window.scrollY || window.pageYOffset;
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+
+    isAtBottom.value = scrollY + windowHeight >= documentHeight - 60;
+}
+
+function handleQuickScroll() {
+    if (isAtBottom.value) {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+        return;
+    }
+
+    const sections = Array.from(
+        document.querySelectorAll<HTMLElement>("section"),
+    );
+    if (!sections.length) return;
 
-            <p class="text-white">{{ competition.description }}</p>
-        </section>
+    const currentY = window.scrollY || window.pageYOffset;
+    const navOffset = 70;
 
-        <Podium :leaderboard="leaderboard" :prizes="prizes" />
+    const nextSection = sections.find((section) => {
+        const top = section.getBoundingClientRect().top + currentY;
+        return top > currentY + navOffset + 20;
+    });
+
+    if (nextSection) {
+        const targetY =
+            nextSection.getBoundingClientRect().top + currentY - navOffset;
+        window.scrollTo({ top: targetY, behavior: "smooth" });
+    } else {
+        window.scrollTo({
+            top: document.documentElement.scrollHeight,
+            behavior: "smooth",
+        });
+    }
+}
 
-        <!-- RULES -->
-        <section class="relative mt-4 border-8 border-white/5 text-justify">
-            <h2
-                class="bg-2025-blue-dark absolute -top-9 left-1/2 -translate-x-1/2 transform rounded-lg p-3 text-2xl font-bold text-white xl:text-3xl 2xl:text-4xl"
+onMounted(() => {
+    updateScrollState();
+    window.addEventListener("scroll", updateScrollState, { passive: true });
+    window.addEventListener("resize", updateScrollState, { passive: true });
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener("scroll", updateScrollState);
+    window.removeEventListener("resize", updateScrollState);
+});
+</script>
+
+<template>
+    <AppLayout :title="competition.name">
+        <button
+            type="button"
+            :aria-label="
+                isAtBottom ? 'Scroll to top' : 'Scroll to next section'
+            "
+            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
+            @click="handleQuickScroll"
+        >
+            <svg
+                v-if="isAtBottom"
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
             >
-                Regulamento
-            </h2>
-            <div
-                class="prose prose-lg max-w-none p-20 wrap-break-word text-white max-lg:pb-10 lg:columns-2"
-                v-html="competition.regulation_html"
-            ></div>
-        </section>
-
-        <template v-if="isOver">
-            <section
-                class="relative flex flex-col content-center items-center justify-center gap-4 py-24"
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 10l7-7m0 0l7 7m-7-7v18"
+                />
+            </svg>
+            <svg
+                v-else
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
             >
-                <template v-if="competition.teams && competition.teams.length">
-                    <p class="text-text-color text-center text-2xl font-bold">
-                        A competição já acabou, vê aqui quem participou
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 14l-7 7m0 0l-7-7m7 7V3"
+                />
+            </svg>
+        </button>
+
+        <div
+            class="relative mx-auto max-w-5xl space-y-12 px-4 py-16 sm:space-y-16 sm:px-6 lg:px-8"
+        >
+            <header class="flex flex-col items-center gap-6 text-center">
+                <div class="space-y-3">
+                    <h1
+                        class="text-3xl font-bold tracking-tight text-white sm:text-4xl md:text-5xl"
+                    >
+                        {{ competition.name }}
+                    </h1>
+                    <p
+                        v-if="competition.theme"
+                        class="text-base font-medium text-neutral-300 sm:text-lg md:text-xl"
+                    >
+                        {{ competition.theme }}
                     </p>
-                    <span class="text-text-color text-2xl font-bold">
-                        Equipas: {{ competition.teams?.length }}
-                    </span>
+                </div>
+
+                <div
+                    class="mt-2 flex w-full flex-col gap-6 rounded-3xl border border-white/8 bg-black/50 p-6 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md sm:p-8"
+                >
                     <div
-                        class="flex w-4/5 flex-col rounded-lg border border-8 border-white/5 md:w-1/2"
+                        v-if="competition.date_start && competition.date_end"
+                        class="flex items-center gap-2 text-xs text-neutral-400 sm:text-sm"
                     >
-                        <div
-                            v-for="team in competition.teams ?? []"
-                            :key="team.id"
-                            class="even:bg-2025-blue/20 inline-flex w-full justify-between gap-1 p-4 text-lg"
+                        <svg
+                            class="h-4 w-4 text-neutral-400"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
                         >
-                            <img
-                                :src="
-                                    team.image_competition_team_url
-                                        ? team.image_competition_team_url
-                                        : `https://ui-avatars.com/api/?size=512&name=${team.name
-                                              .split(' ')
-                                              .map((t) => t[0])
-                                              .join(
-                                                  '+',
-                                              )}&color=ffffff&background=3a9699`
-                                "
-                                class="h-16 w-16 self-center rounded-full border-2 border-white/5"
-                                :alt="`Image for team ${team.name}`"
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                             />
-                            <div
-                                class="text-text-color flex flex-col items-end self-center"
-                            >
-                                <span class="text-end">{{ team.name }}</span>
-                                <span>{{ team.points }} pontos</span>
-                            </div>
+                        </svg>
+                        <span class="font-medium text-neutral-300">
+                            {{
+                                formatDateRange(
+                                    competition.date_start,
+                                    competition.date_end,
+                                )
+                            }}
+                        </span>
+                    </div>
+
+                    <p
+                        v-if="competition.description"
+                        class="text-justify text-base leading-relaxed text-neutral-300 sm:text-lg"
+                    >
+                        {{ competition.description }}
+                    </p>
+
+                    <div class="border-t border-white/8 pt-6">
+                        <div v-if="isOver" class="text-center sm:text-left">
+                            <p class="text-xs text-neutral-400 sm:text-sm">
+                                Esta competição já acabou. Obrigado pela participação!
+                            </p>
+                        </div>
+
+                        <div
+                            v-else
+                            class="flex flex-col items-center justify-between gap-4 sm:flex-row"
+                        >
+                            <template v-if="!isEnrolled">
+                                <p
+                                    class="text-center text-xs text-neutral-400 sm:text-left sm:text-sm"
+                                >
+                                    Precisas de estar inscrito na SINF 2026 para
+                                    participar.
+                                </p>
+                                <button
+                                    type="button"
+                                    class="pill-container pill-item bg-sinf-crimson/80 hover:bg-sinf-crimson shrink-0 cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
+                                    @click="handleEnrollClick"
+                                >
+                                    Inscrever-me na SINF
+                                </button>
+                            </template>
+
+                            <template v-else-if="competition.registration_link">
+                                <p
+                                    class="text-center text-xs text-neutral-400 sm:text-left sm:text-sm"
+                                >
+                                    As inscrições para esta competição estão
+                                    abertas.
+                                </p>
+                                <a
+                                    :href="competition.registration_link"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    class="pill-container pill-item bg-sinf-purple/80 hover:bg-sinf-purple shrink-0 cursor-pointer gap-2 px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
+                                >
+                                    <span>Inscrever Equipa</span>
+                                    <svg
+                                        class="h-4 w-4"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                        stroke="currentColor"
+                                    >
+                                        <path
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                                        />
+                                    </svg>
+                                </a>
+                            </template>
                         </div>
                     </div>
-                </template>
-                <p v-else class="text-2023-teal text-lg font-bold">
-                    A competição acabou mas não houve equipas inscritas desta
-                    vez.
-                </p>
-            </section>
-        </template>
-        <template v-else-if="!isAdmin($page.props.auth.user)">
-            <!-- PARTICIPATE -->
-            <section
-                v-if="!isEnrolled"
-                class="relative flex flex-col content-center items-center justify-center py-24"
-            >
-                <span class="text-2xl font-bold text-white">
-                    Ainda não estás inscrito na SINF
-                </span>
-                <div
-                    class="mx-10 flex h-full flex-1 flex-col items-center p-3 text-center text-3xl font-bold text-white sm:p-12"
-                >
-                    <PrimaryButton
-                        color="orange"
-                        shadow="teal"
-                        text-size="sm:text-4xl"
-                        padding="sm:px-8"
-                        @click="
-                            $page.props.auth.user
-                                ? router.put(route('enroll'))
-                                : router.get(route('register'))
-                        "
-                        >Inscreve-te</PrimaryButton
+                </div>
+            </header>
+
+            <div v-if="availableTabs.length > 0" class="flex justify-center">
+                <div class="pill-container flex-wrap justify-center gap-1 p-1">
+                    <button
+                        v-for="tab in availableTabs"
+                        :key="tab.key"
+                        type="button"
+                        class="pill-item cursor-pointer gap-2 px-5 py-2 text-xs font-semibold transition-all sm:text-sm"
+                        :class="{ 'pill-item-active': activeTab === tab.key }"
+                        @click="activeTab = tab.key"
                     >
+                        <span>{{ tab.label }}</span>
+                        <span
+                            v-if="tab.count !== undefined"
+                            class="py-0.2 rounded-full px-1.5 text-[10px] transition-colors"
+                            :class="
+                                activeTab === tab.key
+                                    ? 'bg-white/20 text-white'
+                                    : 'bg-white/8 text-neutral-400'
+                            "
+                        >
+                            {{ tab.count }}
+                        </span>
+                    </button>
                 </div>
-            </section>
-            <section
-                v-else-if="isEnrolled && isParticipant"
-                class="relative flex content-center items-center justify-center py-24"
-            >
-                <h1
-                    class="text-text-color absolute top-4 m-4 flex justify-center p-3 text-4xl font-black"
-                >
-                    Vamos a isto?
-                </h1>
+            </div>
 
-                <a
-                    :href="competition.registration_link"
-                    class="bg-2025-blue relative mt-5 content-center justify-center border border-black px-8 py-2 text-center text-2xl font-semibold text-white shadow-black/80 transition-shadow hover:shadow-md active:shadow-none"
+            <div v-if="activeTab === 'teams'" class="space-y-12 sm:space-y-16">
+                <div v-if="isOver && leaderboard.length >= 3" class="space-y-4">
+                    <Podium mode="winners" :leaderboard="leaderboard" />
+                </div>
+
+                <CompetitionLeaderboard :teams="competition.teams ?? []" />
+            </div>
+
+            <div v-else-if="activeTab === 'prizes'" class="space-y-8">
+                <Podium mode="prizes" :prizes="prizes" />
+            </div>
+
+            <div v-else-if="activeTab === 'regulation'" class="w-full">
+                <div
+                    class="rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md sm:p-10"
                 >
-                    Participar!
-                </a>
-            </section>
-        </template>
+                    <div
+                        class="prose prose-invert prose-headings:text-white prose-p:leading-relaxed prose-a:text-sinf-purple-light hover:prose-a:text-white prose-strong:text-white max-w-none leading-relaxed wrap-break-word text-neutral-300"
+                        v-html="competition.regulation_html"
+                    />
+                </div>
+            </div>
+
+            <div
+                v-if="availableTabs.length === 0"
+                class="flex flex-col items-center justify-center py-20 text-center"
+            >
+                <div class="pill-container mb-4 px-6 py-2.5">
+                    <span class="text-sm font-medium text-neutral-400">
+                        Em breve...
+                    </span>
+                </div>
+                <p class="max-w-md text-sm text-neutral-400">
+                    Os detalhes e regulamento da competição estarão disponíveis
+                    brevemente.
+                </p>
+            </div>
+        </div>
     </AppLayout>
 </template>

From 68189f9187332aa048f87f681ab93357fbbe05b1 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Wed, 2 Sep 2026 00:02:53 +0100
Subject: [PATCH 08/33] feat: event pages

---
 resources/js/Components/Event/SpeakerInfo.vue | 283 ++++---
 resources/js/Pages/Event.vue                  | 736 ++++++++++++++----
 2 files changed, 761 insertions(+), 258 deletions(-)

diff --git a/resources/js/Components/Event/SpeakerInfo.vue b/resources/js/Components/Event/SpeakerInfo.vue
index 04aa2d34..93d041c2 100644
--- a/resources/js/Components/Event/SpeakerInfo.vue
+++ b/resources/js/Components/Event/SpeakerInfo.vue
@@ -1,120 +1,215 @@
 <script setup lang="ts">
+import { computed, ref } from "vue";
 import type { SpeakerUser } from "@/Types/User";
-import { OhVueIcon } from "oh-vue-icons";
 
 interface Props {
     user: SpeakerUser;
-    reverse?: number;
-    color: string;
 }
 
-defineProps<Props>();
-
-const socials = {
-    facebook: {
-        icon: "io-logo-facebook",
-    },
-    linkedin: {
-        icon: "io-logo-linkedin",
-    },
-    github: {
-        icon: "io-logo-github",
-    },
-    twitter: {
-        icon: "io-logo-twitter",
-    },
-    instagram: {
-        icon: "io-logo-instagram",
-    },
-    website: {
-        icon: "io-logo-globe",
-    },
-};
+const props = defineProps<Props>();
+const user = computed(() => props.user);
+const imageError = ref(false);
 
-const textColor: Record<string, string> = {
-    orange: "text-2023-orange",
-    "teal-dark": "text-2023-teal-dark",
-    "red-dark": "text-2023-red-dark",
-    red: "text-2023-red",
-    teal: "text-2023-teal",
-    white: "text-white",
-};
+const rawSocialMedia = computed<Record<string, unknown>>(() => {
+    return (user.value.usertype?.social_media ?? {}) as Record<string, unknown>;
+});
 
-const shadowColor: Record<string, string> = {
-    orange: "shadow-black/80",
-    "teal-dark": "shadow-2023-teal-dark",
-    "red-dark": "shadow-2023-red-dark",
-    red: "shadow-2023-red",
-    teal: "shadow-2023-teal",
+const formatSocialUrl = (platform: string, val: string): string => {
+    const trimmed = val.trim();
+    if (!trimmed) return "";
+    if (platform === "email") {
+        return trimmed.startsWith("mailto:") ? trimmed : `mailto:${trimmed}`;
+    }
+    if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) {
+        return trimmed;
+    }
+    if (platform === "github") {
+        return `https://github.com/${trimmed.replace(/^@/, "")}`;
+    }
+    if (platform === "linkedin") {
+        return `https://linkedin.com/in/${trimmed.replace(/^@/, "")}`;
+    }
+    if (platform === "instagram") {
+        return `https://instagram.com/${trimmed.replace(/^@/, "")}`;
+    }
+    if (platform === "twitter") {
+        return `https://x.com/${trimmed.replace(/^@/, "")}`;
+    }
+    return `https://${trimmed}`;
 };
+
+const socialLinks = computed(() => {
+    const supported = [
+        "github",
+        "linkedin",
+        "website",
+        "instagram",
+        "twitter",
+        "email",
+    ] as const;
+    const entries: {
+        platform: (typeof supported)[number];
+        url: string;
+        label: string;
+    }[] = [];
+
+    for (const key of supported) {
+        const val = rawSocialMedia.value[key];
+        if (typeof val === "string" && val.trim().length > 0) {
+            entries.push({
+                platform: key,
+                url: formatSocialUrl(key, val),
+                label:
+                    key === "email"
+                        ? "Email"
+                        : key === "website"
+                          ? "Website"
+                          : key.charAt(0).toUpperCase() + key.slice(1),
+            });
+        }
+    }
+
+    return entries;
+});
 </script>
 
 <template>
-    <div
-        class="flex w-fit flex-row flex-wrap gap-8"
-        :class="reverse ? 'flex-row-reverse self-end' : ''"
+    <article
+        class="group relative flex flex-col gap-6 rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8 md:flex-row md:items-start md:gap-8"
     >
-        <div
-            class="group relative flex flex-col items-center overflow-hidden rounded-full"
-        >
-            <img
-                class="h-52 w-52 object-cover shadow transition-all duration-300 ease-in-out group-hover:scale-[1.02] group-hover:shadow-2xl group-hover:brightness-95"
-                :src="user.profile_photo_url"
-                :alt="
-                    user.usertype?.display_name ?? user.name + ' profile photo'
-                "
-            />
+        <div class="flex flex-col items-center gap-4 shrink-0">
             <div
-                v-if="Object.keys(user.usertype?.social_media ?? {}).length > 0"
-                class="absolute -bottom-32 flex w-full flex-row items-center justify-center pt-1 pb-10 transition-all duration-300 ease-in-out group-hover:-bottom-7"
-                :class="shadowColor[color]"
+                class="relative h-32 w-32 overflow-hidden rounded-2xl bg-neutral-900 ring-1 ring-white/10 sm:h-40 sm:w-40"
             >
-                <template v-for="(social, key) in socials" :key="key">
-                    <a
-                        v-if="user.usertype?.social_media?.[key]"
-                        :href="String(user.usertype?.social_media?.[key])"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="mx-2"
+                <img
+                    v-if="user.profile_photo_url && !imageError"
+                    :src="user.profile_photo_url"
+                    :alt="user.usertype?.display_name ?? user.name"
+                    class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+                    @error="imageError = true"
+                />
+                <div
+                    v-else
+                    class="flex h-full w-full items-center justify-center bg-neutral-900 text-2xl font-bold text-neutral-400 sm:text-3xl"
+                >
+                    {{ (user.usertype?.display_name ?? user.name).charAt(0) }}
+                </div>
+            </div>
+
+            <div
+                v-if="socialLinks.length > 0"
+                class="flex flex-wrap items-center justify-center gap-1.5"
+            >
+                <a
+                    v-for="item in socialLinks"
+                    :key="item.platform"
+                    :href="item.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-all hover:bg-white/10 hover:text-white"
+                    :aria-label="item.label"
+                >
+                    <svg
+                        v-if="item.platform === 'github'"
+                        class="h-4 w-4"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                        />
+                    </svg>
+
+                    <svg
+                        v-else-if="item.platform === 'linkedin'"
+                        class="h-4 w-4"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"
+                        />
+                    </svg>
+
+                    <svg
+                        v-else-if="item.platform === 'website'"
+                        class="h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                    >
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
+                        />
+                    </svg>
+
+                    <svg
+                        v-else-if="item.platform === 'instagram'"
+                        class="h-4 w-4"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"
+                        />
+                    </svg>
+
+                    <svg
+                        v-else-if="item.platform === 'twitter'"
+                        class="h-4 w-4"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                    >
+                        <path
+                            d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+                        />
+                    </svg>
+
+                    <svg
+                        v-else-if="item.platform === 'email'"
+                        class="h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
                     >
-                        <OhVueIcon
-                            :name="social.icon"
-                            fill="white"
-                            scale="1.4"
+                        <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                         />
-                    </a>
-                </template>
+                    </svg>
+                </a>
             </div>
         </div>
-        <div
-            class="flex flex-col justify-center gap-10"
-            :class="textColor[color]"
-        >
-            <div
-                class="flex w-fit flex-row justify-center gap-6"
-                :class="reverse ? 'flex-row-reverse self-end' : ''"
-            >
-                <div
-                    :class="reverse ? 'flex flex-col items-end text-right' : ''"
+
+        <div class="flex min-w-0 flex-1 flex-col text-center md:text-left">
+            <div class="space-y-1">
+                <h3
+                    class="text-xl font-bold tracking-tight text-white sm:text-2xl"
                 >
-                    <h2 class="text-3xl font-bold uppercase">
-                        {{ user.usertype?.display_name ?? user.name }}
-                    </h2>
-                    <h3 class="text-xl font-bold">
-                        {{ user.usertype?.title }}
-                    </h3>
-                    <h3 class="text-xl font-bold">
-                        {{ user.usertype?.organization }}
-                    </h3>
-                </div>
+                    {{ user.usertype?.display_name ?? user.name }}
+                </h3>
+                <p
+                    v-if="user.usertype?.title || user.usertype?.organization"
+                    class="text-xs font-medium text-neutral-400 sm:text-sm"
+                >
+                    <span v-if="user.usertype?.title">{{ user.usertype.title }}</span>
+                    <span v-if="user.usertype?.title && user.usertype?.organization"> · </span>
+                    <span v-if="user.usertype?.organization" class="text-neutral-300">{{ user.usertype.organization }}</span>
+                </p>
             </div>
+
             <div
-                class="prose col-span-2 row-start-2 max-w-4xl wrap-break-word text-inherit"
-                :class="reverse ? 'text-right' : ''"
+                v-if="user.usertype?.description_html"
+                class="prose prose-invert max-w-none text-justify text-xs leading-relaxed text-neutral-300 sm:text-sm mt-4"
                 v-html="user.usertype?.description_html"
-            ></div>
+            />
         </div>
-    </div>
+    </article>
 </template>
-
-<style></style>
diff --git a/resources/js/Pages/Event.vue b/resources/js/Pages/Event.vue
index c695eb12..9e34bdec 100644
--- a/resources/js/Pages/Event.vue
+++ b/resources/js/Pages/Event.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
+import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { router, Link, usePage } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
 import type Event from "@/Types/Event";
+import type Enrollment from "@/Types/Enrollment";
+import { type User, isSpeaker, isCompany, isAdmin } from "@/Types/User";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import SpeakerInfo from "@/Components/Event/SpeakerInfo.vue";
-import { computed } from "vue";
-import { isSpeaker, isCompany, isAdmin } from "@/Types/User";
 import Sponsor from "@/Components/Home/Sponsor.vue";
-import { route } from "ziggy-js";
-import { router, Link } from "@inertiajs/vue3";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import type Enrollment from "@/Types/Enrollment";
 
 interface Props {
     event: Event;
@@ -23,193 +22,602 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const event = computed(() => props.event);
+const page = usePage();
+const authUser = computed(() => page.props.auth?.user as User | undefined);
 
+const event = computed(() => props.event);
 const speakers = computed(() => event.value.users?.filter(isSpeaker) ?? []);
-
-// It's for you bb 😘 @toni-santos
-// ty luv 😘 @ttoino
 const companies = computed(() => event.value.users?.filter(isCompany) ?? []);
 
-// FIXME: duplicated :P
-const formatTimeString = (time: string): string => {
-    return `1970-01-01T${time}.000000Z`;
+const formatDateTime = (
+    dayDate?: string | Date,
+    startStr?: string,
+    endStr?: string,
+): string => {
+    let datePart = "";
+    if (dayDate) {
+        try {
+            const d = dayDate instanceof Date ? dayDate : new Date(dayDate);
+            datePart = d.toLocaleDateString("pt-PT", {
+                day: "numeric",
+                month: "short",
+                timeZone: "Europe/Lisbon",
+            });
+        } catch {
+            datePart = String(dayDate);
+        }
+    }
+
+    const formatTimeOnly = (t?: string): string => {
+        if (!t) return "";
+        const isoString = t.includes("T") ? t : `1970-01-01T${t}.000000Z`;
+        try {
+            const d = new Date(isoString);
+            return d.toLocaleTimeString("pt-PT", {
+                hour: "2-digit",
+                minute: "2-digit",
+                timeZone: "Europe/Lisbon",
+            });
+        } catch {
+            return t.slice(0, 5);
+        }
+    };
+
+    const startTime = formatTimeOnly(startStr);
+    const endTime = formatTimeOnly(endStr);
+
+    if (datePart && startTime && endTime) {
+        return `${datePart}, ${startTime} - ${endTime}`;
+    }
+    if (datePart && startTime) {
+        return `${datePart}, ${startTime}`;
+    }
+    if (startTime && endTime) {
+        return `${startTime} - ${endTime}`;
+    }
+    return datePart || startTime || "";
 };
 
-const colorPicker = () => {
-    const colors = ["white"];
-    const pos = Math.floor(Math.random() * colors.length);
+const handleJoinEvent = () => {
+    router.put(route("event.join", { event: event.value.id }));
+};
+
+const handleLeaveEvent = () => {
+    router.put(route("event.leave", { event: event.value.id }));
+};
 
-    return colors[pos];
+const handleEnrollSinf = () => {
+    if (authUser.value) {
+        router.put(route("enroll"));
+    } else {
+        router.get(route("register"));
+    }
 };
+
+type EventTab = "speakers" | "companies" | "enrollments";
+
+const hasSpeakers = computed(() => speakers.value.length > 0);
+const hasCompanies = computed(() => companies.value.length > 0);
+const hasEnrollments = computed(
+    () =>
+        (isAdmin(authUser.value) || props.isStaff) &&
+        props.enrollments !== null &&
+        props.enrollments !== undefined,
+);
+
+const availableTabs = computed(() => {
+    const list: { key: EventTab; label: string; count?: number }[] = [];
+    if (hasSpeakers.value) {
+        list.push({
+            key: "speakers",
+            label: speakers.value.length === 1 ? "Orador" : "Oradores",
+            count: speakers.value.length,
+        });
+    }
+    if (hasCompanies.value) {
+        list.push({
+            key: "companies",
+            label: "Empresas",
+            count: companies.value.length,
+        });
+    }
+    if (hasEnrollments.value) {
+        list.push({
+            key: "enrollments",
+            label: "Inscrições",
+            count: props.enrollmentCount,
+        });
+    }
+    return list;
+});
+
+const defaultTab = computed<EventTab>(() => {
+    if (hasSpeakers.value) return "speakers";
+    if (hasCompanies.value) return "companies";
+    return "enrollments";
+});
+
+const activeTab = ref<EventTab>(defaultTab.value);
+
+const isAtBottom = ref(false);
+
+function updateScrollState() {
+    const scrollY = window.scrollY || window.pageYOffset;
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+
+    isAtBottom.value = scrollY + windowHeight >= documentHeight - 60;
+}
+
+function handleQuickScroll() {
+    if (isAtBottom.value) {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+        return;
+    }
+
+    const sections = Array.from(
+        document.querySelectorAll<HTMLElement>("section"),
+    );
+    if (!sections.length) return;
+
+    const currentY = window.scrollY || window.pageYOffset;
+    const navOffset = 70;
+
+    const nextSection = sections.find((section) => {
+        const top = section.getBoundingClientRect().top + currentY;
+        return top > currentY + navOffset + 20;
+    });
+
+    if (nextSection) {
+        const targetY =
+            nextSection.getBoundingClientRect().top + currentY - navOffset;
+        window.scrollTo({ top: targetY, behavior: "smooth" });
+    } else {
+        window.scrollTo({
+            top: document.documentElement.scrollHeight,
+            behavior: "smooth",
+        });
+    }
+}
+
+onMounted(() => {
+    updateScrollState();
+    window.addEventListener("scroll", updateScrollState, { passive: true });
+    window.addEventListener("resize", updateScrollState, { passive: true });
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener("scroll", updateScrollState);
+    window.removeEventListener("resize", updateScrollState);
+});
 </script>
 
 <template>
-    <AppLayout title="Evento">
-        <!-- speaker/event intro -->
-        <section class="mx-9 flex flex-col gap-6 pt-10">
-            <SpeakerInfo
-                v-for="(speaker, idx) in speakers"
-                :key="speaker.id"
-                :user="speaker"
-                :reverse="idx % 2"
-                :color="colorPicker()"
-            ></SpeakerInfo>
-        </section>
-        <!-- details -->
-        <section
-            class="m relative mt-32 flex flex-row flex-wrap justify-center gap-8 bg-white/5 px-16 py-24 shadow-[0_0_40px_-12px_rgba(255,255,255,0.18)] backdrop-blur-xs"
-            :class="[
-                { 'mt-20': companies.length > 0 && speakers.length === 0 },
-            ]"
+    <AppLayout :title="event.name">
+        <button
+            type="button"
+            :aria-label="
+                isAtBottom ? 'Scroll to top' : 'Scroll to next section'
+            "
+            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
+            @click="handleQuickScroll"
         >
-            <h1
-                class="bg-2025-blue absolute -top-7 left-1/2 flex -translate-x-1/2 rounded-md px-3 py-2 text-center text-2xl font-bold text-white"
+            <svg
+                v-if="isAtBottom"
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
             >
-                {{ event.name }}
-            </h1>
-            <div
-                class="prose max-w-3xl text-justify font-bold wrap-break-word text-white"
-                v-html="event.description_html"
-            ></div>
-            <h1
-                class="bg-2025-blue bg-2025-blue absolute -bottom-5 flex w-fit rounded-md px-3 py-2 text-xl font-bold text-white max-lg:left-auto"
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M5 10l7-7m0 0l7 7m-7-7v18"
+                />
+            </svg>
+            <svg
+                v-else
+                class="h-4 w-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
             >
-                Dia
-                {{ event.event_day ? $d(event.event_day.date, "day") : "N/A" }},
-                {{
-                    $d(
-                        new Date(formatTimeString(event.time_start)),
-                        "hourMinute",
-                    )
-                }}
-                -
-                {{
-                    $d(new Date(formatTimeString(event.time_end)), "hourMinute")
-                }}
-                <template v-if="event.location">
-                    @ {{ event.location }}
-                </template>
-            </h1>
-        </section>
-        <!-- companies -->
-        <section
-            v-if="companies.length > 0"
-            class="mx-9 mt-24 flex flex-row flex-wrap items-center justify-center gap-6"
-        >
-            <div
-                v-for="(company, idx) in companies"
-                :key="idx"
-                class="w-[200px]"
-            >
-                <Sponsor :company="company" />
-            </div>
-        </section>
-
-        <div class="mt-16 flex w-full justify-center">
-            <Link
-                v-if="isAdmin($page.props.auth.user) || isStaff"
-                :href="
-                    route('user.scan-code', {
-                        _query: {
-                            event: event.id,
-                        },
-                    })
-                "
-                class="inline-flex border-0 bg-white/5 p-2 px-3 text-center text-2xl font-bold text-white shadow-[0_0_40px_-12px_rgba(255,255,255,0.18)] ring-1 ring-white/10 filter-[drop-shadow(0_0_0_rgba(0,0,0,0))] backdrop-blur-xs transition-transform duration-300 hover:scale-105 hover:drop-shadow-[0_8px_20px_rgba(255,255,255,0.28)] focus:outline-hidden"
-            >
-                Scan QR Code
-            </Link>
-        </div>
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M19 14l-7 7m0 0l-7-7m7 7V3"
+                />
+            </svg>
+        </button>
 
-        <!-- sign up -->
         <div
-            v-if="isParticipant"
-            class="flex w-full flex-col items-center gap-4 place-self-center py-24"
+            class="relative mx-auto max-w-5xl space-y-12 px-4 py-16 sm:space-y-16 sm:px-6 lg:px-8"
         >
-            <p
-                v-if="event.enroll_in_site"
-                class="text-text-color flex w-fit flex-col text-center text-3xl font-bold"
-            >
-                <span v-if="hasJoined">Vemo-nos lá!</span>
-                <span v-else-if="!isEnrolled"
-                    >Ainda não te inscreveste na SINF!</span
+            <header class="flex flex-col items-center gap-6 text-center">
+                <div class="space-y-3">
+                    <h1
+                        class="text-3xl font-bold tracking-tight text-white sm:text-4xl md:text-5xl"
+                    >
+                        {{ event.name }}
+                    </h1>
+                    <p
+                        v-if="event.topic"
+                        class="text-base font-medium text-neutral-300 sm:text-lg md:text-xl"
+                    >
+                        {{ event.topic }}
+                    </p>
+                </div>
+
+                <div
+                    class="mt-2 flex w-full flex-col gap-6 rounded-3xl border border-white/8 bg-black/50 p-6 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md sm:p-8"
                 >
-                <template v-else-if="canJoin">
-                    <span>Vamos a isto?</span>
-                    <span v-if="event.capacity" class="text-lg">
-                        Ainda temos
-                        {{ event.capacity - enrollmentCount }}
-                        lugares.
-                    </span>
-                </template>
-                <span v-else>Evento esgotado!</span>
-            </p>
-
-            <PrimaryButton
-                v-if="event.enroll_in_site && (!isEnrolled || canJoin)"
-                color="teal-dark"
-                shadow="red"
-                text-size="sm:text-3xl"
-                padding="sm:px-8"
-                @click="
-                    if (!(isEnrolled && event.external_url)) {
-                        $page.props.auth.user
-                            ? isEnrolled
-                                ? router.put(
-                                      route('event.join', { event: event.id }),
-                                  )
-                                : router.get(route('home') + '#enroll-section') // HACK: this is a hack
-                            : router.get(route('register'));
-                    }
-                "
+                    <div
+                        v-if="event.time_start || event.location || event.capacity"
+                        class="flex flex-wrap items-center gap-4 text-xs text-neutral-400 sm:gap-6 sm:text-sm"
+                    >
+                        <div
+                            v-if="event.time_start"
+                            class="flex items-center gap-2"
+                        >
+                            <svg
+                                class="h-4 w-4 text-neutral-400"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                                />
+                            </svg>
+                            <span class="font-medium text-neutral-300">
+                                {{
+                                    formatDateTime(
+                                        event.event_day?.date,
+                                        event.time_start,
+                                        event.time_end,
+                                    )
+                                }}
+                            </span>
+                        </div>
+
+                        <div
+                            v-if="event.location"
+                            class="flex items-center gap-2"
+                        >
+                            <svg
+                                class="h-4 w-4 text-neutral-400"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+                                />
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+                                />
+                            </svg>
+                            <span class="font-medium text-neutral-300">
+                                {{ event.location }}
+                            </span>
+                        </div>
+
+                        <div
+                            v-if="event.capacity"
+                            class="flex items-center gap-2"
+                        >
+                            <svg
+                                class="h-4 w-4 text-neutral-400"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+                                />
+                            </svg>
+                            <span class="font-medium text-neutral-300">
+                                {{ event.capacity }} vagas
+                            </span>
+                        </div>
+                    </div>
+
+                    <div
+                        v-if="event.description_html"
+                        class="prose prose-invert max-w-none text-justify text-base leading-relaxed text-neutral-300 prose-headings:text-white prose-a:text-sinf-purple-light hover:prose-a:text-white prose-strong:text-white sm:text-lg"
+                        v-html="event.description_html"
+                    />
+                    <p
+                        v-else-if="event.description"
+                        class="text-justify text-base leading-relaxed text-neutral-300 sm:text-lg"
+                    >
+                        {{ event.description }}
+                    </p>
+
+                    <div
+                        v-if="isParticipant"
+                        class="border-t border-white/8 pt-6"
+                    >
+                        <div
+                            v-if="hasJoined"
+                            class="flex flex-col items-center justify-between gap-4 sm:flex-row"
+                        >
+                            <div class="flex items-center gap-2">
+                                <span
+                                    class="text-xs font-semibold sm:text-sm"
+                                >
+                                    Inscrição confirmada! Vemo-nos lá.
+                                </span>
+                            </div>
+
+                            <button
+                                type="button"
+                                class="pill-container pill-item border-red-500/20 bg-red-500/10 hover:bg-red-500/20 shrink-0 cursor-pointer px-5 py-2 text-xs font-semibold text-red-300 transition-all active:scale-95 sm:text-sm"
+                                @click="handleLeaveEvent"
+                            >
+                                Cancelar Inscrição
+                            </button>
+                        </div>
+
+                        <div
+                            v-else-if="!isEnrolled"
+                            class="flex flex-col items-center justify-between gap-4 sm:flex-row"
+                        >
+                            <p
+                                class="text-center text-xs text-neutral-400 sm:text-left sm:text-sm"
+                            >
+                                Precisas de estar inscrito na SINF 2026 para
+                                participar.
+                            </p>
+                            <button
+                                type="button"
+                                class="pill-container pill-item bg-sinf-crimson/80 hover:bg-sinf-crimson shrink-0 cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
+                                @click="handleEnrollSinf"
+                            >
+                                Inscrever-me na SINF
+                            </button>
+                        </div>
+
+                        <div
+                            v-else-if="canJoin && event.external_url"
+                            class="flex flex-col items-center justify-between gap-4 sm:flex-row"
+                        >
+                            <p
+                                class="text-center text-xs text-neutral-400 sm:text-left sm:text-sm"
+                            >
+                                As inscrições são realizadas através do
+                                formulário oficial.
+                            </p>
+                            <a
+                                :href="event.external_url"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="pill-container pill-item bg-sinf-purple/80 hover:bg-sinf-purple shrink-0 cursor-pointer gap-2 px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
+                            >
+                                <span>Inscrever-me</span>
+                                <svg
+                                    class="h-4 w-4"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    stroke="currentColor"
+                                >
+                                    <path
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                                    />
+                                </svg>
+                            </a>
+                        </div>
+
+                        <div
+                            v-else-if="canJoin && event.enroll_in_site"
+                            class="flex flex-col items-center justify-between gap-4 sm:flex-row"
+                        >
+                            <p
+                                class="text-center text-xs text-neutral-400 sm:text-left sm:text-sm"
+                            >
+                                <span v-if="event.capacity">
+                                    Ainda restam
+                                    {{ event.capacity - enrollmentCount }} vagas
+                                    disponíveis.
+                                </span>
+                                <span v-else>
+                                    As inscrições estão abertas para
+                                    participantes da SINF 2026.
+                                </span>
+                            </p>
+                            <button
+                                type="button"
+                                class="pill-container pill-item bg-sinf-purple/80 hover:bg-sinf-purple shrink-0 cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
+                                @click="handleJoinEvent"
+                            >
+                                Inscrever-me no Evento
+                            </button>
+                        </div>
+
+                        <div
+                            v-else-if="
+                                event.capacity &&
+                                enrollmentCount >= event.capacity
+                            "
+                            class="text-center sm:text-left"
+                        >
+                            <p
+                                class="text-xs font-semibold text-red-400 sm:text-sm"
+                            >
+                                Este evento está atualmente esgotado.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </header>
+
+            <div
+                v-if="availableTabs.length > 0 || (isAdmin(authUser) || isStaff)"
+                class="flex flex-wrap items-center justify-center gap-3 sm:gap-4"
             >
-                <template v-if="!isEnrolled"
-                    >Inscreve-te nesta edição!</template
+                <div
+                    v-if="availableTabs.length > 0"
+                    class="pill-container flex-wrap justify-center gap-1 p-1"
                 >
-                <a
-                    v-else-if="event.external_url"
-                    :href="event.external_url"
-                    target="_blank"
-                    class="flex flex-col"
+                    <button
+                        v-for="tab in availableTabs"
+                        :key="tab.key"
+                        type="button"
+                        class="pill-item cursor-pointer gap-2 px-5 py-2 text-xs font-semibold transition-all sm:text-sm"
+                        :class="{ 'pill-item-active': activeTab === tab.key }"
+                        @click="activeTab = tab.key"
+                    >
+                        <span>{{ tab.label }}</span>
+                        <span
+                            v-if="tab.count !== undefined"
+                            class="py-0.2 rounded-full px-1.5 text-[10px] transition-colors"
+                            :class="
+                                activeTab === tab.key
+                                    ? 'bg-white/20 text-white'
+                                    : 'bg-white/8 text-neutral-400'
+                            "
+                        >
+                            {{ tab.count }}
+                        </span>
+                    </button>
+                </div>
+
+                <div
+                    v-if="isAdmin(authUser) || isStaff"
+                    class="pill-container p-1"
                 >
-                    Link para inscrição
-                </a>
-                <template v-else>Inscreve-te!</template>
-            </PrimaryButton>
-
-            <PrimaryButton
-                v-else-if="isEnrolled && hasJoined"
-                color="teal-dark"
-                shadow="red"
-                text-size="sm:text-3xl"
-                padding="sm:px-8"
-                @click="router.put(route('event.leave', { event: event.id }))"
+                    <Link
+                        :href="
+                            route('user.scan-code', {
+                                _query: {
+                                    event: event.id,
+                                },
+                            })
+                        "
+                        class="pill-item cursor-pointer gap-2 px-4 py-2 text-xs font-semibold text-white transition-all hover:bg-white/10 sm:text-sm"
+                    >
+                        <svg
+                            class="h-4 w-4"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"
+                            />
+                        </svg>
+                        <span>Digitalizar QR Code</span>
+                    </Link>
+                </div>
+            </div>
+
+            <div v-if="activeTab === 'speakers'" class="space-y-6">
+                <SpeakerInfo
+                    v-for="speaker in speakers"
+                    :key="speaker.id"
+                    :user="speaker"
+                />
+            </div>
+
+            <div
+                v-else-if="activeTab === 'companies'"
+                class="flex flex-row flex-wrap items-center justify-center gap-4 sm:gap-6"
             >
-                Cancela a inscrição
-            </PrimaryButton>
-        </div>
+                <div v-for="(company, idx) in companies" :key="idx">
+                    <Sponsor :company="company" />
+                </div>
+            </div>
 
-        <div
-            v-if="enrollments != null"
-            class="flex flex-col items-stretch justify-center p-12"
-        >
             <div
-                v-if="enrollments.length > 0"
-                class="bg-2025-blue flex flex-col items-center overflow-y-auto"
+                v-else-if="
+                    activeTab === 'enrollments' &&
+                    enrollments !== null &&
+                    enrollments !== undefined
+                "
+                class="w-full space-y-6"
             >
                 <div
-                    v-for="enrollment in enrollments"
-                    :key="enrollment.id"
-                    class="even:bg-2025-bg/20 flex w-full items-center justify-between gap-3 p-3"
+                    v-if="enrollments.length > 0"
+                    class="overflow-hidden rounded-3xl border border-white/8 bg-black/50 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md"
+                >
+                    <div class="divide-y divide-white/5">
+                        <div
+                            v-for="(enrollment, index) in enrollments"
+                            :key="enrollment.id"
+                            class="flex items-center justify-between gap-4 px-5 py-3.5 transition-colors hover:bg-white/4 sm:px-6 sm:py-4"
+                        >
+                            <div
+                                class="flex min-w-0 items-center gap-4 sm:gap-6"
+                            >
+                                <span
+                                    class="w-6 shrink-0 font-mono text-xs font-bold text-neutral-500 sm:w-8 sm:text-sm"
+                                >
+                                    #{{ index + 1 }}
+                                </span>
+
+                                <div class="min-w-0 flex-1">
+                                    <h4
+                                        class="truncate text-sm font-bold text-white sm:text-base"
+                                    >
+                                        {{
+                                            enrollment.participant?.user
+                                                ?.name ??
+                                            `Participante #${enrollment.id}`
+                                        }}
+                                    </h4>
+                                    <p
+                                        v-if="
+                                            enrollment.participant?.user?.email
+                                        "
+                                        class="truncate text-xs text-neutral-400"
+                                    >
+                                        {{
+                                            enrollment.participant?.user?.email
+                                        }}
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div class="shrink-0">
+                                <span
+                                    class="pill-container border-emerald-500/20 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-400 shadow-none"
+                                >
+                                    Inscrito
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div
+                    v-else
+                    class="flex flex-col items-center justify-center py-16 text-center"
                 >
-                    {{ enrollment.participant?.user?.name ?? enrollment.id }} -
-                    {{ enrollment.participant?.user?.email ?? enrollment.id }}
+                    <p class="text-xs text-neutral-500 sm:text-sm">
+                        Ainda nenhum participante se inscreveu neste evento.
+                    </p>
                 </div>
             </div>
-            <p v-else class="text-text-color text-center text-2xl font-bold">
-                Ainda nenhum participante se inscreveu neste evento.
-            </p>
         </div>
     </AppLayout>
 </template>

From ce2b21e72e1db3d163c5c02e5fab445cc9159276 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Thu, 3 Sep 2026 11:57:32 +0100
Subject: [PATCH 09/33] feat: auth pages

---
 resources/js/Components/Checkbox.vue          |  24 ++-
 resources/js/Components/PrimaryButton.vue     |  30 ++-
 resources/js/Components/TextInput.vue         | 184 ++++++++++++------
 resources/js/Layouts/CardLayout.vue           |  75 ++++++-
 resources/js/Pages/Auth/ConfirmPassword.vue   |  16 +-
 resources/js/Pages/Auth/ForgotPassword.vue    |  40 ++--
 resources/js/Pages/Auth/Login.vue             |  49 +++--
 resources/js/Pages/Auth/Register.vue          | 156 ++++++++-------
 resources/js/Pages/Auth/ResetPassword.vue     |  28 ++-
 .../js/Pages/Auth/TwoFactorChallenge.vue      |  58 +++---
 resources/js/Pages/Auth/VerifyEmail.vue       |  64 +++---
 11 files changed, 474 insertions(+), 250 deletions(-)

diff --git a/resources/js/Components/Checkbox.vue b/resources/js/Components/Checkbox.vue
index decce4d7..678924e5 100644
--- a/resources/js/Components/Checkbox.vue
+++ b/resources/js/Components/Checkbox.vue
@@ -2,32 +2,48 @@
 import { computed } from "vue";
 
 interface Props {
-    checked: boolean;
+    checked?: boolean;
+    modelValue?: boolean;
     value?: string;
+    id?: string;
+    name?: string;
+    required?: boolean;
 }
 
 interface Emits {
     (event: "update:checked", value: boolean): void;
+    (event: "update:modelValue", value: boolean): void;
 }
 
 const emit = defineEmits<Emits>();
 
 const props = withDefaults(defineProps<Props>(), {
     checked: false,
+    modelValue: undefined,
     value: undefined,
+    id: undefined,
+    name: undefined,
+    required: false,
 });
 
 const proxyChecked = computed({
-    get: () => props.checked,
-    set: (val) => emit("update:checked", val),
+    get: () =>
+        props.modelValue !== undefined ? props.modelValue : props.checked,
+    set: (val: boolean) => {
+        emit("update:checked", val);
+        emit("update:modelValue", val);
+    },
 });
 </script>
 
 <template>
     <input
+        :id="id"
         v-model="proxyChecked"
         type="checkbox"
+        :name="name"
         :value="value"
-        class="bg-2023-bg checked:bg-2025-blue checked:hover:bg-2023-teal-dark border border-black shadow-black/80 outline-hidden transition-all checked:border-black hover:shadow checked:hover:border-black"
+        :required="required"
+        class="text-sinf-crimson checked:border-sinf-crimson checked:bg-sinf-crimson focus:ring-sinf-crimson/30 h-4.5 w-4.5 cursor-pointer rounded-md border border-white/20 bg-white/5 transition-all duration-150 hover:border-white/40 hover:bg-white/10 focus:ring-2 focus:ring-offset-0 focus:outline-hidden"
     />
 </template>
diff --git a/resources/js/Components/PrimaryButton.vue b/resources/js/Components/PrimaryButton.vue
index b6407878..28655a67 100644
--- a/resources/js/Components/PrimaryButton.vue
+++ b/resources/js/Components/PrimaryButton.vue
@@ -6,29 +6,39 @@ interface Props {
     color?: string;
     textSize?: string;
     padding?: string;
+    disabled?: boolean;
 }
 
 const buttonColor: Record<string, string> = {
-    orange: "bg-2023-orange",
-    "teal-dark": "bg-2023-teal-dark",
-    "red-dark": "bg-2023-red-dark",
-    red: "bg-2023-red",
-    teal: "bg-2025-blue",
+    crimson:
+        "bg-sinf-crimson/80 hover:bg-sinf-crimson text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(154,0,54,0.4)]",
+    purple: "bg-sinf-purple/80 hover:bg-sinf-purple text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(106,0,255,0.4)]",
+    gradient:
+        "bg-linear-to-r from-sinf-crimson/90 to-sinf-purple/90 hover:from-sinf-crimson hover:to-sinf-purple text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(154,0,54,0.35)]",
+    teal: "bg-sinf-crimson/80 hover:bg-sinf-crimson text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(154,0,54,0.4)]",
+    orange: "bg-sinf-crimson/80 hover:bg-sinf-crimson text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(154,0,54,0.4)]",
+    red: "bg-sinf-crimson/80 hover:bg-sinf-crimson text-white hover:border-white/20",
+    "red-dark":
+        "bg-sinf-crimson-dark/90 hover:bg-sinf-crimson text-white hover:border-white/20",
+    "teal-dark":
+        "bg-sinf-purple-dark/90 hover:bg-sinf-purple text-white hover:border-white/20",
 };
 
 withDefaults(defineProps<Props>(), {
     type: "submit",
-    color: "teal",
-    textSize: "text-md",
-    padding: "",
+    color: "crimson",
+    textSize: "text-sm sm:text-base",
+    padding: "px-6 py-2.5",
+    disabled: false,
 });
 </script>
 
 <template>
     <button
         :type="type"
-        class="relative inline-flex items-center justify-center rounded-md px-4 py-2 font-semibold text-white filter-[drop-shadow(0_0_0_rgba(0,0,0,0))] transition-transform duration-300 hover:scale-105 hover:drop-shadow-[0_8px_20px_rgba(255,255,255,0.28)] focus:outline-hidden"
-        :class="[buttonColor[color], textSize, padding]"
+        :disabled="disabled"
+        class="pill-container pill-item cursor-pointer justify-center gap-1.5 font-semibold transition-all duration-200 active:scale-95 disabled:cursor-not-allowed disabled:opacity-40"
+        :class="[buttonColor[color] ?? buttonColor.crimson, textSize, padding]"
     >
         <slot />
     </button>
diff --git a/resources/js/Components/TextInput.vue b/resources/js/Components/TextInput.vue
index 5b27424e..18a2ed41 100644
--- a/resources/js/Components/TextInput.vue
+++ b/resources/js/Components/TextInput.vue
@@ -65,75 +65,147 @@ defineExpose({ focus: () => input.value?.focus() });
 
 defineOptions({ inheritAttrs: false });
 
-const baseClass =
-    "peer border border-white bg-white rounded-md px-3 pb-2 pt-6 disabled:opacity-50 disabled:text-gray-500";
-
 const visible = ref(false);
 </script>
 
 <template>
     <div class="relative flex flex-col items-stretch self-stretch">
-        <select
-            v-if="isSelect(props)"
-            :id="id"
-            ref="input"
-            v-model="value"
-            :class="baseClass"
-            v-bind="$attrs"
-            :multiple="props.multiple"
-        >
-            <option value="" disabled selected hidden>
-                {{ placeholder ?? "-" }}
-            </option>
-            <slot />
-        </select>
-
-        <textarea
-            v-else-if="type === 'textarea'"
-            :id="id"
-            ref="input"
-            v-model="value"
-            :class="[baseClass, 'min-h-7']"
-            :placeholder="placeholder ?? ''"
-            v-bind="$attrs"
-        />
-
-        <input
-            v-else
-            :id="id"
-            ref="input"
-            v-model="value"
-            :placeholder="placeholder ?? ''"
-            :class="[baseClass, type === 'password' ? 'pr-12' : '']"
-            :type="type === 'password' && visible ? 'text' : type"
-            v-bind="$attrs"
-        />
-
         <label
             v-if="label"
             :for="id"
-            class="text-2025-blue pointer-events-none absolute top-2 left-3 text-xs font-semibold transition-all peer-not-focus:peer-placeholder-shown:top-4 peer-not-focus:peer-placeholder-shown:text-base peer-disabled:text-gray-500 peer-disabled:opacity-50"
-            :aria-describedby="`${id}-error`"
-            >{{ label }}</label
+            class="mb-1.5 ml-3.5 block text-xs font-medium text-neutral-400"
+        >
+            {{ label }}
+        </label>
+
+        <div
+            v-if="isSelect(props)"
+            class="pill-container w-full px-4 py-2 transition-all duration-200 focus-within:border-white/20 focus-within:bg-black/65"
+            :class="
+                errorMessage
+                    ? 'border-red-500/50 focus-within:border-red-500/60 focus-within:ring-1 focus-within:ring-red-500/30'
+                    : ''
+            "
+        >
+            <select
+                :id="id"
+                ref="input"
+                v-model="value"
+                class="w-full cursor-pointer border-0 bg-transparent text-sm text-white shadow-none outline-none focus:border-transparent focus:shadow-none focus:ring-0 focus:outline-none"
+                v-bind="$attrs"
+                :multiple="props.multiple"
+            >
+                <option
+                    value=""
+                    disabled
+                    selected
+                    hidden
+                    class="bg-neutral-900 text-neutral-400"
+                >
+                    {{ placeholder ?? "-" }}
+                </option>
+                <slot />
+            </select>
+        </div>
+
+        <div
+            v-else-if="type === 'textarea'"
+            class="w-full rounded-3xl border border-white/8 bg-black/50 p-3.5 shadow-(--shadow-pill-inset) backdrop-blur-md transition-all duration-200 focus-within:border-white/20 focus-within:bg-black/65"
+            :class="
+                errorMessage
+                    ? 'border-red-500/50 focus-within:border-red-500/60 focus-within:ring-1 focus-within:ring-red-500/30'
+                    : ''
+            "
         >
+            <textarea
+                :id="id"
+                ref="input"
+                v-model="value"
+                class="min-h-24 w-full resize-y border-0 bg-transparent text-sm text-white placeholder-neutral-500 shadow-none outline-none focus:border-transparent focus:shadow-none focus:ring-0 focus:outline-none"
+                :placeholder="placeholder ?? ''"
+                v-bind="$attrs"
+            />
+        </div>
 
-        <button
-            v-if="type === 'password'"
-            type="button"
-            class="text-2025-blue absolute top-2 right-2 p-2 leading-4 peer-disabled:text-gray-500 peer-disabled:opacity-50"
-            @click="visible = visible!"
+        <div
+            v-else
+            class="pill-container w-full px-4 py-2 transition-all duration-200 focus-within:border-white/20 focus-within:bg-black/65"
+            :class="
+                errorMessage
+                    ? 'border-red-500/50 focus-within:border-red-500/60 focus-within:ring-1 focus-within:ring-red-500/30'
+                    : ''
+            "
         >
-            <OhVueIcon
-                :name="visible ? 'io-eye' : 'io-eye-off'"
-                class="h-6 w-6"
+            <input
+                :id="id"
+                ref="input"
+                v-model="value"
+                :placeholder="placeholder ?? ''"
+                :type="type === 'password' && visible ? 'text' : type"
+                class="w-full border-0 bg-transparent text-sm text-white placeholder-neutral-500 shadow-none outline-none focus:border-transparent focus:shadow-none focus:ring-0 focus:outline-none"
+                v-bind="$attrs"
             />
-        </button>
 
-        <span
-            v-show="errorMessage"
-            :id="`${id}-error`"
-            class="text-2023-red mt-2 font-semibold"
-            >{{ errorMessage }}</span
+            <button
+                v-if="type === 'password'"
+                type="button"
+                tabindex="-1"
+                class="ml-2 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-full text-neutral-400 transition-colors hover:bg-white/10 hover:text-white focus:outline-none"
+                :aria-label="visible ? 'Ocultar password' : 'Ver password'"
+                @click="visible = !visible"
+            >
+                <OhVueIcon
+                    :name="visible ? 'io-eye-off' : 'io-eye'"
+                    class="h-4 w-4"
+                />
+            </button>
+        </div>
+
+        <transition
+            enter-active-class="transition ease-out duration-150"
+            enter-from-class="opacity-0 -translate-y-1"
+            enter-to-class="opacity-100 translate-y-0"
         >
+            <div
+                v-if="errorMessage"
+                :id="`${id}-error`"
+                class="mt-1.5 ml-3.5 flex items-center gap-1.5 text-xs font-medium text-red-400"
+            >
+                <svg
+                    class="h-3.5 w-3.5 shrink-0"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                </svg>
+                <span>{{ errorMessage }}</span>
+            </div>
+        </transition>
     </div>
 </template>
+
+<style scoped>
+input,
+select,
+textarea {
+    border: 0 !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+    border-color: transparent !important;
+    outline: none !important;
+    box-shadow: none !important;
+    --tw-ring-shadow: none !important;
+    --tw-ring-offset-shadow: none !important;
+}
+</style>
diff --git a/resources/js/Layouts/CardLayout.vue b/resources/js/Layouts/CardLayout.vue
index f9cff8d6..ca6663ee 100644
--- a/resources/js/Layouts/CardLayout.vue
+++ b/resources/js/Layouts/CardLayout.vue
@@ -1,30 +1,87 @@
 <script setup lang="ts">
+import { computed } from "vue";
+import { Link } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
 import AppLayout from "./AppLayout.vue";
 
 interface Props {
     title: string;
     heading?: string;
+    subtitle?: string;
+    maxWidth?: string;
 }
 
-defineProps<Props>();
+withDefaults(defineProps<Props>(), {
+    heading: undefined,
+    subtitle: undefined,
+    maxWidth: "max-w-lg",
+});
+
+const currentRouteName = computed(() => {
+    try {
+        if (route().current("login")) return "login";
+        if (route().current("register")) return "register";
+        return null;
+    } catch {
+        return null;
+    }
+});
+
+const showAuthTabs = computed(() => {
+    return (
+        currentRouteName.value === "login" ||
+        currentRouteName.value === "register"
+    );
+});
 </script>
 
 <template>
     <AppLayout :title="title">
         <div
-            class="bg-2025-blue-bg flex min-h-screen flex-col items-center pt-6 sm:justify-center sm:pt-0"
+            class="relative flex min-h-[calc(100vh-8rem)] flex-col items-center justify-center px-4 py-12 sm:py-16"
         >
+            <div v-if="showAuthTabs" class="mb-6 flex justify-center">
+                <div class="pill-container gap-1 p-1">
+                    <Link
+                        :href="route('login')"
+                        class="pill-item cursor-pointer px-6 py-2 text-xs font-medium transition-all duration-200 sm:text-sm"
+                        :class="{
+                            'pill-item-active': currentRouteName === 'login',
+                        }"
+                    >
+                        <span>Iniciar sessão</span>
+                    </Link>
+                    <Link
+                        :href="route('register')"
+                        class="pill-item cursor-pointer px-6 py-2 text-xs font-medium transition-all duration-200 sm:text-sm"
+                        :class="{
+                            'pill-item-active': currentRouteName === 'register',
+                        }"
+                    >
+                        <span>Criar conta</span>
+                    </Link>
+                </div>
+            </div>
+
             <div
-                class="relative m-6 flex w-full flex-col items-center gap-8 rounded-md border-0 bg-white/5 p-8 shadow-[0_0_40px_-12px_rgba(255,255,255,0.18)] ring-1 ring-white/10 backdrop-blur-xs sm:max-w-lg"
-                :class="{ 'pt-14': heading }"
+                v-else-if="heading || title"
+                class="mb-6 flex flex-col items-center text-center"
             >
-                <h2
-                    v-if="heading"
-                    class="bg-2025-blue-dark text-text-color absolute top-0 z-10 inline-block -translate-y-2/3 rounded-md border border-white px-6 py-3 text-2xl font-bold"
+                <h1
+                    class="text-2xl font-bold tracking-tight text-white sm:text-3xl"
                 >
-                    {{ heading }}
-                </h2>
+                    {{ heading ?? title }}
+                </h1>
 
+                <p v-if="subtitle" class="mt-2 text-sm text-neutral-400">
+                    {{ subtitle }}
+                </p>
+            </div>
+
+            <div
+                class="relative flex w-full flex-col gap-6 rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 select-none hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8 md:p-10"
+                :class="maxWidth"
+            >
                 <slot />
             </div>
         </div>
diff --git a/resources/js/Pages/Auth/ConfirmPassword.vue b/resources/js/Pages/Auth/ConfirmPassword.vue
index 6b282504..6ca8d72e 100644
--- a/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -3,7 +3,7 @@ import { ref } from "vue";
 import { useForm } from "@inertiajs/vue3";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
-import CardLayout from "../../Layouts/CardLayout.vue";
+import CardLayout from "@/Layouts/CardLayout.vue";
 import { route } from "ziggy-js";
 
 const form = useForm({
@@ -16,7 +16,6 @@ const submit = () => {
     form.post(route("password.confirm"), {
         onFinish: () => {
             form.reset();
-
             passwordInput.value?.focus();
         },
     });
@@ -24,8 +23,12 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Confirmar password" heading="Confirma a tua password">
-        <form class="contents" @submit.prevent="submit">
+    <CardLayout
+        title="Confirmar password"
+        heading="Confirma a tua password"
+        subtitle="Esta é uma área protegida. Por favor, confirma a tua password antes de continuar."
+    >
+        <form class="flex flex-col gap-5" @submit.prevent="submit">
             <TextInput
                 id="password"
                 ref="passwordInput"
@@ -38,8 +41,9 @@ const submit = () => {
                 :error-message="form.errors.password"
             />
 
-            <PrimaryButton :disabled="form.processing">
-                Confirmo
+            <PrimaryButton :disabled="form.processing" class="mt-2 w-full">
+                <span v-if="form.processing">A confirmar...</span>
+                <span v-else>Confirmar</span>
             </PrimaryButton>
         </form>
     </CardLayout>
diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index e1c76aa6..bdcfc0a6 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { Head, useForm } from "@inertiajs/vue3";
+import { Link, useForm } from "@inertiajs/vue3";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import { route } from "ziggy-js";
 
 interface Props {
-    status: string;
+    status?: string;
 }
 
 defineProps<Props>();
@@ -21,29 +21,47 @@ const submit = () => {
 </script>
 
 <template>
-    <Head title="Forgot Password" />
-
-    <CardLayout title="Repor password" heading="Esqueceste-te da tua password?">
-        <span v-if="status" class="text-text-color p-4">
+    <CardLayout
+        title="Repor password"
+        heading="Recuperar password"
+        subtitle="Indica o teu email e enviaremos um link para recuperares o acesso"
+    >
+        <div
+            v-if="status"
+            class="rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-3.5 text-center text-xs font-medium text-emerald-400"
+        >
             {{ status }}
-        </span>
+        </div>
 
-        <form class="contents" @submit.prevent="submit">
+        <form class="flex flex-col gap-5" @submit.prevent="submit">
             <TextInput
                 id="email"
                 v-model="form.email"
-                class="bg-white"
                 label="Email"
                 type="email"
                 required
                 autofocus
                 autocomplete="email"
+                placeholder="nome@exemplo.pt"
                 :error-message="form.errors.email"
             />
 
-            <PrimaryButton :disabled="form.processing">
-                Enviar email
+            <PrimaryButton :disabled="form.processing" class="mt-1 w-full">
+                <span v-if="form.processing">A enviar link...</span>
+                <span v-else>Enviar email</span>
             </PrimaryButton>
+
+            <div
+                class="pt-4 text-center text-xs text-neutral-400 sm:text-sm"
+            >
+                Lembraste-te da password?
+                <Link
+                    :href="route('login')"
+                    class="ml-1 font-semibold text-white underline underline-offset-4 transition-colors hover:text-neutral-200"
+                >
+                    Voltar ao início de sessão
+                </Link>
+            </div>
         </form>
     </CardLayout>
 </template>
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 75d959bd..4079cd95 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -3,15 +3,18 @@ import { Link, useForm } from "@inertiajs/vue3";
 import Checkbox from "@/Components/Checkbox.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
-import CardLayout from "../../Layouts/CardLayout.vue";
+import CardLayout from "@/Layouts/CardLayout.vue";
 import { route } from "ziggy-js";
 
 interface Props {
-    canResetPassword: boolean;
-    status: string;
+    canResetPassword?: boolean;
+    status?: string;
 }
 
-defineProps<Props>();
+withDefaults(defineProps<Props>(), {
+    canResetPassword: true,
+    status: undefined,
+});
 
 const form = useForm({
     email: "",
@@ -30,12 +33,15 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Iniciar sessão" heading="Inicia sessão!">
-        <div v-if="status">
+    <CardLayout title="Iniciar sessão">
+        <div
+            v-if="status"
+            class="rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-3.5 text-center text-xs font-medium text-emerald-400"
+        >
             {{ status }}
         </div>
 
-        <form class="contents" @submit.prevent="submit">
+        <form class="flex flex-col gap-4" @submit.prevent="submit">
             <TextInput
                 id="email"
                 v-model="form.email"
@@ -44,6 +50,7 @@ const submit = () => {
                 required
                 autofocus
                 autocomplete="email"
+                placeholder="nome@exemplo.pt"
                 :error-message="form.errors.email"
             />
 
@@ -54,25 +61,35 @@ const submit = () => {
                 type="password"
                 required
                 autocomplete="current-password"
+                placeholder="••••••••"
                 :error-message="form.errors.password"
             />
 
-            <label class="flex items-center gap-2 self-stretch">
-                <Checkbox v-model:checked="form.remember" name="remember" />
-                <span class="text-text-color">Lembrar-me</span>
-            </label>
-
             <div
-                class="text-text-color flex flex-col items-center gap-2 font-semibold underline"
+                class="flex items-center justify-between gap-2 px-1 text-xs sm:text-sm"
             >
-                <Link :href="route('register')">Ainda não tens conta?</Link>
+                <label
+                    class="group flex cursor-pointer items-center gap-2.5 text-neutral-300 select-none"
+                >
+                    <Checkbox v-model:checked="form.remember" name="remember" />
+                    <span class="transition-colors group-hover:text-white"
+                        >Lembrar-me</span
+                    >
+                </label>
 
-                <Link v-if="canResetPassword" :href="route('password.request')">
+                <Link
+                    v-if="canResetPassword"
+                    :href="route('password.request')"
+                    class="text-xs text-neutral-400 transition-colors hover:text-white sm:text-sm"
+                >
                     Esqueceste-te da password?
                 </Link>
             </div>
 
-            <PrimaryButton :disabled="form.processing"> Entrar </PrimaryButton>
+            <PrimaryButton :disabled="form.processing" class="mt-2 w-full">
+                <span v-if="form.processing">A entrar...</span>
+                <span v-else>Entrar</span>
+            </PrimaryButton>
         </form>
     </CardLayout>
 </template>
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index 185b6ffd..a000b756 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/resources/js/Pages/Auth/Register.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { Link, useForm } from "@inertiajs/vue3";
+import { useForm } from "@inertiajs/vue3";
 import Checkbox from "@/Components/Checkbox.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
-import CardLayout from "../../Layouts/CardLayout.vue";
+import CardLayout from "@/Layouts/CardLayout.vue";
 import { route } from "ziggy-js";
 
 const form = useForm({
@@ -23,16 +23,17 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Registar" heading="Regista-te!">
-        <form class="contents" @submit.prevent="submit">
+    <CardLayout title="Registar">
+        <form class="flex flex-col gap-4" @submit.prevent="submit">
             <TextInput
                 id="name"
                 v-model="form.name"
-                label="Nome"
+                label="Nome completo"
                 type="text"
                 required
                 autofocus
                 autocomplete="name"
+                placeholder="O teu nome"
                 :error-message="form.errors.name"
             />
 
@@ -43,81 +44,100 @@ const submit = () => {
                 type="email"
                 required
                 autocomplete="email"
+                placeholder="nome@exemplo.pt"
                 :error-message="form.errors.email"
             />
 
-            <TextInput
-                id="password"
-                v-model="form.password"
-                label="Password"
-                type="password"
-                required
-                autocomplete="new-password"
-                :error-message="form.errors.password"
-            />
-
-            <TextInput
-                id="password_confirmation"
-                v-model="form.password_confirmation"
-                label="Confirmar password"
-                type="password"
-                required
-                autocomplete="new-password"
-                :error-message="form.errors.password_confirmation"
-            />
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <TextInput
+                    id="password"
+                    v-model="form.password"
+                    label="Password"
+                    type="password"
+                    required
+                    autocomplete="new-password"
+                    placeholder="••••••••"
+                    :error-message="form.errors.password"
+                />
 
-            <label
-                v-if="$page.props.jetstream.hasTermsAndPrivacyPolicyFeature"
-                class="flex items-center gap-2 self-stretch"
-            >
-                <Checkbox
-                    id="terms"
-                    v-model:checked="form.terms"
-                    name="terms"
+                <TextInput
+                    id="password_confirmation"
+                    v-model="form.password_confirmation"
+                    label="Confirmar password"
+                    type="password"
                     required
+                    autocomplete="new-password"
+                    placeholder="••••••••"
+                    :error-message="form.errors.password_confirmation"
                 />
+            </div>
 
-                <span class="text-2023-teal"
-                    >I agree to the
-                    <a
-                        target="_blank"
-                        :href="route('terms.show')"
-                        class="rounded-md text-sm text-gray-600 underline focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
-                        >Terms of Service</a
-                    >
-                    and
-                    <a
-                        target="_blank"
-                        :href="route('policy.show')"
-                        class="rounded-md text-sm text-gray-600 underline focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
-                        >Privacy Policy</a
-                    ></span
+            <div class="space-y-2.5 pt-1">
+                <label
+                    v-if="$page.props.jetstream.hasTermsAndPrivacyPolicyFeature"
+                    class="group flex cursor-pointer items-start gap-3 rounded-2xl border border-white/6 bg-black/30 p-3 text-xs leading-relaxed text-neutral-300 shadow-(--shadow-pill-inset) backdrop-blur-sm transition-all hover:border-white/15 hover:bg-black/45 sm:text-sm"
                 >
-            </label>
+                    <Checkbox
+                        id="terms"
+                        v-model:checked="form.terms"
+                        name="terms"
+                        required
+                        class="mt-0.5 shrink-0"
+                    />
 
-            <label class="text-text-color flex items-center gap-2 self-stretch">
-                <!-- We only need to have this checkbox marked as required for the purpose of this feature to be met,
-                since it makes it so that every account that exists has agreed to this -->
-                <Checkbox
-                    id="data_sharing_agreement"
-                    v-model:checked="form.data_sharing_agreement"
-                    name="data_sharing_agreement"
-                    required
-                />
+                    <span>
+                        Concordo com os
+                        <a
+                            target="_blank"
+                            :href="route('terms.show')"
+                            class="font-medium text-white underline underline-offset-2 transition-colors hover:text-neutral-200"
+                            >Termos de Serviço</a
+                        >
+                        e a
+                        <a
+                            target="_blank"
+                            :href="route('policy.show')"
+                            class="font-medium text-white underline underline-offset-2 transition-colors hover:text-neutral-200"
+                            >Política de Privacidade</a
+                        >.
+                    </span>
+                </label>
+                <span
+                    v-if="form.errors.terms"
+                    class="ml-3 block text-xs font-medium text-red-400"
+                >
+                    {{ form.errors.terms }}
+                </span>
 
-                Concordo em ter as minhas informações pessoais partilhadas com
-                as empresas que participam na SINF.
-            </label>
+                <label
+                    class="group flex cursor-pointer items-start gap-3 rounded-2xl border border-white/6 bg-black/30 p-3 text-xs leading-relaxed text-neutral-300 shadow-(--shadow-pill-inset) backdrop-blur-sm transition-all hover:border-white/15 hover:bg-black/45 sm:text-sm"
+                >
+                    <!-- We only need to have this checkbox marked as required for the purpose of this feature to be met,
+                    since it makes it so that every account that exists has agreed to this -->
+                    <Checkbox
+                        id="data_sharing_agreement"
+                        v-model:checked="form.data_sharing_agreement"
+                        name="data_sharing_agreement"
+                        required
+                        class="mt-0.5 shrink-0"
+                    />
 
-            <Link
-                :href="route('login')"
-                class="text-text-color font-semibold underline"
-            >
-                Já tens conta?
-            </Link>
+                    <span>
+                        Concordo em ter as minhas informações pessoais
+                        partilhadas com as empresas que participam na SINF.
+                    </span>
+                </label>
+                <span
+                    v-if="form.errors.data_sharing_agreement"
+                    class="ml-3 block text-xs font-medium text-red-400"
+                >
+                    {{ form.errors.data_sharing_agreement }}
+                </span>
+            </div>
 
-            <PrimaryButton :disabled="form.processing">
-                Criar conta
+            <PrimaryButton :disabled="form.processing" class="mt-2 w-full">
+                <span v-if="form.processing">A criar conta...</span>
+                <span v-else>Criar conta</span>
             </PrimaryButton>
         </form>
     </CardLayout>
diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
index e234bf9e..34c78245 100644
--- a/resources/js/Pages/Auth/ResetPassword.vue
+++ b/resources/js/Pages/Auth/ResetPassword.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useForm } from "@inertiajs/vue3";
+import { Link, useForm } from "@inertiajs/vue3";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
-import CardLayout from "../../Layouts/CardLayout.vue";
+import CardLayout from "@/Layouts/CardLayout.vue";
 import { route } from "ziggy-js";
 
 interface Props {
@@ -27,8 +27,12 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Repor password" heading="Repõe a tua password">
-        <form class="contents" @submit.prevent="submit">
+    <CardLayout
+        title="Repor password"
+        heading="Repor a tua password"
+        subtitle="Escolhe uma nova password segura para a tua conta"
+    >
+        <form class="flex flex-col gap-5" @submit.prevent="submit">
             <TextInput
                 id="email"
                 v-model="form.email"
@@ -60,9 +64,21 @@ const submit = () => {
                 :error-message="form.errors.password_confirmation"
             />
 
-            <PrimaryButton :disabled="form.processing">
-                Repor password
+            <PrimaryButton :disabled="form.processing" class="mt-2 w-full">
+                <span v-if="form.processing">A repor...</span>
+                <span v-else>Repor password</span>
             </PrimaryButton>
+
+            <div
+                class="mt-2 border-t border-white/8 pt-4 text-center text-xs text-neutral-400 sm:text-sm"
+            >
+                <Link
+                    :href="route('login')"
+                    class="font-semibold text-white underline underline-offset-4 transition-colors hover:text-neutral-200"
+                >
+                    Voltar ao início de sessão
+                </Link>
+            </div>
         </form>
     </CardLayout>
 </template>
diff --git a/resources/js/Pages/Auth/TwoFactorChallenge.vue b/resources/js/Pages/Auth/TwoFactorChallenge.vue
index 645e8ae9..44984561 100644
--- a/resources/js/Pages/Auth/TwoFactorChallenge.vue
+++ b/resources/js/Pages/Auth/TwoFactorChallenge.vue
@@ -36,26 +36,22 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Confirmar Two-factor">
-        <div class="mb-4 text-sm text-gray-600">
-            <template v-if="!recovery">
-                Please confirm access to your account by entering the
-                authentication code provided by your authenticator application.
-            </template>
-
-            <template v-else>
-                Please confirm access to your account by entering one of your
-                emergency recovery codes.
-            </template>
-        </div>
-
-        <form @submit.prevent="submit">
+    <CardLayout
+        title="Confirmar Two-Factor"
+        heading="Autenticação de Dois Fatores"
+        :subtitle="
+            !recovery
+                ? 'Confirma o acesso inserindo o código da tua aplicação de autenticação.'
+                : 'Confirma o acesso inserindo um dos teus códigos de recuperação de emergência.'
+        "
+    >
+        <form class="flex flex-col gap-5" @submit.prevent="submit">
             <TextInput
                 v-if="!recovery"
                 id="code"
                 ref="codeInput"
                 v-model="form.code"
-                label="Code"
+                label="Código"
                 type="text"
                 inputmode="numeric"
                 autofocus
@@ -68,31 +64,33 @@ const submit = () => {
                 id="recovery_code"
                 ref="recoveryCodeInput"
                 v-model="form.recovery_code"
-                label="Recovery Code"
+                label="Código de recuperação"
                 type="text"
-                class="mt-1 block w-full"
+                autofocus
                 autocomplete="one-time-code"
                 :error-message="form.errors.recovery_code"
             />
 
-            <div class="mt-4 flex items-center justify-end">
+            <PrimaryButton :disabled="form.processing" class="mt-1 w-full">
+                <span v-if="form.processing">A verificar...</span>
+                <span v-else>Entrar</span>
+            </PrimaryButton>
+
+            <div
+                class="mt-2 border-t border-white/8 pt-4 text-center text-xs text-neutral-400 sm:text-sm"
+            >
                 <button
                     type="button"
-                    class="cursor-pointer text-sm text-gray-600 underline hover:text-gray-900"
+                    class="cursor-pointer font-medium text-white underline underline-offset-4 transition-colors hover:text-neutral-200"
                     @click.prevent="toggleRecovery"
                 >
-                    <template v-if="!recovery"> Use a recovery code </template>
-
-                    <template v-else> Use an authentication code </template>
+                    <template v-if="!recovery">
+                        Utilizar código de recuperação de emergência
+                    </template>
+                    <template v-else>
+                        Utilizar código da aplicação autenticadora
+                    </template>
                 </button>
-
-                <PrimaryButton
-                    class="ml-4"
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    Log in
-                </PrimaryButton>
             </div>
         </form>
     </CardLayout>
diff --git a/resources/js/Pages/Auth/VerifyEmail.vue b/resources/js/Pages/Auth/VerifyEmail.vue
index 17603f93..2312a1ff 100644
--- a/resources/js/Pages/Auth/VerifyEmail.vue
+++ b/resources/js/Pages/Auth/VerifyEmail.vue
@@ -23,47 +23,43 @@ const verificationLinkSent = computed(
 </script>
 
 <template>
-    <CardLayout title="Verificar email">
-        <div class="mb-4 text-sm text-gray-600">
-            Before continuing, could you verify your email address by clicking
-            on the link we just emailed to you? If you didn't receive the email,
-            we will gladly send you another.
-        </div>
-
+    <CardLayout
+        title="Verificar email"
+        heading="Verifica o teu email"
+        subtitle="Antes de continuar, clica no link de confirmação que enviámos para o teu email. Se não o recebeste, podemos enviar outro."
+    >
         <div
             v-if="verificationLinkSent"
-            class="mb-4 text-sm font-medium text-green-600"
+            class="rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-3.5 text-center text-xs font-medium text-emerald-400"
         >
-            A new verification link has been sent to the email address you
-            provided in your profile settings.
+            Um novo link de verificação foi enviado para o endereço de email
+            associado à tua conta.
         </div>
 
-        <form @submit.prevent="submit">
-            <div class="mt-4 flex items-center justify-between">
-                <PrimaryButton
-                    :class="{ 'opacity-25': form.processing }"
-                    :disabled="form.processing"
-                >
-                    Resend Verification Email
-                </PrimaryButton>
+        <form class="flex flex-col gap-5" @submit.prevent="submit">
+            <PrimaryButton :disabled="form.processing" class="w-full">
+                <span v-if="form.processing">A reenviar...</span>
+                <span v-else>Reenviar email de verificação</span>
+            </PrimaryButton>
 
-                <div>
-                    <Link
-                        :href="route('profile.show')"
-                        class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
-                    >
-                        Edit Profile</Link
-                    >
+            <div
+                class="mt-2 flex items-center justify-between border-t border-white/8 pt-4 text-xs sm:text-sm"
+            >
+                <Link
+                    :href="route('profile.show')"
+                    class="text-neutral-400 underline underline-offset-2 transition-colors hover:text-white"
+                >
+                    Editar Perfil
+                </Link>
 
-                    <Link
-                        :href="route('logout')"
-                        method="post"
-                        as="button"
-                        class="ml-2 rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden"
-                    >
-                        Log Out
-                    </Link>
-                </div>
+                <Link
+                    :href="route('logout')"
+                    method="post"
+                    as="button"
+                    class="cursor-pointer text-red-400 underline underline-offset-2 transition-colors hover:text-red-300"
+                >
+                    Terminar Sessão
+                </Link>
             </div>
         </form>
     </CardLayout>

From ac8862ff3daa90d0ecdbeb3eca53a80b7600347f Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Thu, 3 Sep 2026 17:21:28 +0100
Subject: [PATCH 10/33] chore: standardized a few components for consistency

---
 package-lock.json                             |  59 +-
 package.json                                  |   2 +-
 resources/css/app.css                         |  56 +-
 resources/js/Components/AdminNavbar.vue       |  10 +-
 resources/js/Components/Banner.vue            |  21 +-
 resources/js/Components/Checkbox.vue          |   2 +-
 .../Competition/CompetitionLeaderboard.vue    |   6 +-
 resources/js/Components/DangerButton.vue      |  18 -
 resources/js/Components/Event/SpeakerInfo.vue | 108 +--
 resources/js/Components/Footer.vue            |  32 +-
 resources/js/Components/GlowingOrbs.vue       |   8 +-
 resources/js/Components/HamburgerMenu.vue     | 101 +--
 resources/js/Components/Home/InfoPopup.vue    |   2 -
 resources/js/Components/Home/SpeakerSlide.vue | 157 ++---
 .../js/Components/Home/SpeakersCarousel.vue   |  65 +-
 resources/js/Components/Home/Sponsor.vue      |  40 +-
 resources/js/Components/ImageInput.vue        |   4 +-
 resources/js/Components/Navbar.vue            | 487 ++++++--------
 resources/js/Components/Podium.vue            |  27 -
 resources/js/Components/PrimaryButton.vue     |  23 +-
 .../js/Components/Profile/AllParticipants.vue |   9 +-
 resources/js/Components/Profile/CvArea.vue    |   8 +-
 .../Profile/EnrolledParticipants.vue          |   9 +-
 resources/js/Components/Profile/InfoCard.vue  | 103 +--
 resources/js/Components/Profile/QRCode.vue    |   6 +-
 .../js/Components/Program/ProgramDayPanel.vue |  39 +-
 .../Components/Program/ProgramDaySelector.vue |  59 +-
 .../Program/TimeLine/ActivityTimelineItem.vue | 188 ++----
 .../TimeLine/CompetitionTimelineItem.vue      |  85 +--
 .../Program/TimeLine/TalkTimelineItem.vue     | 164 ++---
 resources/js/Components/Shop/ShopItem.vue     | 262 ++++----
 .../js/Components/Team/DepartmentSection.vue  |  19 +-
 .../js/Components/Team/DepartmentSelector.vue |  65 +-
 resources/js/Components/Team/TeamMember.vue   | 211 ++----
 resources/js/Components/TextInput.vue         |  30 +-
 resources/js/Components/UI/Card.vue           |  89 +++
 resources/js/Components/UI/PillSelector.vue   | 636 ++++++++++++++++++
 resources/js/Components/UI/SocialIcon.vue     | 101 +++
 resources/js/Layouts/CardLayout.vue           |  50 +-
 resources/js/Pages/Auth/ForgotPassword.vue    |   4 +-
 resources/js/Pages/Competition.vue            |  72 +-
 resources/js/Pages/Event.vue                  | 117 ++--
 resources/js/Pages/Home.vue                   | 116 ++--
 .../Pages/Profile/Partials/DeleteUserForm.vue |   4 +-
 .../Partials/TwoFactorAuthenticationForm.vue  |   4 +-
 resources/js/Pages/Profile/ScanCode.vue       |   6 +-
 resources/js/Pages/Program.vue                |  14 +-
 resources/js/Pages/Shop.vue                   |  50 +-
 resources/js/Pages/Team.vue                   |  47 +-
 resources/js/app.ts                           |  13 +-
 vite.config.ts                                |   3 -
 51 files changed, 1917 insertions(+), 1894 deletions(-)
 delete mode 100644 resources/js/Components/DangerButton.vue
 delete mode 100644 resources/js/Components/Podium.vue
 create mode 100644 resources/js/Components/UI/Card.vue
 create mode 100644 resources/js/Components/UI/PillSelector.vue
 create mode 100644 resources/js/Components/UI/SocialIcon.vue

diff --git a/package-lock.json b/package-lock.json
index 03d7843a..f3b2d4c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,10 +1,11 @@
 {
-    "name": "html",
+    "name": "sinf-website",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "dependencies": {
+                "@lucide/vue": "^1.40.0",
                 "slugify": "^1.6.6",
                 "vue-cookies": "^1.8.6",
                 "vue-final-modal": "^4.5.5",
@@ -26,7 +27,6 @@
                 "eslint-plugin-vue": "^10.10.0",
                 "globals": "^17.8.0",
                 "laravel-vite-plugin": "^3.1.3",
-                "oh-vue-icons": "^1.0.0-rc3",
                 "prettier": "^3.0.3",
                 "prettier-plugin-tailwindcss": "^0.8.1",
                 "tailwindcss": "^4.3.3",
@@ -436,6 +436,15 @@
                 "@jridgewell/sourcemap-codec": "^1.4.14"
             }
         },
+        "node_modules/@lucide/vue": {
+            "version": "1.40.0",
+            "resolved": "https://registry.npmjs.org/@lucide/vue/-/vue-1.40.0.tgz",
+            "integrity": "sha512-d4Qpgu0yn5SqebZm62ySuIWeXq1QFBfNcjhxIVspxa16OMQCnQGNpwim+pyj1CIz9DiTPhGLoIHRhgKV068j2A==",
+            "license": "ISC",
+            "peerDependencies": {
+                "vue": ">=3.0.1"
+            }
+        },
         "node_modules/@napi-rs/wasm-runtime": {
             "version": "1.1.6",
             "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz",
@@ -3166,52 +3175,6 @@
                 "url": "https://github.com/fb55/nth-check?sponsor=1"
             }
         },
-        "node_modules/oh-vue-icons": {
-            "version": "1.0.0-rc3",
-            "resolved": "https://registry.npmjs.org/oh-vue-icons/-/oh-vue-icons-1.0.0-rc3.tgz",
-            "integrity": "sha512-+k2YC6piK7sEZnwbkQF3UokFPMmgqpiLP6f/H0ovQFLl20QA5V4U8EcI6EclD2Lt5NMQ3k6ilLGo8XyXqdVSvg==",
-            "dev": true,
-            "license": "MIT",
-            "dependencies": {
-                "vue-demi": "^0.12.5"
-            },
-            "peerDependencies": {
-                "@vue/composition-api": "^1.0.0-rc.1",
-                "vue": "^2.0.0 || >=3.0.0"
-            },
-            "peerDependenciesMeta": {
-                "@vue/composition-api": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/oh-vue-icons/node_modules/vue-demi": {
-            "version": "0.12.5",
-            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.5.tgz",
-            "integrity": "sha512-BREuTgTYlUr0zw0EZn3hnhC3I6gPWv+Kwh4MCih6QcAeaTlaIX0DwOVN0wHej7hSvDPecz4jygy/idsgKfW58Q==",
-            "dev": true,
-            "hasInstallScript": true,
-            "license": "MIT",
-            "bin": {
-                "vue-demi-fix": "bin/vue-demi-fix.js",
-                "vue-demi-switch": "bin/vue-demi-switch.js"
-            },
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "url": "https://github.com/sponsors/antfu"
-            },
-            "peerDependencies": {
-                "@vue/composition-api": "^1.0.0-rc.1",
-                "vue": "^3.0.0-0 || ^2.6.0"
-            },
-            "peerDependenciesMeta": {
-                "@vue/composition-api": {
-                    "optional": true
-                }
-            }
-        },
         "node_modules/optionator": {
             "version": "0.9.4",
             "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
diff --git a/package.json b/package.json
index 43b61d20..d3edf32e 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,6 @@
         "eslint-plugin-vue": "^10.10.0",
         "globals": "^17.8.0",
         "laravel-vite-plugin": "^3.1.3",
-        "oh-vue-icons": "^1.0.0-rc3",
         "prettier": "^3.0.3",
         "prettier-plugin-tailwindcss": "^0.8.1",
         "tailwindcss": "^4.3.3",
@@ -36,6 +35,7 @@
         "ziggy-js": "^2.0"
     },
     "dependencies": {
+        "@lucide/vue": "^1.40.0",
         "slugify": "^1.6.6",
         "vue-cookies": "^1.8.6",
         "vue-final-modal": "^4.5.5",
diff --git a/resources/css/app.css b/resources/css/app.css
index e349bc63..39178327 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -12,11 +12,13 @@
 
     --color-text-color: #ffffff;
 
-    /* 2026 Theme: Core Brand & Ambient Glow Palette */
-    --color-sinf-crimson: rgb(154, 0, 54);
-    --color-sinf-crimson-dark: rgb(64, 0, 23);
-    --color-sinf-purple: rgb(106, 0, 255);
-    --color-sinf-purple-dark: rgb(34, 1, 153);
+    /* Theme: Core Brand & Ambient Glow Palette */
+    --color-sinf-primary: rgb(154, 0, 54);
+    --color-sinf-primary-light: rgb(220, 55, 105);
+    --color-sinf-primary-dark: rgb(64, 0, 23);
+    --color-sinf-secondary: rgb(106, 0, 255);
+    --color-sinf-secondary-light: rgb(165, 100, 255);
+    --color-sinf-secondary-dark: rgb(34, 1, 153);
     --color-sinf-surface: #111215;
     --color-sinf-surface-dark: #090a0c;
 
@@ -62,10 +64,14 @@
     /* Keyframe Animations */
     --animate-2023-maintenance-jump: 2023-jump 2s
         cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
-    --animate-float-crimson-1: float-crimson-1 10s ease-in-out infinite;
-    --animate-float-purple-1: float-purple-1 12s ease-in-out infinite;
-    --animate-float-crimson-2: float-crimson-2 9s ease-in-out infinite;
-    --animate-float-purple-2: float-purple-2 11s ease-in-out infinite;
+    --animate-float-primary-1: float-primary-1 10s ease-in-out infinite;
+    --animate-float-secondary-1: float-secondary-1 12s ease-in-out infinite;
+    --animate-float-primary-2: float-primary-2 9s ease-in-out infinite;
+    --animate-float-secondary-2: float-secondary-2 11s ease-in-out infinite;
+    --animate-float-crimson-1: var(--animate-float-primary-1);
+    --animate-float-purple-1: var(--animate-float-secondary-1);
+    --animate-float-crimson-2: var(--animate-float-primary-2);
+    --animate-float-purple-2: var(--animate-float-secondary-2);
     --animate-spin-slow: spin 25s linear infinite;
 
     --breakpoint-ml: 900px;
@@ -82,7 +88,7 @@
     }
 }
 
-@keyframes float-crimson-1 {
+@keyframes float-primary-1 {
     0%,
     100% {
         transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
@@ -98,7 +104,7 @@
     }
 }
 
-@keyframes float-purple-1 {
+@keyframes float-secondary-1 {
     0%,
     100% {
         transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
@@ -114,7 +120,7 @@
     }
 }
 
-@keyframes float-crimson-2 {
+@keyframes float-primary-2 {
     0%,
     100% {
         transform: translate3d(0, 0, 0) scale(1);
@@ -126,7 +132,7 @@
     }
 }
 
-@keyframes float-purple-2 {
+@keyframes float-secondary-2 {
     0%,
     100% {
         transform: translate3d(0, 0, 0) scale(1);
@@ -159,6 +165,8 @@
     font-size: 13px;
     font-weight: 500;
     color: #d4d4d4;
+    cursor: pointer;
+    user-select: none;
     transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
 
     &:hover {
@@ -173,6 +181,12 @@
     &:focus {
         outline: none;
     }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.4;
+        pointer-events: none;
+    }
 }
 
 @utility pill-item-active {
@@ -191,7 +205,7 @@
     -webkit-backdrop-filter: blur(24px);
 }
 
-@utility glow-orb-crimson-1 {
+@utility glow-orb-primary-1 {
     background: radial-gradient(
         ellipse 70% 60% at 50% 50%,
         rgb(154 0 54 / 100%) 0%,
@@ -199,10 +213,10 @@
         rgb(64 0 23 / 25%) 70%,
         transparent 100%
     );
-    animation: var(--animate-float-crimson-1);
+    animation: var(--animate-float-primary-1);
 }
 
-@utility glow-orb-purple-1 {
+@utility glow-orb-secondary-1 {
     background: radial-gradient(
         ellipse 70% 60% at 50% 50%,
         rgb(106 0 255 / 95%) 0%,
@@ -210,27 +224,27 @@
         rgb(34 1 153 / 25%) 70%,
         transparent 100%
     );
-    animation: var(--animate-float-purple-1);
+    animation: var(--animate-float-secondary-1);
 }
 
-@utility glow-orb-crimson-2 {
+@utility glow-orb-primary-2 {
     background: radial-gradient(
         ellipse 80% 50% at 50% 50%,
         rgb(154 0 54 / 85%) 0%,
         rgb(64 0 23 / 35%) 50%,
         transparent 100%
     );
-    animation: var(--animate-float-crimson-2);
+    animation: var(--animate-float-primary-2);
 }
 
-@utility glow-orb-purple-2 {
+@utility glow-orb-secondary-2 {
     background: radial-gradient(
         ellipse 80% 50% at 50% 50%,
         rgb(106 0 255 / 85%) 0%,
         rgb(34 1 153 / 35%) 50%,
         transparent 100%
     );
-    animation: var(--animate-float-purple-2);
+    animation: var(--animate-float-secondary-2);
 }
 
 @layer base {
diff --git a/resources/js/Components/AdminNavbar.vue b/resources/js/Components/AdminNavbar.vue
index ea4f60d8..bb733707 100644
--- a/resources/js/Components/AdminNavbar.vue
+++ b/resources/js/Components/AdminNavbar.vue
@@ -3,7 +3,7 @@ import NavLink from "@/Components/NavLink.vue";
 import Dropdown from "@/Components/Dropdown.vue";
 import DropdownLink from "@/Components/DropdownLink.vue";
 import { route } from "ziggy-js";
-import { OhVueIcon } from "oh-vue-icons";
+import { User } from "@lucide/vue";
 
 interface Route {
     label: string;
@@ -60,9 +60,11 @@ const pageRoutes: Routes = {
                 </Dropdown>
             </template>
             <template v-else>
-                <a :href="route('login')">
-                    <OhVueIcon name="io-person" scale="1.7" fill="#025259">
-                    </OhVueIcon>
+                <a
+                    :href="route('login')"
+                    class="flex items-center p-1 text-neutral-300 hover:text-white"
+                >
+                    <User :size="24" />
                 </a>
             </template>
         </div>
diff --git a/resources/js/Components/Banner.vue b/resources/js/Components/Banner.vue
index 1e621275..19500fd1 100644
--- a/resources/js/Components/Banner.vue
+++ b/resources/js/Components/Banner.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { usePage } from "@inertiajs/vue3";
-import { OhVueIcon } from "oh-vue-icons";
+import { CheckCircle, AlertTriangle, X } from "@lucide/vue";
 
 const show = ref(true);
 const style = computed(
@@ -13,8 +13,6 @@ const id = computed(() => usePage().props.jetstream.flash?.bannerId || "");
 watch(id, async () => {
     show.value = true;
 });
-
-console.log("Banner.vue");
 </script>
 
 <template>
@@ -30,15 +28,12 @@ console.log("Banner.vue");
             <div
                 class="mx-auto flex max-w-(--breakpoint-xl) items-center justify-between gap-4 px-4 py-2"
             >
-                <OhVueIcon
-                    :name="
-                        style == 'success'
-                            ? 'io-checkmark-circle'
-                            : 'io-warning'
-                    "
-                    fill="white"
-                    class="h-8 w-8"
+                <CheckCircle
+                    v-if="style == 'success'"
+                    :size="28"
+                    class="shrink-0 text-white"
                 />
+                <AlertTriangle v-else :size="28" class="shrink-0 text-white" />
 
                 <span class="font-medium text-white">
                     {{ message }}
@@ -46,11 +41,11 @@ console.log("Banner.vue");
 
                 <button
                     type="button"
-                    class="ml-auto flex h-8 w-8 items-center justify-center"
+                    class="ml-auto flex h-8 w-8 cursor-pointer items-center justify-center text-white hover:opacity-80"
                     aria-label="Dismiss"
                     @click.prevent="show = false"
                 >
-                    <OhVueIcon name="io-close" fill="white" class="h-6 w-6" />
+                    <X :size="20" />
                 </button>
             </div>
         </div>
diff --git a/resources/js/Components/Checkbox.vue b/resources/js/Components/Checkbox.vue
index 678924e5..6a5bd342 100644
--- a/resources/js/Components/Checkbox.vue
+++ b/resources/js/Components/Checkbox.vue
@@ -44,6 +44,6 @@ const proxyChecked = computed({
         :name="name"
         :value="value"
         :required="required"
-        class="text-sinf-crimson checked:border-sinf-crimson checked:bg-sinf-crimson focus:ring-sinf-crimson/30 h-4.5 w-4.5 cursor-pointer rounded-md border border-white/20 bg-white/5 transition-all duration-150 hover:border-white/40 hover:bg-white/10 focus:ring-2 focus:ring-offset-0 focus:outline-hidden"
+        class="text-sinf-primary checked:border-sinf-primary checked:bg-sinf-primary focus:ring-sinf-primary/30 h-4.5 w-4.5 cursor-pointer rounded-md border border-white/20 bg-white/5 transition-all duration-150 hover:border-white/40 hover:bg-white/10 focus:ring-2 focus:ring-offset-0 focus:outline-hidden"
     />
 </template>
diff --git a/resources/js/Components/Competition/CompetitionLeaderboard.vue b/resources/js/Components/Competition/CompetitionLeaderboard.vue
index 67b560b1..0b08253e 100644
--- a/resources/js/Components/Competition/CompetitionLeaderboard.vue
+++ b/resources/js/Components/Competition/CompetitionLeaderboard.vue
@@ -63,14 +63,16 @@ const props = withDefaults(defineProps<Props>(), {
                             class="pill-container gap-1 px-3 py-1 text-xs font-bold text-white shadow-none sm:text-sm"
                         >
                             <span>{{ team.points }}</span>
-                            <span class="text-[10px] font-normal text-neutral-400 sm:text-xs">pts</span>
+                            <span
+                                class="text-[10px] font-normal text-neutral-400 sm:text-xs"
+                                >pts</span
+                            >
                         </div>
                     </div>
                 </div>
             </div>
         </div>
 
-        <!-- Empty State -->
         <div
             v-else
             class="flex flex-col items-center justify-center py-20 text-center"
diff --git a/resources/js/Components/DangerButton.vue b/resources/js/Components/DangerButton.vue
deleted file mode 100644
index e756820a..00000000
--- a/resources/js/Components/DangerButton.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { ButtonHTMLAttributes } from "vue";
-
-interface Props {
-    type: ButtonHTMLAttributes["type"];
-}
-
-withDefaults(defineProps<Props>(), { type: "button" });
-</script>
-
-<template>
-    <button
-        :type="type"
-        class="inline-flex items-center justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-red-500 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:outline-hidden active:bg-red-700"
-    >
-        <slot />
-    </button>
-</template>
diff --git a/resources/js/Components/Event/SpeakerInfo.vue b/resources/js/Components/Event/SpeakerInfo.vue
index 93d041c2..5d26e926 100644
--- a/resources/js/Components/Event/SpeakerInfo.vue
+++ b/resources/js/Components/Event/SpeakerInfo.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import type { SpeakerUser } from "@/Types/User";
+import Card from "@/Components/UI/Card.vue";
+import SocialIcon from "@/Components/UI/SocialIcon.vue";
 
 interface Props {
     user: SpeakerUser;
@@ -74,10 +76,12 @@ const socialLinks = computed(() => {
 </script>
 
 <template>
-    <article
-        class="group relative flex flex-col gap-6 rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8 md:flex-row md:items-start md:gap-8"
+    <Card
+        as="article"
+        padding="p-6 sm:p-8"
+        class="md:flex-row md:items-start md:gap-8"
     >
-        <div class="flex flex-col items-center gap-4 shrink-0">
+        <div class="flex shrink-0 flex-col items-center gap-4">
             <div
                 class="relative h-32 w-32 overflow-hidden rounded-2xl bg-neutral-900 ring-1 ring-white/10 sm:h-40 sm:w-40"
             >
@@ -109,81 +113,7 @@ const socialLinks = computed(() => {
                     class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-all hover:bg-white/10 hover:text-white"
                     :aria-label="item.label"
                 >
-                    <svg
-                        v-if="item.platform === 'github'"
-                        class="h-4 w-4"
-                        fill="currentColor"
-                        viewBox="0 0 24 24"
-                    >
-                        <path
-                            fill-rule="evenodd"
-                            clip-rule="evenodd"
-                            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-                        />
-                    </svg>
-
-                    <svg
-                        v-else-if="item.platform === 'linkedin'"
-                        class="h-4 w-4"
-                        fill="currentColor"
-                        viewBox="0 0 24 24"
-                    >
-                        <path
-                            d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"
-                        />
-                    </svg>
-
-                    <svg
-                        v-else-if="item.platform === 'website'"
-                        class="h-4 w-4"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                    >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
-                        />
-                    </svg>
-
-                    <svg
-                        v-else-if="item.platform === 'instagram'"
-                        class="h-4 w-4"
-                        fill="currentColor"
-                        viewBox="0 0 24 24"
-                    >
-                        <path
-                            d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"
-                        />
-                    </svg>
-
-                    <svg
-                        v-else-if="item.platform === 'twitter'"
-                        class="h-4 w-4"
-                        fill="currentColor"
-                        viewBox="0 0 24 24"
-                    >
-                        <path
-                            d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
-                        />
-                    </svg>
-
-                    <svg
-                        v-else-if="item.platform === 'email'"
-                        class="h-4 w-4"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                    >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                        />
-                    </svg>
+                    <SocialIcon :platform="item.platform" :size="16" />
                 </a>
             </div>
         </div>
@@ -199,17 +129,29 @@ const socialLinks = computed(() => {
                     v-if="user.usertype?.title || user.usertype?.organization"
                     class="text-xs font-medium text-neutral-400 sm:text-sm"
                 >
-                    <span v-if="user.usertype?.title">{{ user.usertype.title }}</span>
-                    <span v-if="user.usertype?.title && user.usertype?.organization"> · </span>
-                    <span v-if="user.usertype?.organization" class="text-neutral-300">{{ user.usertype.organization }}</span>
+                    <span v-if="user.usertype?.title">{{
+                        user.usertype.title
+                    }}</span>
+                    <span
+                        v-if="
+                            user.usertype?.title && user.usertype?.organization
+                        "
+                    >
+                        ·
+                    </span>
+                    <span
+                        v-if="user.usertype?.organization"
+                        class="text-neutral-300"
+                        >{{ user.usertype.organization }}</span
+                    >
                 </p>
             </div>
 
             <div
                 v-if="user.usertype?.description_html"
-                class="prose prose-invert max-w-none text-justify text-xs leading-relaxed text-neutral-300 sm:text-sm mt-4"
+                class="prose prose-invert mt-4 max-w-none text-justify text-xs leading-relaxed text-neutral-300 sm:text-sm"
                 v-html="user.usertype?.description_html"
             />
         </div>
-    </article>
+    </Card>
 </template>
diff --git a/resources/js/Components/Footer.vue b/resources/js/Components/Footer.vue
index cd0c7a02..7d8d6519 100644
--- a/resources/js/Components/Footer.vue
+++ b/resources/js/Components/Footer.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { Link } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
 
 const socialLinks = [
     {
@@ -20,6 +23,17 @@ const socialLinks = [
     },
 ];
 
+const socialItems: PillOption[] = socialLinks.map((social) => ({
+    id: social.icon,
+    href: social.url,
+    ariaLabel: social.name,
+    image: {
+        src: `/images/${social.icon}.svg`,
+        alt: social.name,
+        class: "h-4 w-4 object-contain",
+    },
+}));
+
 const currentYear = new Date().getFullYear();
 </script>
 
@@ -124,23 +138,7 @@ const currentYear = new Date().getFullYear();
                 </p>
             </div>
 
-            <div class="pill-container gap-1 px-2 py-1 shadow-none">
-                <a
-                    v-for="social in socialLinks"
-                    :key="social.name"
-                    :href="social.url"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    :aria-label="social.name"
-                    class="flex h-8 w-8 items-center justify-center rounded-full p-1.5 transition-all duration-200 hover:scale-110 hover:bg-white/10"
-                >
-                    <img
-                        :src="`/images/${social.icon}.svg`"
-                        :alt="social.name"
-                        class="h-full w-full object-contain"
-                    />
-                </a>
-            </div>
+            <PillSelector :items="socialItems" size="sm" :wrap="false" />
         </div>
     </footer>
 </template>
diff --git a/resources/js/Components/GlowingOrbs.vue b/resources/js/Components/GlowingOrbs.vue
index f919efb6..38e21652 100644
--- a/resources/js/Components/GlowingOrbs.vue
+++ b/resources/js/Components/GlowingOrbs.vue
@@ -46,22 +46,22 @@ const zones: Zone[] = [
 const orbDefinitions = [
     {
         className:
-            "glow-orb-crimson-1 absolute h-[85vh] w-[80vw] rounded-[100%] blur-[70px] will-change-transform sm:blur-[100px]",
+            "glow-orb-primary-1 absolute h-[85vh] w-[80vw] rounded-[100%] blur-[70px] will-change-transform sm:blur-[100px]",
         maxDelay: 10,
     },
     {
         className:
-            "glow-orb-purple-1 absolute h-[85vh] w-[80vw] rounded-[100%] blur-[70px] will-change-transform sm:blur-[100px]",
+            "glow-orb-secondary-1 absolute h-[85vh] w-[80vw] rounded-[100%] blur-[70px] will-change-transform sm:blur-[100px]",
         maxDelay: 12,
     },
     {
         className:
-            "glow-orb-crimson-2 absolute h-[65vh] w-[60vw] rounded-[100%] blur-[60px] will-change-transform sm:blur-[90px]",
+            "glow-orb-primary-2 absolute h-[65vh] w-[60vw] rounded-[100%] blur-[60px] will-change-transform sm:blur-[90px]",
         maxDelay: 9,
     },
     {
         className:
-            "glow-orb-purple-2 absolute h-[65vh] w-[60vw] rounded-[100%] blur-[60px] will-change-transform sm:blur-[90px]",
+            "glow-orb-secondary-2 absolute h-[65vh] w-[60vw] rounded-[100%] blur-[60px] will-change-transform sm:blur-[90px]",
         maxDelay: 11,
     },
 ];
diff --git a/resources/js/Components/HamburgerMenu.vue b/resources/js/Components/HamburgerMenu.vue
index 4362c534..656da223 100644
--- a/resources/js/Components/HamburgerMenu.vue
+++ b/resources/js/Components/HamburgerMenu.vue
@@ -5,6 +5,8 @@ import { route, type HasQueryParam } from "ziggy-js";
 import ResponsiveNavLink from "@/Components/ResponsiveNavLink.vue";
 import type Competition from "@/Types/Competition";
 import type { User } from "@/Types/User";
+import PillSelector from "@/Components/UI/PillSelector.vue";
+import { Menu, X, ChevronRight, ArrowRight } from "@lucide/vue";
 
 interface RouteItem {
     label: string;
@@ -88,28 +90,16 @@ const getPageRoute = (name: string, query?: HasQueryParam["_query"]) => {
 </script>
 
 <template>
-    <div class="pill-container md:hidden">
+    <PillSelector size="sm" :wrap="false" class="md:hidden">
         <button
             type="button"
-            class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-300 transition-all hover:bg-white/8 hover:text-white focus:outline-none"
+            class="pill-item flex h-7 w-7 items-center justify-center p-0"
             aria-label="Menu"
             @click="internalOpen = !internalOpen"
         >
-            <svg
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M4 6h16M4 12h16M4 18h16"
-                />
-            </svg>
+            <Menu :size="16" />
         </button>
-    </div>
+    </PillSelector>
 
     <Teleport to="body">
         <Transition
@@ -146,19 +136,7 @@ const getPageRoute = (name: string, query?: HasQueryParam["_query"]) => {
                             aria-label="Fechar menu"
                             @click="closeMenu"
                         >
-                            <svg
-                                class="h-5 w-5"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M6 18L18 6M6 6l12 12"
-                                />
-                            </svg>
+                            <X :size="20" />
                         </button>
                     </div>
 
@@ -181,19 +159,10 @@ const getPageRoute = (name: string, query?: HasQueryParam["_query"]) => {
                                         @click="closeMenu"
                                     >
                                         <span>{{ label }}</span>
-                                        <svg
-                                            class="h-4 w-4 text-neutral-500"
-                                            fill="none"
-                                            viewBox="0 0 24 24"
-                                            stroke="currentColor"
-                                        >
-                                            <path
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
-                                                stroke-width="2"
-                                                d="M9 5l7 7-7 7"
-                                            />
-                                        </svg>
+                                        <ChevronRight
+                                            :size="16"
+                                            class="text-neutral-500"
+                                        />
                                     </ResponsiveNavLink>
                                 </template>
 
@@ -209,19 +178,10 @@ const getPageRoute = (name: string, query?: HasQueryParam["_query"]) => {
                                         @click="closeMenu"
                                     >
                                         <span>{{ label }}</span>
-                                        <svg
-                                            class="h-4 w-4 text-neutral-500"
-                                            fill="none"
-                                            viewBox="0 0 24 24"
-                                            stroke="currentColor"
-                                        >
-                                            <path
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
-                                                stroke-width="2"
-                                                d="M9 5l7 7-7 7"
-                                            />
-                                        </svg>
+                                        <ChevronRight
+                                            :size="16"
+                                            class="text-neutral-500"
+                                        />
                                     </ResponsiveNavLink>
                                 </template>
                             </div>
@@ -247,19 +207,10 @@ const getPageRoute = (name: string, query?: HasQueryParam["_query"]) => {
                                         @click="closeMenu"
                                     >
                                         <span>{{ comp.name }}</span>
-                                        <svg
-                                            class="h-4 w-4 text-neutral-500"
-                                            fill="none"
-                                            viewBox="0 0 24 24"
-                                            stroke="currentColor"
-                                        >
-                                            <path
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
-                                                stroke-width="2"
-                                                d="M9 5l7 7-7 7"
-                                            />
-                                        </svg>
+                                        <ChevronRight
+                                            :size="16"
+                                            class="text-neutral-500"
+                                        />
                                     </ResponsiveNavLink>
                                 </template>
                             </div>
@@ -356,19 +307,7 @@ const getPageRoute = (name: string, query?: HasQueryParam["_query"]) => {
                             @click="closeMenu"
                         >
                             <span>Entrar</span>
-                            <svg
-                                class="h-4 w-4"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M14 5l7 7m0 0l-7 7m7-7H3"
-                                />
-                            </svg>
+                            <ArrowRight :size="16" />
                         </Link>
                     </template>
                 </div>
diff --git a/resources/js/Components/Home/InfoPopup.vue b/resources/js/Components/Home/InfoPopup.vue
index 87df698c..63e23904 100644
--- a/resources/js/Components/Home/InfoPopup.vue
+++ b/resources/js/Components/Home/InfoPopup.vue
@@ -83,8 +83,6 @@ const enroll = () => {
                 >
             </p>
             <PrimaryButton
-                color="teal"
-                shadow="teal"
                 text-size="text-2xl"
                 padding="sm:px-8"
                 @click="enroll"
diff --git a/resources/js/Components/Home/SpeakerSlide.vue b/resources/js/Components/Home/SpeakerSlide.vue
index f13416c1..1297b42b 100644
--- a/resources/js/Components/Home/SpeakerSlide.vue
+++ b/resources/js/Components/Home/SpeakerSlide.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { SpeakerUser } from "@/Types/User";
 import { computed } from "vue";
+import Card from "@/Components/UI/Card.vue";
+import SocialIcon from "@/Components/UI/SocialIcon.vue";
 
 interface Props {
     speaker: SpeakerUser;
@@ -29,119 +31,54 @@ const displayName = computed(() => {
 </script>
 
 <template>
-    <div
-        class="group relative flex h-full w-full flex-col justify-between rounded-3xl border border-white/8 bg-black/50 p-4 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.015] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-5"
+    <Card
+        :image-src="speaker.profile_photo_url"
+        :image-alt="displayName"
+        class="h-full w-full"
     >
-        <div
-            class="relative aspect-square w-full overflow-hidden rounded-2xl bg-neutral-900 ring-1 ring-white/10"
-        >
-            <img
-                :src="speaker.profile_photo_url"
-                :alt="displayName"
-                class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
-            />
-
-            <div
-                class="absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-            />
-        </div>
-
-        <div class="mt-4 flex flex-1 flex-col justify-between">
-            <div>
-                <h4
-                    class="truncate text-base font-bold tracking-tight text-white transition-colors group-hover:text-neutral-200"
+        <template #header>
+            <h4
+                class="truncate text-base font-bold tracking-tight text-white transition-colors group-hover:text-neutral-200"
+            >
+                {{ displayName }}
+            </h4>
+            <p
+                class="mt-1 line-clamp-2 min-h-9 text-xs leading-relaxed font-light text-neutral-400"
+            >
+                <span v-if="speaker.usertype?.title">
+                    {{ speaker.usertype.title }}
+                </span>
+                <span
+                    v-if="
+                        speaker.usertype?.title &&
+                        speaker.usertype?.organization
+                    "
+                    class="mx-1 text-neutral-600"
+                    >•</span
                 >
-                    {{ displayName }}
-                </h4>
-                <p
-                    class="mt-1 line-clamp-2 min-h-9 text-xs leading-relaxed font-light text-neutral-400"
+                <span
+                    v-if="speaker.usertype?.organization"
+                    class="font-medium text-neutral-300"
                 >
-                    <span v-if="speaker.usertype?.title">
-                        {{ speaker.usertype.title }}
-                    </span>
-                    <span
-                        v-if="
-                            speaker.usertype?.title &&
-                            speaker.usertype?.organization
-                        "
-                        class="mx-1 text-neutral-600"
-                        >•</span
-                    >
-                    <span
-                        v-if="speaker.usertype?.organization"
-                        class="font-medium text-neutral-300"
-                    >
-                        {{ speaker.usertype.organization }}
-                    </span>
-                </p>
-            </div>
+                    {{ speaker.usertype.organization }}
+                </span>
+            </p>
+        </template>
 
-            <div class="mt-4 flex min-h-9 items-center justify-between pt-3">
-                <div class="flex items-center gap-2">
-                    <a
-                        v-if="socialMedia.github"
-                        :href="socialMedia.github"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-all hover:bg-white/10 hover:text-white"
-                        aria-label="GitHub"
-                    >
-                        <svg
-                            class="h-4 w-4"
-                            fill="currentColor"
-                            viewBox="0 0 24 24"
-                        >
-                            <path
-                                fill-rule="evenodd"
-                                clip-rule="evenodd"
-                                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-                            />
-                        </svg>
-                    </a>
-
-                    <a
-                        v-if="socialMedia.linkedin"
-                        :href="socialMedia.linkedin"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-all hover:bg-white/10 hover:text-white"
-                        aria-label="LinkedIn"
-                    >
-                        <svg
-                            class="h-4 w-4"
-                            fill="currentColor"
-                            viewBox="0 0 24 24"
-                        >
-                            <path
-                                d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"
-                            />
-                        </svg>
-                    </a>
-
-                    <a
-                        v-if="socialMedia.website"
-                        :href="socialMedia.website"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-all hover:bg-white/10 hover:text-white"
-                        aria-label="Website"
-                    >
-                        <svg
-                            class="h-4 w-4"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
-                            />
-                        </svg>
-                    </a>
-                </div>
+        <template v-if="Object.keys(socialMedia).length > 0" #footer>
+            <div class="flex items-center gap-2">
+                <a
+                    v-for="(url, platform) in socialMedia"
+                    :key="platform"
+                    :href="url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-all hover:bg-white/10 hover:text-white"
+                    :aria-label="platform"
+                >
+                    <SocialIcon :platform="platform" :size="16" />
+                </a>
             </div>
-        </div>
-    </div>
+        </template>
+    </Card>
 </template>
diff --git a/resources/js/Components/Home/SpeakersCarousel.vue b/resources/js/Components/Home/SpeakersCarousel.vue
index cc6aaa84..002f8681 100644
--- a/resources/js/Components/Home/SpeakersCarousel.vue
+++ b/resources/js/Components/Home/SpeakersCarousel.vue
@@ -3,6 +3,10 @@ import { ref } from "vue";
 import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/carousel.css";
 import SpeakerSlide from "./SpeakerSlide.vue";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
+import { ChevronLeft, ChevronRight } from "@lucide/vue";
 import type { SpeakerUser, User } from "@/Types/User";
 
 interface Props {
@@ -18,6 +22,16 @@ interface CarouselInstance {
 
 const carousel = ref<CarouselInstance | null>(null);
 
+const controls: PillOption[] = [
+    { id: "prev", icon: ChevronLeft, ariaLabel: "Previous speaker" },
+    { id: "next", icon: ChevronRight, ariaLabel: "Next speaker" },
+];
+
+const handleControl = (item: PillOption) => {
+    if (item.id === "prev") prev();
+    else if (item.id === "next") next();
+};
+
 const breakpoints = {
     480: {
         itemsToShow: 1.8,
@@ -75,50 +89,13 @@ const prev = () => {
             </Slide>
         </Carousel>
 
-        <div
-            v-if="speakers.length > 1"
-            class="mt-6 flex items-center justify-center gap-3"
-        >
-            <button
-                type="button"
-                class="pill-container h-10 w-10 justify-center text-neutral-300 transition-all hover:scale-110 hover:text-white focus:outline-none active:scale-95"
-                aria-label="Previous speaker"
-                @click="prev"
-            >
-                <svg
-                    class="h-4 w-4"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M15 19l-7-7 7-7"
-                    />
-                </svg>
-            </button>
-            <button
-                type="button"
-                class="pill-container h-10 w-10 justify-center text-neutral-300 transition-all hover:scale-110 hover:text-white focus:outline-none active:scale-95"
-                aria-label="Next speaker"
-                @click="next"
-            >
-                <svg
-                    class="h-4 w-4"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M9 5l7 7-7 7"
-                    />
-                </svg>
-            </button>
+        <div v-if="speakers.length > 1" class="mt-6 flex justify-center">
+            <PillSelector
+                :items="controls"
+                size="sm"
+                :wrap="false"
+                @select="handleControl"
+            />
         </div>
     </div>
 </template>
diff --git a/resources/js/Components/Home/Sponsor.vue b/resources/js/Components/Home/Sponsor.vue
index b8eb8dab..605ccdbf 100644
--- a/resources/js/Components/Home/Sponsor.vue
+++ b/resources/js/Components/Home/Sponsor.vue
@@ -4,6 +4,9 @@ import { ref } from "vue";
 import { VueFinalModal } from "vue-final-modal";
 import "vue-final-modal/style.css";
 
+import Card from "@/Components/UI/Card.vue";
+import { X, ExternalLink } from "@lucide/vue";
+
 const options = ref({
     modelValue: false,
 });
@@ -16,9 +19,10 @@ defineProps<Props>();
 </script>
 
 <template>
-    <button
-        type="button"
-        class="group flex h-28 w-48 items-center justify-center rounded-3xl border border-white/8 bg-black/50 p-5 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.015] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] focus:outline-none sm:h-32 sm:w-56 sm:p-6"
+    <Card
+        as="button"
+        padding="p-5 sm:p-6"
+        class="h-28 w-48 cursor-pointer items-center justify-center focus:outline-none sm:h-32 sm:w-56"
         @click="options.modelValue = true"
     >
         <img
@@ -26,7 +30,7 @@ defineProps<Props>();
             :alt="company?.name"
             class="max-h-14 max-w-[85%] object-contain opacity-85 brightness-95 transition-all duration-300 ease-out group-hover:scale-105 group-hover:opacity-100 group-hover:brightness-110 sm:max-h-16"
         />
-    </button>
+    </Card>
 
     <VueFinalModal
         v-model="options.modelValue"
@@ -44,19 +48,7 @@ defineProps<Props>();
             aria-label="Close modal"
             @click="options.modelValue = false"
         >
-            <svg
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12"
-                />
-            </svg>
+            <X :size="16" />
         </button>
 
         <img
@@ -78,19 +70,7 @@ defineProps<Props>();
                     class="pill-container pill-item gap-1.5 px-3 py-1 text-xs font-medium text-neutral-300 hover:text-white"
                 >
                     <span>Website</span>
-                    <svg
-                        class="h-3.5 w-3.5"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                    >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                        />
-                    </svg>
+                    <ExternalLink :size="14" />
                 </a>
             </div>
 
diff --git a/resources/js/Components/ImageInput.vue b/resources/js/Components/ImageInput.vue
index 8f262ef5..a8cadc4e 100644
--- a/resources/js/Components/ImageInput.vue
+++ b/resources/js/Components/ImageInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { OhVueIcon } from "oh-vue-icons";
+import { Image as ImageIcon } from "@lucide/vue";
 import { ref } from "vue";
 
 interface Props {
@@ -53,7 +53,7 @@ const updatePreview = () => {
             class="shadow-2023-red max-h-40 w-auto border border-black object-contain shadow-md"
         />
 
-        <OhVueIcon v-else name="io-image" class="h-20 w-20" />
+        <ImageIcon v-else :size="80" class="text-neutral-400" />
 
         <span class="sr-only">{{ label }}</span>
 
diff --git a/resources/js/Components/Navbar.vue b/resources/js/Components/Navbar.vue
index 9d443e52..3e423af2 100644
--- a/resources/js/Components/Navbar.vue
+++ b/resources/js/Components/Navbar.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted } from "vue";
-import { Link, usePage, router } from "@inertiajs/vue3";
+import { usePage, router } from "@inertiajs/vue3";
 import { route, type HasQueryParam } from "ziggy-js";
 import { isAdmin as checkIsAdmin, type User } from "@/Types/User";
 import type Competition from "@/Types/Competition";
-import NavLink from "@/Components/NavLink.vue";
-import Dropdown from "@/Components/Dropdown.vue";
-import DropdownTrigger from "@/Components/DropdownTrigger.vue";
 import DropdownLink from "@/Components/DropdownLink.vue";
 import HamburgerMenu from "@/Components/HamburgerMenu.vue";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
+import {
+    ChevronRight,
+    User as UserIcon,
+    ShieldCheck,
+    LogOut,
+    ArrowRight,
+} from "@lucide/vue";
 
 interface RouteItem {
     label: string;
@@ -44,22 +51,6 @@ const competitions = computed<Competition[]>(
 const isScrolled = ref(false);
 const isMobileMenuOpen = ref(false);
 
-const options = computed(() => ({
-    pages: pageRoutes,
-    homeSections,
-    competitions: competitions.value,
-    editions,
-    currentEdition,
-}));
-
-const handleScroll = () => {
-    isScrolled.value = window.scrollY > 15;
-};
-
-const logout = () => {
-    router.post(route("logout"));
-};
-
 const isCurrentRoute = (name: string) => {
     try {
         return route().current(name);
@@ -76,6 +67,107 @@ const getPageRoute = (name: string, query?: HasQueryParam["_query"]) => {
     }
 };
 
+const logoItem = computed<PillOption[]>(() => [
+    {
+        id: "logo",
+        href: route("home"),
+        image: {
+            src: "/images/sinf-2026-sm.svg",
+            alt: "SINF Logo",
+            class: "h-4 w-auto transition-all duration-200 hover:brightness-110",
+        },
+    },
+]);
+
+const navItems = computed<PillOption[]>(() => {
+    const items: PillOption[] = [];
+    for (const [key, { label, href }] of Object.entries(homeSections)) {
+        items.push({
+            id: `home-${key}`,
+            label,
+            href: href || "/",
+        });
+    }
+    for (const [pageKey, { label, _query }] of Object.entries(pageRoutes)) {
+        items.push({
+            id: `page-${pageKey}`,
+            label,
+            href: getPageRoute(pageKey, _query),
+            active: isCurrentRoute(pageKey),
+        });
+    }
+    if (competitions.value.length > 0) {
+        items.push({
+            id: "competitions",
+            label: "Competições",
+            dropdown: {
+                align: "center",
+                width: 52,
+                items: competitions.value.map((comp) => ({
+                    id: comp.id,
+                    label: comp.name,
+                    href: route("competition.show", { competition: comp.slug }),
+                    trailingIcon: ChevronRight,
+                })),
+            },
+        });
+    }
+    return items;
+});
+
+const editionItem = computed<PillOption[]>(() => [
+    {
+        id: "edition",
+        label: String(currentEdition),
+        dropdown: {
+            align: "right",
+            width: 48,
+        },
+    },
+]);
+
+const authItems = computed<PillOption[]>(() => {
+    if (user.value) {
+        return [
+            {
+                id: "auth-user",
+                avatar: {
+                    src: user.value.profile_photo_url,
+                    alt: user.value.name,
+                },
+                dropdown: {
+                    align: "right",
+                    width: 56,
+                },
+            },
+        ];
+    }
+    return [
+        {
+            id: "auth-login",
+            label: "Entrar",
+            href: route("login"),
+            trailingIcon: ArrowRight,
+        },
+    ];
+});
+
+const options = computed(() => ({
+    pages: pageRoutes,
+    homeSections,
+    competitions: competitions.value,
+    editions,
+    currentEdition,
+}));
+
+const handleScroll = () => {
+    isScrolled.value = window.scrollY > 15;
+};
+
+const logout = () => {
+    router.post(route("logout"));
+};
+
 onMounted(() => {
     window.addEventListener("scroll", handleScroll, { passive: true });
     handleScroll();
@@ -93,286 +185,117 @@ onUnmounted(() => {
         <div
             class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8"
         >
-            <div class="pill-container">
-                <Link
-                    :href="route('home')"
-                    class="group flex items-center rounded-full px-2.5 py-1.5 transition-all duration-150 hover:bg-white/8 active:scale-95"
-                >
-                    <img
-                        class="h-4 w-auto transition-all duration-200 group-hover:brightness-110 group-hover:drop-shadow-[0_0_12px_rgba(255,255,255,0.3)]"
-                        src="/images/sinf-2026-sm.svg"
-                        alt="SINF Logo"
-                    />
-                </Link>
-            </div>
-
-            <nav class="pill-container hidden gap-0.5 md:flex">
-                <template
-                    v-for="({ label, href }, key) in homeSections"
-                    :key="key"
-                >
-                    <NavLink :href="href || '/'">
-                        {{ label }}
-                    </NavLink>
-                </template>
+            <PillSelector :items="logoItem" size="sm" :wrap="false" />
 
-                <template
-                    v-for="({ label, _query }, pageKey) in pageRoutes"
-                    :key="pageKey"
-                >
-                    <NavLink
-                        :href="getPageRoute(pageKey, _query)"
-                        :active="isCurrentRoute(pageKey)"
-                    >
-                        {{ label }}
-                    </NavLink>
-                </template>
+            <PillSelector
+                as="nav"
+                :items="navItems"
+                size="sm"
+                :wrap="false"
+                class="hidden md:flex"
+            />
 
-                <Dropdown
-                    v-if="competitions.length > 0"
-                    align="center"
-                    width="52"
+            <div class="flex items-center gap-2.5">
+                <PillSelector
+                    :items="editionItem"
+                    size="sm"
+                    :wrap="false"
+                    class="hidden md:flex"
                 >
-                    <template #trigger="{ open }">
-                        <DropdownTrigger :active="open">
-                            <span>Competições</span>
-                            <svg
-                                class="h-3.5 w-3.5 text-neutral-400 transition-transform duration-200"
-                                :class="{ 'rotate-180 text-white': open }"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
+                    <template #dropdown-edition>
+                        <div class="p-1">
+                            <div
+                                class="px-2.5 py-1 text-[10px] font-semibold text-neutral-500 uppercase"
                             >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M19 9l-7 7-7-7"
-                                />
-                            </svg>
-                        </DropdownTrigger>
+                                Edições Anteriores
+                            </div>
+                            <div class="mt-1 grid grid-cols-2 gap-1">
+                                <template
+                                    v-for="edition in editions"
+                                    :key="edition"
+                                >
+                                    <a
+                                        v-if="edition !== currentEdition"
+                                        :href="`https://${edition}.sinf.pt`"
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        class="flex items-center justify-center gap-1 rounded-lg px-2 py-1.5 text-xs font-medium text-neutral-300 transition-colors hover:bg-white/8 hover:text-white"
+                                    >
+                                        <span>{{ edition }}</span>
+                                    </a>
+                                    <div
+                                        v-else
+                                        class="flex items-center justify-center gap-1 rounded-lg bg-white/8 px-2 py-1.5 text-xs font-semibold text-white"
+                                    >
+                                        <span>{{ edition }}</span>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
                     </template>
+                </PillSelector>
 
-                    <template #content>
-                        <template v-for="comp in competitions" :key="comp.id">
-                            <DropdownLink
-                                :href="
-                                    route('competition.show', {
-                                        competition: comp.slug,
-                                    })
-                                "
+                <PillSelector :items="authItems" size="sm" :wrap="false">
+                    <template #dropdown-auth-user>
+                        <div class="border-b border-white/8 px-3 py-2.5">
+                            <p
+                                class="truncate text-xs font-semibold text-white"
                             >
-                                <span>{{ comp.name }}</span>
-                                <svg
-                                    class="h-3.5 w-3.5 text-neutral-500 opacity-0 transition-all duration-150 group-hover:translate-x-0.5 group-hover:text-white group-hover:opacity-100"
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                    stroke="currentColor"
-                                >
-                                    <path
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        stroke-width="2"
-                                        d="M9 5l7 7-7 7"
+                                {{ user?.name }}
+                            </p>
+                            <p class="truncate text-[11px] text-neutral-400">
+                                {{ user?.email }}
+                            </p>
+                            <span
+                                v-if="isAdmin"
+                                class="mt-1.5 inline-block rounded-md border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-semibold text-amber-300"
+                            >
+                                Administrador
+                            </span>
+                        </div>
+
+                        <div class="mt-1 space-y-0.5">
+                            <DropdownLink :href="route('profile.show')">
+                                <span class="flex items-center gap-2.5">
+                                    <UserIcon
+                                        :size="16"
+                                        class="text-neutral-400"
                                     />
-                                </svg>
+                                    <span>Perfil</span>
+                                </span>
                             </DropdownLink>
-                        </template>
-                    </template>
-                </Dropdown>
-            </nav>
 
-            <div class="flex items-center gap-2.5">
-                <div class="pill-container hidden md:flex">
-                    <Dropdown align="right" width="48">
-                        <template #trigger="{ open }">
-                            <button
-                                type="button"
-                                class="flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium text-neutral-300 transition-all duration-150 hover:bg-white/8 hover:text-white focus:outline-none"
-                                :class="{
-                                    'bg-white/8 text-white': open,
-                                }"
+                            <DropdownLink
+                                v-if="isAdmin"
+                                :href="route('admin.index')"
                             >
-                                <span>{{ currentEdition }}</span>
-                                <svg
-                                    class="h-3 w-3 text-neutral-400 transition-transform duration-200"
-                                    :class="{ 'rotate-180 text-white': open }"
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                    stroke="currentColor"
-                                >
-                                    <path
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        stroke-width="2"
-                                        d="M19 9l-7 7-7-7"
+                                <span class="flex items-center gap-2.5">
+                                    <ShieldCheck
+                                        :size="16"
+                                        class="text-neutral-400"
                                     />
-                                </svg>
-                            </button>
-                        </template>
-
-                        <template #content>
-                            <div class="p-1">
-                                <div
-                                    class="px-2.5 py-1 text-[10px] font-semibold text-neutral-500 uppercase"
-                                >
-                                    Edições Anteriores
-                                </div>
-                                <div class="mt-1 grid grid-cols-2 gap-1">
-                                    <template
-                                        v-for="edition in editions"
-                                        :key="edition"
-                                    >
-                                        <a
-                                            v-if="edition !== currentEdition"
-                                            :href="`https://${edition}.sinf.pt`"
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                            class="flex items-center justify-center gap-1 rounded-lg px-2 py-1.5 text-xs font-medium text-neutral-300 transition-colors hover:bg-white/8 hover:text-white"
-                                        >
-                                            <span>{{ edition }}</span>
-                                        </a>
-                                        <div
-                                            v-else
-                                            class="flex items-center justify-center gap-1 rounded-lg bg-white/8 px-2 py-1.5 text-xs font-semibold text-white"
-                                        >
-                                            <span>{{ edition }}</span>
-                                        </div>
-                                    </template>
-                                </div>
-                            </div>
-                        </template>
-                    </Dropdown>
-                </div>
-
-                <div v-if="user" class="pill-container">
-                    <Dropdown align="right" width="56">
-                        <template #trigger="{ open }">
-                            <button
-                                type="button"
-                                class="flex items-center gap-2 rounded-full p-0.5 transition-all hover:bg-white/8 focus:outline-none"
-                                :class="{ 'bg-white/8': open }"
-                            >
-                                <img
-                                    class="h-7 w-7 rounded-full object-cover ring-1 ring-white/20 transition-all hover:ring-white/50"
-                                    :src="user.profile_photo_url"
-                                    :alt="user.name"
-                                />
-                            </button>
-                        </template>
-
-                        <template #content>
-                            <div class="border-b border-white/8 px-3 py-2.5">
-                                <p
-                                    class="truncate text-xs font-semibold text-white"
-                                >
-                                    {{ user.name }}
-                                </p>
-                                <p
-                                    class="truncate text-[11px] text-neutral-400"
-                                >
-                                    {{ user.email }}
-                                </p>
-                                <span
-                                    v-if="isAdmin"
-                                    class="mt-1.5 inline-block rounded-md border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-semibold text-amber-300"
-                                >
-                                    Administrador
+                                    <span>Administração</span>
                                 </span>
-                            </div>
-
-                            <div class="mt-1 space-y-0.5">
-                                <DropdownLink :href="route('profile.show')">
-                                    <span class="flex items-center gap-2.5">
-                                        <svg
-                                            class="h-4 w-4 text-neutral-400"
-                                            fill="none"
-                                            viewBox="0 0 24 24"
-                                            stroke="currentColor"
-                                        >
-                                            <path
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
-                                                stroke-width="2"
-                                                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                                            />
-                                        </svg>
-                                        <span>Perfil</span>
-                                    </span>
-                                </DropdownLink>
+                            </DropdownLink>
 
-                                <DropdownLink
-                                    v-if="isAdmin"
-                                    :href="route('admin.index')"
+                            <div class="border-t border-white/6 pt-1">
+                                <button
+                                    type="button"
+                                    class="group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl px-3 py-2 text-left text-xs font-medium text-red-400 transition-colors hover:bg-red-500/10 hover:text-red-300 focus:outline-none"
+                                    @click="logout"
                                 >
                                     <span class="flex items-center gap-2.5">
-                                        <svg
-                                            class="h-4 w-4 text-neutral-400"
-                                            fill="none"
-                                            viewBox="0 0 24 24"
-                                            stroke="currentColor"
-                                        >
-                                            <path
-                                                stroke-linecap="round"
-                                                stroke-linejoin="round"
-                                                stroke-width="2"
-                                                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-                                            />
-                                        </svg>
-                                        <span>Administração</span>
+                                        <LogOut
+                                            :size="16"
+                                            class="text-red-400"
+                                        />
+                                        <span>Logout</span>
                                     </span>
-                                </DropdownLink>
-
-                                <div class="border-t border-white/6 pt-1">
-                                    <button
-                                        type="button"
-                                        class="group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl px-3 py-2 text-left text-xs font-medium text-red-400 transition-colors hover:bg-red-500/10 hover:text-red-300 focus:outline-none"
-                                        @click="logout"
-                                    >
-                                        <span class="flex items-center gap-2.5">
-                                            <svg
-                                                class="h-4 w-4 text-red-400"
-                                                fill="none"
-                                                viewBox="0 0 24 24"
-                                                stroke="currentColor"
-                                            >
-                                                <path
-                                                    stroke-linecap="round"
-                                                    stroke-linejoin="round"
-                                                    stroke-width="2"
-                                                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
-                                                />
-                                            </svg>
-                                            <span>Logout</span>
-                                        </span>
-                                    </button>
-                                </div>
+                                </button>
                             </div>
-                        </template>
-                    </Dropdown>
-                </div>
-
-                <div v-else class="pill-container">
-                    <Link
-                        :href="route('login')"
-                        class="group inline-flex items-center gap-2 rounded-full px-3.5 py-1.5 text-xs font-medium text-neutral-300 transition-all duration-150 hover:bg-white/8 hover:text-white active:scale-95"
-                    >
-                        <span>Entrar</span>
-                        <svg
-                            class="h-3.5 w-3.5 text-neutral-400 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-white"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M14 5l7 7m0 0l-7 7m7-7H3"
-                            />
-                        </svg>
-                    </Link>
-                </div>
+                        </div>
+                    </template>
+                </PillSelector>
 
                 <HamburgerMenu
                     v-model="isMobileMenuOpen"
diff --git a/resources/js/Components/Podium.vue b/resources/js/Components/Podium.vue
deleted file mode 100644
index a0fa1205..00000000
--- a/resources/js/Components/Podium.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type CompetitionTeam from "@/Types/CompetitionTeam";
-import { type CompetitionPrizes } from "@/Types/Competition";
-import CompetitionPodium from "@/Components/Competition/Podium.vue";
-
-interface Props {
-    mode?: "winners" | "prizes";
-    prizes?: CompetitionPrizes[];
-    leaderboard?: CompetitionTeam[];
-    isOver?: boolean;
-}
-
-withDefaults(defineProps<Props>(), {
-    mode: "winners",
-    prizes: () => [],
-    leaderboard: () => [],
-    isOver: false,
-});
-</script>
-
-<template>
-    <CompetitionPodium
-        :mode="mode"
-        :prizes="prizes"
-        :leaderboard="leaderboard"
-    />
-</template>
diff --git a/resources/js/Components/PrimaryButton.vue b/resources/js/Components/PrimaryButton.vue
index 28655a67..7404d3df 100644
--- a/resources/js/Components/PrimaryButton.vue
+++ b/resources/js/Components/PrimaryButton.vue
@@ -3,30 +3,25 @@ import type { ButtonHTMLAttributes } from "vue";
 
 interface Props {
     type?: ButtonHTMLAttributes["type"];
-    color?: string;
+    color?: "primary" | "secondary" | "gradient" | "danger";
     textSize?: string;
     padding?: string;
     disabled?: boolean;
 }
 
 const buttonColor: Record<string, string> = {
-    crimson:
-        "bg-sinf-crimson/80 hover:bg-sinf-crimson text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(154,0,54,0.4)]",
-    purple: "bg-sinf-purple/80 hover:bg-sinf-purple text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(106,0,255,0.4)]",
+    primary:
+        "bg-sinf-primary/80 hover:bg-sinf-primary text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(154,0,54,0.4)]",
+    secondary:
+        "bg-sinf-secondary/80 hover:bg-sinf-secondary text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(106,0,255,0.4)]",
     gradient:
-        "bg-linear-to-r from-sinf-crimson/90 to-sinf-purple/90 hover:from-sinf-crimson hover:to-sinf-purple text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(154,0,54,0.35)]",
-    teal: "bg-sinf-crimson/80 hover:bg-sinf-crimson text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(154,0,54,0.4)]",
-    orange: "bg-sinf-crimson/80 hover:bg-sinf-crimson text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(154,0,54,0.4)]",
-    red: "bg-sinf-crimson/80 hover:bg-sinf-crimson text-white hover:border-white/20",
-    "red-dark":
-        "bg-sinf-crimson-dark/90 hover:bg-sinf-crimson text-white hover:border-white/20",
-    "teal-dark":
-        "bg-sinf-purple-dark/90 hover:bg-sinf-purple text-white hover:border-white/20",
+        "bg-linear-to-r from-sinf-primary/90 to-sinf-secondary/90 hover:from-sinf-primary hover:to-sinf-secondary text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(154,0,54,0.35)]",
+    danger: "bg-red-500/80 hover:bg-red-500 text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(239,68,68,0.4)]",
 };
 
 withDefaults(defineProps<Props>(), {
     type: "submit",
-    color: "crimson",
+    color: "primary",
     textSize: "text-sm sm:text-base",
     padding: "px-6 py-2.5",
     disabled: false,
@@ -38,7 +33,7 @@ withDefaults(defineProps<Props>(), {
         :type="type"
         :disabled="disabled"
         class="pill-container pill-item cursor-pointer justify-center gap-1.5 font-semibold transition-all duration-200 active:scale-95 disabled:cursor-not-allowed disabled:opacity-40"
-        :class="[buttonColor[color] ?? buttonColor.crimson, textSize, padding]"
+        :class="[buttonColor[color] ?? buttonColor.primary, textSize, padding]"
     >
         <slot />
     </button>
diff --git a/resources/js/Components/Profile/AllParticipants.vue b/resources/js/Components/Profile/AllParticipants.vue
index 4477014e..4e3dedd0 100644
--- a/resources/js/Components/Profile/AllParticipants.vue
+++ b/resources/js/Components/Profile/AllParticipants.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type Participant from "@/Types/Participant";
 import { usePage } from "@inertiajs/vue3";
-import { OhVueIcon } from "oh-vue-icons";
+import { FileText } from "@lucide/vue";
+import SocialIcon from "@/Components/UI/SocialIcon.vue";
 import { route } from "ziggy-js";
 
 type Visitor = Participant & {
@@ -54,8 +55,9 @@ const user = usePage().props.user as Participant;
                         :href="visitor.social_media.linkedin"
                         target="_blank"
                         title="Linkedin"
+                        class="flex items-center text-neutral-400 hover:text-white"
                     >
-                        <OhVueIcon name="io-logo-linkedin" scale="1.3" />
+                        <SocialIcon platform="linkedin" :size="16" />
                     </a>
 
                     <a
@@ -63,8 +65,9 @@ const user = usePage().props.user as Participant;
                         :href="visitor.cv_url"
                         target="_blank"
                         title="CV"
+                        class="flex items-center text-neutral-400 hover:text-white"
                     >
-                        <OhVueIcon name="io-document-text" scale="1.3" />
+                        <FileText :size="16" />
                     </a>
                 </div>
             </div>
diff --git a/resources/js/Components/Profile/CvArea.vue b/resources/js/Components/Profile/CvArea.vue
index a748b546..9236f00f 100644
--- a/resources/js/Components/Profile/CvArea.vue
+++ b/resources/js/Components/Profile/CvArea.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type User, isCompany, isParticipant } from "@/Types/User";
 import { useForm, usePage } from "@inertiajs/vue3";
-import { OhVueIcon } from "oh-vue-icons";
+import { ExternalLink } from "@lucide/vue";
 import { ref } from "vue";
 import { route } from "ziggy-js";
 
@@ -126,9 +126,9 @@ const clearCVFileInput = () => {
                 target="_blank"
                 :href="item.usertype?.cv_url"
             >
-                <div class="text-2023-bg flex">
-                    <p class="mr-1">CV</p>
-                    <OhVueIcon name="io-open" scale="1.3"></OhVueIcon>
+                <div class="text-2023-bg flex items-center gap-1">
+                    <span>CV</span>
+                    <ExternalLink :size="16" />
                 </div>
             </a>
             <p v-if="isParticipant(item) && !item.usertype?.cv_path">
diff --git a/resources/js/Components/Profile/EnrolledParticipants.vue b/resources/js/Components/Profile/EnrolledParticipants.vue
index 801f8d51..9465fc75 100644
--- a/resources/js/Components/Profile/EnrolledParticipants.vue
+++ b/resources/js/Components/Profile/EnrolledParticipants.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type Participant from "@/Types/Participant";
 import { usePage } from "@inertiajs/vue3";
-import { OhVueIcon } from "oh-vue-icons";
+import { FileText } from "@lucide/vue";
+import SocialIcon from "@/Components/UI/SocialIcon.vue";
 import { route } from "ziggy-js";
 
 type Visitor = Participant & {
@@ -54,8 +55,9 @@ const user = usePage().props.user as Participant;
                         :href="visitor.social_media.linkedin"
                         target="_blank"
                         title="Linkedin"
+                        class="flex items-center text-neutral-400 hover:text-white"
                     >
-                        <OhVueIcon name="io-logo-linkedin" scale="1.3" />
+                        <SocialIcon platform="linkedin" :size="16" />
                     </a>
 
                     <a
@@ -63,8 +65,9 @@ const user = usePage().props.user as Participant;
                         :href="visitor.cv_url"
                         target="_blank"
                         title="CV"
+                        class="flex items-center text-neutral-400 hover:text-white"
                     >
-                        <OhVueIcon name="io-document-text" scale="1.3" />
+                        <FileText :size="16" />
                     </a>
                 </div>
             </div>
diff --git a/resources/js/Components/Profile/InfoCard.vue b/resources/js/Components/Profile/InfoCard.vue
index b982eb93..dd7d4ec5 100644
--- a/resources/js/Components/Profile/InfoCard.vue
+++ b/resources/js/Components/Profile/InfoCard.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { type User, isAdmin, isParticipant, isCompany } from "@/Types/User";
-import { OhVueIcon } from "oh-vue-icons";
 import "vue-final-modal/style.css";
 import { Link, usePage } from "@inertiajs/vue3";
+import { Award, Camera, Edit3 } from "@lucide/vue";
+import SocialIcon from "@/Components/UI/SocialIcon.vue";
 import { route } from "ziggy-js";
 import QRCode from "./QRCode.vue";
 
@@ -15,40 +16,14 @@ defineProps<Props>();
 
 const page = usePage();
 
-const socials = {
-    facebook: {
-        icon: "io-logo-facebook",
-        color: "white",
-    },
-    linkedin: {
-        icon: "io-logo-linkedin",
-        color: "white",
-    },
-    github: {
-        icon: "io-logo-github",
-        color: "white",
-    },
-    twitter: {
-        icon: "io-logo-twitter",
-        color: "white",
-    },
-    instagram: {
-        icon: "io-logo-instagram",
-        color: "white",
-    },
-    website: {
-        icon: "io-globe-outline",
-        color: "white",
-    },
-};
-
-const iconColor: Record<string, string> = {
-    orange: "#f29325",
-    "teal-dark": "#025259",
-    "red-dark": "#b15d5d",
-    red: "#d94f04",
-    teal: "#007172",
-};
+const socialKeys = [
+    "facebook",
+    "linkedin",
+    "github",
+    "twitter",
+    "instagram",
+    "website",
+] as const;
 
 const authUser = page.props.auth.user;
 </script>
@@ -59,35 +34,32 @@ const authUser = page.props.auth.user;
     >
         <div class="flex flex-col items-start justify-between space-y-10">
             <div>
-                <p class="font-bold">
-                    {{ user?.name }}
-                    <span v-if="isStaff" title="Staff">
-                        <OhVueIcon
-                            name="io-ribbon-outline"
-                            scale="1.4"
-                        ></OhVueIcon>
+                <p class="flex items-center gap-1.5 font-bold">
+                    <span>{{ user?.name }}</span>
+                    <span
+                        v-if="isStaff"
+                        title="Staff"
+                        class="inline-flex items-center text-amber-300"
+                    >
+                        <Award :size="18" />
                     </span>
                 </p>
                 <p>
                     {{ user?.email }}
                 </p>
             </div>
-            <div class="flex space-x-4">
-                <template v-for="(social, key) in socials" :key="key">
+            <div class="flex items-center space-x-4">
+                <template v-for="key in socialKeys" :key="key">
                     <a
                         v-if="
                             !isAdmin(user) &&
                             user?.usertype?.social_media?.[key]
                         "
-                        class="flex w-fit rounded-full"
+                        class="flex w-fit items-center rounded-full text-white hover:opacity-80"
                         target="_blank"
                         :href="user.usertype.social_media[key]"
                     >
-                        <OhVueIcon
-                            :name="social.icon"
-                            scale="1"
-                            :fill="iconColor[social.color]"
-                        ></OhVueIcon>
+                        <SocialIcon :platform="key" :size="18" />
                     </a>
                 </template>
             </div>
@@ -96,29 +68,9 @@ const authUser = page.props.auth.user;
             <Link
                 v-if="$page.props.auth.user?.id === user?.id"
                 :href="route('profile.edit')"
+                class="flex items-center p-1 text-white hover:opacity-80"
             >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="text-text-color w-8"
-                    viewBox="0 0 512 512"
-                >
-                    <path
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="24"
-                        d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48"
-                    />
-                    <path
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="24"
-                        d="M459.94 53.25a16.06 16.06 0 00-23.22-.56L424.35 65a8 8 0 000 11.31l11.34 11.32a8 8 0 0011.34 0l12.06-12c6.1-6.09 6.67-16.01.85-22.38zM399.34 90L218.82 270.2a9 9 0 00-2.31 3.93L208.16 299a3.91 3.91 0 004.86 4.86l24.85-8.35a9 9 0 003.93-2.31L422 112.66a9 9 0 000-12.66l-9.95-10a9 9 0 00-12.71 0z"
-                    />
-                </svg>
+                <Edit3 :size="22" />
             </Link>
             <template
                 v-if="
@@ -127,12 +79,11 @@ const authUser = page.props.auth.user;
                     (isAdmin(user) || isStaff || isCompany(user))
                 "
             >
-                <!-- TODO: this does not bring problems to us because we can only see other people's profiles if we are admins or companies (under certain conditions) which already would have the scan button enabled -->
                 <Link
-                    class="flex w-fit cursor-pointer rounded-full text-white"
+                    class="flex w-fit cursor-pointer items-center rounded-full p-1 text-white hover:opacity-80"
                     :href="route('user.scan-code')"
                 >
-                    <OhVueIcon name="io-camera" scale="1"></OhVueIcon>
+                    <Camera :size="22" />
                 </Link>
             </template>
             <QRCode
@@ -143,7 +94,7 @@ const authUser = page.props.auth.user;
                     user.usertype
                 "
                 :participant="user.usertype"
-            ></QRCode>
+            />
         </div>
     </div>
 </template>
diff --git a/resources/js/Components/Profile/QRCode.vue b/resources/js/Components/Profile/QRCode.vue
index f82843c7..12999ac3 100644
--- a/resources/js/Components/Profile/QRCode.vue
+++ b/resources/js/Components/Profile/QRCode.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type Participant from "@/Types/Participant";
 import { router } from "@inertiajs/vue3";
-import { OhVueIcon } from "oh-vue-icons";
+import { QrCode } from "@lucide/vue";
 import { computed, ref } from "vue";
 import { VueFinalModal } from "vue-final-modal";
 import "vue-final-modal/style.css";
@@ -31,10 +31,10 @@ const showQRCode = () => {
 
 <template>
     <button
-        class="text-text-color flex w-fit cursor-pointer rounded-full"
+        class="text-text-color flex w-fit cursor-pointer items-center justify-center rounded-full hover:opacity-80"
         @click="showQRCode"
     >
-        <OhVueIcon name="io-qr-code" scale="1.2"></OhVueIcon>
+        <QrCode :size="22" />
     </button>
     <VueFinalModal
         v-model="modalOpen"
diff --git a/resources/js/Components/Program/ProgramDayPanel.vue b/resources/js/Components/Program/ProgramDayPanel.vue
index 7152a966..0762498b 100644
--- a/resources/js/Components/Program/ProgramDayPanel.vue
+++ b/resources/js/Components/Program/ProgramDayPanel.vue
@@ -6,6 +6,7 @@ import StandDisplay from "@/Components/Program/TimeLine/StandDisplay.vue";
 import ActivityTimelineItem from "./TimeLine/ActivityTimelineItem.vue";
 import TalkTimelineItem from "./TimeLine/TalkTimelineItem.vue";
 import CompetitionTimelineItem from "./TimeLine/CompetitionTimelineItem.vue";
+import PillSelector from "@/Components/UI/PillSelector.vue";
 
 interface Props {
     day: EventDay;
@@ -119,39 +120,23 @@ const times = computed<{ start?: string; end?: string }>(() => {
 <template>
     <div class="w-full">
         <div v-if="availableTabs.length > 1" class="mb-10 flex justify-center">
-            <div class="pill-container flex-wrap justify-center gap-1.5 p-1">
-                <button
-                    v-for="tab in availableTabs"
-                    :key="tab.id"
-                    type="button"
-                    class="pill-item cursor-pointer gap-2 px-4 py-2 text-sm font-medium transition-all"
-                    :class="{ 'pill-item-active': selectedType === tab.id }"
-                    @click="selectedType = tab.id"
-                >
-                    <span>{{ tab.label }}</span>
-                    <span
-                        class="rounded-full px-1.5 py-0.5 text-[11px] transition-colors"
-                        :class="
-                            selectedType === tab.id
-                                ? 'bg-white/20 text-white'
-                                : 'bg-white/5 text-neutral-400'
-                        "
-                    >
-                        {{ tab.count }}
-                    </span>
-                </button>
-            </div>
+            <PillSelector
+                v-model="selectedType"
+                :items="availableTabs"
+                size="md"
+            />
         </div>
 
         <div
             v-if="availableTabs.length === 0"
             class="flex flex-col items-center justify-center py-20 text-center"
         >
-            <div class="pill-container mb-3 px-5 py-2">
-                <span class="text-sm font-medium text-neutral-400">
-                    Sem eventos agendados
-                </span>
-            </div>
+            <PillSelector
+                :items="[{ id: 'none', label: 'Sem eventos agendados', disabled: true }]"
+                size="sm"
+                :wrap="false"
+                container-class="mb-3"
+            />
             <p class="text-xs text-neutral-500">
                 Nenhuma atividade ou palestra disponível para este dia de
                 momento.
diff --git a/resources/js/Components/Program/ProgramDaySelector.vue b/resources/js/Components/Program/ProgramDaySelector.vue
index 25fcfa2c..3fd62a08 100644
--- a/resources/js/Components/Program/ProgramDaySelector.vue
+++ b/resources/js/Components/Program/ProgramDaySelector.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import { Link } from "@inertiajs/vue3";
+import { computed } from "vue";
 import { route } from "ziggy-js";
 import type EventDay from "@/Types/EventDay";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
 
 interface Props {
     days?: EventDay[];
@@ -10,7 +13,7 @@ interface Props {
     eventDay?: EventDay;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
 const formatShortDate = (dateStr?: Date | string): string => {
     if (!dateStr) return "";
@@ -27,41 +30,37 @@ const formatShortDate = (dateStr?: Date | string): string => {
         return "";
     }
 };
+
+const items = computed<PillOption[]>(() => {
+    return Array.from({ length: props.totalDays }, (_, i) => {
+        const dayIndex = i + 1;
+        const d = props.days && props.days[i] ? props.days[i] : undefined;
+        const dateText = d ? formatShortDate(d.date) : undefined;
+        return {
+            id: dayIndex,
+            label: `Dia ${dayIndex}`,
+            sublabel: dayIndex === props.queryDay ? dateText : undefined,
+            href: route(route().current() ?? "program", { day: dayIndex }),
+            active: dayIndex === props.queryDay,
+        };
+    });
+});
 </script>
 
 <template>
     <section class="mb-5 flex flex-col items-center gap-4 text-center">
         <div v-if="totalDays > 1" class="flex justify-center">
-            <div class="pill-container flex-wrap justify-center gap-1.5 p-1.5">
-                <Link
-                    v-for="dayIndex in totalDays"
-                    :key="dayIndex"
-                    :href="
-                        route(route().current() ?? 'program', {
-                            day: dayIndex,
-                        })
-                    "
-                    class="pill-item cursor-pointer gap-2 px-4 py-2 text-sm font-medium transition-all duration-200"
-                    :class="{
-                        'pill-item-active': dayIndex === queryDay,
-                    }"
-                    :only="['eventDay', 'queryDay']"
-                    preserve-state
-                    preserve-scroll
-                >
-                    <span class="font-semibold">Dia {{ dayIndex }}</span>
-                    <template
-                        v-if="
-                            dayIndex === queryDay && days && days[dayIndex - 1]
-                        "
-                    >
+            <PillSelector :items="items" size="md">
+                <template #item="{ item, active }">
+                    <span class="font-semibold">{{ item.label }}</span>
+                    <template v-if="active && item.sublabel">
                         <span class="opacity-35">•</span>
-                        <span class="text-xs opacity-85">
-                            {{ formatShortDate(days[dayIndex - 1]?.date) }}
-                        </span>
+                        <span class="text-xs opacity-85">{{
+                            item.sublabel
+                        }}</span>
                     </template>
-                </Link>
-            </div>
+                </template>
+            </PillSelector>
         </div>
 
         <div v-if="eventDay" class="flex flex-col items-center gap-1.5">
diff --git a/resources/js/Components/Program/TimeLine/ActivityTimelineItem.vue b/resources/js/Components/Program/TimeLine/ActivityTimelineItem.vue
index 95094ace..5918520a 100644
--- a/resources/js/Components/Program/TimeLine/ActivityTimelineItem.vue
+++ b/resources/js/Components/Program/TimeLine/ActivityTimelineItem.vue
@@ -4,6 +4,8 @@ import { isSpeaker } from "@/Types/User";
 import { Link } from "@inertiajs/vue3";
 import { computed } from "vue";
 import { route } from "ziggy-js";
+import Card from "@/Components/UI/Card.vue";
+import { Clock, MapPin, Users, ArrowRight } from "@lucide/vue";
 
 interface Props {
     event: Event;
@@ -35,105 +37,54 @@ const formatTime = (time?: string): string => {
             class="absolute top-8 -left-9.25 hidden h-2.5 w-2.5 rounded-full bg-neutral-600 ring-4 ring-black transition-all duration-300 group-hover:scale-125 sm:flex"
         />
 
-        <article
-            class="rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out hover:scale-[1.01] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-7"
-        >
-            <div class="mb-4 flex flex-wrap items-center gap-2.5">
-                <div
-                    v-if="event.time_start"
-                    class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
-                >
-                    <svg
-                        class="h-3.5 w-3.5 text-neutral-400"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
+        <Card as="article" padding="p-6 sm:p-7">
+            <template #header>
+                <div class="mb-4 flex flex-wrap items-center gap-2.5">
+                    <div
+                        v-if="event.time_start"
+                        class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
                     >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                        />
-                    </svg>
-                    <span>
-                        {{ formatTime(event.time_start) }}
-                        <template v-if="event.time_end">
-                            - {{ formatTime(event.time_end) }}
-                        </template>
-                    </span>
-                </div>
+                        <Clock :size="14" class="text-neutral-400" />
+                        <span>
+                            {{ formatTime(event.time_start) }}
+                            <template v-if="event.time_end">
+                                - {{ formatTime(event.time_end) }}
+                            </template>
+                        </span>
+                    </div>
 
-                <div
-                    v-if="event.location"
-                    class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
-                >
-                    <svg
-                        class="h-3.5 w-3.5 text-neutral-400"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
+                    <div
+                        v-if="event.location"
+                        class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
                     >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-                        />
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-                        />
-                    </svg>
-                    <span>{{ event.location }}</span>
-                </div>
+                        <MapPin :size="14" class="text-neutral-400" />
+                        <span>{{ event.location }}</span>
+                    </div>
 
-                <div
-                    v-if="event.capacity"
-                    class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
-                >
-                    <svg
-                        class="h-3.5 w-3.5 text-neutral-400"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
+                    <div
+                        v-if="event.capacity"
+                        class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
                     >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-                        />
-                    </svg>
-                    <span>{{ event.capacity }} vagas</span>
+                        <Users :size="14" class="text-neutral-400" />
+                        <span>{{ event.capacity }} vagas</span>
+                    </div>
                 </div>
-            </div>
 
-            <h3 class="text-xl font-bold tracking-tight sm:text-2xl">
-                <Link
-                    :href="route('event.show', { event: event.id })"
-                    class="inline-flex items-center gap-2 text-white transition-colors hover:text-neutral-200"
-                    preserve-state
-                    preserve-scroll
-                >
-                    <span>{{ event.name }}</span>
-                    <svg
-                        class="h-4 w-4 text-neutral-500 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-white"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
+                <h3 class="text-xl font-bold tracking-tight sm:text-2xl">
+                    <Link
+                        :href="route('event.show', { event: event.id })"
+                        class="inline-flex items-center gap-2 text-white transition-colors hover:text-neutral-200"
+                        preserve-state
+                        preserve-scroll
                     >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M14 5l7 7m0 0l-7 7m7-7H3"
+                        <span>{{ event.name }}</span>
+                        <ArrowRight
+                            :size="16"
+                            class="text-neutral-500 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-white"
                         />
-                    </svg>
-                </Link>
-            </h3>
+                    </Link>
+                </h3>
+            </template>
 
             <p
                 v-if="event.topic"
@@ -142,40 +93,41 @@ const formatTime = (time?: string): string => {
                 {{ event.topic }}
             </p>
 
-            <div
-                v-if="speakers.length > 0"
-                class="mt-5 flex flex-wrap items-center gap-3 border-t border-white/8 pt-4"
-            >
+            <template v-if="speakers.length > 0" #footer>
                 <div
-                    v-for="user in speakers"
-                    :key="user.id"
-                    class="flex items-center gap-2.5 rounded-full bg-white/5 py-1 pr-3.5 pl-1 ring-1 ring-white/10 backdrop-blur-xs"
+                    class="flex w-full flex-wrap items-center gap-3 border-t border-white/8 pt-4"
                 >
-                    <img
-                        v-if="user.profile_photo_url"
-                        :src="user.profile_photo_url"
-                        :alt="user.name"
-                        class="h-7 w-7 rounded-full object-cover ring-1 ring-white/20"
-                    />
                     <div
-                        v-else
-                        class="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-800 text-xs font-bold text-white"
+                        v-for="user in speakers"
+                        :key="user.id"
+                        class="flex items-center gap-2.5 rounded-full bg-white/5 py-1 pr-3.5 pl-1 ring-1 ring-white/10 backdrop-blur-xs"
                     >
-                        {{ user.name.charAt(0) }}
-                    </div>
-                    <div class="flex flex-col">
-                        <span class="text-xs font-semibold text-white">
-                            {{ user.name }}
-                        </span>
-                        <span
-                            v-if="user.usertype?.organization"
-                            class="text-[11px] text-neutral-400"
+                        <img
+                            v-if="user.profile_photo_url"
+                            :src="user.profile_photo_url"
+                            :alt="user.name"
+                            class="h-7 w-7 rounded-full object-cover ring-1 ring-white/20"
+                        />
+                        <div
+                            v-else
+                            class="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-800 text-xs font-bold text-white"
                         >
-                            {{ user.usertype.organization }}
-                        </span>
+                            {{ user.name.charAt(0) }}
+                        </div>
+                        <div class="flex flex-col">
+                            <span class="text-xs font-semibold text-white">
+                                {{ user.name }}
+                            </span>
+                            <span
+                                v-if="user.usertype?.organization"
+                                class="text-[11px] text-neutral-400"
+                            >
+                                {{ user.usertype.organization }}
+                            </span>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </article>
+            </template>
+        </Card>
     </div>
 </template>
diff --git a/resources/js/Components/Program/TimeLine/CompetitionTimelineItem.vue b/resources/js/Components/Program/TimeLine/CompetitionTimelineItem.vue
index 03c4b961..214ac112 100644
--- a/resources/js/Components/Program/TimeLine/CompetitionTimelineItem.vue
+++ b/resources/js/Components/Program/TimeLine/CompetitionTimelineItem.vue
@@ -2,6 +2,8 @@
 import type Competition from "@/Types/Competition";
 import { route } from "ziggy-js";
 import { Link } from "@inertiajs/vue3";
+import Card from "@/Components/UI/Card.vue";
+import { Calendar, ArrowRight } from "@lucide/vue";
 
 interface Props {
     competition: Competition;
@@ -32,62 +34,41 @@ const formatDateTime = (dateStr?: string): string => {
             class="absolute top-8 -left-9.25 hidden h-2.5 w-2.5 rounded-full bg-neutral-600 ring-4 ring-black transition-all duration-300 group-hover:scale-125 sm:flex"
         />
 
-        <article
-            class="rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out hover:scale-[1.01] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-7"
-        >
-            <div class="mb-4 flex flex-wrap items-center gap-2.5">
-                <div
-                    class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
-                >
-                    <svg
-                        class="h-3.5 w-3.5 text-neutral-400"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
+        <Card as="article" padding="p-6 sm:p-7">
+            <template #header>
+                <div class="mb-4 flex flex-wrap items-center gap-2.5">
+                    <div
+                        class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
                     >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                        />
-                    </svg>
-                    <span>
-                        {{ formatDateTime(competition.date_start) }}
-                        <template v-if="competition.date_end">
-                            - {{ formatDateTime(competition.date_end) }}
-                        </template>
-                    </span>
+                        <Calendar :size="14" class="text-neutral-400" />
+                        <span>
+                            {{ formatDateTime(competition.date_start) }}
+                            <template v-if="competition.date_end">
+                                - {{ formatDateTime(competition.date_end) }}
+                            </template>
+                        </span>
+                    </div>
                 </div>
-            </div>
 
-            <h3 class="text-xl font-bold tracking-tight sm:text-2xl">
-                <Link
-                    :href="
-                        route('competition.show', {
-                            competition: competition.slug,
-                        })
-                    "
-                    class="inline-flex items-center gap-2 text-white transition-colors hover:text-neutral-200"
-                    preserve-state
-                    preserve-scroll
-                >
-                    <span>{{ competition.name }}</span>
-                    <svg
-                        class="h-4 w-4 text-neutral-500 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-white"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
+                <h3 class="text-xl font-bold tracking-tight sm:text-2xl">
+                    <Link
+                        :href="
+                            route('competition.show', {
+                                competition: competition.slug,
+                            })
+                        "
+                        class="inline-flex items-center gap-2 text-white transition-colors hover:text-neutral-200"
+                        preserve-state
+                        preserve-scroll
                     >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M14 5l7 7m0 0l-7 7m7-7H3"
+                        <span>{{ competition.name }}</span>
+                        <ArrowRight
+                            :size="16"
+                            class="text-neutral-500 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-white"
                         />
-                    </svg>
-                </Link>
-            </h3>
+                    </Link>
+                </h3>
+            </template>
 
             <p
                 v-if="competition.theme"
@@ -95,6 +76,6 @@ const formatDateTime = (dateStr?: string): string => {
             >
                 {{ competition.theme }}
             </p>
-        </article>
+        </Card>
     </div>
 </template>
diff --git a/resources/js/Components/Program/TimeLine/TalkTimelineItem.vue b/resources/js/Components/Program/TimeLine/TalkTimelineItem.vue
index 08fc811b..99c2a662 100644
--- a/resources/js/Components/Program/TimeLine/TalkTimelineItem.vue
+++ b/resources/js/Components/Program/TimeLine/TalkTimelineItem.vue
@@ -4,6 +4,8 @@ import { isSpeaker } from "@/Types/User";
 import { Link } from "@inertiajs/vue3";
 import { computed } from "vue";
 import { route } from "ziggy-js";
+import Card from "@/Components/UI/Card.vue";
+import { Clock, MapPin, ArrowRight } from "@lucide/vue";
 
 interface Props {
     event: Event;
@@ -35,85 +37,46 @@ const formatTime = (time?: string): string => {
             class="absolute top-8 -left-9.25 hidden h-2.5 w-2.5 rounded-full bg-neutral-600 ring-4 ring-black transition-all duration-300 group-hover:scale-125 sm:flex"
         />
 
-        <article
-            class="rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out hover:scale-[1.01] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-7"
-        >
-            <div class="mb-4 flex flex-wrap items-center gap-2.5">
-                <div
-                    v-if="event.time_start"
-                    class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
-                >
-                    <svg
-                        class="h-3.5 w-3.5 text-neutral-400"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
+        <Card as="article" padding="p-6 sm:p-7">
+            <template #header>
+                <div class="mb-4 flex flex-wrap items-center gap-2.5">
+                    <div
+                        v-if="event.time_start"
+                        class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
                     >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                        />
-                    </svg>
-                    <span>
-                        {{ formatTime(event.time_start) }}
-                        <template v-if="event.time_end">
-                            - {{ formatTime(event.time_end) }}
-                        </template>
-                    </span>
-                </div>
+                        <Clock :size="14" class="text-neutral-400" />
+                        <span>
+                            {{ formatTime(event.time_start) }}
+                            <template v-if="event.time_end">
+                                - {{ formatTime(event.time_end) }}
+                            </template>
+                        </span>
+                    </div>
 
-                <div
-                    v-if="event.location"
-                    class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
-                >
-                    <svg
-                        class="h-3.5 w-3.5 text-neutral-400"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
+                    <div
+                        v-if="event.location"
+                        class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
                     >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-                        />
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-                        />
-                    </svg>
-                    <span>{{ event.location }}</span>
+                        <MapPin :size="14" class="text-neutral-400" />
+                        <span>{{ event.location }}</span>
+                    </div>
                 </div>
-            </div>
 
-            <h3 class="text-xl font-bold tracking-tight sm:text-2xl">
-                <Link
-                    :href="route('event.show', { event: event.id })"
-                    class="inline-flex items-center gap-2 text-white transition-colors hover:text-neutral-200"
-                    preserve-state
-                    preserve-scroll
-                >
-                    <span>{{ event.name }}</span>
-                    <svg
-                        class="h-4 w-4 text-neutral-500 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-white"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
+                <h3 class="text-xl font-bold tracking-tight sm:text-2xl">
+                    <Link
+                        :href="route('event.show', { event: event.id })"
+                        class="inline-flex items-center gap-2 text-white transition-colors hover:text-neutral-200"
+                        preserve-state
+                        preserve-scroll
                     >
-                        <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M14 5l7 7m0 0l-7 7m7-7H3"
+                        <span>{{ event.name }}</span>
+                        <ArrowRight
+                            :size="16"
+                            class="text-neutral-500 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-white"
                         />
-                    </svg>
-                </Link>
-            </h3>
+                    </Link>
+                </h3>
+            </template>
 
             <p
                 v-if="event.topic"
@@ -122,40 +85,41 @@ const formatTime = (time?: string): string => {
                 {{ event.topic }}
             </p>
 
-            <div
-                v-if="speakers.length > 0"
-                class="mt-5 flex flex-wrap items-center gap-3 border-t border-white/8 pt-4"
-            >
+            <template v-if="speakers.length > 0" #footer>
                 <div
-                    v-for="user in speakers"
-                    :key="user.id"
-                    class="flex items-center gap-2.5 rounded-full bg-white/5 py-1 pr-3.5 pl-1 ring-1 ring-white/10 backdrop-blur-xs"
+                    class="flex w-full flex-wrap items-center gap-3 border-t border-white/8 pt-4"
                 >
-                    <img
-                        v-if="user.profile_photo_url"
-                        :src="user.profile_photo_url"
-                        :alt="user.name"
-                        class="h-7 w-7 rounded-full object-cover ring-1 ring-white/20"
-                    />
                     <div
-                        v-else
-                        class="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-800 text-xs font-bold text-white"
+                        v-for="user in speakers"
+                        :key="user.id"
+                        class="flex items-center gap-2.5 rounded-full bg-white/5 py-1 pr-3.5 pl-1 ring-1 ring-white/10 backdrop-blur-xs"
                     >
-                        {{ user.name.charAt(0) }}
-                    </div>
-                    <div class="flex flex-col">
-                        <span class="text-xs font-semibold text-white">
-                            {{ user.name }}
-                        </span>
-                        <span
-                            v-if="user.usertype?.organization"
-                            class="text-[11px] text-neutral-400"
+                        <img
+                            v-if="user.profile_photo_url"
+                            :src="user.profile_photo_url"
+                            :alt="user.name"
+                            class="h-7 w-7 rounded-full object-cover ring-1 ring-white/20"
+                        />
+                        <div
+                            v-else
+                            class="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-800 text-xs font-bold text-white"
                         >
-                            {{ user.usertype.organization }}
-                        </span>
+                            {{ user.name.charAt(0) }}
+                        </div>
+                        <div class="flex flex-col">
+                            <span class="text-xs font-semibold text-white">
+                                {{ user.name }}
+                            </span>
+                            <span
+                                v-if="user.usertype?.organization"
+                                class="text-[11px] text-neutral-400"
+                            >
+                                {{ user.usertype.organization }}
+                            </span>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </article>
+            </template>
+        </Card>
     </div>
 </template>
diff --git a/resources/js/Components/Shop/ShopItem.vue b/resources/js/Components/Shop/ShopItem.vue
index f3dc08c5..1d988445 100644
--- a/resources/js/Components/Shop/ShopItem.vue
+++ b/resources/js/Components/Shop/ShopItem.vue
@@ -5,6 +5,11 @@ import "vue-final-modal/style.css";
 import { router } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import type { BuyableProduct } from "@/Types/ShopPage";
+import Card from "@/Components/UI/Card.vue";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
+import { X, ShoppingBag } from "@lucide/vue";
 
 interface Props {
     product: BuyableProduct;
@@ -55,6 +60,15 @@ const hasEnoughPoints = computed(() => {
 type ModalTab = "buy" | "deliveries";
 const activeTab = ref<ModalTab>("buy");
 
+const shopTabs = computed<PillOption[]>(() => [
+    { id: "buy", label: "Comprar" },
+    {
+        id: "deliveries",
+        label: "Entregas",
+        count: pendingDeliveriesCount.value,
+    },
+]);
+
 watch(modalOpen, (isOpen) => {
     if (isOpen) {
         deliverySearch.value = "";
@@ -98,99 +112,73 @@ const redeemProduct = (enrollmentId: number) => {
 </script>
 
 <template>
-    <div
-        class="group relative flex h-full w-full flex-col justify-between rounded-3xl border border-white/8 bg-black/50 p-4 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.015] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-5"
+    <Card
+        :image-src="product.image_product_url ?? undefined"
+        :image-alt="product.name"
+        image-fit="object-contain p-4"
+        class="h-full w-full"
     >
-        <div
-            class="relative aspect-square w-full overflow-hidden rounded-2xl bg-neutral-900 ring-1 ring-white/10"
-        >
-            <img
-                v-if="product.image_product_url"
-                :src="product.image_product_url"
-                :alt="product.name"
-                class="h-full w-full object-contain p-4 transition-transform duration-500 ease-out group-hover:scale-105"
-            />
+        <template v-if="!product.image_product_url" #image>
             <div
-                v-else
                 class="flex h-full w-full items-center justify-center text-neutral-600"
             >
-                <svg
-                    class="h-10 w-10 opacity-30"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                        d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
-                    />
-                </svg>
+                <ShoppingBag :size="36" class="opacity-30" />
             </div>
+        </template>
 
-            <div
-                class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-            />
-        </div>
-
-        <div class="mt-4 flex flex-1 flex-col justify-between">
-            <div>
-                <h4
-                    class="truncate text-base font-bold tracking-tight text-white transition-colors group-hover:text-neutral-200"
-                >
-                    {{ product.name }}
-                </h4>
-                <p
-                    class="mt-1 line-clamp-2 min-h-9 text-xs leading-relaxed font-light text-neutral-400"
-                >
-                    <span v-if="!isOutOfStock">
-                        {{ product.stock }}
-                        {{
-                            product.stock === 1
-                                ? "unidade disponível"
-                                : "unidades disponíveis"
-                        }}
-                    </span>
-                    <span v-else class="text-neutral-500">
-                        Item atualmente fora de stock
-                    </span>
-                </p>
-            </div>
+        <template #header>
+            <h4
+                class="truncate text-base font-bold tracking-tight text-white transition-colors group-hover:text-neutral-200"
+            >
+                {{ product.name }}
+            </h4>
+            <p
+                class="mt-1 line-clamp-2 min-h-9 text-xs leading-relaxed font-light text-neutral-400"
+            >
+                <span v-if="!isOutOfStock">
+                    {{ product.stock }}
+                    {{
+                        product.stock === 1
+                            ? "unidade disponível"
+                            : "unidades disponíveis"
+                    }}
+                </span>
+                <span v-else class="text-neutral-500">
+                    Item atualmente fora de stock
+                </span>
+            </p>
+        </template>
 
+        <template #footer>
             <div
-                class="mt-4 flex min-h-9 items-center justify-between border-t border-white/5 pt-3"
+                class="flex items-center gap-1.5 font-mono text-sm font-bold text-white"
             >
-                <div
-                    class="flex items-center gap-1.5 font-mono text-sm font-bold text-white"
-                >
-                    <span>{{ product.price }}</span>
-                    <img
-                        class="h-3.5 w-3.5 object-contain"
-                        alt="SINFrão"
-                        title="SINFrão"
-                        src="/images/sinf-2026-sm.svg"
-                    />
-                </div>
-
-                <button
-                    type="button"
-                    class="pill-container pill-item cursor-pointer gap-1 px-3.5 py-1 text-xs font-semibold transition-all"
-                    :class="[
-                        isOutOfStock && !hasEnrollments
-                            ? 'cursor-not-allowed text-neutral-500 opacity-40 hover:bg-transparent'
-                            : 'text-white hover:bg-white/15 active:scale-95',
-                    ]"
-                    :disabled="isOutOfStock && !hasEnrollments"
-                    @click="modalOpen = true"
-                >
-                    <span v-if="hasEnrollments && isOutOfStock">Gerir</span>
-                    <span v-else-if="isOutOfStock">Esgotado</span>
-                    <span v-else>Comprar</span>
-                </button>
+                <span>{{ product.price }}</span>
+                <img
+                    class="h-3.5 w-3.5 object-contain"
+                    alt="SINFrão"
+                    title="SINFrão"
+                    src="/images/sinf-2026-sm.svg"
+                />
             </div>
-        </div>
-    </div>
+
+            <button
+                type="button"
+                class="pill-container pill-item cursor-pointer gap-1 px-3.5 py-1 text-xs font-semibold transition-all"
+                :class="[
+                    isOutOfStock && !hasEnrollments
+                        ? 'cursor-not-allowed text-neutral-500 opacity-40 hover:bg-transparent'
+                        : 'text-white hover:bg-white/15 active:scale-95',
+                ]"
+                :disabled="isOutOfStock && !hasEnrollments"
+                @click="modalOpen = true"
+            >
+                <span v-if="hasEnrollments && isOutOfStock">Gerir</span>
+                <span v-else-if="isOutOfStock">Esgotado</span>
+                <span v-else>Comprar</span>
+            </button>
+        </template>
+    </Card>
 
     <VueFinalModal
         v-model="modalOpen"
@@ -208,19 +196,7 @@ const redeemProduct = (enrollmentId: number) => {
             aria-label="Fechar"
             @click="modalOpen = false"
         >
-            <svg
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12"
-                />
-            </svg>
+            <X :size="16" />
         </button>
 
         <div
@@ -280,36 +256,12 @@ const redeemProduct = (enrollmentId: number) => {
         </div>
 
         <div v-if="hasEnrollments" class="-my-2 flex justify-center">
-            <div
-                class="pill-container w-full justify-center gap-1 p-1 sm:w-auto"
-            >
-                <button
-                    type="button"
-                    class="pill-item flex-1 cursor-pointer justify-center gap-1.5 text-xs font-medium sm:flex-initial sm:text-sm"
-                    :class="{ 'pill-item-active': activeTab === 'buy' }"
-                    @click="activeTab = 'buy'"
-                >
-                    <span>Comprar</span>
-                </button>
-                <button
-                    type="button"
-                    class="pill-item flex-1 cursor-pointer justify-center gap-2 text-xs font-medium sm:flex-initial sm:text-sm"
-                    :class="{ 'pill-item-active': activeTab === 'deliveries' }"
-                    @click="activeTab = 'deliveries'"
-                >
-                    <span>Entregas</span>
-                    <span
-                        class="py-0.2 rounded-full px-1.5 text-[10px]"
-                        :class="
-                            pendingDeliveriesCount > 0
-                                ? 'bg-amber-500/25 text-amber-300 ring-1 ring-amber-500/30'
-                                : 'bg-white/10 text-neutral-400'
-                        "
-                    >
-                        {{ pendingDeliveriesCount }}
-                    </span>
-                </button>
-            </div>
+            <PillSelector
+                v-model="activeTab"
+                :items="shopTabs"
+                size="sm"
+                container-class="w-full sm:w-auto"
+            />
         </div>
 
         <div v-if="activeTab === 'buy'" class="w-full space-y-4">
@@ -334,29 +286,55 @@ const redeemProduct = (enrollmentId: number) => {
                     <div
                         class="flex items-center justify-between text-neutral-400"
                     >
-                        <span>O teu saldo atual:</span>
-                        <span class="font-bold text-white"
-                            >{{ points }} SINFrões</span
+                        <span>Saldo atual</span>
+                        <div
+                            class="flex items-center gap-1 font-mono font-bold text-white"
                         >
+                            <span>{{ points }}</span>
+                            <img
+                                class="h-3 w-3 object-contain"
+                                alt="SINFrão"
+                                title="SINFrão"
+                                src="/images/sinf-2026-sm.svg"
+                            />
+                        </div>
                     </div>
                     <div
                         class="flex items-center justify-between text-neutral-400"
                     >
-                        <span>Preço do produto:</span>
-                        <span class="font-bold text-red-400"
-                            >-{{ product.price }} SINFrões</span
+                        <span>Custo do artigo</span>
+                        <div
+                            class="flex items-center gap-1 font-mono font-bold text-white"
                         >
+                            <span>-{{ product.price }}</span>
+                            <img
+                                class="h-3 w-3 object-contain"
+                                alt="SINFrão"
+                                title="SINFrão"
+                                src="/images/sinf-2026-sm.svg"
+                            />
+                        </div>
                     </div>
                     <div
-                        class="flex items-center justify-between border-t border-white/8 pt-2 font-bold"
-                        :class="
-                            hasEnoughPoints
-                                ? 'text-emerald-400'
-                                : 'text-red-400'
-                        "
+                        class="flex items-center justify-between border-t border-white/10 pt-2 font-medium"
                     >
-                        <span>Saldo após compra:</span>
-                        <span>{{ points - product.price }} SINFrões</span>
+                        <span class="text-neutral-300">Saldo após compra</span>
+                        <div
+                            class="flex items-center gap-1 font-mono font-bold"
+                            :class="
+                                hasEnoughPoints
+                                    ? 'text-emerald-400'
+                                    : 'text-red-400'
+                            "
+                        >
+                            <span>{{ points - product.price }}</span>
+                            <img
+                                class="h-3 w-3 object-contain"
+                                alt="SINFrão"
+                                title="SINFrão"
+                                src="/images/sinf-2026-sm.svg"
+                            />
+                        </div>
                     </div>
                 </div>
 
@@ -385,7 +363,7 @@ const redeemProduct = (enrollmentId: number) => {
                     </button>
                     <button
                         type="button"
-                        class="pill-container pill-item bg-sinf-crimson/80 hover:bg-sinf-crimson cursor-pointer px-6 py-2 text-xs font-semibold text-white transition-all active:scale-95 disabled:cursor-not-allowed disabled:opacity-40"
+                        class="pill-container pill-item bg-sinf-primary/80 hover:bg-sinf-primary cursor-pointer px-6 py-2 text-xs font-semibold text-white transition-all active:scale-95 disabled:cursor-not-allowed disabled:opacity-40"
                         :disabled="!hasEnoughPoints || isBuying"
                         @click="buyProduct"
                     >
@@ -405,7 +383,7 @@ const redeemProduct = (enrollmentId: number) => {
                     </p>
                     <button
                         type="button"
-                        class="pill-container pill-item bg-sinf-purple/80 hover:bg-sinf-purple cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95"
+                        class="pill-container pill-item bg-sinf-secondary/80 hover:bg-sinf-secondary cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95"
                         @click="
                             $page.props.auth.user
                                 ? router.put(route('enroll'))
diff --git a/resources/js/Components/Team/DepartmentSection.vue b/resources/js/Components/Team/DepartmentSection.vue
index a5c5813f..87dafeac 100644
--- a/resources/js/Components/Team/DepartmentSection.vue
+++ b/resources/js/Components/Team/DepartmentSection.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type Department from "@/Types/Department";
 import TeamMember from "./TeamMember.vue";
+import PillSelector from "@/Components/UI/PillSelector.vue";
 
 interface Props {
     department: Department;
@@ -16,13 +17,17 @@ defineProps<Props>();
         class="w-full"
     >
         <div class="mb-8 flex items-center justify-center">
-            <div class="pill-container gap-2 px-5 py-2 shadow-none">
-                <h3
-                    class="text-xs font-semibold tracking-wider text-neutral-200 uppercase sm:text-sm"
-                >
-                    {{ department.name }}
-                </h3>
-            </div>
+            <PillSelector
+                :items="[
+                    {
+                        id: department.id,
+                        label: department.name,
+                        active: true,
+                    },
+                ]"
+                size="sm"
+                :wrap="false"
+            />
         </div>
 
         <div
diff --git a/resources/js/Components/Team/DepartmentSelector.vue b/resources/js/Components/Team/DepartmentSelector.vue
index 1ee06623..7081779d 100644
--- a/resources/js/Components/Team/DepartmentSelector.vue
+++ b/resources/js/Components/Team/DepartmentSelector.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import type Department from "@/Types/Department";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
 
 interface Props {
     departments: Department[];
@@ -23,6 +26,15 @@ const totalMembers = computed(() =>
         0,
     ),
 );
+
+const items = computed<PillOption[]>(() => [
+    { id: "all", label: "Todos", count: totalMembers.value },
+    ...departmentsWithStaff.value.map((dept) => ({
+        id: dept.id,
+        label: dept.name,
+        count: dept.staff?.length,
+    })),
+]);
 </script>
 
 <template>
@@ -30,49 +42,14 @@ const totalMembers = computed(() =>
         v-if="departmentsWithStaff.length > 1"
         class="mb-10 flex justify-center"
     >
-        <div
-            class="pill-container max-w-full flex-wrap justify-center gap-1.5 p-1.5"
-        >
-            <button
-                type="button"
-                class="pill-item cursor-pointer gap-1.5 px-4 py-2 text-xs font-medium transition-all duration-200 sm:text-sm"
-                :class="{ 'pill-item-active': selectedId === null }"
-                @click="emit('select', null)"
-            >
-                <span>Todos</span>
-                <span
-                    class="py-0.2 rounded-full px-1.5 text-[10px] transition-colors"
-                    :class="
-                        selectedId === null
-                            ? 'bg-white/20 text-white'
-                            : 'bg-white/8 text-neutral-400'
-                    "
-                >
-                    {{ totalMembers }}
-                </span>
-            </button>
-
-            <button
-                v-for="dept in departmentsWithStaff"
-                :key="dept.id"
-                type="button"
-                class="pill-item cursor-pointer gap-1.5 px-4 py-2 text-xs font-medium transition-all duration-200 sm:text-sm"
-                :class="{ 'pill-item-active': selectedId === dept.id }"
-                @click="emit('select', dept.id)"
-            >
-                <span>{{ dept.name }}</span>
-                <span
-                    v-if="dept.staff?.length"
-                    class="py-0.2 rounded-full px-1.5 text-[10px] transition-colors"
-                    :class="
-                        selectedId === dept.id
-                            ? 'bg-white/20 text-white'
-                            : 'bg-white/8 text-neutral-400'
-                    "
-                >
-                    {{ dept.staff.length }}
-                </span>
-            </button>
-        </div>
+        <PillSelector
+            :model-value="selectedId ?? 'all'"
+            :items="items"
+            size="md"
+            container-class="max-w-full"
+            @update:model-value="
+                (val) => emit('select', val === 'all' ? null : Number(val))
+            "
+        />
     </div>
 </template>
diff --git a/resources/js/Components/Team/TeamMember.vue b/resources/js/Components/Team/TeamMember.vue
index 0782f907..0d94a08c 100644
--- a/resources/js/Components/Team/TeamMember.vue
+++ b/resources/js/Components/Team/TeamMember.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import type Staff from "@/Types/Staff";
+import Card from "@/Components/UI/Card.vue";
+import SocialIcon from "@/Components/UI/SocialIcon.vue";
+import { Users } from "@lucide/vue";
 
 interface Props {
     staff: Staff;
@@ -58,185 +61,73 @@ const socialLinks = computed(() => {
         "twitter",
         "email",
     ] as const;
-    const entries: {
-        platform: (typeof supported)[number];
-        url: string;
-        label: string;
-    }[] = [];
 
-    for (const key of supported) {
-        const val = rawSocialMedia.value[key];
-        if (typeof val === "string" && val.trim().length > 0) {
-            entries.push({
-                platform: key,
-                url: formatSocialUrl(key, val),
+    const links: { platform: string; url: string; label: string }[] = [];
+
+    for (const platform of supported) {
+        const val = rawSocialMedia.value[platform];
+        if (typeof val === "string" && val.trim() !== "") {
+            links.push({
+                platform,
+                url: formatSocialUrl(platform, val),
                 label:
-                    key === "email"
+                    platform === "email"
                         ? "Email"
-                        : key === "website"
-                          ? "Website"
-                          : key.charAt(0).toUpperCase() + key.slice(1),
+                        : platform.charAt(0).toUpperCase() + platform.slice(1),
             });
         }
     }
 
-    return entries;
+    return links;
 });
 </script>
 
 <template>
-    <div
-        class="group relative flex h-full w-full flex-col justify-between rounded-3xl border border-white/8 bg-black/50 p-4 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.015] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-5"
+    <Card
+        :image-src="photoUrl && !imageError ? photoUrl : undefined"
+        :image-alt="name"
+        class="h-full w-full"
     >
-        <div
-            class="relative aspect-square w-full overflow-hidden rounded-2xl bg-neutral-900 ring-1 ring-white/10"
-        >
-            <img
-                v-if="photoUrl && !imageError"
-                :src="photoUrl"
-                :alt="name"
-                class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
-                @error="imageError = true"
-            />
+        <template v-if="!photoUrl || imageError" #image>
             <div
-                v-else
                 class="flex h-full w-full items-center justify-center bg-neutral-900 text-neutral-600"
             >
-                <svg
-                    class="h-16 w-16 opacity-40"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                    />
-                </svg>
-            </div>
-
-            <div
-                class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-            />
-        </div>
-
-        <div class="mt-4 flex flex-1 flex-col justify-between">
-            <div>
-                <h4
-                    class="truncate text-base font-bold tracking-tight text-white transition-colors group-hover:text-neutral-200"
-                >
-                    {{ name }}
-                </h4>
-                <p class="mt-1 line-clamp-1 text-xs text-neutral-400">
-                    <span
-                        v-if="isCoordinator"
-                        class="font-medium text-neutral-400"
-                    >
-                        Coordenador(a)
-                    </span>
-                    <span v-else class="text-neutral-400">
-                        Membro da Equipa
-                    </span>
-                </p>
+                <Users class="h-12 w-12 opacity-40" />
             </div>
+        </template>
 
+        <template #header>
+            <h4
+                class="truncate text-base font-bold tracking-tight text-white transition-colors group-hover:text-neutral-200"
+            >
+                {{ name }}
+            </h4>
+            <p class="mt-1 line-clamp-1 text-xs text-neutral-400">
+                <span v-if="isCoordinator" class="font-medium text-neutral-400">
+                    Coordenador(a)
+                </span>
+                <span v-else class="text-neutral-400"> Membro da Equipa </span>
+            </p>
+        </template>
+
+        <template #footer>
             <div
-                class="mt-4 flex min-h-8 items-center justify-between border-t border-white/5 pt-3"
+                v-if="socialLinks.length > 0"
+                class="flex flex-wrap items-center gap-1.5"
             >
-                <div
-                    v-if="socialLinks.length > 0"
-                    class="flex flex-wrap items-center gap-1.5"
+                <a
+                    v-for="item in socialLinks"
+                    :key="item.platform"
+                    :href="item.url"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-all hover:bg-white/10 hover:text-white"
+                    :aria-label="item.label"
                 >
-                    <a
-                        v-for="item in socialLinks"
-                        :key="item.platform"
-                        :href="item.url"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-all hover:bg-white/10 hover:text-white"
-                        :aria-label="item.label"
-                    >
-                        <svg
-                            v-if="item.platform === 'github'"
-                            class="h-4 w-4"
-                            fill="currentColor"
-                            viewBox="0 0 24 24"
-                        >
-                            <path
-                                fill-rule="evenodd"
-                                clip-rule="evenodd"
-                                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-                            />
-                        </svg>
-
-                        <svg
-                            v-else-if="item.platform === 'linkedin'"
-                            class="h-4 w-4"
-                            fill="currentColor"
-                            viewBox="0 0 24 24"
-                        >
-                            <path
-                                d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"
-                            />
-                        </svg>
-
-                        <svg
-                            v-else-if="item.platform === 'website'"
-                            class="h-4 w-4"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
-                            />
-                        </svg>
-
-                        <svg
-                            v-else-if="item.platform === 'instagram'"
-                            class="h-4 w-4"
-                            fill="currentColor"
-                            viewBox="0 0 24 24"
-                        >
-                            <path
-                                d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"
-                            />
-                        </svg>
-
-                        <svg
-                            v-else-if="item.platform === 'twitter'"
-                            class="h-4 w-4"
-                            fill="currentColor"
-                            viewBox="0 0 24 24"
-                        >
-                            <path
-                                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
-                            />
-                        </svg>
-
-                        <svg
-                            v-else-if="item.platform === 'email'"
-                            class="h-4 w-4"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                            />
-                        </svg>
-                    </a>
-                </div>
-                <div v-else class="text-[11px] text-neutral-600">SINF 2026</div>
+                    <SocialIcon :platform="item.platform" :size="16" />
+                </a>
             </div>
-        </div>
-    </div>
+            <div v-else class="text-[11px] text-neutral-600">SINF</div>
+        </template>
+    </Card>
 </template>
diff --git a/resources/js/Components/TextInput.vue b/resources/js/Components/TextInput.vue
index 18a2ed41..edcbf6ab 100644
--- a/resources/js/Components/TextInput.vue
+++ b/resources/js/Components/TextInput.vue
@@ -1,5 +1,5 @@
-<script setup lang="ts" generic="">
-import { OhVueIcon } from "oh-vue-icons";
+<script setup lang="ts">
+import { Eye, EyeOff, AlertCircle } from "@lucide/vue";
 import { onMounted, ref, type InputHTMLAttributes, computed } from "vue";
 
 interface BaseProps {
@@ -10,8 +10,8 @@ interface BaseProps {
 }
 
 interface InputProps extends BaseProps {
-    type: InputHTMLAttributes["type"];
-    modelValue: string;
+    type?: InputHTMLAttributes["type"];
+    modelValue: string | number;
 }
 
 interface BaseSelectProps extends BaseProps {
@@ -41,7 +41,7 @@ const isSelect = (p: Props): p is SelectProps => {
 };
 
 interface Emits {
-    (event: "update:modelValue", value: string | string[]): void;
+    (event: "update:modelValue", value: string | number | string[]): void;
 }
 
 // Need to instantiate 'props' here otherwise TS would not correctly infer the types I wanted from the '$props' variable. - Nuno Pereira
@@ -154,10 +154,8 @@ const visible = ref(false);
                 :aria-label="visible ? 'Ocultar password' : 'Ver password'"
                 @click="visible = !visible"
             >
-                <OhVueIcon
-                    :name="visible ? 'io-eye-off' : 'io-eye'"
-                    class="h-4 w-4"
-                />
+                <EyeOff v-if="visible" :size="16" />
+                <Eye v-else :size="16" />
             </button>
         </div>
 
@@ -171,19 +169,7 @@ const visible = ref(false);
                 :id="`${id}-error`"
                 class="mt-1.5 ml-3.5 flex items-center gap-1.5 text-xs font-medium text-red-400"
             >
-                <svg
-                    class="h-3.5 w-3.5 shrink-0"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                </svg>
+                <AlertCircle :size="14" class="shrink-0" />
                 <span>{{ errorMessage }}</span>
             </div>
         </transition>
diff --git a/resources/js/Components/UI/Card.vue b/resources/js/Components/UI/Card.vue
new file mode 100644
index 00000000..f1bc35fd
--- /dev/null
+++ b/resources/js/Components/UI/Card.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+interface Props {
+    as?: string;
+    interactive?: boolean;
+    imageSrc?: string;
+    imageAlt?: string;
+    imageAspectRatio?: string;
+    imageFit?: "object-cover" | "object-contain" | "object-fill" | string;
+    padding?: string;
+    hasOverlay?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+    as: "article",
+    interactive: true,
+    imageSrc: undefined,
+    imageAlt: "",
+    imageAspectRatio: "aspect-square",
+    imageFit: "object-cover",
+    padding: "p-4 sm:p-5",
+    hasOverlay: true,
+});
+</script>
+
+<template>
+    <component
+        :is="as"
+        class="group relative flex flex-col justify-between rounded-3xl border border-white/8 bg-black/50 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none"
+        :class="[
+            padding,
+            interactive
+                ? 'hover:scale-[1.015] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)]'
+                : '',
+        ]"
+    >
+        <div class="flex flex-1 flex-col">
+            <!-- Media / Top Image -->
+            <div
+                v-if="imageSrc || $slots.image"
+                class="relative w-full overflow-hidden rounded-2xl bg-neutral-900 ring-1 ring-white/10"
+                :class="imageAspectRatio"
+            >
+                <slot name="image">
+                    <img
+                        v-if="imageSrc"
+                        :src="imageSrc"
+                        :alt="imageAlt"
+                        class="h-full w-full transition-transform duration-500 group-hover:scale-105"
+                        :class="imageFit"
+                    />
+                </slot>
+
+                <div
+                    v-if="hasOverlay"
+                    class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+                />
+
+                <slot name="image-overlay" />
+            </div>
+
+            <!-- Header Slot -->
+            <header
+                v-if="$slots.header"
+                :class="{ 'mt-4': imageSrc || $slots.image }"
+            >
+                <slot name="header" />
+            </header>
+
+            <!-- Main Content Slot -->
+            <div
+                v-if="$slots.default"
+                class="flex-1"
+                :class="{
+                    'mt-3': $slots.header || imageSrc || $slots.image,
+                }"
+            >
+                <slot />
+            </div>
+        </div>
+
+        <!-- Footer Slot -->
+        <footer
+            v-if="$slots.footer"
+            class="mt-4 flex min-h-9 items-center justify-between pt-3"
+        >
+            <slot name="footer" />
+        </footer>
+    </component>
+</template>
diff --git a/resources/js/Components/UI/PillSelector.vue b/resources/js/Components/UI/PillSelector.vue
new file mode 100644
index 00000000..98427ef5
--- /dev/null
+++ b/resources/js/Components/UI/PillSelector.vue
@@ -0,0 +1,636 @@
+<script setup lang="ts">
+import { computed, type Component } from "vue";
+import { Link } from "@inertiajs/vue3";
+import Dropdown from "@/Components/Dropdown.vue";
+import DropdownLink from "@/Components/DropdownLink.vue";
+import { ChevronDown } from "@lucide/vue";
+
+export interface PillDropdownItem {
+    id?: string | number;
+    label: string;
+    sublabel?: string;
+    href?: string;
+    icon?: Component;
+    trailingIcon?: Component;
+    active?: boolean;
+    disabled?: boolean;
+    danger?: boolean;
+    divider?: boolean;
+    method?: "get" | "post";
+    as?: "button" | "a";
+    onClick?: () => void;
+}
+
+export interface PillDropdownConfig {
+    align?: "left" | "right" | "center";
+    width?: string | number;
+    contentClasses?: string;
+    items?: PillDropdownItem[];
+}
+
+export interface PillAvatarConfig {
+    src?: string;
+    alt?: string;
+}
+
+export interface PillImageConfig {
+    src: string;
+    alt?: string;
+    class?: string;
+}
+
+export interface PillOption {
+    id: string | number;
+    label?: string;
+    sublabel?: string;
+    icon?: Component;
+    trailingIcon?: Component;
+    avatar?: string | PillAvatarConfig;
+    image?: string | PillImageConfig;
+    count?: number | string;
+    href?: string;
+    disabled?: boolean;
+    active?: boolean;
+    ariaLabel?: string;
+    dropdown?: PillDropdownConfig;
+}
+
+interface Props {
+    items?: PillOption[];
+    modelValue?: string | number | null;
+    size?: "sm" | "md" | "lg";
+    as?: "nav" | "div";
+    wrap?: boolean;
+    containerClass?: string;
+    itemClass?: string;
+}
+
+interface Emits {
+    (event: "update:modelValue", value: string | number | null): void;
+    (event: "select", item: PillOption): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    items: () => [],
+    modelValue: undefined,
+    size: "md",
+    as: "div",
+    wrap: true,
+    containerClass: "",
+    itemClass: "",
+});
+
+const emit = defineEmits<Emits>();
+
+const isItemActive = (item: PillOption) => {
+    if (item.active !== undefined) return item.active;
+    if (props.modelValue !== undefined) return props.modelValue === item.id;
+    return false;
+};
+
+const handleSelect = (item: PillOption) => {
+    if (item.disabled) return;
+    emit("update:modelValue", item.id);
+    emit("select", item);
+};
+
+const isExternalOrAnchor = (href?: string) => {
+    if (!href) return false;
+    return (
+        href.startsWith("#") || href.startsWith("/#") || href.startsWith("http")
+    );
+};
+
+// Helper methods for avatar and image
+const getAvatarSrc = (item: PillOption): string | undefined => {
+    if (!item.avatar) return undefined;
+    return typeof item.avatar === "string" ? item.avatar : item.avatar.src;
+};
+
+const getAvatarAlt = (item: PillOption): string => {
+    if (!item.avatar) return "";
+    return typeof item.avatar === "string"
+        ? (item.label ?? "")
+        : (item.avatar.alt ?? item.label ?? "");
+};
+
+const getImageSrc = (item: PillOption): string | undefined => {
+    if (!item.image) return undefined;
+    return typeof item.image === "string" ? item.image : item.image.src;
+};
+
+const getImageAlt = (item: PillOption): string => {
+    if (!item.image) return "";
+    return typeof item.image === "string"
+        ? (item.label ?? "")
+        : (item.image.alt ?? item.label ?? "");
+};
+
+const getImageClass = (item: PillOption): string => {
+    if (typeof item.image === "object" && item.image.class) {
+        return item.image.class;
+    }
+    return "h-4 w-auto object-contain";
+};
+
+const isAvatarOnly = (item: PillOption): boolean => {
+    return Boolean(getAvatarSrc(item) && !item.label && !item.sublabel);
+};
+
+const isImageOnly = (item: PillOption): boolean => {
+    return Boolean(getImageSrc(item) && !item.label && !item.sublabel);
+};
+
+const isSingleAvatarOnly = computed(() => {
+    return props.items.length === 1 && isAvatarOnly(props.items[0]);
+});
+
+const sizeClasses = {
+    sm: "px-3 py-1.5 text-xs gap-1.5",
+    md: "px-4 py-2 text-xs sm:text-sm gap-2",
+    lg: "px-5 py-2.5 text-sm sm:text-base gap-2.5",
+};
+
+const imageOnlyPadding = {
+    sm: "px-2.5 py-1",
+    md: "px-3 py-1.5",
+    lg: "px-4 py-2",
+};
+
+const avatarSizes = {
+    sm: "h-7 w-7",
+    md: "h-8 w-8",
+    lg: "h-10 w-10",
+};
+
+const avatarInlineSizes = {
+    sm: "h-5 w-5",
+    md: "h-6 w-6",
+    lg: "h-7 w-7",
+};
+
+const iconSizes = {
+    sm: 14,
+    md: 16,
+    lg: 18,
+};
+
+const getItemClass = (item: PillOption, activeState?: boolean) => {
+    const isActive =
+        activeState !== undefined ? activeState : isItemActive(item);
+
+    if (isAvatarOnly(item)) {
+        return [
+            "group inline-flex shrink-0 items-center justify-center rounded-full p-0 bg-transparent border-0 shadow-none transition-all duration-200 focus:outline-none cursor-pointer",
+            isActive ? "scale-105" : "hover:scale-105",
+            item.disabled
+                ? "cursor-not-allowed opacity-40 pointer-events-none"
+                : "",
+            props.itemClass,
+        ];
+    }
+
+    let paddingAndTextClass = sizeClasses[props.size];
+    if (isImageOnly(item)) {
+        paddingAndTextClass = imageOnlyPadding[props.size];
+    }
+
+    return [
+        "pill-item font-medium transition-all duration-200 cursor-pointer",
+        paddingAndTextClass,
+        isActive ? "pill-item-active" : "",
+        item.disabled
+            ? "cursor-not-allowed opacity-40 hover:bg-transparent pointer-events-none"
+            : "",
+        props.itemClass,
+    ];
+};
+</script>
+
+<template>
+    <component
+        :is="as"
+        class="pill-container justify-center"
+        :class="[
+            isSingleAvatarOnly ? 'p-1' : 'p-1.5',
+            wrap ? 'flex-wrap' : 'flex-nowrap',
+            containerClass,
+        ]"
+        aria-label="Selector"
+    >
+        <slot name="leading" />
+
+        <template v-for="item in items" :key="item.id">
+            <!-- 1. Dropdown Item Mode -->
+            <Dropdown
+                v-if="item.dropdown"
+                :align="item.dropdown.align ?? 'center'"
+                :width="item.dropdown.width ?? '48'"
+                :content-classes="item.dropdown.contentClasses ?? 'p-1.5'"
+            >
+                <template #trigger="{ open }">
+                    <button
+                        type="button"
+                        :disabled="item.disabled"
+                        :aria-label="item.ariaLabel ?? item.label"
+                        :class="getItemClass(item, open || isItemActive(item))"
+                    >
+                        <slot
+                            name="item"
+                            :item="item"
+                            :active="open || isItemActive(item)"
+                            :select="() => handleSelect(item)"
+                        >
+                            <!-- Avatar Only -->
+                            <template v-if="isAvatarOnly(item)">
+                                <img
+                                    :src="getAvatarSrc(item)"
+                                    :alt="getAvatarAlt(item)"
+                                    :class="[
+                                        avatarSizes[size],
+                                        'shrink-0 rounded-full bg-neutral-800 object-cover transition-all duration-200',
+                                        open || isItemActive(item)
+                                            ? 'shadow-[0_0_12px_rgba(255,255,255,0.35)] ring-2 ring-white brightness-110'
+                                            : 'ring-1 ring-white/20 group-hover:ring-2 group-hover:ring-white/60 group-hover:brightness-110',
+                                    ]"
+                                />
+                            </template>
+
+                            <!-- Normal Item with/without Avatar/Icon/Label -->
+                            <template v-else>
+                                <img
+                                    v-if="getAvatarSrc(item)"
+                                    :src="getAvatarSrc(item)"
+                                    :alt="getAvatarAlt(item)"
+                                    :class="[
+                                        avatarInlineSizes[size],
+                                        'shrink-0 rounded-full object-cover ring-1 ring-white/20',
+                                    ]"
+                                />
+                                <component
+                                    :is="item.icon"
+                                    v-else-if="item.icon"
+                                    :size="iconSizes[size]"
+                                    class="shrink-0"
+                                />
+                                <span v-if="item.label">{{ item.label }}</span>
+                                <span
+                                    v-if="item.sublabel"
+                                    class="text-[11px] font-normal text-neutral-400"
+                                >
+                                    {{ item.sublabel }}
+                                </span>
+                                <span
+                                    v-if="item.count !== undefined"
+                                    class="ml-0.5 rounded-full bg-white/10 px-1.5 py-0.5 text-[10px] font-semibold text-neutral-300 transition-colors"
+                                >
+                                    {{ item.count }}
+                                </span>
+                                <component
+                                    :is="item.trailingIcon"
+                                    v-if="item.trailingIcon"
+                                    :size="iconSizes[size]"
+                                    class="shrink-0"
+                                />
+                                <ChevronDown
+                                    v-else-if="item.label"
+                                    :size="size === 'sm' ? 12 : 14"
+                                    class="shrink-0 text-neutral-400 transition-transform duration-200"
+                                    :class="{ 'rotate-180 text-white': open }"
+                                />
+                            </template>
+                        </slot>
+                    </button>
+                </template>
+
+                <template #content="{ close }">
+                    <slot
+                        :name="`dropdown-${item.id}`"
+                        :item="item"
+                        :close="close"
+                    >
+                        <slot name="dropdown" :item="item" :close="close">
+                            <!-- Pre-configured Dropdown Items List -->
+                            <div v-if="item.dropdown.items" class="space-y-0.5">
+                                <template
+                                    v-for="(dItem, dIdx) in item.dropdown.items"
+                                    :key="dItem.id ?? `${item.id}-item-${dIdx}`"
+                                >
+                                    <hr
+                                        v-if="dItem.divider"
+                                        class="my-1 border-white/6"
+                                    />
+                                    <DropdownLink
+                                        v-if="dItem.href"
+                                        :href="dItem.href"
+                                        :method="dItem.method"
+                                        :as="dItem.as"
+                                        :danger="dItem.danger"
+                                        @click="
+                                            () => {
+                                                dItem.onClick?.();
+                                                close();
+                                            }
+                                        "
+                                    >
+                                        <span class="flex items-center gap-2">
+                                            <component
+                                                :is="dItem.icon"
+                                                v-if="dItem.icon"
+                                                :size="16"
+                                                class="shrink-0 text-neutral-400"
+                                            />
+                                            <span class="flex-1">{{
+                                                dItem.label
+                                            }}</span>
+                                            <component
+                                                :is="dItem.trailingIcon"
+                                                v-if="dItem.trailingIcon"
+                                                :size="14"
+                                                class="shrink-0 text-neutral-500 opacity-0 transition-all duration-150 group-hover:translate-x-0.5 group-hover:text-white group-hover:opacity-100"
+                                            />
+                                        </span>
+                                    </DropdownLink>
+                                    <button
+                                        v-else
+                                        type="button"
+                                        class="group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl px-3 py-2 text-left text-xs font-medium transition-colors hover:bg-white/8 hover:text-white focus:outline-none"
+                                        :class="
+                                            dItem.danger
+                                                ? 'text-red-400 hover:bg-red-500/10 hover:text-red-300'
+                                                : 'text-neutral-300'
+                                        "
+                                        @click="
+                                            () => {
+                                                dItem.onClick?.();
+                                                close();
+                                            }
+                                        "
+                                    >
+                                        <span class="flex items-center gap-2">
+                                            <component
+                                                :is="dItem.icon"
+                                                v-if="dItem.icon"
+                                                :size="16"
+                                                class="shrink-0 text-neutral-400"
+                                            />
+                                            <span class="flex-1">{{
+                                                dItem.label
+                                            }}</span>
+                                        </span>
+                                        <component
+                                            :is="dItem.trailingIcon"
+                                            v-if="dItem.trailingIcon"
+                                            :size="14"
+                                            class="shrink-0 text-neutral-500 opacity-0 transition-all duration-150 group-hover:translate-x-0.5 group-hover:text-white group-hover:opacity-100"
+                                        />
+                                    </button>
+                                </template>
+                            </div>
+                        </slot>
+                    </slot>
+                </template>
+            </Dropdown>
+
+            <!-- 2. External / Anchor Link Mode -->
+            <a
+                v-else-if="item.href && isExternalOrAnchor(item.href)"
+                :href="item.href"
+                :aria-label="item.ariaLabel ?? item.label"
+                :class="getItemClass(item)"
+                @click="handleSelect(item)"
+            >
+                <slot
+                    name="item"
+                    :item="item"
+                    :active="isItemActive(item)"
+                    :select="() => handleSelect(item)"
+                >
+                    <!-- Image -->
+                    <img
+                        v-if="getImageSrc(item)"
+                        :src="getImageSrc(item)"
+                        :alt="getImageAlt(item)"
+                        :class="getImageClass(item)"
+                    />
+                    <!-- Avatar Only -->
+                    <img
+                        v-else-if="isAvatarOnly(item)"
+                        :src="getAvatarSrc(item)"
+                        :alt="getAvatarAlt(item)"
+                        :class="[
+                            avatarSizes[size],
+                            'shrink-0 rounded-full bg-neutral-800 object-cover transition-all duration-200',
+                            isItemActive(item)
+                                ? 'shadow-[0_0_12px_rgba(255,255,255,0.35)] ring-2 ring-white brightness-110'
+                                : 'ring-1 ring-white/20 group-hover:ring-2 group-hover:ring-white/60 group-hover:brightness-110',
+                        ]"
+                    />
+                    <!-- Avatar with label -->
+                    <img
+                        v-else-if="getAvatarSrc(item)"
+                        :src="getAvatarSrc(item)"
+                        :alt="getAvatarAlt(item)"
+                        :class="[
+                            avatarInlineSizes[size],
+                            'shrink-0 rounded-full object-cover ring-1 ring-white/20',
+                        ]"
+                    />
+                    <!-- Icon -->
+                    <component
+                        :is="item.icon"
+                        v-else-if="item.icon"
+                        :size="iconSizes[size]"
+                        class="shrink-0"
+                    />
+                    <span v-if="item.label">{{ item.label }}</span>
+                    <span
+                        v-if="item.sublabel"
+                        class="text-[11px] font-normal text-neutral-400"
+                    >
+                        {{ item.sublabel }}
+                    </span>
+                    <span
+                        v-if="item.count !== undefined"
+                        class="ml-0.5 rounded-full bg-white/10 px-1.5 py-0.5 text-[10px] font-semibold text-neutral-300 transition-colors"
+                        :class="
+                            isItemActive(item)
+                                ? 'bg-white/20 text-white'
+                                : 'text-neutral-400'
+                        "
+                    >
+                        {{ item.count }}
+                    </span>
+                    <component
+                        :is="item.trailingIcon"
+                        v-if="item.trailingIcon"
+                        :size="iconSizes[size]"
+                        class="shrink-0"
+                    />
+                </slot>
+            </a>
+
+            <!-- 3. SPA Link Mode -->
+            <Link
+                v-else-if="item.href"
+                :href="item.href"
+                :aria-label="item.ariaLabel ?? item.label"
+                :class="getItemClass(item)"
+                @click="handleSelect(item)"
+            >
+                <slot
+                    name="item"
+                    :item="item"
+                    :active="isItemActive(item)"
+                    :select="() => handleSelect(item)"
+                >
+                    <!-- Image -->
+                    <img
+                        v-if="getImageSrc(item)"
+                        :src="getImageSrc(item)"
+                        :alt="getImageAlt(item)"
+                        :class="getImageClass(item)"
+                    />
+                    <!-- Avatar Only -->
+                    <img
+                        v-else-if="isAvatarOnly(item)"
+                        :src="getAvatarSrc(item)"
+                        :alt="getAvatarAlt(item)"
+                        :class="[
+                            avatarSizes[size],
+                            'shrink-0 rounded-full bg-neutral-800 object-cover transition-all duration-200',
+                            isItemActive(item)
+                                ? 'shadow-[0_0_12px_rgba(255,255,255,0.35)] ring-2 ring-white brightness-110'
+                                : 'ring-1 ring-white/20 group-hover:ring-2 group-hover:ring-white/60 group-hover:brightness-110',
+                        ]"
+                    />
+                    <!-- Avatar with label -->
+                    <img
+                        v-else-if="getAvatarSrc(item)"
+                        :src="getAvatarSrc(item)"
+                        :alt="getAvatarAlt(item)"
+                        :class="[
+                            avatarInlineSizes[size],
+                            'shrink-0 rounded-full object-cover ring-1 ring-white/20',
+                        ]"
+                    />
+                    <!-- Icon -->
+                    <component
+                        :is="item.icon"
+                        v-else-if="item.icon"
+                        :size="iconSizes[size]"
+                        class="shrink-0"
+                    />
+                    <span v-if="item.label">{{ item.label }}</span>
+                    <span
+                        v-if="item.sublabel"
+                        class="text-[11px] font-normal text-neutral-400"
+                    >
+                        {{ item.sublabel }}
+                    </span>
+                    <span
+                        v-if="item.count !== undefined"
+                        class="ml-0.5 rounded-full bg-white/10 px-1.5 py-0.5 text-[10px] font-semibold text-neutral-300 transition-colors"
+                        :class="
+                            isItemActive(item)
+                                ? 'bg-white/20 text-white'
+                                : 'text-neutral-400'
+                        "
+                    >
+                        {{ item.count }}
+                    </span>
+                    <component
+                        :is="item.trailingIcon"
+                        v-if="item.trailingIcon"
+                        :size="iconSizes[size]"
+                        class="shrink-0"
+                    />
+                </slot>
+            </Link>
+
+            <!-- 4. Button Mode -->
+            <button
+                v-else
+                type="button"
+                :disabled="item.disabled"
+                :aria-label="item.ariaLabel ?? item.label"
+                :class="getItemClass(item)"
+                @click="handleSelect(item)"
+            >
+                <slot
+                    name="item"
+                    :item="item"
+                    :active="isItemActive(item)"
+                    :select="() => handleSelect(item)"
+                >
+                    <!-- Image -->
+                    <img
+                        v-if="getImageSrc(item)"
+                        :src="getImageSrc(item)"
+                        :alt="getImageAlt(item)"
+                        :class="getImageClass(item)"
+                    />
+                    <!-- Avatar Only -->
+                    <img
+                        v-else-if="isAvatarOnly(item)"
+                        :src="getAvatarSrc(item)"
+                        :alt="getAvatarAlt(item)"
+                        :class="[
+                            avatarSizes[size],
+                            'shrink-0 rounded-full bg-neutral-800 object-cover transition-all duration-200',
+                            isItemActive(item)
+                                ? 'shadow-[0_0_12px_rgba(255,255,255,0.35)] ring-2 ring-white brightness-110'
+                                : 'ring-1 ring-white/20 group-hover:ring-2 group-hover:ring-white/60 group-hover:brightness-110',
+                        ]"
+                    />
+                    <!-- Avatar with label -->
+                    <img
+                        v-else-if="getAvatarSrc(item)"
+                        :src="getAvatarSrc(item)"
+                        :alt="getAvatarAlt(item)"
+                        :class="[
+                            avatarInlineSizes[size],
+                            'shrink-0 rounded-full object-cover ring-1 ring-white/20',
+                        ]"
+                    />
+                    <!-- Icon -->
+                    <component
+                        :is="item.icon"
+                        v-else-if="item.icon"
+                        :size="iconSizes[size]"
+                        class="shrink-0"
+                    />
+                    <span v-if="item.label">{{ item.label }}</span>
+                    <span
+                        v-if="item.sublabel"
+                        class="text-[11px] font-normal text-neutral-400"
+                    >
+                        {{ item.sublabel }}
+                    </span>
+                    <span
+                        v-if="item.count !== undefined"
+                        class="ml-0.5 rounded-full bg-white/10 px-1.5 py-0.5 text-[10px] font-semibold text-neutral-300 transition-colors"
+                        :class="
+                            isItemActive(item)
+                                ? 'bg-white/20 text-white'
+                                : 'text-neutral-400'
+                        "
+                    >
+                        {{ item.count }}
+                    </span>
+                    <component
+                        :is="item.trailingIcon"
+                        v-if="item.trailingIcon"
+                        :size="iconSizes[size]"
+                        class="shrink-0"
+                    />
+                </slot>
+            </button>
+        </template>
+
+        <!-- Default slot (when items is empty or alongside items) -->
+        <slot />
+
+        <slot name="trailing" />
+    </component>
+</template>
diff --git a/resources/js/Components/UI/SocialIcon.vue b/resources/js/Components/UI/SocialIcon.vue
new file mode 100644
index 00000000..f7d34bf2
--- /dev/null
+++ b/resources/js/Components/UI/SocialIcon.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Globe, Mail } from "@lucide/vue";
+
+interface Props {
+    platform: string;
+    size?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    size: 16,
+});
+
+const normalizedPlatform = computed(() =>
+    props.platform.toLowerCase().trim().replace(/^@/, ""),
+);
+</script>
+
+<template>
+    <!-- Lucide for utility icons -->
+    <Globe
+        v-if="['website', 'globe', 'link'].includes(normalizedPlatform)"
+        :size="size"
+        class="shrink-0"
+    />
+    <Mail
+        v-else-if="['email', 'mail'].includes(normalizedPlatform)"
+        :size="size"
+        class="shrink-0"
+    />
+
+    <!-- Brand Icons -->
+    <svg
+        v-else-if="normalizedPlatform === 'github'"
+        :width="size"
+        :height="size"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        class="shrink-0"
+    >
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+        />
+    </svg>
+
+    <svg
+        v-else-if="normalizedPlatform === 'linkedin'"
+        :width="size"
+        :height="size"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        class="shrink-0"
+    >
+        <path
+            d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"
+        />
+    </svg>
+
+    <svg
+        v-else-if="normalizedPlatform === 'instagram'"
+        :width="size"
+        :height="size"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        class="shrink-0"
+    >
+        <path
+            d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"
+        />
+    </svg>
+
+    <svg
+        v-else-if="['twitter', 'x'].includes(normalizedPlatform)"
+        :width="size"
+        :height="size"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        class="shrink-0"
+    >
+        <path
+            d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+        />
+    </svg>
+
+    <svg
+        v-else-if="normalizedPlatform === 'facebook'"
+        :width="size"
+        :height="size"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        class="shrink-0"
+    >
+        <path
+            d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
+        />
+    </svg>
+
+    <Globe v-else :size="size" class="shrink-0" />
+</template>
diff --git a/resources/js/Layouts/CardLayout.vue b/resources/js/Layouts/CardLayout.vue
index ca6663ee..d98d529c 100644
--- a/resources/js/Layouts/CardLayout.vue
+++ b/resources/js/Layouts/CardLayout.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { Link } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import AppLayout from "./AppLayout.vue";
+import Card from "@/Components/UI/Card.vue";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
 
 interface Props {
     title: string;
@@ -33,6 +36,21 @@ const showAuthTabs = computed(() => {
         currentRouteName.value === "register"
     );
 });
+
+const authTabs = computed<PillOption[]>(() => [
+    {
+        id: "login",
+        label: "Iniciar sessão",
+        href: route("login"),
+        active: currentRouteName.value === "login",
+    },
+    {
+        id: "register",
+        label: "Criar conta",
+        href: route("register"),
+        active: currentRouteName.value === "register",
+    },
+]);
 </script>
 
 <template>
@@ -41,26 +59,7 @@ const showAuthTabs = computed(() => {
             class="relative flex min-h-[calc(100vh-8rem)] flex-col items-center justify-center px-4 py-12 sm:py-16"
         >
             <div v-if="showAuthTabs" class="mb-6 flex justify-center">
-                <div class="pill-container gap-1 p-1">
-                    <Link
-                        :href="route('login')"
-                        class="pill-item cursor-pointer px-6 py-2 text-xs font-medium transition-all duration-200 sm:text-sm"
-                        :class="{
-                            'pill-item-active': currentRouteName === 'login',
-                        }"
-                    >
-                        <span>Iniciar sessão</span>
-                    </Link>
-                    <Link
-                        :href="route('register')"
-                        class="pill-item cursor-pointer px-6 py-2 text-xs font-medium transition-all duration-200 sm:text-sm"
-                        :class="{
-                            'pill-item-active': currentRouteName === 'register',
-                        }"
-                    >
-                        <span>Criar conta</span>
-                    </Link>
-                </div>
+                <PillSelector :items="authTabs" size="md" :wrap="false" />
             </div>
 
             <div
@@ -78,12 +77,15 @@ const showAuthTabs = computed(() => {
                 </p>
             </div>
 
-            <div
-                class="relative flex w-full flex-col gap-6 rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 select-none hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8 md:p-10"
+            <Card
+                as="div"
+                :interactive="false"
+                padding="p-6 sm:p-8 md:p-10"
+                class="w-full"
                 :class="maxWidth"
             >
                 <slot />
-            </div>
+            </Card>
         </div>
     </AppLayout>
 </template>
diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index bdcfc0a6..7f331249 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -51,9 +51,7 @@ const submit = () => {
                 <span v-else>Enviar email</span>
             </PrimaryButton>
 
-            <div
-                class="pt-4 text-center text-xs text-neutral-400 sm:text-sm"
-            >
+            <div class="pt-4 text-center text-xs text-neutral-400 sm:text-sm">
                 Lembraste-te da password?
                 <Link
                     :href="route('login')"
diff --git a/resources/js/Pages/Competition.vue b/resources/js/Pages/Competition.vue
index 3dd5ab41..29eb09f9 100644
--- a/resources/js/Pages/Competition.vue
+++ b/resources/js/Pages/Competition.vue
@@ -8,6 +8,11 @@ import CompetitionLeaderboard from "@/Components/Competition/CompetitionLeaderbo
 import type Competition from "@/Types/Competition";
 import type { CompetitionPrizes } from "@/Types/Competition";
 import { type User } from "@/Types/User";
+import Card from "@/Components/UI/Card.vue";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
+import { ExternalLink } from "@lucide/vue";
 
 interface Props {
     competition: Competition;
@@ -78,25 +83,25 @@ const hasRegulation = computed(() =>
     Boolean(competition.value.regulation_html),
 );
 
-const availableTabs = computed(() => {
-    const list: { key: CompetitionTab; label: string; count?: number }[] = [];
+const availableTabs = computed<PillOption[]>(() => {
+    const list: PillOption[] = [];
     if (hasTeams.value) {
         list.push({
-            key: "teams",
+            id: "teams",
             label: "Equipas",
             count: competition.value.teams?.length,
         });
     }
     if (hasPrizes.value) {
         list.push({
-            key: "prizes",
+            id: "prizes",
             label: "Prémios",
             count: props.prizes?.length,
         });
     }
     if (hasRegulation.value) {
         list.push({
-            key: "regulation",
+            id: "regulation",
             label: "Regulamento",
         });
     }
@@ -262,7 +267,8 @@ onBeforeUnmount(() => {
                     <div class="border-t border-white/8 pt-6">
                         <div v-if="isOver" class="text-center sm:text-left">
                             <p class="text-xs text-neutral-400 sm:text-sm">
-                                Esta competição já acabou. Obrigado pela participação!
+                                Esta competição já acabou. Obrigado pela
+                                participação!
                             </p>
                         </div>
 
@@ -279,7 +285,7 @@ onBeforeUnmount(() => {
                                 </p>
                                 <button
                                     type="button"
-                                    class="pill-container pill-item bg-sinf-crimson/80 hover:bg-sinf-crimson shrink-0 cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
+                                    class="pill-container pill-item bg-sinf-primary/80 hover:bg-sinf-primary shrink-0 cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
                                     @click="handleEnrollClick"
                                 >
                                     Inscrever-me na SINF
@@ -297,22 +303,10 @@ onBeforeUnmount(() => {
                                     :href="competition.registration_link"
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                    class="pill-container pill-item bg-sinf-purple/80 hover:bg-sinf-purple shrink-0 cursor-pointer gap-2 px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
+                                    class="pill-container pill-item bg-sinf-secondary/80 hover:bg-sinf-secondary shrink-0 cursor-pointer gap-2 px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
                                 >
                                     <span>Inscrever Equipa</span>
-                                    <svg
-                                        class="h-4 w-4"
-                                        fill="none"
-                                        viewBox="0 0 24 24"
-                                        stroke="currentColor"
-                                    >
-                                        <path
-                                            stroke-linecap="round"
-                                            stroke-linejoin="round"
-                                            stroke-width="2"
-                                            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                                        />
-                                    </svg>
+                                    <ExternalLink :size="16" />
                                 </a>
                             </template>
                         </div>
@@ -321,29 +315,11 @@ onBeforeUnmount(() => {
             </header>
 
             <div v-if="availableTabs.length > 0" class="flex justify-center">
-                <div class="pill-container flex-wrap justify-center gap-1 p-1">
-                    <button
-                        v-for="tab in availableTabs"
-                        :key="tab.key"
-                        type="button"
-                        class="pill-item cursor-pointer gap-2 px-5 py-2 text-xs font-semibold transition-all sm:text-sm"
-                        :class="{ 'pill-item-active': activeTab === tab.key }"
-                        @click="activeTab = tab.key"
-                    >
-                        <span>{{ tab.label }}</span>
-                        <span
-                            v-if="tab.count !== undefined"
-                            class="py-0.2 rounded-full px-1.5 text-[10px] transition-colors"
-                            :class="
-                                activeTab === tab.key
-                                    ? 'bg-white/20 text-white'
-                                    : 'bg-white/8 text-neutral-400'
-                            "
-                        >
-                            {{ tab.count }}
-                        </span>
-                    </button>
-                </div>
+                <PillSelector
+                    v-model="activeTab"
+                    :items="availableTabs"
+                    size="md"
+                />
             </div>
 
             <div v-if="activeTab === 'teams'" class="space-y-12 sm:space-y-16">
@@ -359,14 +335,12 @@ onBeforeUnmount(() => {
             </div>
 
             <div v-else-if="activeTab === 'regulation'" class="w-full">
-                <div
-                    class="rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md sm:p-10"
-                >
+                <Card as="div" :interactive="false" padding="p-6 sm:p-10">
                     <div
-                        class="prose prose-invert prose-headings:text-white prose-p:leading-relaxed prose-a:text-sinf-purple-light hover:prose-a:text-white prose-strong:text-white max-w-none leading-relaxed wrap-break-word text-neutral-300"
+                        class="prose prose-invert prose-headings:text-white prose-p:leading-relaxed prose-a:text-sinf-secondary-light hover:prose-a:text-white prose-strong:text-white max-w-none leading-relaxed wrap-break-word text-neutral-300"
                         v-html="competition.regulation_html"
                     />
-                </div>
+                </Card>
             </div>
 
             <div
diff --git a/resources/js/Pages/Event.vue b/resources/js/Pages/Event.vue
index 9e34bdec..ae3e339f 100644
--- a/resources/js/Pages/Event.vue
+++ b/resources/js/Pages/Event.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, onMounted, onBeforeUnmount } from "vue";
-import { router, Link, usePage } from "@inertiajs/vue3";
+import { router, usePage } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import type Event from "@/Types/Event";
 import type Enrollment from "@/Types/Enrollment";
@@ -8,6 +8,10 @@ import { type User, isSpeaker, isCompany, isAdmin } from "@/Types/User";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import SpeakerInfo from "@/Components/Event/SpeakerInfo.vue";
 import Sponsor from "@/Components/Home/Sponsor.vue";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
+import { ExternalLink, QrCode } from "@lucide/vue";
 
 interface Props {
     event: Event;
@@ -139,6 +143,14 @@ const defaultTab = computed<EventTab>(() => {
 
 const activeTab = ref<EventTab>(defaultTab.value);
 
+const eventTabItems = computed<PillOption[]>(() => {
+    return availableTabs.value.map((tab) => ({
+        id: tab.key,
+        label: tab.label,
+        count: tab.count,
+    }));
+});
+
 const isAtBottom = ref(false);
 
 function updateScrollState() {
@@ -254,7 +266,9 @@ onBeforeUnmount(() => {
                     class="mt-2 flex w-full flex-col gap-6 rounded-3xl border border-white/8 bg-black/50 p-6 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md sm:p-8"
                 >
                     <div
-                        v-if="event.time_start || event.location || event.capacity"
+                        v-if="
+                            event.time_start || event.location || event.capacity
+                        "
                         class="flex flex-wrap items-center gap-4 text-xs text-neutral-400 sm:gap-6 sm:text-sm"
                     >
                         <div
@@ -338,7 +352,7 @@ onBeforeUnmount(() => {
 
                     <div
                         v-if="event.description_html"
-                        class="prose prose-invert max-w-none text-justify text-base leading-relaxed text-neutral-300 prose-headings:text-white prose-a:text-sinf-purple-light hover:prose-a:text-white prose-strong:text-white sm:text-lg"
+                        class="prose prose-invert prose-headings:text-white prose-a:text-sinf-secondary-light hover:prose-a:text-white prose-strong:text-white max-w-none text-justify text-base leading-relaxed text-neutral-300 sm:text-lg"
                         v-html="event.description_html"
                     />
                     <p
@@ -357,16 +371,14 @@ onBeforeUnmount(() => {
                             class="flex flex-col items-center justify-between gap-4 sm:flex-row"
                         >
                             <div class="flex items-center gap-2">
-                                <span
-                                    class="text-xs font-semibold sm:text-sm"
-                                >
+                                <span class="text-xs font-semibold sm:text-sm">
                                     Inscrição confirmada! Vemo-nos lá.
                                 </span>
                             </div>
 
                             <button
                                 type="button"
-                                class="pill-container pill-item border-red-500/20 bg-red-500/10 hover:bg-red-500/20 shrink-0 cursor-pointer px-5 py-2 text-xs font-semibold text-red-300 transition-all active:scale-95 sm:text-sm"
+                                class="pill-container pill-item shrink-0 cursor-pointer border-red-500/20 bg-red-500/10 px-5 py-2 text-xs font-semibold text-red-300 transition-all hover:bg-red-500/20 active:scale-95 sm:text-sm"
                                 @click="handleLeaveEvent"
                             >
                                 Cancelar Inscrição
@@ -385,7 +397,7 @@ onBeforeUnmount(() => {
                             </p>
                             <button
                                 type="button"
-                                class="pill-container pill-item bg-sinf-crimson/80 hover:bg-sinf-crimson shrink-0 cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
+                                class="pill-container pill-item bg-sinf-primary/80 hover:bg-sinf-primary shrink-0 cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
                                 @click="handleEnrollSinf"
                             >
                                 Inscrever-me na SINF
@@ -406,22 +418,10 @@ onBeforeUnmount(() => {
                                 :href="event.external_url"
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                class="pill-container pill-item bg-sinf-purple/80 hover:bg-sinf-purple shrink-0 cursor-pointer gap-2 px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
+                                class="pill-container pill-item bg-sinf-secondary/80 hover:bg-sinf-secondary shrink-0 cursor-pointer gap-2 px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
                             >
                                 <span>Inscrever-me</span>
-                                <svg
-                                    class="h-4 w-4"
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                    stroke="currentColor"
-                                >
-                                    <path
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        stroke-width="2"
-                                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                                    />
-                                </svg>
+                                <ExternalLink :size="16" />
                             </a>
                         </div>
 
@@ -444,7 +444,7 @@ onBeforeUnmount(() => {
                             </p>
                             <button
                                 type="button"
-                                class="pill-container pill-item bg-sinf-purple/80 hover:bg-sinf-purple shrink-0 cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
+                                class="pill-container pill-item bg-sinf-secondary/80 hover:bg-sinf-secondary shrink-0 cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
                                 @click="handleJoinEvent"
                             >
                                 Inscrever-me no Evento
@@ -469,66 +469,33 @@ onBeforeUnmount(() => {
             </header>
 
             <div
-                v-if="availableTabs.length > 0 || (isAdmin(authUser) || isStaff)"
+                v-if="availableTabs.length > 0 || isAdmin(authUser) || isStaff"
                 class="flex flex-wrap items-center justify-center gap-3 sm:gap-4"
             >
-                <div
+                <PillSelector
                     v-if="availableTabs.length > 0"
-                    class="pill-container flex-wrap justify-center gap-1 p-1"
-                >
-                    <button
-                        v-for="tab in availableTabs"
-                        :key="tab.key"
-                        type="button"
-                        class="pill-item cursor-pointer gap-2 px-5 py-2 text-xs font-semibold transition-all sm:text-sm"
-                        :class="{ 'pill-item-active': activeTab === tab.key }"
-                        @click="activeTab = tab.key"
-                    >
-                        <span>{{ tab.label }}</span>
-                        <span
-                            v-if="tab.count !== undefined"
-                            class="py-0.2 rounded-full px-1.5 text-[10px] transition-colors"
-                            :class="
-                                activeTab === tab.key
-                                    ? 'bg-white/20 text-white'
-                                    : 'bg-white/8 text-neutral-400'
-                            "
-                        >
-                            {{ tab.count }}
-                        </span>
-                    </button>
-                </div>
+                    v-model="activeTab"
+                    :items="eventTabItems"
+                    size="md"
+                />
 
-                <div
+                <PillSelector
                     v-if="isAdmin(authUser) || isStaff"
-                    class="pill-container p-1"
-                >
-                    <Link
-                        :href="
-                            route('user.scan-code', {
+                    :items="[
+                        {
+                            id: 'scan-code',
+                            label: 'Digitalizar QR Code',
+                            icon: QrCode,
+                            href: route('user.scan-code', {
                                 _query: {
                                     event: event.id,
                                 },
-                            })
-                        "
-                        class="pill-item cursor-pointer gap-2 px-4 py-2 text-xs font-semibold text-white transition-all hover:bg-white/10 sm:text-sm"
-                    >
-                        <svg
-                            class="h-4 w-4"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"
-                            />
-                        </svg>
-                        <span>Digitalizar QR Code</span>
-                    </Link>
-                </div>
+                            }),
+                        },
+                    ]"
+                    size="md"
+                    :wrap="false"
+                />
             </div>
 
             <div v-if="activeTab === 'speakers'" class="space-y-6">
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
index 05d713e6..1cb6bce0 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -6,6 +6,8 @@ import AppLayout from "@/Layouts/AppLayout.vue";
 import SpeakersCarousel from "@/Components/Home/SpeakersCarousel.vue";
 import SponsorBanner from "@/Components/Home/SponsorBanner.vue";
 import InfoPopup from "@/Components/Home/InfoPopup.vue";
+import PillSelector from "@/Components/UI/PillSelector.vue";
+import { ArrowUp, ArrowDown } from "@lucide/vue";
 import type Edition from "@/Types/Edition";
 import type EventDay from "@/Types/EventDay";
 import type { User } from "@/Types/User";
@@ -86,37 +88,11 @@ onBeforeUnmount(() => {
             :aria-label="
                 isAtBottom ? 'Scroll to top' : 'Scroll to next section'
             "
-            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
+            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 cursor-pointer justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
             @click="handleQuickScroll"
         >
-            <svg
-                v-if="isAtBottom"
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M5 10l7-7m0 0l7 7m-7-7v18"
-                />
-            </svg>
-            <svg
-                v-else
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M19 14l-7 7m0 0l-7-7m7 7V3"
-                />
-            </svg>
+            <ArrowUp v-if="isAtBottom" :size="16" />
+            <ArrowDown v-else :size="16" />
         </button>
 
         <section
@@ -136,19 +112,17 @@ onBeforeUnmount(() => {
                 16 a 19 de novembro
             </p>
 
-            <div v-if="canEnroll" class="pill-container">
-                <button
-                    type="button"
-                    class="pill-item px-6 py-2 text-sm font-semibold sm:text-base"
-                    @click="
-                        $page.props.auth.user
-                            ? router.put(route('enroll'))
-                            : router.get(route('register'))
-                    "
-                >
-                    Inscrever-me
-                </button>
-            </div>
+            <PillSelector
+                v-if="canEnroll"
+                :items="[{ id: 'enroll', label: 'Inscrever-me', active: true }]"
+                size="md"
+                :wrap="false"
+                @select="
+                    $page.props.auth.user
+                        ? router.put(route('enroll'))
+                        : router.get(route('register'))
+                "
+            />
         </section>
 
         <section
@@ -156,11 +130,13 @@ onBeforeUnmount(() => {
             class="relative mx-auto max-w-5xl px-4 py-20 sm:px-6 lg:px-8"
         >
             <div class="mb-10 flex justify-center">
-                <div class="pill-container">
-                    <span class="pill-item font-semibold text-white">
-                        Sobre nós
-                    </span>
-                </div>
+                <PillSelector
+                    :items="[
+                        { id: 'aboutus', label: 'Sobre nós', active: true },
+                    ]"
+                    size="sm"
+                    :wrap="false"
+                />
             </div>
 
             <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
@@ -187,11 +163,13 @@ onBeforeUnmount(() => {
 
         <section class="relative mx-auto max-w-5xl px-4 py-20 sm:px-6 lg:px-8">
             <div class="mb-10 flex justify-center">
-                <div class="pill-container">
-                    <span class="pill-item font-semibold text-white">
-                        Este ano temos
-                    </span>
-                </div>
+                <PillSelector
+                    :items="[
+                        { id: 'stats', label: 'Este ano temos', active: true },
+                    ]"
+                    size="sm"
+                    :wrap="false"
+                />
             </div>
 
             <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-4">
@@ -263,11 +241,13 @@ onBeforeUnmount(() => {
 
         <section id="speakers" class="relative w-full overflow-hidden py-20">
             <div class="mb-10 flex justify-center px-4">
-                <div class="pill-container">
-                    <span class="pill-item font-semibold text-white">
-                        Oradores
-                    </span>
-                </div>
+                <PillSelector
+                    :items="[
+                        { id: 'speakers', label: 'Oradores', active: true },
+                    ]"
+                    size="sm"
+                    :wrap="false"
+                />
             </div>
 
             <template v-if="speakers.length !== 0">
@@ -276,9 +256,13 @@ onBeforeUnmount(() => {
                 </div>
             </template>
             <div v-else class="flex justify-center px-4">
-                <div class="pill-container px-6 py-3 text-sm text-neutral-400">
-                    Em breve...
-                </div>
+                <PillSelector
+                    :items="[
+                        { id: 'soon', label: 'Em breve...', disabled: true },
+                    ]"
+                    size="sm"
+                    :wrap="false"
+                />
             </div>
         </section>
 
@@ -287,11 +271,13 @@ onBeforeUnmount(() => {
             class="relative mx-auto max-w-6xl px-4 py-20 sm:px-6 lg:px-8"
         >
             <div class="mb-10 flex justify-center">
-                <div class="pill-container">
-                    <span class="pill-item font-semibold text-white">
-                        Patrocínios
-                    </span>
-                </div>
+                <PillSelector
+                    :items="[
+                        { id: 'sponsors', label: 'Patrocínios', active: true },
+                    ]"
+                    size="sm"
+                    :wrap="false"
+                />
             </div>
 
             <div class="space-y-12">
diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
index 7784c1ce..cce7cd32 100644
--- a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
+++ b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -57,7 +57,7 @@ const closeModal = () => {
             </div>
 
             <div class="mt-5">
-                <PrimaryButton color="blue" @click="confirmUserDeletion">
+                <PrimaryButton color="secondary" @click="confirmUserDeletion">
                     Apagar conta
                 </PrimaryButton>
             </div>
@@ -92,7 +92,7 @@ const closeModal = () => {
 
                     <PrimaryButton
                         class="ml-3"
-                        color="red"
+                        color="danger"
                         :class="{ 'opacity-25': form.processing }"
                         :disabled="form.processing"
                         @click="deleteUser"
diff --git a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
index e57b2436..953679ac 100644
--- a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
+++ b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
@@ -288,7 +288,7 @@ const disableTwoFactorAuthentication = () => {
                         <PrimaryButton
                             v-if="confirming"
                             :class="{ 'opacity-25': disabling }"
-                            color="red"
+                            color="danger"
                             :disabled="disabling"
                         >
                             Cancel
@@ -305,7 +305,7 @@ const disableTwoFactorAuthentication = () => {
                             v-if="!confirming"
                             :class="{ 'opacity-25': disabling }"
                             :disabled="disabling"
-                            color="red"
+                            color="danger"
                         >
                             Disable
                         </PrimaryButton>
diff --git a/resources/js/Pages/Profile/ScanCode.vue b/resources/js/Pages/Profile/ScanCode.vue
index 9285bcee..ee0d2daf 100644
--- a/resources/js/Pages/Profile/ScanCode.vue
+++ b/resources/js/Pages/Profile/ScanCode.vue
@@ -5,7 +5,7 @@ import TextInput from "@/Components/TextInput.vue";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import type Quest from "@/Types/Quest";
 import { useForm, usePage } from "@inertiajs/vue3";
-import { OhVueIcon } from "oh-vue-icons";
+import { QrCode } from "@lucide/vue";
 import { computed, ref, watch } from "vue";
 import { QrcodeStream } from "vue-qrcode-reader";
 import { route } from "ziggy-js";
@@ -79,8 +79,8 @@ watch(id, async () => {
             <ul class="flex w-fit flex-col items-center px-4 text-center">
                 <li>
                     No perfil do participante, encontrar o ícone de QR Code
-                    <span class="text-2025-blue"
-                        ><OhVueIcon name="io-qr-code" /></span
+                    <span class="text-2025-blue inline-flex items-center"
+                        ><QrCode :size="16" class="inline" /></span
                     >, clicar no ícone e dar scan ao código.
                 </li>
                 <li>
diff --git a/resources/js/Pages/Program.vue b/resources/js/Pages/Program.vue
index 764d8b90..b9ac3212 100644
--- a/resources/js/Pages/Program.vue
+++ b/resources/js/Pages/Program.vue
@@ -2,6 +2,7 @@
 import AppLayout from "@/Layouts/AppLayout.vue";
 import ProgramDaySelector from "@/Components/Program/ProgramDaySelector.vue";
 import ProgramDayPanel from "@/Components/Program/ProgramDayPanel.vue";
+import PillSelector from "@/Components/UI/PillSelector.vue";
 import type EventDay from "@/Types/EventDay";
 
 interface Props {
@@ -36,11 +37,14 @@ defineProps<Props>();
                 v-else
                 class="flex flex-col items-center justify-center py-28 text-center"
             >
-                <div class="pill-container mb-4 px-6 py-2.5">
-                    <span class="text-sm font-medium text-neutral-400">
-                        Em breve...
-                    </span>
-                </div>
+                <PillSelector
+                    :items="[
+                        { id: 'soon', label: 'Em breve...', disabled: true },
+                    ]"
+                    size="sm"
+                    :wrap="false"
+                    container-class="mb-4"
+                />
                 <p class="max-w-md text-sm text-neutral-400">
                     O programa da edição 2026 estará disponível brevemente.
                 </p>
diff --git a/resources/js/Pages/Shop.vue b/resources/js/Pages/Shop.vue
index c2696f1d..1bdf28dc 100644
--- a/resources/js/Pages/Shop.vue
+++ b/resources/js/Pages/Shop.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import AppLayout from "@/Layouts/AppLayout.vue";
 import ShopItem from "@/Components/Shop/ShopItem.vue";
+import PillSelector from "@/Components/UI/PillSelector.vue";
 import { type BuyableProduct } from "@/Types/ShopPage";
 
 interface Props {
@@ -20,24 +21,26 @@ defineProps<Props>();
                 v-if="points !== null && points !== undefined"
                 class="mb-10 flex justify-center"
             >
-                <div
-                    class="pill-container gap-2.5 px-5 py-2 text-xs text-neutral-300 shadow-none sm:text-sm"
-                >
-                    <span>O teu saldo:</span>
-                    <span
-                        class="flex items-center gap-1.5 font-bold text-white"
+                <PillSelector size="md" :wrap="false">
+                    <div
+                        class="pill-item cursor-default gap-2.5 hover:bg-transparent"
                     >
-                        <span class="text-sm font-semibold sm:text-base">{{
-                            points
-                        }}</span>
-                        <img
-                            class="h-4 w-4 object-contain"
-                            alt="SINFrão"
-                            title="SINFrão"
-                            src="/images/sinf-2026-sm.svg"
-                        />
-                    </span>
-                </div>
+                        <span>O teu saldo:</span>
+                        <span
+                            class="flex items-center gap-1.5 font-bold text-white"
+                        >
+                            <span class="text-sm font-semibold sm:text-base">{{
+                                points
+                            }}</span>
+                            <img
+                                class="h-4 w-4 object-contain"
+                                alt="SINFrão"
+                                title="SINFrão"
+                                src="/images/sinf-2026-sm.svg"
+                            />
+                        </span>
+                    </div>
+                </PillSelector>
             </div>
 
             <template v-if="products.length > 0">
@@ -59,11 +62,14 @@ defineProps<Props>();
                 v-else
                 class="flex flex-col items-center justify-center py-28 text-center"
             >
-                <div class="pill-container mb-4 px-6 py-2.5">
-                    <span class="text-sm font-medium text-neutral-400">
-                        Em breve...
-                    </span>
-                </div>
+                <PillSelector
+                    :items="[
+                        { id: 'soon', label: 'Em breve...', disabled: true },
+                    ]"
+                    size="sm"
+                    :wrap="false"
+                    container-class="mb-4"
+                />
                 <p class="max-w-md text-sm text-neutral-400">
                     A loja da edição 2026 estará disponível brevemente. Fica
                     atento às novidades!
diff --git a/resources/js/Pages/Team.vue b/resources/js/Pages/Team.vue
index 3cbccc2e..4c4455a6 100644
--- a/resources/js/Pages/Team.vue
+++ b/resources/js/Pages/Team.vue
@@ -4,6 +4,8 @@ import type Department from "@/Types/Department";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import DepartmentSection from "@/Components/Team/DepartmentSection.vue";
 import DepartmentSelector from "@/Components/Team/DepartmentSelector.vue";
+import PillSelector from "@/Components/UI/PillSelector.vue";
+import { ArrowUp, ArrowDown } from "@lucide/vue";
 
 interface Props {
     departments: Department[];
@@ -88,37 +90,11 @@ onBeforeUnmount(() => {
             :aria-label="
                 isAtBottom ? 'Scroll to top' : 'Scroll to next department'
             "
-            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
+            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 cursor-pointer justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
             @click="handleQuickScroll"
         >
-            <svg
-                v-if="isAtBottom"
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M5 10l7-7m0 0l7 7m-7-7v18"
-                />
-            </svg>
-            <svg
-                v-else
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M19 14l-7 7m0 0l-7-7m7 7V3"
-                />
-            </svg>
+            <ArrowUp v-if="isAtBottom" :size="16" />
+            <ArrowDown v-else :size="16" />
         </button>
 
         <div class="relative mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
@@ -142,11 +118,14 @@ onBeforeUnmount(() => {
                 v-else
                 class="flex flex-col items-center justify-center py-28 text-center"
             >
-                <div class="pill-container mb-4 px-6 py-2.5">
-                    <span class="text-sm font-medium text-neutral-400">
-                        Em breve...
-                    </span>
-                </div>
+                <PillSelector
+                    :items="[
+                        { id: 'soon', label: 'Em breve...', disabled: true },
+                    ]"
+                    size="sm"
+                    :wrap="false"
+                    container-class="mb-4"
+                />
                 <p class="max-w-md text-sm text-neutral-400">
                     A equipa da edição 2026 estará disponível brevemente.
                 </p>
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 3da5d279..54ad5f0f 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -6,22 +6,11 @@ import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
 import { createVfm } from "vue-final-modal";
 import VueCookies from "vue-cookies";
 import { ZiggyVue } from "ziggy-js";
-import { addIcons } from "oh-vue-icons";
 import { createI18n } from "vue-i18n";
 import messages from "./messages";
-
-const vfm = createVfm();
-
-import * as IoIcons from "oh-vue-icons/icons/io";
 import { VueQrcodeReader } from "vue-qrcode-reader";
 
-const Io = Object.values({ ...IoIcons });
-addIcons(
-    ...Io.map((i) => ({
-        ...i,
-        raw: i.raw.replace('stroke="#000"', 'stroke="currentColor"'),
-    })),
-);
+const vfm = createVfm();
 
 const appName =
     window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";
diff --git a/vite.config.ts b/vite.config.ts
index 529df2e9..207823f7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -33,7 +33,4 @@ export default defineConfig({
             },
         }),
     ],
-    optimizeDeps: {
-        exclude: ["oh-vue-icons/icons"],
-    },
 });

From 9a64c5214e74b741d1c4b2f07754472c72f5e23a Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Thu, 3 Sep 2026 18:43:12 +0100
Subject: [PATCH 11/33] feat: improved auth pages with better layout and
 components

---
 resources/css/app.css                         |  12 +
 resources/js/Components/CodeInput.vue         | 228 ++++++++++++++++++
 resources/js/Components/PrimaryButton.vue     |  79 ++++--
 resources/js/Components/TextInput.vue         |   8 +
 resources/js/Layouts/AuthLayout.vue           | 111 +++++++++
 resources/js/Layouts/CardLayout.vue           |  43 +---
 resources/js/Pages/Auth/ConfirmPassword.vue   |  36 ++-
 resources/js/Pages/Auth/ForgotPassword.vue    |  31 ++-
 resources/js/Pages/Auth/Login.vue             |  32 ++-
 resources/js/Pages/Auth/Register.vue          | 176 +++++++++-----
 resources/js/Pages/Auth/ResetPassword.vue     |  35 +--
 .../js/Pages/Auth/TwoFactorChallenge.vue      |  49 ++--
 resources/js/Pages/Auth/VerifyEmail.vue       |  26 +-
 .../Partials/TwoFactorAuthenticationForm.vue  |  13 +-
 14 files changed, 666 insertions(+), 213 deletions(-)
 create mode 100644 resources/js/Components/CodeInput.vue
 create mode 100644 resources/js/Layouts/AuthLayout.vue

diff --git a/resources/css/app.css b/resources/css/app.css
index 39178327..5baa7025 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -260,3 +260,15 @@
 [x-cloak] {
     display: none;
 }
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active,
+select:-webkit-autofill,
+textarea:-webkit-autofill {
+    -webkit-text-fill-color: #ffffff !important;
+    -webkit-box-shadow: 0 0 0px 1000px rgba(10, 10, 10, 0.95) inset !important;
+    transition: background-color 5000s ease-in-out 0s !important;
+    caret-color: #ffffff !important;
+}
diff --git a/resources/js/Components/CodeInput.vue b/resources/js/Components/CodeInput.vue
new file mode 100644
index 00000000..b0f0e585
--- /dev/null
+++ b/resources/js/Components/CodeInput.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { AlertCircle } from "@lucide/vue";
+import { nextTick, onMounted, ref, watch } from "vue";
+
+interface Props {
+    modelValue?: string;
+    length?: number;
+    id?: string;
+    name?: string;
+    label?: string;
+    errorMessage?: string;
+    autofocus?: boolean;
+    disabled?: boolean;
+    center?: boolean;
+}
+
+interface Emits {
+    (event: "update:modelValue", value: string): void;
+    (event: "complete", value: string): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: "",
+    length: 6,
+    id: "code-input",
+    name: "code",
+    label: undefined,
+    errorMessage: undefined,
+    autofocus: true,
+    disabled: false,
+    center: true,
+});
+
+const emit = defineEmits<Emits>();
+
+const digits = ref<string[]>(Array(props.length).fill(""));
+const inputRefs = ref<HTMLInputElement[]>([]);
+
+watch(
+    () => props.modelValue,
+    (newVal) => {
+        const val = newVal ?? "";
+        for (let i = 0; i < props.length; i++) {
+            digits.value[i] = val[i] ?? "";
+        }
+    },
+    { immediate: true },
+);
+
+const updateValue = () => {
+    const joined = digits.value.join("");
+    emit("update:modelValue", joined);
+    if (joined.length === props.length && !digits.value.includes("")) {
+        emit("complete", joined);
+    }
+};
+
+const handleInput = (index: number, event: Event) => {
+    const input = event.target as HTMLInputElement;
+    const val = input.value;
+
+    if (val.length > 1) {
+        const cleaned = val.replace(/\D/g, "").slice(0, props.length);
+        const startIdx = cleaned.length >= props.length ? 0 : index;
+        for (let i = 0; i < props.length; i++) {
+            if (i >= startIdx && i - startIdx < cleaned.length) {
+                digits.value[i] = cleaned[i - startIdx];
+            }
+        }
+        updateValue();
+        const nextIndex = Math.min(startIdx + cleaned.length, props.length - 1);
+        nextTick(() => {
+            inputRefs.value[nextIndex]?.focus();
+        });
+        return;
+    }
+
+    const char = val.replace(/\D/g, "");
+    digits.value[index] = char;
+    updateValue();
+
+    if (char && index < props.length - 1) {
+        nextTick(() => {
+            inputRefs.value[index + 1]?.focus();
+            inputRefs.value[index + 1]?.select();
+        });
+    }
+};
+
+const handleKeyDown = (index: number, event: KeyboardEvent) => {
+    if (event.key === "Backspace") {
+        if (!digits.value[index] && index > 0) {
+            event.preventDefault();
+            digits.value[index - 1] = "";
+            updateValue();
+            inputRefs.value[index - 1]?.focus();
+        } else {
+            digits.value[index] = "";
+            updateValue();
+        }
+    } else if (event.key === "ArrowLeft" && index > 0) {
+        event.preventDefault();
+        inputRefs.value[index - 1]?.focus();
+        inputRefs.value[index - 1]?.select();
+    } else if (event.key === "ArrowRight" && index < props.length - 1) {
+        event.preventDefault();
+        inputRefs.value[index + 1]?.focus();
+        inputRefs.value[index + 1]?.select();
+    }
+};
+
+const handlePaste = (index: number, event: ClipboardEvent) => {
+    event.preventDefault();
+    const text = event.clipboardData?.getData("text") ?? "";
+    const cleaned = text.replace(/\D/g, "").slice(0, props.length);
+    if (!cleaned) return;
+
+    for (let i = 0; i < props.length; i++) {
+        digits.value[i] = cleaned[i] ?? "";
+    }
+    updateValue();
+
+    const targetIndex = Math.min(cleaned.length, props.length - 1);
+    inputRefs.value[targetIndex]?.focus();
+};
+
+const handleFocus = (index: number) => {
+    inputRefs.value[index]?.select();
+};
+
+onMounted(() => {
+    if (props.autofocus && !props.disabled) {
+        nextTick(() => {
+            const firstEmptyIndex = digits.value.findIndex((d) => !d);
+            const targetIndex = firstEmptyIndex === -1 ? 0 : firstEmptyIndex;
+            inputRefs.value[targetIndex]?.focus();
+        });
+    }
+});
+
+const focus = (index = 0) => {
+    inputRefs.value[index]?.focus();
+};
+
+defineExpose({ focus });
+</script>
+
+<template>
+    <div
+        class="relative flex flex-col self-stretch"
+        :class="center ? 'items-center' : 'items-start'"
+    >
+        <label
+            v-if="label"
+            :for="`${id}-0`"
+            class="block text-xs font-medium text-neutral-400"
+            :class="center ? 'mb-2 text-center' : 'mb-1.5 ml-3.5 text-left'"
+        >
+            {{ label }}
+        </label>
+
+        <input
+            type="hidden"
+            :name="name ?? id"
+            :value="modelValue"
+            autocomplete="one-time-code"
+        />
+
+        <div
+            class="flex items-center gap-2 sm:gap-3"
+            :class="center ? 'justify-center' : 'justify-start'"
+        >
+            <template v-for="(_, index) in length" :key="index">
+                <span
+                    v-if="index === Math.floor(length / 2)"
+                    class="select-none px-0.5 font-mono text-lg text-neutral-500"
+                >
+                    –
+                </span>
+
+                <input
+                    :id="`${id}-${index}`"
+                    ref="inputRefs"
+                    v-model="digits[index]"
+                    type="text"
+                    inputmode="numeric"
+                    pattern="[0-9]*"
+                    :maxlength="index === 0 ? 16 : 1"
+                    :disabled="disabled"
+                    :autocomplete="index === 0 ? 'one-time-code' : 'off'"
+                    class="h-12 w-10 select-all rounded-2xl border bg-black/50 text-center font-mono text-xl font-bold text-white shadow-(--shadow-pill-inset) backdrop-blur-md transition-all duration-200 focus:bg-black/70 focus:outline-none sm:h-14 sm:w-12 sm:text-2xl"
+                    :class="[
+                        errorMessage
+                            ? 'border-red-500/50 text-red-300 focus:border-red-500/80 focus:ring-1 focus:ring-red-500/30'
+                            : digits[index]
+                              ? 'border-white/25 bg-white/10'
+                              : 'border-white/10 hover:border-white/20 focus:border-white/30 focus:ring-1 focus:ring-white/20',
+                        disabled ? 'cursor-not-allowed opacity-40' : '',
+                    ]"
+                    @input="handleInput(index, $event)"
+                    @change="handleInput(index, $event)"
+                    @keydown="handleKeyDown(index, $event)"
+                    @paste="handlePaste(index, $event)"
+                    @focus="handleFocus(index)"
+                />
+            </template>
+        </div>
+
+        <transition
+            enter-active-class="transition ease-out duration-150"
+            enter-from-class="opacity-0 -translate-y-1"
+            enter-to-class="opacity-100 translate-y-0"
+        >
+            <div
+                v-if="errorMessage"
+                class="flex items-center gap-1.5 text-xs font-medium text-red-400"
+                :class="
+                    center
+                        ? 'mt-2 justify-center'
+                        : 'mt-1.5 ml-3.5 justify-start'
+                "
+            >
+                <AlertCircle :size="14" class="shrink-0" />
+                <span>{{ errorMessage }}</span>
+            </div>
+        </transition>
+    </div>
+</template>
diff --git a/resources/js/Components/PrimaryButton.vue b/resources/js/Components/PrimaryButton.vue
index 7404d3df..94311746 100644
--- a/resources/js/Components/PrimaryButton.vue
+++ b/resources/js/Components/PrimaryButton.vue
@@ -1,15 +1,51 @@
 <script setup lang="ts">
-import type { ButtonHTMLAttributes } from "vue";
+import { computed, ref, useAttrs, type ButtonHTMLAttributes } from "vue";
 
 interface Props {
     type?: ButtonHTMLAttributes["type"];
-    color?: "primary" | "secondary" | "gradient" | "danger";
+    color?: "pill" | "primary" | "secondary" | "gradient" | "danger";
     textSize?: string;
     padding?: string;
     disabled?: boolean;
+    fullWidth?: boolean;
 }
 
+defineOptions({
+    inheritAttrs: false,
+});
+
+const attrs = useAttrs();
+
+const props = withDefaults(defineProps<Props>(), {
+    type: "submit",
+    color: "pill",
+    textSize: "text-xs sm:text-sm",
+    padding: "px-6 py-2",
+    disabled: false,
+    fullWidth: false,
+});
+
+const buttonRef = ref<HTMLButtonElement | null>(null);
+
+const isFullWidth = computed(() => {
+    return (
+        props.fullWidth ||
+        Boolean(attrs.class && String(attrs.class).includes("w-full"))
+    );
+});
+
+const onContainerClick = (event: MouseEvent) => {
+    if (
+        event.target !== buttonRef.value &&
+        buttonRef.value &&
+        !props.disabled
+    ) {
+        buttonRef.value.click();
+    }
+};
+
 const buttonColor: Record<string, string> = {
+    pill: "pill-item-active hover:bg-white/20 text-white",
     primary:
         "bg-sinf-primary/80 hover:bg-sinf-primary text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(154,0,54,0.4)]",
     secondary:
@@ -18,23 +54,32 @@ const buttonColor: Record<string, string> = {
         "bg-linear-to-r from-sinf-primary/90 to-sinf-secondary/90 hover:from-sinf-primary hover:to-sinf-secondary text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(154,0,54,0.35)]",
     danger: "bg-red-500/80 hover:bg-red-500 text-white hover:border-white/20 hover:shadow-[0_4px_20px_rgba(239,68,68,0.4)]",
 };
-
-withDefaults(defineProps<Props>(), {
-    type: "submit",
-    color: "primary",
-    textSize: "text-sm sm:text-base",
-    padding: "px-6 py-2.5",
-    disabled: false,
-});
 </script>
 
 <template>
-    <button
-        :type="type"
-        :disabled="disabled"
-        class="pill-container pill-item cursor-pointer justify-center gap-1.5 font-semibold transition-all duration-200 active:scale-95 disabled:cursor-not-allowed disabled:opacity-40"
-        :class="[buttonColor[color] ?? buttonColor.primary, textSize, padding]"
+    <div
+        class="pill-container justify-center p-1.5 transition-all duration-200 select-none"
+        :class="[
+            isFullWidth ? 'flex w-full' : 'inline-flex',
+            disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer',
+            attrs.class,
+        ]"
+        @click="onContainerClick"
     >
-        <slot />
-    </button>
+        <button
+            ref="buttonRef"
+            v-bind="{ ...attrs, class: undefined }"
+            :type="type"
+            :disabled="disabled"
+            class="pill-item cursor-pointer justify-center gap-2 font-medium transition-all duration-200 active:scale-95 disabled:cursor-not-allowed disabled:opacity-40"
+            :class="[
+                isFullWidth ? 'w-full' : '',
+                buttonColor[color] ?? buttonColor.pill,
+                textSize,
+                padding,
+            ]"
+        >
+            <slot />
+        </button>
+    </div>
 </template>
diff --git a/resources/js/Components/TextInput.vue b/resources/js/Components/TextInput.vue
index edcbf6ab..5e83e2a8 100644
--- a/resources/js/Components/TextInput.vue
+++ b/resources/js/Components/TextInput.vue
@@ -3,10 +3,12 @@ import { Eye, EyeOff, AlertCircle } from "@lucide/vue";
 import { onMounted, ref, type InputHTMLAttributes, computed } from "vue";
 
 interface BaseProps {
+    name?: string;
     label?: string;
     id?: string;
     placeholder?: string;
     errorMessage?: string;
+    autocomplete?: string;
 }
 
 interface InputProps extends BaseProps {
@@ -91,6 +93,8 @@ const visible = ref(false);
                 :id="id"
                 ref="input"
                 v-model="value"
+                :name="name ?? id"
+                :autocomplete="autocomplete"
                 class="w-full cursor-pointer border-0 bg-transparent text-sm text-white shadow-none outline-none focus:border-transparent focus:shadow-none focus:ring-0 focus:outline-none"
                 v-bind="$attrs"
                 :multiple="props.multiple"
@@ -121,6 +125,8 @@ const visible = ref(false);
                 :id="id"
                 ref="input"
                 v-model="value"
+                :name="name ?? id"
+                :autocomplete="autocomplete"
                 class="min-h-24 w-full resize-y border-0 bg-transparent text-sm text-white placeholder-neutral-500 shadow-none outline-none focus:border-transparent focus:shadow-none focus:ring-0 focus:outline-none"
                 :placeholder="placeholder ?? ''"
                 v-bind="$attrs"
@@ -140,7 +146,9 @@ const visible = ref(false);
                 :id="id"
                 ref="input"
                 v-model="value"
+                :name="name ?? id"
                 :placeholder="placeholder ?? ''"
+                :autocomplete="autocomplete"
                 :type="type === 'password' && visible ? 'text' : type"
                 class="w-full border-0 bg-transparent text-sm text-white placeholder-neutral-500 shadow-none outline-none focus:border-transparent focus:shadow-none focus:ring-0 focus:outline-none"
                 v-bind="$attrs"
diff --git a/resources/js/Layouts/AuthLayout.vue b/resources/js/Layouts/AuthLayout.vue
new file mode 100644
index 00000000..9c7cdda1
--- /dev/null
+++ b/resources/js/Layouts/AuthLayout.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed, type Component } from "vue";
+import { route } from "ziggy-js";
+import AppLayout from "./AppLayout.vue";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
+
+interface Props {
+    title: string;
+    heading?: string;
+    subtitle?: string;
+    icon?: Component;
+    maxWidth?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+    heading: undefined,
+    subtitle: undefined,
+    icon: undefined,
+    maxWidth: "w-full max-w-md mx-auto lg:max-w-none",
+});
+
+const currentRouteName = computed(() => {
+    try {
+        if (route().current("login")) return "login";
+        if (route().current("register")) return "register";
+        return null;
+    } catch {
+        return null;
+    }
+});
+
+const showAuthTabs = computed(() => {
+    return (
+        currentRouteName.value === "login" ||
+        currentRouteName.value === "register"
+    );
+});
+
+const authTabs = computed<PillOption[]>(() => [
+    {
+        id: "login",
+        label: "Iniciar sessão",
+        href: route("login"),
+        active: currentRouteName.value === "login",
+    },
+    {
+        id: "register",
+        label: "Criar conta",
+        href: route("register"),
+        active: currentRouteName.value === "register",
+    },
+]);
+</script>
+
+<template>
+    <AppLayout :title="title">
+        <div
+            class="relative flex min-h-[calc(100vh-8rem)] items-center justify-center px-4 py-12 sm:px-6 lg:px-12 lg:py-16"
+        >
+            <div
+                class="mx-auto grid w-full max-w-6xl grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-16 xl:gap-24"
+            >
+                <div
+                    class="flex flex-col items-center text-center lg:items-start lg:text-left"
+                >
+                    <div
+                        v-if="icon"
+                        class="mb-6 flex h-16 w-16 items-center justify-center rounded-3xl border border-white/10 bg-black/40 shadow-[0_4px_30px_rgba(0,0,0,0.5),inset_0_1px_1px_rgba(255,255,255,0.1)] backdrop-blur-xl transition-transform duration-300 hover:scale-105 sm:h-20 sm:w-20"
+                    >
+                        <component
+                            :is="icon"
+                            class="h-8 w-8 text-white sm:h-10 sm:w-10"
+                        />
+                    </div>
+
+                    <h1
+                        class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl lg:text-5xl"
+                    >
+                        {{ heading ?? title }}
+                    </h1>
+
+                    <p
+                        v-if="subtitle"
+                        class="mt-3 max-w-lg text-sm leading-relaxed text-neutral-400 sm:text-base lg:text-lg"
+                    >
+                        {{ subtitle }}
+                    </p>
+                </div>
+
+                <div class="flex w-full flex-col items-center justify-center">
+                    <div
+                        v-if="showAuthTabs"
+                        class="mb-8 flex w-full justify-center"
+                    >
+                        <PillSelector
+                            :items="authTabs"
+                            size="md"
+                            :wrap="false"
+                        />
+                    </div>
+
+                    <div :class="maxWidth">
+                        <slot />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </AppLayout>
+</template>
diff --git a/resources/js/Layouts/CardLayout.vue b/resources/js/Layouts/CardLayout.vue
index d98d529c..cdfb14a0 100644
--- a/resources/js/Layouts/CardLayout.vue
+++ b/resources/js/Layouts/CardLayout.vue
@@ -1,11 +1,6 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { route } from "ziggy-js";
 import AppLayout from "./AppLayout.vue";
 import Card from "@/Components/UI/Card.vue";
-import PillSelector, {
-    type PillOption,
-} from "@/Components/UI/PillSelector.vue";
 
 interface Props {
     title: string;
@@ -19,38 +14,6 @@ withDefaults(defineProps<Props>(), {
     subtitle: undefined,
     maxWidth: "max-w-lg",
 });
-
-const currentRouteName = computed(() => {
-    try {
-        if (route().current("login")) return "login";
-        if (route().current("register")) return "register";
-        return null;
-    } catch {
-        return null;
-    }
-});
-
-const showAuthTabs = computed(() => {
-    return (
-        currentRouteName.value === "login" ||
-        currentRouteName.value === "register"
-    );
-});
-
-const authTabs = computed<PillOption[]>(() => [
-    {
-        id: "login",
-        label: "Iniciar sessão",
-        href: route("login"),
-        active: currentRouteName.value === "login",
-    },
-    {
-        id: "register",
-        label: "Criar conta",
-        href: route("register"),
-        active: currentRouteName.value === "register",
-    },
-]);
 </script>
 
 <template>
@@ -58,12 +21,8 @@ const authTabs = computed<PillOption[]>(() => [
         <div
             class="relative flex min-h-[calc(100vh-8rem)] flex-col items-center justify-center px-4 py-12 sm:py-16"
         >
-            <div v-if="showAuthTabs" class="mb-6 flex justify-center">
-                <PillSelector :items="authTabs" size="md" :wrap="false" />
-            </div>
-
             <div
-                v-else-if="heading || title"
+                v-if="heading || title"
                 class="mb-6 flex flex-col items-center text-center"
             >
                 <h1
diff --git a/resources/js/Pages/Auth/ConfirmPassword.vue b/resources/js/Pages/Auth/ConfirmPassword.vue
index 6ca8d72e..59477f84 100644
--- a/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -3,7 +3,8 @@ import { ref } from "vue";
 import { useForm } from "@inertiajs/vue3";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import AuthLayout from "@/Layouts/AuthLayout.vue";
+import { Lock } from "@lucide/vue";
 import { route } from "ziggy-js";
 
 const form = useForm({
@@ -23,16 +24,29 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout
+    <AuthLayout
         title="Confirmar password"
-        heading="Confirma a tua password"
-        subtitle="Esta é uma área protegida. Por favor, confirma a tua password antes de continuar."
+        heading="Área protegida"
+        subtitle="Esta é uma área segura da aplicação. Por favor, confirma a tua password antes de continuar."
+        :icon="Lock"
     >
-        <form class="flex flex-col gap-5" @submit.prevent="submit">
+        <form method="POST" class="flex flex-col gap-5" @submit.prevent="submit">
+            <!-- Hidden username field for password manager credential pairing -->
+            <input
+                type="text"
+                name="username"
+                :value="$page.props.auth?.user?.email ?? ''"
+                autocomplete="username"
+                class="sr-only"
+                tabindex="-1"
+                aria-hidden="true"
+            />
+
             <TextInput
                 id="password"
                 ref="passwordInput"
                 v-model="form.password"
+                name="password"
                 label="Password"
                 type="password"
                 required
@@ -41,10 +55,12 @@ const submit = () => {
                 :error-message="form.errors.password"
             />
 
-            <PrimaryButton :disabled="form.processing" class="mt-2 w-full">
-                <span v-if="form.processing">A confirmar...</span>
-                <span v-else>Confirmar</span>
-            </PrimaryButton>
+            <div class="mt-2 flex justify-center w-full">
+                <PrimaryButton :disabled="form.processing">
+                    <span v-if="form.processing">A confirmar...</span>
+                    <span v-else>Confirmar</span>
+                </PrimaryButton>
+            </div>
         </form>
-    </CardLayout>
+    </AuthLayout>
 </template>
diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index 7f331249..d51fe6c9 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -2,7 +2,8 @@
 import { Link, useForm } from "@inertiajs/vue3";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import AuthLayout from "@/Layouts/AuthLayout.vue";
+import { KeyRound } from "@lucide/vue";
 import { route } from "ziggy-js";
 
 interface Props {
@@ -21,45 +22,49 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout
+    <AuthLayout
         title="Repor password"
         heading="Recuperar password"
-        subtitle="Indica o teu email e enviaremos um link para recuperares o acesso"
+        subtitle="Indica o teu endereço de email associado à conta e enviaremos uma ligação segura para restabeleceres o acesso."
+        :icon="KeyRound"
     >
         <div
             v-if="status"
-            class="rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-3.5 text-center text-xs font-medium text-emerald-400"
+            class="mb-4 rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-3.5 text-center text-xs font-medium text-emerald-400"
         >
             {{ status }}
         </div>
 
-        <form class="flex flex-col gap-5" @submit.prevent="submit">
+        <form method="POST" class="flex flex-col gap-5" @submit.prevent="submit">
             <TextInput
                 id="email"
                 v-model="form.email"
+                name="email"
                 label="Email"
                 type="email"
                 required
                 autofocus
-                autocomplete="email"
+                autocomplete="username email"
                 placeholder="nome@exemplo.pt"
                 :error-message="form.errors.email"
             />
 
-            <PrimaryButton :disabled="form.processing" class="mt-1 w-full">
-                <span v-if="form.processing">A enviar link...</span>
-                <span v-else>Enviar email</span>
-            </PrimaryButton>
+            <div class="mt-2 flex justify-center w-full">
+                <PrimaryButton :disabled="form.processing">
+                    <span v-if="form.processing">A enviar link...</span>
+                    <span v-else>Enviar email</span>
+                </PrimaryButton>
+            </div>
 
-            <div class="pt-4 text-center text-xs text-neutral-400 sm:text-sm">
+            <div class="pt-2 text-center text-xs text-neutral-400 sm:text-sm">
                 Lembraste-te da password?
                 <Link
                     :href="route('login')"
-                    class="ml-1 font-semibold text-white underline underline-offset-4 transition-colors hover:text-neutral-200"
+                    class="ml-1 text-neutral-300 transition-colors hover:text-white"
                 >
                     Voltar ao início de sessão
                 </Link>
             </div>
         </form>
-    </CardLayout>
+    </AuthLayout>
 </template>
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 4079cd95..0f329423 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -3,7 +3,8 @@ import { Link, useForm } from "@inertiajs/vue3";
 import Checkbox from "@/Components/Checkbox.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import AuthLayout from "@/Layouts/AuthLayout.vue";
+import { LogIn } from "@lucide/vue";
 import { route } from "ziggy-js";
 
 interface Props {
@@ -33,23 +34,29 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Iniciar sessão">
+    <AuthLayout
+        title="Iniciar sessão"
+        heading="Bem-vindo de volta"
+        subtitle="Inicia sessão para acederes à tua conta, gerir a tua participação e explorar todas as atividades da SINF 2026."
+        :icon="LogIn"
+    >
         <div
             v-if="status"
-            class="rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-3.5 text-center text-xs font-medium text-emerald-400"
+            class="mb-4 rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-3.5 text-center text-xs font-medium text-emerald-400"
         >
             {{ status }}
         </div>
 
-        <form class="flex flex-col gap-4" @submit.prevent="submit">
+        <form method="POST" class="flex flex-col gap-4" @submit.prevent="submit">
             <TextInput
                 id="email"
                 v-model="form.email"
+                name="email"
                 label="Email"
                 type="email"
                 required
                 autofocus
-                autocomplete="email"
+                autocomplete="username email"
                 placeholder="nome@exemplo.pt"
                 :error-message="form.errors.email"
             />
@@ -57,6 +64,7 @@ const submit = () => {
             <TextInput
                 id="password"
                 v-model="form.password"
+                name="password"
                 label="Password"
                 type="password"
                 required
@@ -69,7 +77,7 @@ const submit = () => {
                 class="flex items-center justify-between gap-2 px-1 text-xs sm:text-sm"
             >
                 <label
-                    class="group flex cursor-pointer items-center gap-2.5 text-neutral-300 select-none"
+                    class="group flex cursor-pointer items-center gap-2.5 text-neutral-400 select-none"
                 >
                     <Checkbox v-model:checked="form.remember" name="remember" />
                     <span class="transition-colors group-hover:text-white"
@@ -86,10 +94,12 @@ const submit = () => {
                 </Link>
             </div>
 
-            <PrimaryButton :disabled="form.processing" class="mt-2 w-full">
-                <span v-if="form.processing">A entrar...</span>
-                <span v-else>Entrar</span>
-            </PrimaryButton>
+            <div class="mt-4 flex justify-center w-full">
+                <PrimaryButton :disabled="form.processing">
+                    <span v-if="form.processing">A entrar...</span>
+                    <span v-else>Entrar</span>
+                </PrimaryButton>
+            </div>
         </form>
-    </CardLayout>
+    </AuthLayout>
 </template>
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index a000b756..8be0ecc9 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/resources/js/Pages/Auth/Register.vue
@@ -3,7 +3,8 @@ import { useForm } from "@inertiajs/vue3";
 import Checkbox from "@/Components/Checkbox.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import AuthLayout from "@/Layouts/AuthLayout.vue";
+import { AlertCircle, UserPlus } from "@lucide/vue";
 import { route } from "ziggy-js";
 
 const form = useForm({
@@ -23,11 +24,17 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Registar">
-        <form class="flex flex-col gap-4" @submit.prevent="submit">
+    <AuthLayout
+        title="Registar"
+        heading="Cria a tua conta"
+        subtitle="Junta-te à Semana de Informática 2026 e aproveita palestras inspiradoras, workshops práticos e oportunidades únicas de networking."
+        :icon="UserPlus"
+    >
+        <form method="POST" class="flex flex-col gap-4" @submit.prevent="submit">
             <TextInput
                 id="name"
                 v-model="form.name"
+                name="name"
                 label="Nome completo"
                 type="text"
                 required
@@ -40,6 +47,7 @@ const submit = () => {
             <TextInput
                 id="email"
                 v-model="form.email"
+                name="email"
                 label="Email"
                 type="email"
                 required
@@ -52,6 +60,7 @@ const submit = () => {
                 <TextInput
                     id="password"
                     v-model="form.password"
+                    name="password"
                     label="Password"
                     type="password"
                     required
@@ -63,6 +72,7 @@ const submit = () => {
                 <TextInput
                     id="password_confirmation"
                     v-model="form.password_confirmation"
+                    name="password_confirmation"
                     label="Confirmar password"
                     type="password"
                     required
@@ -72,73 +82,113 @@ const submit = () => {
                 />
             </div>
 
-            <div class="space-y-2.5 pt-1">
-                <label
+            <div class="flex flex-col gap-3 pt-1">
+                <div
                     v-if="$page.props.jetstream.hasTermsAndPrivacyPolicyFeature"
-                    class="group flex cursor-pointer items-start gap-3 rounded-2xl border border-white/6 bg-black/30 p-3 text-xs leading-relaxed text-neutral-300 shadow-(--shadow-pill-inset) backdrop-blur-sm transition-all hover:border-white/15 hover:bg-black/45 sm:text-sm"
+                    class="relative flex flex-col items-stretch self-stretch"
                 >
-                    <Checkbox
-                        id="terms"
-                        v-model:checked="form.terms"
-                        name="terms"
-                        required
-                        class="mt-0.5 shrink-0"
-                    />
+                    <label
+                        class="pill-container group flex w-full cursor-pointer items-center gap-3.5 px-4 py-2.5 transition-all duration-200 hover:border-white/20 focus-within:border-white/20 focus-within:bg-black/65"
+                        :class="
+                            form.errors.terms
+                                ? 'border-red-500/50 focus-within:border-red-500/60 focus-within:ring-1 focus-within:ring-red-500/30'
+                                : ''
+                        "
+                    >
+                        <Checkbox
+                            id="terms"
+                            v-model:checked="form.terms"
+                            name="terms"
+                            required
+                            class="shrink-0"
+                        />
 
-                    <span>
-                        Concordo com os
-                        <a
-                            target="_blank"
-                            :href="route('terms.show')"
-                            class="font-medium text-white underline underline-offset-2 transition-colors hover:text-neutral-200"
-                            >Termos de Serviço</a
+                        <span
+                            class="text-xs leading-relaxed text-neutral-300 transition-colors group-hover:text-white sm:text-sm"
                         >
-                        e a
-                        <a
-                            target="_blank"
-                            :href="route('policy.show')"
-                            class="font-medium text-white underline underline-offset-2 transition-colors hover:text-neutral-200"
-                            >Política de Privacidade</a
-                        >.
-                    </span>
-                </label>
-                <span
-                    v-if="form.errors.terms"
-                    class="ml-3 block text-xs font-medium text-red-400"
-                >
-                    {{ form.errors.terms }}
-                </span>
+                            Concordo com os
+                            <a
+                                target="_blank"
+                                :href="route('terms.show')"
+                                class="font-medium text-white underline underline-offset-2 transition-colors hover:text-neutral-200"
+                                >Termos de Serviço</a
+                            >
+                            e a
+                            <a
+                                target="_blank"
+                                :href="route('policy.show')"
+                                class="font-medium text-white underline underline-offset-2 transition-colors hover:text-neutral-200"
+                                >Política de Privacidade</a
+                            >.
+                        </span>
+                    </label>
 
-                <label
-                    class="group flex cursor-pointer items-start gap-3 rounded-2xl border border-white/6 bg-black/30 p-3 text-xs leading-relaxed text-neutral-300 shadow-(--shadow-pill-inset) backdrop-blur-sm transition-all hover:border-white/15 hover:bg-black/45 sm:text-sm"
-                >
-                    <!-- We only need to have this checkbox marked as required for the purpose of this feature to be met,
-                    since it makes it so that every account that exists has agreed to this -->
-                    <Checkbox
-                        id="data_sharing_agreement"
-                        v-model:checked="form.data_sharing_agreement"
-                        name="data_sharing_agreement"
-                        required
-                        class="mt-0.5 shrink-0"
-                    />
+                    <transition
+                        enter-active-class="transition ease-out duration-150"
+                        enter-from-class="opacity-0 -translate-y-1"
+                        enter-to-class="opacity-100 translate-y-0"
+                    >
+                        <div
+                            v-if="form.errors.terms"
+                            class="mt-1.5 ml-3.5 flex items-center gap-1.5 text-xs font-medium text-red-400"
+                        >
+                            <AlertCircle :size="14" class="shrink-0" />
+                            <span>{{ form.errors.terms }}</span>
+                        </div>
+                    </transition>
+                </div>
 
-                    <span>
-                        Concordo em ter as minhas informações pessoais
-                        partilhadas com as empresas que participam na SINF.
-                    </span>
-                </label>
-                <span
-                    v-if="form.errors.data_sharing_agreement"
-                    class="ml-3 block text-xs font-medium text-red-400"
-                >
-                    {{ form.errors.data_sharing_agreement }}
-                </span>
+                <div class="relative flex flex-col items-stretch self-stretch">
+                    <label
+                        class="pill-container group flex w-full cursor-pointer items-center gap-3.5 px-4 py-2.5 transition-all duration-200 hover:border-white/20 focus-within:border-white/20 focus-within:bg-black/65"
+                        :class="
+                            form.errors.data_sharing_agreement
+                                ? 'border-red-500/50 focus-within:border-red-500/60 focus-within:ring-1 focus-within:ring-red-500/30'
+                                : ''
+                        "
+                    >
+                        <!-- We only need to have this checkbox marked as required for the purpose of this feature to be met,
+                        since it makes it so that every account that exists has agreed to this -->
+                        <Checkbox
+                            id="data_sharing_agreement"
+                            v-model:checked="form.data_sharing_agreement"
+                            name="data_sharing_agreement"
+                            required
+                            class="shrink-0"
+                        />
+
+                        <span
+                            class="text-xs leading-relaxed text-neutral-300 transition-colors group-hover:text-white sm:text-sm"
+                        >
+                            Concordo em ter as minhas informações pessoais
+                            partilhadas com as empresas que participam na SINF.
+                        </span>
+                    </label>
+
+                    <transition
+                        enter-active-class="transition ease-out duration-150"
+                        enter-from-class="opacity-0 -translate-y-1"
+                        enter-to-class="opacity-100 translate-y-0"
+                    >
+                        <div
+                            v-if="form.errors.data_sharing_agreement"
+                            class="mt-1.5 ml-3.5 flex items-center gap-1.5 text-xs font-medium text-red-400"
+                        >
+                            <AlertCircle :size="14" class="shrink-0" />
+                            <span>{{
+                                form.errors.data_sharing_agreement
+                            }}</span>
+                        </div>
+                    </transition>
+                </div>
             </div>
 
-            <PrimaryButton :disabled="form.processing" class="mt-2 w-full">
-                <span v-if="form.processing">A criar conta...</span>
-                <span v-else>Criar conta</span>
-            </PrimaryButton>
+            <div class="mt-4 flex justify-center w-full">
+                <PrimaryButton :disabled="form.processing">
+                    <span v-if="form.processing">A criar conta...</span>
+                    <span v-else>Criar conta</span>
+                </PrimaryButton>
+            </div>
         </form>
-    </CardLayout>
+    </AuthLayout>
 </template>
diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
index 34c78245..444187e5 100644
--- a/resources/js/Pages/Auth/ResetPassword.vue
+++ b/resources/js/Pages/Auth/ResetPassword.vue
@@ -2,7 +2,8 @@
 import { Link, useForm } from "@inertiajs/vue3";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import AuthLayout from "@/Layouts/AuthLayout.vue";
+import { KeyRound } from "@lucide/vue";
 import { route } from "ziggy-js";
 
 interface Props {
@@ -27,26 +28,29 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout
+    <AuthLayout
         title="Repor password"
-        heading="Repor a tua password"
-        subtitle="Escolhe uma nova password segura para a tua conta"
+        heading="Repor password"
+        subtitle="Escolhe uma nova password segura para garantir a proteção e acesso à tua conta."
+        :icon="KeyRound"
     >
-        <form class="flex flex-col gap-5" @submit.prevent="submit">
+        <form method="POST" class="flex flex-col gap-5" @submit.prevent="submit">
             <TextInput
                 id="email"
                 v-model="form.email"
+                name="email"
                 label="Email"
                 type="email"
                 required
                 autofocus
-                autocomplete="username"
+                autocomplete="username email"
                 :error-message="form.errors.email"
             />
 
             <TextInput
                 id="password"
                 v-model="form.password"
+                name="password"
                 label="Password"
                 type="password"
                 required
@@ -57,6 +61,7 @@ const submit = () => {
             <TextInput
                 id="password_confirmation"
                 v-model="form.password_confirmation"
+                name="password_confirmation"
                 label="Confirmar password"
                 type="password"
                 required
@@ -64,21 +69,21 @@ const submit = () => {
                 :error-message="form.errors.password_confirmation"
             />
 
-            <PrimaryButton :disabled="form.processing" class="mt-2 w-full">
-                <span v-if="form.processing">A repor...</span>
-                <span v-else>Repor password</span>
-            </PrimaryButton>
+            <div class="mt-2 flex justify-center w-full">
+                <PrimaryButton :disabled="form.processing">
+                    <span v-if="form.processing">A repor...</span>
+                    <span v-else>Repor password</span>
+                </PrimaryButton>
+            </div>
 
-            <div
-                class="mt-2 border-t border-white/8 pt-4 text-center text-xs text-neutral-400 sm:text-sm"
-            >
+            <div class="pt-2 text-center text-xs text-neutral-400 sm:text-sm">
                 <Link
                     :href="route('login')"
-                    class="font-semibold text-white underline underline-offset-4 transition-colors hover:text-neutral-200"
+                    class="text-neutral-300 transition-colors hover:text-white"
                 >
                     Voltar ao início de sessão
                 </Link>
             </div>
         </form>
-    </CardLayout>
+    </AuthLayout>
 </template>
diff --git a/resources/js/Pages/Auth/TwoFactorChallenge.vue b/resources/js/Pages/Auth/TwoFactorChallenge.vue
index 44984561..c7035912 100644
--- a/resources/js/Pages/Auth/TwoFactorChallenge.vue
+++ b/resources/js/Pages/Auth/TwoFactorChallenge.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { nextTick, ref } from "vue";
 import { useForm } from "@inertiajs/vue3";
+import CodeInput from "@/Components/CodeInput.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
+import AuthLayout from "@/Layouts/AuthLayout.vue";
+import { Smartphone, KeyRound } from "@lucide/vue";
 import { route } from "ziggy-js";
-import CardLayout from "@/Layouts/CardLayout.vue";
 
 const recovery = ref(false);
 
@@ -14,7 +16,7 @@ const form = useForm({
 });
 
 const recoveryCodeInput = ref<HTMLInputElement | null>(null);
-const codeInput = ref<HTMLInputElement | null>(null);
+const codeInput = ref<InstanceType<typeof CodeInput> | null>(null);
 
 const toggleRecovery = async () => {
     recovery.value = !recovery.value;
@@ -36,27 +38,26 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout
+    <AuthLayout
         title="Confirmar Two-Factor"
-        heading="Autenticação de Dois Fatores"
+        heading="Dois Fatores"
         :subtitle="
             !recovery
-                ? 'Confirma o acesso inserindo o código da tua aplicação de autenticação.'
-                : 'Confirma o acesso inserindo um dos teus códigos de recuperação de emergência.'
+                ? 'Insere o código de 6 dígitos gerado pela tua aplicação autenticadora para verificar a tua identidade.'
+                : 'Insere um dos teus códigos de recuperação de emergência gerados ao configurar a autenticação.'
         "
+        :icon="!recovery ? Smartphone : KeyRound"
     >
-        <form class="flex flex-col gap-5" @submit.prevent="submit">
-            <TextInput
+        <form method="POST" class="flex flex-col gap-6" @submit.prevent="submit">
+            <CodeInput
                 v-if="!recovery"
                 id="code"
                 ref="codeInput"
                 v-model="form.code"
-                label="Código"
-                type="text"
-                inputmode="numeric"
-                autofocus
-                autocomplete="one-time-code"
+                name="code"
                 :error-message="form.errors.code"
+                autofocus
+                @complete="submit"
             />
 
             <TextInput
@@ -64,28 +65,30 @@ const submit = () => {
                 id="recovery_code"
                 ref="recoveryCodeInput"
                 v-model="form.recovery_code"
+                name="recovery_code"
                 label="Código de recuperação"
                 type="text"
                 autofocus
                 autocomplete="one-time-code"
+                placeholder="abcde-12345"
                 :error-message="form.errors.recovery_code"
             />
 
-            <PrimaryButton :disabled="form.processing" class="mt-1 w-full">
-                <span v-if="form.processing">A verificar...</span>
-                <span v-else>Entrar</span>
-            </PrimaryButton>
+            <div v-if="recovery" class="flex justify-center w-full">
+                <PrimaryButton :disabled="form.processing">
+                    <span v-if="form.processing">A verificar...</span>
+                    <span v-else>Entrar</span>
+                </PrimaryButton>
+            </div>
 
-            <div
-                class="mt-2 border-t border-white/8 pt-4 text-center text-xs text-neutral-400 sm:text-sm"
-            >
+            <div class="text-center">
                 <button
                     type="button"
-                    class="cursor-pointer font-medium text-white underline underline-offset-4 transition-colors hover:text-neutral-200"
+                    class="cursor-pointer text-xs text-neutral-400 transition-colors hover:text-neutral-200 focus:outline-none"
                     @click.prevent="toggleRecovery"
                 >
                     <template v-if="!recovery">
-                        Utilizar código de recuperação de emergência
+                        Utilizar código de recuperação
                     </template>
                     <template v-else>
                         Utilizar código da aplicação autenticadora
@@ -93,5 +96,5 @@ const submit = () => {
                 </button>
             </div>
         </form>
-    </CardLayout>
+    </AuthLayout>
 </template>
diff --git a/resources/js/Pages/Auth/VerifyEmail.vue b/resources/js/Pages/Auth/VerifyEmail.vue
index 2312a1ff..48e45d42 100644
--- a/resources/js/Pages/Auth/VerifyEmail.vue
+++ b/resources/js/Pages/Auth/VerifyEmail.vue
@@ -2,8 +2,9 @@
 import { computed } from "vue";
 import { Link, useForm } from "@inertiajs/vue3";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
+import AuthLayout from "@/Layouts/AuthLayout.vue";
+import { MailCheck } from "@lucide/vue";
 import { route } from "ziggy-js";
-import CardLayout from "@/Layouts/CardLayout.vue";
 
 interface Props {
     status: string;
@@ -23,27 +24,30 @@ const verificationLinkSent = computed(
 </script>
 
 <template>
-    <CardLayout
+    <AuthLayout
         title="Verificar email"
         heading="Verifica o teu email"
-        subtitle="Antes de continuar, clica no link de confirmação que enviámos para o teu email. Se não o recebeste, podemos enviar outro."
+        subtitle="Enviámos uma ligação de confirmação para o teu endereço de email. Clica nela para concluir o registo e ativar a tua conta."
+        :icon="MailCheck"
     >
         <div
             v-if="verificationLinkSent"
-            class="rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-3.5 text-center text-xs font-medium text-emerald-400"
+            class="mb-4 rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-3.5 text-center text-xs font-medium text-emerald-400"
         >
             Um novo link de verificação foi enviado para o endereço de email
             associado à tua conta.
         </div>
 
-        <form class="flex flex-col gap-5" @submit.prevent="submit">
-            <PrimaryButton :disabled="form.processing" class="w-full">
-                <span v-if="form.processing">A reenviar...</span>
-                <span v-else>Reenviar email de verificação</span>
-            </PrimaryButton>
+        <form method="POST" class="flex flex-col gap-5" @submit.prevent="submit">
+            <div class="flex justify-center w-full">
+                <PrimaryButton :disabled="form.processing">
+                    <span v-if="form.processing">A reenviar...</span>
+                    <span v-else>Reenviar email de verificação</span>
+                </PrimaryButton>
+            </div>
 
             <div
-                class="mt-2 flex items-center justify-between border-t border-white/8 pt-4 text-xs sm:text-sm"
+                class="mt-2 flex items-center justify-between pt-2 text-xs sm:text-sm"
             >
                 <Link
                     :href="route('profile.show')"
@@ -62,5 +66,5 @@ const verificationLinkSent = computed(
                 </Link>
             </div>
         </form>
-    </CardLayout>
+    </AuthLayout>
 </template>
diff --git a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
index 953679ac..c2ef2502 100644
--- a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
+++ b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
@@ -4,7 +4,7 @@ import { router, useForm, usePage } from "@inertiajs/vue3";
 import ActionSection from "@/Components/ActionSection.vue";
 import ConfirmsPassword from "@/Components/ConfirmsPassword.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import CodeInput from "@/Components/CodeInput.vue";
 import { route } from "ziggy-js";
 import axios from "axios";
 
@@ -180,18 +180,15 @@ const disableTwoFactorAuthentication = () => {
                         </p>
                     </div>
 
-                    <TextInput
+                    <CodeInput
                         v-if="confirming"
                         id="code"
                         v-model="confirmationForm.code"
-                        type="text"
-                        name="code"
                         label="Code"
-                        inputmode="numeric"
-                        autofocus
-                        autocomplete="one-time-code"
+                        class="mt-4"
+                        :center="false"
                         :error-message="confirmationForm.errors.code"
-                        @keyup.enter="confirmTwoFactorAuthentication"
+                        @complete="confirmTwoFactorAuthentication"
                     />
                 </div>
 

From 9aa771ce152648e10c3aa28457224a9ef404d066 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Thu, 3 Sep 2026 21:29:18 +0100
Subject: [PATCH 12/33] feat: edit profile page

---
 resources/js/Components/ActionMessage.vue     |  21 -
 resources/js/Components/ActionSection.vue     |  20 -
 resources/js/Components/ConfirmsPassword.vue  |  38 +-
 resources/js/Components/DialogModal.vue       |  34 --
 resources/js/Components/FormSection.vue       |  42 --
 resources/js/Components/Home/InfoPopup.vue    |  43 +-
 resources/js/Components/Home/Sponsor.vue      |  80 ++-
 resources/js/Components/Modal.vue             |  97 ----
 .../js/Components/Profile/ProfilePicture.vue  |  63 +-
 resources/js/Components/Profile/QRCode.vue    |  49 +-
 resources/js/Components/SectionBorder.vue     |   7 -
 resources/js/Components/SectionTitle.vue      |  13 -
 resources/js/Components/Shop/ShopItem.vue     |  25 +-
 resources/js/Components/TextInput.vue         |   4 +-
 resources/js/Components/UI/Modal.vue          | 140 +++++
 resources/js/Layouts/CardLayout.vue           |  10 +-
 resources/js/Pages/CRUD/Competition/Edit.vue  | 136 +++--
 resources/js/Pages/Profile/Edit.vue           | 137 ++++-
 .../Pages/Profile/Partials/DeleteUserForm.vue | 130 +++--
 .../LogoutOtherBrowserSessionsForm.vue        | 213 +++----
 .../Partials/TwoFactorAuthenticationForm.vue  | 394 +++++++------
 .../Profile/Partials/UpdatePasswordForm.vue   |  99 ++--
 .../Partials/UpdateProfileInformationForm.vue | 541 ++++++++++++++----
 23 files changed, 1296 insertions(+), 1040 deletions(-)
 delete mode 100644 resources/js/Components/ActionMessage.vue
 delete mode 100644 resources/js/Components/ActionSection.vue
 delete mode 100644 resources/js/Components/DialogModal.vue
 delete mode 100644 resources/js/Components/FormSection.vue
 delete mode 100644 resources/js/Components/Modal.vue
 delete mode 100644 resources/js/Components/SectionBorder.vue
 delete mode 100644 resources/js/Components/SectionTitle.vue
 create mode 100644 resources/js/Components/UI/Modal.vue

diff --git a/resources/js/Components/ActionMessage.vue b/resources/js/Components/ActionMessage.vue
deleted file mode 100644
index 6694b7f8..00000000
--- a/resources/js/Components/ActionMessage.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-interface Props {
-    on?: boolean;
-}
-
-defineProps<Props>();
-</script>
-
-<template>
-    <div>
-        <transition
-            leave-active-class="transition ease-in duration-1000"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
-        >
-            <div v-show="on" class="text-2023-teal text-sm">
-                <slot />
-            </div>
-        </transition>
-    </div>
-</template>
diff --git a/resources/js/Components/ActionSection.vue b/resources/js/Components/ActionSection.vue
deleted file mode 100644
index 1649ffed..00000000
--- a/resources/js/Components/ActionSection.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import SectionTitle from "./SectionTitle.vue";
-</script>
-
-<template>
-    <div class="flex flex-col">
-        <SectionTitle>
-            <template #title>
-                <slot name="title" />
-            </template>
-            <template #description>
-                <slot name="description" />
-            </template>
-        </SectionTitle>
-
-        <div class="bg-2025-blue mt-5 px-4 py-5 sm:p-6 md:mt-0">
-            <slot name="content" />
-        </div>
-    </div>
-</template>
diff --git a/resources/js/Components/ConfirmsPassword.vue b/resources/js/Components/ConfirmsPassword.vue
index bf22ad99..b9f3bfc7 100644
--- a/resources/js/Components/ConfirmsPassword.vue
+++ b/resources/js/Components/ConfirmsPassword.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive, nextTick } from "vue";
-import DialogModal from "./DialogModal.vue";
+import Modal from "@/Components/UI/Modal.vue";
 import PrimaryButton from "./PrimaryButton.vue";
 import TextInput from "./TextInput.vue";
 import axios from "axios";
@@ -19,9 +19,9 @@ interface Emits {
 const emit = defineEmits<Emits>();
 
 withDefaults(defineProps<Props>(), {
-    title: "Confirmar Password",
-    content: "Para a tua segurança, confirma a tua senha para continuar.",
-    button: "Confirm",
+    title: "Confirmar Palavra-passe",
+    content: "Para a tua segurança, confirma a tua palavra-passe para continuar.",
+    button: "Confirmar",
 });
 
 const confirmingPassword = ref(false);
@@ -40,7 +40,6 @@ const startConfirmingPassword = () => {
             emit("confirmed");
         } else {
             confirmingPassword.value = true;
-
             setTimeout(() => passwordInput.value?.focus(), 250);
         }
     });
@@ -55,7 +54,6 @@ const confirmPassword = () => {
         })
         .then(() => {
             form.processing = false;
-
             closeModal();
             nextTick().then(() => emit("confirmed"));
         })
@@ -79,30 +77,31 @@ const closeModal = () => {
             <slot />
         </span>
 
-        <DialogModal :show="confirmingPassword" @close="closeModal">
-            <template #title>
-                {{ title }}
-            </template>
-
-            <template #content>
-                {{ content }}
-
+        <Modal
+            v-model="confirmingPassword"
+            max-width="md"
+            :title="title"
+            :description="content"
+            @close="closeModal"
+        >
+            <div class="pt-2">
                 <TextInput
                     ref="passwordInput"
                     v-model="form.password"
                     type="password"
-                    label="Password"
+                    label="Palavra-passe"
                     autocomplete="current-password"
                     :error-message="form.error"
                     @keyup.enter="confirmPassword"
                 />
-            </template>
+            </div>
 
             <template #footer>
-                <PrimaryButton @click="closeModal"> Cancel </PrimaryButton>
+                <PrimaryButton color="pill" @click="closeModal">
+                    Cancelar
+                </PrimaryButton>
 
                 <PrimaryButton
-                    class="ml-3"
                     :class="{ 'opacity-25': form.processing }"
                     :disabled="form.processing"
                     @click="confirmPassword"
@@ -110,6 +109,7 @@ const closeModal = () => {
                     {{ button }}
                 </PrimaryButton>
             </template>
-        </DialogModal>
+        </Modal>
     </span>
 </template>
+
diff --git a/resources/js/Components/DialogModal.vue b/resources/js/Components/DialogModal.vue
deleted file mode 100644
index ae5ce0be..00000000
--- a/resources/js/Components/DialogModal.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import Modal, { type Props, type Emits } from "./Modal.vue";
-
-defineProps<Props>();
-
-const emit = defineEmits<Emits>();
-
-const close = () => emit("close");
-</script>
-
-<template>
-    <Modal
-        :show="show"
-        :max-width="maxWidth"
-        :closeable="closeable"
-        @close="close"
-    >
-        <div class="px-6 py-4">
-            <div class="text-lg font-bold text-white">
-                <slot name="title" />
-            </div>
-
-            <div class="mt-4 space-y-4 text-sm text-white">
-                <slot name="content" />
-            </div>
-        </div>
-
-        <div
-            class="bg-2025-blue flex flex-row justify-end px-4 py-4 text-right"
-        >
-            <slot name="footer" />
-        </div>
-    </Modal>
-</template>
diff --git a/resources/js/Components/FormSection.vue b/resources/js/Components/FormSection.vue
deleted file mode 100644
index 392d5edb..00000000
--- a/resources/js/Components/FormSection.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { computed, useSlots } from "vue";
-import SectionTitle from "./SectionTitle.vue";
-
-interface Emits {
-    (event: "submitted"): void;
-}
-
-defineEmits<Emits>();
-
-const hasActions = computed(() => !!useSlots().actions);
-</script>
-
-<template>
-    <div class="flex flex-col">
-        <SectionTitle class="">
-            <template #title>
-                <slot name="title" />
-            </template>
-            <template #description>
-                <slot name="description" />
-            </template>
-        </SectionTitle>
-
-        <div class="mt-5 md:mt-0">
-            <form @submit.prevent="$emit('submitted')">
-                <div class="rounded-xs px-4 py-5 sm:p-6">
-                    <div class="flex flex-col gap-5">
-                        <slot name="form" />
-                    </div>
-                </div>
-
-                <div
-                    v-if="hasActions"
-                    class="flex items-center justify-end px-4 py-3 text-right sm:px-6"
-                >
-                    <slot name="actions" />
-                </div>
-            </form>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/Components/Home/InfoPopup.vue b/resources/js/Components/Home/InfoPopup.vue
index 63e23904..56f1ab73 100644
--- a/resources/js/Components/Home/InfoPopup.vue
+++ b/resources/js/Components/Home/InfoPopup.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { VueFinalModal } from "vue-final-modal";
-import "vue-final-modal/style.css";
+import Modal from "@/Components/UI/Modal.vue";
 import { inject, onMounted, ref } from "vue";
 import VueCookies from "vue-cookies";
 import { route } from "ziggy-js";
@@ -29,28 +28,26 @@ const enroll = () => {
 </script>
 
 <template>
-    <VueFinalModal
-        ref="modal"
+    <Modal
         v-model="options.modelValue"
-        class="flex items-center justify-center"
-        content-class="max-w-xl mx-4 p-4 bg-2025-blue border border-black border-solid flex relative justify-center items-center flex-col gap-8 rounded-lg"
-        @closed="cacheSeenInfo()"
+        max-width="xl"
+        @closed="cacheSeenInfo"
     >
         <div
-            class="flex flex-col items-center gap-6 text-center text-xl text-white"
+            class="flex flex-col items-center gap-6 text-center text-lg text-white"
         >
-            <img class="w-80 p-6" src="images/sinf logo.png" />
-            <p>
-                A <span class="text-2025-blue-dark font-bold">SINF</span> está
-                mais interactiva do que nunca!
+            <img class="w-72 p-4" src="/images/sinf logo.png" alt="SINF" />
+            <p class="font-medium">
+                A <span class="text-sinf-primary-light font-bold">SINF</span> está
+                mais interativa do que nunca!
             </p>
-            <ul class="flex flex-col items-center">
+            <ul class="flex flex-col items-center gap-2 text-sm text-neutral-300">
                 <li>
                     Participa em
                     <a
                         :href="route('program', { day: 6 })"
                         target="_blank"
-                        class="text-2025-blue-dark underline"
+                        class="text-sinf-secondary-light underline hover:text-white"
                         >Workshops e Palestras</a
                     >
                 </li>
@@ -59,7 +56,7 @@ const enroll = () => {
                     <a
                         :href="route('program', { day: 1 })"
                         target="_blank"
-                        class="text-2025-blue-dark underline"
+                        class="text-sinf-secondary-light underline hover:text-white"
                         >Bancas de Empresas</a
                     >
                 </li>
@@ -68,26 +65,28 @@ const enroll = () => {
                     <a
                         :href="route('program', { day: 3 })"
                         target="_blank"
-                        class="text-2025-blue-dark underline"
+                        class="text-sinf-secondary-light underline hover:text-white"
                         >Competições de CTF e Programação</a
                     >
                 </li>
             </ul>
-            <p>
+            <p class="text-sm text-neutral-300">
                 Ganha pontos e troca-os por prémios na
                 <a
                     :href="route('shop.show')"
                     target="_blank"
-                    class="text-2025-blue-dark underline"
+                    class="text-sinf-secondary-light underline hover:text-white"
                     >Loja</a
                 >
             </p>
             <PrimaryButton
-                text-size="text-2xl"
-                padding="sm:px-8"
+                color="gradient"
+                text-size="text-base"
+                padding="px-8 py-2.5"
                 @click="enroll"
-                >Inscrever-me</PrimaryButton
             >
+                Inscrever-me
+            </PrimaryButton>
         </div>
-    </VueFinalModal>
+    </Modal>
 </template>
diff --git a/resources/js/Components/Home/Sponsor.vue b/resources/js/Components/Home/Sponsor.vue
index 605ccdbf..f49cea6e 100644
--- a/resources/js/Components/Home/Sponsor.vue
+++ b/resources/js/Components/Home/Sponsor.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import type { CompanyUser } from "@/Types/User";
 import { ref } from "vue";
-import { VueFinalModal } from "vue-final-modal";
-import "vue-final-modal/style.css";
-
+import Modal from "@/Components/UI/Modal.vue";
 import Card from "@/Components/UI/Card.vue";
-import { X, ExternalLink } from "@lucide/vue";
+import { ExternalLink } from "@lucide/vue";
 
 const options = ref({
     modelValue: false,
@@ -32,53 +30,41 @@ defineProps<Props>();
         />
     </Card>
 
-    <VueFinalModal
+    <Modal
         v-model="options.modelValue"
-        class="z-50 flex items-center justify-center p-4"
-        overlay-class="bg-black/75 backdrop-blur-sm"
-        content-class="
-            relative w-full max-w-lg rounded-3xl border border-white/10
-            bg-[#111215] p-6 sm:p-8 text-white backdrop-blur-2xl shadow-none
-            flex flex-col items-center gap-6
-        "
+        max-width="lg"
     >
-        <button
-            type="button"
-            class="pill-container absolute top-4 right-4 h-8 w-8 justify-center text-neutral-400 transition-colors hover:text-white"
-            aria-label="Close modal"
-            @click="options.modelValue = false"
-        >
-            <X :size="16" />
-        </button>
+        <div class="flex flex-col items-center gap-6">
+            <img
+                :src="company?.profile_photo_url"
+                :alt="company?.name"
+                class="mt-2 h-16 max-w-[70%] object-contain"
+            />
 
-        <img
-            :src="company?.profile_photo_url"
-            :alt="company?.name"
-            class="mt-2 h-16 max-w-[70%] object-contain"
-        />
+            <div class="flex w-full flex-col items-center gap-4 text-center">
+                <div class="flex flex-wrap items-center justify-center gap-3">
+                    <h3 class="text-xl font-bold text-white">
+                        {{ company?.name }}
+                    </h3>
+                    <a
+                        v-if="company?.usertype?.social_media?.website"
+                        :href="company.usertype.social_media.website"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="pill-container pill-item gap-1.5 px-3 py-1 text-xs font-medium text-neutral-300 hover:text-white"
+                    >
+                        <span>Website</span>
+                        <ExternalLink :size="14" />
+                    </a>
+                </div>
 
-        <div class="flex w-full flex-col items-center gap-4 text-center">
-            <div class="flex flex-wrap items-center justify-center gap-3">
-                <h3 class="text-xl font-bold text-white">
-                    {{ company?.name }}
-                </h3>
-                <a
-                    v-if="company?.usertype?.social_media?.website"
-                    :href="company.usertype.social_media.website"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="pill-container pill-item gap-1.5 px-3 py-1 text-xs font-medium text-neutral-300 hover:text-white"
-                >
-                    <span>Website</span>
-                    <ExternalLink :size="14" />
-                </a>
+                <div
+                    v-if="company?.usertype?.description_html"
+                    class="prose prose-invert prose-sm max-h-72 w-full overflow-y-auto px-2 text-justify leading-relaxed text-neutral-300"
+                    v-html="company?.usertype?.description_html"
+                />
             </div>
-
-            <div
-                v-if="company?.usertype?.description_html"
-                class="prose prose-invert prose-sm max-h-72 w-full overflow-y-auto px-2 text-justify leading-relaxed text-neutral-300"
-                v-html="company?.usertype?.description_html"
-            />
         </div>
-    </VueFinalModal>
+    </Modal>
 </template>
+
diff --git a/resources/js/Components/Modal.vue b/resources/js/Components/Modal.vue
deleted file mode 100644
index ba617bfb..00000000
--- a/resources/js/Components/Modal.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, watch } from "vue";
-
-export interface Props {
-    show: boolean;
-    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl";
-    closeable?: boolean;
-}
-
-export interface Emits {
-    (event: "close"): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    show: false,
-    maxWidth: "2xl",
-    closeable: true,
-});
-
-const emit = defineEmits<Emits>();
-
-watch(
-    () => props.show,
-    () => (document.body.style.overflow = props.show ? "hidden" : ""),
-);
-
-const close = () => {
-    if (props.closeable) emit("close");
-};
-
-const closeOnEscape = (e: KeyboardEvent) => {
-    if (e.key === "Escape" && props.show) close();
-};
-
-onMounted(() => document.addEventListener("keydown", closeOnEscape));
-
-onUnmounted(() => {
-    document.removeEventListener("keydown", closeOnEscape);
-    document.body.style.overflow = "";
-});
-
-const maxWidthClass = computed(() => {
-    return {
-        sm: "sm:max-w-sm",
-        md: "sm:max-w-md",
-        lg: "sm:max-w-lg",
-        xl: "sm:max-w-xl",
-        "2xl": "sm:max-w-2xl",
-    }[props.maxWidth];
-});
-</script>
-
-<template>
-    <teleport to="body">
-        <transition leave-active-class="duration-200">
-            <div
-                v-show="show"
-                class="fixed inset-0 z-50 overflow-y-auto px-4 py-6 sm:px-0"
-                scroll-region
-            >
-                <transition
-                    enter-active-class="ease-out duration-300"
-                    enter-from-class="opacity-0"
-                    enter-to-class="opacity-100"
-                    leave-active-class="ease-in duration-200"
-                    leave-from-class="opacity-100"
-                    leave-to-class="opacity-0"
-                >
-                    <div
-                        v-show="show"
-                        class="fixed inset-0 transform transition-all"
-                        @click="close"
-                    >
-                        <div class="absolute inset-0 bg-gray-500 opacity-75" />
-                    </div>
-                </transition>
-
-                <transition
-                    enter-active-class="ease-out duration-300"
-                    enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                    enter-to-class="opacity-100 translate-y-0 sm:scale-100"
-                    leave-active-class="ease-in duration-200"
-                    leave-from-class="opacity-100 translate-y-0 sm:scale-100"
-                    leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
-                    <div
-                        v-show="show"
-                        class="bg-2025-blue mb-6 transform overflow-hidden rounded-lg transition-all sm:mx-auto sm:w-full"
-                        :class="maxWidthClass"
-                    >
-                        <slot v-if="show" />
-                    </div>
-                </transition>
-            </div>
-        </transition>
-    </teleport>
-</template>
diff --git a/resources/js/Components/Profile/ProfilePicture.vue b/resources/js/Components/Profile/ProfilePicture.vue
index 2288bef8..5b61b38d 100644
--- a/resources/js/Components/Profile/ProfilePicture.vue
+++ b/resources/js/Components/Profile/ProfilePicture.vue
@@ -1,45 +1,11 @@
 <script setup lang="ts">
-import { ref } from "vue";
 import type { User } from "@/Types/User";
-import { useForm } from "@inertiajs/vue3";
-import { route } from "ziggy-js";
 
 interface Props {
     item: User | undefined;
 }
 
-const props = defineProps<Props>();
-
-const form = useForm({
-    _method: "PUT",
-    name: props.item?.name,
-    email: props.item?.email,
-    photo: null as File | null,
-});
-
-const photoInput = ref<HTMLInputElement | null>(null);
-
-const selectNewPhoto = () => {
-    photoInput.value?.click();
-};
-
-const uploadNewPhoto = () => {
-    const photo = photoInput.value?.files?.[0];
-    if (photo) {
-        form.photo = photoInput.value?.files?.[0] ?? null;
-        form.post(route("user-profile-information.update"), {
-            errorBag: "updateProfileInformation",
-            preserveScroll: true,
-            onSuccess: () => clearPhotoFileInput,
-        });
-    }
-};
-
-const clearPhotoFileInput = () => {
-    if (photoInput.value?.value) {
-        photoInput.value.value = "";
-    }
-};
+defineProps<Props>();
 </script>
 
 <template>
@@ -53,31 +19,6 @@ const clearPhotoFileInput = () => {
                 class="h-full w-full object-cover"
             />
         </div>
-        <input
-            ref="photoInput"
-            type="file"
-            class="hidden"
-            accept="image/*"
-            @change="uploadNewPhoto"
-        />
-        <button
-            v-if="$page.props.auth.user?.id == item?.id"
-            @click.prevent="selectNewPhoto"
-        >
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="w-6 text-white"
-                viewBox="0 0 512 512"
-            >
-                <path
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="48"
-                    d="M56 262 v150 h400 M456 262 v150 M256 312 v-250 l-80 80 M256 62 l80 80"
-                />
-            </svg>
-        </button>
     </div>
 </template>
+
diff --git a/resources/js/Components/Profile/QRCode.vue b/resources/js/Components/Profile/QRCode.vue
index 12999ac3..3d22dd17 100644
--- a/resources/js/Components/Profile/QRCode.vue
+++ b/resources/js/Components/Profile/QRCode.vue
@@ -3,13 +3,14 @@ import type Participant from "@/Types/Participant";
 import { router } from "@inertiajs/vue3";
 import { QrCode } from "@lucide/vue";
 import { computed, ref } from "vue";
-import { VueFinalModal } from "vue-final-modal";
-import "vue-final-modal/style.css";
+import Modal from "@/Components/UI/Modal.vue";
 import { route } from "ziggy-js";
 
-const props = defineProps<{
+interface Props {
     participant: Participant;
-}>();
+}
+
+const props = defineProps<Props>();
 
 const participant = computed(() => props.participant);
 
@@ -31,28 +32,36 @@ const showQRCode = () => {
 
 <template>
     <button
+        type="button"
         class="text-text-color flex w-fit cursor-pointer items-center justify-center rounded-full hover:opacity-80"
+        aria-label="Ver QR Code"
         @click="showQRCode"
     >
         <QrCode :size="22" />
     </button>
-    <VueFinalModal
+
+    <Modal
         v-model="modalOpen"
-        class="flex items-center justify-center"
-        content-class="max-w-xl min-w-[20em] mx-4 p-8 pt-12 gap-8 bg-white border border-black border-solid flex relative justify-center items-center flex-col"
+        max-width="md"
+        title="Código do Participante"
+        description="Apresenta este código QR ou código numérico nas bancas e eventos."
     >
-        <span v-if="loading" class="text-lg">A gerar...</span>
-        <template v-else>
-            <div v-html="participant.quest_qr_code"></div>
-            <span class="text-2023-teal-dark font-mono font-bold">
-                {{ participant.quest_code }}
-            </span>
-        </template>
-    </VueFinalModal>
+        <div class="flex flex-col items-center justify-center gap-6 py-2">
+            <span v-if="loading" class="text-sm text-neutral-400">A gerar código...</span>
+            <template v-else>
+                <div
+                    v-if="participant.quest_qr_code"
+                    class="rounded-2xl bg-white p-4 shadow-lg flex items-center justify-center"
+                    v-html="participant.quest_qr_code"
+                />
+                <div
+                    v-if="participant.quest_code"
+                    class="pill-container px-4 py-1.5 font-mono text-base font-bold text-white tracking-widest"
+                >
+                    {{ participant.quest_code }}
+                </div>
+            </template>
+        </div>
+    </Modal>
 </template>
 
-<style>
-.vfm__overlay {
-    background-color: rgba(248, 245, 231, 0.5);
-}
-</style>
diff --git a/resources/js/Components/SectionBorder.vue b/resources/js/Components/SectionBorder.vue
deleted file mode 100644
index cf81fa76..00000000
--- a/resources/js/Components/SectionBorder.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-    <div class="hidden sm:block">
-        <div class="py-8">
-            <div class="border-t border-gray-200 dark:border-gray-700" />
-        </div>
-    </div>
-</template>
diff --git a/resources/js/Components/SectionTitle.vue b/resources/js/Components/SectionTitle.vue
deleted file mode 100644
index 540a2106..00000000
--- a/resources/js/Components/SectionTitle.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-    <div class="flex justify-between">
-        <section class="px-4 sm:px-0">
-            <h3 class="text-2023-teal text-lg font-medium">
-                <slot name="title" />
-            </h3>
-
-            <p class="text-2023-teal-dark mt-1 text-sm">
-                <slot name="description" />
-            </p>
-        </section>
-    </div>
-</template>
diff --git a/resources/js/Components/Shop/ShopItem.vue b/resources/js/Components/Shop/ShopItem.vue
index 1d988445..f67677c1 100644
--- a/resources/js/Components/Shop/ShopItem.vue
+++ b/resources/js/Components/Shop/ShopItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
-import { VueFinalModal } from "vue-final-modal";
-import "vue-final-modal/style.css";
+import Modal from "@/Components/UI/Modal.vue";
 import { router } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import type { BuyableProduct } from "@/Types/ShopPage";
@@ -9,7 +8,7 @@ import Card from "@/Components/UI/Card.vue";
 import PillSelector, {
     type PillOption,
 } from "@/Components/UI/PillSelector.vue";
-import { X, ShoppingBag } from "@lucide/vue";
+import { ShoppingBag } from "@lucide/vue";
 
 interface Props {
     product: BuyableProduct;
@@ -180,24 +179,10 @@ const redeemProduct = (enrollmentId: number) => {
         </template>
     </Card>
 
-    <VueFinalModal
+    <Modal
         v-model="modalOpen"
-        class="z-50 flex items-center justify-center p-4"
-        overlay-class="bg-black/80 backdrop-blur-sm"
-        content-class="
-            relative w-full max-w-lg rounded-3xl border border-white/10
-            bg-[#111215] p-6 sm:p-7 text-white
-            flex flex-col gap-6 max-h-[90vh] overflow-hidden
-        "
+        max-width="lg"
     >
-        <button
-            type="button"
-            class="pill-container absolute top-4 right-4 z-10 h-8 w-8 cursor-pointer justify-center text-neutral-400 transition-colors hover:text-white"
-            aria-label="Fechar"
-            @click="modalOpen = false"
-        >
-            <X :size="16" />
-        </button>
 
         <div
             class="flex items-center gap-4 rounded-2xl border border-white/8 bg-white/5 p-3.5 pr-10 sm:p-4"
@@ -475,5 +460,5 @@ const redeemProduct = (enrollmentId: number) => {
                 }}
             </div>
         </div>
-    </VueFinalModal>
+    </Modal>
 </template>
diff --git a/resources/js/Components/TextInput.vue b/resources/js/Components/TextInput.vue
index 5e83e2a8..93ea9d40 100644
--- a/resources/js/Components/TextInput.vue
+++ b/resources/js/Components/TextInput.vue
@@ -135,13 +135,15 @@ const visible = ref(false);
 
         <div
             v-else
-            class="pill-container w-full px-4 py-2 transition-all duration-200 focus-within:border-white/20 focus-within:bg-black/65"
+            class="pill-container flex w-full items-center gap-2.5 px-4 py-2 transition-all duration-200 focus-within:border-white/20 focus-within:bg-black/65"
             :class="
                 errorMessage
                     ? 'border-red-500/50 focus-within:border-red-500/60 focus-within:ring-1 focus-within:ring-red-500/30'
                     : ''
             "
         >
+            <slot name="leading" />
+
             <input
                 :id="id"
                 ref="input"
diff --git a/resources/js/Components/UI/Modal.vue b/resources/js/Components/UI/Modal.vue
new file mode 100644
index 00000000..08c635a6
--- /dev/null
+++ b/resources/js/Components/UI/Modal.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { VueFinalModal } from "vue-final-modal";
+import "vue-final-modal/style.css";
+import { X } from "@lucide/vue";
+
+export interface Props {
+    modelValue?: boolean;
+    show?: boolean;
+    title?: string;
+    description?: string;
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | string;
+    closeable?: boolean;
+    showCloseButton?: boolean;
+    contentClass?: string;
+    overlayClass?: string;
+    clickToClose?: boolean;
+    escToClose?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: undefined,
+    show: undefined,
+    title: undefined,
+    description: undefined,
+    maxWidth: "lg",
+    closeable: true,
+    showCloseButton: true,
+    contentClass: "",
+    overlayClass: "",
+    clickToClose: true,
+    escToClose: true,
+});
+
+const emit = defineEmits<{
+    (e: "update:modelValue", value: boolean): void;
+    (e: "close"): void;
+    (e: "opened"): void;
+    (e: "closed"): void;
+}>();
+
+const isOpen = computed({
+    get: () => {
+        if (props.modelValue !== undefined) return props.modelValue;
+        if (props.show !== undefined) return props.show;
+        return false;
+    },
+    set: (val: boolean) => {
+        emit("update:modelValue", val);
+        if (!val) {
+            emit("close");
+        }
+    },
+});
+
+const maxWidthMap: Record<string, string> = {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    xl: "max-w-xl",
+    "2xl": "max-w-2xl",
+    "3xl": "max-w-3xl",
+};
+
+const resolvedMaxWidth = computed(() => {
+    return maxWidthMap[props.maxWidth] ?? props.maxWidth;
+});
+
+const handleClose = () => {
+    isOpen.value = false;
+};
+</script>
+
+<template>
+    <VueFinalModal
+        v-model="isOpen"
+        class="z-50 flex items-center justify-center p-4"
+        :overlay-class="['bg-black/80 backdrop-blur-sm', overlayClass]"
+        :click-to-close="closeable && clickToClose"
+        :esc-to-close="closeable && escToClose"
+        :content-class="[
+            'relative flex w-full max-h-[90vh] flex-col overflow-hidden rounded-3xl border border-white/10 bg-[#111215] text-white backdrop-blur-2xl',
+            resolvedMaxWidth,
+            contentClass,
+        ]"
+        @opened="emit('opened')"
+        @closed="emit('closed')"
+    >
+        <button
+            v-if="closeable && showCloseButton"
+            type="button"
+            class="pill-container absolute top-4 right-4 z-20 h-8 w-8 cursor-pointer justify-center text-neutral-400 transition-colors hover:text-white"
+            aria-label="Fechar"
+            @click="handleClose"
+        >
+            <X :size="16" />
+        </button>
+
+        <slot name="header">
+            <div
+                v-if="title || $slots.title || description"
+                class="flex flex-col gap-1 p-6 pb-0 sm:p-7 sm:pb-0"
+                :class="{ 'pr-12': closeable && showCloseButton }"
+            >
+                <div
+                    v-if="$slots.title"
+                    class="text-lg font-bold tracking-tight text-white sm:text-xl"
+                >
+                    <slot name="title" />
+                </div>
+                <h3
+                    v-else-if="title"
+                    class="text-lg font-bold tracking-tight text-white sm:text-xl"
+                >
+                    {{ title }}
+                </h3>
+
+                <p
+                    v-if="description"
+                    class="text-xs text-neutral-400 sm:text-sm"
+                >
+                    {{ description }}
+                </p>
+            </div>
+        </slot>
+
+        <div class="flex-1 overflow-y-auto p-6 sm:p-7">
+            <slot name="content">
+                <slot />
+            </slot>
+        </div>
+
+        <div
+            v-if="$slots.footer"
+            class="flex flex-row items-center justify-end gap-3 border-t border-white/8 bg-white/5 px-6 py-4"
+        >
+            <slot name="footer" />
+        </div>
+    </VueFinalModal>
+</template>
diff --git a/resources/js/Layouts/CardLayout.vue b/resources/js/Layouts/CardLayout.vue
index cdfb14a0..b85a1729 100644
--- a/resources/js/Layouts/CardLayout.vue
+++ b/resources/js/Layouts/CardLayout.vue
@@ -22,7 +22,7 @@ withDefaults(defineProps<Props>(), {
             class="relative flex min-h-[calc(100vh-8rem)] flex-col items-center justify-center px-4 py-12 sm:py-16"
         >
             <div
-                v-if="heading || title"
+                v-if="(heading || title) && !$slots.header"
                 class="mb-6 flex flex-col items-center text-center"
             >
                 <h1
@@ -43,7 +43,15 @@ withDefaults(defineProps<Props>(), {
                 class="w-full"
                 :class="maxWidth"
             >
+                <template v-if="$slots.header" #header>
+                    <slot name="header" />
+                </template>
+
                 <slot />
+
+                <template v-if="$slots.footer" #footer>
+                    <slot name="footer" />
+                </template>
             </Card>
         </div>
     </AppLayout>
diff --git a/resources/js/Pages/CRUD/Competition/Edit.vue b/resources/js/Pages/CRUD/Competition/Edit.vue
index d14387a0..7e8de33d 100644
--- a/resources/js/Pages/CRUD/Competition/Edit.vue
+++ b/resources/js/Pages/CRUD/Competition/Edit.vue
@@ -42,8 +42,19 @@ watchEffect(() => {
 </script>
 
 <template>
-    <CardLayout title="Editar Competição">
-        <form class="contents" @submit.prevent="submit">
+    <CardLayout title="Editar Competição" max-width="max-w-2xl">
+        <template #header>
+            <div class="space-y-1">
+                <h1 class="text-xl font-bold tracking-tight text-white sm:text-2xl">
+                    Editar Competição
+                </h1>
+                <p class="text-xs text-neutral-400 sm:text-sm">
+                    Atualiza as informações, regulamento e datas da competição.
+                </p>
+            </div>
+        </template>
+
+        <form id="competition-edit-form" class="flex flex-col gap-4" @submit.prevent="submit">
             <TextInput
                 id="name"
                 v-model="form.name"
@@ -64,6 +75,62 @@ watchEffect(() => {
                 :error-message="form.errors.slug"
             />
 
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <TextInput
+                    id="theme"
+                    v-model="form.theme"
+                    label="Tema"
+                    type="text"
+                    required
+                    :error-message="form.errors.theme"
+                />
+
+                <TextInput
+                    v-model="form.edition_id"
+                    type="select"
+                    required
+                    label="Edição"
+                    :error-message="form.errors.edition_id"
+                >
+                    <option
+                        v-for="edition in $props.with.editions"
+                        :key="edition.id"
+                        :value="edition.id"
+                    >
+                        {{ edition.name }}
+                    </option>
+                </TextInput>
+            </div>
+
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <TextInput
+                    id="date_start"
+                    v-model="form.date_start"
+                    label="Data de início"
+                    type="datetime-local"
+                    required
+                    :error-message="form.errors.date_start"
+                />
+
+                <TextInput
+                    id="date_end"
+                    v-model="form.date_end"
+                    label="Data de fim"
+                    type="datetime-local"
+                    required
+                    :error-message="form.errors.date_end"
+                />
+            </div>
+
+            <TextInput
+                id="registration_link"
+                v-model="form.registration_link"
+                label="Link para registo"
+                type="text"
+                required
+                :error-message="form.errors.registration_link"
+            />
+
             <TextInput
                 id="description"
                 v-model="form.description"
@@ -79,60 +146,19 @@ watchEffect(() => {
                 type="textarea"
                 :error-message="form.errors.regulation"
             />
+        </form>
 
-            <TextInput
-                id="theme"
-                v-model="form.theme"
-                label="Tema"
-                type="text"
-                required
-                :error-message="form.errors.theme"
-            />
-
-            <TextInput
-                id="date_start"
-                v-model="form.date_start"
-                label="Data de início"
-                type="datetime-local"
-                required
-                :error-message="form.errors.date_start"
-            />
-
-            <TextInput
-                id="date_end"
-                v-model="form.date_end"
-                label="Data de fim"
-                type="datetime-local"
-                required
-                :error-message="form.errors.date_end"
-            />
-
-            <TextInput
-                id="registration_link"
-                v-model="form.registration_link"
-                label="Link para registo"
-                type="text"
-                required
-                :error-message="form.errors.registration_link"
-            />
-
-            <TextInput
-                v-model="form.edition_id"
-                type="select"
-                required
-                label="Edição"
-                :error-message="form.errors.edition_id"
-            >
-                <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
+        <template #footer>
+            <div class="flex w-full items-center justify-end">
+                <PrimaryButton
+                    type="submit"
+                    form="competition-edit-form"
+                    :disabled="form.processing"
                 >
-                    {{ edition.name }}
-                </option>
-            </TextInput>
-
-            <PrimaryButton type="submit">Editar</PrimaryButton>
-        </form>
+                    Guardar alterações
+                </PrimaryButton>
+            </div>
+        </template>
     </CardLayout>
 </template>
+
diff --git a/resources/js/Pages/Profile/Edit.vue b/resources/js/Pages/Profile/Edit.vue
index 4fad15ef..a35190ed 100644
--- a/resources/js/Pages/Profile/Edit.vue
+++ b/resources/js/Pages/Profile/Edit.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
+import { ref, computed, onMounted, watch } from "vue";
+import { Link, usePage } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import DeleteUserForm from "@/Pages/Profile/Partials/DeleteUserForm.vue";
 import LogoutOtherBrowserSessionsForm from "@/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue";
-import SectionBorder from "@/Components/SectionBorder.vue";
 import TwoFactorAuthenticationForm from "@/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue";
 import UpdatePasswordForm from "@/Pages/Profile/Partials/UpdatePasswordForm.vue";
 import UpdateProfileInformationForm from "@/Pages/Profile/Partials/UpdateProfileInformationForm.vue";
+import PillSelector, { type PillOption } from "@/Components/UI/PillSelector.vue";
+import { User, ShieldCheck, Settings, ArrowLeft } from "@lucide/vue";
 import type Session from "@/Types/Session";
 
 interface Props {
@@ -13,45 +17,120 @@ interface Props {
     sessions: Session[];
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+const page = usePage();
+
+type ProfileTab = "profile" | "security" | "account";
+
+const tabs = computed<PillOption[]>(() => {
+    const list: PillOption[] = [];
+
+    if (page.props.jetstream.canUpdateProfileInformation) {
+        list.push({
+            id: "profile",
+            label: "Perfil",
+            icon: User,
+        });
+    }
+
+    if (
+        page.props.jetstream.canUpdatePassword ||
+        page.props.jetstream.canManageTwoFactorAuthentication
+    ) {
+        list.push({
+            id: "security",
+            label: "Segurança",
+            icon: ShieldCheck,
+        });
+    }
+
+    if (
+        (props.sessions && props.sessions.length > 0) ||
+        page.props.jetstream.hasAccountDeletionFeatures
+    ) {
+        list.push({
+            id: "account",
+            label: "Conta",
+            icon: Settings,
+        });
+    }
+
+    return list;
+});
+
+const getDefaultTab = (): ProfileTab => {
+    const errors = (page.props.errors || {}) as Record<string, unknown>;
+    if (errors.current_password || errors.password) {
+        return "security";
+    }
+    return (tabs.value[0]?.id as ProfileTab) ?? "profile";
+};
+
+const activeTab = ref<ProfileTab>(getDefaultTab());
+
+onMounted(() => {
+    const hash = window.location.hash.replace("#", "");
+    if (hash === "profile" || hash === "security" || hash === "account") {
+        activeTab.value = hash as ProfileTab;
+    }
+});
+
+watch(activeTab, (newTab) => {
+    if (typeof window !== "undefined" && window.history?.replaceState) {
+        window.history.replaceState(null, "", `#${newTab}`);
+    }
+});
 </script>
 
 <template>
-    <AppLayout title="Perfil">
-        <div class="mx-auto max-w-3xl py-10 sm:px-6 lg:px-8">
-            <template v-if="$page.props.jetstream.canUpdateProfileInformation">
-                <UpdateProfileInformationForm :user="$page.props.auth.user" />
-
-                <SectionBorder />
-            </template>
+    <AppLayout title="Definições de Perfil">
+        <div class="relative mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
+            <div class="mb-8 flex justify-center sm:mb-10">
+                <PillSelector
+                    v-model="activeTab"
+                    :items="tabs"
+                    size="md"
+                >
+                    <template #leading>
+                        <Link
+                            :href="route('profile.show')"
+                            class="pill-item cursor-pointer gap-2 px-4 py-2 text-xs font-medium text-neutral-400 transition-all duration-200 hover:bg-white/8 hover:text-white active:scale-95 sm:text-sm"
+                        >
+                            <ArrowLeft :size="16" class="shrink-0" />
+                            <span>Voltar ao perfil</span>
+                        </Link>
+                    </template>
+                </PillSelector>
+            </div>
 
-            <template v-if="$page.props.jetstream.canUpdatePassword">
-                <UpdatePasswordForm class="mt-10 sm:mt-0" />
+            <div v-if="activeTab === 'profile'" class="space-y-6">
+                <UpdateProfileInformationForm
+                    v-if="$page.props.jetstream.canUpdateProfileInformation"
+                    :user="$page.props.auth.user"
+                />
+            </div>
 
-                <SectionBorder />
-            </template>
+            <div v-else-if="activeTab === 'security'" class="space-y-6">
+                <UpdatePasswordForm
+                    v-if="$page.props.jetstream.canUpdatePassword"
+                />
 
-            <template
-                v-if="$page.props.jetstream.canManageTwoFactorAuthentication"
-            >
                 <TwoFactorAuthenticationForm
+                    v-if="$page.props.jetstream.canManageTwoFactorAuthentication"
                     :requires-confirmation="confirmsTwoFactorAuthentication"
-                    class="mt-10 sm:mt-0"
                 />
+            </div>
 
-                <SectionBorder />
-            </template>
-
-            <LogoutOtherBrowserSessionsForm
-                :sessions="sessions"
-                class="mt-10 sm:mt-0"
-            />
-
-            <template v-if="$page.props.jetstream.hasAccountDeletionFeatures">
-                <SectionBorder />
+            <div v-else-if="activeTab === 'account'" class="space-y-6">
+                <LogoutOtherBrowserSessionsForm
+                    v-if="sessions && sessions.length > 0"
+                    :sessions="sessions"
+                />
 
-                <DeleteUserForm class="mt-10 sm:mt-0" />
-            </template>
+                <DeleteUserForm
+                    v-if="$page.props.jetstream.hasAccountDeletionFeatures"
+                />
+            </div>
         </div>
     </AppLayout>
 </template>
diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
index cce7cd32..2a1205de 100644
--- a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
+++ b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useForm } from "@inertiajs/vue3";
-import ActionSection from "@/Components/ActionSection.vue";
-import DialogModal from "@/Components/DialogModal.vue";
+import Card from "@/Components/UI/Card.vue";
+import Modal from "@/Components/UI/Modal.vue";
 import TextInput from "@/Components/TextInput.vue";
+import { AlertTriangle } from "@lucide/vue";
 import { route } from "ziggy-js";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 
@@ -16,7 +17,6 @@ const form = useForm({
 
 const confirmUserDeletion = () => {
     confirmingUserDeletion.value = true;
-
     setTimeout(() => passwordInput.value?.focus(), 250);
 };
 
@@ -31,76 +31,82 @@ const deleteUser = () => {
 
 const closeModal = () => {
     confirmingUserDeletion.value = false;
-
     form.reset();
 };
 </script>
 
 <template>
-    <ActionSection>
-        <template #title>
-            <span class="text-text-color">Apagar conta</span></template
-        >
-
-        <template #description>
-            <span class="text-text-color"
-                >Apaga permanentemente a tua conta.
-            </span></template
-        >
+    <Card as="section" :interactive="false" padding="p-6 sm:p-8">
+        <template #header>
+            <div class="space-y-1">
+                <h2 class="text-lg font-bold tracking-tight text-white sm:text-xl">
+                    Apagar Conta
+                </h2>
+                <p class="text-xs text-neutral-400 sm:text-sm">
+                    Remove permanentemente a tua conta e todos os dados associados.
+                </p>
+            </div>
+        </template>
 
-        <template #content>
-            <div class="text-text-color max-w-xl text-sm">
-                Depois de a tua conta ser excluída, todos os teus recursos e
-                dados serão apagados permanentemente. Antes de apagares a tua
-                conta, por favor faz o download de todos os dados ou informações
-                que desejas reter.
+        <div class="space-y-4">
+            <div class="text-sm text-neutral-300">
+                <p>
+                    Depois de apagada, a tua conta não poderá ser recuperada. Todos os bilhetes adquiridos, pontuações de atividades, submissões e histórico de eventos serão apagados permanentemente.
+                </p>
             </div>
+        </div>
 
-            <div class="mt-5">
-                <PrimaryButton color="secondary" @click="confirmUserDeletion">
+        <template #footer>
+            <div class="flex w-full items-center justify-end">
+                <PrimaryButton color="danger" @click="confirmUserDeletion">
                     Apagar conta
                 </PrimaryButton>
             </div>
+        </template>
+    </Card>
+
+    <!-- Modal for Confirming User Deletion -->
+    <Modal
+        v-model="confirmingUserDeletion"
+        max-width="md"
+        title="Confirmar Eliminação da Conta"
+        description="Esta ação é permanente e não poderá ser desfeita."
+        @close="closeModal"
+    >
+        <div class="space-y-4 pt-1">
+            <div class="flex items-start gap-3 rounded-2xl border border-red-500/20 bg-red-500/10 p-3.5 text-xs text-red-300">
+                <AlertTriangle :size="18" class="shrink-0 text-red-400" />
+                <p>
+                    Tens a certeza absoluta de que pretendes prosseguir? Por motivos de segurança, introduz a tua palavra-passe para confirmar.
+                </p>
+            </div>
 
-            <!-- Delete Account Confirmation Modal -->
-            <DialogModal :show="confirmingUserDeletion" @close="closeModal">
-                <template #title> Apagar conta </template>
-
-                <template #content>
-                    <p>
-                        Tens a certeza de que desejas apagar a tua conta? Uma
-                        vez que a tua conta é excluída, todos os teus recursos e
-                        dados serão apagados permanentemente. Por favor, insere
-                        a tua password para confirmar que queres apagar
-                        permanentemente a tua conta.
-                    </p>
-
-                    <TextInput
-                        ref="passwordInput"
-                        v-model="form.password"
-                        type="password"
-                        class="p text-2025-blue block w-full"
-                        label="Password"
-                        autocomplete="current-password"
-                        :error-message="form.errors.password"
-                        @keyup.enter="deleteUser"
-                    />
-                </template>
-
-                <template #footer>
-                    <PrimaryButton @click="closeModal"> Cancel </PrimaryButton>
-
-                    <PrimaryButton
-                        class="ml-3"
-                        color="danger"
-                        :class="{ 'opacity-25': form.processing }"
-                        :disabled="form.processing"
-                        @click="deleteUser"
-                    >
-                        Delete Account
-                    </PrimaryButton>
-                </template>
-            </DialogModal>
+            <TextInput
+                ref="passwordInput"
+                v-model="form.password"
+                type="password"
+                label="Palavra-passe de confirmação"
+                autocomplete="current-password"
+                :error-message="form.errors.password"
+                @keyup.enter="deleteUser"
+            />
+        </div>
+
+        <template #footer>
+            <PrimaryButton color="pill" @click="closeModal">
+                Cancelar
+            </PrimaryButton>
+
+            <PrimaryButton
+                color="danger"
+                :class="{ 'opacity-25': form.processing }"
+                :disabled="form.processing"
+                @click="deleteUser"
+            >
+                Sim, apagar conta
+            </PrimaryButton>
         </template>
-    </ActionSection>
+    </Modal>
 </template>
+
+
diff --git a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
index a7caee44..b2e70e4b 100644
--- a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
+++ b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useForm } from "@inertiajs/vue3";
-import ActionMessage from "@/Components/ActionMessage.vue";
-import ActionSection from "@/Components/ActionSection.vue";
-import DialogModal from "@/Components/DialogModal.vue";
+import Card from "@/Components/UI/Card.vue";
+import Modal from "@/Components/UI/Modal.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
+import { Laptop, Smartphone } from "@lucide/vue";
 import { route } from "ziggy-js";
 import type Session from "@/Types/Session";
 
@@ -24,7 +24,6 @@ const form = useForm({
 
 const confirmLogout = () => {
     confirmingLogout.value = true;
-
     setTimeout(() => passwordInput.value?.focus(), 250);
 };
 
@@ -39,152 +38,118 @@ const logoutOtherBrowserSessions = () => {
 
 const closeModal = () => {
     confirmingLogout.value = false;
-
     form.reset();
 };
 </script>
 
 <template>
-    <ActionSection>
-        <template #title>
-            <span class="text-text-color">Sessões do Browser</span></template
-        >
-
-        <template #description>
-            <span class="text-text-color">
-                Gere e regista as tuas sessões ativas em outros navegadores e
-                dispositivos.
-            </span>
+    <Card as="section" :interactive="false" padding="p-6 sm:p-8">
+        <template #header>
+            <div class="space-y-1">
+                <h2 class="text-lg font-bold tracking-tight text-white sm:text-xl">
+                    Sessões Ativas
+                </h2>
+                <p class="text-xs text-neutral-400 sm:text-sm">
+                    Gere os dispositivos e navegadores com sessão iniciada na tua conta.
+                </p>
+            </div>
         </template>
 
-        <template #content>
-            <div class="text-text-color max-w-xl text-sm">
-                Se necessário, podes terminar a sessão de todos os outros
-                navegadores em todos os teus dispositivos. Algumas das tuase
-                sessões recentes estão listadas abaixo; No entanto, esta lista
-                pode não estar completa. Se achas que a tua conta foi
-                comprometida, também deves atualizar a tua senha.
+        <div class="space-y-4">
+            <div class="text-sm text-neutral-300">
+                <p>
+                    Se suspeitares de atividade não autorizada ou se deixaste a sessão aberta num computador partilhado, podes encerrar todas as outras sessões ativas de imediato.
+                </p>
             </div>
 
-            <!-- Other Browser Sessions -->
-            <div v-if="sessions.length > 0" class="mt-5 space-y-6">
+            <div v-if="sessions.length > 0" class="space-y-3 pt-1">
                 <div
                     v-for="(session, i) in sessions"
                     :key="i"
-                    class="flex items-center"
+                    class="flex items-center justify-between rounded-2xl border border-white/8 bg-white/3 p-3.5 sm:p-4"
                 >
-                    <div>
-                        <svg
-                            v-if="session.agent.is_desktop"
-                            class="text-text-color h-8 w-8"
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke-width="1.5"
-                            stroke="currentColor"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"
-                            />
-                        </svg>
-
-                        <svg
-                            v-else
-                            class="text-text-color h-8 w-8"
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke-width="1.5"
-                            stroke="currentColor"
-                        >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
-                            />
-                        </svg>
-                    </div>
-
-                    <div class="ml-3">
-                        <div class="text-text-color text-sm">
-                            {{
-                                session.agent.platform
-                                    ? session.agent.platform
-                                    : "Unknown"
-                            }}
-                            -
-                            {{
-                                session.agent.browser
-                                    ? session.agent.browser
-                                    : "Unknown"
-                            }}
+                    <div class="flex items-center gap-3.5">
+                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/5 text-neutral-300 ring-1 ring-white/10">
+                            <Laptop v-if="session.agent.is_desktop" :size="20" />
+                            <Smartphone v-else :size="20" />
                         </div>
 
-                        <div>
-                            <div class="text-text-color text-xs">
-                                {{ session.ip_address }},
+                        <div class="space-y-0.5">
+                            <div class="text-sm font-semibold text-white">
+                                {{ session.agent.platform || "Dispositivo desconhecido" }}
+                                <span class="text-neutral-500 font-normal">•</span>
+                                {{ session.agent.browser || "Navegador desconhecido" }}
+                            </div>
 
+                            <div class="flex flex-wrap items-center gap-2 text-xs text-neutral-400">
+                                <span>{{ session.ip_address }}</span>
+                                <span class="text-neutral-600">•</span>
                                 <span
                                     v-if="session.is_current_device"
-                                    class="text-text-color font-semibold"
-                                    >This device</span
-                                >
-                                <span v-else
-                                    >Last active {{ session.last_active }}</span
+                                    class="font-semibold text-emerald-400"
                                 >
+                                    Este dispositivo
+                                </span>
+                                <span v-else>
+                                    Última atividade: {{ session.last_active }}
+                                </span>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
+        </div>
 
-            <div class="mt-5 flex items-center">
-                <PrimaryButton @click="confirmLogout">
-                    Terminar sessão noutros navegadores
-                </PrimaryButton>
+        <template #footer>
+            <div class="flex w-full items-center justify-end gap-3">
+                <span
+                    v-show="form.recentlySuccessful"
+                    class="text-xs font-medium text-emerald-400"
+                >
+                    Sessões terminadas com sucesso.
+                </span>
 
-                <ActionMessage :on="form.recentlySuccessful" class="ml-3">
-                    Pronto.
-                </ActionMessage>
+                <PrimaryButton type="button" @click="confirmLogout">
+                    Terminar outras sessões
+                </PrimaryButton>
             </div>
-
-            <!-- Log Out Other Devices Confirmation Modal -->
-            <DialogModal :show="confirmingLogout" @close="closeModal">
-                <template #title>Terminar sessão noutros navegadores </template>
-
-                <template #content>
-                    Por favor, digite sua senha para confirmar que você gostaria
-                    de registrar fora de suas outras sessões de navegador em
-                    todas as suas dispositivos.
-
-                    <TextInput
-                        ref="passwordInput"
-                        v-model="form.password"
-                        type="password"
-                        class="mt-1 block w-3/4"
-                        label="Password"
-                        autocomplete="current-password"
-                        :error-message="form.errors.password"
-                        @keyup.enter="logoutOtherBrowserSessions"
-                    />
-                </template>
-
-                <template #footer>
-                    <PrimaryButton @click="closeModal"> Cancel </PrimaryButton>
-
-                    <PrimaryButton
-                        class="ml-3"
-                        :class="{ 'opacity-25': form.processing }"
-                        :disabled="form.processing"
-                        @click="logoutOtherBrowserSessions"
-                    >
-                        Terminar sessão noutros navegadores
-                    </PrimaryButton>
-                </template>
-            </DialogModal>
         </template>
-    </ActionSection>
+    </Card>
+
+    <!-- Modal for Confirming Logout -->
+    <Modal
+        v-model="confirmingLogout"
+        max-width="md"
+        title="Terminar Outras Sessões"
+        description="Por favor, confirma a tua palavra-passe para encerrar a sessão em todos os outros dispositivos."
+        @close="closeModal"
+    >
+        <div class="pt-2">
+            <TextInput
+                ref="passwordInput"
+                v-model="form.password"
+                type="password"
+                label="Palavra-passe"
+                autocomplete="current-password"
+                :error-message="form.errors.password"
+                @keyup.enter="logoutOtherBrowserSessions"
+            />
+        </div>
+
+        <template #footer>
+            <PrimaryButton color="pill" @click="closeModal">
+                Cancelar
+            </PrimaryButton>
+
+            <PrimaryButton
+                :class="{ 'opacity-25': form.processing }"
+                :disabled="form.processing"
+                @click="logoutOtherBrowserSessions"
+            >
+                Terminar sessões
+            </PrimaryButton>
+        </template>
+    </Modal>
 </template>
-@/Types/Session
+
+
diff --git a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
index c2ef2502..f2f3071b 100644
--- a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
+++ b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, onMounted } from "vue";
 import { router, useForm, usePage } from "@inertiajs/vue3";
-import ActionSection from "@/Components/ActionSection.vue";
+import Card from "@/Components/UI/Card.vue";
+import Modal from "@/Components/UI/Modal.vue";
 import ConfirmsPassword from "@/Components/ConfirmsPassword.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import CodeInput from "@/Components/CodeInput.vue";
+import { Check, Copy } from "@lucide/vue";
 import { route } from "ziggy-js";
 import axios from "axios";
 
@@ -17,27 +19,49 @@ const props = defineProps<Props>();
 const enabling = ref(false);
 const confirming = ref(false);
 const disabling = ref(false);
+const setupModalOpen = ref(false);
+const recoveryCodesModalOpen = ref(false);
 const qrCode = ref<string | null>(null);
 const setupKey = ref<string | null>(null);
 const recoveryCodes = ref<string[]>([]);
+const copiedKey = ref(false);
 
 const confirmationForm = useForm({
     code: "",
 });
 
-const twoFactorEnabled = computed(
-    () => !enabling.value && usePage().props.auth.user?.two_factor_enabled,
-);
+const isTwoFactorEnabled = computed(() => {
+    const user = usePage().props.auth.user;
+    if (!user?.two_factor_enabled) return false;
+    if (confirming.value) return false;
+    if (props.requiresConfirmation) {
+        return Boolean(user?.two_factor_confirmed_at);
+    }
+    return true;
+});
+
+onMounted(() => {
+    const user = usePage().props.auth.user;
+    if (
+        props.requiresConfirmation &&
+        user?.two_factor_enabled &&
+        !user?.two_factor_confirmed_at
+    ) {
+        disableTwoFactorAuthentication();
+    }
+});
 
-watch(twoFactorEnabled, () => {
-    if (!twoFactorEnabled.value) {
+watch(isTwoFactorEnabled, (enabled) => {
+    if (!enabled) {
         confirmationForm.reset();
         confirmationForm.clearErrors();
+        confirming.value = false;
     }
 });
 
 const enableTwoFactorAuthentication = () => {
     enabling.value = true;
+    confirming.value = props.requiresConfirmation;
 
     router.post(
         route("two-factor.enable"),
@@ -49,10 +73,11 @@ const enableTwoFactorAuthentication = () => {
                     showQrCode(),
                     showSetupKey(),
                     showRecoveryCodes(),
-                ]),
+                ]).then(() => {
+                    setupModalOpen.value = true;
+                }),
             onFinish: () => {
                 enabling.value = false;
-                confirming.value = props.requiresConfirmation;
             },
         },
     );
@@ -80,12 +105,22 @@ const confirmTwoFactorAuthentication = () => {
         preserveState: true,
         onSuccess: () => {
             confirming.value = false;
+            setupModalOpen.value = false;
             qrCode.value = null;
             setupKey.value = null;
+            showRecoveryCodes().then(() => {
+                recoveryCodesModalOpen.value = true;
+            });
         },
     });
 };
 
+const openRecoveryCodesModal = () => {
+    showRecoveryCodes().then(() => {
+        recoveryCodesModalOpen.value = true;
+    });
+};
+
 const regenerateRecoveryCodes = () => {
     axios
         .post(route("two-factor.recovery-codes"))
@@ -100,124 +135,62 @@ const disableTwoFactorAuthentication = () => {
         onSuccess: () => {
             disabling.value = false;
             confirming.value = false;
+            setupModalOpen.value = false;
+            recoveryCodesModalOpen.value = false;
+        },
+        onError: () => {
+            disabling.value = false;
         },
     });
 };
-</script>
-
-<template>
-    <ActionSection>
-        <template #title>
-            <span class="text-text-color"
-                >Autenticação de 2 fatores
-            </span></template
-        >
-
-        <template #description>
-            <span class="text-text-color">
-                Adiciona segurança à tua conta usando autenticação de dois
-                fatores.
-            </span>
-        </template>
 
-        <template #content>
-            <h3
-                v-if="twoFactorEnabled && !confirming"
-                class="text-text-color text-lg font-medium"
-            >
-                Ativaste a autenticação de dois fatores.
-            </h3>
-
-            <h3
-                v-else-if="twoFactorEnabled && confirming"
-                class="text-text-color text-lg font-medium"
-            >
-                Conclui a autenticação de dois fatores.
-            </h3>
-
-            <h3 v-else class="text-text-color text-lg font-medium">
-                Não ativaste a autenticação de dois fatores.
-            </h3>
-
-            <div class="text-text-color mt-3 max-w-xl text-sm">
-                <p>
-                    Quando a autenticação de dois fatores for ativada, ser-te-á
-                    solicitado um token aleatório e seguro durante a
-                    autenticação. Podes recuperar este token através da
-                    aplicação do Google Authenticator.
-                </p>
-            </div>
+const cancelSetup = () => {
+    setupModalOpen.value = false;
+    disableTwoFactorAuthentication();
+};
 
-            <div v-if="twoFactorEnabled">
-                <div v-if="qrCode">
-                    <div class="text-text-color mt-4 max-w-xl text-sm">
-                        <p v-if="confirming" class="font-semibold">
-                            Para terminar de ativar a autenticação de dois
-                            fatores, digitaliza o código QR a seguir usando a
-                            app de Authenticator do teu telemóvel ou insere a
-                            tecla de configuração e fornece o código OTP gerado.
-                        </p>
-
-                        <p v-else>
-                            A autenticação de dois fatores está agora ativada.
-                            Dá scan ao código QR usando a aplicação de
-                            Authenticator do teu telemóvel ou insere a chave de
-                            configuração.
-                        </p>
-                    </div>
-
-                    <div
-                        class="bg-2025-blue mt-4 inline-block p-2"
-                        v-html="qrCode"
-                    />
-
-                    <div
-                        v-if="setupKey"
-                        class="text-text-color mt-4 max-w-xl text-sm"
-                    >
-                        <p class="font-semibold">
-                            Setup Key: <span v-html="setupKey"></span>
-                        </p>
-                    </div>
-
-                    <CodeInput
-                        v-if="confirming"
-                        id="code"
-                        v-model="confirmationForm.code"
-                        label="Code"
-                        class="mt-4"
-                        :center="false"
-                        :error-message="confirmationForm.errors.code"
-                        @complete="confirmTwoFactorAuthentication"
-                    />
-                </div>
+const copySetupKey = () => {
+    if (!setupKey.value) return;
+    navigator.clipboard.writeText(setupKey.value);
+    copiedKey.value = true;
+    setTimeout(() => {
+        copiedKey.value = false;
+    }, 2000);
+};
+</script>
 
-                <div v-if="recoveryCodes.length > 0 && !confirming">
-                    <div class="text-text-color mt-4 max-w-xl text-sm">
-                        <p class="font-semibold">
-                            Armazena estes códigos de recuperação numa gestor de
-                            senhas seguro. Eles podem ser usados para recuperar
-                            o acesso à tua conta se o teu dispositivo de
-                            autenticação de dois fatores for perdido.
-                        </p>
-                    </div>
-
-                    <div
-                        class="mt-4 grid max-w-xl gap-1 rounded-lg bg-gray-100 px-4 py-4 font-mono text-sm"
-                    >
-                        <div v-for="code in recoveryCodes" :key="code">
-                            {{ code }}
-                        </div>
-                    </div>
+<template>
+    <Card as="section" :interactive="false" padding="p-6 sm:p-8">
+        <template #header>
+            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                <div class="space-y-1">
+                    <h2 class="text-lg font-bold tracking-tight text-white sm:text-xl">
+                        Autenticação de Dois Fatores (2FA)
+                    </h2>
+                    <p class="text-xs text-neutral-400 sm:text-sm">
+                        Adiciona uma camada extra de segurança ao iniciar sessão através de um código temporário.
+                    </p>
                 </div>
             </div>
+        </template>
 
-            <div class="mt-5">
-                <div v-if="!twoFactorEnabled">
+        <div class="text-sm text-neutral-300 space-y-3">
+            <p v-if="isTwoFactorEnabled">
+                A tua conta está protegida com autenticação de dois fatores. Ser-te-á solicitado um código de 6 dígitos gerado pela tua aplicação de autenticação (como Google Authenticator, 1Password ou Authy) sempre que iniciares sessão.
+            </p>
+            <p v-else>
+                Com o 2FA ativado, ser-te-á pedido um código de 6 dígitos gerado pela tua aplicação de autenticação (como Google Authenticator, 1Password ou Authy) sempre que iniciares sessão.
+            </p>
+        </div>
+
+        <template #footer>
+            <div class="flex w-full flex-wrap items-center justify-end gap-3">
+                <!-- Turned Off (Desativada) -->
+                <div v-if="!isTwoFactorEnabled">
                     <ConfirmsPassword
-                        title="Confirmar Password"
-                        content="Confirma a tua senha para ativar a autenticação de dois fatores."
-                        button="Confirmar"
+                        title="Confirmar Palavra-passe"
+                        content="Para ativar a autenticação de dois fatores, confirma a tua palavra-passe."
+                        button="Continuar"
                         @confirmed="enableTwoFactorAuthentication"
                     >
                         <PrimaryButton
@@ -225,90 +198,149 @@ const disableTwoFactorAuthentication = () => {
                             :class="{ 'opacity-25': enabling }"
                             :disabled="enabling"
                         >
-                            Ativar
+                            {{ enabling ? "A iniciar..." : "Ativar 2FA" }}
                         </PrimaryButton>
                     </ConfirmsPassword>
                 </div>
 
-                <div v-else>
+                <!-- Turned On (Ativada) -->
+                <div v-else class="flex flex-wrap items-center gap-3">
                     <ConfirmsPassword
-                        title="Confirmar Password"
-                        content="Confirma a tua senha para confirmar a autenticação de dois fatores."
-                        button="Confirmar"
-                        @confirmed="confirmTwoFactorAuthentication"
+                        title="Ver Códigos de Recuperação"
+                        content="Confirma a tua palavra-passe para visualizar os teus códigos de emergência."
+                        button="Mostrar"
+                        @confirmed="openRecoveryCodesModal"
                     >
-                        <PrimaryButton
-                            v-if="confirming"
-                            type="button"
-                            class="mr-3"
-                            :class="{ 'opacity-25': enabling }"
-                            :disabled="enabling"
-                        >
-                            Confirm
+                        <PrimaryButton type="button" color="pill">
+                            Ver códigos de recuperação
                         </PrimaryButton>
                     </ConfirmsPassword>
 
                     <ConfirmsPassword
-                        title="Confirmar Password"
-                        content="Confirma a tua senha para regenerar os códigos de recuperação."
-                        button="Confirmar"
-                        @confirmed="regenerateRecoveryCodes"
-                    >
-                        <PrimaryButton
-                            v-if="recoveryCodes.length > 0 && !confirming"
-                            class="mr-3"
-                        >
-                            Regenerate Recovery Codes
-                        </PrimaryButton>
-                    </ConfirmsPassword>
-
-                    <ConfirmsPassword
-                        title="Confirmar Password"
-                        content="Confirma a tua senha para mostrar os códigos de recuperação."
-                        button="Confirmar"
-                        @confirmed="showRecoveryCodes"
-                    >
-                        <PrimaryButton
-                            v-if="recoveryCodes.length === 0 && !confirming"
-                            class="mr-3"
-                        >
-                            Show Recovery Codes
-                        </PrimaryButton>
-                    </ConfirmsPassword>
-
-                    <ConfirmsPassword
-                        title="Confirmar Password"
-                        content="Confirma a tua senha para desativar a autenticação de dois fatores."
-                        button="Confirmar"
+                        title="Desativar 2FA"
+                        content="Tens a certeza que pretendes desativar o 2FA? A segurança da tua conta será reduzida."
+                        button="Desativar"
                         @confirmed="disableTwoFactorAuthentication"
                     >
                         <PrimaryButton
-                            v-if="confirming"
-                            :class="{ 'opacity-25': disabling }"
+                            type="button"
                             color="danger"
-                            :disabled="disabling"
-                        >
-                            Cancel
-                        </PrimaryButton>
-                    </ConfirmsPassword>
-
-                    <ConfirmsPassword
-                        title="Confirmar Password"
-                        content="Confirma a tua senha para desativar a autenticação de dois fatores."
-                        button="Confirmar"
-                        @confirmed="disableTwoFactorAuthentication"
-                    >
-                        <PrimaryButton
-                            v-if="!confirming"
                             :class="{ 'opacity-25': disabling }"
                             :disabled="disabling"
-                            color="danger"
                         >
-                            Disable
+                            {{ disabling ? "A desativar..." : "Desativar 2FA" }}
                         </PrimaryButton>
                     </ConfirmsPassword>
                 </div>
             </div>
         </template>
-    </ActionSection>
+    </Card>
+
+    <Modal
+        v-model="setupModalOpen"
+        max-width="md"
+        title="Configurar Autenticação de Dois Fatores"
+        description="Digitaliza o código QR na tua aplicação de autenticação para associar a conta."
+        :closeable="false"
+        :show-close-button="false"
+    >
+        <div class="flex flex-col items-center gap-5 py-2">
+            <div
+                v-if="qrCode"
+                class="rounded-2xl bg-white p-4 flex items-center justify-center"
+                v-html="qrCode"
+            />
+
+            <div v-if="setupKey" class="w-full space-y-1.5 text-center">
+                <span class="text-xs text-neutral-400 font-medium">Chave de configuração manual:</span>
+                <div
+                    class="group flex items-center justify-center gap-2 rounded-xl border border-white/10 bg-black/50 px-3 py-2 font-mono text-xs text-white cursor-pointer hover:border-white/20 transition-colors"
+                    title="Clique para copiar"
+                    @click="copySetupKey"
+                >
+                    <span class="truncate">{{ setupKey }}</span>
+                    <Copy :size="13" class="shrink-0 text-neutral-400 group-hover:text-white" />
+                </div>
+                <span v-if="copiedKey" class="text-[11px] text-emerald-400 font-medium">Copiado para a área de transferência!</span>
+            </div>
+
+            <div class="w-full max-w-xs space-y-2 pt-1 text-center">
+                <label for="two_factor_code" class="text-xs font-semibold text-white">
+                    Código de 6 dígitos gerado pela app:
+                </label>
+                <CodeInput
+                    id="two_factor_code"
+                    v-model="confirmationForm.code"
+                    label="Código"
+                    :center="true"
+                    :error-message="confirmationForm.errors.code"
+                    @complete="confirmTwoFactorAuthentication"
+                />
+            </div>
+        </div>
+
+        <template #footer>
+            <div class="flex w-full items-center justify-between gap-3">
+                <PrimaryButton
+                    type="button"
+                    color="pill"
+                    :disabled="confirmationForm.processing"
+                    @click="cancelSetup"
+                >
+                    Cancelar
+                </PrimaryButton>
+
+                <PrimaryButton
+                    type="button"
+                    :class="{ 'opacity-25': confirmationForm.processing }"
+                    :disabled="confirmationForm.processing"
+                    @click="confirmTwoFactorAuthentication"
+                >
+                    {{ confirmationForm.processing ? "A verificar..." : "Concluir ativação" }}
+                </PrimaryButton>
+            </div>
+        </template>
+    </Modal>
+
+    <Modal
+        v-model="recoveryCodesModalOpen"
+        max-width="md"
+        title="Códigos de Recuperação"
+        description="Armazena estes códigos num local seguro. Cada código pode ser usado uma única vez se perderes o acesso ao dispositivo 2FA."
+    >
+        <div class="space-y-4 py-2">
+            <div
+                class="grid grid-cols-2 gap-2.5 rounded-2xl border border-white/10 bg-black/50 p-4 font-mono text-xs sm:text-sm text-neutral-200"
+            >
+                <div v-for="code in recoveryCodes" :key="code" class="select-all py-1 text-center">
+                    {{ code }}
+                </div>
+            </div>
+
+            <p class="text-xs text-neutral-400">
+                Dica: Podes copiar e guardar estes códigos no teu gestor de palavras-passe ou imprimi-los para um local seguro.
+            </p>
+        </div>
+
+        <template #footer>
+            <div class="flex w-full items-center justify-between gap-3">
+                <ConfirmsPassword
+                    title="Regenerar Códigos"
+                    content="Tens a certeza que desejas regenerar os teus códigos de recuperação? Todos os anteriores serão invalidados."
+                    button="Regenerar"
+                    @confirmed="regenerateRecoveryCodes"
+                >
+                    <PrimaryButton type="button" color="pill">
+                        Regenerar novos códigos
+                    </PrimaryButton>
+                </ConfirmsPassword>
+
+                <PrimaryButton type="button" @click="recoveryCodesModalOpen = false">
+                    Concluído
+                </PrimaryButton>
+            </div>
+        </template>
+    </Modal>
 </template>
+
+
diff --git a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
index dd387ed8..b6f8a7db 100644
--- a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useForm } from "@inertiajs/vue3";
-import ActionMessage from "@/Components/ActionMessage.vue";
-import FormSection from "@/Components/FormSection.vue";
+import Card from "@/Components/UI/Card.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
 import { route } from "ziggy-js";
@@ -37,60 +36,74 @@ const updatePassword = () => {
 </script>
 
 <template>
-    <FormSection @submitted="updatePassword">
-        <template #title>
-            <span class="text-text-color">Atualizar Password </span></template
-        >
-
-        <template #description>
-            <span class="text-text-color">
-                Garante que a tua conta usa uma senha longa e aleatória para se
-                manter segura.
-            </span>
+    <Card as="section" :interactive="false" padding="p-6 sm:p-8">
+        <template #header>
+            <div class="space-y-1">
+                <h2 class="text-lg font-bold tracking-tight text-white sm:text-xl">
+                    Palavra-passe
+                </h2>
+                <p class="text-xs text-neutral-400 sm:text-sm">
+                    Garante que a tua conta usa uma palavra-passe forte e segura para proteger os teus dados.
+                </p>
+            </div>
         </template>
 
-        <template #form>
+        <form
+            id="update-password-form"
+            class="flex flex-col gap-4"
+            @submit.prevent="updatePassword"
+        >
             <TextInput
                 id="current_password"
                 ref="currentPasswordInput"
                 v-model="form.current_password"
-                label="Password Atual"
+                label="Palavra-passe Atual"
                 type="password"
                 autocomplete="current-password"
                 :error-message="form.errors.current_password"
             />
 
-            <TextInput
-                id="password"
-                ref="passwordInput"
-                v-model="form.password"
-                label="Nova Password"
-                type="password"
-                autocomplete="new-password"
-                :error-message="form.errors.password"
-            />
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <TextInput
+                    id="password"
+                    ref="passwordInput"
+                    v-model="form.password"
+                    label="Nova Palavra-passe"
+                    type="password"
+                    autocomplete="new-password"
+                    :error-message="form.errors.password"
+                />
 
-            <TextInput
-                id="password_confirmation"
-                v-model="form.password_confirmation"
-                label="Confirmar Password"
-                type="password"
-                autocomplete="new-password"
-                :error-message="form.errors.password_confirmation"
-            />
-        </template>
+                <TextInput
+                    id="password_confirmation"
+                    v-model="form.password_confirmation"
+                    label="Confirmar Palavra-passe"
+                    type="password"
+                    autocomplete="new-password"
+                    :error-message="form.errors.password_confirmation"
+                />
+            </div>
+        </form>
 
-        <template #actions>
-            <ActionMessage :on="form.recentlySuccessful" class="mr-3">
-                Guardado.
-            </ActionMessage>
+        <template #footer>
+            <div class="flex w-full items-center justify-end gap-3">
+                <span
+                    v-show="form.recentlySuccessful"
+                    class="text-xs font-medium text-emerald-400"
+                >
+                    Palavra-passe atualizada.
+                </span>
 
-            <PrimaryButton
-                :class="{ 'opacity-25': form.processing }"
-                :disabled="form.processing"
-            >
-                Guardar
-            </PrimaryButton>
+                <PrimaryButton
+                    type="submit"
+                    form="update-password-form"
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                >
+                    Atualizar palavra-passe
+                </PrimaryButton>
+            </div>
         </template>
-    </FormSection>
+    </Card>
 </template>
+
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
index 54f8b876..2c1f0306 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { Link, useForm } from "@inertiajs/vue3";
-import ActionMessage from "@/Components/ActionMessage.vue";
-import FormSection from "@/Components/FormSection.vue";
+import { ref, computed } from "vue";
+import { Link, router, useForm } from "@inertiajs/vue3";
+import Modal from "@/Components/UI/Modal.vue";
+import Card from "@/Components/UI/Card.vue";
+import SocialIcon from "@/Components/UI/SocialIcon.vue";
+import { Camera, Upload, Trash2, AlertCircle } from "@lucide/vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
 import {
@@ -23,6 +25,96 @@ const isCompany = checkIsCompany(user);
 const isSpeaker = checkIsSpeaker(user);
 const isAdmin = checkIsAdmin(user);
 
+const userTypeLabel = computed(() => {
+    if (isAdmin) return "Administrador";
+    if (isSpeaker) return "Orador";
+    if (isCompany) return "Empresa";
+    return "Participante";
+});
+
+// Profile Photo Editing State & Modal
+const photoModalOpen = ref(false);
+const photoInput = ref<HTMLInputElement | null>(null);
+const photoPreview = ref<string | null>(null);
+const photoError = ref<string | null>(null);
+const isDeletingPhoto = ref(false);
+
+const photoForm = useForm({
+    _method: "PUT",
+    name: user?.name ?? "",
+    email: user?.email ?? "",
+    photo: null as File | null,
+});
+
+const handlePhotoChange = (event: Event) => {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    photoError.value = null;
+
+    if (!file) return;
+
+    if (!["image/jpeg", "image/png", "image/jpg"].includes(file.type)) {
+        photoError.value = "Por favor seleciona uma imagem válida (JPG ou PNG).";
+        return;
+    }
+
+    if (file.size > 10 * 1024 * 1024) {
+        photoError.value = "A imagem não pode exceder 10 MB.";
+        return;
+    }
+
+    photoForm.photo = file;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+        photoPreview.value = e.target?.result as string;
+    };
+    reader.readAsDataURL(file);
+};
+
+const cancelPhotoSelection = () => {
+    photoPreview.value = null;
+    photoForm.photo = null;
+    photoError.value = null;
+    if (photoInput.value) {
+        photoInput.value.value = "";
+    }
+};
+
+const closePhotoModal = () => {
+    cancelPhotoSelection();
+    photoModalOpen.value = false;
+};
+
+const savePhoto = () => {
+    if (!photoForm.photo) return;
+    photoForm.name = user?.name ?? "";
+    photoForm.email = user?.email ?? "";
+    photoForm.post(route("user-profile-information.update"), {
+        errorBag: "updateProfileInformation",
+        preserveScroll: true,
+        onSuccess: () => {
+            closePhotoModal();
+        },
+        onError: (errors) => {
+            if (errors.photo) {
+                photoError.value = errors.photo;
+            }
+        },
+    });
+};
+
+const deletePhoto = () => {
+    isDeletingPhoto.value = true;
+    router.delete(route("current-user-photo.destroy"), {
+        preserveScroll: true,
+        onFinish: () => {
+            isDeletingPhoto.value = false;
+            closePhotoModal();
+        },
+    });
+};
+
 const form = useForm({
     _method: "PUT",
     name: user ? user.name : "",
@@ -57,53 +149,115 @@ const sendEmailVerification = () => {
 </script>
 
 <template>
-    <FormSection @submitted="updateProfileInformation">
-        <template #title>
-            <span class="text-text-color">Informação do Perfil </span>
-        </template>
-
-        <template #description>
-            <span class="text-text-color">
-                Atualiza as informações do perfil da tua conta e o endereço de
-                e-mail.
-            </span>
-        </template>
-
-        <template #form>
-            <!-- Email -->
-            <div class="flex flex-col gap-5">
-                <!-- Name -->
-                <TextInput
-                    id="name"
-                    v-model="form.name"
-                    label="Nome"
-                    type="text"
-                    autocomplete="name"
-                    :error-message="form.errors.name"
-                />
-                <TextInput
-                    id="email"
-                    v-model="form.email"
-                    label="Email"
-                    type="email"
-                    autocomplete="username"
-                    :error-message="form.errors.email"
-                />
+    <div class="space-y-6">
+        <Card
+            as="section"
+            :interactive="false"
+            padding="p-6 sm:p-7"
+        >
+            <div
+                class="flex flex-col sm:flex-row sm:items-center justify-between gap-5"
+            >
+                <div class="flex items-center gap-4 sm:gap-5">
+                    <div
+                        class="h-20 w-20 shrink-0 overflow-hidden rounded-full ring-2 ring-white/10 bg-neutral-900 sm:h-22 sm:w-22"
+                    >
+                        <img
+                            :src="user?.profile_photo_url"
+                            :alt="user?.name"
+                            class="h-full w-full object-cover"
+                        />
+                    </div>
+
+                    <div class="min-w-0 space-y-1">
+                        <div class="flex flex-wrap items-center gap-2">
+                            <h3
+                                class="truncate text-lg font-bold text-white sm:text-xl"
+                            >
+                                {{ user?.name }}
+                            </h3>
+                            <span
+                                v-if="userTypeLabel"
+                                class="pill-container px-2.5 py-0.5 text-[11px] font-medium text-neutral-300"
+                            >
+                                {{ userTypeLabel }}
+                            </span>
+                        </div>
+                        <p class="truncate text-xs text-neutral-400 sm:text-sm">
+                            {{ user?.email }}
+                        </p>
+                    </div>
+                </div>
+
+                <div class="flex items-center sm:self-center">
+                    <PrimaryButton
+                        type="button"
+                        color="pill"
+                        padding="px-4 py-2"
+                        @click="photoModalOpen = true"
+                    >
+                        <Camera :size="15" />
+                        <span>Alterar fotografia</span>
+                    </PrimaryButton>
+                </div>
+            </div>
+        </Card>
+
+        <Card
+            as="section"
+            :interactive="false"
+            padding="p-6 sm:p-8"
+        >
+            <template #header>
+                <div class="space-y-1">
+                    <h2 class="text-lg font-bold tracking-tight text-white sm:text-xl">
+                        Informações Pessoais
+                    </h2>
+                    <p class="text-xs text-neutral-400 sm:text-sm">
+                        Atualiza os dados da tua conta e informações de contacto.
+                    </p>
+                </div>
+            </template>
+
+            <form
+                id="profile-info-form"
+                class="flex flex-col gap-5"
+                @submit.prevent="updateProfileInformation"
+            >
+                <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
+                    <TextInput
+                        id="name"
+                        v-model="form.name"
+                        label="Nome"
+                        type="text"
+                        autocomplete="name"
+                        :error-message="form.errors.name"
+                    />
+
+                    <TextInput
+                        id="email"
+                        v-model="form.email"
+                        label="Email"
+                        type="email"
+                        autocomplete="username"
+                        :error-message="form.errors.email"
+                    />
+                </div>
 
                 <div
                     v-if="
                         $page.props.jetstream.hasEmailVerification &&
                         user?.email_verified_at === null
                     "
+                    class="rounded-2xl border border-amber-500/20 bg-amber-500/10 p-4 text-xs text-amber-200"
                 >
-                    <p class="mt-2 text-sm dark:text-white">
+                    <p>
                         O teu endereço de e-mail não foi verificado.
-
                         <Link
                             :href="route('verification.send')"
                             method="post"
                             as="button"
-                            class="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-hidden dark:text-gray-400 dark:hover:text-gray-100 dark:focus:ring-offset-gray-800"
+                            class="ml-1 font-semibold underline hover:text-white"
                             @click.prevent="sendEmailVerification"
                         >
                             Clica aqui para reenviar o e-mail de verificação.
@@ -112,21 +266,31 @@ const sendEmailVerification = () => {
 
                     <div
                         v-show="verificationLinkSent"
-                        class="mt-2 text-sm font-medium text-green-600 dark:text-green-400"
+                        class="mt-2 font-medium text-emerald-400"
                     >
-                        Um novo link de verificação foi enviado para o teu
-                        email.
+                        Um novo link de verificação foi enviado para o teu email.
                     </div>
                 </div>
 
-                <TextInput
-                    v-if="form.type === 'speaker'"
-                    id="title"
-                    v-model="form.title"
-                    label="Título"
-                    type="text"
-                    :error-message="form.errors.title"
-                />
+                <template v-if="form.type === 'speaker'">
+                    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
+                        <TextInput
+                            id="title"
+                            v-model="form.title"
+                            label="Título"
+                            type="text"
+                            :error-message="form.errors.title"
+                        />
+
+                        <TextInput
+                            id="organization"
+                            v-model="form.organization"
+                            label="Organização"
+                            type="text"
+                            :error-message="form.errors.organization"
+                        />
+                    </div>
+                </template>
 
                 <TextInput
                     v-if="form.type === 'company' || form.type === 'speaker'"
@@ -137,87 +301,222 @@ const sendEmailVerification = () => {
                     :error-message="form.errors.description"
                 />
 
-                <TextInput
-                    v-if="form.type === 'speaker'"
-                    id="organization"
-                    v-model="form.organization"
-                    label="Organização"
-                    type="text"
-                    :error-message="form.errors.organization"
-                />
-
                 <template v-if="form.type !== 'admin'">
-                    <TextInput
-                        id="public_email"
-                        v-model="form.public_email"
-                        label="Email público"
-                        type="email"
-                        autocomplete="email"
-                        :error-message="form.errors.public_email"
-                    />
+                    <div class="mt-2 border-t border-white/8 pt-5">
+                        <h3 class="text-sm font-semibold text-white">
+                            Redes Sociais & Links
+                        </h3>
+                        <p class="mt-0.5 mb-4 text-xs text-neutral-400">
+                            Links públicos visíveis no teu cartão de perfil.
+                        </p>
 
-                    <TextInput
-                        id="facebook"
-                        v-model="form.facebook"
-                        label="Facebook"
-                        type="url"
-                        :error-message="form.errors.facebook"
-                    />
+                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                            <TextInput
+                                id="public_email"
+                                v-model="form.public_email"
+                                label="Email público"
+                                type="email"
+                                placeholder="exemplo@dominio.com"
+                                autocomplete="email"
+                                :error-message="form.errors.public_email"
+                            >
+                                <template #leading>
+                                    <SocialIcon platform="email" :size="16" class="shrink-0 text-neutral-400" />
+                                </template>
+                            </TextInput>
 
-                    <TextInput
-                        id=".github"
-                        v-model="form.github"
-                        label="GitHub"
-                        type="url"
-                        :error-message="form.errors.github"
-                    />
+                            <TextInput
+                                id="website"
+                                v-model="form.website"
+                                label="Website"
+                                type="url"
+                                placeholder="https://oseusite.com"
+                                :error-message="form.errors.website"
+                            >
+                                <template #leading>
+                                    <SocialIcon platform="website" :size="16" class="shrink-0 text-neutral-400" />
+                                </template>
+                            </TextInput>
 
-                    <TextInput
-                        id="instagram"
-                        v-model="form.instagram"
-                        label="Instagram"
-                        type="url"
-                        :error-message="form.errors.instagram"
-                    />
+                            <TextInput
+                                id="github"
+                                v-model="form.github"
+                                label="GitHub"
+                                type="url"
+                                placeholder="https://github.com/utilizador"
+                                :error-message="form.errors.github"
+                            >
+                                <template #leading>
+                                    <SocialIcon platform="github" :size="16" class="shrink-0 text-neutral-400" />
+                                </template>
+                            </TextInput>
 
-                    <TextInput
-                        id="linkedin"
-                        v-model="form.linkedin"
-                        label="Linkedin"
-                        type="url"
-                        :error-message="form.errors.linkedin"
-                    />
+                            <TextInput
+                                id="linkedin"
+                                v-model="form.linkedin"
+                                label="LinkedIn"
+                                type="url"
+                                placeholder="https://linkedin.com/in/utilizador"
+                                :error-message="form.errors.linkedin"
+                            >
+                                <template #leading>
+                                    <SocialIcon platform="linkedin" :size="16" class="shrink-0 text-neutral-400" />
+                                </template>
+                            </TextInput>
 
-                    <TextInput
-                        id="twitter"
-                        v-model="form.twitter"
-                        label="Twitter"
-                        type="url"
-                        :error-message="form.errors.twitter"
-                    />
+                            <TextInput
+                                id="twitter"
+                                v-model="form.twitter"
+                                label="Twitter / X"
+                                type="url"
+                                placeholder="https://x.com/utilizador"
+                                :error-message="form.errors.twitter"
+                            >
+                                <template #leading>
+                                    <SocialIcon platform="twitter" :size="16" class="shrink-0 text-neutral-400" />
+                                </template>
+                            </TextInput>
 
-                    <TextInput
-                        id="website"
-                        v-model="form.website"
-                        label="Website"
-                        type="url"
-                        :error-message="form.errors.website"
-                    />
+                            <TextInput
+                                id="instagram"
+                                v-model="form.instagram"
+                                label="Instagram"
+                                type="url"
+                                placeholder="https://instagram.com/utilizador"
+                                :error-message="form.errors.instagram"
+                            >
+                                <template #leading>
+                                    <SocialIcon platform="instagram" :size="16" class="shrink-0 text-neutral-400" />
+                                </template>
+                            </TextInput>
+
+                            <TextInput
+                                id="facebook"
+                                v-model="form.facebook"
+                                label="Facebook"
+                                type="url"
+                                placeholder="https://facebook.com/utilizador"
+                                :error-message="form.errors.facebook"
+                            >
+                                <template #leading>
+                                    <SocialIcon platform="facebook" :size="16" class="shrink-0 text-neutral-400" />
+                                </template>
+                            </TextInput>
+                        </div>
+                    </div>
                 </template>
+            </form>
+
+            <template #footer>
+                <div class="flex w-full items-center justify-end gap-3">
+                    <span
+                        v-show="form.recentlySuccessful"
+                        class="text-xs font-medium text-emerald-400"
+                    >
+                        Guardado com sucesso.
+                    </span>
+
+                    <PrimaryButton
+                        type="submit"
+                        form="profile-info-form"
+                        :class="{ 'opacity-25': form.processing }"
+                        :disabled="form.processing"
+                    >
+                        Guardar alterações
+                    </PrimaryButton>
+                </div>
+            </template>
+        </Card>
+
+        <Modal
+            v-model="photoModalOpen"
+            max-width="md"
+            title="Fotografia de Perfil"
+            description="Personaliza a tua fotografia visível no teu perfil."
+            @close="closePhotoModal"
+        >
+            <div class="flex flex-col items-center justify-center py-2">
+                <div
+                    class="h-32 w-32 shrink-0 overflow-hidden rounded-full ring-4 ring-white/10 bg-neutral-900"
+                >
+                    <img
+                        :src="photoPreview ?? user?.profile_photo_url"
+                        :alt="user?.name"
+                        class="h-full w-full object-cover"
+                    />
+                </div>
             </div>
-        </template>
 
-        <template #actions>
-            <ActionMessage :on="form.recentlySuccessful" class="mr-3">
-                Guardado.
-            </ActionMessage>
+            <input
+                ref="photoInput"
+                type="file"
+                class="hidden"
+                accept="image/jpeg,image/png,image/jpg"
+                @change="handlePhotoChange"
+            />
 
-            <PrimaryButton
-                :class="{ 'opacity-25': form.processing }"
-                :disabled="form.processing"
+            <div class="mt-3 flex flex-col items-center gap-1.5 text-center">
+                <PrimaryButton
+                    type="button"
+                    color="pill"
+                    padding="px-5 py-2"
+                    @click="photoInput?.click()"
+                >
+                    <Upload :size="14" />
+                    <span>{{ photoPreview ? "Escolher outro ficheiro" : "Carregar nova foto" }}</span>
+                </PrimaryButton>
+                <span class="text-[11px] text-neutral-500">
+                    Formatos aceites: JPG ou PNG (máx. 10MB)
+                </span>
+            </div>
+
+            <div
+                v-if="photoError || photoForm.errors.photo"
+                class="mt-3 flex items-center gap-2 rounded-xl border border-red-500/20 bg-red-500/10 p-2.5 text-xs text-red-400"
             >
-                Guardar
-            </PrimaryButton>
-        </template>
-    </FormSection>
+                <AlertCircle :size="15" class="shrink-0" />
+                <span>{{ photoError || photoForm.errors.photo }}</span>
+            </div>
+
+            <template #footer>
+                <div class="flex w-full items-center justify-between">
+                    <PrimaryButton
+                        v-if="user?.profile_photo_path && !photoPreview"
+                        type="button"
+                        color="danger"
+                        padding="px-3.5 py-1.5"
+                        :disabled="isDeletingPhoto"
+                        @click="deletePhoto"
+                    >
+                        <Trash2 :size="13" />
+                        <span>{{ isDeletingPhoto ? "A remover..." : "Remover foto" }}</span>
+                    </PrimaryButton>
+                    <div v-else />
+
+                    <div class="flex items-center gap-2">
+                        <PrimaryButton
+                            type="button"
+                            color="pill"
+                            padding="px-4 py-1.5"
+                            @click="closePhotoModal"
+                        >
+                            {{ photoPreview ? "Cancelar" : "Fechar" }}
+                        </PrimaryButton>
+
+                        <PrimaryButton
+                            v-if="photoPreview"
+                            type="button"
+                            color="pill"
+                            padding="px-4 py-1.5"
+                            :disabled="photoForm.processing"
+                            @click="savePhoto"
+                        >
+                            {{ photoForm.processing ? "A guardar..." : "Guardar fotografia" }}
+                        </PrimaryButton>
+                    </div>
+                </div>
+            </template>
+        </Modal>
+    </div>
 </template>
+

From 79b61312485106ac2fe349bcfadccf12b10526e8 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Fri, 4 Sep 2026 11:36:22 +0100
Subject: [PATCH 13/33] fix: profile picture in navbar

---
 package-lock.json                           |   2 +-
 resources/js/Components/Navbar.vue          |  11 +-
 resources/js/Components/UI/PillSelector.vue | 238 +++++---------------
 3 files changed, 58 insertions(+), 193 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f3b2d4c6..844b8ef4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-    "name": "sinf-website",
+    "name": "html",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
diff --git a/resources/js/Components/Navbar.vue b/resources/js/Components/Navbar.vue
index 3e423af2..eb047f7e 100644
--- a/resources/js/Components/Navbar.vue
+++ b/resources/js/Components/Navbar.vue
@@ -131,9 +131,12 @@ const authItems = computed<PillOption[]>(() => {
         return [
             {
                 id: "auth-user",
-                avatar: {
+                ariaLabel: user.value.name,
+                class: "flex h-7 w-7 items-center justify-center p-0 overflow-hidden",
+                image: {
                     src: user.value.profile_photo_url,
                     alt: user.value.name,
+                    class: "h-full w-full object-cover transition-all duration-200 hover:brightness-110",
                 },
                 dropdown: {
                     align: "right",
@@ -246,12 +249,6 @@ onUnmounted(() => {
                             <p class="truncate text-[11px] text-neutral-400">
                                 {{ user?.email }}
                             </p>
-                            <span
-                                v-if="isAdmin"
-                                class="mt-1.5 inline-block rounded-md border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-semibold text-amber-300"
-                            >
-                                Administrador
-                            </span>
                         </div>
 
                         <div class="mt-1 space-y-0.5">
diff --git a/resources/js/Components/UI/PillSelector.vue b/resources/js/Components/UI/PillSelector.vue
index 98427ef5..cb57c07c 100644
--- a/resources/js/Components/UI/PillSelector.vue
+++ b/resources/js/Components/UI/PillSelector.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type Component } from "vue";
+import type { Component } from "vue";
 import { Link } from "@inertiajs/vue3";
 import Dropdown from "@/Components/Dropdown.vue";
 import DropdownLink from "@/Components/DropdownLink.vue";
@@ -28,11 +28,6 @@ export interface PillDropdownConfig {
     items?: PillDropdownItem[];
 }
 
-export interface PillAvatarConfig {
-    src?: string;
-    alt?: string;
-}
-
 export interface PillImageConfig {
     src: string;
     alt?: string;
@@ -45,7 +40,6 @@ export interface PillOption {
     sublabel?: string;
     icon?: Component;
     trailingIcon?: Component;
-    avatar?: string | PillAvatarConfig;
     image?: string | PillImageConfig;
     count?: number | string;
     href?: string;
@@ -53,6 +47,8 @@ export interface PillOption {
     active?: boolean;
     ariaLabel?: string;
     dropdown?: PillDropdownConfig;
+    class?: string;
+    itemClass?: string;
 }
 
 interface Props {
@@ -101,19 +97,7 @@ const isExternalOrAnchor = (href?: string) => {
     );
 };
 
-// Helper methods for avatar and image
-const getAvatarSrc = (item: PillOption): string | undefined => {
-    if (!item.avatar) return undefined;
-    return typeof item.avatar === "string" ? item.avatar : item.avatar.src;
-};
-
-const getAvatarAlt = (item: PillOption): string => {
-    if (!item.avatar) return "";
-    return typeof item.avatar === "string"
-        ? (item.label ?? "")
-        : (item.avatar.alt ?? item.label ?? "");
-};
-
+// Helper methods for image
 const getImageSrc = (item: PillOption): string | undefined => {
     if (!item.image) return undefined;
     return typeof item.image === "string" ? item.image : item.image.src;
@@ -133,18 +117,10 @@ const getImageClass = (item: PillOption): string => {
     return "h-4 w-auto object-contain";
 };
 
-const isAvatarOnly = (item: PillOption): boolean => {
-    return Boolean(getAvatarSrc(item) && !item.label && !item.sublabel);
-};
-
 const isImageOnly = (item: PillOption): boolean => {
     return Boolean(getImageSrc(item) && !item.label && !item.sublabel);
 };
 
-const isSingleAvatarOnly = computed(() => {
-    return props.items.length === 1 && isAvatarOnly(props.items[0]);
-});
-
 const sizeClasses = {
     sm: "px-3 py-1.5 text-xs gap-1.5",
     md: "px-4 py-2 text-xs sm:text-sm gap-2",
@@ -157,18 +133,6 @@ const imageOnlyPadding = {
     lg: "px-4 py-2",
 };
 
-const avatarSizes = {
-    sm: "h-7 w-7",
-    md: "h-8 w-8",
-    lg: "h-10 w-10",
-};
-
-const avatarInlineSizes = {
-    sm: "h-5 w-5",
-    md: "h-6 w-6",
-    lg: "h-7 w-7",
-};
-
 const iconSizes = {
     sm: 14,
     md: 16,
@@ -179,19 +143,10 @@ const getItemClass = (item: PillOption, activeState?: boolean) => {
     const isActive =
         activeState !== undefined ? activeState : isItemActive(item);
 
-    if (isAvatarOnly(item)) {
-        return [
-            "group inline-flex shrink-0 items-center justify-center rounded-full p-0 bg-transparent border-0 shadow-none transition-all duration-200 focus:outline-none cursor-pointer",
-            isActive ? "scale-105" : "hover:scale-105",
-            item.disabled
-                ? "cursor-not-allowed opacity-40 pointer-events-none"
-                : "",
-            props.itemClass,
-        ];
-    }
-
     let paddingAndTextClass = sizeClasses[props.size];
-    if (isImageOnly(item)) {
+    if (item.class ?? item.itemClass) {
+        paddingAndTextClass = (item.class ?? item.itemClass)!;
+    } else if (isImageOnly(item)) {
         paddingAndTextClass = imageOnlyPadding[props.size];
     }
 
@@ -210,12 +165,8 @@ const getItemClass = (item: PillOption, activeState?: boolean) => {
 <template>
     <component
         :is="as"
-        class="pill-container justify-center"
-        :class="[
-            isSingleAvatarOnly ? 'p-1' : 'p-1.5',
-            wrap ? 'flex-wrap' : 'flex-nowrap',
-            containerClass,
-        ]"
+        class="pill-container justify-center p-1.5"
+        :class="[wrap ? 'flex-wrap' : 'flex-nowrap', containerClass]"
         aria-label="Selector"
     >
         <slot name="leading" />
@@ -241,64 +192,50 @@ const getItemClass = (item: PillOption, activeState?: boolean) => {
                             :active="open || isItemActive(item)"
                             :select="() => handleSelect(item)"
                         >
-                            <!-- Avatar Only -->
-                            <template v-if="isAvatarOnly(item)">
-                                <img
-                                    :src="getAvatarSrc(item)"
-                                    :alt="getAvatarAlt(item)"
-                                    :class="[
-                                        avatarSizes[size],
-                                        'shrink-0 rounded-full bg-neutral-800 object-cover transition-all duration-200',
-                                        open || isItemActive(item)
-                                            ? 'shadow-[0_0_12px_rgba(255,255,255,0.35)] ring-2 ring-white brightness-110'
-                                            : 'ring-1 ring-white/20 group-hover:ring-2 group-hover:ring-white/60 group-hover:brightness-110',
-                                    ]"
-                                />
-                            </template>
-
-                            <!-- Normal Item with/without Avatar/Icon/Label -->
-                            <template v-else>
-                                <img
-                                    v-if="getAvatarSrc(item)"
-                                    :src="getAvatarSrc(item)"
-                                    :alt="getAvatarAlt(item)"
-                                    :class="[
-                                        avatarInlineSizes[size],
-                                        'shrink-0 rounded-full object-cover ring-1 ring-white/20',
-                                    ]"
-                                />
-                                <component
-                                    :is="item.icon"
-                                    v-else-if="item.icon"
-                                    :size="iconSizes[size]"
-                                    class="shrink-0"
-                                />
-                                <span v-if="item.label">{{ item.label }}</span>
-                                <span
-                                    v-if="item.sublabel"
-                                    class="text-[11px] font-normal text-neutral-400"
-                                >
-                                    {{ item.sublabel }}
-                                </span>
-                                <span
-                                    v-if="item.count !== undefined"
-                                    class="ml-0.5 rounded-full bg-white/10 px-1.5 py-0.5 text-[10px] font-semibold text-neutral-300 transition-colors"
-                                >
-                                    {{ item.count }}
-                                </span>
-                                <component
-                                    :is="item.trailingIcon"
-                                    v-if="item.trailingIcon"
-                                    :size="iconSizes[size]"
-                                    class="shrink-0"
-                                />
-                                <ChevronDown
-                                    v-else-if="item.label"
-                                    :size="size === 'sm' ? 12 : 14"
-                                    class="shrink-0 text-neutral-400 transition-transform duration-200"
-                                    :class="{ 'rotate-180 text-white': open }"
-                                />
-                            </template>
+                            <!-- Image -->
+                            <img
+                                v-if="getImageSrc(item)"
+                                :src="getImageSrc(item)"
+                                :alt="getImageAlt(item)"
+                                :class="getImageClass(item)"
+                            />
+                            <!-- Icon -->
+                            <component
+                                :is="item.icon"
+                                v-else-if="item.icon"
+                                :size="iconSizes[size]"
+                                class="shrink-0"
+                            />
+                            <span v-if="item.label">{{ item.label }}</span>
+                            <span
+                                v-if="item.sublabel"
+                                class="text-[11px] font-normal text-neutral-400"
+                            >
+                                {{ item.sublabel }}
+                            </span>
+                            <span
+                                v-if="item.count !== undefined"
+                                class="ml-0.5 rounded-full bg-white/10 px-1.5 py-0.5 text-[10px] font-semibold text-neutral-300 transition-colors"
+                                :class="
+                                    open || isItemActive(item)
+                                        ? 'bg-white/20 text-white'
+                                        : 'text-neutral-400'
+                                "
+                            >
+                                {{ item.count }}
+                            </span>
+                            <component
+                                :is="item.trailingIcon"
+                                v-if="item.trailingIcon"
+                                :size="iconSizes[size]"
+                                class="shrink-0"
+                            />
+                            <ChevronDown
+                                v-else-if="item.label"
+                                :size="size === 'sm' ? 12 : 14"
+                                class="shrink-0 text-neutral-400 transition-transform duration-200"
+                                :class="{ 'rotate-180 text-white': open }"
+                            />
                         </slot>
                     </button>
                 </template>
@@ -413,29 +350,6 @@ const getItemClass = (item: PillOption, activeState?: boolean) => {
                         :alt="getImageAlt(item)"
                         :class="getImageClass(item)"
                     />
-                    <!-- Avatar Only -->
-                    <img
-                        v-else-if="isAvatarOnly(item)"
-                        :src="getAvatarSrc(item)"
-                        :alt="getAvatarAlt(item)"
-                        :class="[
-                            avatarSizes[size],
-                            'shrink-0 rounded-full bg-neutral-800 object-cover transition-all duration-200',
-                            isItemActive(item)
-                                ? 'shadow-[0_0_12px_rgba(255,255,255,0.35)] ring-2 ring-white brightness-110'
-                                : 'ring-1 ring-white/20 group-hover:ring-2 group-hover:ring-white/60 group-hover:brightness-110',
-                        ]"
-                    />
-                    <!-- Avatar with label -->
-                    <img
-                        v-else-if="getAvatarSrc(item)"
-                        :src="getAvatarSrc(item)"
-                        :alt="getAvatarAlt(item)"
-                        :class="[
-                            avatarInlineSizes[size],
-                            'shrink-0 rounded-full object-cover ring-1 ring-white/20',
-                        ]"
-                    />
                     <!-- Icon -->
                     <component
                         :is="item.icon"
@@ -491,29 +405,6 @@ const getItemClass = (item: PillOption, activeState?: boolean) => {
                         :alt="getImageAlt(item)"
                         :class="getImageClass(item)"
                     />
-                    <!-- Avatar Only -->
-                    <img
-                        v-else-if="isAvatarOnly(item)"
-                        :src="getAvatarSrc(item)"
-                        :alt="getAvatarAlt(item)"
-                        :class="[
-                            avatarSizes[size],
-                            'shrink-0 rounded-full bg-neutral-800 object-cover transition-all duration-200',
-                            isItemActive(item)
-                                ? 'shadow-[0_0_12px_rgba(255,255,255,0.35)] ring-2 ring-white brightness-110'
-                                : 'ring-1 ring-white/20 group-hover:ring-2 group-hover:ring-white/60 group-hover:brightness-110',
-                        ]"
-                    />
-                    <!-- Avatar with label -->
-                    <img
-                        v-else-if="getAvatarSrc(item)"
-                        :src="getAvatarSrc(item)"
-                        :alt="getAvatarAlt(item)"
-                        :class="[
-                            avatarInlineSizes[size],
-                            'shrink-0 rounded-full object-cover ring-1 ring-white/20',
-                        ]"
-                    />
                     <!-- Icon -->
                     <component
                         :is="item.icon"
@@ -570,29 +461,6 @@ const getItemClass = (item: PillOption, activeState?: boolean) => {
                         :alt="getImageAlt(item)"
                         :class="getImageClass(item)"
                     />
-                    <!-- Avatar Only -->
-                    <img
-                        v-else-if="isAvatarOnly(item)"
-                        :src="getAvatarSrc(item)"
-                        :alt="getAvatarAlt(item)"
-                        :class="[
-                            avatarSizes[size],
-                            'shrink-0 rounded-full bg-neutral-800 object-cover transition-all duration-200',
-                            isItemActive(item)
-                                ? 'shadow-[0_0_12px_rgba(255,255,255,0.35)] ring-2 ring-white brightness-110'
-                                : 'ring-1 ring-white/20 group-hover:ring-2 group-hover:ring-white/60 group-hover:brightness-110',
-                        ]"
-                    />
-                    <!-- Avatar with label -->
-                    <img
-                        v-else-if="getAvatarSrc(item)"
-                        :src="getAvatarSrc(item)"
-                        :alt="getAvatarAlt(item)"
-                        :class="[
-                            avatarInlineSizes[size],
-                            'shrink-0 rounded-full object-cover ring-1 ring-white/20',
-                        ]"
-                    />
                     <!-- Icon -->
                     <component
                         :is="item.icon"

From 4b358384b1ed621ced811fabee256bc5aa9a527b Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Fri, 4 Sep 2026 11:53:01 +0100
Subject: [PATCH 14/33] feat: better dropdowns

---
 resources/css/app.css                       |  10 +-
 resources/js/Components/AdminNavbar.vue     |  23 ++--
 resources/js/Components/Dropdown.vue        | 124 +++++++++++++++-----
 resources/js/Components/DropdownLink.vue    |  12 +-
 resources/js/Components/Navbar.vue          |  28 +++--
 resources/js/Components/UI/PillSelector.vue |  50 +++++---
 6 files changed, 171 insertions(+), 76 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 5baa7025..2032af5f 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -153,7 +153,6 @@
     padding: 0.25rem;
     box-shadow: var(--shadow-pill-inset);
     backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
 }
 
 @utility pill-item {
@@ -197,12 +196,11 @@
 }
 
 @utility glass-dropdown {
-    border-radius: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background-color: rgba(17, 18, 21, 0.95);
-    box-shadow: var(--shadow-dropdown);
+    border-radius: 1.25rem;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background-color: rgba(0, 0, 0, 0.75);
+    box-shadow: var(--shadow-pill-inset), var(--shadow-dropdown);
     backdrop-filter: blur(24px);
-    -webkit-backdrop-filter: blur(24px);
 }
 
 @utility glow-orb-primary-1 {
diff --git a/resources/js/Components/AdminNavbar.vue b/resources/js/Components/AdminNavbar.vue
index bb733707..71e87cf9 100644
--- a/resources/js/Components/AdminNavbar.vue
+++ b/resources/js/Components/AdminNavbar.vue
@@ -47,15 +47,20 @@ const pageRoutes: Routes = {
                         />
                     </template>
                     <template #content>
-                        <DropdownLink :href="route('profile.show')">
-                            Perfil
-                        </DropdownLink>
-                        <DropdownLink :href="route('home')">
-                            Voltar ao site
-                        </DropdownLink>
-                        <DropdownLink :href="route('logout')" method="post">
-                            Logout
-                        </DropdownLink>
+                        <div class="space-y-0.5">
+                            <DropdownLink
+                                :href="route('profile.show')"
+                                :active="route().current('profile.show')"
+                            >
+                                Perfil
+                            </DropdownLink>
+                            <DropdownLink :href="route('home')">
+                                Voltar ao site
+                            </DropdownLink>
+                            <DropdownLink :href="route('logout')" method="post">
+                                Logout
+                            </DropdownLink>
+                        </div>
                     </template>
                 </Dropdown>
             </template>
diff --git a/resources/js/Components/Dropdown.vue b/resources/js/Components/Dropdown.vue
index 175e7c78..4a9dcfcb 100644
--- a/resources/js/Components/Dropdown.vue
+++ b/resources/js/Components/Dropdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 
 interface Props {
     align?: "left" | "right" | "center";
@@ -14,6 +14,13 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const open = ref(false);
+const triggerRef = ref<HTMLElement | null>(null);
+const dropdownRef = ref<HTMLElement | null>(null);
+const dropdownStyle = ref<{
+    top?: string;
+    left?: string;
+}>({});
+
 let closeTimer: ReturnType<typeof setTimeout> | null = null;
 
 const onMouseEnter = () => {
@@ -44,11 +51,67 @@ const closeOnEscape = (e: KeyboardEvent) => {
 
 const handleClickOutside = (e: MouseEvent) => {
     const target = e.target as HTMLElement | null;
-    if (!target?.closest("[data-dropdown-root]")) {
+    if (
+        !triggerRef.value?.contains(target) &&
+        !dropdownRef.value?.contains(target)
+    ) {
         open.value = false;
     }
 };
 
+const widthPixelMap: Record<string, number> = {
+    "20": 80,
+    "32": 128,
+    "40": 160,
+    "44": 176,
+    "48": 192,
+    "52": 208,
+    "56": 224,
+    "60": 240,
+    "64": 256,
+    "72": 288,
+};
+
+const updatePosition = () => {
+    if (!open.value || !triggerRef.value) return;
+
+    const rect = triggerRef.value.getBoundingClientRect();
+    const dropdownWidth =
+        dropdownRef.value?.offsetWidth ||
+        widthPixelMap[props.width.toString()] ||
+        192;
+    const docWidth = document.documentElement.clientWidth;
+
+    let left = rect.left;
+    if (props.align === "right") {
+        left = rect.right - dropdownWidth;
+    } else if (props.align === "center") {
+        left = rect.left + (rect.width - dropdownWidth) / 2;
+    }
+
+    // Clamp horizontally to stay within viewport with 8px margin
+    left = Math.max(8, Math.min(left, docWidth - dropdownWidth - 8));
+
+    dropdownStyle.value = {
+        top: `${Math.round(rect.bottom + 8)}px`,
+        left: `${Math.round(left)}px`,
+    };
+};
+
+watch(open, (isOpen) => {
+    if (isOpen) {
+        updatePosition();
+        nextTick(() => {
+            updatePosition();
+        });
+        window.addEventListener("scroll", updatePosition, { passive: true });
+        window.addEventListener("resize", updatePosition, { passive: true });
+    } else {
+        window.removeEventListener("scroll", updatePosition);
+        window.removeEventListener("resize", updatePosition);
+    }
+});
+
 onMounted(() => {
     document.addEventListener("keydown", closeOnEscape);
     document.addEventListener("click", handleClickOutside);
@@ -57,6 +120,8 @@ onMounted(() => {
 onUnmounted(() => {
     document.removeEventListener("keydown", closeOnEscape);
     document.removeEventListener("click", handleClickOutside);
+    window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("resize", updatePosition);
 });
 
 const widthClass = computed(() => {
@@ -64,22 +129,17 @@ const widthClass = computed(() => {
         {
             "20": "w-20",
             "32": "w-32",
+            "40": "w-40",
+            "44": "w-44",
             "48": "w-48",
             "52": "w-52",
             "56": "w-56",
+            "60": "w-60",
             "64": "w-64",
+            "72": "w-72",
         }[props.width.toString()] || "w-48"
     );
 });
-
-const alignmentClasses = computed(() => {
-    if (props.align === "left") {
-        return "left-0";
-    } else if (props.align === "right") {
-        return "right-0";
-    }
-    return "left-1/2 -translate-x-1/2";
-});
 </script>
 
 <template>
@@ -89,28 +149,34 @@ const alignmentClasses = computed(() => {
         @mouseenter="onMouseEnter"
         @mouseleave="onMouseLeave"
     >
-        <div @click="toggle">
+        <div ref="triggerRef" @click="toggle">
             <slot name="trigger" :open="open" />
         </div>
 
-        <Transition
-            enter-active-class="transition duration-150 ease-out"
-            enter-from-class="opacity-0 scale-95 -translate-y-1"
-            enter-to-class="opacity-100 scale-100 translate-y-0"
-            leave-active-class="transition duration-100 ease-in"
-            leave-from-class="opacity-100 scale-100 translate-y-0"
-            leave-to-class="opacity-0 scale-95 -translate-y-1"
-        >
-            <div
-                v-if="open"
-                class="glass-dropdown absolute z-50 mt-2 ring-1 ring-white/5"
-                :class="[widthClass, alignmentClasses]"
-                @click="close"
+        <Teleport to="body">
+            <Transition
+                enter-active-class="transition duration-150 ease-out"
+                enter-from-class="opacity-0 scale-95 -translate-y-1"
+                enter-to-class="opacity-100 scale-100 translate-y-0"
+                leave-active-class="transition duration-100 ease-in"
+                leave-from-class="opacity-100 scale-100 translate-y-0"
+                leave-to-class="opacity-0 scale-95 -translate-y-1"
             >
-                <div :class="contentClasses">
-                    <slot name="content" :close="close" />
+                <div
+                    v-if="open"
+                    ref="dropdownRef"
+                    class="glass-dropdown fixed z-100 before:absolute before:-top-2 before:left-0 before:h-2 before:w-full before:content-['']"
+                    :class="widthClass"
+                    :style="dropdownStyle"
+                    @mouseenter="onMouseEnter"
+                    @mouseleave="onMouseLeave"
+                    @click="close"
+                >
+                    <div :class="contentClasses">
+                        <slot name="content" :close="close" />
+                    </div>
                 </div>
-            </div>
-        </Transition>
+            </Transition>
+        </Teleport>
     </div>
 </template>
diff --git a/resources/js/Components/DropdownLink.vue b/resources/js/Components/DropdownLink.vue
index 77680d24..ecfb651e 100644
--- a/resources/js/Components/DropdownLink.vue
+++ b/resources/js/Components/DropdownLink.vue
@@ -8,6 +8,7 @@ interface Props {
     method?: "get" | "post";
     only?: string[];
     danger?: boolean;
+    active?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -16,6 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
     method: "get",
     only: undefined,
     danger: false,
+    active: false,
 });
 
 const isExternalOrAnchor = computed(() => {
@@ -28,9 +30,13 @@ const isExternalOrAnchor = computed(() => {
 });
 
 const classes = computed(() => {
-    return props.danger || props.method === "post"
-        ? "group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl px-3 py-2 text-left text-xs font-medium text-red-400 transition-colors hover:bg-red-500/10 hover:text-red-300 focus:outline-none"
-        : "group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl px-3 py-2 text-left text-xs font-medium text-neutral-300 transition-colors hover:bg-white/[0.08] hover:text-white focus:outline-none";
+    if (props.danger || props.method === "post") {
+        return "group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl px-3 py-2 text-left text-xs font-medium text-red-400 transition-all duration-150 hover:bg-red-500/10 hover:text-red-300 active:scale-[0.98] focus:outline-none";
+    }
+    if (props.active) {
+        return "group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl bg-white/14 px-3 py-2 text-left text-xs font-semibold text-white shadow-pill-active transition-all duration-150 active:scale-[0.98] focus:outline-none";
+    }
+    return "group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl px-3 py-2 text-left text-xs font-medium text-neutral-300 transition-all duration-150 hover:bg-white/8 hover:text-white active:scale-[0.98] focus:outline-none";
 });
 </script>
 
diff --git a/resources/js/Components/Navbar.vue b/resources/js/Components/Navbar.vue
index eb047f7e..d2bbf39e 100644
--- a/resources/js/Components/Navbar.vue
+++ b/resources/js/Components/Navbar.vue
@@ -107,6 +107,10 @@ const navItems = computed<PillOption[]>(() => {
                     id: comp.id,
                     label: comp.name,
                     href: route("competition.show", { competition: comp.slug }),
+                    active:
+                        isCurrentRoute("competition.show") &&
+                        (page.props.competition as Competition | undefined)
+                            ?.slug === comp.slug,
                     trailingIcon: ChevronRight,
                 })),
             },
@@ -206,9 +210,9 @@ onUnmounted(() => {
                     class="hidden md:flex"
                 >
                     <template #dropdown-edition>
-                        <div class="p-1">
+                        <div>
                             <div
-                                class="px-2.5 py-1 text-[10px] font-semibold text-neutral-500 uppercase"
+                                class="px-2.5 py-1 text-[10px] font-semibold tracking-wider text-neutral-500 uppercase"
                             >
                                 Edições Anteriores
                             </div>
@@ -222,13 +226,13 @@ onUnmounted(() => {
                                         :href="`https://${edition}.sinf.pt`"
                                         target="_blank"
                                         rel="noopener noreferrer"
-                                        class="flex items-center justify-center gap-1 rounded-lg px-2 py-1.5 text-xs font-medium text-neutral-300 transition-colors hover:bg-white/8 hover:text-white"
+                                        class="flex items-center justify-center gap-1 rounded-xl px-2 py-1.5 text-xs font-medium text-neutral-300 transition-all duration-150 hover:bg-white/8 hover:text-white active:scale-95"
                                     >
                                         <span>{{ edition }}</span>
                                     </a>
                                     <div
                                         v-else
-                                        class="flex items-center justify-center gap-1 rounded-lg bg-white/8 px-2 py-1.5 text-xs font-semibold text-white"
+                                        class="shadow-pill-active flex items-center justify-center gap-1 rounded-xl bg-white/14 px-2 py-1.5 text-xs font-semibold text-white"
                                     >
                                         <span>{{ edition }}</span>
                                     </div>
@@ -252,11 +256,14 @@ onUnmounted(() => {
                         </div>
 
                         <div class="mt-1 space-y-0.5">
-                            <DropdownLink :href="route('profile.show')">
+                            <DropdownLink
+                                :href="route('profile.show')"
+                                :active="isCurrentRoute('profile.show')"
+                            >
                                 <span class="flex items-center gap-2.5">
                                     <UserIcon
                                         :size="16"
-                                        class="text-neutral-400"
+                                        class="text-neutral-400 transition-colors group-hover:text-white"
                                     />
                                     <span>Perfil</span>
                                 </span>
@@ -265,26 +272,27 @@ onUnmounted(() => {
                             <DropdownLink
                                 v-if="isAdmin"
                                 :href="route('admin.index')"
+                                :active="isCurrentRoute('admin.index')"
                             >
                                 <span class="flex items-center gap-2.5">
                                     <ShieldCheck
                                         :size="16"
-                                        class="text-neutral-400"
+                                        class="text-neutral-400 transition-colors group-hover:text-white"
                                     />
                                     <span>Administração</span>
                                 </span>
                             </DropdownLink>
 
-                            <div class="border-t border-white/6 pt-1">
+                            <div class="border-t border-white/8 pt-1">
                                 <button
                                     type="button"
-                                    class="group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl px-3 py-2 text-left text-xs font-medium text-red-400 transition-colors hover:bg-red-500/10 hover:text-red-300 focus:outline-none"
+                                    class="group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl px-3 py-2 text-left text-xs font-medium text-red-400 transition-all duration-150 hover:bg-red-500/10 hover:text-red-300 focus:outline-none active:scale-[0.98]"
                                     @click="logout"
                                 >
                                     <span class="flex items-center gap-2.5">
                                         <LogOut
                                             :size="16"
-                                            class="text-red-400"
+                                            class="text-red-400 transition-colors group-hover:text-red-300"
                                         />
                                         <span>Logout</span>
                                     </span>
diff --git a/resources/js/Components/UI/PillSelector.vue b/resources/js/Components/UI/PillSelector.vue
index cb57c07c..5ea49b40 100644
--- a/resources/js/Components/UI/PillSelector.vue
+++ b/resources/js/Components/UI/PillSelector.vue
@@ -80,6 +80,7 @@ const emit = defineEmits<Emits>();
 
 const isItemActive = (item: PillOption) => {
     if (item.active !== undefined) return item.active;
+    if (item.dropdown?.items?.some((dItem) => dItem.active)) return true;
     if (props.modelValue !== undefined) return props.modelValue === item.id;
     return false;
 };
@@ -255,7 +256,7 @@ const getItemClass = (item: PillOption, activeState?: boolean) => {
                                 >
                                     <hr
                                         v-if="dItem.divider"
-                                        class="my-1 border-white/6"
+                                        class="my-1 border-white/8"
                                     />
                                     <DropdownLink
                                         v-if="dItem.href"
@@ -263,6 +264,7 @@ const getItemClass = (item: PillOption, activeState?: boolean) => {
                                         :method="dItem.method"
                                         :as="dItem.as"
                                         :danger="dItem.danger"
+                                        :active="dItem.active"
                                         @click="
                                             () => {
                                                 dItem.onClick?.();
@@ -275,28 +277,34 @@ const getItemClass = (item: PillOption, activeState?: boolean) => {
                                                 :is="dItem.icon"
                                                 v-if="dItem.icon"
                                                 :size="16"
-                                                class="shrink-0 text-neutral-400"
-                                            />
-                                            <span class="flex-1">{{
-                                                dItem.label
-                                            }}</span>
-                                            <component
-                                                :is="dItem.trailingIcon"
-                                                v-if="dItem.trailingIcon"
-                                                :size="14"
-                                                class="shrink-0 text-neutral-500 opacity-0 transition-all duration-150 group-hover:translate-x-0.5 group-hover:text-white group-hover:opacity-100"
+                                                class="shrink-0 text-neutral-400 transition-colors group-hover:text-white"
                                             />
+                                            <span>{{ dItem.label }}</span>
+                                            <span
+                                                v-if="dItem.sublabel"
+                                                class="text-[11px] font-normal text-neutral-400"
+                                            >
+                                                {{ dItem.sublabel }}
+                                            </span>
                                         </span>
+                                        <component
+                                            :is="dItem.trailingIcon"
+                                            v-if="dItem.trailingIcon"
+                                            :size="14"
+                                            class="shrink-0 text-neutral-500 opacity-0 transition-all duration-150 group-hover:translate-x-0.5 group-hover:text-white group-hover:opacity-100"
+                                        />
                                     </DropdownLink>
                                     <button
                                         v-else
                                         type="button"
-                                        class="group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl px-3 py-2 text-left text-xs font-medium transition-colors hover:bg-white/8 hover:text-white focus:outline-none"
-                                        :class="
+                                        class="group flex w-full cursor-pointer items-center justify-between gap-2.5 rounded-xl px-3 py-2 text-left text-xs font-medium transition-all duration-150 focus:outline-none active:scale-[0.98]"
+                                        :class="[
                                             dItem.danger
                                                 ? 'text-red-400 hover:bg-red-500/10 hover:text-red-300'
-                                                : 'text-neutral-300'
-                                        "
+                                                : dItem.active
+                                                  ? 'shadow-pill-active bg-white/14 font-semibold text-white'
+                                                  : 'text-neutral-300 hover:bg-white/8 hover:text-white',
+                                        ]"
                                         @click="
                                             () => {
                                                 dItem.onClick?.();
@@ -309,11 +317,15 @@ const getItemClass = (item: PillOption, activeState?: boolean) => {
                                                 :is="dItem.icon"
                                                 v-if="dItem.icon"
                                                 :size="16"
-                                                class="shrink-0 text-neutral-400"
+                                                class="shrink-0 text-neutral-400 transition-colors group-hover:text-white"
                                             />
-                                            <span class="flex-1">{{
-                                                dItem.label
-                                            }}</span>
+                                            <span>{{ dItem.label }}</span>
+                                            <span
+                                                v-if="dItem.sublabel"
+                                                class="text-[11px] font-normal text-neutral-400"
+                                            >
+                                                {{ dItem.sublabel }}
+                                            </span>
                                         </span>
                                         <component
                                             :is="dItem.trailingIcon"

From 26869c2498686fc2bf604c777c99ddcdf318bff1 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Fri, 4 Sep 2026 15:19:14 +0100
Subject: [PATCH 15/33] fix: seeder and competitions/talks stats

---
 app/Http/Controllers/HomeController.php |   2 +
 database/factories/UserFactory.php      |   4 +-
 database/seeders/DatabaseSeeder.php     | 806 ++++++++++++++++++++----
 resources/js/Pages/Home.vue             |  61 +-
 4 files changed, 746 insertions(+), 127 deletions(-)

diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index d8df4453..3a16ff4e 100644
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -27,6 +27,7 @@ public function show(Request $request)
         // $activity_count = $edition->workshops()->count();
         $talk_count = $edition->events()->talk()->count();
         $activity_count = $edition->events()->activity()->count();
+        $competition_count = $edition->competitions()->count();
 
         $stand_count = $edition->stands()->count();
 
@@ -38,6 +39,7 @@ public function show(Request $request)
             'speakers' => $speakers,
             'activityCount' => $activity_count,
             'talkCount' => $talk_count,
+            'competitionCount' => $competition_count,
             'days' => $days,
             'standCount' => $stand_count,
             'canEnroll' => $can_enroll,
diff --git a/database/factories/UserFactory.php b/database/factories/UserFactory.php
index 57a9dacd..d2e87e98 100644
--- a/database/factories/UserFactory.php
+++ b/database/factories/UserFactory.php
@@ -22,6 +22,8 @@ class UserFactory extends Factory
      */
     protected $model = User::class;
 
+    protected static ?string $password = null;
+
     public function configure(): static
     {
         return $this->afterCreating(function (User $user) {
@@ -47,7 +49,7 @@ public function definition(): array
             'name' => fake()->name(),
             'email' => fake()->unique()->safeEmail(),
             'email_verified_at' => now(),
-            'password' => Hash::make('password'), // password
+            'password' => static::$password ??= Hash::make('password'),
             'two_factor_secret' => null,
             'two_factor_recovery_codes' => null,
             'remember_token' => Str::random(10),
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 3e40958b..c18e76d9 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -2,11 +2,9 @@
 
 namespace Database\Seeders;
 
-// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
-
-use App\Models\Admin;
 use App\Models\Company;
 use App\Models\Competition;
+use App\Models\CompetitionPrize;
 use App\Models\CompetitionTeam;
 use App\Models\Department;
 use App\Models\Edition;
@@ -18,7 +16,6 @@
 use App\Models\Product;
 use App\Models\Quest;
 use App\Models\Slot;
-use App\Models\SocialMedia;
 use App\Models\Speaker;
 use App\Models\Sponsor;
 use App\Models\SponsorTier;
@@ -28,44 +25,47 @@
 use Carbon\Carbon;
 use Illuminate\Database\Seeder;
 use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Str;
 
 class DatabaseSeeder extends Seeder
 {
     const DEFAULT_ADMIN_EMAIL = 'admin@example.com';
 
-    const PLATINUM_COUNT = 3;
-
-    const GOLD_COUNT = 7;
-
-    const SILVER_COUNT = 8;
-
-    private function cleanDatabase()
+    private function cleanDatabase(): void
     {
-        DB::beginTransaction();
-
-        Admin::truncate();
-        Company::truncate();
-        Competition::truncate();
-        CompetitionTeam::truncate();
-        Department::truncate();
-        Edition::truncate();
-        Enrollment::truncate();
-        Event::truncate();
-        EventDay::truncate();
-        EventType::truncate();
-        Participant::truncate();
-        Product::truncate();
-        Quest::truncate();
-        Slot::truncate();
-        SocialMedia::truncate();
-        Speaker::truncate();
-        Sponsor::truncate();
-        SponsorTier::truncate();
-        Staff::truncate();
-        Stand::truncate();
-        User::truncate();
-
-        DB::commit();
+        $tables = [
+            'competition_team_participant',
+            'competition_prizes',
+            'competition_teams',
+            'competitions',
+            'enrollment_event',
+            'enrollment_quest',
+            'enrollment_product',
+            'enrollment_slot',
+            'enrollments',
+            'event_user',
+            'events',
+            'event_days',
+            'event_types',
+            'stands',
+            'sponsors',
+            'sponsor_tiers',
+            'quests',
+            'quest_slot',
+            'slots',
+            'products',
+            'staff',
+            'departments',
+            'speakers',
+            'companies',
+            'participants',
+            'admins',
+            'social_media',
+            'editions',
+            'users',
+        ];
+
+        DB::statement('TRUNCATE TABLE '.implode(', ', $tables).' CASCADE');
     }
 
     /**
@@ -74,103 +74,663 @@ private function cleanDatabase()
     public function run(): void
     {
         $this->command->info('Clearing the database');
-        self::cleanDatabase();
-
-        $this->command->info('Creating the users');
-        $participants = Participant::factory(100)->create();
-        $participant_users = $participants->pluck('user');
-        $companies = Company::factory(static::PLATINUM_COUNT + static::GOLD_COUNT + static::SILVER_COUNT)->create();
-        $company_users = $companies->pluck('user');
-        $speakers = Speaker::factory(10)->create();
-        $speaker_users = $speakers->pluck('user');
+        $this->cleanDatabase();
 
+        $this->command->info('Creating the admin user');
         if (! User::where('email', '=', static::DEFAULT_ADMIN_EMAIL)->exists()) {
             User::factory()->admin()->create([
+                'name' => 'Admin SINF',
                 'email' => static::DEFAULT_ADMIN_EMAIL,
             ]);
-        } else {
-            $this->command->warn('Admin user already exists');
         }
 
+        $this->command->info('Creating participants');
+        $participants = Participant::factory(60)->create();
+        $participant_users = $participants->pluck('user');
+
+        $this->command->info('Creating companies');
+        $companyNames = [
+            'Critical TechWorks',
+            'Feedzai',
+            'Talkdesk',
+            'Blip',
+            'Farfetch',
+            'Sword Health',
+            'Natixis in Portugal',
+            'Deloitte',
+            'Accenture',
+            'Microsoft Portugal',
+            'Google Cloud',
+            'Bosch Portugal',
+            'Siemens',
+            'Continental Engineering Services',
+            'OutSystems',
+            'Mindera',
+            'Cisco Systems',
+            'Revolut',
+        ];
+
+        $companies = collect($companyNames)->map(function ($name) {
+            $company = Company::factory()->create();
+            $slug = Str::slug($name);
+            $company->user->update([
+                'name' => $name,
+                'email' => "careers@{$slug}.com",
+            ]);
+
+            return $company;
+        });
+        $company_users = $companies->pluck('user');
+
+        $this->command->info('Creating speakers');
+        $speakerData = [
+            ['name' => 'Prof. Ademar Aguiar', 'organization' => 'FEUP', 'title' => 'Professor Associado', 'description' => 'Especialista em Engenharia de Software, Design Patterns e Metodologias Ágeis.'],
+            ['name' => 'Inês Santos Silva', 'organization' => 'Aliados Consulting', 'title' => 'Tech Lead & Founder', 'description' => 'Focada em liderança de engenharia, cultura de produto e impacto digital.'],
+            ['name' => 'Rui Carmo', 'organization' => 'Cloudflare', 'title' => 'Principal Systems Engineer', 'description' => 'Engenheiro de infraestruturas cloud distribuídas e sistemas de edge computing.'],
+            ['name' => 'Marta Ferreira', 'organization' => 'Feedzai', 'title' => 'Head of AI Research', 'description' => 'Lidera equipas de investigação em inteligência artificial e deteção de anomalias.'],
+            ['name' => 'Diogo Silva', 'organization' => 'Talkdesk', 'title' => 'VP of Engineering', 'description' => 'Especialista em arquitetura de microsserviços em larga escala e VoIP.'],
+            ['name' => 'Sara Mendes', 'organization' => 'Critical TechWorks', 'title' => 'Senior DevOps Engineer', 'description' => 'Entusiasta de GitOps, Kubernetes e automação contínua de plataformas.'],
+            ['name' => 'Gonçalo Pestana', 'organization' => 'Web3 Foundation', 'title' => 'Core Protocol Engineer', 'description' => 'Investigador em protocolos descentralizados, criptografia e sistemas P2P.'],
+            ['name' => 'Beatriz Carvalho', 'organization' => 'Sword Health', 'title' => 'Senior Product Designer', 'description' => 'Focada em experiência de utilizador e acessibilidade em dispositivos de saúde.'],
+            ['name' => 'Tiago Morais', 'organization' => 'Checkmarx', 'title' => 'AppSec Specialist', 'description' => 'Investigador de vulnerabilidades de segurança ofensiva e análise de código.'],
+            ['name' => 'Ana Rita Lourenço', 'organization' => 'Mindera', 'title' => 'Staff Software Engineer', 'description' => 'Arquiteta de sistemas distribuídos e entusiasta de linguagens funcionais como Rust e Elixir.'],
+        ];
+
+        $speakers = collect($speakerData)->map(function ($data) {
+            $speaker = Speaker::factory()->create([
+                'organization' => $data['organization'],
+                'title' => $data['title'],
+                'description' => $data['description'],
+            ]);
+            $slug = Str::slug($data['name']);
+            $speaker->user->update([
+                'name' => $data['name'],
+                'email' => "{$slug}@sinf.pt",
+            ]);
+
+            return $speaker;
+        });
+        $speaker_users = $speakers->pluck('user');
+
         $this->command->info('Creating the edition');
-        $edition = Edition::factory()->create();
-
-        $this->command->info('Creating the events');
-        $start_date = new Carbon(fake()->date());
-        $event_day_factory = EventDay::factory()->recycle($edition);
-        $event_days = collect()->range(1, 7)->map(fn () => $event_day_factory->create([
-            'date' => $start_date->addDays(1)->toDateString(),
-        ]));
-
-        $event_types = EventType::factory(2)->create();
-
-        $events = $event_days->flatMap(function ($day) use ($event_types, $speaker_users, $company_users) {
-
-            $speakers = $speaker_users->random(fake()->numberBetween(1, 2));
-            $companies = $company_users->random(fake()->numberBetween(1, 5));
-
-            return Event::factory(2)
-                ->recycle($day)
-                ->recycle($event_types)
-                ->hasAttached($speakers)
-                ->create()->concat(
-                    Event::factory(1)
-                        ->recycle($day)
-                        ->recycle($event_types)
-                        ->hasAttached($companies)
-                        ->create());
+        $editionYear = intval(env('EDITION', Carbon::now()->year));
+        $edition = Edition::firstOrCreate(
+            ['year' => $editionYear],
+            ['name' => "SINF {$editionYear}"]
+        );
+
+        $this->command->info('Creating event days');
+        $daysConfig = [
+            [
+                'date' => Carbon::create($editionYear, 11, 16)->toDateString(),
+                'theme' => 'Inteligência Artificial & Machine Learning',
+            ],
+            [
+                'date' => Carbon::create($editionYear, 11, 17)->toDateString(),
+                'theme' => 'Cibersegurança & Infraestrutura',
+            ],
+            [
+                'date' => Carbon::create($editionYear, 11, 18)->toDateString(),
+                'theme' => 'Engenharia de Software & Cloud Native',
+            ],
+            [
+                'date' => Carbon::create($editionYear, 11, 19)->toDateString(),
+                'theme' => 'Inovação, Web3 & O Futuro da Tecnologia',
+            ],
+        ];
+
+        $event_days = collect($daysConfig)->map(function ($config) use ($edition) {
+            return EventDay::create([
+                'edition_id' => $edition->id,
+                'date' => $config['date'],
+                'theme' => $config['theme'],
+            ]);
+        });
+
+        $this->command->info('Creating event types');
+        $talkType = EventType::firstOrCreate(['name' => 'talk']);
+        $workshopType = EventType::firstOrCreate(['name' => 'workshop']);
+
+        $this->command->info('Creating events');
+        $eventsSchedule = [
+            // Day 1
+            [
+                'day_index' => 0,
+                'name' => 'Abertura Oficial & O Futuro da IA Generativa',
+                'topic' => 'Inteligência Artificial',
+                'time_start' => '10:00:00',
+                'time_end' => '11:15:00',
+                'type' => $talkType,
+                'location' => 'Auditório B001',
+                'capacity' => null,
+                'enroll_in_site' => false,
+                'description' => 'Sessão de abertura da SINF seguida de palestra sobre as tendências mais recentes no panorama da inteligência artificial generativa e os seus impactos na indústria.',
+            ],
+            [
+                'day_index' => 0,
+                'name' => 'LLMs em Produção: Desafios de Latência, Custo e Fiabilidade',
+                'topic' => 'Machine Learning',
+                'time_start' => '11:30:00',
+                'time_end' => '12:45:00',
+                'type' => $talkType,
+                'location' => 'Auditório B001',
+                'capacity' => null,
+                'enroll_in_site' => false,
+                'description' => 'Uma discussão aprofundada sobre como levar modelos fundacionais de Machine Learning do protótipo até sistemas reais em produção de larga escala.',
+            ],
+            [
+                'day_index' => 0,
+                'name' => 'Workshop: Agentes Autónomos com Python e LangChain',
+                'topic' => 'Inteligência Artificial Prática',
+                'time_start' => '14:30:00',
+                'time_end' => '16:00:00',
+                'type' => $workshopType,
+                'location' => 'Sala I121',
+                'capacity' => 30,
+                'enroll_in_site' => true,
+                'description' => 'Neste workshop prático, os participantes irão construir agentes autónomos com ferramentas, memória e encadeamento de prompts complexos.',
+            ],
+            [
+                'day_index' => 0,
+                'name' => 'Ética, Governança e Alinhamento em Modelos Fundacionais',
+                'topic' => 'Ética & Sociedade',
+                'time_start' => '16:30:00',
+                'time_end' => '17:45:00',
+                'type' => $talkType,
+                'location' => 'Auditório B001',
+                'capacity' => null,
+                'enroll_in_site' => false,
+                'description' => 'Exploração dos dilemas éticos, riscos de alinhamento e regulação europeia sobre a criação e distribuição de modelos de IA.',
+            ],
+            [
+                'day_index' => 0,
+                'name' => 'Workshop: Fine-Tuning de Modelos Open-Source',
+                'topic' => 'Deep Learning',
+                'time_start' => '18:00:00',
+                'time_end' => '19:30:00',
+                'type' => $workshopType,
+                'location' => 'Sala I122',
+                'capacity' => 25,
+                'enroll_in_site' => true,
+                'description' => 'Aprende a aplicar técnicas de LoRA e QLoRA para adaptar modelos open-source aos teus próprios conjuntos de dados.',
+            ],
+            // Day 2
+            [
+                'day_index' => 1,
+                'name' => 'Anatomia de um Ciberataque: Lições da Linha da Frente',
+                'topic' => 'Cibersegurança',
+                'time_start' => '10:00:00',
+                'time_end' => '11:15:00',
+                'type' => $talkType,
+                'location' => 'Auditório B001',
+                'capacity' => null,
+                'enroll_in_site' => false,
+                'description' => 'Uma análise detalhada de incidentes reais de segurança, vetores de ataque comuns e estratégias de resposta rápida.',
+            ],
+            [
+                'day_index' => 1,
+                'name' => 'Zero Trust Architecture na Prática Corporativa',
+                'topic' => 'Infraestrutura Segura',
+                'time_start' => '11:30:00',
+                'time_end' => '12:45:00',
+                'type' => $talkType,
+                'location' => 'Auditório B001',
+                'capacity' => null,
+                'enroll_in_site' => false,
+                'description' => 'Como implementar autenticação contínua, segmentação de rede e controlo de acessos baseado no princípio de privilégio mínimo.',
+            ],
+            [
+                'day_index' => 1,
+                'name' => 'Workshop: Introdução a Exploração de Binários e Engenharia Reversa',
+                'topic' => 'Segurança Ofensiva',
+                'time_start' => '14:30:00',
+                'time_end' => '16:00:00',
+                'type' => $workshopType,
+                'location' => 'Sala I121',
+                'capacity' => 30,
+                'enroll_in_site' => true,
+                'description' => 'Desmontagem de executáveis, identificação de buffer overflows e análise de vulnerabilidades com ferramentas como Ghidra e GDB.',
+            ],
+            [
+                'day_index' => 1,
+                'name' => 'Segurança na Supply Chain de Software Open Source',
+                'topic' => 'AppSec & DevSecOps',
+                'time_start' => '16:30:00',
+                'time_end' => '17:45:00',
+                'type' => $talkType,
+                'location' => 'Auditório B001',
+                'capacity' => null,
+                'enroll_in_site' => false,
+                'description' => 'Como mitigar riscos de injeção de dependências maliciosas, assinar artefactos de software e gerir SBOMs eficientemente.',
+            ],
+            [
+                'day_index' => 1,
+                'name' => 'Workshop: Hardening de Clusters Kubernetes em Produção',
+                'topic' => 'Cloud Security',
+                'time_start' => '18:00:00',
+                'time_end' => '19:30:00',
+                'type' => $workshopType,
+                'location' => 'Sala I122',
+                'capacity' => 25,
+                'enroll_in_site' => true,
+                'description' => 'Políticas de segurança, NetworkPolicies, RBAC restritivo e auditoria de pods num cluster Kubernetes real.',
+            ],
+            // Day 3
+            [
+                'day_index' => 2,
+                'name' => 'Do Monólito a Microsserviços Event-Driven: Lições e Arrependimentos',
+                'topic' => 'Arquitetura de Software',
+                'time_start' => '10:00:00',
+                'time_end' => '11:15:00',
+                'type' => $talkType,
+                'location' => 'Auditório B001',
+                'capacity' => null,
+                'enroll_in_site' => false,
+                'description' => 'Reflexão sobre os prós e contras da decomposição de sistemas, consistência eventual e gestão da complexidade operacional.',
+            ],
+            [
+                'day_index' => 2,
+                'name' => 'Observabilidade Moderna com OpenTelemetry e Grafana',
+                'topic' => 'DevOps & SRE',
+                'time_start' => '11:30:00',
+                'time_end' => '12:45:00',
+                'type' => $talkType,
+                'location' => 'Auditório B001',
+                'capacity' => null,
+                'enroll_in_site' => false,
+                'description' => 'Passagem de logs isolados para rastreamento distribuído, métricas contextuais e diagnósticos preditivos em sistemas complexos.',
+            ],
+            [
+                'day_index' => 2,
+                'name' => 'Workshop: APIs Reativas e Concorrentes com Rust e Axum',
+                'topic' => 'Desenvolvimento em Rust',
+                'time_start' => '14:30:00',
+                'time_end' => '16:00:00',
+                'type' => $workshopType,
+                'location' => 'Sala I121',
+                'capacity' => 30,
+                'enroll_in_site' => true,
+                'description' => 'Construção de uma API HTTP de alta performance com tipagem segura, gestão assíncrona com Tokio e manipulação de estado em memória.',
+            ],
+            [
+                'day_index' => 2,
+                'name' => 'Streaming de Dados em Larga Escala com Apache Kafka',
+                'topic' => 'Data Engineering',
+                'time_start' => '16:30:00',
+                'time_end' => '17:45:00',
+                'type' => $talkType,
+                'location' => 'Auditório B001',
+                'capacity' => null,
+                'enroll_in_site' => false,
+                'description' => 'Padrões de processamento em tempo real, particionamento de tópicos e garantia de entrega Exactly-Once.',
+            ],
+            [
+                'day_index' => 2,
+                'name' => 'Workshop: Testes de Carga Automatizados com k6',
+                'topic' => 'Performance & QA',
+                'time_start' => '18:00:00',
+                'time_end' => '19:30:00',
+                'type' => $workshopType,
+                'location' => 'Sala I122',
+                'capacity' => 25,
+                'enroll_in_site' => true,
+                'description' => 'Simulação de milhares de utilizadores concorrentes, identificação de estrangulamentos e integração em pipelines de CI/CD.',
+            ],
+            // Day 4
+            [
+                'day_index' => 3,
+                'name' => 'Computação Quântica: O Que Já Funciona e O Que Ainda é Ficção',
+                'topic' => 'Tecnologias Emergentes',
+                'time_start' => '10:00:00',
+                'time_end' => '11:15:00',
+                'type' => $talkType,
+                'location' => 'Auditório B001',
+                'capacity' => null,
+                'enroll_in_site' => false,
+                'description' => 'Uma introdução acessível aos qubits, portas quânticas e os algoritmos que prometem revolucionar a criptografia e otimização.',
+            ],
+            [
+                'day_index' => 3,
+                'name' => 'Smart Contracts & Protocolos de Larga Escala',
+                'topic' => 'Web3 & Criptografia',
+                'time_start' => '11:30:00',
+                'time_end' => '12:45:00',
+                'type' => $talkType,
+                'location' => 'Auditório B001',
+                'capacity' => null,
+                'enroll_in_site' => false,
+                'description' => 'Desafios de escalabilidade com Rollups, verificação formal de contratos inteligentes e soluções de interoperabilidade entre redes.',
+            ],
+            [
+                'day_index' => 3,
+                'name' => 'Workshop: Construir a tua Primeira dApp com Solidity e Viem',
+                'topic' => 'Web3 Hands-on',
+                'time_start' => '14:30:00',
+                'time_end' => '16:00:00',
+                'type' => $workshopType,
+                'location' => 'Sala I121',
+                'capacity' => 30,
+                'enroll_in_site' => true,
+                'description' => 'Desenvolvimento de um contrato inteligente, testes automatizados e integração com uma interface web moderna.',
+            ],
+            [
+                'day_index' => 3,
+                'name' => 'Mesa Redonda: O Engenheiro de Software em 2030',
+                'topic' => 'Carreira & Futuro',
+                'time_start' => '16:30:00',
+                'time_end' => '17:45:00',
+                'type' => $talkType,
+                'location' => 'Auditório B001',
+                'capacity' => null,
+                'enroll_in_site' => false,
+                'description' => 'Líderes de engenharia e docentes debatem a evolução do papel dos programadores com a assistência de IA e o mercado global de trabalho.',
+            ],
+            [
+                'day_index' => 3,
+                'name' => 'Sessão de Encerramento e Entrega de Prémios',
+                'topic' => 'Encerramento',
+                'time_start' => '18:00:00',
+                'time_end' => '19:30:00',
+                'type' => $workshopType,
+                'location' => 'Auditório B001',
+                'capacity' => null,
+                'enroll_in_site' => false,
+                'description' => 'Celebração de encerramento da SINF 2026, anúncio dos vencedores do Hackathon, CTF e Game Jam, e sorteio de prémios finais.',
+            ],
+        ];
+
+        $events = collect($eventsSchedule)->map(function ($ev) use ($event_days, $speaker_users, $company_users) {
+            $eventDay = $event_days[$ev['day_index']];
+            $event = Event::create([
+                'event_day_id' => $eventDay->id,
+                'event_type_id' => $ev['type']->id,
+                'name' => $ev['name'],
+                'topic' => $ev['topic'],
+                'time_start' => $ev['time_start'],
+                'time_end' => $ev['time_end'],
+                'location' => $ev['location'],
+                'capacity' => $ev['capacity'],
+                'enroll_in_site' => $ev['enroll_in_site'],
+                'description' => $ev['description'],
+                'external_url' => null,
+            ]);
+
+            // Attach 1-2 speakers
+            $speakersToAttach = $speaker_users->random(rand(1, 2));
+            $event->users()->attach($speakersToAttach);
+
+            // Attach 1-2 sponsor companies
+            $companiesToAttach = $company_users->random(rand(1, 2));
+            $event->users()->attach($companiesToAttach);
+
+            return $event;
+        });
+
+        $this->command->info('Creating departments and staff');
+        $departmentsData = [
+            ['name' => 'Coordenação Geral', 'priority' => 10],
+            ['name' => 'Relações Externas e Patrocínios', 'priority' => 8],
+            ['name' => 'Programa e Conteúdos', 'priority' => 8],
+            ['name' => 'Logística e Operações', 'priority' => 7],
+            ['name' => 'Design e Multimédia', 'priority' => 6],
+            ['name' => 'Informática e Sistemas', 'priority' => 6],
+        ];
+
+        $departments = collect($departmentsData)->map(function ($dep) use ($edition) {
+            return Department::create([
+                'edition_id' => $edition->id,
+                'name' => $dep['name'],
+                'priority' => $dep['priority'],
+            ]);
+        });
+
+        // Assign staff to departments
+        $participantPool = $participants->shuffle();
+        $departments->each(function ($department, $index) use ($participantPool) {
+            $deptParticipants = $participantPool->slice($index * 3, 3);
+            $deptParticipants->each(function ($participant, $pIndex) use ($department) {
+                Staff::create([
+                    'department_id' => $department->id,
+                    'participant_id' => $participant->id,
+                    'coordinator' => $pIndex === 0,
+                ]);
+            });
+        });
+
+        $this->command->info('Creating sponsor tiers, sponsors and stands');
+        $platinumTier = SponsorTier::create([
+            'name' => 'Platinum',
+            'color' => '#E5E4E2',
+            'rank' => 3,
+            'canSeeCV' => true,
+            'canSeeLinkedin' => true,
+            'canSeeAll' => true,
+            'edition_id' => $edition->id,
+        ]);
+
+        $goldTier = SponsorTier::create([
+            'name' => 'Gold',
+            'color' => '#FFD700',
+            'rank' => 2,
+            'canSeeCV' => true,
+            'canSeeLinkedin' => true,
+            'canSeeAll' => false,
+            'edition_id' => $edition->id,
+        ]);
+
+        $silverTier = SponsorTier::create([
+            'name' => 'Silver',
+            'color' => '#C0C0C0',
+            'rank' => 1,
+            'canSeeCV' => false,
+            'canSeeLinkedin' => true,
+            'canSeeAll' => false,
+            'edition_id' => $edition->id,
+        ]);
+
+        // 3 Platinum, 7 Gold, 8 Silver = 18 sponsors
+        $sponsors = collect();
+        $companies->each(function ($company, $index) use ($edition, $platinumTier, $goldTier, $silverTier, &$sponsors) {
+            if ($index < 3) {
+                $tier = $platinumTier;
+            } elseif ($index < 10) {
+                $tier = $goldTier;
+            } else {
+                $tier = $silverTier;
+            }
+
+            $sponsor = Sponsor::create([
+                'edition_id' => $edition->id,
+                'company_id' => $company->id,
+                'sponsor_tier_id' => $tier->id,
+            ]);
+            $sponsors->push($sponsor);
+        });
+
+        // Create stands for sponsors across event days
+        $stands = collect();
+        $sponsors->each(function ($sponsor) use ($event_days, $platinumTier, $goldTier, &$stands) {
+            if ($sponsor->sponsor_tier_id === $platinumTier->id) {
+                // Platinum on all 4 days
+                $days = $event_days;
+            } elseif ($sponsor->sponsor_tier_id === $goldTier->id) {
+                // Gold on 2-3 days
+                $days = $event_days->random(rand(2, 3));
+            } else {
+                // Silver on 1-2 days
+                $days = $event_days->random(rand(1, 2));
+            }
+
+            foreach ($days as $day) {
+                $stand = Stand::create([
+                    'event_day_id' => $day->id,
+                    'sponsor_id' => $sponsor->id,
+                ]);
+                $stands->push($stand);
+            }
+        });
+
+        $this->command->info('Creating products');
+        $productsData = [
+            ['name' => 'T-Shirt Oficial SINF 2026', 'price' => 15, 'stock' => 100],
+            ['name' => 'Sweatshirt SINF', 'price' => 25, 'stock' => 60],
+            ['name' => 'Tote Bag SINF', 'price' => 8, 'stock' => 120],
+            ['name' => 'Caneca Térmica SINF', 'price' => 12, 'stock' => 50],
+            ['name' => 'Sticker Pack Exclusivo', 'price' => 3, 'stock' => 200],
+            ['name' => 'Lanyard & Porta-Crachá', 'price' => 4, 'stock' => 150],
+            ['name' => 'Garrafa de Água Inox', 'price' => 18, 'stock' => 40],
+        ];
+
+        $products = collect($productsData)->map(function ($p) use ($edition) {
+            return Product::create([
+                'edition_id' => $edition->id,
+                'name' => $p['name'],
+                'price' => $p['price'],
+                'stock' => $p['stock'],
+            ]);
+        });
+
+        $this->command->info('Creating competitions, teams and prizes');
+        $competitionsConfig = [
+            [
+                'name' => 'Hackathon SINF',
+                'slug' => 'hackathon-sinf',
+                'theme' => 'Desenvolvimento de Soluções Sustentáveis e Inovadoras',
+                'description' => 'O Hackathon SINF é a maratona de desenvolvimento de software icónica da Semana de Informática. Em equipas de 2 a 4 elementos, os participantes têm 48 horas para planear, desenhar e implementar um protótipo funcional para resolver desafios reais propostos por empresas de referência.',
+                'date_start' => Carbon::create($editionYear, 11, 16, 10, 0, 0),
+                'date_end' => Carbon::create($editionYear, 11, 18, 18, 0, 0),
+                'registration_link' => 'https://sinf.pt/competicoes/hackathon-sinf',
+                'regulation' => "### Regulamento do Hackathon SINF\n\n1. **Equipas**: Cada equipa deve ser composta por 2 a 4 participantes devidamente inscritos na SINF.\n2. **Duração**: Início a 16 de novembro às 10:00 e entrega final a 18 de novembro às 18:00.\n3. **Avaliação**: Os projetos serão avaliados por um júri composto por docentes da FEUP e profissionais convidados, tendo em conta:\n   - **Inovação e Originalidade** (30%)\n   - **Viabilidade Técnica e Qualidade do Código** (35%)\n   - **Impacto e Utilidade da Solução** (20%)\n   - **Apresentação e Pitch Final** (15%)\n4. **Propriedade Intelectual**: Todo o código desenvolvido pertence exclusivamente aos membros da equipa.",
+                'teams' => [
+                    ['name' => 'ByteBuilders', 'points' => 950],
+                    ['name' => 'NullPointers', 'points' => 880],
+                    ['name' => 'CodeForge', 'points' => 820],
+                    ['name' => 'KernelHacks', 'points' => 760],
+                    ['name' => 'StackCrushers', 'points' => 690],
+                ],
+            ],
+            [
+                'name' => 'Capture The Flag (CTF)',
+                'slug' => 'ctf-sinf',
+                'theme' => 'Segurança Ofensiva e Análise Forense',
+                'description' => 'Testa os teus conhecimentos e astúcia em cibersegurança numa competição de estilo Jeopardy! Desafios de Web Exploitation, Criptografia, Reverse Engineering, Forensics e Pwn para todos os níveis.',
+                'date_start' => Carbon::create($editionYear, 11, 17, 14, 0, 0),
+                'date_end' => Carbon::create($editionYear, 11, 17, 21, 0, 0),
+                'registration_link' => 'https://sinf.pt/competicoes/ctf-sinf',
+                'regulation' => "### Regulamento do CTF SINF\n\n1. **Formato**: Competição individual ou em duplas no formato Jeopardy.\n2. **Duração**: 17 de novembro, das 14:00 às 21:00.\n3. **Regras de Conduta**:\n   - É expressamente proibido atacar a infraestrutura da competição fora dos alvos designados.\n   - Não é permitida a partilha de flags entre equipas concorrentes.\n   - O desrespeito pelas regras resultará em desqualificação imediata.\n4. **Pontuação**: Cada desafio tem uma pontuação dinâmica baseada no número de resoluções bem-sucedidas.",
+                'teams' => [
+                    ['name' => 'CyberWardens', 'points' => 1450],
+                    ['name' => 'RootAccess', 'points' => 1320],
+                    ['name' => 'FlagHunters', 'points' => 1100],
+                    ['name' => 'ZeroDaySquad', 'points' => 950],
+                    ['name' => 'PacketSniffers', 'points' => 780],
+                ],
+            ],
+            [
+                'name' => 'Game Jam SINF',
+                'slug' => 'game-jam',
+                'theme' => 'Criação de Videojogos em 72 Horas',
+                'description' => 'Dá asas à tua criatividade! Cria um videojogo completo num fim de semana com base num tema surpresa anunciado na sessão inaugural. Motores de jogo livres (Godot, Unity, Unreal, WebGL).',
+                'date_start' => Carbon::create($editionYear, 11, 16, 12, 0, 0),
+                'date_end' => Carbon::create($editionYear, 11, 19, 16, 0, 0),
+                'registration_link' => 'https://sinf.pt/competicoes/game-jam',
+                'regulation' => "### Regulamento da Game Jam SINF\n\n1. **Tema**: O tema é revelado no primeiro dia da SINF e todos os jogos devem integrar o conceito.\n2. **Motores e Assets**:\n   - Podem ser utilizados quaisquer motores ou bibliotecas de código aberto/livres.\n   - Assets de terceiros (música, texturas, modelos 3D) devem ter licença permissiva e ser devidamente creditados.\n3. **Submissão**: Os jogos devem ser submetidos na página do Itch.io da SINF com build executável ou jogável no browser.\n4. **Júri e Votação**: Avaliação baseada em Jogabilidade, Arte e Som, Criatividade e Aderência ao Tema.",
+                'teams' => [
+                    ['name' => 'PixelCrafters', 'points' => 94],
+                    ['name' => 'GlitchStudio', 'points' => 88],
+                    ['name' => 'PolyGonDevs', 'points' => 81],
+                    ['name' => 'SpriteMinds', 'points' => 75],
+                    ['name' => 'IndieWizards', 'points' => 67],
+                ],
+            ],
+        ];
+
+        $competitions = collect($competitionsConfig)->map(function ($compConfig) use ($edition, $participants) {
+            $competition = Competition::create([
+                'edition_id' => $edition->id,
+                'name' => $compConfig['name'],
+                'slug' => $compConfig['slug'],
+                'theme' => $compConfig['theme'],
+                'description' => $compConfig['description'],
+                'date_start' => $compConfig['date_start'],
+                'date_end' => $compConfig['date_end'],
+                'registration_link' => $compConfig['registration_link'],
+                'regulation' => $compConfig['regulation'],
+            ]);
+
+            // Create 3 prizes (1st, 2nd, 3rd place)
+            for ($place = 1; $place <= 3; $place++) {
+                CompetitionPrize::create([
+                    'competition_id' => $competition->id,
+                    'place' => $place,
+                ]);
+            }
+
+            // Create teams and attach participants
+            foreach ($compConfig['teams'] as $teamData) {
+                $team = CompetitionTeam::create([
+                    'competition_id' => $competition->id,
+                    'name' => $teamData['name'],
+                    'points' => $teamData['points'],
+                ]);
+
+                // Attach 2 to 4 participants
+                $members = $participants->random(rand(2, 4));
+                $team->members()->attach($members);
+            }
+
+            return $competition;
         });
 
-        $this->command->info('Creating the departments and staff');
-        $departments = Department::factory(10)->recycle($edition)->create();
-        Staff::factory(20)->recycle($departments)->recycle($participants)->create();
-
-        $this->command->info('Creating the sponsors, tiers and stands');
-
-        $sponsorTiers = SponsorTier::factory(3)->recycle($edition)->create();
-
-        $sponsors = Sponsor::factory(20)
-            ->recycle($edition)
-            ->recycle($companies)
-            ->recycle($sponsorTiers)
-            ->create();
-
-        $stands = Stand::factory(20)->recycle($event_days)->recycle($sponsors)->create();
-
-        $this->command->info('Creating the products');
-        $products = Product::factory(10)->recycle($edition)->create();
-
-        $this->command->info('Creating the competitions');
-        $competitions = Competition::factory(3)->recycle($edition)->create();
-        $competition_teams = CompetitionTeam::factory(90)->recycle($competitions)->create();
-
-        $this->command->info('Creating the quests');
-        $slots = Slot::factory(30)->create();
-        $quests = Quest::factory(20)
-            ->recycle($edition)
-            ->recycle($stands)
-            ->for(Stand::factory(), 'requirement')
-            ->create()->concat(
-                Quest::factory(20)
-                    ->recycle($edition)
-                    ->recycle($events)
-                    ->for(Event::factory(), 'requirement')
-                    ->create()
-            )->each(fn ($quest) => $quest->slots()->attach($slots->random()));
-
-        $this->command->info('Creating the enrollments');
-        $participants->random(50)->map(function ($participant) use ($edition, $events, $products, $quests) {
-            $quests = $quests->random(20);
-            $events = $events->random(3);
-            $products = $products->random(3);
-
-            return Enrollment::factory()
-                ->recycle($edition)
-                ->recycle($participant)
-                ->hasAttached($events)
-                ->hasAttached($products)
-                ->hasAttached($quests)
-                ->create();
+        $this->command->info('Creating slots and quests');
+        $slots = Slot::factory(15)->create();
+
+        $standQuests = $stands->unique('sponsor_id')->map(function ($stand) use ($edition, $slots) {
+            $sponsorName = $stand->sponsor?->company?->user?->name ?? 'Empresa';
+            $quest = Quest::create([
+                'name' => "Visitar a banca da {$sponsorName}",
+                'category' => 'COMPANY',
+                'requirement_id' => $stand->id,
+                'requirement_type' => Stand::class,
+                'edition_id' => $edition->id,
+            ]);
+            if ($slots->isNotEmpty()) {
+                $quest->slots()->attach($slots->random(min(2, $slots->count())));
+            }
+
+            return $quest;
         });
+
+        $eventQuests = $events->map(function ($event) use ($edition, $slots) {
+            $category = $event->type->name === 'talk' ? 'TALK' : 'WORKSHOP';
+            $quest = Quest::create([
+                'name' => "Assistir a: {$event->name}",
+                'category' => $category,
+                'requirement_id' => $event->id,
+                'requirement_type' => Event::class,
+                'edition_id' => $edition->id,
+            ]);
+            if ($slots->isNotEmpty()) {
+                $quest->slots()->attach($slots->random(min(2, $slots->count())));
+            }
+
+            return $quest;
+        });
+
+        $allQuests = $standQuests->concat($eventQuests);
+
+        $this->command->info('Creating enrollments');
+        $participants->random(40)->each(function ($participant) use ($edition, $events, $products, $allQuests) {
+            $enrollment = Enrollment::create([
+                'edition_id' => $edition->id,
+                'participant_id' => $participant->id,
+            ]);
+
+            $enrollment->events()->attach($events->random(rand(2, 5)));
+            $enrollment->quests()->attach($allQuests->random(rand(3, 8)));
+            $enrollment->products()->attach($products->random(rand(1, 3)));
+        });
+
+        $this->command->info('Seeding finished successfully!');
     }
 }
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
index 1cb6bce0..513035d1 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 import { router } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import AppLayout from "@/Layouts/AppLayout.vue";
@@ -21,10 +21,36 @@ interface Props {
     activityCount: number;
     talkCount: number;
     standCount: number;
+    competitionCount?: number;
     canEnroll: boolean;
 }
 
-defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    competitionCount: 0,
+});
+
+const activeStatsCount = computed(() => {
+    let count = 0;
+    if (props.days?.length) count++;
+    if (props.standCount) count++;
+    if (props.talkCount) count++;
+    if (props.activityCount) count++;
+    if (props.competitionCount) count++;
+    return count;
+});
+
+const statsGridColsClass = computed(() => {
+    if (activeStatsCount.value >= 5) {
+        return "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5";
+    }
+    if (activeStatsCount.value === 4) {
+        return "grid-cols-2 md:grid-cols-4";
+    }
+    if (activeStatsCount.value === 3) {
+        return "grid-cols-1 sm:grid-cols-3";
+    }
+    return "grid-cols-2";
+});
 
 const isAtBottom = ref(false);
 
@@ -172,7 +198,16 @@ onBeforeUnmount(() => {
                 />
             </div>
 
-            <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-4">
+            <div
+                :class="[
+                    'grid gap-4 sm:gap-6',
+                    statsGridColsClass,
+                    {
+                        '[&>*:last-child]:col-span-2 sm:[&>*:last-child]:col-span-1':
+                            activeStatsCount % 2 !== 0,
+                    },
+                ]"
+            >
                 <div
                     v-if="days.length !== 0"
                     class="group flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.02] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8"
@@ -236,6 +271,26 @@ onBeforeUnmount(() => {
                         atividades
                     </span>
                 </div>
+
+                <div
+                    v-if="competitionCount !== 0"
+                    class="group flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.02] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8"
+                >
+                    <span
+                        class="text-3xl font-bold text-white transition-colors group-hover:text-neutral-100 sm:text-4xl"
+                    >
+                        {{ competitionCount }}
+                    </span>
+                    <span
+                        class="mt-2 font-mono text-xs font-medium tracking-wider text-neutral-400 uppercase transition-colors group-hover:text-neutral-300"
+                    >
+                        {{
+                            competitionCount === 1
+                                ? "competição"
+                                : "competições"
+                        }}
+                    </span>
+                </div>
             </div>
         </section>
 

From c95e36473eccdb3e9d9aa67b59a4f22e8317dcdf Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Mon, 7 Sep 2026 12:29:53 +0100
Subject: [PATCH 16/33] feat: profile page

---
 resources/js/Components/CodeInput.vue         |   4 +-
 resources/js/Components/ConfirmsPassword.vue  |   4 +-
 resources/js/Components/Home/InfoPopup.vue    |  13 +-
 resources/js/Components/Home/Sponsor.vue      |   6 +-
 resources/js/Components/PrimaryButton.vue     |  32 +-
 .../js/Components/Profile/AllParticipants.vue | 318 +++++++++++++++---
 resources/js/Components/Profile/CvArea.vue    | 317 +++++++++++------
 .../Profile/EnrolledParticipants.vue          | 318 +++++++++++++++---
 resources/js/Components/Profile/InfoCard.vue  | 115 ++-----
 .../js/Components/Profile/InteractionArea.vue |  93 +++--
 .../js/Components/Profile/ProfileCard.vue     | 229 +++++++++++++
 .../js/Components/Profile/ProfilePicture.vue  |  34 +-
 resources/js/Components/Profile/QRCode.vue    |  27 +-
 resources/js/Components/Profile/Sticker.vue   | 135 +++++---
 .../js/Components/Profile/StickerWrapper.vue  |  20 +-
 resources/js/Components/Profile/Ticket.vue    |  87 +++--
 .../js/Components/Profile/TicketWrapper.vue   |  33 +-
 .../js/Components/Program/ProgramDayPanel.vue |   8 +-
 resources/js/Components/Shop/ShopItem.vue     |   6 +-
 resources/js/Pages/Auth/ConfirmPassword.vue   |   8 +-
 resources/js/Pages/Auth/ForgotPassword.vue    |   8 +-
 resources/js/Pages/Auth/Login.vue             |   8 +-
 resources/js/Pages/Auth/Register.vue          |  12 +-
 resources/js/Pages/Auth/ResetPassword.vue     |   8 +-
 .../js/Pages/Auth/TwoFactorChallenge.vue      |   8 +-
 resources/js/Pages/Auth/VerifyEmail.vue       |   8 +-
 resources/js/Pages/CRUD/Competition/Edit.vue  |  11 +-
 resources/js/Pages/Profile/Edit.vue           |  14 +-
 .../Pages/Profile/Partials/DeleteUserForm.vue |  22 +-
 .../LogoutOtherBrowserSessionsForm.vue        |  40 ++-
 .../Partials/TwoFactorAuthenticationForm.vue  |  72 ++--
 .../Profile/Partials/UpdatePasswordForm.vue   |   8 +-
 .../Partials/UpdateProfileInformationForm.vue |  79 ++---
 resources/js/Pages/Profile/Show.vue           | 107 +++---
 34 files changed, 1569 insertions(+), 643 deletions(-)
 create mode 100644 resources/js/Components/Profile/ProfileCard.vue

diff --git a/resources/js/Components/CodeInput.vue b/resources/js/Components/CodeInput.vue
index b0f0e585..00a36987 100644
--- a/resources/js/Components/CodeInput.vue
+++ b/resources/js/Components/CodeInput.vue
@@ -173,7 +173,7 @@ defineExpose({ focus });
             <template v-for="(_, index) in length" :key="index">
                 <span
                     v-if="index === Math.floor(length / 2)"
-                    class="select-none px-0.5 font-mono text-lg text-neutral-500"
+                    class="px-0.5 font-mono text-lg text-neutral-500 select-none"
                 >
                     –
                 </span>
@@ -188,7 +188,7 @@ defineExpose({ focus });
                     :maxlength="index === 0 ? 16 : 1"
                     :disabled="disabled"
                     :autocomplete="index === 0 ? 'one-time-code' : 'off'"
-                    class="h-12 w-10 select-all rounded-2xl border bg-black/50 text-center font-mono text-xl font-bold text-white shadow-(--shadow-pill-inset) backdrop-blur-md transition-all duration-200 focus:bg-black/70 focus:outline-none sm:h-14 sm:w-12 sm:text-2xl"
+                    class="h-12 w-10 rounded-2xl border bg-black/50 text-center font-mono text-xl font-bold text-white shadow-(--shadow-pill-inset) backdrop-blur-md transition-all duration-200 select-all focus:bg-black/70 focus:outline-none sm:h-14 sm:w-12 sm:text-2xl"
                     :class="[
                         errorMessage
                             ? 'border-red-500/50 text-red-300 focus:border-red-500/80 focus:ring-1 focus:ring-red-500/30'
diff --git a/resources/js/Components/ConfirmsPassword.vue b/resources/js/Components/ConfirmsPassword.vue
index b9f3bfc7..5039f89d 100644
--- a/resources/js/Components/ConfirmsPassword.vue
+++ b/resources/js/Components/ConfirmsPassword.vue
@@ -20,7 +20,8 @@ const emit = defineEmits<Emits>();
 
 withDefaults(defineProps<Props>(), {
     title: "Confirmar Palavra-passe",
-    content: "Para a tua segurança, confirma a tua palavra-passe para continuar.",
+    content:
+        "Para a tua segurança, confirma a tua palavra-passe para continuar.",
     button: "Confirmar",
 });
 
@@ -112,4 +113,3 @@ const closeModal = () => {
         </Modal>
     </span>
 </template>
-
diff --git a/resources/js/Components/Home/InfoPopup.vue b/resources/js/Components/Home/InfoPopup.vue
index 56f1ab73..aa892acd 100644
--- a/resources/js/Components/Home/InfoPopup.vue
+++ b/resources/js/Components/Home/InfoPopup.vue
@@ -28,20 +28,19 @@ const enroll = () => {
 </script>
 
 <template>
-    <Modal
-        v-model="options.modelValue"
-        max-width="xl"
-        @closed="cacheSeenInfo"
-    >
+    <Modal v-model="options.modelValue" max-width="xl" @closed="cacheSeenInfo">
         <div
             class="flex flex-col items-center gap-6 text-center text-lg text-white"
         >
             <img class="w-72 p-4" src="/images/sinf logo.png" alt="SINF" />
             <p class="font-medium">
-                A <span class="text-sinf-primary-light font-bold">SINF</span> está
+                A
+                <span class="text-sinf-primary-light font-bold">SINF</span> está
                 mais interativa do que nunca!
             </p>
-            <ul class="flex flex-col items-center gap-2 text-sm text-neutral-300">
+            <ul
+                class="flex flex-col items-center gap-2 text-sm text-neutral-300"
+            >
                 <li>
                     Participa em
                     <a
diff --git a/resources/js/Components/Home/Sponsor.vue b/resources/js/Components/Home/Sponsor.vue
index f49cea6e..5bb57933 100644
--- a/resources/js/Components/Home/Sponsor.vue
+++ b/resources/js/Components/Home/Sponsor.vue
@@ -30,10 +30,7 @@ defineProps<Props>();
         />
     </Card>
 
-    <Modal
-        v-model="options.modelValue"
-        max-width="lg"
-    >
+    <Modal v-model="options.modelValue" max-width="lg">
         <div class="flex flex-col items-center gap-6">
             <img
                 :src="company?.profile_photo_url"
@@ -67,4 +64,3 @@ defineProps<Props>();
         </div>
     </Modal>
 </template>
-
diff --git a/resources/js/Components/PrimaryButton.vue b/resources/js/Components/PrimaryButton.vue
index 94311746..49d42307 100644
--- a/resources/js/Components/PrimaryButton.vue
+++ b/resources/js/Components/PrimaryButton.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed, ref, useAttrs, type ButtonHTMLAttributes } from "vue";
+import { Link } from "@inertiajs/vue3";
 
 interface Props {
+    href?: string;
+    external?: boolean;
     type?: ButtonHTMLAttributes["type"];
     color?: "pill" | "primary" | "secondary" | "gradient" | "danger";
     textSize?: string;
@@ -17,6 +20,8 @@ defineOptions({
 const attrs = useAttrs();
 
 const props = withDefaults(defineProps<Props>(), {
+    href: undefined,
+    external: false,
     type: "submit",
     color: "pill",
     textSize: "text-xs sm:text-sm",
@@ -25,15 +30,26 @@ const props = withDefaults(defineProps<Props>(), {
     fullWidth: false,
 });
 
-const buttonRef = ref<HTMLButtonElement | null>(null);
+const buttonRef = ref<HTMLButtonElement | HTMLAnchorElement | null>(null);
 
 const isFullWidth = computed(() => {
+    const cls = String(attrs.class ?? "");
     return (
         props.fullWidth ||
-        Boolean(attrs.class && String(attrs.class).includes("w-full"))
+        cls.includes("w-full") ||
+        cls.includes("flex-1")
     );
 });
 
+const innerWidthClass = computed(() => {
+    if (!isFullWidth.value) return "";
+    const cls = String(attrs.class ?? "");
+    if (cls.includes("sm:w-auto") || cls.includes("sm:flex-initial")) {
+        return "w-full sm:w-auto";
+    }
+    return "w-full";
+});
+
 const onContainerClick = (event: MouseEvent) => {
     if (
         event.target !== buttonRef.value &&
@@ -66,20 +82,22 @@ const buttonColor: Record<string, string> = {
         ]"
         @click="onContainerClick"
     >
-        <button
+        <component
+            :is="href ? (external ? 'a' : Link) : 'button'"
             ref="buttonRef"
             v-bind="{ ...attrs, class: undefined }"
-            :type="type"
-            :disabled="disabled"
+            :href="href"
+            :type="href ? undefined : type"
+            :disabled="href ? undefined : disabled"
             class="pill-item cursor-pointer justify-center gap-2 font-medium transition-all duration-200 active:scale-95 disabled:cursor-not-allowed disabled:opacity-40"
             :class="[
-                isFullWidth ? 'w-full' : '',
+                innerWidthClass,
                 buttonColor[color] ?? buttonColor.pill,
                 textSize,
                 padding,
             ]"
         >
             <slot />
-        </button>
+        </component>
     </div>
 </template>
diff --git a/resources/js/Components/Profile/AllParticipants.vue b/resources/js/Components/Profile/AllParticipants.vue
index 4e3dedd0..8930273e 100644
--- a/resources/js/Components/Profile/AllParticipants.vue
+++ b/resources/js/Components/Profile/AllParticipants.vue
@@ -1,8 +1,18 @@
 <script setup lang="ts">
 import type Participant from "@/Types/Participant";
 import { usePage } from "@inertiajs/vue3";
-import { FileText } from "@lucide/vue";
+import {
+    FileText,
+    Download,
+    Users,
+    Search,
+    ExternalLink,
+    X,
+} from "@lucide/vue";
+import { computed, ref } from "vue";
 import SocialIcon from "@/Components/UI/SocialIcon.vue";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PillSelector, { type PillOption } from "@/Components/UI/PillSelector.vue";
 import { route } from "ziggy-js";
 
 type Visitor = Participant & {
@@ -11,66 +21,274 @@ type Visitor = Participant & {
     can_see_all: boolean;
 };
 
-const allParticipants = usePage().props.allParticipants as Visitor[];
-const user = usePage().props.user as Participant;
+const page = usePage();
+const allParticipants = computed(
+    () => (page.props.allParticipants as Visitor[]) ?? [],
+);
+const user = computed(() => page.props.user as Participant);
+
+const searchQuery = ref("");
+const filterType = ref<"all" | "linkedin" | "cv">("all");
+
+const cvCount = computed(
+    () => allParticipants.value.filter((v) => v.can_see_cv && v.cv_url).length,
+);
+
+const linkedinCount = computed(
+    () =>
+        allParticipants.value.filter(
+            (v) => v.can_see_linkedin && v.social_media?.linkedin,
+        ).length,
+);
+
+const filterOptions = computed<PillOption[]>(() => [
+    {
+        id: "all",
+        label: "Todos",
+        count: allParticipants.value.length,
+    },
+    {
+        id: "linkedin",
+        label: "Com LinkedIn",
+        count: linkedinCount.value,
+    },
+    {
+        id: "cv",
+        label: "Com CV",
+        count: cvCount.value,
+    },
+]);
+
+const filteredParticipants = computed(() => {
+    return allParticipants.value.filter((v) => {
+        if (filterType.value === "cv" && (!v.can_see_cv || !v.cv_url)) {
+            return false;
+        }
+        if (
+            filterType.value === "linkedin" &&
+            (!v.can_see_linkedin || !v.social_media?.linkedin)
+        ) {
+            return false;
+        }
+
+        if (!searchQuery.value.trim()) return true;
+        const q = searchQuery.value.toLowerCase().trim();
+        const name = v.user?.name?.toLowerCase() ?? "";
+        const email = v.user?.email?.toLowerCase() ?? "";
+        return name.includes(q) || email.includes(q);
+    });
+});
 </script>
 
 <template>
-    <section
+    <div
         v-if="allParticipants.length > 0"
-        class="mt-10 flex flex-col items-center gap-3"
+        class="flex w-full flex-col rounded-3xl border border-white/8 bg-black/50 p-5 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md sm:p-7"
     >
-        <div class="flex w-full flex-col md:flex-row md:justify-between">
-            <h2 class="text-text-color p-3 text-2xl font-bold">
-                Total de participantes: {{ allParticipants.length }}
-            </h2>
-            <a
-                v-if="$page.props"
-                class="bg-2025-dark shadow-2023-teal inline-flex items-center justify-center border border-black px-4 py-2 text-center text-xl font-bold text-white transition-shadow hover:shadow"
+        <div
+            class="flex flex-col gap-4 border-b border-white/8 pb-5 sm:flex-row sm:items-center sm:justify-between"
+        >
+            <div class="flex items-center gap-3">
+                <div
+                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-neutral-300"
+                >
+                    <Users :size="20" />
+                </div>
+                <div>
+                    <h2 class="text-base font-bold text-white sm:text-lg">
+                        Todos os Participantes
+                    </h2>
+                    <p class="text-xs text-neutral-400">
+                        Total registado:
+                        <span class="font-semibold text-white">{{
+                            allParticipants.length
+                        }}</span>
+                    </p>
+                </div>
+            </div>
+
+            <PrimaryButton
                 :href="route('user.company.participants.cvs.all', { user })"
+                external
+                color="pill"
+                padding="px-4 py-2"
+                class="w-full sm:w-auto"
             >
-                Descarregar CVs
-            </a>
+                <Download :size="15" />
+                <span>Descarregar CVs</span>
+            </PrimaryButton>
         </div>
+
         <div
-            class="bg-2025-bg shadow-2023-teal flex w-full flex-col items-center border border-black shadow-lg"
+            class="mt-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
         >
-            <div
-                v-for="visitor in allParticipants"
-                :key="visitor.id"
-                class="flex w-full items-center justify-between p-3 even:bg-white/20"
-            >
-                <a
-                    :href="route('user.profile', { user: visitor.user })"
-                    target="_blank"
+            <div class="relative w-full sm:max-w-xs">
+                <Search
+                    :size="15"
+                    class="absolute top-1/2 left-3 -translate-y-1/2 text-neutral-400"
+                />
+                <input
+                    v-model="searchQuery"
+                    type="text"
+                    placeholder="Pesquisar por nome ou email..."
+                    class="w-full rounded-2xl border border-white/10 bg-white/5 py-2 pr-8 pl-9 text-xs text-white placeholder-neutral-500 transition-colors focus:border-white/30 focus:bg-white/10 focus:outline-none sm:text-sm"
+                />
+                <button
+                    v-if="searchQuery"
+                    type="button"
+                    class="absolute top-1/2 right-2.5 -translate-y-1/2 text-neutral-400 hover:text-white"
+                    @click="searchQuery = ''"
                 >
-                    {{ visitor.user?.name ?? visitor.id }}
-                </a>
-                <div class="flex gap-4">
-                    <a
-                        v-if="
-                            visitor.can_see_linkedin &&
-                            visitor.social_media?.linkedin
-                        "
-                        :href="visitor.social_media.linkedin"
-                        target="_blank"
-                        title="Linkedin"
-                        class="flex items-center text-neutral-400 hover:text-white"
-                    >
-                        <SocialIcon platform="linkedin" :size="16" />
-                    </a>
-
-                    <a
-                        v-if="visitor.can_see_cv && visitor.cv_url"
-                        :href="visitor.cv_url"
-                        target="_blank"
-                        title="CV"
-                        class="flex items-center text-neutral-400 hover:text-white"
-                    >
-                        <FileText :size="16" />
-                    </a>
-                </div>
+                    <X :size="14" />
+                </button>
             </div>
+
+            <PillSelector
+                v-model="filterType"
+                :items="filterOptions"
+                size="sm"
+            />
+        </div>
+
+        <div
+            v-if="filteredParticipants.length > 0"
+            class="mt-4 overflow-hidden rounded-2xl border border-white/8"
+        >
+            <div class="overflow-x-auto">
+                <table class="w-full text-left text-sm text-neutral-300">
+                    <tbody class="divide-y divide-white/6">
+                        <tr
+                            v-for="visitor in filteredParticipants"
+                            :key="visitor.id"
+                            class="transition-colors hover:bg-white/4"
+                        >
+                            <td class="py-3 pr-3 pl-4 sm:pl-5">
+                                <div class="flex items-center gap-3">
+                                    <div
+                                        class="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-neutral-800 ring-1 ring-white/10"
+                                    >
+                                        <img
+                                            v-if="visitor.user?.profile_photo_url"
+                                            :src="visitor.user.profile_photo_url"
+                                            :alt="visitor.user.name"
+                                            class="h-full w-full object-cover"
+                                        />
+                                        <span
+                                            v-else
+                                            class="text-xs font-bold uppercase text-neutral-300"
+                                        >
+                                            {{ visitor.user?.name?.charAt(0) ?? "P" }}
+                                        </span>
+                                    </div>
+                                    <div class="min-w-0">
+                                        <a
+                                            :href="
+                                                visitor.user
+                                                    ? route('user.profile', { user: visitor.user })
+                                                    : '#'
+                                            "
+                                            target="_blank"
+                                            class="block truncate font-medium text-white transition-colors hover:text-white/80"
+                                        >
+                                            {{ visitor.user?.name ?? `Participante #${visitor.id}` }}
+                                        </a>
+                                        <p
+                                            v-if="visitor.user?.email"
+                                            class="truncate text-xs text-neutral-400"
+                                        >
+                                            {{ visitor.user.email }}
+                                        </p>
+                                    </div>
+                                </div>
+                            </td>
+
+                            <td class="w-px py-3 pr-4 pl-3 text-right whitespace-nowrap sm:pr-5">
+                                <div class="flex items-center justify-end gap-1.5">
+                                    <PrimaryButton
+                                        v-if="
+                                            visitor.can_see_linkedin &&
+                                            visitor.social_media?.linkedin
+                                        "
+                                        :href="visitor.social_media.linkedin"
+                                        external
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        color="pill"
+                                        padding="p-2"
+                                        class="shrink-0"
+                                        title="LinkedIn"
+                                        aria-label="LinkedIn"
+                                    >
+                                        <SocialIcon platform="linkedin" :size="15" />
+                                    </PrimaryButton>
+
+                                    <PrimaryButton
+                                        v-if="visitor.can_see_cv && visitor.cv_url"
+                                        :href="visitor.cv_url"
+                                        external
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        color="pill"
+                                        padding="p-2"
+                                        class="shrink-0"
+                                        title="Currículo Vitae"
+                                        aria-label="Ver CV"
+                                    >
+                                        <FileText :size="15" />
+                                    </PrimaryButton>
+
+                                    <PrimaryButton
+                                        v-if="visitor.user"
+                                        :href="route('user.profile', { user: visitor.user })"
+                                        color="pill"
+                                        padding="p-2"
+                                        class="shrink-0"
+                                        title="Ver Perfil"
+                                        aria-label="Ver Perfil"
+                                    >
+                                        <ExternalLink :size="15" />
+                                    </PrimaryButton>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div
+            v-if="filteredParticipants.length === 0"
+            class="flex flex-col items-center justify-center py-12 text-center"
+        >
+            <p class="text-sm text-neutral-400">
+                Nenhum participante encontrado
+                <span v-if="searchQuery"> para "{{ searchQuery }}"</span>
+                <span v-if="filterType !== 'all'"> com o filtro selecionado</span>.
+            </p>
+            <button
+                type="button"
+                class="mt-2 text-xs text-sinf-primary hover:underline"
+                @click="searchQuery = ''; filterType = 'all'"
+            >
+                Limpar filtros
+            </button>
+        </div>
+    </div>
+
+    <div
+        v-else
+        class="flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 py-16 px-6 text-center shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md"
+    >
+        <div
+            class="mb-4 flex h-14 w-14 items-center justify-center rounded-3xl border border-white/10 bg-white/5 text-neutral-400"
+        >
+            <Users :size="28" />
         </div>
-    </section>
+        <h3 class="text-base font-semibold text-white">
+            Ainda sem participantes registados
+        </h3>
+        <p class="mt-1 max-w-sm text-xs text-neutral-400 sm:text-sm">
+            Os participantes inscritos na edição aparecerão aqui.
+        </p>
+    </div>
 </template>
diff --git a/resources/js/Components/Profile/CvArea.vue b/resources/js/Components/Profile/CvArea.vue
index 9236f00f..650a410d 100644
--- a/resources/js/Components/Profile/CvArea.vue
+++ b/resources/js/Components/Profile/CvArea.vue
@@ -1,9 +1,17 @@
 <script setup lang="ts">
-import { type User, isCompany, isParticipant } from "@/Types/User";
+import { type User, isParticipant } from "@/Types/User";
 import { useForm, usePage } from "@inertiajs/vue3";
-import { ExternalLink } from "@lucide/vue";
-import { ref } from "vue";
+import {
+    ExternalLink,
+    FileText,
+    Upload,
+    ChevronDown,
+    Trash2,
+    Loader2,
+} from "@lucide/vue";
+import { ref, computed } from "vue";
 import { route } from "ziggy-js";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
 
 interface Props {
     item: User | undefined;
@@ -13,7 +21,29 @@ const props = defineProps<Props>();
 
 const page = usePage();
 
-let previewOpen = ref(isCompany(page.props.auth.user) ?? false);
+const isOwnProfile = computed(() =>
+    Boolean(
+        page.props.auth.user?.id && page.props.auth.user.id === props.item?.id,
+    ),
+);
+
+const participant = computed(() =>
+    props.item && isParticipant(props.item) ? props.item.usertype : undefined,
+);
+
+const hasCV = computed(() =>
+    Boolean(participant.value?.cv_path || participant.value?.cv_url),
+);
+
+const cvUrl = computed(() => {
+    if (participant.value?.cv_url) return participant.value.cv_url;
+    if (participant.value?.cv_path) return `/storage/${participant.value.cv_path}`;
+    return undefined;
+});
+
+const previewOpen = ref(false);
+const isUploading = ref(false);
+const isDeleting = ref(false);
 
 const form = useForm({
     _method: "PUT",
@@ -35,14 +65,34 @@ const togglePreview = () => {
 const uploadCV = () => {
     const cv = cvInput.value?.files?.[0];
     if (cv) {
-        form.cv = cvInput.value?.files?.[0] ?? null;
+        isUploading.value = true;
+        form.cv = cv;
         form.post(route("current-user-cv.update"), {
             preserveScroll: true,
-            onSuccess: () => clearCVFileInput(),
+            onSuccess: () => {
+                clearCVFileInput();
+                previewOpen.value = true;
+            },
+            onFinish: () => {
+                isUploading.value = false;
+            },
         });
     }
 };
 
+const deleteCV = () => {
+    if (!confirm("Tens a certeza de que pretendes remover o teu currículo?")) {
+        return;
+    }
+    isDeleting.value = true;
+    form.delete(route("current-user-cv.destroy"), {
+        preserveScroll: true,
+        onFinish: () => {
+            isDeleting.value = false;
+        },
+    });
+};
+
 const clearCVFileInput = () => {
     if (cvInput.value?.value) {
         cvInput.value.value = "";
@@ -51,112 +101,183 @@ const clearCVFileInput = () => {
 </script>
 
 <template>
-    <div class="flex w-full flex-col py-12">
+    <div
+        class="flex w-full flex-col rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md"
+    >
         <div
-            class="bg-2025-blue flex justify-between rounded-md border-solid border-white p-3 px-8 font-bold text-white"
-            :class="[
-                previewOpen ? 'rounded-b-none border-x border-t' : 'border',
-            ]"
+            class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
         >
-            <div class="flex items-center">
-                <p>CV</p>
-                <button
-                    v-if="$page.props.auth.user?.id == item?.id"
-                    class="mx-3"
-                    @click.prevent="selectCV"
+            <div class="flex items-center gap-3">
+                <div
+                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-neutral-300"
                 >
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="text-2023-bg w-6"
-                        viewBox="0 0 512 512"
+                    <FileText :size="20" />
+                </div>
+                <div>
+                    <div class="flex items-center gap-2">
+                        <h2 class="text-base font-bold text-white sm:text-lg">
+                            Currículo Vitae (CV)
+                        </h2>
+                    </div>
+                    <p class="text-xs text-neutral-400">
+                        {{
+                            hasCV
+                                ? "O teu CV está pronto para partilha com parceiros"
+                                : "Ainda não submeteste o teu CV em formato PDF"
+                        }}
+                    </p>
+                </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="flex flex-wrap items-center gap-2">
+                <template v-if="isOwnProfile">
+                    <input
+                        ref="cvInput"
+                        type="file"
+                        class="hidden"
+                        accept="application/pdf"
+                        @change="uploadCV"
+                    />
+                    <PrimaryButton
+                        v-if="hasCV"
+                        type="button"
+                        color="pill"
+                        padding="p-2 sm:p-2.5"
+                        :disabled="isDeleting || isUploading"
+                        title="Remover currículo"
+                        aria-label="Remover currículo"
+                        @click="deleteCV"
                     >
-                        <path
-                            fill="none"
-                            stroke="currentColor"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="36"
-                            d="M56 262 v150 h400 M456 262 v150 M256 312 v-250 l-80 80 M256 62 l80 80"
+                        <Loader2
+                            v-if="isDeleting"
+                            :size="16"
+                            class="animate-spin text-rose-400"
                         />
-                    </svg>
-                </button>
-                <input
-                    ref="cvInput"
-                    type="file"
-                    class="hidden"
-                    accept="application/pdf"
-                    @change="uploadCV"
-                />
+                        <Trash2 v-else :size="16" class="text-rose-400" />
+                    </PrimaryButton>
+
+                    <PrimaryButton
+                        v-if="hasCV"
+                        type="button"
+                        color="pill"
+                        padding="p-2 sm:p-2.5"
+                        :disabled="isUploading || isDeleting"
+                        title="Substituir CV"
+                        aria-label="Substituir CV"
+                        @click.prevent="selectCV"
+                    >
+                        <Loader2
+                            v-if="isUploading"
+                            :size="16"
+                            class="animate-spin"
+                        />
+                        <Upload v-else :size="16" />
+                    </PrimaryButton>
+
+                    <PrimaryButton
+                        v-else
+                        type="button"
+                        color="pill"
+                        padding="px-4 py-2"
+                        :disabled="isUploading || isDeleting"
+                        title="Carregar CV"
+                        aria-label="Carregar CV"
+                        @click.prevent="selectCV"
+                    >
+                        <Loader2
+                            v-if="isUploading"
+                            :size="15"
+                            class="animate-spin"
+                        />
+                        <Upload v-else :size="15" />
+                        <span>{{
+                            isUploading ? "A enviar..." : "Carregar CV"
+                        }}</span>
+                    </PrimaryButton>
+                </template>
+
+                <template v-if="hasCV && cvUrl">
+                    <PrimaryButton
+                        :href="cvUrl"
+                        external
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        color="pill"
+                        padding="px-4 py-2"
+                    >
+                        <ExternalLink :size="15" />
+                        <span>Abrir PDF</span>
+                    </PrimaryButton>
+
+                    <PrimaryButton
+                        type="button"
+                        color="pill"
+                        padding="px-4 py-2"
+                        @click="togglePreview"
+                    >
+                        <span>Pré-visualização</span>
+                        <ChevronDown
+                            :size="15"
+                            class="transition-transform duration-200"
+                            :class="{ 'rotate-180': previewOpen }"
+                        />
+                    </PrimaryButton>
+                </template>
             </div>
-            <button
-                :class="[previewOpen ? 'rotate-180' : '']"
-                @click="togglePreview"
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="text-2023-bg w-6"
-                    viewBox="0 0 512 512"
-                >
-                    <path
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="48"
-                        d="M70 184l180 160 180-160"
-                    />
-                </svg>
-            </button>
         </div>
+
         <div
-            class="bg-2025-blue h-fit items-center justify-center rounded-md border-x border-b border-solid border-white p-6 font-bold text-white"
-            :class="[previewOpen ? 'flex rounded-t-none' : 'hidden']"
+            v-if="previewOpen && hasCV && cvUrl"
+            class="mt-6 flex flex-col gap-3 rounded-2xl border border-white/10 bg-neutral-950/80 p-3 sm:p-5"
         >
-            <object
-                v-if="isParticipant(item) && item.usertype?.cv_path"
-                :data="item.usertype?.cv_url + '#toolbar&view=FitH'"
-                width="100%"
-                type="application/pdf"
-                style="aspect-ratio: 1 / 1.41"
-                class="max-md:hidden"
-            ></object>
-            <a
-                v-if="isParticipant(item) && item.usertype?.cv_path"
-                class="md:hidden"
-                target="_blank"
-                :href="item.usertype?.cv_url"
+            <div
+                class="relative w-full overflow-hidden rounded-xl border border-white/10 bg-neutral-900 shadow-inner"
             >
-                <div class="text-2023-bg flex items-center gap-1">
-                    <span>CV</span>
-                    <ExternalLink :size="16" />
+                <iframe
+                    :src="cvUrl"
+                    class="hidden h-162.5 w-full bg-white sm:block"
+                    title="Pré-visualização do CV"
+                />
+
+                <div
+                    class="flex flex-col items-center justify-center gap-3 py-10 text-center sm:hidden"
+                >
+                    <FileText :size="36" class="text-neutral-400" />
+                    <p class="px-4 text-xs text-neutral-300">
+                        Abre o teu documento PDF para consulta detalhada no
+                        navegador.
+                    </p>
+                    <PrimaryButton
+                        :href="cvUrl"
+                        external
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        color="pill"
+                        padding="px-4 py-2"
+                    >
+                        <ExternalLink :size="14" />
+                        <span>Ver CV no navegador</span>
+                    </PrimaryButton>
                 </div>
-            </a>
-            <p v-if="isParticipant(item) && !item.usertype?.cv_path">
-                Nenhum CV disponível
-            </p>
+            </div>
         </div>
+
         <div
-            v-if="
-                isParticipant(item) &&
-                !item?.usertype?.cv_path &&
-                $page.props.auth.user?.id == item.id
-            "
-            class="text-2023-red mt-6 rounded-md border-2 border-solid border-white p-3 shadow-black/80"
+            v-if="!hasCV && isOwnProfile"
+            class="mt-5 flex items-start gap-3.5 rounded-2xl border border-white/8 bg-white/4 p-4 text-xs text-neutral-300 sm:text-sm"
         >
-            <p>
-                <span class="text-text-color font-bold"
-                    >Por que é que o deves fazer?
-                </span>
-                <span class="text-text-color"
-                    >Esta é uma excelente oportunidade para te dares a conhecer
-                    às empresas que participam na SINF!</span
-                >
-            </p>
-            <p class="text-text-color">
-                No fim do evento o teu CV será dado a estas empresas para que
-                possam ficar com os teus dados e, possivelmente, manter o
-                contacto contigo.
-            </p>
+            <div class="space-y-1">
+                <p class="font-semibold text-white">
+                    Porque deves carregar o teu CV?
+                </p>
+                <p class="leading-relaxed text-neutral-400">
+                    Esta é uma excelente oportunidade para te dares a conhecer
+                    às empresas parceiras da SINF! No fim do evento, o teu CV
+                    será partilhado com as bancas que visitares, facilitando o
+                    contacto e futuras oportunidades de recrutamento.
+                </p>
+            </div>
         </div>
     </div>
 </template>
diff --git a/resources/js/Components/Profile/EnrolledParticipants.vue b/resources/js/Components/Profile/EnrolledParticipants.vue
index 9465fc75..174b41d2 100644
--- a/resources/js/Components/Profile/EnrolledParticipants.vue
+++ b/resources/js/Components/Profile/EnrolledParticipants.vue
@@ -1,8 +1,18 @@
 <script setup lang="ts">
 import type Participant from "@/Types/Participant";
 import { usePage } from "@inertiajs/vue3";
-import { FileText } from "@lucide/vue";
+import {
+    FileText,
+    Download,
+    Users,
+    Search,
+    ExternalLink,
+    X,
+} from "@lucide/vue";
+import { computed, ref } from "vue";
 import SocialIcon from "@/Components/UI/SocialIcon.vue";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PillSelector, { type PillOption } from "@/Components/UI/PillSelector.vue";
 import { route } from "ziggy-js";
 
 type Visitor = Participant & {
@@ -11,71 +21,273 @@ type Visitor = Participant & {
     can_see_all: boolean;
 };
 
-const visitors = usePage().props.participants as Visitor[];
-const user = usePage().props.user as Participant;
+const page = usePage();
+const visitors = computed(() => (page.props.participants as Visitor[]) ?? []);
+const user = computed(() => page.props.user as Participant);
+
+const searchQuery = ref("");
+const filterType = ref<"all" | "linkedin" | "cv">("all");
+
+const cvCount = computed(
+    () => visitors.value.filter((v) => v.can_see_cv && v.cv_url).length,
+);
+
+const linkedinCount = computed(
+    () =>
+        visitors.value.filter(
+            (v) => v.can_see_linkedin && v.social_media?.linkedin,
+        ).length,
+);
+
+const filterOptions = computed<PillOption[]>(() => [
+    {
+        id: "all",
+        label: "Todos",
+        count: visitors.value.length,
+    },
+    {
+        id: "linkedin",
+        label: "Com LinkedIn",
+        count: linkedinCount.value,
+    },
+    {
+        id: "cv",
+        label: "Com CV",
+        count: cvCount.value,
+    },
+]);
+
+const filteredVisitors = computed(() => {
+    return visitors.value.filter((v) => {
+        if (filterType.value === "cv" && (!v.can_see_cv || !v.cv_url)) {
+            return false;
+        }
+        if (
+            filterType.value === "linkedin" &&
+            (!v.can_see_linkedin || !v.social_media?.linkedin)
+        ) {
+            return false;
+        }
+
+        if (!searchQuery.value.trim()) return true;
+        const q = searchQuery.value.toLowerCase().trim();
+        const name = v.user?.name?.toLowerCase() ?? "";
+        const email = v.user?.email?.toLowerCase() ?? "";
+        return name.includes(q) || email.includes(q);
+    });
+});
 </script>
 
 <template>
-    <section
+    <div
         v-if="visitors.length > 0"
-        class="mt-10 flex flex-col items-center gap-3"
+        class="flex w-full flex-col rounded-3xl border border-white/8 bg-black/50 p-5 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md sm:p-7"
     >
-        <div class="flex w-full flex-col md:flex-row md:justify-between">
-            <h2 class="text-text-color p-3 text-2xl font-bold">
-                Participantes que visitaram a sua empresa: {{ visitors.length }}
-            </h2>
-            <a
-                v-if="$page.props"
-                class="bg-2025-dark shadow-2023-teal inline-flex items-center justify-center border border-black px-4 py-2 text-center text-xl font-bold text-white transition-shadow hover:shadow"
+        <div
+            class="flex flex-col gap-4 border-b border-white/8 pb-5 sm:flex-row sm:items-center sm:justify-between"
+        >
+            <div class="flex items-center gap-3">
+                <div
+                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-neutral-300"
+                >
+                    <Users :size="20" />
+                </div>
+                <div>
+                    <h2 class="text-base font-bold text-white sm:text-lg">
+                        Participantes que visitaram a empresa
+                    </h2>
+                    <p class="text-xs text-neutral-400">
+                        Total registado:
+                        <span class="font-semibold text-white">{{
+                            visitors.length
+                        }}</span>
+                    </p>
+                </div>
+            </div>
+
+            <PrimaryButton
                 :href="route('user.company.participants.cvs', { user })"
+                external
+                color="pill"
+                padding="px-4 py-2"
+                class="w-full sm:w-auto"
             >
-                Descarregar CVs
-            </a>
+                <Download :size="15" />
+                <span>Descarregar CVs</span>
+            </PrimaryButton>
         </div>
+
         <div
-            class="bg-2025-bg shadow-2023-teal flex w-full flex-col items-center border border-black shadow-lg"
+            class="mt-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
         >
-            <div
-                v-for="visitor in visitors"
-                :key="visitor.id"
-                class="flex w-full items-center justify-between p-3 even:bg-white/20"
-            >
-                <a
-                    :href="route('user.profile', { user: visitor.user })"
-                    target="_blank"
+            <div class="relative w-full sm:max-w-xs">
+                <Search
+                    :size="15"
+                    class="absolute top-1/2 left-3 -translate-y-1/2 text-neutral-400"
+                />
+                <input
+                    v-model="searchQuery"
+                    type="text"
+                    placeholder="Pesquisar por nome ou email..."
+                    class="w-full rounded-2xl border border-white/10 bg-white/5 py-2 pr-8 pl-9 text-xs text-white placeholder-neutral-500 transition-colors focus:border-white/30 focus:bg-white/10 focus:outline-none sm:text-sm"
+                />
+                <button
+                    v-if="searchQuery"
+                    type="button"
+                    class="absolute top-1/2 right-2.5 -translate-y-1/2 text-neutral-400 hover:text-white"
+                    @click="searchQuery = ''"
                 >
-                    {{ visitor.user?.name ?? visitor.id }}
-                </a>
-                <div class="flex gap-4">
-                    <a
-                        v-if="
-                            visitor.can_see_linkedin &&
-                            visitor.social_media?.linkedin
-                        "
-                        :href="visitor.social_media.linkedin"
-                        target="_blank"
-                        title="Linkedin"
-                        class="flex items-center text-neutral-400 hover:text-white"
-                    >
-                        <SocialIcon platform="linkedin" :size="16" />
-                    </a>
-
-                    <a
-                        v-if="visitor.can_see_cv && visitor.cv_url"
-                        :href="visitor.cv_url"
-                        target="_blank"
-                        title="CV"
-                        class="flex items-center text-neutral-400 hover:text-white"
-                    >
-                        <FileText :size="16" />
-                    </a>
-                </div>
+                    <X :size="14" />
+                </button>
+            </div>
+
+            <PillSelector
+                v-model="filterType"
+                :items="filterOptions"
+                size="sm"
+            />
+        </div>
+
+        <div
+            v-if="filteredVisitors.length > 0"
+            class="mt-4 overflow-hidden rounded-2xl border border-white/8"
+        >
+            <div class="overflow-x-auto">
+                <table class="w-full text-left text-sm text-neutral-300">
+                    <tbody class="divide-y divide-white/6">
+                        <tr
+                            v-for="visitor in filteredVisitors"
+                            :key="visitor.id"
+                            class="transition-colors hover:bg-white/4"
+                        >
+                            <!-- Participant Info (Left) -->
+                            <td class="py-3 pr-3 pl-4 sm:pl-5">
+                                <div class="flex items-center gap-3">
+                                    <div
+                                        class="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-neutral-800 ring-1 ring-white/10"
+                                    >
+                                        <img
+                                            v-if="visitor.user?.profile_photo_url"
+                                            :src="visitor.user.profile_photo_url"
+                                            :alt="visitor.user.name"
+                                            class="h-full w-full object-cover"
+                                        />
+                                        <span
+                                            v-else
+                                            class="text-xs font-bold uppercase text-neutral-300"
+                                        >
+                                            {{ visitor.user?.name?.charAt(0) ?? "P" }}
+                                        </span>
+                                    </div>
+                                    <div class="min-w-0">
+                                        <a
+                                            :href="
+                                                visitor.user
+                                                    ? route('user.profile', { user: visitor.user })
+                                                    : '#'
+                                            "
+                                            target="_blank"
+                                            class="block truncate font-medium text-white transition-colors hover:text-white/80"
+                                        >
+                                            {{ visitor.user?.name ?? `Participante #${visitor.id}` }}
+                                        </a>
+                                        <p
+                                            v-if="visitor.user?.email"
+                                            class="truncate text-xs text-neutral-400"
+                                        >
+                                            {{ visitor.user.email }}
+                                        </p>
+                                    </div>
+                                </div>
+                            </td>
+
+                            <td class="w-px py-3 pr-4 pl-3 text-right whitespace-nowrap sm:pr-5">
+                                <div class="flex items-center justify-end gap-1.5">
+                                    <PrimaryButton
+                                        v-if="
+                                            visitor.can_see_linkedin &&
+                                            visitor.social_media?.linkedin
+                                        "
+                                        :href="visitor.social_media.linkedin"
+                                        external
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        color="pill"
+                                        padding="p-2"
+                                        class="shrink-0"
+                                        title="LinkedIn"
+                                        aria-label="LinkedIn"
+                                    >
+                                        <SocialIcon platform="linkedin" :size="15" />
+                                    </PrimaryButton>
+
+                                    <PrimaryButton
+                                        v-if="visitor.can_see_cv && visitor.cv_url"
+                                        :href="visitor.cv_url"
+                                        external
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        color="pill"
+                                        padding="p-2"
+                                        class="shrink-0"
+                                        title="Currículo Vitae"
+                                        aria-label="Ver CV"
+                                    >
+                                        <FileText :size="15" />
+                                    </PrimaryButton>
+
+                                    <PrimaryButton
+                                        v-if="visitor.user"
+                                        :href="route('user.profile', { user: visitor.user })"
+                                        color="pill"
+                                        padding="p-2"
+                                        class="shrink-0"
+                                        title="Ver Perfil"
+                                        aria-label="Ver Perfil"
+                                    >
+                                        <ExternalLink :size="15" />
+                                    </PrimaryButton>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
         </div>
-    </section>
-    <div v-else class="flex h-full flex-1 items-center justify-center">
-        <p class="text-text-color text-center text-2xl font-bold">
-            Ainda nenhum participante visitou a sua empresa.
+
+        <div
+            v-if="filteredVisitors.length === 0"
+            class="flex flex-col items-center justify-center py-12 text-center"
+        >
+            <p class="text-sm text-neutral-400">
+                Nenhum participante encontrado
+                <span v-if="searchQuery"> para "{{ searchQuery }}"</span>
+                <span v-if="filterType !== 'all'"> com o filtro selecionado</span>.
+            </p>
+            <button
+                type="button"
+                class="mt-2 text-xs text-sinf-primary hover:underline"
+                @click="searchQuery = ''; filterType = 'all'"
+            >
+                Limpar filtros
+            </button>
+        </div>
+    </div>
+
+    <div
+        v-else
+        class="flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 py-16 px-6 text-center shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md"
+    >
+        <div
+            class="mb-4 flex h-14 w-14 items-center justify-center rounded-3xl border border-white/10 bg-white/5 text-neutral-400"
+        >
+            <Users :size="28" />
+        </div>
+        <h3 class="text-base font-semibold text-white">
+            Ainda sem visitas registadas
+        </h3>
+        <p class="mt-1 max-w-sm text-xs text-neutral-400 sm:text-sm">
+            Os participantes que visitarem e fizerem check-in na vossa banca aparecerão aqui.
         </p>
     </div>
 </template>
diff --git a/resources/js/Components/Profile/InfoCard.vue b/resources/js/Components/Profile/InfoCard.vue
index dd7d4ec5..838264ab 100644
--- a/resources/js/Components/Profile/InfoCard.vue
+++ b/resources/js/Components/Profile/InfoCard.vue
@@ -1,100 +1,37 @@
 <script setup lang="ts">
-import { type User, isAdmin, isParticipant, isCompany } from "@/Types/User";
-import "vue-final-modal/style.css";
-import { Link, usePage } from "@inertiajs/vue3";
-import { Award, Camera, Edit3 } from "@lucide/vue";
-import SocialIcon from "@/Components/UI/SocialIcon.vue";
-import { route } from "ziggy-js";
-import QRCode from "./QRCode.vue";
+import ProfileCard from "./ProfileCard.vue";
+import type { User } from "@/Types/User";
 
 interface Props {
     user?: User;
-    isStaff: boolean;
+    isStaff?: boolean;
+    points?: number | null;
+    showSocialMedia?: boolean;
 }
 
-defineProps<Props>();
-
-const page = usePage();
-
-const socialKeys = [
-    "facebook",
-    "linkedin",
-    "github",
-    "twitter",
-    "instagram",
-    "website",
-] as const;
-
-const authUser = page.props.auth.user;
+withDefaults(defineProps<Props>(), {
+    user: undefined,
+    isStaff: false,
+    points: undefined,
+    showSocialMedia: true,
+});
 </script>
 
 <template>
-    <div
-        class="bg-2025-blue text-text-color mr-3 flex justify-between rounded-lg border border-solid border-black p-3 shadow-xl shadow-black/80 max-md:mr-3 md:min-w-[30vw]"
+    <ProfileCard
+        :user="user"
+        :is-staff="isStaff"
+        :points="points"
+        :show-social-media="showSocialMedia"
     >
-        <div class="flex flex-col items-start justify-between space-y-10">
-            <div>
-                <p class="flex items-center gap-1.5 font-bold">
-                    <span>{{ user?.name }}</span>
-                    <span
-                        v-if="isStaff"
-                        title="Staff"
-                        class="inline-flex items-center text-amber-300"
-                    >
-                        <Award :size="18" />
-                    </span>
-                </p>
-                <p>
-                    {{ user?.email }}
-                </p>
-            </div>
-            <div class="flex items-center space-x-4">
-                <template v-for="key in socialKeys" :key="key">
-                    <a
-                        v-if="
-                            !isAdmin(user) &&
-                            user?.usertype?.social_media?.[key]
-                        "
-                        class="flex w-fit items-center rounded-full text-white hover:opacity-80"
-                        target="_blank"
-                        :href="user.usertype.social_media[key]"
-                    >
-                        <SocialIcon :platform="key" :size="18" />
-                    </a>
-                </template>
-            </div>
-        </div>
-        <div class="flex flex-col items-center justify-between">
-            <Link
-                v-if="$page.props.auth.user?.id === user?.id"
-                :href="route('profile.edit')"
-                class="flex items-center p-1 text-white hover:opacity-80"
-            >
-                <Edit3 :size="22" />
-            </Link>
-            <template
-                v-if="
-                    authUser?.id &&
-                    authUser.id === user?.id &&
-                    (isAdmin(user) || isStaff || isCompany(user))
-                "
-            >
-                <Link
-                    class="flex w-fit cursor-pointer items-center rounded-full p-1 text-white hover:opacity-80"
-                    :href="route('user.scan-code')"
-                >
-                    <Camera :size="22" />
-                </Link>
-            </template>
-            <QRCode
-                v-if="
-                    authUser?.id &&
-                    authUser.id === user?.id &&
-                    isParticipant(user) &&
-                    user.usertype
-                "
-                :participant="user.usertype"
-            />
-        </div>
-    </div>
+        <template v-if="$slots.avatar" #avatar>
+            <slot name="avatar" />
+        </template>
+        <template v-if="$slots.details" #details>
+            <slot name="details" />
+        </template>
+        <template v-if="$slots.actions" #actions>
+            <slot name="actions" />
+        </template>
+    </ProfileCard>
 </template>
diff --git a/resources/js/Components/Profile/InteractionArea.vue b/resources/js/Components/Profile/InteractionArea.vue
index fce87914..9d83f0fb 100644
--- a/resources/js/Components/Profile/InteractionArea.vue
+++ b/resources/js/Components/Profile/InteractionArea.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
-import { ref, watch, type UnwrapRef, onMounted, computed } from "vue";
+import { ref, watch, computed } from "vue";
 import { type Tabs } from "@/Types/ProfilePage";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
+import { Ticket, Award, UserCheck, Users } from "@lucide/vue";
 
 type Props = {
     buttons: Tabs;
@@ -10,65 +14,58 @@ const props = defineProps<Props>();
 
 const buttons = computed(() => props.buttons);
 
-const selected = ref<HTMLElement | null>(null);
+const buttonKeys = computed(() => Object.keys(buttons.value));
 
-const firstType = Object.keys(buttons.value)[0];
+const selectedType = ref<string>(buttonKeys.value[0] ?? "");
 
-const selectedType = ref<keyof typeof buttons.value>(firstType);
+watch(
+    buttonKeys,
+    (keys) => {
+        if (!keys.includes(selectedType.value) && keys.length > 0) {
+            selectedType.value = keys[0];
+        }
+    },
+    { immediate: true },
+);
 
-watch(selected, (newValue, oldValue) => {
-    oldValue?.classList.toggle("selected");
-    newValue?.classList.toggle("selected");
+const tabOptions = computed<PillOption[]>(() => {
+    return Object.entries(buttons.value).map(([id, item]) => {
+        let icon = undefined;
+        if (id === "ticket") icon = Ticket;
+        else if (id === "sticker") icon = Award;
+        else if (id === "visitHistory") icon = UserCheck;
+        else if (id === "allParticipants") icon = Users;
 
-    selectedType.value =
-        (newValue?.dataset.type as UnwrapRef<typeof selectedType>) ?? firstType;
+        return {
+            id,
+            label: item.label,
+            icon,
+        };
+    });
 });
 
 const view = computed(() => {
     return buttons.value[selectedType.value]?.component;
 });
-
-const toggle = ({ target }: MouseEvent) => {
-    selected.value = target as HTMLElement;
-};
-
-onMounted(() => {
-    selected.value = document.querySelector<HTMLElement>(
-        "#tab-picker > button:first-of-type",
-    );
-
-    if (selected.value)
-        selectedType.value =
-            (selected.value.dataset.type as UnwrapRef<typeof selectedType>) ??
-            firstType;
-});
 </script>
 
 <template>
-    <section class="flex h-full w-full flex-1 flex-col pt-10">
-        <div
-            id="tab-picker"
-            class="text-2025-blue-dark flex flex-row justify-center gap-4 pt-5 font-bold"
-        >
-            <button
-                v-for="(button, id) in buttons"
-                :key="id"
-                class="text- transition"
-                :data-type="id"
-                @click="toggle"
-            >
-                {{ button.label }}
-            </button>
+    <section
+        v-if="tabOptions.length > 0"
+        class="flex w-full flex-1 flex-col pt-4"
+    >
+        <div v-if="tabOptions.length > 1" class="mb-8 flex justify-center">
+            <PillSelector
+                v-model="selectedType"
+                :items="tabOptions"
+                size="md"
+            />
+        </div>
+
+        <div class="w-full">
+            <KeepAlive>
+                <component :is="view" :key="selectedType" />
+            </KeepAlive>
         </div>
-        <KeepAlive>
-            <component :is="view"></component>
-        </KeepAlive>
     </section>
 </template>
-
-<style scoped>
-.selected {
-    color: rgb(255, 255, 255);
-    text-decoration: underline;
-}
-</style>
diff --git a/resources/js/Components/Profile/ProfileCard.vue b/resources/js/Components/Profile/ProfileCard.vue
new file mode 100644
index 00000000..2db06fb2
--- /dev/null
+++ b/resources/js/Components/Profile/ProfileCard.vue
@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { usePage } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
+import Card from "@/Components/UI/Card.vue";
+import SocialIcon from "@/Components/UI/SocialIcon.vue";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+import ProfilePicture from "./ProfilePicture.vue";
+import QRCode from "./QRCode.vue";
+import {
+    Award,
+    Briefcase,
+    Camera,
+    Edit3,
+    Mic,
+    Shield,
+    User as UserIcon,
+} from "@lucide/vue";
+import {
+    type User,
+    isAdmin,
+    isParticipant,
+    isCompany,
+    isSpeaker,
+} from "@/Types/User";
+import type Company from "@/Types/Company";
+import type Speaker from "@/Types/Speaker";
+import type Participant from "@/Types/Participant";
+
+interface Props {
+    user?: User;
+    isStaff?: boolean;
+    points?: number | null;
+    showSocialMedia?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    user: undefined,
+    isStaff: false,
+    points: undefined,
+    showSocialMedia: true,
+});
+
+const page = usePage();
+
+const socialKeys = [
+    "facebook",
+    "linkedin",
+    "github",
+    "twitter",
+    "instagram",
+    "website",
+] as const;
+
+const authUser = computed(() => page.props.auth?.user as User | undefined);
+
+const isOwnProfile = computed(() =>
+    Boolean(authUser.value?.id && authUser.value.id === props.user?.id),
+);
+
+const userSocialMedia = computed(() => {
+    if (!props.user || isAdmin(props.user)) return undefined;
+    return (
+        props.user.usertype as
+            | Company
+            | Speaker
+            | Participant
+            | undefined
+    )?.social_media;
+});
+
+const hasSocialMedia = computed(() => {
+    if (!userSocialMedia.value) return false;
+    return socialKeys.some((k) => Boolean(userSocialMedia.value?.[k]));
+});
+
+const userTypeBadge = computed(() => {
+    if (props.isStaff) {
+        return { label: "Staff", icon: Award };
+    }
+    if (props.user && isAdmin(props.user)) {
+        return { label: "Administrador", icon: Shield };
+    }
+    if (props.user && isSpeaker(props.user)) {
+        return { label: "Orador", icon: Mic };
+    }
+    if (props.user && isCompany(props.user)) {
+        return { label: "Empresa", icon: Briefcase };
+    }
+    if (props.user && isParticipant(props.user)) {
+        return { label: "Participante", icon: UserIcon };
+    }
+    return null;
+});
+
+const hasPoints = computed(
+    () => props.points !== null && props.points !== undefined,
+);
+
+const hasDefaultActions = computed(() => isOwnProfile.value);
+</script>
+
+<template>
+    <Card as="section" :interactive="false" padding="p-5 sm:p-7">
+        <div
+            class="flex flex-col justify-between gap-5 sm:flex-row sm:items-center"
+        >
+            <!-- Left: Avatar + User details -->
+            <div class="flex items-center gap-3.5 sm:gap-5">
+                <slot name="avatar">
+                    <ProfilePicture :item="user" size="sm" />
+                </slot>
+
+                <div class="min-w-0 space-y-1">
+                    <slot name="details">
+                        <div class="flex flex-wrap items-center gap-2">
+                            <h1
+                                class="truncate text-base font-bold text-white sm:text-xl"
+                            >
+                                {{ user?.name }}
+                            </h1>
+                            <span
+                                v-if="userTypeBadge"
+                                class="pill-container gap-1.5 px-2.5 py-0.5 text-[11px] font-medium text-neutral-300"
+                            >
+                                <component
+                                    :is="userTypeBadge.icon"
+                                    :size="12"
+                                    class="shrink-0 text-neutral-400"
+                                />
+                                <span>{{ userTypeBadge.label }}</span>
+                            </span>
+                        </div>
+
+                        <p
+                            v-if="user?.email"
+                            class="truncate text-xs text-neutral-400 sm:text-sm"
+                        >
+                            {{ user.email }}
+                        </p>
+
+                        <!-- Social Media Links -->
+                        <div
+                            v-if="showSocialMedia && hasSocialMedia"
+                            class="flex flex-wrap items-center gap-1.5 pt-1"
+                        >
+                            <template v-for="key in socialKeys" :key="key">
+                                <a
+                                    v-if="userSocialMedia?.[key]"
+                                    class="flex h-7 w-7 items-center justify-center rounded-full border border-white/8 bg-white/5 text-neutral-400 transition-all duration-150 hover:border-white/20 hover:bg-white/10 hover:text-white active:scale-95"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    :href="userSocialMedia[key]"
+                                    :title="key"
+                                >
+                                    <SocialIcon :platform="key" :size="13" />
+                                </a>
+                            </template>
+                        </div>
+                    </slot>
+                </div>
+            </div>
+
+            <!-- Right: Balance / Actions -->
+            <div
+                v-if="
+                    $slots.actions ||
+                    (isOwnProfile && (hasPoints || hasDefaultActions))
+                "
+                class="flex w-full flex-col gap-2.5 sm:w-auto sm:flex-row sm:items-center sm:justify-end"
+            >
+                <slot name="actions">
+                    <!-- Balance / Points (Sinfrões) -->
+                    <div
+                        v-if="hasPoints && isOwnProfile"
+                        class="pill-container justify-center sm:justify-start gap-2 px-3.5 py-1.5 text-xs font-medium text-neutral-300 shadow-none sm:text-sm self-stretch sm:self-auto"
+                        title="O teu saldo de SINFrões"
+                    >
+                        <span class="text-neutral-400">Saldo:</span>
+                        <span class="font-bold text-white">{{ points }}</span>
+                        <img
+                            class="h-4 w-4 object-contain"
+                            alt="SINFrão"
+                            title="SINFrão"
+                            src="/images/sinf-2026-sm.svg"
+                        />
+                    </div>
+
+                    <!-- Profile Actions -->
+                    <div
+                        v-if="hasDefaultActions && isOwnProfile"
+                        class="flex flex-wrap items-center gap-2 w-full sm:w-auto"
+                    >
+                        <PrimaryButton
+                            :href="route('profile.edit')"
+                            color="pill"
+                            padding="px-3.5 py-2 sm:px-4 sm:py-2"
+                            class="flex-1 min-w-[130px] sm:min-w-0 sm:flex-initial sm:w-auto"
+                        >
+                            <Edit3 :size="15" />
+                            <span>Editar Perfil</span>
+                        </PrimaryButton>
+
+                        <PrimaryButton
+                            v-if="
+                                isAdmin(user) ||
+                                isStaff ||
+                                (user && isCompany(user))
+                            "
+                            :href="route('user.scan-code')"
+                            color="pill"
+                            padding="px-3.5 py-2 sm:px-4 sm:py-2"
+                            class="flex-1 min-w-[130px] sm:min-w-0 sm:flex-initial sm:w-auto"
+                        >
+                            <Camera :size="15" />
+                            <span>Ler QR</span>
+                        </PrimaryButton>
+
+                        <QRCode
+                            v-if="isParticipant(user) && user?.usertype"
+                            :participant="user.usertype"
+                            class="flex-1 min-w-[130px] sm:min-w-0 sm:flex-initial sm:w-auto"
+                        />
+                    </div>
+                </slot>
+            </div>
+        </div>
+    </Card>
+</template>
diff --git a/resources/js/Components/Profile/ProfilePicture.vue b/resources/js/Components/Profile/ProfilePicture.vue
index 5b61b38d..9a71d122 100644
--- a/resources/js/Components/Profile/ProfilePicture.vue
+++ b/resources/js/Components/Profile/ProfilePicture.vue
@@ -3,22 +3,44 @@ import type { User } from "@/Types/User";
 
 interface Props {
     item: User | undefined;
+    size?: "sm" | "md" | "lg";
 }
 
-defineProps<Props>();
+withDefaults(defineProps<Props>(), {
+    size: "lg",
+});
 </script>
 
 <template>
-    <div class="flex items-end justify-center max-md:mb-6">
+    <div class="relative shrink-0 select-none">
         <div
-            class="h-48 w-48 overflow-hidden rounded-full border-4 border-solid border-white max-md:ml-6"
+            class="overflow-hidden rounded-full bg-neutral-900 ring-2 ring-white/10 transition-all duration-300"
+            :class="{
+                'h-18 w-18 sm:h-22 sm:w-22': size === 'sm',
+                'h-24 w-24 sm:h-28 sm:w-28': size === 'md',
+                'h-28 w-28 sm:h-32 sm:w-32': size === 'lg',
+            }"
         >
             <img
-                :src="item?.profile_photo_url"
-                :alt="item?.name"
+                v-if="item?.profile_photo_url"
+                :src="item.profile_photo_url"
+                :alt="item.name"
                 class="h-full w-full object-cover"
             />
+            <div
+                v-else
+                class="flex h-full w-full items-center justify-center bg-neutral-800 text-neutral-300"
+            >
+                <span
+                    class="font-bold uppercase"
+                    :class="{
+                        'text-xl sm:text-2xl': size === 'sm',
+                        'text-2xl sm:text-3xl': size === 'md' || size === 'lg',
+                    }"
+                >
+                    {{ item?.name?.charAt(0) ?? "U" }}
+                </span>
+            </div>
         </div>
     </div>
 </template>
-
diff --git a/resources/js/Components/Profile/QRCode.vue b/resources/js/Components/Profile/QRCode.vue
index 3d22dd17..6804d98f 100644
--- a/resources/js/Components/Profile/QRCode.vue
+++ b/resources/js/Components/Profile/QRCode.vue
@@ -4,6 +4,7 @@ import { router } from "@inertiajs/vue3";
 import { QrCode } from "@lucide/vue";
 import { computed, ref } from "vue";
 import Modal from "@/Components/UI/Modal.vue";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
 import { route } from "ziggy-js";
 
 interface Props {
@@ -31,14 +32,17 @@ const showQRCode = () => {
 </script>
 
 <template>
-    <button
+    <PrimaryButton
+        v-bind="$attrs"
         type="button"
-        class="text-text-color flex w-fit cursor-pointer items-center justify-center rounded-full hover:opacity-80"
+        color="pill"
+        padding="px-3.5 py-2 sm:px-4 sm:py-2"
         aria-label="Ver QR Code"
         @click="showQRCode"
     >
-        <QrCode :size="22" />
-    </button>
+        <QrCode :size="15" />
+        <span>QR Code</span>
+    </PrimaryButton>
 
     <Modal
         v-model="modalOpen"
@@ -47,21 +51,26 @@ const showQRCode = () => {
         description="Apresenta este código QR ou código numérico nas bancas e eventos."
     >
         <div class="flex flex-col items-center justify-center gap-6 py-2">
-            <span v-if="loading" class="text-sm text-neutral-400">A gerar código...</span>
+            <span v-if="loading" class="text-sm text-neutral-400"
+                >A gerar código...</span
+            >
             <template v-else>
                 <div
                     v-if="participant.quest_qr_code"
-                    class="rounded-2xl bg-white p-4 shadow-lg flex items-center justify-center"
+                    class="flex items-center justify-center rounded-2xl bg-white p-4"
                     v-html="participant.quest_qr_code"
                 />
                 <div
                     v-if="participant.quest_code"
-                    class="pill-container px-4 py-1.5 font-mono text-base font-bold text-white tracking-widest"
+                    class="flex flex-col items-center gap-1 text-center"
                 >
-                    {{ participant.quest_code }}
+                    <code
+                        class="rounded-xl border border-white/10 bg-white/5 px-4 py-2 font-mono text-xl font-bold tracking-widest text-white"
+                    >
+                        {{ participant.quest_code }}
+                    </code>
                 </div>
             </template>
         </div>
     </Modal>
 </template>
-
diff --git a/resources/js/Components/Profile/Sticker.vue b/resources/js/Components/Profile/Sticker.vue
index 480b4103..99502f71 100644
--- a/resources/js/Components/Profile/Sticker.vue
+++ b/resources/js/Components/Profile/Sticker.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type Slot from "@/Types/Slot";
 import { computed } from "vue";
+import { CheckCircle2 } from "@lucide/vue";
 
 const props = defineProps<{
     sticker: Slot;
@@ -8,54 +9,112 @@ const props = defineProps<{
 
 const sticker = computed(() => props.sticker);
 
+const completedCount = computed(() => sticker.value.completed_count ?? 0);
+const totalQuests = computed(() => sticker.value.total_quests ?? 1);
+
 const completeness = computed(() => {
-    return Math.min(
-        1,
-        (sticker.value.completed_count ?? 0) / sticker.value.total_quests,
-    );
+    return Math.min(1, completedCount.value / totalQuests.value);
 });
+
+const isFullyCompleted = computed(() => completeness.value >= 1);
 </script>
 
 <template>
     <div
-        class="group relative h-52 w-52 overflow-hidden"
-        :style="
-            sticker.image_slot_url
-                ? {
-                      'mask-image': `url('${sticker.image_slot_url}')`,
-                      'mask-repeat': 'no-repeat',
-                      'mask-size': 'contain',
-                      'mask-position': 'center',
-                  }
-                : ''
-        "
+        class="group relative flex w-56 flex-col items-center justify-between rounded-3xl border border-white/8 bg-black/50 p-4 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 select-none hover:scale-[1.02] hover:border-white/20 sm:w-60 sm:p-5"
     >
-        <img
-            v-if="sticker.image_slot_url"
-            class="absolute inset-0 h-full w-full object-contain transition-all duration-500 group-hover:blur-sm"
-            :src="sticker.image_slot_url"
-            alt=""
-        />
         <div
-            class="absolute inset-0 mix-blend-saturation"
-            :style="{
-                'background-image': `conic-gradient(transparent ${completeness}turn, black ${completeness}turn 1turn)`,
-            }"
-        />
+            class="relative flex h-44 w-44 items-center justify-center overflow-hidden"
+            :style="
+                sticker.image_slot_url
+                    ? {
+                          'mask-image': `url('${sticker.image_slot_url}')`,
+                          'mask-repeat': 'no-repeat',
+                          'mask-size': 'contain',
+                          'mask-position': 'center',
+                      }
+                    : ''
+            "
+        >
+            <img
+                v-if="sticker.image_slot_url"
+                class="absolute inset-0 h-full w-full object-contain transition-all duration-500 group-hover:scale-105"
+                :src="sticker.image_slot_url"
+                :alt="sticker.name"
+            />
+            <div
+                v-else
+                class="flex h-full w-full items-center justify-center rounded-2xl bg-white/5 text-xs text-neutral-500"
+            >
+                Sem Imagem
+            </div>
+
+            <div
+                class="pointer-events-none absolute inset-0 mix-blend-saturation"
+                :style="{
+                    'background-image': `conic-gradient(transparent ${completeness}turn, black ${completeness}turn 1turn)`,
+                }"
+            />
+
+            <div
+                class="absolute inset-0 flex flex-col items-center justify-center gap-1.5 bg-black/75 p-3 text-center text-white opacity-0 transition-all duration-300 group-hover:opacity-100"
+            >
+                <span class="line-clamp-2 text-xs font-semibold">
+                    {{ sticker.name }}
+                </span>
+                <span
+                    class="flex items-center gap-1 text-xs font-bold text-amber-300"
+                >
+                    <span>+{{ sticker.points }}</span>
+                    <img
+                        class="h-3.5 w-3.5 object-contain"
+                        title="SINFrão"
+                        alt="SINFrão"
+                        src="/images/sinf-2026-sm.svg"
+                    />
+                </span>
+            </div>
+        </div>
+
         <div
-            class="absolute inset-0 flex flex-col items-center justify-center gap-1 bg-black/50 p-4 text-center text-white opacity-0 transition-all duration-500 group-hover:opacity-100"
+            class="mt-3 flex w-full flex-col gap-1.5 border-t border-white/8 pt-2"
         >
-            <span class="line-clamp-3 truncate whitespace-normal">{{
-                sticker.name
-            }}</span>
-            <span
-                >{{ sticker.points }}
-                <img
-                    class="inline-block w-5 align-middle"
-                    title="SINFrão"
-                    src="/images/cy-sinf-small.svg"
-                />
-            </span>
+            <div class="flex items-center justify-between text-xs">
+                <span
+                    class="truncate font-medium text-neutral-200"
+                    :title="sticker.name"
+                >
+                    {{ sticker.name }}
+                </span>
+
+                <span
+                    v-if="isFullyCompleted"
+                    class="ml-1 inline-flex shrink-0 items-center text-emerald-400"
+                    title="Conquista concluída!"
+                >
+                    <CheckCircle2 :size="14" />
+                </span>
+            </div>
+
+            <div
+                class="flex items-center justify-between text-[11px] text-neutral-400"
+            >
+                <span
+                    class="pill-container px-2 py-0.5 text-[10px] font-semibold text-neutral-300 shadow-none"
+                >
+                    {{ completedCount }} / {{ totalQuests }}
+                </span>
+
+                <span class="flex items-center gap-1 font-bold text-white">
+                    <span>{{ sticker.points }}</span>
+                    <img
+                        class="h-3.5 w-3.5 object-contain"
+                        alt="SINFrão"
+                        title="SINFrão"
+                        src="/images/sinf-2026-sm.svg"
+                    />
+                </span>
+            </div>
         </div>
     </div>
 </template>
diff --git a/resources/js/Components/Profile/StickerWrapper.vue b/resources/js/Components/Profile/StickerWrapper.vue
index ee5239a2..bb7c9501 100644
--- a/resources/js/Components/Profile/StickerWrapper.vue
+++ b/resources/js/Components/Profile/StickerWrapper.vue
@@ -1,18 +1,28 @@
 <script setup lang="ts">
 import type Slot from "@/Types/Slot";
 import Sticker from "./Sticker.vue";
+import PillSelector from "@/Components/UI/PillSelector.vue";
 </script>
 
 <template>
-    <p
+    <div
         v-if="($page.props.slots as Slot[]).length === 0"
-        class="text-text-color flex w-full flex-auto items-center justify-center pt-8 text-center text-2xl font-bold"
+        class="flex flex-col items-center justify-center py-20 text-center"
     >
-        Ainda não há conquistas para completares. Fica de olho nesta secção!
-    </p>
+        <PillSelector
+            :items="[{ id: 'empty', label: 'Sem conquistas', disabled: true }]"
+            size="sm"
+            :wrap="false"
+            container-class="mb-4"
+        />
+        <p class="max-w-md text-sm text-neutral-400">
+            Ainda não há conquistas para completares. Fica de olho nas
+            atividades e bancas da SINF!
+        </p>
+    </div>
     <div
         v-else
-        class="flex w-full flex-row flex-wrap items-center justify-center gap-8 place-self-center self-center pt-8"
+        class="flex w-full flex-row flex-wrap items-stretch justify-center gap-6 pt-4 sm:gap-8"
     >
         <Sticker
             v-for="item in $page.props.slots as Slot[]"
diff --git a/resources/js/Components/Profile/Ticket.vue b/resources/js/Components/Profile/Ticket.vue
index e9d3d0b2..ab9bf950 100644
--- a/resources/js/Components/Profile/Ticket.vue
+++ b/resources/js/Components/Profile/Ticket.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Calendar, Clock, MapPin } from "@lucide/vue";
 import type Event from "@/Types/Event";
 import { Link } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
@@ -14,7 +15,6 @@ const formatTimeString = (time: string): string => {
     return `1970-01-01T${time}.000000Z`;
 };
 
-// https://stackoverflow.com/a/52171480/11571888
 const hashCode = (str: string): number => {
     let hash = 0;
     if (str.length == 0) {
@@ -29,33 +29,36 @@ const hashCode = (str: string): number => {
 
 const mainColor = () => {
     if (props.event.capacity && props.event.capacity > 0) {
-        return "bg-2023-teal-dark";
+        return "bg-sinf-primary-dark";
     } else {
-        return "bg-2023-orange";
+        return "bg-sinf-secondary-dark";
     }
 };
 
 const accentColor = () => {
     if (props.event.capacity && props.event.capacity > 0) {
-        return "bg-2023-orange";
+        return "bg-sinf-primary";
     } else {
-        return "bg-2023-teal-dark";
+        return "bg-sinf-secondary";
     }
 };
 </script>
 
 <template>
-    <Link :href="route('event.show', { event: event.id })" class="relative">
+    <Link
+        :href="route('event.show', { event: event.id })"
+        class="group relative block w-87.5 max-w-full justify-self-center transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]"
+    >
         <div
-            class="@container grid aspect-5/2 place-content-stretch place-items-stretch"
+            class="@container grid aspect-5/2 w-full place-content-stretch place-items-stretch drop-shadow-[0_4px_16px_rgba(0,0,0,0.5)]"
             :class="[
                 state == 'available'
-                    ? 'cursor-pointer opacity-50 grayscale transition-all select-none hover:blur-none [@media(hover:hover)]:blur-xs'
+                    ? 'cursor-pointer opacity-60 grayscale transition-all select-none hover:opacity-100 hover:grayscale-0'
                     : '',
             ]"
         >
             <svg
-                class="col-start-1 row-start-1 overflow-visible"
+                class="col-start-1 row-start-1 h-full w-full overflow-visible"
                 viewBox="0 0 500 200"
             >
                 <path
@@ -63,22 +66,22 @@ const accentColor = () => {
                     fill-rule="evenodd"
                     clip-rule="evenodd"
                     d="M16 0C16 8 8 16 0 16V24C4 26 4 30 0 32V40C4 42 4 46 0 48V56C4 58 4 62 0 64V72C4 74 4 78 0 80V88C4 90 4 94 0 96V104C4 106 4 110 0 112V120C4 122 4 126 0 128V136C4 138 4 142 0 144V152C4 154 4 158 0 160V168C4 170 4 174 0 176V184C8 184 16 192 16 200H144C152 200 160 192 160 184V200H484C484 192 492 184 500 184V176C496 174 496 170 500 168V160C496 158 496 154 500 152V144C496 142 496 138 500 136V128C496 126 496 122 500 120V112C496 110 496 106 500 104V96C496 94 496 90 500 88V80C496 78 496 74 500 72V64C496 62 496 58 500 56V48C496 46 496 42 500 40V32C496 30 496 26 500 24V16C492 16 484 8 484 0H160V16C160 8 152 0 144 0H16ZM162 176V159H158V176H162ZM158 149H162V132H158V149ZM162 122V105H158V122H162ZM158 95H162V78H158V95ZM162 68V51H158V68H162ZM158 41H162V24H158V41Z"
-                    stroke="black"
+                    stroke="rgba(255, 255, 255, 0.15)"
                     stroke-width="2px"
                     fill="none"
                 />
                 <template v-else>
                     <path
-                        class="origin-left translate-x-[-6px] -rotate-6"
+                        class="origin-left -translate-x-1.5 -rotate-6"
                         d="M0 16C8 16 16 8 16 0H144C152 0 160 8 160 16V24H158V68H162V78H158V122H162V132H158V176H160V184C160 192 152 200 144 200H16C16 192 8 184 0 184V176C4 174 4 170 0 168V160C4 158 4 154 0 152V144C4 142 4 138 0 136V128C4 126 4 122 0 120V112C4 110 4 106 0 104V96C4 94 4 90 0 88V80C4 78 4 74 0 72V64C4 62 4 58 0 56V48C4 46 4 42 0 40V32C4 30 4 26 0 24V16Z"
-                        stroke="black"
+                        stroke="rgba(255, 255, 255, 0.15)"
                         stroke-width="2px"
                         fill="none"
                     />
                     <path
                         class="origin-right translate-x-[12.666px] rotate-6"
                         d="M160 176H162V159H158V149H162V105H158V95H162V51H158V41H162V24H160V0H484C484 8 492 16 500 16V24C496 26 496 30 500 32V40C496 42 496 46 500 48V56C496 58 496 62 500 64V72C496 74 496 78 500 80V88C496 90 496 94 500 96V104C496 106 496 110 500 112V120C496 122 496 126 500 128V136C496 138 496 142 500 144V152C496 154 496 158 500 160V168C496 170 496 174 500 176V184C492 184 484 192 484 200H160V176Z"
-                        stroke="black"
+                        stroke="rgba(255, 255, 255, 0.15)"
                         stroke-width="2px"
                         fill="none"
                     />
@@ -86,7 +89,7 @@ const accentColor = () => {
             </svg>
 
             <div
-                class="col-start-1 row-start-1 flex max-h-full max-w-[350px] text-[3.2cqi] font-black text-white"
+                class="col-start-1 row-start-1 flex h-full w-full text-[3.2cqi] font-black text-white"
                 :class="[state == 'used' ? '' : 'ticket-clip-path']"
             >
                 <div
@@ -102,33 +105,63 @@ const accentColor = () => {
                         class="flex px-[.75em] py-[.5em]"
                         :class="accentColor()"
                     >
-                        NR: {{ hashCode((event.id + "SINF2023").toString()) }}
+                        NR: {{ hashCode((event.id + "SINF2026").toString()) }}
                     </span>
 
                     <div
-                        class="my-auto flex flex-col gap-[.25em] px-[.75em] py-[.5em]"
+                        class="my-auto flex min-w-0 flex-col gap-[.25em] px-[.75em] py-[.5em]"
                     >
-                        <span
+                        <div
                             v-if="event.location"
                             :title="event.location"
-                            class="line-clamp-2 truncate whitespace-normal"
-                            >LOCAL: {{ event.location }}</span
+                            class="flex min-w-0 items-center gap-[.35em]"
                         >
-                        <span v-if="event.time_start"
-                            >HORA:
-                            {{
+                            <MapPin
+                                :size="12"
+                                class="h-[1.1em] w-[1.1em] shrink-0"
+                            />
+                            <span class="truncate">{{ event.location }}</span>
+                        </div>
+                        <div
+                            v-if="event.time_start"
+                            :title="
                                 $d(
                                     new Date(
                                         formatTimeString(event.time_start),
                                     ),
-                                    "hourMinute",
+                                    'hourMinute',
                                 )
-                            }}</span
+                            "
+                            class="flex min-w-0 items-center gap-[.35em]"
                         >
-                        <span v-if="event.event_day?.date"
-                            >DATA:
-                            {{ $d(event.event_day?.date, "short") }}</span
+                            <Clock
+                                :size="12"
+                                class="h-[1.1em] w-[1.1em] shrink-0"
+                            />
+                            <span class="truncate">
+                                {{
+                                    $d(
+                                        new Date(
+                                            formatTimeString(event.time_start),
+                                        ),
+                                        "hourMinute",
+                                    )
+                                }}
+                            </span>
+                        </div>
+                        <div
+                            v-if="event.event_day?.date"
+                            :title="$d(event.event_day?.date, 'short')"
+                            class="flex min-w-0 items-center gap-[.35em]"
                         >
+                            <Calendar
+                                :size="12"
+                                class="h-[1.1em] w-[1.1em] shrink-0"
+                            />
+                            <span class="truncate">
+                                {{ $d(event.event_day?.date, "short") }}
+                            </span>
+                        </div>
                     </div>
                 </div>
                 <div
diff --git a/resources/js/Components/Profile/TicketWrapper.vue b/resources/js/Components/Profile/TicketWrapper.vue
index 2651ba02..ae10189b 100644
--- a/resources/js/Components/Profile/TicketWrapper.vue
+++ b/resources/js/Components/Profile/TicketWrapper.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type Event from "@/Types/Event";
 import Ticket from "./Ticket.vue";
+import PillSelector from "@/Components/UI/PillSelector.vue";
+import { Link } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
 
 type EventTicket = Event & {
     joined: boolean;
@@ -33,22 +36,38 @@ const getTicketState = (t: EventTicket): "used" | "acquired" | "available" => {
             />
         </clipPath>
     </svg>
-    <p
+
+    <div
         v-if="($page.props.tickets as EventTicket[]).length === 0"
-        class="text-text-color flex w-full flex-auto items-center justify-center pt-8 text-center text-2xl font-bold"
+        class="flex flex-col items-center justify-center py-20 text-center"
     >
-        Ainda não há eventos marcados. Verifica mais tarde!
-    </p>
+        <PillSelector
+            :items="[{ id: 'empty', label: 'Sem bilhetes', disabled: true }]"
+            size="sm"
+            :wrap="false"
+            container-class="mb-4"
+        />
+        <p class="max-w-md text-sm text-neutral-400">
+            Ainda não estás inscrito em nenhum evento. Consulta o
+            <Link
+                :href="route('program')"
+                class="font-medium text-white underline transition-colors hover:text-neutral-200"
+            >
+                programa
+            </Link>
+            para garantires o teu lugar!
+        </p>
+    </div>
+
     <div
         v-else
-        class="grid w-full items-center justify-center gap-10 self-center pt-8"
-        style="grid-template-columns: repeat(auto-fill, 350px)"
+        class="flex w-full flex-wrap items-center justify-center gap-6 pt-4 sm:gap-8"
     >
         <Ticket
             v-for="item in $page.props.tickets as EventTicket[]"
             :key="item.id"
             :state="getTicketState(item)"
             :event="item"
-        ></Ticket>
+        />
     </div>
 </template>
diff --git a/resources/js/Components/Program/ProgramDayPanel.vue b/resources/js/Components/Program/ProgramDayPanel.vue
index 0762498b..2a2fab67 100644
--- a/resources/js/Components/Program/ProgramDayPanel.vue
+++ b/resources/js/Components/Program/ProgramDayPanel.vue
@@ -132,7 +132,13 @@ const times = computed<{ start?: string; end?: string }>(() => {
             class="flex flex-col items-center justify-center py-20 text-center"
         >
             <PillSelector
-                :items="[{ id: 'none', label: 'Sem eventos agendados', disabled: true }]"
+                :items="[
+                    {
+                        id: 'none',
+                        label: 'Sem eventos agendados',
+                        disabled: true,
+                    },
+                ]"
                 size="sm"
                 :wrap="false"
                 container-class="mb-3"
diff --git a/resources/js/Components/Shop/ShopItem.vue b/resources/js/Components/Shop/ShopItem.vue
index f67677c1..f11440ee 100644
--- a/resources/js/Components/Shop/ShopItem.vue
+++ b/resources/js/Components/Shop/ShopItem.vue
@@ -179,11 +179,7 @@ const redeemProduct = (enrollmentId: number) => {
         </template>
     </Card>
 
-    <Modal
-        v-model="modalOpen"
-        max-width="lg"
-    >
-
+    <Modal v-model="modalOpen" max-width="lg">
         <div
             class="flex items-center gap-4 rounded-2xl border border-white/8 bg-white/5 p-3.5 pr-10 sm:p-4"
         >
diff --git a/resources/js/Pages/Auth/ConfirmPassword.vue b/resources/js/Pages/Auth/ConfirmPassword.vue
index 59477f84..f5b7d5dc 100644
--- a/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -30,7 +30,11 @@ const submit = () => {
         subtitle="Esta é uma área segura da aplicação. Por favor, confirma a tua password antes de continuar."
         :icon="Lock"
     >
-        <form method="POST" class="flex flex-col gap-5" @submit.prevent="submit">
+        <form
+            method="POST"
+            class="flex flex-col gap-5"
+            @submit.prevent="submit"
+        >
             <!-- Hidden username field for password manager credential pairing -->
             <input
                 type="text"
@@ -55,7 +59,7 @@ const submit = () => {
                 :error-message="form.errors.password"
             />
 
-            <div class="mt-2 flex justify-center w-full">
+            <div class="mt-2 flex w-full justify-center">
                 <PrimaryButton :disabled="form.processing">
                     <span v-if="form.processing">A confirmar...</span>
                     <span v-else>Confirmar</span>
diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index d51fe6c9..4e3c50bb 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -35,7 +35,11 @@ const submit = () => {
             {{ status }}
         </div>
 
-        <form method="POST" class="flex flex-col gap-5" @submit.prevent="submit">
+        <form
+            method="POST"
+            class="flex flex-col gap-5"
+            @submit.prevent="submit"
+        >
             <TextInput
                 id="email"
                 v-model="form.email"
@@ -49,7 +53,7 @@ const submit = () => {
                 :error-message="form.errors.email"
             />
 
-            <div class="mt-2 flex justify-center w-full">
+            <div class="mt-2 flex w-full justify-center">
                 <PrimaryButton :disabled="form.processing">
                     <span v-if="form.processing">A enviar link...</span>
                     <span v-else>Enviar email</span>
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index 0f329423..e2e340bc 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -47,7 +47,11 @@ const submit = () => {
             {{ status }}
         </div>
 
-        <form method="POST" class="flex flex-col gap-4" @submit.prevent="submit">
+        <form
+            method="POST"
+            class="flex flex-col gap-4"
+            @submit.prevent="submit"
+        >
             <TextInput
                 id="email"
                 v-model="form.email"
@@ -94,7 +98,7 @@ const submit = () => {
                 </Link>
             </div>
 
-            <div class="mt-4 flex justify-center w-full">
+            <div class="mt-4 flex w-full justify-center">
                 <PrimaryButton :disabled="form.processing">
                     <span v-if="form.processing">A entrar...</span>
                     <span v-else>Entrar</span>
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index 8be0ecc9..1303854e 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/resources/js/Pages/Auth/Register.vue
@@ -30,7 +30,11 @@ const submit = () => {
         subtitle="Junta-te à Semana de Informática 2026 e aproveita palestras inspiradoras, workshops práticos e oportunidades únicas de networking."
         :icon="UserPlus"
     >
-        <form method="POST" class="flex flex-col gap-4" @submit.prevent="submit">
+        <form
+            method="POST"
+            class="flex flex-col gap-4"
+            @submit.prevent="submit"
+        >
             <TextInput
                 id="name"
                 v-model="form.name"
@@ -88,7 +92,7 @@ const submit = () => {
                     class="relative flex flex-col items-stretch self-stretch"
                 >
                     <label
-                        class="pill-container group flex w-full cursor-pointer items-center gap-3.5 px-4 py-2.5 transition-all duration-200 hover:border-white/20 focus-within:border-white/20 focus-within:bg-black/65"
+                        class="pill-container group flex w-full cursor-pointer items-center gap-3.5 px-4 py-2.5 transition-all duration-200 focus-within:border-white/20 focus-within:bg-black/65 hover:border-white/20"
                         :class="
                             form.errors.terms
                                 ? 'border-red-500/50 focus-within:border-red-500/60 focus-within:ring-1 focus-within:ring-red-500/30'
@@ -140,7 +144,7 @@ const submit = () => {
 
                 <div class="relative flex flex-col items-stretch self-stretch">
                     <label
-                        class="pill-container group flex w-full cursor-pointer items-center gap-3.5 px-4 py-2.5 transition-all duration-200 hover:border-white/20 focus-within:border-white/20 focus-within:bg-black/65"
+                        class="pill-container group flex w-full cursor-pointer items-center gap-3.5 px-4 py-2.5 transition-all duration-200 focus-within:border-white/20 focus-within:bg-black/65 hover:border-white/20"
                         :class="
                             form.errors.data_sharing_agreement
                                 ? 'border-red-500/50 focus-within:border-red-500/60 focus-within:ring-1 focus-within:ring-red-500/30'
@@ -183,7 +187,7 @@ const submit = () => {
                 </div>
             </div>
 
-            <div class="mt-4 flex justify-center w-full">
+            <div class="mt-4 flex w-full justify-center">
                 <PrimaryButton :disabled="form.processing">
                     <span v-if="form.processing">A criar conta...</span>
                     <span v-else>Criar conta</span>
diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
index 444187e5..41d43b2b 100644
--- a/resources/js/Pages/Auth/ResetPassword.vue
+++ b/resources/js/Pages/Auth/ResetPassword.vue
@@ -34,7 +34,11 @@ const submit = () => {
         subtitle="Escolhe uma nova password segura para garantir a proteção e acesso à tua conta."
         :icon="KeyRound"
     >
-        <form method="POST" class="flex flex-col gap-5" @submit.prevent="submit">
+        <form
+            method="POST"
+            class="flex flex-col gap-5"
+            @submit.prevent="submit"
+        >
             <TextInput
                 id="email"
                 v-model="form.email"
@@ -69,7 +73,7 @@ const submit = () => {
                 :error-message="form.errors.password_confirmation"
             />
 
-            <div class="mt-2 flex justify-center w-full">
+            <div class="mt-2 flex w-full justify-center">
                 <PrimaryButton :disabled="form.processing">
                     <span v-if="form.processing">A repor...</span>
                     <span v-else>Repor password</span>
diff --git a/resources/js/Pages/Auth/TwoFactorChallenge.vue b/resources/js/Pages/Auth/TwoFactorChallenge.vue
index c7035912..0251f2f2 100644
--- a/resources/js/Pages/Auth/TwoFactorChallenge.vue
+++ b/resources/js/Pages/Auth/TwoFactorChallenge.vue
@@ -48,7 +48,11 @@ const submit = () => {
         "
         :icon="!recovery ? Smartphone : KeyRound"
     >
-        <form method="POST" class="flex flex-col gap-6" @submit.prevent="submit">
+        <form
+            method="POST"
+            class="flex flex-col gap-6"
+            @submit.prevent="submit"
+        >
             <CodeInput
                 v-if="!recovery"
                 id="code"
@@ -74,7 +78,7 @@ const submit = () => {
                 :error-message="form.errors.recovery_code"
             />
 
-            <div v-if="recovery" class="flex justify-center w-full">
+            <div v-if="recovery" class="flex w-full justify-center">
                 <PrimaryButton :disabled="form.processing">
                     <span v-if="form.processing">A verificar...</span>
                     <span v-else>Entrar</span>
diff --git a/resources/js/Pages/Auth/VerifyEmail.vue b/resources/js/Pages/Auth/VerifyEmail.vue
index 48e45d42..0ff39cb5 100644
--- a/resources/js/Pages/Auth/VerifyEmail.vue
+++ b/resources/js/Pages/Auth/VerifyEmail.vue
@@ -38,8 +38,12 @@ const verificationLinkSent = computed(
             associado à tua conta.
         </div>
 
-        <form method="POST" class="flex flex-col gap-5" @submit.prevent="submit">
-            <div class="flex justify-center w-full">
+        <form
+            method="POST"
+            class="flex flex-col gap-5"
+            @submit.prevent="submit"
+        >
+            <div class="flex w-full justify-center">
                 <PrimaryButton :disabled="form.processing">
                     <span v-if="form.processing">A reenviar...</span>
                     <span v-else>Reenviar email de verificação</span>
diff --git a/resources/js/Pages/CRUD/Competition/Edit.vue b/resources/js/Pages/CRUD/Competition/Edit.vue
index 7e8de33d..2e110922 100644
--- a/resources/js/Pages/CRUD/Competition/Edit.vue
+++ b/resources/js/Pages/CRUD/Competition/Edit.vue
@@ -45,7 +45,9 @@ watchEffect(() => {
     <CardLayout title="Editar Competição" max-width="max-w-2xl">
         <template #header>
             <div class="space-y-1">
-                <h1 class="text-xl font-bold tracking-tight text-white sm:text-2xl">
+                <h1
+                    class="text-xl font-bold tracking-tight text-white sm:text-2xl"
+                >
                     Editar Competição
                 </h1>
                 <p class="text-xs text-neutral-400 sm:text-sm">
@@ -54,7 +56,11 @@ watchEffect(() => {
             </div>
         </template>
 
-        <form id="competition-edit-form" class="flex flex-col gap-4" @submit.prevent="submit">
+        <form
+            id="competition-edit-form"
+            class="flex flex-col gap-4"
+            @submit.prevent="submit"
+        >
             <TextInput
                 id="name"
                 v-model="form.name"
@@ -161,4 +167,3 @@ watchEffect(() => {
         </template>
     </CardLayout>
 </template>
-
diff --git a/resources/js/Pages/Profile/Edit.vue b/resources/js/Pages/Profile/Edit.vue
index a35190ed..8c2b0a7e 100644
--- a/resources/js/Pages/Profile/Edit.vue
+++ b/resources/js/Pages/Profile/Edit.vue
@@ -8,7 +8,9 @@ import LogoutOtherBrowserSessionsForm from "@/Pages/Profile/Partials/LogoutOther
 import TwoFactorAuthenticationForm from "@/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue";
 import UpdatePasswordForm from "@/Pages/Profile/Partials/UpdatePasswordForm.vue";
 import UpdateProfileInformationForm from "@/Pages/Profile/Partials/UpdateProfileInformationForm.vue";
-import PillSelector, { type PillOption } from "@/Components/UI/PillSelector.vue";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
 import { User, ShieldCheck, Settings, ArrowLeft } from "@lucide/vue";
 import type Session from "@/Types/Session";
 
@@ -86,11 +88,7 @@ watch(activeTab, (newTab) => {
     <AppLayout title="Definições de Perfil">
         <div class="relative mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
             <div class="mb-8 flex justify-center sm:mb-10">
-                <PillSelector
-                    v-model="activeTab"
-                    :items="tabs"
-                    size="md"
-                >
+                <PillSelector v-model="activeTab" :items="tabs" size="md">
                     <template #leading>
                         <Link
                             :href="route('profile.show')"
@@ -116,7 +114,9 @@ watch(activeTab, (newTab) => {
                 />
 
                 <TwoFactorAuthenticationForm
-                    v-if="$page.props.jetstream.canManageTwoFactorAuthentication"
+                    v-if="
+                        $page.props.jetstream.canManageTwoFactorAuthentication
+                    "
                     :requires-confirmation="confirmsTwoFactorAuthentication"
                 />
             </div>
diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
index 2a1205de..9d43f055 100644
--- a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
+++ b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -39,11 +39,14 @@ const closeModal = () => {
     <Card as="section" :interactive="false" padding="p-6 sm:p-8">
         <template #header>
             <div class="space-y-1">
-                <h2 class="text-lg font-bold tracking-tight text-white sm:text-xl">
+                <h2
+                    class="text-lg font-bold tracking-tight text-white sm:text-xl"
+                >
                     Apagar Conta
                 </h2>
                 <p class="text-xs text-neutral-400 sm:text-sm">
-                    Remove permanentemente a tua conta e todos os dados associados.
+                    Remove permanentemente a tua conta e todos os dados
+                    associados.
                 </p>
             </div>
         </template>
@@ -51,7 +54,10 @@ const closeModal = () => {
         <div class="space-y-4">
             <div class="text-sm text-neutral-300">
                 <p>
-                    Depois de apagada, a tua conta não poderá ser recuperada. Todos os bilhetes adquiridos, pontuações de atividades, submissões e histórico de eventos serão apagados permanentemente.
+                    Depois de apagada, a tua conta não poderá ser recuperada.
+                    Todos os bilhetes adquiridos, pontuações de atividades,
+                    submissões e histórico de eventos serão apagados
+                    permanentemente.
                 </p>
             </div>
         </div>
@@ -74,10 +80,14 @@ const closeModal = () => {
         @close="closeModal"
     >
         <div class="space-y-4 pt-1">
-            <div class="flex items-start gap-3 rounded-2xl border border-red-500/20 bg-red-500/10 p-3.5 text-xs text-red-300">
+            <div
+                class="flex items-start gap-3 rounded-2xl border border-red-500/20 bg-red-500/10 p-3.5 text-xs text-red-300"
+            >
                 <AlertTriangle :size="18" class="shrink-0 text-red-400" />
                 <p>
-                    Tens a certeza absoluta de que pretendes prosseguir? Por motivos de segurança, introduz a tua palavra-passe para confirmar.
+                    Tens a certeza absoluta de que pretendes prosseguir? Por
+                    motivos de segurança, introduz a tua palavra-passe para
+                    confirmar.
                 </p>
             </div>
 
@@ -108,5 +118,3 @@ const closeModal = () => {
         </template>
     </Modal>
 </template>
-
-
diff --git a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
index b2e70e4b..6c97096c 100644
--- a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
+++ b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
@@ -46,11 +46,14 @@ const closeModal = () => {
     <Card as="section" :interactive="false" padding="p-6 sm:p-8">
         <template #header>
             <div class="space-y-1">
-                <h2 class="text-lg font-bold tracking-tight text-white sm:text-xl">
+                <h2
+                    class="text-lg font-bold tracking-tight text-white sm:text-xl"
+                >
                     Sessões Ativas
                 </h2>
                 <p class="text-xs text-neutral-400 sm:text-sm">
-                    Gere os dispositivos e navegadores com sessão iniciada na tua conta.
+                    Gere os dispositivos e navegadores com sessão iniciada na
+                    tua conta.
                 </p>
             </div>
         </template>
@@ -58,7 +61,9 @@ const closeModal = () => {
         <div class="space-y-4">
             <div class="text-sm text-neutral-300">
                 <p>
-                    Se suspeitares de atividade não autorizada ou se deixaste a sessão aberta num computador partilhado, podes encerrar todas as outras sessões ativas de imediato.
+                    Se suspeitares de atividade não autorizada ou se deixaste a
+                    sessão aberta num computador partilhado, podes encerrar
+                    todas as outras sessões ativas de imediato.
                 </p>
             </div>
 
@@ -69,19 +74,34 @@ const closeModal = () => {
                     class="flex items-center justify-between rounded-2xl border border-white/8 bg-white/3 p-3.5 sm:p-4"
                 >
                     <div class="flex items-center gap-3.5">
-                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/5 text-neutral-300 ring-1 ring-white/10">
-                            <Laptop v-if="session.agent.is_desktop" :size="20" />
+                        <div
+                            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/5 text-neutral-300 ring-1 ring-white/10"
+                        >
+                            <Laptop
+                                v-if="session.agent.is_desktop"
+                                :size="20"
+                            />
                             <Smartphone v-else :size="20" />
                         </div>
 
                         <div class="space-y-0.5">
                             <div class="text-sm font-semibold text-white">
-                                {{ session.agent.platform || "Dispositivo desconhecido" }}
-                                <span class="text-neutral-500 font-normal">•</span>
-                                {{ session.agent.browser || "Navegador desconhecido" }}
+                                {{
+                                    session.agent.platform ||
+                                    "Dispositivo desconhecido"
+                                }}
+                                <span class="font-normal text-neutral-500"
+                                    >•</span
+                                >
+                                {{
+                                    session.agent.browser ||
+                                    "Navegador desconhecido"
+                                }}
                             </div>
 
-                            <div class="flex flex-wrap items-center gap-2 text-xs text-neutral-400">
+                            <div
+                                class="flex flex-wrap items-center gap-2 text-xs text-neutral-400"
+                            >
                                 <span>{{ session.ip_address }}</span>
                                 <span class="text-neutral-600">•</span>
                                 <span
@@ -151,5 +171,3 @@ const closeModal = () => {
         </template>
     </Modal>
 </template>
-
-
diff --git a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
index f2f3071b..89f637d5 100644
--- a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
+++ b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
@@ -6,7 +6,7 @@ import Modal from "@/Components/UI/Modal.vue";
 import ConfirmsPassword from "@/Components/ConfirmsPassword.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import CodeInput from "@/Components/CodeInput.vue";
-import { Check, Copy } from "@lucide/vue";
+import { Copy } from "@lucide/vue";
 import { route } from "ziggy-js";
 import axios from "axios";
 
@@ -162,24 +162,34 @@ const copySetupKey = () => {
 <template>
     <Card as="section" :interactive="false" padding="p-6 sm:p-8">
         <template #header>
-            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+            <div
+                class="flex flex-col justify-between gap-3 sm:flex-row sm:items-center"
+            >
                 <div class="space-y-1">
-                    <h2 class="text-lg font-bold tracking-tight text-white sm:text-xl">
+                    <h2
+                        class="text-lg font-bold tracking-tight text-white sm:text-xl"
+                    >
                         Autenticação de Dois Fatores (2FA)
                     </h2>
                     <p class="text-xs text-neutral-400 sm:text-sm">
-                        Adiciona uma camada extra de segurança ao iniciar sessão através de um código temporário.
+                        Adiciona uma camada extra de segurança ao iniciar sessão
+                        através de um código temporário.
                     </p>
                 </div>
             </div>
         </template>
 
-        <div class="text-sm text-neutral-300 space-y-3">
+        <div class="space-y-3 text-sm text-neutral-300">
             <p v-if="isTwoFactorEnabled">
-                A tua conta está protegida com autenticação de dois fatores. Ser-te-á solicitado um código de 6 dígitos gerado pela tua aplicação de autenticação (como Google Authenticator, 1Password ou Authy) sempre que iniciares sessão.
+                A tua conta está protegida com autenticação de dois fatores.
+                Ser-te-á solicitado um código de 6 dígitos gerado pela tua
+                aplicação de autenticação (como Google Authenticator, 1Password
+                ou Authy) sempre que iniciares sessão.
             </p>
             <p v-else>
-                Com o 2FA ativado, ser-te-á pedido um código de 6 dígitos gerado pela tua aplicação de autenticação (como Google Authenticator, 1Password ou Authy) sempre que iniciares sessão.
+                Com o 2FA ativado, ser-te-á pedido um código de 6 dígitos gerado
+                pela tua aplicação de autenticação (como Google Authenticator,
+                1Password ou Authy) sempre que iniciares sessão.
             </p>
         </div>
 
@@ -247,25 +257,37 @@ const copySetupKey = () => {
         <div class="flex flex-col items-center gap-5 py-2">
             <div
                 v-if="qrCode"
-                class="rounded-2xl bg-white p-4 flex items-center justify-center"
+                class="flex items-center justify-center rounded-2xl bg-white p-4"
                 v-html="qrCode"
             />
 
             <div v-if="setupKey" class="w-full space-y-1.5 text-center">
-                <span class="text-xs text-neutral-400 font-medium">Chave de configuração manual:</span>
+                <span class="text-xs font-medium text-neutral-400"
+                    >Chave de configuração manual:</span
+                >
                 <div
-                    class="group flex items-center justify-center gap-2 rounded-xl border border-white/10 bg-black/50 px-3 py-2 font-mono text-xs text-white cursor-pointer hover:border-white/20 transition-colors"
+                    class="group flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-white/10 bg-black/50 px-3 py-2 font-mono text-xs text-white transition-colors hover:border-white/20"
                     title="Clique para copiar"
                     @click="copySetupKey"
                 >
                     <span class="truncate">{{ setupKey }}</span>
-                    <Copy :size="13" class="shrink-0 text-neutral-400 group-hover:text-white" />
+                    <Copy
+                        :size="13"
+                        class="shrink-0 text-neutral-400 group-hover:text-white"
+                    />
                 </div>
-                <span v-if="copiedKey" class="text-[11px] text-emerald-400 font-medium">Copiado para a área de transferência!</span>
+                <span
+                    v-if="copiedKey"
+                    class="text-[11px] font-medium text-emerald-400"
+                    >Copiado para a área de transferência!</span
+                >
             </div>
 
             <div class="w-full max-w-xs space-y-2 pt-1 text-center">
-                <label for="two_factor_code" class="text-xs font-semibold text-white">
+                <label
+                    for="two_factor_code"
+                    class="text-xs font-semibold text-white"
+                >
                     Código de 6 dígitos gerado pela app:
                 </label>
                 <CodeInput
@@ -296,7 +318,11 @@ const copySetupKey = () => {
                     :disabled="confirmationForm.processing"
                     @click="confirmTwoFactorAuthentication"
                 >
-                    {{ confirmationForm.processing ? "A verificar..." : "Concluir ativação" }}
+                    {{
+                        confirmationForm.processing
+                            ? "A verificar..."
+                            : "Concluir ativação"
+                    }}
                 </PrimaryButton>
             </div>
         </template>
@@ -310,15 +336,20 @@ const copySetupKey = () => {
     >
         <div class="space-y-4 py-2">
             <div
-                class="grid grid-cols-2 gap-2.5 rounded-2xl border border-white/10 bg-black/50 p-4 font-mono text-xs sm:text-sm text-neutral-200"
+                class="grid grid-cols-2 gap-2.5 rounded-2xl border border-white/10 bg-black/50 p-4 font-mono text-xs text-neutral-200 sm:text-sm"
             >
-                <div v-for="code in recoveryCodes" :key="code" class="select-all py-1 text-center">
+                <div
+                    v-for="code in recoveryCodes"
+                    :key="code"
+                    class="py-1 text-center select-all"
+                >
                     {{ code }}
                 </div>
             </div>
 
             <p class="text-xs text-neutral-400">
-                Dica: Podes copiar e guardar estes códigos no teu gestor de palavras-passe ou imprimi-los para um local seguro.
+                Dica: Podes copiar e guardar estes códigos no teu gestor de
+                palavras-passe ou imprimi-los para um local seguro.
             </p>
         </div>
 
@@ -335,12 +366,13 @@ const copySetupKey = () => {
                     </PrimaryButton>
                 </ConfirmsPassword>
 
-                <PrimaryButton type="button" @click="recoveryCodesModalOpen = false">
+                <PrimaryButton
+                    type="button"
+                    @click="recoveryCodesModalOpen = false"
+                >
                     Concluído
                 </PrimaryButton>
             </div>
         </template>
     </Modal>
 </template>
-
-
diff --git a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
index b6f8a7db..343da4ac 100644
--- a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
@@ -39,11 +39,14 @@ const updatePassword = () => {
     <Card as="section" :interactive="false" padding="p-6 sm:p-8">
         <template #header>
             <div class="space-y-1">
-                <h2 class="text-lg font-bold tracking-tight text-white sm:text-xl">
+                <h2
+                    class="text-lg font-bold tracking-tight text-white sm:text-xl"
+                >
                     Palavra-passe
                 </h2>
                 <p class="text-xs text-neutral-400 sm:text-sm">
-                    Garante que a tua conta usa uma palavra-passe forte e segura para proteger os teus dados.
+                    Garante que a tua conta usa uma palavra-passe forte e segura
+                    para proteger os teus dados.
                 </p>
             </div>
         </template>
@@ -106,4 +109,3 @@ const updatePassword = () => {
         </template>
     </Card>
 </template>
-
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
index 2c1f0306..59a3258d 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -6,6 +6,7 @@ import Card from "@/Components/UI/Card.vue";
 import SocialIcon from "@/Components/UI/SocialIcon.vue";
 import { Camera, Upload, Trash2, AlertCircle } from "@lucide/vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
+import ProfileCard from "@/Components/Profile/ProfileCard.vue";
 import TextInput from "@/Components/TextInput.vue";
 import {
     type User,
@@ -41,8 +42,8 @@ const isDeletingPhoto = ref(false);
 
 const photoForm = useForm({
     _method: "PUT",
-    name: user?.name ?? "",
-    email: user?.email ?? "",
+    name: user ? user.name : "",
+    email: user ? user.email : "",
     photo: null as File | null,
 });
 
@@ -88,8 +89,7 @@ const closePhotoModal = () => {
 
 const savePhoto = () => {
     if (!photoForm.photo) return;
-    photoForm.name = user?.name ?? "";
-    photoForm.email = user?.email ?? "";
+
     photoForm.post(route("user-profile-information.update"), {
         errorBag: "updateProfileInformation",
         preserveScroll: true,
@@ -108,9 +108,11 @@ const deletePhoto = () => {
     isDeletingPhoto.value = true;
     router.delete(route("current-user-photo.destroy"), {
         preserveScroll: true,
+        onSuccess: () => {
+            closePhotoModal();
+        },
         onFinish: () => {
             isDeletingPhoto.value = false;
-            closePhotoModal();
         },
     });
 };
@@ -150,58 +152,20 @@ const sendEmailVerification = () => {
 
 <template>
     <div class="space-y-6">
-        <Card
-            as="section"
-            :interactive="false"
-            padding="p-6 sm:p-7"
-        >
-            <div
-                class="flex flex-col sm:flex-row sm:items-center justify-between gap-5"
-            >
-                <div class="flex items-center gap-4 sm:gap-5">
-                    <div
-                        class="h-20 w-20 shrink-0 overflow-hidden rounded-full ring-2 ring-white/10 bg-neutral-900 sm:h-22 sm:w-22"
-                    >
-                        <img
-                            :src="user?.profile_photo_url"
-                            :alt="user?.name"
-                            class="h-full w-full object-cover"
-                        />
-                    </div>
-
-                    <div class="min-w-0 space-y-1">
-                        <div class="flex flex-wrap items-center gap-2">
-                            <h3
-                                class="truncate text-lg font-bold text-white sm:text-xl"
-                            >
-                                {{ user?.name }}
-                            </h3>
-                            <span
-                                v-if="userTypeLabel"
-                                class="pill-container px-2.5 py-0.5 text-[11px] font-medium text-neutral-300"
-                            >
-                                {{ userTypeLabel }}
-                            </span>
-                        </div>
-                        <p class="truncate text-xs text-neutral-400 sm:text-sm">
-                            {{ user?.email }}
-                        </p>
-                    </div>
-                </div>
-
-                <div class="flex items-center sm:self-center">
-                    <PrimaryButton
-                        type="button"
-                        color="pill"
-                        padding="px-4 py-2"
-                        @click="photoModalOpen = true"
-                    >
-                        <Camera :size="15" />
-                        <span>Alterar fotografia</span>
-                    </PrimaryButton>
-                </div>
-            </div>
-        </Card>
+        <ProfileCard :user="user" :show-social-media="false">
+            <template #actions>
+                <PrimaryButton
+                    type="button"
+                    color="pill"
+                    padding="px-3.5 py-2 sm:px-4 sm:py-2"
+                    class="w-full sm:w-auto"
+                    @click="photoModalOpen = true"
+                >
+                    <Camera :size="15" />
+                    <span>Alterar fotografia</span>
+                </PrimaryButton>
+            </template>
+        </ProfileCard>
 
         <Card
             as="section"
@@ -519,4 +483,3 @@ const sendEmailVerification = () => {
         </Modal>
     </div>
 </template>
-
diff --git a/resources/js/Pages/Profile/Show.vue b/resources/js/Pages/Profile/Show.vue
index 5c32308b..a2f76084 100644
--- a/resources/js/Pages/Profile/Show.vue
+++ b/resources/js/Pages/Profile/Show.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import AppLayout from "@/Layouts/AppLayout.vue";
-import ProfilePicture from "@/Components/Profile/ProfilePicture.vue";
-import InfoCard from "@/Components/Profile/InfoCard.vue";
+import ProfileCard from "@/Components/Profile/ProfileCard.vue";
 import CvArea from "@/Components/Profile/CvArea.vue";
 import InteractionArea from "@/Components/Profile/InteractionArea.vue";
+import type Event from "@/Types/Event";
 import type Slot from "@/Types/Slot";
-import { h } from "vue";
+import { h, computed } from "vue";
 import TicketWrapper from "@/Components/Profile/TicketWrapper.vue";
 import StickerWrapper from "@/Components/Profile/StickerWrapper.vue";
 import type Session from "@/Types/Session";
@@ -20,76 +20,65 @@ interface Props {
     tickets: Event[];
     slots: Slot[];
     sessions: Session[];
-    user: User; // The user to render, can be the logged in user or another user
+    user: User;
     isStaff: boolean;
     canViewCV: boolean;
     canViewAll: boolean;
     points?: number;
 }
 
-const { user, canViewAll } = defineProps<Props>();
+const props = defineProps<Props>();
 const page = usePage();
 
-const authUser = page.props.auth.user;
+const authUser = computed(() => page.props.auth.user as User | undefined);
 
-const buttons: Tabs =
-    isParticipant(user) && !isCompany(page.props.auth.user)
-        ? {
-              ticket: {
-                  label: "Bilhetes",
-                  component: h(TicketWrapper),
-              },
-              sticker: {
-                  label: "Conquistas",
-                  component: h(StickerWrapper),
-              },
-          }
-        : isCompany(user)
-          ? {
-                visitHistory: {
-                    label: "Visitas",
-                    component: h(EnrolledParticipants),
-                },
-            }
-          : {};
+const buttons = computed<Tabs>(() => {
+    const list: Tabs = {};
 
-if (canViewAll && authUser && authUser.id === user.id) {
-    buttons["allParticipants"] = {
-        label: "Todos",
-        component: h(AllParticipants),
-    };
-}
+    if (isParticipant(props.user) && !isCompany(authUser.value)) {
+        list.ticket = {
+            label: "Bilhetes",
+            component: h(TicketWrapper),
+        };
+        list.sticker = {
+            label: "Conquistas",
+            component: h(StickerWrapper),
+        };
+    } else if (isCompany(props.user)) {
+        list.visitHistory = {
+            label: "Visitas",
+            component: h(EnrolledParticipants),
+        };
+    }
+
+    if (
+        props.canViewAll &&
+        authUser.value &&
+        authUser.value.id === props.user.id
+    ) {
+        list.allParticipants = {
+            label: "Todos",
+            component: h(AllParticipants),
+        };
+    }
+
+    return list;
+});
 </script>
 
 <template>
     <AppLayout title="Perfil">
-        <div class="flex flex-col items-center sm:pt-0">
-            <div
-                class="relative mx-6 flex min-h-screen w-full flex-col items-center p-6 md:max-w-[60vw]"
-            >
-                <div
-                    class="flex w-full justify-between max-md:flex-col max-md:space-y-8"
-                >
-                    <ProfilePicture :item="user" />
-                    <InfoCard :user="user" :is-staff="isStaff" />
-                </div>
-                <CvArea v-if="canViewCV && isParticipant(user)" :item="user" />
-                <p
-                    v-if="
-                        points !== null && authUser && authUser.id === user.id
-                    "
-                    class="text-text-color text-center text-xl font-bold"
-                >
-                    Tens {{ points }}
-                    <img
-                        class="inline w-5 align-text-top"
-                        alt="SINFrão"
-                        title="SINFrão"
-                        src="/images/cy-sinf-small.svg"
-                    />
-                </p>
-                <InteractionArea :buttons="buttons"> </InteractionArea>
-            </div>
+        <div
+            class="relative mx-auto max-w-5xl space-y-8 px-4 py-12 sm:px-6 sm:py-16 lg:px-8"
+        >
+            <!-- Profile Hero Card -->
+            <ProfileCard :user="user" :is-staff="isStaff" :points="points" />
+
+            <!-- CV Upload / Preview Area -->
+            <CvArea v-if="canViewCV && isParticipant(user)" :item="user" />
+
+            <!-- Tabs Section (Bilhetes / Conquistas / Visitas) -->
+            <InteractionArea :buttons="buttons" />
         </div>
     </AppLayout>
 </template>

From 8716c87131b01980778a46919639d0102ae97560 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Mon, 7 Sep 2026 16:29:21 +0100
Subject: [PATCH 17/33] feat: scan code page and fixes

---
 resources/js/Components/Footer.vue      |   8 +-
 resources/js/Layouts/AppLayout.vue      |  13 +-
 resources/js/Layouts/AuthLayout.vue     |   4 +-
 resources/js/Layouts/CardLayout.vue     |  58 +-
 resources/js/Pages/PrivacyPolicy.vue    |  30 +-
 resources/js/Pages/Profile/Edit.vue     |   2 +-
 resources/js/Pages/Profile/ScanCode.vue | 862 +++++++++++++++++++++---
 resources/js/Pages/Shop.vue             |   2 +-
 resources/js/Pages/Team.vue             |   2 +-
 resources/js/Pages/TermsOfService.vue   |  30 +-
 10 files changed, 846 insertions(+), 165 deletions(-)

diff --git a/resources/js/Components/Footer.vue b/resources/js/Components/Footer.vue
index 7d8d6519..1ad17b4c 100644
--- a/resources/js/Components/Footer.vue
+++ b/resources/js/Components/Footer.vue
@@ -38,7 +38,7 @@ const currentYear = new Date().getFullYear();
 </script>
 
 <template>
-    <footer class="relative mt-24 overflow-hidden px-4 py-14 sm:px-6 lg:px-8">
+    <footer class="relative mt-auto overflow-hidden px-4 pt-16 pb-12 sm:px-6 sm:pt-20 sm:pb-14 lg:px-8">
         <div
             class="pointer-events-none absolute inset-0 -z-10 overflow-hidden"
             aria-hidden="true"
@@ -112,7 +112,7 @@ const currentYear = new Date().getFullYear();
         </div>
 
         <div
-            class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-8 md:flex-row"
+            class="mx-auto flex max-w-5xl flex-col items-center justify-between gap-8 md:flex-row"
         >
             <div class="flex flex-col items-center gap-3 md:items-start">
                 <Link
@@ -133,8 +133,8 @@ const currentYear = new Date().getFullYear();
                         rel="noopener noreferrer"
                         class="font-semibold text-white transition-colors"
                     >
-                        NIAEFEUP </a
-                    >. Todos os direitos reservados.
+                        NIAEFEUP
+                    </a>. Todos os direitos reservados.
                 </p>
             </div>
 
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index e2de1cac..acdbd3dc 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -2,7 +2,6 @@
 import { Head } from "@inertiajs/vue3";
 import Navbar from "@/Components/Navbar.vue";
 import Footer from "@/Components/Footer.vue";
-
 import GlowingOrbs from "@/Components/GlowingOrbs.vue";
 
 interface Props {
@@ -13,16 +12,18 @@ defineProps<Props>();
 </script>
 
 <template>
-    <div class="relative min-h-screen bg-olive-950 text-white">
+    <div class="relative flex min-h-screen flex-col bg-olive-950 text-white">
         <Head :title="title" />
 
         <GlowingOrbs />
 
-        <main class="relative z-10 min-h-screen">
+        <div class="relative z-10 flex min-h-screen flex-1 flex-col">
             <Navbar />
             <!-- <Banner /> -->
-            <slot />
-            <Footer class="relative z-10" />
-        </main>
+            <main class="flex flex-1 flex-col">
+                <slot />
+            </main>
+            <Footer class="relative z-10 mt-auto" />
+        </div>
     </div>
 </template>
diff --git a/resources/js/Layouts/AuthLayout.vue b/resources/js/Layouts/AuthLayout.vue
index 9c7cdda1..5ae11f37 100644
--- a/resources/js/Layouts/AuthLayout.vue
+++ b/resources/js/Layouts/AuthLayout.vue
@@ -57,10 +57,10 @@ const authTabs = computed<PillOption[]>(() => [
 <template>
     <AppLayout :title="title">
         <div
-            class="relative flex min-h-[calc(100vh-8rem)] items-center justify-center px-4 py-12 sm:px-6 lg:px-12 lg:py-16"
+            class="relative flex flex-1 items-center justify-center px-4 py-12 sm:px-6 lg:px-8 lg:py-16"
         >
             <div
-                class="mx-auto grid w-full max-w-6xl grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-16 xl:gap-24"
+                class="mx-auto grid w-full max-w-5xl grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-16 xl:gap-20"
             >
                 <div
                     class="flex flex-col items-center text-center lg:items-start lg:text-left"
diff --git a/resources/js/Layouts/CardLayout.vue b/resources/js/Layouts/CardLayout.vue
index b85a1729..e3f75705 100644
--- a/resources/js/Layouts/CardLayout.vue
+++ b/resources/js/Layouts/CardLayout.vue
@@ -19,40 +19,42 @@ withDefaults(defineProps<Props>(), {
 <template>
     <AppLayout :title="title">
         <div
-            class="relative flex min-h-[calc(100vh-8rem)] flex-col items-center justify-center px-4 py-12 sm:py-16"
+            class="relative flex flex-1 flex-col items-center justify-center px-4 py-12 sm:px-6 sm:py-16 lg:px-8"
         >
-            <div
-                v-if="(heading || title) && !$slots.header"
-                class="mb-6 flex flex-col items-center text-center"
-            >
-                <h1
-                    class="text-2xl font-bold tracking-tight text-white sm:text-3xl"
+            <div class="mx-auto flex w-full max-w-5xl flex-col items-center">
+                <div
+                    v-if="(heading || title) && !$slots.header"
+                    class="mb-6 flex flex-col items-center text-center"
                 >
-                    {{ heading ?? title }}
-                </h1>
+                    <h1
+                        class="text-2xl font-bold tracking-tight text-white sm:text-3xl"
+                    >
+                        {{ heading ?? title }}
+                    </h1>
 
-                <p v-if="subtitle" class="mt-2 text-sm text-neutral-400">
-                    {{ subtitle }}
-                </p>
-            </div>
+                    <p v-if="subtitle" class="mt-2 text-sm text-neutral-400">
+                        {{ subtitle }}
+                    </p>
+                </div>
 
-            <Card
-                as="div"
-                :interactive="false"
-                padding="p-6 sm:p-8 md:p-10"
-                class="w-full"
-                :class="maxWidth"
-            >
-                <template v-if="$slots.header" #header>
-                    <slot name="header" />
-                </template>
+                <Card
+                    as="div"
+                    :interactive="false"
+                    padding="p-6 sm:p-8 md:p-10"
+                    class="w-full"
+                    :class="maxWidth"
+                >
+                    <template v-if="$slots.header" #header>
+                        <slot name="header" />
+                    </template>
 
-                <slot />
+                    <slot />
 
-                <template v-if="$slots.footer" #footer>
-                    <slot name="footer" />
-                </template>
-            </Card>
+                    <template v-if="$slots.footer" #footer>
+                        <slot name="footer" />
+                    </template>
+                </Card>
+            </div>
         </div>
     </AppLayout>
 </template>
diff --git a/resources/js/Pages/PrivacyPolicy.vue b/resources/js/Pages/PrivacyPolicy.vue
index 3efacb59..d3a2f369 100644
--- a/resources/js/Pages/PrivacyPolicy.vue
+++ b/resources/js/Pages/PrivacyPolicy.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Head } from "@inertiajs/vue3";
+import AppLayout from "@/Layouts/AppLayout.vue";
+import Card from "@/Components/UI/Card.vue";
 
 interface Props {
     policy: string;
@@ -9,16 +10,29 @@ defineProps<Props>();
 </script>
 
 <template>
-    <Head title="Política de privacidade" />
+    <AppLayout title="Política de Privacidade">
+        <div
+            class="relative mx-auto w-full max-w-5xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8"
+        >
+            <div class="mb-8 text-center sm:mb-10">
+                <h1
+                    class="text-2xl font-bold tracking-tight text-white sm:text-3xl lg:text-4xl"
+                >
+                    Política de Privacidade
+                </h1>
+            </div>
 
-    <div class="font-sans text-gray-900 antialiased dark:text-gray-100">
-        <div class="bg-gray-100 pt-4 dark:bg-gray-900">
-            <div class="flex min-h-screen flex-col items-center pt-6 sm:pt-0">
+            <Card
+                as="div"
+                :interactive="false"
+                padding="p-6 sm:p-10"
+                class="w-full"
+            >
                 <div
-                    class="prose dark:prose-invert mt-6 w-full overflow-hidden bg-white p-6 shadow-md sm:max-w-2xl sm:rounded-lg dark:bg-gray-800"
+                    class="prose prose-invert max-w-none text-neutral-300"
                     v-html="policy"
                 />
-            </div>
+            </Card>
         </div>
-    </div>
+    </AppLayout>
 </template>
diff --git a/resources/js/Pages/Profile/Edit.vue b/resources/js/Pages/Profile/Edit.vue
index 8c2b0a7e..38b1ec1e 100644
--- a/resources/js/Pages/Profile/Edit.vue
+++ b/resources/js/Pages/Profile/Edit.vue
@@ -86,7 +86,7 @@ watch(activeTab, (newTab) => {
 
 <template>
     <AppLayout title="Definições de Perfil">
-        <div class="relative mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
+        <div class="relative mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
             <div class="mb-8 flex justify-center sm:mb-10">
                 <PillSelector v-model="activeTab" :items="tabs" size="md">
                     <template #leading>
diff --git a/resources/js/Pages/Profile/ScanCode.vue b/resources/js/Pages/Profile/ScanCode.vue
index ee0d2daf..5a5717dc 100644
--- a/resources/js/Pages/Profile/ScanCode.vue
+++ b/resources/js/Pages/Profile/ScanCode.vue
@@ -1,150 +1,800 @@
 <script setup lang="ts">
-import Banner from "@/Components/Banner.vue";
+import { computed, ref, watch, onMounted } from "vue";
+import { useForm, usePage, Link } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
+import AppLayout from "@/Layouts/AppLayout.vue";
+import Modal from "@/Components/UI/Modal.vue";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
+import Card from "@/Components/UI/Card.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import TextInput from "@/Components/TextInput.vue";
-import AppLayout from "@/Layouts/AppLayout.vue";
 import type Quest from "@/Types/Quest";
-import { useForm, usePage } from "@inertiajs/vue3";
-import { QrCode } from "@lucide/vue";
-import { computed, ref, watch } from "vue";
 import { QrcodeStream } from "vue-qrcode-reader";
-import { route } from "ziggy-js";
+import {
+    ArrowLeft,
+    HelpCircle,
+    Camera,
+    Keyboard,
+    SwitchCamera,
+    Zap,
+    ZapOff,
+    Play,
+    Pause,
+    CheckCircle2,
+    AlertCircle,
+    RotateCcw,
+    Sparkles,
+    Check,
+} from "@lucide/vue";
 
-const props = defineProps<{
+interface Props {
     selectedQuest?: Quest;
     quests: Quest[];
-}>();
+}
+
+const props = defineProps<Props>();
+
+// Tab modes
+type InputMode = "camera" | "manual";
+const activeMode = ref<InputMode>("camera");
 
-const error = ref("");
-const scanning = ref(false);
+const modeOptions = computed<PillOption[]>(() => [
+    {
+        id: "camera",
+        label: "Câmara",
+        icon: Camera,
+    },
+    {
+        id: "manual",
+        label: "Manual",
+        icon: Keyboard,
+    },
+]);
 
-const selectedQuest = computed(() => props.selectedQuest);
+// Quest Selection
+const selectedQuestId = ref<string>(
+    props.selectedQuest?.id?.toString() ||
+        (props.quests.length === 1 ? props.quests[0]?.id?.toString() : "") ||
+        (props.quests.length > 0 ? props.quests[0]?.id?.toString() : ""),
+);
 
+const currentSelectedQuest = computed(() =>
+    props.quests.find((q) => q.id.toString() === selectedQuestId.value),
+);
+
+// Form
 const form = useForm({
     quest_code: "",
-    quest: selectedQuest.value?.id.toString() ?? "",
+    quest: selectedQuestId.value,
+});
+
+watch(selectedQuestId, (newId) => {
+    form.quest = newId;
 });
 
-const submit = () =>
+// Camera state
+const isCameraReady = ref(false);
+const cameraFacingMode = ref<"environment" | "user">("environment");
+const torchActive = ref(false);
+const hasTorch = ref(false);
+const isPaused = ref(false);
+const cameraError = ref("");
+
+// Scanner feedback state
+type ScanStatus = "idle" | "processing" | "success" | "error";
+const scanStatus = ref<ScanStatus>("idle");
+const statusMessage = ref("");
+const lastScannedCode = ref("");
+const autoContinue = ref(true);
+const countdown = ref<number | null>(null);
+let countdownTimer: ReturnType<typeof setInterval> | null = null;
+
+// Modal
+const showInstructionsModal = ref(false);
+
+const errorMap: Record<string, string> = {
+    NotAllowedError:
+        "Permissão de acesso à câmara recusada. Ativa o acesso nas definições do navegador.",
+    NotFoundError: "Nenhuma câmara detetada neste dispositivo.",
+    NotSupportedError:
+        "Contexto seguro (HTTPS) necessário para aceder à câmara.",
+    NotReadableError: "A câmara já está a ser utilizada por outra aplicação.",
+    OverconstrainedError: "A câmara não cumpre os requisitos solicitados.",
+    StreamApiNotSupportedError: "O teu navegador não suporta a Stream API.",
+    InsecureContextError:
+        "O acesso à câmara requer uma ligação segura (HTTPS).",
+};
+
+const onCameraError = (err: Error) => {
+    isCameraReady.value = false;
+    cameraError.value =
+        errorMap[err.name] ||
+        err.message ||
+        "Não foi possível iniciar a câmara.";
+};
+
+const onCameraOn = (capabilities: MediaTrackCapabilities) => {
+    isCameraReady.value = true;
+    cameraError.value = "";
+    hasTorch.value = Boolean(
+        "torch" in capabilities &&
+            (capabilities as { torch?: boolean }).torch,
+    );
+};
+
+const onCameraOff = () => {
+    isCameraReady.value = false;
+    torchActive.value = false;
+};
+
+const toggleCameraFacing = () => {
+    cameraFacingMode.value =
+        cameraFacingMode.value === "environment" ? "user" : "environment";
+};
+
+const toggleTorch = () => {
+    torchActive.value = !torchActive.value;
+};
+
+const togglePause = () => {
+    isPaused.value = !isPaused.value;
+};
+
+const vibrate = (pattern: number | number[]) => {
+    if (typeof navigator !== "undefined" && navigator.vibrate) {
+        try {
+            navigator.vibrate(pattern);
+        } catch {
+            // ignore if unsupported
+        }
+    }
+};
+
+const startCountdown = () => {
+    if (!autoContinue.value) return;
+    countdown.value = 3;
+    if (countdownTimer) clearInterval(countdownTimer);
+
+    countdownTimer = setInterval(() => {
+        if (countdown.value === null) {
+            if (countdownTimer) clearInterval(countdownTimer);
+            return;
+        }
+        if (countdown.value <= 1) {
+            if (countdownTimer) clearInterval(countdownTimer);
+            countdown.value = null;
+            resetScanner();
+        } else {
+            countdown.value--;
+        }
+    }, 1000);
+};
+
+const resetScanner = () => {
+    if (countdownTimer) {
+        clearInterval(countdownTimer);
+        countdownTimer = null;
+    }
+    countdown.value = null;
+    form.quest_code = "";
+    scanStatus.value = "idle";
+    statusMessage.value = "";
+};
+
+const triggerSubmit = (code: string) => {
+    if (!form.quest) {
+        scanStatus.value = "error";
+        statusMessage.value =
+            "Por favor seleciona uma tarefa antes de ler o código.";
+        vibrate([100, 50, 100]);
+        return;
+    }
+
+    const cleanedCode = code.trim();
+    if (!cleanedCode) {
+        scanStatus.value = "error";
+        statusMessage.value = "Código inválido.";
+        vibrate([100, 50, 100]);
+        return;
+    }
+
+    form.quest_code = cleanedCode;
+    lastScannedCode.value = cleanedCode;
+    scanStatus.value = "processing";
+    vibrate(80);
+
     form.post(route("quest.give", { quest: form.quest }), {
-        onSuccess: () => (form.quest_code = ""),
         preserveState: true,
         preserveScroll: true,
+        onSuccess: () => {
+            const flash = usePage().props.jetstream?.flash;
+            if (flash?.bannerStyle === "danger") {
+                scanStatus.value = "error";
+                statusMessage.value =
+                    flash?.banner || "Erro ao atribuir a tarefa.";
+                vibrate([100, 50, 100]);
+            } else {
+                scanStatus.value = "success";
+                statusMessage.value =
+                    flash?.banner || "Tarefa atribuída com sucesso!";
+                vibrate([120, 40, 160]);
+                startCountdown();
+            }
+        },
+        onError: (errs) => {
+            scanStatus.value = "error";
+            statusMessage.value =
+                errs.quest_code ||
+                errs.quest ||
+                "Erro ao validar o código do participante.";
+            vibrate([100, 50, 100]);
+        },
     });
-
-const errorMap = {
-    NotAllowedError: "Sem permissão para aceder à câmara",
-    NotFoundError: "Câmara não encontrada",
-    NotSupportedError: "Câmara não suportada",
-    NotReadableError: "Câmara já em uso",
-    OverconstrainedError: "Câmaras não é adequadas",
-    StreamApiNotSupportedError: "Stream API não suportada",
-    InsecureContextError: "Acesso à câmara não permitido em contexto inseguro",
 };
 
-const onError = (err: Error) => {
-    if (err.name in errorMap)
-        error.value = errorMap[err.name as keyof typeof errorMap];
-    else error.value = err.message;
-};
+const onDetect = (detectedCodes: { rawValue: string }[]) => {
+    if (
+        isPaused.value ||
+        scanStatus.value === "processing" ||
+        scanStatus.value === "success"
+    ) {
+        return;
+    }
 
-const onDetect = async (detectedCodes: { rawValue: string }[]) => {
-    const firstDetectedCode = detectedCodes[0];
-    if (!firstDetectedCode) return;
-    form.quest_code = firstDetectedCode.rawValue;
+    const first = detectedCodes[0];
+    if (!first?.rawValue) return;
 
-    if (form.quest && form.quest_code) submit();
+    triggerSubmit(first.rawValue);
 };
 
-const showScanResult = ref(false);
-
-const message = computed(() => usePage().props.jetstream.flash?.banner || "");
-const id = computed(() => usePage().props.jetstream.flash?.bannerId || "");
+const onManualSubmit = () => {
+    if (!form.quest_code) return;
+    triggerSubmit(form.quest_code);
+};
 
-watch(id, async () => {
-    showScanResult.value = true;
+onMounted(() => {
+    // Check if initial quest is available
+    if (props.quests.length > 0 && !selectedQuestId.value) {
+        selectedQuestId.value = props.quests[0].id.toString();
+    }
 });
 </script>
 
 <template>
     <AppLayout title="Ler QR Code">
         <div
-            class="text-text-color flex w-full flex-col items-center gap-5 pt-10"
+            class="relative mx-auto flex w-full max-w-5xl flex-1 flex-col px-4 py-8 sm:px-6 lg:px-8"
         >
-            <h2
-                class="bg-2025-blue text-text-color w-fit rounded-lg border border-black px-3 py-2 text-2xl font-bold shadow-md shadow-black/80"
-            >
-                Instruções
-            </h2>
-            <ul class="flex w-fit flex-col items-center px-4 text-center">
-                <li>
-                    No perfil do participante, encontrar o ícone de QR Code
-                    <span class="text-2025-blue inline-flex items-center"
-                        ><QrCode :size="16" class="inline" /></span
-                    >, clicar no ícone e dar scan ao código.
-                </li>
-                <li>
-                    Alternativamente é possível introduzir o código de 10
-                    dígitos situado no mesmo local.
-                </li>
-                <li>
-                    <span class="text-2025-blue font-bold">IMPORTANTE</span> -
-                    Antes de scannar verificar a tarefa selecionada no dropdown
-                    em baixo, o dia deve corresponder ao atual
-                </li>
-            </ul>
-            <div
-                :hidden="!scanning"
-                class="h-80 w-80 overflow-hidden rounded-lg border border-black shadow-lg"
-            >
-                <QrcodeStream
-                    @camera-on="scanning = true"
-                    @camera-off="scanning = false"
-                    @detect="onDetect"
-                    @error="onError"
-                ></QrcodeStream>
+            <div class="mb-8 flex justify-center sm:mb-10">
+                <PillSelector size="md">
+                    <template #leading>
+                        <Link
+                            :href="route('profile.show')"
+                            class="pill-item cursor-pointer gap-2 px-4 py-2 text-xs font-medium text-neutral-400 transition-all duration-200 hover:bg-white/8 hover:text-white active:scale-95 sm:text-sm"
+                        >
+                            <ArrowLeft :size="16" class="shrink-0" />
+                            <span>Voltar ao perfil</span>
+                        </Link>
+                    </template>
+
+                    <button
+                        type="button"
+                        class="pill-item cursor-pointer gap-2 px-4 py-2 text-xs font-medium text-neutral-400 transition-all duration-200 hover:bg-white/8 hover:text-white active:scale-95 sm:text-sm"
+                        @click="showInstructionsModal = true"
+                    >
+                        <HelpCircle :size="16" class="shrink-0" />
+                        <span>Instruções</span>
+                    </button>
+                </PillSelector>
             </div>
-            <p class="text-center text-red-600">{{ error }}</p>
-
-            <Banner v-if="showScanResult" :message="message"></Banner>
-
-            <form class="contents" @submit.prevent="submit">
-                <div class="w-80">
-                    <TextInput
-                        id="code"
-                        v-model="form.quest_code"
-                        label="Código"
-                        type="text"
-                        required
-                        class="text-2025-blue-dark font-mono"
-                        :error-message="form.errors.quest_code"
+
+            <Card
+                as="section"
+                :interactive="false"
+                padding="p-4 sm:p-6 md:p-8"
+                class="mx-auto w-full max-w-lg"
+            >
+                <div class="mb-6">
+                    <div v-if="quests.length === 0">
+                        <div
+                            class="flex items-center gap-2.5 rounded-2xl border border-amber-500/30 bg-amber-500/10 p-3.5 text-xs text-amber-200 sm:text-sm"
+                        >
+                            <AlertCircle :size="18" class="shrink-0" />
+                            <span
+                                >Nenhuma tarefa associada a esta edição de
+                                momento.</span
+                            >
+                        </div>
+                    </div>
+
+                    <div v-else-if="quests.length === 1">
+                        <div
+                            class="flex items-center justify-between rounded-2xl border border-white/10 bg-white/5 p-3.5"
+                        >
+                            <div class="flex items-center gap-3 truncate">
+                                <div
+                                    class="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-sinf-primary/30 text-white"
+                                >
+                                    <Check :size="16" />
+                                </div>
+                                <div class="truncate">
+                                    <p
+                                        class="truncate text-sm font-semibold text-white"
+                                    >
+                                        {{ quests[0].name }}
+                                    </p>
+                                    <span
+                                        v-if="quests[0].category"
+                                        class="text-[11px] text-neutral-400 uppercase"
+                                    >
+                                        {{ quests[0].category }}
+                                    </span>
+                                </div>
+                            </div>
+                            <span
+                                class="shrink-0 rounded-full border border-emerald-500/30 bg-emerald-500/15 px-2.5 py-0.5 text-[11px] font-medium text-emerald-300"
+                            >
+                                Selecionada
+                            </span>
+                        </div>
+                    </div>
+
+                    <div v-else>
+                        <TextInput
+                            id="quest-select"
+                            v-model="selectedQuestId"
+                            type="select"
+                            :disabled="selectedQuest !== undefined"
+                            :error-message="form.errors.quest"
+                            class="w-full text-white"
+                        >
+                            <option
+                                v-for="q in quests"
+                                :key="q.id"
+                                :value="q.id.toString()"
+                                class="bg-neutral-900 text-white"
+                            >
+                                {{ q.name }} ({{ q.category }})
+                            </option>
+                        </TextInput>
+                    </div>
+                </div>
+
+                <div class="mb-5 flex justify-center">
+                    <PillSelector
+                        v-model="activeMode"
+                        :items="modeOptions"
+                        size="sm"
+                        :wrap="false"
                     />
                 </div>
 
-                <div class="w-80">
-                    <TextInput
-                        id="quest"
-                        v-model="form.quest"
-                        class="text-2025-blue-dark"
-                        label="Quest"
-                        type="select"
-                        :disabled="selectedQuest !== undefined"
-                        required
-                        :error-message="form.errors.quest"
+                <div v-show="activeMode === 'camera'" class="w-full">
+                    <div
+                        class="relative mx-auto aspect-square w-full max-w-xs overflow-hidden rounded-3xl border transition-all duration-300 sm:max-w-sm"
+                        :class="[
+                            scanStatus === 'success'
+                                ? 'border-emerald-500'
+                                : scanStatus === 'error'
+                                  ? 'border-red-500'
+                                  : 'border-white/15 bg-black/90',
+                        ]"
                     >
-                        <option
-                            v-for="quest in quests"
-                            :key="quest.id"
-                            :value="quest.id"
+                        <QrcodeStream
+                            :constraints="{ facingMode: cameraFacingMode }"
+                            :torch="torchActive"
+                            :paused="
+                                isPaused ||
+                                scanStatus === 'processing' ||
+                                scanStatus === 'success'
+                            "
+                            class="h-full w-full object-cover"
+                            @camera-on="onCameraOn"
+                            @camera-off="onCameraOff"
+                            @detect="onDetect"
+                            @error="onCameraError"
+                        >
+                            <div
+                                v-if="!isCameraReady && !cameraError"
+                                class="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/95 p-4 text-center"
+                            >
+                                <div
+                                    class="h-8 w-8 animate-spin rounded-full border-2 border-white/20 border-t-sinf-primary-light"
+                                />
+                                <p class="text-xs text-neutral-300">
+                                    A inicializar câmara...
+                                </p>
+                            </div>
+
+                            <div
+                                v-if="cameraError"
+                                class="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-neutral-950/95 p-6 text-center"
+                            >
+                                <p class="text-xs text-red-300">
+                                    {{ cameraError }}
+                                </p>
+                                <div class="mt-2 flex flex-col gap-2">
+                                    <button
+                                        type="button"
+                                        class="rounded-xl border border-white/10 bg-white/10 px-3.5 py-1.5 text-xs font-medium text-white transition-all hover:bg-white/20"
+                                        @click="
+                                            () => {
+                                                cameraError = '';
+                                                isCameraReady = false;
+                                            }
+                                        "
+                                    >
+                                        Tentar novamente
+                                    </button>
+                                    <button
+                                        type="button"
+                                        class="text-xs text-neutral-400 underline hover:text-white"
+                                        @click="activeMode = 'manual'"
+                                    >
+                                        Inserir código manualmente
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div
+                                v-if="
+                                    isCameraReady &&
+                                    scanStatus !== 'success' &&
+                                    scanStatus !== 'error'
+                                "
+                                class="pointer-events-none absolute inset-0"
+                            >
+                                <!-- Corner Brackets -->
+                                <div
+                                    class="absolute top-5 left-5 h-8 w-8 rounded-tl-xl border-t-3 border-l-3 border-white/80"
+                                />
+                                <div
+                                    class="absolute top-5 right-5 h-8 w-8 rounded-tr-xl border-t-3 border-r-3 border-white/80"
+                                />
+                                <div
+                                    class="absolute bottom-5 left-5 h-8 w-8 rounded-bl-xl border-b-3 border-l-3 border-white/80"
+                                />
+                                <div
+                                    class="absolute right-5 bottom-5 h-8 w-8 rounded-br-xl border-r-3 border-b-3 border-white/80"
+                                />
+
+                                <!-- Scanning Laser Line (clean, no shadow) -->
+                                <div
+                                    v-if="!isPaused"
+                                    class="laser-line pointer-events-none absolute inset-x-8 h-0.5 bg-gradient-to-r from-transparent via-sinf-primary-light to-transparent"
+                                />
+                            </div>
+
+                            <!-- Success / Processing / Error Overlay -->
+                            <transition
+                                enter-active-class="transition duration-200 ease-out"
+                                enter-from-class="opacity-0 scale-95"
+                                enter-to-class="opacity-100 scale-100"
+                            >
+                                <div
+                                    v-if="
+                                        scanStatus === 'processing' ||
+                                        scanStatus === 'success' ||
+                                        scanStatus === 'error'
+                                    "
+                                    class="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/80 p-5 text-center backdrop-blur-sm"
+                                >
+                                    <!-- Processing State -->
+                                    <template
+                                        v-if="scanStatus === 'processing'"
+                                    >
+                                        <div
+                                            class="h-10 w-10 animate-spin rounded-full border-3 border-white/20 border-t-sinf-primary-light"
+                                        />
+                                        <p
+                                            class="text-sm font-semibold text-white"
+                                        >
+                                            A validar tarefa...
+                                        </p>
+                                        <p class="font-mono text-xs text-white">
+                                            {{ lastScannedCode }}
+                                        </p>
+                                    </template>
+
+                                    <!-- Success State -->
+                                    <template
+                                        v-else-if="scanStatus === 'success'"
+                                    >
+                                        <div
+                                            class="flex h-14 w-14 items-center justify-center rounded-full bg-emerald-500/20 text-emerald-400 ring-2 ring-emerald-500/50"
+                                        >
+                                            <CheckCircle2 :size="32" />
+                                        </div>
+                                        <div>
+                                            <p
+                                                class="text-base font-bold text-white"
+                                            >
+                                                {{ statusMessage }}
+                                            </p>
+                                            <p
+                                                class="mt-1 font-mono text-xs text-neutral-300"
+                                            >
+                                                Código: {{ lastScannedCode }}
+                                            </p>
+                                        </div>
+
+                                        <div
+                                            class="mt-2 flex flex-col items-center gap-2"
+                                        >
+                                            <PrimaryButton
+                                                type="button"
+                                                color="primary"
+                                                padding="px-5 py-2"
+                                                @click="resetScanner"
+                                            >
+                                                <RotateCcw :size="14" />
+                                                <span>Ler Próximo</span>
+                                                <span
+                                                    v-if="countdown !== null"
+                                                    class="ml-1 opacity-75"
+                                                    >({{ countdown }}s)</span
+                                                >
+                                            </PrimaryButton>
+                                        </div>
+                                    </template>
+
+                                    <!-- Error State -->
+                                    <template
+                                        v-else-if="scanStatus === 'error'"
+                                    >
+                                        <div
+                                            class="flex h-14 w-14 items-center justify-center rounded-full bg-red-500/20 text-red-400 ring-2 ring-red-500/50"
+                                        >
+                                            <AlertCircle :size="32" />
+                                        </div>
+                                        <div>
+                                            <p
+                                                class="text-sm font-bold text-red-300"
+                                            >
+                                                {{ statusMessage }}
+                                            </p>
+                                            <p
+                                                v-if="lastScannedCode"
+                                                class="mt-1 font-mono text-xs text-neutral-400"
+                                            >
+                                                Código: {{ lastScannedCode }}
+                                            </p>
+                                        </div>
+                                        <PrimaryButton
+                                            type="button"
+                                            color="pill"
+                                            padding="px-4 py-1.5"
+                                            class="mt-2"
+                                            @click="resetScanner"
+                                        >
+                                            <RotateCcw :size="14" />
+                                            <span>Tentar Novamente</span>
+                                        </PrimaryButton>
+                                    </template>
+                                </div>
+                            </transition>
+                        </QrcodeStream>
+                    </div>
+
+                    <!-- Live Camera Controls Toolbar -->
+                    <div
+                        v-if="isCameraReady"
+                        class="mt-4 flex items-center justify-center gap-2"
+                    >
+                        <!-- Flip Camera -->
+                        <button
+                            type="button"
+                            class="pill-container cursor-pointer gap-1.5 px-3 py-1.5 text-xs font-medium text-neutral-300 transition-all hover:border-white/20 hover:text-white active:scale-95"
+                            title="Alternar câmara frontal/traseira"
+                            @click="toggleCameraFacing"
+                        >
+                            <SwitchCamera :size="14" />
+                            <span class="hidden sm:inline">Virar</span>
+                        </button>
+
+                        <!-- Flashlight Toggle (if supported) -->
+                        <button
+                            v-if="hasTorch"
+                            type="button"
+                            class="pill-container cursor-pointer gap-1.5 px-3 py-1.5 text-xs font-medium transition-all active:scale-95"
+                            :class="
+                                torchActive
+                                    ? 'border-amber-400/50 bg-amber-500/20 text-amber-200'
+                                    : 'text-neutral-300 hover:border-white/20 hover:text-white'
+                            "
+                            title="Ligar/desligar lanterna"
+                            @click="toggleTorch"
+                        >
+                            <Zap v-if="torchActive" :size="14" />
+                            <ZapOff v-else :size="14" />
+                            <span class="hidden sm:inline">Lanterna</span>
+                        </button>
+
+                        <!-- Pause / Resume -->
+                        <button
+                            type="button"
+                            class="pill-container cursor-pointer gap-1.5 px-3 py-1.5 text-xs font-medium text-neutral-300 transition-all hover:border-white/20 hover:text-white active:scale-95"
+                            :title="isPaused ? 'Retomar câmara' : 'Pausar câmara'"
+                            @click="togglePause"
                         >
-                            {{ quest.name }}
-                        </option>
-                    </TextInput>
+                            <Play v-if="isPaused" :size="14" />
+                            <Pause v-else :size="14" />
+                            <span class="hidden sm:inline">{{
+                                isPaused ? "Retomar" : "Pausar"
+                            }}</span>
+                        </button>
+                    </div>
+
+                    <!-- Continuous Mode Toggle -->
+                    <div class="mt-4 flex items-center justify-center">
+                        <label
+                            class="flex cursor-pointer items-center gap-2 text-xs text-neutral-400 select-none hover:text-neutral-300"
+                        >
+                            <input
+                                v-model="autoContinue"
+                                type="checkbox"
+                                class="h-3.5 w-3.5 rounded border-white/20 bg-black/40 text-sinf-primary focus:ring-0 focus:ring-offset-0"
+                            />
+                            <span>Avançar automaticamente após validação</span>
+                        </label>
+                    </div>
                 </div>
 
-                <PrimaryButton type="submit">Confirmar</PrimaryButton>
-                <p v-if="showScanResult">{{ message }}</p>
-            </form>
+                <div v-show="activeMode === 'manual'" class="w-full">
+                    <form class="space-y-4" @submit.prevent="onManualSubmit">
+                        <div>
+                            <TextInput
+                                id="manual-code"
+                                v-model="form.quest_code"
+                                label="Código do Participante"
+                                placeholder="a1b2c3d4e5"
+                                type="text"
+                                required
+                                maxlength="10"
+                                :error-message="form.errors.quest_code"
+                                class="w-full text-center font-mono tracking-widest uppercase"
+                            >
+                            </TextInput>
+                        </div>
+
+                        <div
+                            v-if="
+                                scanStatus === 'success'
+                            "
+                            class="rounded-2xl p-3.5 text-xs sm:text-sm border border-emerald-500/30 bg-emerald-500/10 text-emerald-300"
+                        >
+                            <div class="flex items-center gap-2 font-medium">
+                                <CheckCircle2
+                                    v-if="scanStatus === 'success'"
+                                    :size="16"
+                                    class="shrink-0 text-emerald-400"
+                                />
+                                <span>{{ statusMessage }}</span>
+                            </div>
+                        </div>
+
+                        <PrimaryButton
+                            type="submit"
+                            color="pill"
+                            full-width
+                            :disabled="
+                                form.processing ||
+                                !form.quest_code ||
+                                !form.quest
+                            "
+                        >
+                            <span v-if="form.processing"
+                                >A processar validação...</span
+                            >
+                            <span v-else>Confirmar Tarefa</span>
+                        </PrimaryButton>
+                    </form>
+                </div>
+            </Card>
+
+            <Modal
+                v-model="showInstructionsModal"
+                title="Como Validar Tarefas?"
+                description="Segue estes passos rápidos para registar os participantes:"
+                max-width="md"
+            >
+                <div class="space-y-4 py-2">
+                    <div
+                        class="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-3.5"
+                    >
+                        <div
+                            class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-sinf-primary/30 text-xs font-bold text-white"
+                        >
+                            1
+                        </div>
+                        <div class="text-xs sm:text-sm">
+                            <p class="font-medium text-white">
+                                Pedir ao participante para abrir o Perfil
+                            </p>
+                            <p class="mt-0.5 text-neutral-400">
+                                No telemóvel do participante, aceder a Perfil e
+                                tocar no botão
+                                <strong class="text-white">QR Code</strong>.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div
+                        class="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-3.5"
+                    >
+                        <div
+                            class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-sinf-primary/30 text-xs font-bold text-white"
+                        >
+                            2
+                        </div>
+                        <div class="text-xs sm:text-sm">
+                            <p class="font-medium text-white">
+                                Apontar a câmara ou introduzir o código
+                            </p>
+                            <p class="mt-0.5 text-neutral-400">
+                                Alinha o código no visor da câmara. Se preferir,
+                                introduz o código alfanumérico de 10 caracteres
+                                no separador
+                                <strong class="text-white">Manual</strong>.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div
+                        class="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-3.5"
+                    >
+                        <div
+                            class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-sinf-primary/30 text-xs font-bold text-white"
+                        >
+                            3
+                        </div>
+                        <div class="text-xs sm:text-sm">
+                            <p class="font-medium text-white">
+                                Confirmar a Tarefa Ativa
+                            </p>
+                            <p class="mt-0.5 text-neutral-400">
+                                Garante que o evento ou banca correto está
+                                selecionado no seletor de tarefa antes da
+                                leitura.
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="pt-2">
+                        <PrimaryButton
+                            type="button"
+                            color="pill"
+                            full-width
+                            @click="showInstructionsModal = false"
+                        >
+                            Entendido
+                        </PrimaryButton>
+                    </div>
+                </div>
+            </Modal>
         </div>
     </AppLayout>
 </template>
+
+<style scoped>
+@keyframes scan-laser {
+    0% {
+        top: 6%;
+        opacity: 0.3;
+    }
+    50% {
+        top: 92%;
+        opacity: 1;
+    }
+    100% {
+        top: 6%;
+        opacity: 0.3;
+    }
+}
+
+.laser-line {
+    animation: scan-laser 2.4s ease-in-out infinite;
+}
+</style>
diff --git a/resources/js/Pages/Shop.vue b/resources/js/Pages/Shop.vue
index 1bdf28dc..a53582bf 100644
--- a/resources/js/Pages/Shop.vue
+++ b/resources/js/Pages/Shop.vue
@@ -16,7 +16,7 @@ defineProps<Props>();
 
 <template>
     <AppLayout title="Loja">
-        <div class="relative mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
+        <div class="relative mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8">
             <div
                 v-if="points !== null && points !== undefined"
                 class="mb-10 flex justify-center"
diff --git a/resources/js/Pages/Team.vue b/resources/js/Pages/Team.vue
index 4c4455a6..9862cd2c 100644
--- a/resources/js/Pages/Team.vue
+++ b/resources/js/Pages/Team.vue
@@ -97,7 +97,7 @@ onBeforeUnmount(() => {
             <ArrowDown v-else :size="16" />
         </button>
 
-        <div class="relative mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
+        <div class="relative mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8">
             <template v-if="hasStaff">
                 <DepartmentSelector
                     :departments="departments"
diff --git a/resources/js/Pages/TermsOfService.vue b/resources/js/Pages/TermsOfService.vue
index 6edbb2d9..1becc2ea 100644
--- a/resources/js/Pages/TermsOfService.vue
+++ b/resources/js/Pages/TermsOfService.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Head } from "@inertiajs/vue3";
+import AppLayout from "@/Layouts/AppLayout.vue";
+import Card from "@/Components/UI/Card.vue";
 
 interface Props {
     terms: string;
@@ -9,16 +10,29 @@ defineProps<Props>();
 </script>
 
 <template>
-    <Head title="Terms of Service" />
+    <AppLayout title="Termos de Utilização">
+        <div
+            class="relative mx-auto w-full max-w-5xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8"
+        >
+            <div class="mb-8 text-center sm:mb-10">
+                <h1
+                    class="text-2xl font-bold tracking-tight text-white sm:text-3xl lg:text-4xl"
+                >
+                    Termos de Utilização
+                </h1>
+            </div>
 
-    <div class="font-sans text-gray-900 antialiased dark:text-gray-100">
-        <div class="bg-gray-100 pt-4 dark:bg-gray-900">
-            <div class="flex min-h-screen flex-col items-center pt-6 sm:pt-0">
+            <Card
+                as="div"
+                :interactive="false"
+                padding="p-6 sm:p-10"
+                class="w-full"
+            >
                 <div
-                    class="prose dark:prose-invert mt-6 w-full overflow-hidden bg-white p-6 shadow-md sm:max-w-2xl sm:rounded-lg dark:bg-gray-800"
+                    class="prose prose-invert max-w-none text-neutral-300"
                     v-html="terms"
                 />
-            </div>
+            </Card>
         </div>
-    </div>
+    </AppLayout>
 </template>

From 25873c09eb76bea5676c259b2de5971f0d0bdb8f Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Mon, 7 Sep 2026 16:42:37 +0100
Subject: [PATCH 18/33] fix: increased max width

---
 resources/js/Components/Footer.vue      | 10 ++++----
 resources/js/Layouts/AuthLayout.vue     |  2 +-
 resources/js/Layouts/CardLayout.vue     |  2 +-
 resources/js/Pages/Competition.vue      |  2 +-
 resources/js/Pages/Event.vue            |  2 +-
 resources/js/Pages/Home.vue             |  6 ++---
 resources/js/Pages/PrivacyPolicy.vue    |  2 +-
 resources/js/Pages/Profile/Edit.vue     |  2 +-
 resources/js/Pages/Profile/ScanCode.vue | 31 ++++++++++++-------------
 resources/js/Pages/Profile/Show.vue     |  2 +-
 resources/js/Pages/Program.vue          |  2 +-
 resources/js/Pages/Shop.vue             |  2 +-
 resources/js/Pages/Team.vue             |  2 +-
 resources/js/Pages/TermsOfService.vue   |  2 +-
 14 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/resources/js/Components/Footer.vue b/resources/js/Components/Footer.vue
index 1ad17b4c..2a59f789 100644
--- a/resources/js/Components/Footer.vue
+++ b/resources/js/Components/Footer.vue
@@ -38,7 +38,9 @@ const currentYear = new Date().getFullYear();
 </script>
 
 <template>
-    <footer class="relative mt-auto overflow-hidden px-4 pt-16 pb-12 sm:px-6 sm:pt-20 sm:pb-14 lg:px-8">
+    <footer
+        class="relative mt-auto overflow-hidden px-4 pt-16 pb-12 sm:px-6 sm:pt-20 sm:pb-14 lg:px-8"
+    >
         <div
             class="pointer-events-none absolute inset-0 -z-10 overflow-hidden"
             aria-hidden="true"
@@ -112,7 +114,7 @@ const currentYear = new Date().getFullYear();
         </div>
 
         <div
-            class="mx-auto flex max-w-5xl flex-col items-center justify-between gap-8 md:flex-row"
+            class="mx-auto flex max-w-7xl flex-col items-center justify-between gap-8 md:flex-row"
         >
             <div class="flex flex-col items-center gap-3 md:items-start">
                 <Link
@@ -133,8 +135,8 @@ const currentYear = new Date().getFullYear();
                         rel="noopener noreferrer"
                         class="font-semibold text-white transition-colors"
                     >
-                        NIAEFEUP
-                    </a>. Todos os direitos reservados.
+                        NIAEFEUP </a
+                    >. Todos os direitos reservados.
                 </p>
             </div>
 
diff --git a/resources/js/Layouts/AuthLayout.vue b/resources/js/Layouts/AuthLayout.vue
index 5ae11f37..6a296e85 100644
--- a/resources/js/Layouts/AuthLayout.vue
+++ b/resources/js/Layouts/AuthLayout.vue
@@ -60,7 +60,7 @@ const authTabs = computed<PillOption[]>(() => [
             class="relative flex flex-1 items-center justify-center px-4 py-12 sm:px-6 lg:px-8 lg:py-16"
         >
             <div
-                class="mx-auto grid w-full max-w-5xl grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-16 xl:gap-20"
+                class="mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-16 xl:gap-20"
             >
                 <div
                     class="flex flex-col items-center text-center lg:items-start lg:text-left"
diff --git a/resources/js/Layouts/CardLayout.vue b/resources/js/Layouts/CardLayout.vue
index e3f75705..ace3d9cd 100644
--- a/resources/js/Layouts/CardLayout.vue
+++ b/resources/js/Layouts/CardLayout.vue
@@ -21,7 +21,7 @@ withDefaults(defineProps<Props>(), {
         <div
             class="relative flex flex-1 flex-col items-center justify-center px-4 py-12 sm:px-6 sm:py-16 lg:px-8"
         >
-            <div class="mx-auto flex w-full max-w-5xl flex-col items-center">
+            <div class="mx-auto flex w-full max-w-7xl flex-col items-center">
                 <div
                     v-if="(heading || title) && !$slots.header"
                     class="mb-6 flex flex-col items-center text-center"
diff --git a/resources/js/Pages/Competition.vue b/resources/js/Pages/Competition.vue
index 29eb09f9..e3716fee 100644
--- a/resources/js/Pages/Competition.vue
+++ b/resources/js/Pages/Competition.vue
@@ -210,7 +210,7 @@ onBeforeUnmount(() => {
         </button>
 
         <div
-            class="relative mx-auto max-w-5xl space-y-12 px-4 py-16 sm:space-y-16 sm:px-6 lg:px-8"
+            class="relative mx-auto max-w-7xl space-y-12 px-4 py-16 sm:space-y-16 sm:px-6 lg:px-8"
         >
             <header class="flex flex-col items-center gap-6 text-center">
                 <div class="space-y-3">
diff --git a/resources/js/Pages/Event.vue b/resources/js/Pages/Event.vue
index ae3e339f..0ca79514 100644
--- a/resources/js/Pages/Event.vue
+++ b/resources/js/Pages/Event.vue
@@ -245,7 +245,7 @@ onBeforeUnmount(() => {
         </button>
 
         <div
-            class="relative mx-auto max-w-5xl space-y-12 px-4 py-16 sm:space-y-16 sm:px-6 lg:px-8"
+            class="relative mx-auto max-w-7xl space-y-12 px-4 py-16 sm:space-y-16 sm:px-6 lg:px-8"
         >
             <header class="flex flex-col items-center gap-6 text-center">
                 <div class="space-y-3">
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
index 513035d1..53e0f15d 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -153,7 +153,7 @@ onBeforeUnmount(() => {
 
         <section
             id="aboutus"
-            class="relative mx-auto max-w-5xl px-4 py-20 sm:px-6 lg:px-8"
+            class="relative mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8"
         >
             <div class="mb-10 flex justify-center">
                 <PillSelector
@@ -187,7 +187,7 @@ onBeforeUnmount(() => {
             </div>
         </section>
 
-        <section class="relative mx-auto max-w-5xl px-4 py-20 sm:px-6 lg:px-8">
+        <section class="relative mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
             <div class="mb-10 flex justify-center">
                 <PillSelector
                     :items="[
@@ -323,7 +323,7 @@ onBeforeUnmount(() => {
 
         <section
             id="sponsors"
-            class="relative mx-auto max-w-6xl px-4 py-20 sm:px-6 lg:px-8"
+            class="relative mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8"
         >
             <div class="mb-10 flex justify-center">
                 <PillSelector
diff --git a/resources/js/Pages/PrivacyPolicy.vue b/resources/js/Pages/PrivacyPolicy.vue
index d3a2f369..2ea1d251 100644
--- a/resources/js/Pages/PrivacyPolicy.vue
+++ b/resources/js/Pages/PrivacyPolicy.vue
@@ -12,7 +12,7 @@ defineProps<Props>();
 <template>
     <AppLayout title="Política de Privacidade">
         <div
-            class="relative mx-auto w-full max-w-5xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8"
+            class="relative mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8"
         >
             <div class="mb-8 text-center sm:mb-10">
                 <h1
diff --git a/resources/js/Pages/Profile/Edit.vue b/resources/js/Pages/Profile/Edit.vue
index 38b1ec1e..85581c65 100644
--- a/resources/js/Pages/Profile/Edit.vue
+++ b/resources/js/Pages/Profile/Edit.vue
@@ -86,7 +86,7 @@ watch(activeTab, (newTab) => {
 
 <template>
     <AppLayout title="Definições de Perfil">
-        <div class="relative mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
+        <div class="relative mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
             <div class="mb-8 flex justify-center sm:mb-10">
                 <PillSelector v-model="activeTab" :items="tabs" size="md">
                     <template #leading>
diff --git a/resources/js/Pages/Profile/ScanCode.vue b/resources/js/Pages/Profile/ScanCode.vue
index 5a5717dc..18f24c58 100644
--- a/resources/js/Pages/Profile/ScanCode.vue
+++ b/resources/js/Pages/Profile/ScanCode.vue
@@ -119,8 +119,7 @@ const onCameraOn = (capabilities: MediaTrackCapabilities) => {
     isCameraReady.value = true;
     cameraError.value = "";
     hasTorch.value = Boolean(
-        "torch" in capabilities &&
-            (capabilities as { torch?: boolean }).torch,
+        "torch" in capabilities && (capabilities as { torch?: boolean }).torch,
     );
 };
 
@@ -265,7 +264,7 @@ onMounted(() => {
 <template>
     <AppLayout title="Ler QR Code">
         <div
-            class="relative mx-auto flex w-full max-w-5xl flex-1 flex-col px-4 py-8 sm:px-6 lg:px-8"
+            class="relative mx-auto flex w-full max-w-7xl flex-1 flex-col px-4 py-8 sm:px-6 lg:px-8"
         >
             <div class="mb-8 flex justify-center sm:mb-10">
                 <PillSelector size="md">
@@ -315,7 +314,7 @@ onMounted(() => {
                         >
                             <div class="flex items-center gap-3 truncate">
                                 <div
-                                    class="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-sinf-primary/30 text-white"
+                                    class="bg-sinf-primary/30 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl text-white"
                                 >
                                     <Check :size="16" />
                                 </div>
@@ -401,7 +400,7 @@ onMounted(() => {
                                 class="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/95 p-4 text-center"
                             >
                                 <div
-                                    class="h-8 w-8 animate-spin rounded-full border-2 border-white/20 border-t-sinf-primary-light"
+                                    class="border-t-sinf-primary-light h-8 w-8 animate-spin rounded-full border-2 border-white/20"
                                 />
                                 <p class="text-xs text-neutral-300">
                                     A inicializar câmara...
@@ -463,7 +462,7 @@ onMounted(() => {
                                 <!-- Scanning Laser Line (clean, no shadow) -->
                                 <div
                                     v-if="!isPaused"
-                                    class="laser-line pointer-events-none absolute inset-x-8 h-0.5 bg-gradient-to-r from-transparent via-sinf-primary-light to-transparent"
+                                    class="laser-line via-sinf-primary-light pointer-events-none absolute inset-x-8 h-0.5 bg-gradient-to-r from-transparent to-transparent"
                                 />
                             </div>
 
@@ -486,7 +485,7 @@ onMounted(() => {
                                         v-if="scanStatus === 'processing'"
                                     >
                                         <div
-                                            class="h-10 w-10 animate-spin rounded-full border-3 border-white/20 border-t-sinf-primary-light"
+                                            class="border-t-sinf-primary-light h-10 w-10 animate-spin rounded-full border-3 border-white/20"
                                         />
                                         <p
                                             class="text-sm font-semibold text-white"
@@ -616,7 +615,9 @@ onMounted(() => {
                         <button
                             type="button"
                             class="pill-container cursor-pointer gap-1.5 px-3 py-1.5 text-xs font-medium text-neutral-300 transition-all hover:border-white/20 hover:text-white active:scale-95"
-                            :title="isPaused ? 'Retomar câmara' : 'Pausar câmara'"
+                            :title="
+                                isPaused ? 'Retomar câmara' : 'Pausar câmara'
+                            "
                             @click="togglePause"
                         >
                             <Play v-if="isPaused" :size="14" />
@@ -635,7 +636,7 @@ onMounted(() => {
                             <input
                                 v-model="autoContinue"
                                 type="checkbox"
-                                class="h-3.5 w-3.5 rounded border-white/20 bg-black/40 text-sinf-primary focus:ring-0 focus:ring-offset-0"
+                                class="text-sinf-primary h-3.5 w-3.5 rounded border-white/20 bg-black/40 focus:ring-0 focus:ring-offset-0"
                             />
                             <span>Avançar automaticamente após validação</span>
                         </label>
@@ -660,10 +661,8 @@ onMounted(() => {
                         </div>
 
                         <div
-                            v-if="
-                                scanStatus === 'success'
-                            "
-                            class="rounded-2xl p-3.5 text-xs sm:text-sm border border-emerald-500/30 bg-emerald-500/10 text-emerald-300"
+                            v-if="scanStatus === 'success'"
+                            class="rounded-2xl border border-emerald-500/30 bg-emerald-500/10 p-3.5 text-xs text-emerald-300 sm:text-sm"
                         >
                             <div class="flex items-center gap-2 font-medium">
                                 <CheckCircle2
@@ -705,7 +704,7 @@ onMounted(() => {
                         class="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-3.5"
                     >
                         <div
-                            class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-sinf-primary/30 text-xs font-bold text-white"
+                            class="bg-sinf-primary/30 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
                         >
                             1
                         </div>
@@ -725,7 +724,7 @@ onMounted(() => {
                         class="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-3.5"
                     >
                         <div
-                            class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-sinf-primary/30 text-xs font-bold text-white"
+                            class="bg-sinf-primary/30 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
                         >
                             2
                         </div>
@@ -746,7 +745,7 @@ onMounted(() => {
                         class="flex items-start gap-3 rounded-2xl border border-white/10 bg-white/5 p-3.5"
                     >
                         <div
-                            class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-sinf-primary/30 text-xs font-bold text-white"
+                            class="bg-sinf-primary/30 flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
                         >
                             3
                         </div>
diff --git a/resources/js/Pages/Profile/Show.vue b/resources/js/Pages/Profile/Show.vue
index a2f76084..c6c6318c 100644
--- a/resources/js/Pages/Profile/Show.vue
+++ b/resources/js/Pages/Profile/Show.vue
@@ -69,7 +69,7 @@ const buttons = computed<Tabs>(() => {
 <template>
     <AppLayout title="Perfil">
         <div
-            class="relative mx-auto max-w-5xl space-y-8 px-4 py-12 sm:px-6 sm:py-16 lg:px-8"
+            class="relative mx-auto max-w-7xl space-y-8 px-4 py-12 sm:px-6 sm:py-16 lg:px-8"
         >
             <!-- Profile Hero Card -->
             <ProfileCard :user="user" :is-staff="isStaff" :points="points" />
diff --git a/resources/js/Pages/Program.vue b/resources/js/Pages/Program.vue
index b9ac3212..4ebee13c 100644
--- a/resources/js/Pages/Program.vue
+++ b/resources/js/Pages/Program.vue
@@ -17,7 +17,7 @@ defineProps<Props>();
 
 <template>
     <AppLayout title="Programa">
-        <div class="relative mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8">
+        <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
             <template v-if="totalDays !== 0 && eventDay !== undefined">
                 <ProgramDaySelector
                     :days="days"
diff --git a/resources/js/Pages/Shop.vue b/resources/js/Pages/Shop.vue
index a53582bf..31efd7eb 100644
--- a/resources/js/Pages/Shop.vue
+++ b/resources/js/Pages/Shop.vue
@@ -16,7 +16,7 @@ defineProps<Props>();
 
 <template>
     <AppLayout title="Loja">
-        <div class="relative mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8">
+        <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
             <div
                 v-if="points !== null && points !== undefined"
                 class="mb-10 flex justify-center"
diff --git a/resources/js/Pages/Team.vue b/resources/js/Pages/Team.vue
index 9862cd2c..27fe10e3 100644
--- a/resources/js/Pages/Team.vue
+++ b/resources/js/Pages/Team.vue
@@ -97,7 +97,7 @@ onBeforeUnmount(() => {
             <ArrowDown v-else :size="16" />
         </button>
 
-        <div class="relative mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8">
+        <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
             <template v-if="hasStaff">
                 <DepartmentSelector
                     :departments="departments"
diff --git a/resources/js/Pages/TermsOfService.vue b/resources/js/Pages/TermsOfService.vue
index 1becc2ea..b49b1118 100644
--- a/resources/js/Pages/TermsOfService.vue
+++ b/resources/js/Pages/TermsOfService.vue
@@ -12,7 +12,7 @@ defineProps<Props>();
 <template>
     <AppLayout title="Termos de Utilização">
         <div
-            class="relative mx-auto w-full max-w-5xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8"
+            class="relative mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8"
         >
             <div class="mb-8 text-center sm:mb-10">
                 <h1

From c67d6e8c0de03291e49141a92ed772c67ae78d96 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Mon, 7 Sep 2026 16:54:30 +0100
Subject: [PATCH 19/33] fix: layout

---
 resources/js/Components/PrimaryButton.vue     |  6 +-
 .../js/Components/Profile/AllParticipants.vue | 64 +++++++++++----
 resources/js/Components/Profile/CvArea.vue    |  3 +-
 .../Profile/EnrolledParticipants.vue          | 67 ++++++++++++----
 .../js/Components/Profile/ProfileCard.vue     | 21 ++---
 resources/js/Components/UI/Card.vue           |  2 +-
 resources/js/Pages/Competition.vue            |  2 +-
 resources/js/Pages/Event.vue                  |  2 +-
 resources/js/Pages/Home.vue                   |  8 +-
 resources/js/Pages/Profile/Edit.vue           |  4 +-
 .../Partials/UpdateProfileInformationForm.vue | 79 ++++++++++++++-----
 resources/js/Pages/Profile/Show.vue           |  2 +-
 resources/js/Pages/Program.vue                |  4 +-
 resources/js/Pages/Shop.vue                   |  4 +-
 resources/js/Pages/Team.vue                   |  4 +-
 15 files changed, 189 insertions(+), 83 deletions(-)

diff --git a/resources/js/Components/PrimaryButton.vue b/resources/js/Components/PrimaryButton.vue
index 49d42307..13e3ac56 100644
--- a/resources/js/Components/PrimaryButton.vue
+++ b/resources/js/Components/PrimaryButton.vue
@@ -34,11 +34,7 @@ const buttonRef = ref<HTMLButtonElement | HTMLAnchorElement | null>(null);
 
 const isFullWidth = computed(() => {
     const cls = String(attrs.class ?? "");
-    return (
-        props.fullWidth ||
-        cls.includes("w-full") ||
-        cls.includes("flex-1")
-    );
+    return props.fullWidth || cls.includes("w-full") || cls.includes("flex-1");
 });
 
 const innerWidthClass = computed(() => {
diff --git a/resources/js/Components/Profile/AllParticipants.vue b/resources/js/Components/Profile/AllParticipants.vue
index 8930273e..8364dc58 100644
--- a/resources/js/Components/Profile/AllParticipants.vue
+++ b/resources/js/Components/Profile/AllParticipants.vue
@@ -12,7 +12,9 @@ import {
 import { computed, ref } from "vue";
 import SocialIcon from "@/Components/UI/SocialIcon.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
-import PillSelector, { type PillOption } from "@/Components/UI/PillSelector.vue";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
 import { route } from "ziggy-js";
 
 type Visitor = Participant & {
@@ -168,29 +170,41 @@ const filteredParticipants = computed(() => {
                                         class="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-neutral-800 ring-1 ring-white/10"
                                     >
                                         <img
-                                            v-if="visitor.user?.profile_photo_url"
-                                            :src="visitor.user.profile_photo_url"
+                                            v-if="
+                                                visitor.user?.profile_photo_url
+                                            "
+                                            :src="
+                                                visitor.user.profile_photo_url
+                                            "
                                             :alt="visitor.user.name"
                                             class="h-full w-full object-cover"
                                         />
                                         <span
                                             v-else
-                                            class="text-xs font-bold uppercase text-neutral-300"
+                                            class="text-xs font-bold text-neutral-300 uppercase"
                                         >
-                                            {{ visitor.user?.name?.charAt(0) ?? "P" }}
+                                            {{
+                                                visitor.user?.name?.charAt(0) ??
+                                                "P"
+                                            }}
                                         </span>
                                     </div>
                                     <div class="min-w-0">
                                         <a
                                             :href="
                                                 visitor.user
-                                                    ? route('user.profile', { user: visitor.user })
+                                                    ? route('user.profile', {
+                                                          user: visitor.user,
+                                                      })
                                                     : '#'
                                             "
                                             target="_blank"
                                             class="block truncate font-medium text-white transition-colors hover:text-white/80"
                                         >
-                                            {{ visitor.user?.name ?? `Participante #${visitor.id}` }}
+                                            {{
+                                                visitor.user?.name ??
+                                                `Participante #${visitor.id}`
+                                            }}
                                         </a>
                                         <p
                                             v-if="visitor.user?.email"
@@ -202,8 +216,12 @@ const filteredParticipants = computed(() => {
                                 </div>
                             </td>
 
-                            <td class="w-px py-3 pr-4 pl-3 text-right whitespace-nowrap sm:pr-5">
-                                <div class="flex items-center justify-end gap-1.5">
+                            <td
+                                class="w-px py-3 pr-4 pl-3 text-right whitespace-nowrap sm:pr-5"
+                            >
+                                <div
+                                    class="flex items-center justify-end gap-1.5"
+                                >
                                     <PrimaryButton
                                         v-if="
                                             visitor.can_see_linkedin &&
@@ -219,11 +237,16 @@ const filteredParticipants = computed(() => {
                                         title="LinkedIn"
                                         aria-label="LinkedIn"
                                     >
-                                        <SocialIcon platform="linkedin" :size="15" />
+                                        <SocialIcon
+                                            platform="linkedin"
+                                            :size="15"
+                                        />
                                     </PrimaryButton>
 
                                     <PrimaryButton
-                                        v-if="visitor.can_see_cv && visitor.cv_url"
+                                        v-if="
+                                            visitor.can_see_cv && visitor.cv_url
+                                        "
                                         :href="visitor.cv_url"
                                         external
                                         target="_blank"
@@ -239,7 +262,11 @@ const filteredParticipants = computed(() => {
 
                                     <PrimaryButton
                                         v-if="visitor.user"
-                                        :href="route('user.profile', { user: visitor.user })"
+                                        :href="
+                                            route('user.profile', {
+                                                user: visitor.user,
+                                            })
+                                        "
                                         color="pill"
                                         padding="p-2"
                                         class="shrink-0"
@@ -263,12 +290,17 @@ const filteredParticipants = computed(() => {
             <p class="text-sm text-neutral-400">
                 Nenhum participante encontrado
                 <span v-if="searchQuery"> para "{{ searchQuery }}"</span>
-                <span v-if="filterType !== 'all'"> com o filtro selecionado</span>.
+                <span v-if="filterType !== 'all'">
+                    com o filtro selecionado</span
+                >.
             </p>
             <button
                 type="button"
-                class="mt-2 text-xs text-sinf-primary hover:underline"
-                @click="searchQuery = ''; filterType = 'all'"
+                class="text-sinf-primary mt-2 text-xs hover:underline"
+                @click="
+                    searchQuery = '';
+                    filterType = 'all';
+                "
             >
                 Limpar filtros
             </button>
@@ -277,7 +309,7 @@ const filteredParticipants = computed(() => {
 
     <div
         v-else
-        class="flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 py-16 px-6 text-center shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md"
+        class="flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 px-6 py-16 text-center shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md"
     >
         <div
             class="mb-4 flex h-14 w-14 items-center justify-center rounded-3xl border border-white/10 bg-white/5 text-neutral-400"
diff --git a/resources/js/Components/Profile/CvArea.vue b/resources/js/Components/Profile/CvArea.vue
index 650a410d..7a75e744 100644
--- a/resources/js/Components/Profile/CvArea.vue
+++ b/resources/js/Components/Profile/CvArea.vue
@@ -37,7 +37,8 @@ const hasCV = computed(() =>
 
 const cvUrl = computed(() => {
     if (participant.value?.cv_url) return participant.value.cv_url;
-    if (participant.value?.cv_path) return `/storage/${participant.value.cv_path}`;
+    if (participant.value?.cv_path)
+        return `/storage/${participant.value.cv_path}`;
     return undefined;
 });
 
diff --git a/resources/js/Components/Profile/EnrolledParticipants.vue b/resources/js/Components/Profile/EnrolledParticipants.vue
index 174b41d2..2257ef18 100644
--- a/resources/js/Components/Profile/EnrolledParticipants.vue
+++ b/resources/js/Components/Profile/EnrolledParticipants.vue
@@ -12,7 +12,9 @@ import {
 import { computed, ref } from "vue";
 import SocialIcon from "@/Components/UI/SocialIcon.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
-import PillSelector, { type PillOption } from "@/Components/UI/PillSelector.vue";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
 import { route } from "ziggy-js";
 
 type Visitor = Participant & {
@@ -167,29 +169,41 @@ const filteredVisitors = computed(() => {
                                         class="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-neutral-800 ring-1 ring-white/10"
                                     >
                                         <img
-                                            v-if="visitor.user?.profile_photo_url"
-                                            :src="visitor.user.profile_photo_url"
+                                            v-if="
+                                                visitor.user?.profile_photo_url
+                                            "
+                                            :src="
+                                                visitor.user.profile_photo_url
+                                            "
                                             :alt="visitor.user.name"
                                             class="h-full w-full object-cover"
                                         />
                                         <span
                                             v-else
-                                            class="text-xs font-bold uppercase text-neutral-300"
+                                            class="text-xs font-bold text-neutral-300 uppercase"
                                         >
-                                            {{ visitor.user?.name?.charAt(0) ?? "P" }}
+                                            {{
+                                                visitor.user?.name?.charAt(0) ??
+                                                "P"
+                                            }}
                                         </span>
                                     </div>
                                     <div class="min-w-0">
                                         <a
                                             :href="
                                                 visitor.user
-                                                    ? route('user.profile', { user: visitor.user })
+                                                    ? route('user.profile', {
+                                                          user: visitor.user,
+                                                      })
                                                     : '#'
                                             "
                                             target="_blank"
                                             class="block truncate font-medium text-white transition-colors hover:text-white/80"
                                         >
-                                            {{ visitor.user?.name ?? `Participante #${visitor.id}` }}
+                                            {{
+                                                visitor.user?.name ??
+                                                `Participante #${visitor.id}`
+                                            }}
                                         </a>
                                         <p
                                             v-if="visitor.user?.email"
@@ -201,8 +215,12 @@ const filteredVisitors = computed(() => {
                                 </div>
                             </td>
 
-                            <td class="w-px py-3 pr-4 pl-3 text-right whitespace-nowrap sm:pr-5">
-                                <div class="flex items-center justify-end gap-1.5">
+                            <td
+                                class="w-px py-3 pr-4 pl-3 text-right whitespace-nowrap sm:pr-5"
+                            >
+                                <div
+                                    class="flex items-center justify-end gap-1.5"
+                                >
                                     <PrimaryButton
                                         v-if="
                                             visitor.can_see_linkedin &&
@@ -218,11 +236,16 @@ const filteredVisitors = computed(() => {
                                         title="LinkedIn"
                                         aria-label="LinkedIn"
                                     >
-                                        <SocialIcon platform="linkedin" :size="15" />
+                                        <SocialIcon
+                                            platform="linkedin"
+                                            :size="15"
+                                        />
                                     </PrimaryButton>
 
                                     <PrimaryButton
-                                        v-if="visitor.can_see_cv && visitor.cv_url"
+                                        v-if="
+                                            visitor.can_see_cv && visitor.cv_url
+                                        "
                                         :href="visitor.cv_url"
                                         external
                                         target="_blank"
@@ -238,7 +261,11 @@ const filteredVisitors = computed(() => {
 
                                     <PrimaryButton
                                         v-if="visitor.user"
-                                        :href="route('user.profile', { user: visitor.user })"
+                                        :href="
+                                            route('user.profile', {
+                                                user: visitor.user,
+                                            })
+                                        "
                                         color="pill"
                                         padding="p-2"
                                         class="shrink-0"
@@ -262,12 +289,17 @@ const filteredVisitors = computed(() => {
             <p class="text-sm text-neutral-400">
                 Nenhum participante encontrado
                 <span v-if="searchQuery"> para "{{ searchQuery }}"</span>
-                <span v-if="filterType !== 'all'"> com o filtro selecionado</span>.
+                <span v-if="filterType !== 'all'">
+                    com o filtro selecionado</span
+                >.
             </p>
             <button
                 type="button"
-                class="mt-2 text-xs text-sinf-primary hover:underline"
-                @click="searchQuery = ''; filterType = 'all'"
+                class="text-sinf-primary mt-2 text-xs hover:underline"
+                @click="
+                    searchQuery = '';
+                    filterType = 'all';
+                "
             >
                 Limpar filtros
             </button>
@@ -276,7 +308,7 @@ const filteredVisitors = computed(() => {
 
     <div
         v-else
-        class="flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 py-16 px-6 text-center shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md"
+        class="flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 px-6 py-16 text-center shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md"
     >
         <div
             class="mb-4 flex h-14 w-14 items-center justify-center rounded-3xl border border-white/10 bg-white/5 text-neutral-400"
@@ -287,7 +319,8 @@ const filteredVisitors = computed(() => {
             Ainda sem visitas registadas
         </h3>
         <p class="mt-1 max-w-sm text-xs text-neutral-400 sm:text-sm">
-            Os participantes que visitarem e fizerem check-in na vossa banca aparecerão aqui.
+            Os participantes que visitarem e fizerem check-in na vossa banca
+            aparecerão aqui.
         </p>
     </div>
 </template>
diff --git a/resources/js/Components/Profile/ProfileCard.vue b/resources/js/Components/Profile/ProfileCard.vue
index 2db06fb2..ac82fbce 100644
--- a/resources/js/Components/Profile/ProfileCard.vue
+++ b/resources/js/Components/Profile/ProfileCard.vue
@@ -60,13 +60,8 @@ const isOwnProfile = computed(() =>
 
 const userSocialMedia = computed(() => {
     if (!props.user || isAdmin(props.user)) return undefined;
-    return (
-        props.user.usertype as
-            | Company
-            | Speaker
-            | Participant
-            | undefined
-    )?.social_media;
+    return (props.user.usertype as Company | Speaker | Participant | undefined)
+        ?.social_media;
 });
 
 const hasSocialMedia = computed(() => {
@@ -101,7 +96,7 @@ const hasDefaultActions = computed(() => isOwnProfile.value);
 </script>
 
 <template>
-    <Card as="section" :interactive="false" padding="p-5 sm:p-7">
+    <Card as="section" :interactive="false" padding="p-5 sm:p-7" class="w-full">
         <div
             class="flex flex-col justify-between gap-5 sm:flex-row sm:items-center"
         >
@@ -173,7 +168,7 @@ const hasDefaultActions = computed(() => isOwnProfile.value);
                     <!-- Balance / Points (Sinfrões) -->
                     <div
                         v-if="hasPoints && isOwnProfile"
-                        class="pill-container justify-center sm:justify-start gap-2 px-3.5 py-1.5 text-xs font-medium text-neutral-300 shadow-none sm:text-sm self-stretch sm:self-auto"
+                        class="pill-container justify-center gap-2 self-stretch px-3.5 py-1.5 text-xs font-medium text-neutral-300 shadow-none sm:justify-start sm:self-auto sm:text-sm"
                         title="O teu saldo de SINFrões"
                     >
                         <span class="text-neutral-400">Saldo:</span>
@@ -189,13 +184,13 @@ const hasDefaultActions = computed(() => isOwnProfile.value);
                     <!-- Profile Actions -->
                     <div
                         v-if="hasDefaultActions && isOwnProfile"
-                        class="flex flex-wrap items-center gap-2 w-full sm:w-auto"
+                        class="flex w-full flex-wrap items-center gap-2 sm:w-auto"
                     >
                         <PrimaryButton
                             :href="route('profile.edit')"
                             color="pill"
                             padding="px-3.5 py-2 sm:px-4 sm:py-2"
-                            class="flex-1 min-w-[130px] sm:min-w-0 sm:flex-initial sm:w-auto"
+                            class="min-w-[130px] flex-1 sm:w-auto sm:min-w-0 sm:flex-initial"
                         >
                             <Edit3 :size="15" />
                             <span>Editar Perfil</span>
@@ -210,7 +205,7 @@ const hasDefaultActions = computed(() => isOwnProfile.value);
                             :href="route('user.scan-code')"
                             color="pill"
                             padding="px-3.5 py-2 sm:px-4 sm:py-2"
-                            class="flex-1 min-w-[130px] sm:min-w-0 sm:flex-initial sm:w-auto"
+                            class="min-w-[130px] flex-1 sm:w-auto sm:min-w-0 sm:flex-initial"
                         >
                             <Camera :size="15" />
                             <span>Ler QR</span>
@@ -219,7 +214,7 @@ const hasDefaultActions = computed(() => isOwnProfile.value);
                         <QRCode
                             v-if="isParticipant(user) && user?.usertype"
                             :participant="user.usertype"
-                            class="flex-1 min-w-[130px] sm:min-w-0 sm:flex-initial sm:w-auto"
+                            class="min-w-[130px] flex-1 sm:w-auto sm:min-w-0 sm:flex-initial"
                         />
                     </div>
                 </slot>
diff --git a/resources/js/Components/UI/Card.vue b/resources/js/Components/UI/Card.vue
index f1bc35fd..80c080f3 100644
--- a/resources/js/Components/UI/Card.vue
+++ b/resources/js/Components/UI/Card.vue
@@ -25,7 +25,7 @@ withDefaults(defineProps<Props>(), {
 <template>
     <component
         :is="as"
-        class="group relative flex flex-col justify-between rounded-3xl border border-white/8 bg-black/50 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none"
+        class="group relative flex w-full flex-col justify-between rounded-3xl border border-white/8 bg-black/50 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none"
         :class="[
             padding,
             interactive
diff --git a/resources/js/Pages/Competition.vue b/resources/js/Pages/Competition.vue
index e3716fee..cf12683a 100644
--- a/resources/js/Pages/Competition.vue
+++ b/resources/js/Pages/Competition.vue
@@ -210,7 +210,7 @@ onBeforeUnmount(() => {
         </button>
 
         <div
-            class="relative mx-auto max-w-7xl space-y-12 px-4 py-16 sm:space-y-16 sm:px-6 lg:px-8"
+            class="relative mx-auto w-full max-w-7xl space-y-12 px-4 py-16 sm:space-y-16 sm:px-6 lg:px-8"
         >
             <header class="flex flex-col items-center gap-6 text-center">
                 <div class="space-y-3">
diff --git a/resources/js/Pages/Event.vue b/resources/js/Pages/Event.vue
index 0ca79514..e742b4b6 100644
--- a/resources/js/Pages/Event.vue
+++ b/resources/js/Pages/Event.vue
@@ -245,7 +245,7 @@ onBeforeUnmount(() => {
         </button>
 
         <div
-            class="relative mx-auto max-w-7xl space-y-12 px-4 py-16 sm:space-y-16 sm:px-6 lg:px-8"
+            class="relative mx-auto w-full max-w-7xl space-y-12 px-4 py-16 sm:space-y-16 sm:px-6 lg:px-8"
         >
             <header class="flex flex-col items-center gap-6 text-center">
                 <div class="space-y-3">
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
index 53e0f15d..f659afdb 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -153,7 +153,7 @@ onBeforeUnmount(() => {
 
         <section
             id="aboutus"
-            class="relative mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8"
+            class="relative mx-auto w-full max-w-7xl px-4 py-20 sm:px-6 lg:px-8"
         >
             <div class="mb-10 flex justify-center">
                 <PillSelector
@@ -187,7 +187,9 @@ onBeforeUnmount(() => {
             </div>
         </section>
 
-        <section class="relative mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
+        <section
+            class="relative mx-auto w-full max-w-7xl px-4 py-20 sm:px-6 lg:px-8"
+        >
             <div class="mb-10 flex justify-center">
                 <PillSelector
                     :items="[
@@ -323,7 +325,7 @@ onBeforeUnmount(() => {
 
         <section
             id="sponsors"
-            class="relative mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8"
+            class="relative mx-auto w-full max-w-7xl px-4 py-20 sm:px-6 lg:px-8"
         >
             <div class="mb-10 flex justify-center">
                 <PillSelector
diff --git a/resources/js/Pages/Profile/Edit.vue b/resources/js/Pages/Profile/Edit.vue
index 85581c65..2588f8b4 100644
--- a/resources/js/Pages/Profile/Edit.vue
+++ b/resources/js/Pages/Profile/Edit.vue
@@ -86,7 +86,9 @@ watch(activeTab, (newTab) => {
 
 <template>
     <AppLayout title="Definições de Perfil">
-        <div class="relative mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <div
+            class="relative mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8"
+        >
             <div class="mb-8 flex justify-center sm:mb-10">
                 <PillSelector v-model="activeTab" :items="tabs" size="md">
                     <template #leading>
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
index 59a3258d..b0142e7d 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -55,7 +55,8 @@ const handlePhotoChange = (event: Event) => {
     if (!file) return;
 
     if (!["image/jpeg", "image/png", "image/jpg"].includes(file.type)) {
-        photoError.value = "Por favor seleciona uma imagem válida (JPG ou PNG).";
+        photoError.value =
+            "Por favor seleciona uma imagem válida (JPG ou PNG).";
         return;
     }
 
@@ -167,18 +168,17 @@ const sendEmailVerification = () => {
             </template>
         </ProfileCard>
 
-        <Card
-            as="section"
-            :interactive="false"
-            padding="p-6 sm:p-8"
-        >
+        <Card as="section" :interactive="false" padding="p-6 sm:p-8">
             <template #header>
                 <div class="space-y-1">
-                    <h2 class="text-lg font-bold tracking-tight text-white sm:text-xl">
+                    <h2
+                        class="text-lg font-bold tracking-tight text-white sm:text-xl"
+                    >
                         Informações Pessoais
                     </h2>
                     <p class="text-xs text-neutral-400 sm:text-sm">
-                        Atualiza os dados da tua conta e informações de contacto.
+                        Atualiza os dados da tua conta e informações de
+                        contacto.
                     </p>
                 </div>
             </template>
@@ -232,7 +232,8 @@ const sendEmailVerification = () => {
                         v-show="verificationLinkSent"
                         class="mt-2 font-medium text-emerald-400"
                     >
-                        Um novo link de verificação foi enviado para o teu email.
+                        Um novo link de verificação foi enviado para o teu
+                        email.
                     </div>
                 </div>
 
@@ -285,7 +286,11 @@ const sendEmailVerification = () => {
                                 :error-message="form.errors.public_email"
                             >
                                 <template #leading>
-                                    <SocialIcon platform="email" :size="16" class="shrink-0 text-neutral-400" />
+                                    <SocialIcon
+                                        platform="email"
+                                        :size="16"
+                                        class="shrink-0 text-neutral-400"
+                                    />
                                 </template>
                             </TextInput>
 
@@ -298,7 +303,11 @@ const sendEmailVerification = () => {
                                 :error-message="form.errors.website"
                             >
                                 <template #leading>
-                                    <SocialIcon platform="website" :size="16" class="shrink-0 text-neutral-400" />
+                                    <SocialIcon
+                                        platform="website"
+                                        :size="16"
+                                        class="shrink-0 text-neutral-400"
+                                    />
                                 </template>
                             </TextInput>
 
@@ -311,7 +320,11 @@ const sendEmailVerification = () => {
                                 :error-message="form.errors.github"
                             >
                                 <template #leading>
-                                    <SocialIcon platform="github" :size="16" class="shrink-0 text-neutral-400" />
+                                    <SocialIcon
+                                        platform="github"
+                                        :size="16"
+                                        class="shrink-0 text-neutral-400"
+                                    />
                                 </template>
                             </TextInput>
 
@@ -324,7 +337,11 @@ const sendEmailVerification = () => {
                                 :error-message="form.errors.linkedin"
                             >
                                 <template #leading>
-                                    <SocialIcon platform="linkedin" :size="16" class="shrink-0 text-neutral-400" />
+                                    <SocialIcon
+                                        platform="linkedin"
+                                        :size="16"
+                                        class="shrink-0 text-neutral-400"
+                                    />
                                 </template>
                             </TextInput>
 
@@ -337,7 +354,11 @@ const sendEmailVerification = () => {
                                 :error-message="form.errors.twitter"
                             >
                                 <template #leading>
-                                    <SocialIcon platform="twitter" :size="16" class="shrink-0 text-neutral-400" />
+                                    <SocialIcon
+                                        platform="twitter"
+                                        :size="16"
+                                        class="shrink-0 text-neutral-400"
+                                    />
                                 </template>
                             </TextInput>
 
@@ -350,7 +371,11 @@ const sendEmailVerification = () => {
                                 :error-message="form.errors.instagram"
                             >
                                 <template #leading>
-                                    <SocialIcon platform="instagram" :size="16" class="shrink-0 text-neutral-400" />
+                                    <SocialIcon
+                                        platform="instagram"
+                                        :size="16"
+                                        class="shrink-0 text-neutral-400"
+                                    />
                                 </template>
                             </TextInput>
 
@@ -363,7 +388,11 @@ const sendEmailVerification = () => {
                                 :error-message="form.errors.facebook"
                             >
                                 <template #leading>
-                                    <SocialIcon platform="facebook" :size="16" class="shrink-0 text-neutral-400" />
+                                    <SocialIcon
+                                        platform="facebook"
+                                        :size="16"
+                                        class="shrink-0 text-neutral-400"
+                                    />
                                 </template>
                             </TextInput>
                         </div>
@@ -401,7 +430,7 @@ const sendEmailVerification = () => {
         >
             <div class="flex flex-col items-center justify-center py-2">
                 <div
-                    class="h-32 w-32 shrink-0 overflow-hidden rounded-full ring-4 ring-white/10 bg-neutral-900"
+                    class="h-32 w-32 shrink-0 overflow-hidden rounded-full bg-neutral-900 ring-4 ring-white/10"
                 >
                     <img
                         :src="photoPreview ?? user?.profile_photo_url"
@@ -427,7 +456,11 @@ const sendEmailVerification = () => {
                     @click="photoInput?.click()"
                 >
                     <Upload :size="14" />
-                    <span>{{ photoPreview ? "Escolher outro ficheiro" : "Carregar nova foto" }}</span>
+                    <span>{{
+                        photoPreview
+                            ? "Escolher outro ficheiro"
+                            : "Carregar nova foto"
+                    }}</span>
                 </PrimaryButton>
                 <span class="text-[11px] text-neutral-500">
                     Formatos aceites: JPG ou PNG (máx. 10MB)
@@ -453,7 +486,9 @@ const sendEmailVerification = () => {
                         @click="deletePhoto"
                     >
                         <Trash2 :size="13" />
-                        <span>{{ isDeletingPhoto ? "A remover..." : "Remover foto" }}</span>
+                        <span>{{
+                            isDeletingPhoto ? "A remover..." : "Remover foto"
+                        }}</span>
                     </PrimaryButton>
                     <div v-else />
 
@@ -475,7 +510,11 @@ const sendEmailVerification = () => {
                             :disabled="photoForm.processing"
                             @click="savePhoto"
                         >
-                            {{ photoForm.processing ? "A guardar..." : "Guardar fotografia" }}
+                            {{
+                                photoForm.processing
+                                    ? "A guardar..."
+                                    : "Guardar fotografia"
+                            }}
                         </PrimaryButton>
                     </div>
                 </div>
diff --git a/resources/js/Pages/Profile/Show.vue b/resources/js/Pages/Profile/Show.vue
index c6c6318c..06aa8e76 100644
--- a/resources/js/Pages/Profile/Show.vue
+++ b/resources/js/Pages/Profile/Show.vue
@@ -69,7 +69,7 @@ const buttons = computed<Tabs>(() => {
 <template>
     <AppLayout title="Perfil">
         <div
-            class="relative mx-auto max-w-7xl space-y-8 px-4 py-12 sm:px-6 sm:py-16 lg:px-8"
+            class="relative mx-auto w-full max-w-7xl space-y-8 px-4 py-12 sm:px-6 sm:py-16 lg:px-8"
         >
             <!-- Profile Hero Card -->
             <ProfileCard :user="user" :is-staff="isStaff" :points="points" />
diff --git a/resources/js/Pages/Program.vue b/resources/js/Pages/Program.vue
index 4ebee13c..f0115f42 100644
--- a/resources/js/Pages/Program.vue
+++ b/resources/js/Pages/Program.vue
@@ -17,7 +17,9 @@ defineProps<Props>();
 
 <template>
     <AppLayout title="Programa">
-        <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+        <div
+            class="relative mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8"
+        >
             <template v-if="totalDays !== 0 && eventDay !== undefined">
                 <ProgramDaySelector
                     :days="days"
diff --git a/resources/js/Pages/Shop.vue b/resources/js/Pages/Shop.vue
index 31efd7eb..795b96cc 100644
--- a/resources/js/Pages/Shop.vue
+++ b/resources/js/Pages/Shop.vue
@@ -16,7 +16,9 @@ defineProps<Props>();
 
 <template>
     <AppLayout title="Loja">
-        <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+        <div
+            class="relative mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8"
+        >
             <div
                 v-if="points !== null && points !== undefined"
                 class="mb-10 flex justify-center"
diff --git a/resources/js/Pages/Team.vue b/resources/js/Pages/Team.vue
index 27fe10e3..f1de0b08 100644
--- a/resources/js/Pages/Team.vue
+++ b/resources/js/Pages/Team.vue
@@ -97,7 +97,9 @@ onBeforeUnmount(() => {
             <ArrowDown v-else :size="16" />
         </button>
 
-        <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+        <div
+            class="relative mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8"
+        >
             <template v-if="hasStaff">
                 <DepartmentSelector
                     :departments="departments"

From 9a157aa9ff304bd8c230b20e61090860d97c30fc Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Mon, 7 Sep 2026 17:18:58 +0100
Subject: [PATCH 20/33] fix: better team page

---
 resources/css/app.css                         |   9 ++
 resources/js/Components/Navbar.vue            |   2 +-
 .../js/Components/Team/DepartmentSection.vue  |  12 +-
 .../js/Components/Team/DepartmentSidebar.vue  | 123 ++++++++++++++++++
 resources/js/Components/Team/TeamMember.vue   |  11 +-
 resources/js/Components/UI/Card.vue           | 115 +++++++++-------
 resources/js/Pages/Team.vue                   |  45 +++++--
 7 files changed, 250 insertions(+), 67 deletions(-)
 create mode 100644 resources/js/Components/Team/DepartmentSidebar.vue

diff --git a/resources/css/app.css b/resources/css/app.css
index 2032af5f..95df4d9b 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -195,6 +195,15 @@
     box-shadow: var(--shadow-pill-active);
 }
 
+@utility no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
 @utility glass-dropdown {
     border-radius: 1.25rem;
     border: 1px solid rgba(255, 255, 255, 0.08);
diff --git a/resources/js/Components/Navbar.vue b/resources/js/Components/Navbar.vue
index d2bbf39e..d6219c87 100644
--- a/resources/js/Components/Navbar.vue
+++ b/resources/js/Components/Navbar.vue
@@ -37,7 +37,7 @@ const pageRoutes: Routes = {
     team: { label: "Equipa" },
 };
 
-const editions = [2026, 2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018];
+const editions = [2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018];
 const currentEdition = 2026;
 
 const page = usePage();
diff --git a/resources/js/Components/Team/DepartmentSection.vue b/resources/js/Components/Team/DepartmentSection.vue
index 87dafeac..4b9fedd8 100644
--- a/resources/js/Components/Team/DepartmentSection.vue
+++ b/resources/js/Components/Team/DepartmentSection.vue
@@ -5,9 +5,12 @@ import PillSelector from "@/Components/UI/PillSelector.vue";
 
 interface Props {
     department: Department;
+    showHeader?: boolean;
 }
 
-defineProps<Props>();
+withDefaults(defineProps<Props>(), {
+    showHeader: true,
+});
 </script>
 
 <template>
@@ -16,7 +19,10 @@ defineProps<Props>();
         :id="`dept-${department.id}`"
         class="w-full"
     >
-        <div class="mb-8 flex items-center justify-center">
+        <div
+            v-if="showHeader"
+            class="mb-4 flex items-center justify-center sm:justify-start sm:mb-6"
+        >
             <PillSelector
                 :items="[
                     {
@@ -31,7 +37,7 @@ defineProps<Props>();
         </div>
 
         <div
-            class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 md:grid-cols-3 lg:grid-cols-4"
+            class="grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-6 lg:grid-cols-2 xl:grid-cols-3"
         >
             <TeamMember
                 v-for="staff in department.staff"
diff --git a/resources/js/Components/Team/DepartmentSidebar.vue b/resources/js/Components/Team/DepartmentSidebar.vue
new file mode 100644
index 00000000..e5491627
--- /dev/null
+++ b/resources/js/Components/Team/DepartmentSidebar.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type Department from "@/Types/Department";
+
+interface Props {
+    departments: Department[];
+    selectedId: number | null;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "select", id: number | null): void;
+}>();
+
+const departmentsWithStaff = computed(() =>
+    props.departments.filter((d) => (d.staff?.length ?? 0) > 0),
+);
+
+const totalMembers = computed(() =>
+    departmentsWithStaff.value.reduce(
+        (sum, d) => sum + (d.staff?.length ?? 0),
+        0,
+    ),
+);
+
+interface SidebarItem {
+    id: number | null;
+    label: string;
+    count: number;
+    active: boolean;
+}
+
+const items = computed<SidebarItem[]>(() => [
+    {
+        id: null,
+        label: "Todos",
+        count: totalMembers.value,
+        active: props.selectedId === null,
+    },
+    ...departmentsWithStaff.value.map((dept) => ({
+        id: dept.id,
+        label: dept.name,
+        count: dept.staff?.length ?? 0,
+        active: props.selectedId === dept.id,
+    })),
+]);
+
+const handleSelect = (id: number | null, event?: MouseEvent) => {
+    emit("select", id);
+    if (event?.currentTarget) {
+        const el = event.currentTarget as HTMLElement;
+        el.scrollIntoView({
+            behavior: "smooth",
+            inline: "center",
+            block: "nearest",
+        });
+    }
+};
+</script>
+
+<template>
+    <div v-if="departmentsWithStaff.length > 1" class="w-full">
+        <div
+            class="sticky top-16 z-30 -mx-4 mb-6 px-4 py-2.5 backdrop-blur-md sm:-mx-6 sm:px-6 lg:hidden"
+        >
+            <div
+                class="pill-container no-scrollbar max-w-full flex-nowrap gap-1 overflow-x-auto p-1.5"
+            >
+                <button
+                    v-for="item in items"
+                    :key="item.id ?? 'all'"
+                    type="button"
+                    class="pill-item shrink-0 gap-2 text-xs whitespace-nowrap sm:text-sm"
+                    :class="item.active ? 'pill-item-active' : ''"
+                    @click="handleSelect(item.id, $event)"
+                >
+                    <span>{{ item.label }}</span>
+                    <span
+                        class="rounded-full px-1.5 py-0.5 text-[10px] font-semibold transition-colors"
+                        :class="
+                            item.active
+                                ? 'bg-white/20 text-white'
+                                : 'bg-white/10 text-neutral-400'
+                        "
+                    >
+                        {{ item.count }}
+                    </span>
+                </button>
+            </div>
+        </div>
+
+        <nav
+            class="no-scrollbar hidden max-h-[calc(100vh-7.5rem)] flex-col gap-1.5 overflow-y-auto rounded-3xl border border-white/8 bg-black/50 p-2 shadow-[var(--shadow-pill-inset)] backdrop-blur-md lg:flex"
+            aria-label="Departamentos"
+        >
+            <button
+                v-for="item in items"
+                :key="item.id ?? 'all'"
+                type="button"
+                :class="[
+                    'group flex w-full cursor-pointer items-center justify-between gap-3 rounded-full px-4 py-2.5 text-left text-sm font-medium transition-all duration-200 select-none',
+                    item.active
+                        ? 'pill-item-active'
+                        : 'text-neutral-300 hover:bg-white/8 hover:text-white active:scale-[0.98]',
+                ]"
+                @click="handleSelect(item.id)"
+            >
+                <span class="truncate">{{ item.label }}</span>
+                <span
+                    class="ml-auto shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold transition-colors"
+                    :class="
+                        item.active
+                            ? 'bg-white/20 text-white'
+                            : 'bg-white/10 text-neutral-400 group-hover:text-neutral-300'
+                    "
+                >
+                    {{ item.count }}
+                </span>
+            </button>
+        </nav>
+    </div>
+</template>
diff --git a/resources/js/Components/Team/TeamMember.vue b/resources/js/Components/Team/TeamMember.vue
index 0d94a08c..d024cbcc 100644
--- a/resources/js/Components/Team/TeamMember.vue
+++ b/resources/js/Components/Team/TeamMember.vue
@@ -86,13 +86,14 @@ const socialLinks = computed(() => {
     <Card
         :image-src="photoUrl && !imageError ? photoUrl : undefined"
         :image-alt="name"
+        layout="responsive"
         class="h-full w-full"
     >
         <template v-if="!photoUrl || imageError" #image>
             <div
                 class="flex h-full w-full items-center justify-center bg-neutral-900 text-neutral-600"
             >
-                <Users class="h-12 w-12 opacity-40" />
+                <Users class="h-8 w-8 opacity-40 sm:h-12 sm:w-12" />
             </div>
         </template>
 
@@ -102,8 +103,8 @@ const socialLinks = computed(() => {
             >
                 {{ name }}
             </h4>
-            <p class="mt-1 line-clamp-1 text-xs text-neutral-400">
-                <span v-if="isCoordinator" class="font-medium text-neutral-400">
+            <p class="mt-0.5 line-clamp-1 text-xs text-neutral-400 sm:mt-1">
+                <span v-if="isCoordinator" class="font-medium text-neutral-300">
                     Coordenador(a)
                 </span>
                 <span v-else class="text-neutral-400"> Membro da Equipa </span>
@@ -113,7 +114,7 @@ const socialLinks = computed(() => {
         <template #footer>
             <div
                 v-if="socialLinks.length > 0"
-                class="flex flex-wrap items-center gap-1.5"
+                class="flex flex-wrap items-center gap-1 sm:gap-1.5"
             >
                 <a
                     v-for="item in socialLinks"
@@ -124,7 +125,7 @@ const socialLinks = computed(() => {
                     class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-all hover:bg-white/10 hover:text-white"
                     :aria-label="item.label"
                 >
-                    <SocialIcon :platform="item.platform" :size="16" />
+                    <SocialIcon :platform="item.platform" :size="15" />
                 </a>
             </div>
             <div v-else class="text-[11px] text-neutral-600">SINF</div>
diff --git a/resources/js/Components/UI/Card.vue b/resources/js/Components/UI/Card.vue
index 80c080f3..8243cb6a 100644
--- a/resources/js/Components/UI/Card.vue
+++ b/resources/js/Components/UI/Card.vue
@@ -8,6 +8,7 @@ interface Props {
     imageFit?: "object-cover" | "object-contain" | "object-fill" | string;
     padding?: string;
     hasOverlay?: boolean;
+    layout?: "vertical" | "horizontal" | "responsive";
 }
 
 withDefaults(defineProps<Props>(), {
@@ -17,71 +18,97 @@ withDefaults(defineProps<Props>(), {
     imageAlt: "",
     imageAspectRatio: "aspect-square",
     imageFit: "object-cover",
-    padding: "p-4 sm:p-5",
+    padding: undefined,
     hasOverlay: true,
+    layout: "vertical",
 });
 </script>
 
 <template>
     <component
         :is="as"
-        class="group relative flex w-full flex-col justify-between rounded-3xl border border-white/8 bg-black/50 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none"
         :class="[
-            padding,
+            'group relative w-full rounded-3xl border border-white/8 bg-black/50 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none',
             interactive
                 ? 'hover:scale-[1.015] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)]'
                 : '',
+            layout === 'responsive'
+                ? 'grid grid-cols-[auto_1fr] items-center gap-x-3.5 gap-y-1 p-3.5 sm:flex sm:flex-col sm:justify-between sm:gap-0 sm:p-5'
+                : layout === 'horizontal'
+                  ? 'grid grid-cols-[auto_1fr] items-center gap-x-3.5 gap-y-1 p-3.5'
+                  : ['flex flex-col justify-between', padding || 'p-4 sm:p-5'],
         ]"
     >
-        <div class="flex flex-1 flex-col">
-            <!-- Media / Top Image -->
-            <div
-                v-if="imageSrc || $slots.image"
-                class="relative w-full overflow-hidden rounded-2xl bg-neutral-900 ring-1 ring-white/10"
-                :class="imageAspectRatio"
-            >
-                <slot name="image">
-                    <img
-                        v-if="imageSrc"
-                        :src="imageSrc"
-                        :alt="imageAlt"
-                        class="h-full w-full transition-transform duration-500 group-hover:scale-105"
-                        :class="imageFit"
-                    />
-                </slot>
-
-                <div
-                    v-if="hasOverlay"
-                    class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+        <div
+            v-if="imageSrc || $slots.image"
+            :class="[
+                'relative overflow-hidden rounded-2xl bg-neutral-900 ring-1 ring-white/10',
+                layout === 'responsive'
+                    ? 'row-span-2 aspect-square h-20 w-20 shrink-0 min-[400px]:h-22 min-[400px]:w-22 sm:row-span-1 sm:aspect-square sm:h-auto sm:w-full'
+                    : layout === 'horizontal'
+                      ? 'row-span-2 aspect-square h-20 w-20 shrink-0 min-[400px]:h-22 min-[400px]:w-22'
+                      : ['w-full', imageAspectRatio],
+            ]"
+        >
+            <slot name="image">
+                <img
+                    v-if="imageSrc"
+                    :src="imageSrc"
+                    :alt="imageAlt"
+                    class="h-full w-full transition-transform duration-500 group-hover:scale-105"
+                    :class="imageFit"
                 />
+            </slot>
 
-                <slot name="image-overlay" />
-            </div>
+            <div
+                v-if="hasOverlay"
+                class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+            />
 
-            <!-- Header Slot -->
-            <header
-                v-if="$slots.header"
-                :class="{ 'mt-4': imageSrc || $slots.image }"
-            >
-                <slot name="header" />
-            </header>
+            <slot name="image-overlay" />
+        </div>
 
-            <!-- Main Content Slot -->
-            <div
-                v-if="$slots.default"
-                class="flex-1"
-                :class="{
-                    'mt-3': $slots.header || imageSrc || $slots.image,
-                }"
-            >
-                <slot />
-            </div>
+        <header
+            v-if="$slots.header"
+            :class="[
+                'min-w-0',
+                layout === 'responsive'
+                    ? 'mt-0 sm:mt-4 w-full'
+                    : layout === 'horizontal'
+                      ? 'mt-0'
+                      : { 'mt-4': imageSrc || $slots.image },
+            ]"
+        >
+            <slot name="header" />
+        </header>
+
+        <div
+            v-if="$slots.default"
+            :class="[
+                'min-w-0',
+                layout === 'responsive'
+                    ? 'mt-1 sm:mt-3 sm:flex-1'
+                    : layout === 'horizontal'
+                      ? 'mt-1'
+                      : {
+                            'mt-3': $slots.header || imageSrc || $slots.image,
+                            'flex-1': true,
+                        },
+            ]"
+        >
+            <slot />
         </div>
 
-        <!-- Footer Slot -->
         <footer
             v-if="$slots.footer"
-            class="mt-4 flex min-h-9 items-center justify-between pt-3"
+            :class="[
+                'flex min-w-0 items-center justify-between',
+                layout === 'responsive'
+                    ? 'mt-1 sm:mt-4 sm:min-h-9 sm:pt-3 w-full'
+                    : layout === 'horizontal'
+                      ? 'mt-1'
+                      : 'mt-4 min-h-9 pt-3',
+            ]"
         >
             <slot name="footer" />
         </footer>
diff --git a/resources/js/Pages/Team.vue b/resources/js/Pages/Team.vue
index f1de0b08..b8878b00 100644
--- a/resources/js/Pages/Team.vue
+++ b/resources/js/Pages/Team.vue
@@ -3,7 +3,7 @@ import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 import type Department from "@/Types/Department";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import DepartmentSection from "@/Components/Team/DepartmentSection.vue";
-import DepartmentSelector from "@/Components/Team/DepartmentSelector.vue";
+import DepartmentSidebar from "@/Components/Team/DepartmentSidebar.vue";
 import PillSelector from "@/Components/UI/PillSelector.vue";
 import { ArrowUp, ArrowDown } from "@lucide/vue";
 
@@ -31,6 +31,13 @@ const displayedDepartments = computed(() => {
     );
 });
 
+function handleSelectDepartment(id: number | null) {
+    selectedDepartmentId.value = id;
+    if (window.scrollY > 200) {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+}
+
 function updateScrollState() {
     const scrollY = window.scrollY || window.pageYOffset;
     const windowHeight = window.innerHeight;
@@ -98,21 +105,31 @@ onBeforeUnmount(() => {
         </button>
 
         <div
-            class="relative mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8"
+            class="relative mx-auto w-full max-w-7xl px-4 pt-0 pb-12 sm:px-6 sm:pb-16 lg:px-8 lg:pt-8"
         >
             <template v-if="hasStaff">
-                <DepartmentSelector
-                    :departments="departments"
-                    :selected-id="selectedDepartmentId"
-                    @select="selectedDepartmentId = $event"
-                />
-
-                <div class="space-y-16 sm:space-y-20">
-                    <DepartmentSection
-                        v-for="department in displayedDepartments"
-                        :key="department.id"
-                        :department="department"
-                    />
+                <div class="lg:flex lg:items-start lg:gap-8 xl:gap-12">
+                    <aside
+                        class="w-full lg:sticky lg:top-24 lg:w-64 lg:shrink-0 xl:w-72"
+                    >
+                        <DepartmentSidebar
+                            :departments="departments"
+                            :selected-id="selectedDepartmentId"
+                            @select="handleSelectDepartment"
+                        />
+                    </aside>
+
+                    <!-- Right Column: Team Members -->
+                    <div class="min-w-0 flex-1">
+                        <div class="space-y-12 sm:space-y-16">
+                            <DepartmentSection
+                                v-for="department in displayedDepartments"
+                                :key="department.id"
+                                :department="department"
+                                :show-header="selectedDepartmentId === null"
+                            />
+                        </div>
+                    </div>
                 </div>
             </template>
 

From b0b5c4236b0ed64bd9129b9a975340d0a6f31bdc Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Mon, 7 Sep 2026 18:08:05 +0100
Subject: [PATCH 21/33] feat: better program page

---
 .../js/Components/Program/ProgramSidebar.vue  | 254 ++++++++++
 .../js/Components/Program/ProgramTimeline.vue | 439 ++++++++++++++++++
 resources/js/Pages/Program.vue                | 147 +++++-
 3 files changed, 825 insertions(+), 15 deletions(-)
 create mode 100644 resources/js/Components/Program/ProgramSidebar.vue
 create mode 100644 resources/js/Components/Program/ProgramTimeline.vue

diff --git a/resources/js/Components/Program/ProgramSidebar.vue b/resources/js/Components/Program/ProgramSidebar.vue
new file mode 100644
index 00000000..cc1fd04a
--- /dev/null
+++ b/resources/js/Components/Program/ProgramSidebar.vue
@@ -0,0 +1,254 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Link } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
+import type EventDay from "@/Types/EventDay";
+
+export interface TabOption {
+    id: string;
+    label: string;
+    count: number;
+}
+
+interface Props {
+    days: EventDay[];
+    currentDay: number;
+    totalDays: number;
+    eventDay?: EventDay;
+    selectedType: string;
+    availableTabs: TabOption[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "select-type", type: string): void;
+}>();
+
+const formatShortDate = (dateStr?: Date | string): string => {
+    if (!dateStr) return "";
+    try {
+        const d = new Date(dateStr);
+        return d
+            .toLocaleDateString("pt-PT", {
+                day: "numeric",
+                month: "short",
+                timeZone: "Europe/Lisbon",
+            })
+            .replace(".", "");
+    } catch {
+        return "";
+    }
+};
+
+interface DayItem {
+    id: number;
+    label: string;
+    dateText?: string;
+    active: boolean;
+    href: string;
+}
+
+const dayItems = computed<DayItem[]>(() => {
+    return Array.from({ length: props.totalDays }, (_, i) => {
+        const dayIndex = i + 1;
+        const d = props.days && props.days[i] ? props.days[i] : undefined;
+        const dateText = d ? formatShortDate(d.date) : undefined;
+        return {
+            id: dayIndex,
+            label: `Dia ${dayIndex}`,
+            dateText,
+            active: dayIndex === props.currentDay,
+            href: route(route().current() ?? "program", { day: dayIndex }),
+        };
+    });
+});
+
+const handleSelectType = (id: string, event?: MouseEvent) => {
+    emit("select-type", id);
+    if (event?.currentTarget) {
+        const el = event.currentTarget as HTMLElement;
+        el.scrollIntoView({
+            behavior: "smooth",
+            inline: "center",
+            block: "nearest",
+        });
+    }
+};
+
+const handleDayClick = (event?: MouseEvent) => {
+    if (event?.currentTarget) {
+        const el = event.currentTarget as HTMLElement;
+        el.scrollIntoView({
+            behavior: "smooth",
+            inline: "center",
+            block: "nearest",
+        });
+    }
+};
+</script>
+
+<template>
+    <div class="w-full">
+        <div
+            class="sticky top-16 z-30 -mx-4 mb-6 px-4 py-2.5 backdrop-blur-md sm:-mx-6 sm:px-6 lg:hidden"
+        >
+            <div
+                v-if="eventDay?.theme"
+                class="mb-2 flex items-center justify-between gap-3 border-b border-white/6 px-1 pb-2 text-left"
+            >
+                <span
+                    class="text-[10px] font-semibold tracking-widest text-neutral-500 uppercase"
+                >
+                    Tema
+                </span>
+                <span class="truncate text-xs font-medium text-neutral-300">
+                    {{ eventDay.theme }}
+                </span>
+            </div>
+
+            <div
+                v-if="totalDays > 1"
+                class="pill-container no-scrollbar max-w-full flex-nowrap gap-1 overflow-x-auto p-1.5"
+            >
+                <Link
+                    v-for="day in dayItems"
+                    :key="day.id"
+                    :href="day.href"
+                    preserve-scroll
+                    class="pill-item shrink-0 gap-1.5 text-xs whitespace-nowrap sm:text-sm"
+                    :class="day.active ? 'pill-item-active' : ''"
+                    @click="handleDayClick($event)"
+                >
+                    <span class="font-semibold">{{ day.label }}</span>
+                    <template v-if="day.dateText">
+                        <span class="opacity-35">•</span>
+                        <span class="text-[11px] opacity-80">{{
+                            day.dateText
+                        }}</span>
+                    </template>
+                </Link>
+            </div>
+
+            <!-- Row 2: Category Filter Pills -->
+            <div
+                v-if="availableTabs.length > 1"
+                class="pill-container no-scrollbar mt-2 max-w-full flex-nowrap gap-1 overflow-x-auto p-1.5"
+            >
+                <button
+                    v-for="tab in availableTabs"
+                    :key="tab.id"
+                    type="button"
+                    class="pill-item shrink-0 gap-2 text-xs whitespace-nowrap sm:text-sm"
+                    :class="selectedType === tab.id ? 'pill-item-active' : ''"
+                    @click="handleSelectType(tab.id, $event)"
+                >
+                    <span>{{ tab.label }}</span>
+                    <span
+                        class="rounded-full px-1.5 py-0.5 text-[10px] font-semibold transition-colors"
+                        :class="
+                            selectedType === tab.id
+                                ? 'bg-white/20 text-white'
+                                : 'bg-white/10 text-neutral-400'
+                        "
+                    >
+                        {{ tab.count }}
+                    </span>
+                </button>
+            </div>
+        </div>
+
+        <nav
+            class="no-scrollbar hidden max-h-[calc(100vh-7.5rem)] flex-col gap-4 overflow-y-auto rounded-3xl border border-white/8 bg-black/50 p-3 shadow-(--shadow-pill-inset) backdrop-blur-md lg:flex"
+            aria-label="Programa do Evento"
+        >
+            <div
+                v-if="eventDay?.theme"
+                class="relative overflow-hidden rounded-2xl border border-white/8 bg-white/3 p-3.5 text-left transition-colors"
+            >
+                <div
+                    class="pointer-events-none absolute -top-8 -right-8 h-20 w-20 rounded-full bg-white/4 blur-lg"
+                />
+                <div class="relative flex items-center justify-between gap-2">
+                    <span
+                        class="text-[10px] font-semibold tracking-widest text-neutral-500 uppercase"
+                    >
+                        Tema
+                    </span>
+                    <div class="flex items-center gap-1 opacity-40">
+                        <span class="h-1 w-1 rounded-full bg-white" />
+                        <span class="h-1 w-3 rounded-full bg-white" />
+                        <span class="h-1 w-1 rounded-full bg-white" />
+                    </div>
+                </div>
+                <p
+                    class="relative mt-2 text-xs leading-relaxed font-semibold text-neutral-200"
+                >
+                    {{ eventDay.theme }}
+                </p>
+            </div>
+
+            <div v-if="totalDays > 1" class="flex flex-col gap-1.5">
+                <Link
+                    v-for="day in dayItems"
+                    :key="day.id"
+                    :href="day.href"
+                    preserve-scroll
+                    :class="[
+                        'group flex w-full cursor-pointer items-center justify-between gap-3 rounded-full px-4 py-2.5 text-left text-sm font-medium transition-all duration-200 select-none',
+                        day.active
+                            ? 'pill-item-active'
+                            : 'text-neutral-300 hover:bg-white/8 hover:text-white active:scale-[0.98]',
+                    ]"
+                >
+                    <span class="truncate">{{ day.label }}</span>
+                    <span
+                        v-if="day.dateText"
+                        class="ml-auto shrink-0 rounded-full px-2 py-0.5 text-[11px] font-semibold transition-colors"
+                        :class="
+                            day.active
+                                ? 'bg-white/20 text-white'
+                                : 'bg-white/10 text-neutral-400 group-hover:text-neutral-300'
+                        "
+                    >
+                        {{ day.dateText }}
+                    </span>
+                </Link>
+            </div>
+
+            <div v-if="availableTabs.length > 1">
+                <div
+                    class="px-3 pb-2 text-[11px] font-semibold tracking-wider text-neutral-500 uppercase"
+                >
+                    Filtrar
+                </div>
+                <div class="flex flex-col gap-1.5">
+                    <button
+                        v-for="tab in availableTabs"
+                        :key="tab.id"
+                        type="button"
+                        :class="[
+                            'group flex w-full cursor-pointer items-center justify-between gap-3 rounded-full px-4 py-2 text-left text-sm font-medium transition-all duration-200 select-none',
+                            selectedType === tab.id
+                                ? 'pill-item-active'
+                                : 'text-neutral-300 hover:bg-white/8 hover:text-white active:scale-[0.98]',
+                        ]"
+                        @click="handleSelectType(tab.id)"
+                    >
+                        <span class="truncate">{{ tab.label }}</span>
+                        <span
+                            class="ml-auto shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold transition-colors"
+                            :class="
+                                selectedType === tab.id
+                                    ? 'bg-white/20 text-white'
+                                    : 'bg-white/10 text-neutral-400 group-hover:text-neutral-300'
+                            "
+                        >
+                            {{ tab.count }}
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </nav>
+    </div>
+</template>
diff --git a/resources/js/Components/Program/ProgramTimeline.vue b/resources/js/Components/Program/ProgramTimeline.vue
new file mode 100644
index 00000000..bc4f3877
--- /dev/null
+++ b/resources/js/Components/Program/ProgramTimeline.vue
@@ -0,0 +1,439 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Link } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
+import type EventDay from "@/Types/EventDay";
+import { isSpeaker, type SpeakerUser } from "@/Types/User";
+import Card from "@/Components/UI/Card.vue";
+import PillSelector from "@/Components/UI/PillSelector.vue";
+import StandDisplay from "@/Components/Program/TimeLine/StandDisplay.vue";
+import { ArrowRight } from "@lucide/vue";
+
+interface Props {
+    eventDay: EventDay;
+    selectedType: string;
+}
+
+const props = defineProps<Props>();
+
+export type ItemType = "talk" | "activity" | "competition";
+
+export interface UnifiedTimelineItem {
+    id: string | number;
+    rawId: number;
+    type: ItemType;
+    typeLabel: string;
+    name: string;
+    topic?: string;
+    location?: string;
+    capacity?: number;
+    timeStart?: string;
+    timeEnd?: string;
+    startMinutes: number;
+    durationMinutes?: number;
+    users?: SpeakerUser[];
+    url: string;
+}
+
+const parseToMinutes = (timeStr?: string): number => {
+    if (!timeStr) return 9999;
+    if (
+        timeStr.includes("T") ||
+        (timeStr.includes("-") && timeStr.includes(":"))
+    ) {
+        try {
+            const d = new Date(timeStr);
+            if (!isNaN(d.getTime())) {
+                return d.getHours() * 60 + d.getMinutes();
+            }
+        } catch {
+            // fallback
+        }
+    }
+    const parts = timeStr.split(":");
+    if (parts.length >= 2) {
+        const h = parseInt(parts[0], 10) || 0;
+        const m = parseInt(parts[1], 10) || 0;
+        return h * 60 + m;
+    }
+    return 9999;
+};
+
+const formatTime = (timeStr?: string): string => {
+    if (!timeStr) return "";
+    if (
+        timeStr.includes("T") ||
+        (timeStr.includes("-") && timeStr.includes(":"))
+    ) {
+        try {
+            const d = new Date(timeStr);
+            if (!isNaN(d.getTime())) {
+                return d.toLocaleTimeString("pt-PT", {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    timeZone: "Europe/Lisbon",
+                });
+            }
+        } catch {
+            // fallback
+        }
+    }
+    return timeStr.slice(0, 5);
+};
+
+const calculateDuration = (start?: string, end?: string): string | null => {
+    if (!start || !end) return null;
+    const sMin = parseToMinutes(start);
+    const eMin = parseToMinutes(end);
+    if (sMin === 9999 || eMin === 9999 || eMin <= sMin) return null;
+    const diff = eMin - sMin;
+    const hours = Math.floor(diff / 60);
+    const mins = diff % 60;
+    if (hours > 0 && mins > 0) return `${hours}h ${mins}m`;
+    if (hours > 0) return `${hours}h`;
+    return `${diff}m`;
+};
+
+const allUnifiedItems = computed<UnifiedTimelineItem[]>(() => {
+    const list: UnifiedTimelineItem[] = [];
+
+    if (props.eventDay.talks) {
+        for (const t of props.eventDay.talks) {
+            list.push({
+                id: `talk-${t.id}`,
+                rawId: t.id,
+                type: "talk",
+                typeLabel: "Palestra",
+                name: t.name,
+                topic: t.topic,
+                location: t.location,
+                timeStart: t.time_start,
+                timeEnd: t.time_end,
+                startMinutes: parseToMinutes(t.time_start),
+                users: (t.users?.filter(isSpeaker) ?? []) as SpeakerUser[],
+                url: route("event.show", { event: t.id }),
+            });
+        }
+    }
+
+    if (props.eventDay.activities) {
+        for (const a of props.eventDay.activities) {
+            list.push({
+                id: `act-${a.id}`,
+                rawId: a.id,
+                type: "activity",
+                typeLabel: "Workshop",
+                name: a.name,
+                topic: a.topic,
+                location: a.location,
+                capacity: a.capacity,
+                timeStart: a.time_start,
+                timeEnd: a.time_end,
+                startMinutes: parseToMinutes(a.time_start),
+                users: (a.users?.filter(isSpeaker) ?? []) as SpeakerUser[],
+                url: route("event.show", { event: a.id }),
+            });
+        }
+    }
+
+    if (props.eventDay.competitions) {
+        for (const c of props.eventDay.competitions) {
+            list.push({
+                id: `comp-${c.id}`,
+                rawId: c.id,
+                type: "competition",
+                typeLabel: "Competição",
+                name: c.name,
+                topic: c.theme,
+                timeStart: c.date_start,
+                timeEnd: c.date_end,
+                startMinutes: parseToMinutes(c.date_start),
+                url: route("competition.show", { competition: c.slug }),
+            });
+        }
+    }
+
+    return list.sort((a, b) => a.startMinutes - b.startMinutes);
+});
+
+const filteredItems = computed<UnifiedTimelineItem[]>(() => {
+    if (props.selectedType === "all") {
+        return allUnifiedItems.value;
+    }
+    if (props.selectedType === "talk") {
+        return allUnifiedItems.value.filter((item) => item.type === "talk");
+    }
+    if (props.selectedType === "activity") {
+        return allUnifiedItems.value.filter((item) => item.type === "activity");
+    }
+    if (props.selectedType === "competitions") {
+        return allUnifiedItems.value.filter(
+            (item) => item.type === "competition",
+        );
+    }
+    return allUnifiedItems.value;
+});
+
+interface TimeSlotGroup {
+    timeKey: string;
+    formattedStart: string;
+    formattedEnd?: string;
+    duration?: string | null;
+    items: UnifiedTimelineItem[];
+}
+
+const timelineGroups = computed<TimeSlotGroup[]>(() => {
+    const groups: TimeSlotGroup[] = [];
+    for (const item of filteredItems.value) {
+        const timeKey = item.timeStart ? formatTime(item.timeStart) : "00:00";
+        const existing = groups.find((g) => g.timeKey === timeKey);
+        if (existing) {
+            existing.items.push(item);
+        } else {
+            const formattedStart = formatTime(item.timeStart);
+            const formattedEnd = item.timeEnd
+                ? formatTime(item.timeEnd)
+                : undefined;
+            const duration = calculateDuration(item.timeStart, item.timeEnd);
+            groups.push({
+                timeKey,
+                formattedStart,
+                formattedEnd,
+                duration,
+                items: [item],
+            });
+        }
+    }
+    return groups;
+});
+</script>
+
+<template>
+    <div class="w-full">
+        <template v-if="selectedType === 'stand'">
+            <StandDisplay :stands="eventDay.stands ?? []" />
+        </template>
+
+        <div
+            v-else-if="filteredItems.length === 0"
+            class="flex flex-col items-center justify-center py-20 text-center"
+        >
+            <PillSelector
+                :items="[
+                    {
+                        id: 'none',
+                        label: 'Sem eventos nesta categoria',
+                        disabled: true,
+                    },
+                ]"
+                size="sm"
+                :wrap="false"
+                container-class="mb-3"
+            />
+            <p class="text-xs text-neutral-500">
+                Não existem eventos programados para este filtro no momento.
+            </p>
+        </div>
+
+        <div v-else class="relative w-full">
+            <div class="relative space-y-6 sm:space-y-8">
+                <div
+                    v-for="(group, groupIndex) in timelineGroups"
+                    :key="group.timeKey"
+                    class="group relative flex flex-col sm:flex-row sm:items-start"
+                >
+                    <div
+                        class="hidden select-none sm:flex sm:w-28 sm:shrink-0 sm:flex-col sm:items-end sm:pt-3.5 sm:pr-6 sm:text-right"
+                    >
+                        <span
+                            class="text-lg font-bold tracking-tight text-white"
+                        >
+                            {{ group.formattedStart }}
+                        </span>
+                        <span
+                            v-if="group.formattedEnd"
+                            class="mt-0.5 text-xs text-neutral-400"
+                        >
+                            {{ group.formattedEnd }}
+                            <template v-if="group.duration">
+                                <span class="text-neutral-600">·</span>
+                                <span class="text-neutral-500">{{
+                                    group.duration
+                                }}</span>
+                            </template>
+                        </span>
+                    </div>
+
+                    <div
+                        class="hidden sm:relative sm:flex sm:flex-col sm:items-center sm:self-stretch"
+                    >
+                        <div
+                            class="z-10 mt-5 h-2.5 w-2.5 rounded-full bg-neutral-300 ring-4 ring-neutral-900 transition-all duration-200 group-hover:scale-125 group-hover:bg-white group-hover:ring-white/20"
+                        />
+                        <div
+                            v-if="groupIndex < timelineGroups.length - 1"
+                            class="absolute top-8 bottom-0 w-px bg-white/10"
+                        />
+                    </div>
+
+                    <div
+                        v-if="groupIndex < timelineGroups.length - 1"
+                        class="absolute top-6 bottom-0 left-2.5 w-px bg-white/10 sm:hidden"
+                    />
+                    <div
+                        class="absolute top-5 left-1.5 z-10 h-2.5 w-2.5 rounded-full bg-neutral-300 ring-4 ring-neutral-900 sm:hidden"
+                    />
+
+                    <div class="min-w-0 flex-1 pb-2 pl-7 sm:pb-0 sm:pl-6">
+                        <div
+                            :class="[
+                                'grid gap-4',
+                                group.items.length > 1
+                                    ? 'grid-cols-1 md:grid-cols-2'
+                                    : 'grid-cols-1',
+                            ]"
+                        >
+                            <Card
+                                v-for="item in group.items"
+                                :key="item.id"
+                                as="article"
+                                padding="p-5 sm:p-6"
+                                class="h-full w-full"
+                            >
+                                <template #header>
+                                    <div
+                                        class="mb-2.5 flex flex-wrap items-center gap-x-2.5 gap-y-1 text-xs"
+                                    >
+                                        <span
+                                            class="font-semibold tracking-wider uppercase"
+                                            :class="
+                                                item.type === 'talk'
+                                                    ? 'text-blue-400'
+                                                    : item.type === 'activity'
+                                                      ? 'text-purple-400'
+                                                      : 'text-amber-400'
+                                            "
+                                        >
+                                            {{ item.typeLabel }}
+                                        </span>
+
+                                        <template v-if="item.timeStart">
+                                            <span
+                                                class="text-neutral-600 sm:hidden"
+                                                >·</span
+                                            >
+                                            <span
+                                                class="text-neutral-400 sm:hidden"
+                                            >
+                                                {{ formatTime(item.timeStart)
+                                                }}<template v-if="item.timeEnd">
+                                                    -
+                                                    {{
+                                                        formatTime(item.timeEnd)
+                                                    }}</template
+                                                >
+                                            </span>
+                                        </template>
+
+                                        <template v-if="item.location">
+                                            <span class="text-neutral-600"
+                                                >·</span
+                                            >
+                                            <span class="text-neutral-300">{{
+                                                item.location
+                                            }}</span>
+                                        </template>
+
+                                        <template v-if="item.capacity">
+                                            <span class="text-neutral-600"
+                                                >·</span
+                                            >
+                                            <span class="text-neutral-400"
+                                                >{{ item.capacity }} vagas</span
+                                            >
+                                        </template>
+                                    </div>
+
+                                    <h3
+                                        class="text-lg font-bold tracking-tight sm:text-xl"
+                                    >
+                                        <Link
+                                            :href="item.url"
+                                            class="group/link inline-flex items-center gap-2 text-white transition-colors hover:text-neutral-200"
+                                            preserve-state
+                                            preserve-scroll
+                                        >
+                                            <span class="leading-snug">{{
+                                                item.name
+                                            }}</span>
+                                            <ArrowRight
+                                                :size="15"
+                                                class="shrink-0 text-neutral-500 transition-transform duration-200 group-hover/link:translate-x-1 group-hover/link:text-white"
+                                            />
+                                        </Link>
+                                    </h3>
+                                </template>
+
+                                <p
+                                    v-if="item.topic"
+                                    class="text-sm leading-relaxed text-neutral-400"
+                                >
+                                    {{ item.topic }}
+                                </p>
+
+                                <template
+                                    v-if="item.users && item.users.length > 0"
+                                    #footer
+                                >
+                                    <div
+                                        class="flex w-full flex-wrap items-center gap-3 border-t border-white/6 pt-3"
+                                    >
+                                        <div
+                                            v-for="user in item.users"
+                                            :key="user.id"
+                                            class="flex items-center gap-2 text-xs"
+                                        >
+                                            <img
+                                                v-if="user.profile_photo_url"
+                                                :src="user.profile_photo_url"
+                                                :alt="user.name"
+                                                class="h-6 w-6 rounded-full object-cover ring-1 ring-white/15"
+                                            />
+                                            <div
+                                                v-else
+                                                class="flex h-6 w-6 items-center justify-center rounded-full bg-neutral-800 text-[10px] font-bold text-white ring-1 ring-white/10"
+                                            >
+                                                {{ user.name.charAt(0) }}
+                                            </div>
+                                            <div
+                                                class="flex items-baseline gap-1"
+                                            >
+                                                <span
+                                                    class="font-medium text-neutral-200"
+                                                >
+                                                    {{ user.name }}
+                                                </span>
+                                                <span
+                                                    v-if="
+                                                        user.usertype
+                                                            ?.organization
+                                                    "
+                                                    class="text-neutral-500"
+                                                >
+                                                    ({{
+                                                        user.usertype
+                                                            .organization
+                                                    }})
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </template>
+                            </Card>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Pages/Program.vue b/resources/js/Pages/Program.vue
index f0115f42..b3eccc71 100644
--- a/resources/js/Pages/Program.vue
+++ b/resources/js/Pages/Program.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
+import { computed, ref, watch, onMounted, onBeforeUnmount } from "vue";
 import AppLayout from "@/Layouts/AppLayout.vue";
-import ProgramDaySelector from "@/Components/Program/ProgramDaySelector.vue";
-import ProgramDayPanel from "@/Components/Program/ProgramDayPanel.vue";
+import ProgramSidebar, {
+    type TabOption,
+} from "@/Components/Program/ProgramSidebar.vue";
+import ProgramTimeline from "@/Components/Program/ProgramTimeline.vue";
 import PillSelector from "@/Components/UI/PillSelector.vue";
 import type EventDay from "@/Types/EventDay";
+import { ArrowUp } from "@lucide/vue";
 
 interface Props {
     days?: EventDay[];
@@ -12,27 +16,140 @@ interface Props {
     totalDays: number;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const availableTabs = computed<TabOption[]>(() => {
+    if (!props.eventDay) return [];
+    const tabs: TabOption[] = [];
+    const talksCount = props.eventDay.talks?.length ?? 0;
+    const activitiesCount = props.eventDay.activities?.length ?? 0;
+    const competitionsCount = props.eventDay.competitions?.length ?? 0;
+    const standsCount = props.eventDay.stands?.length ?? 0;
+
+    const timelineTotal = talksCount + activitiesCount + competitionsCount;
+
+    if (timelineTotal > 0) {
+        tabs.push({
+            id: "all",
+            label: "Todos",
+            count: timelineTotal,
+        });
+    }
+
+    if (talksCount > 0) {
+        tabs.push({
+            id: "talk",
+            label: "Palestras",
+            count: talksCount,
+        });
+    }
+
+    if (activitiesCount > 0) {
+        tabs.push({
+            id: "activity",
+            label: "Atividades",
+            count: activitiesCount,
+        });
+    }
+
+    if (standsCount > 0) {
+        tabs.push({
+            id: "stand",
+            label: "Bancas",
+            count: standsCount,
+        });
+    }
+
+    if (competitionsCount > 0) {
+        tabs.push({
+            id: "competitions",
+            label: "Competições",
+            count: competitionsCount,
+        });
+    }
+
+    return tabs;
+});
+
+const selectedType = ref<string>("all");
+
+watch(
+    availableTabs,
+    (tabs) => {
+        if (tabs.length > 0 && !tabs.some((t) => t.id === selectedType.value)) {
+            selectedType.value = tabs[0]?.id ?? "all";
+        }
+    },
+    { immediate: true },
+);
+
+const isScrolled = ref(false);
+
+const updateScrollState = () => {
+    isScrolled.value = (window.scrollY || window.pageYOffset) > 400;
+};
+
+const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+};
+
+onMounted(() => {
+    updateScrollState();
+    window.addEventListener("scroll", updateScrollState, { passive: true });
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener("scroll", updateScrollState);
+});
 </script>
 
 <template>
     <AppLayout title="Programa">
+        <Transition
+            enter-active-class="transition duration-200 ease-out"
+            enter-from-class="opacity-0 translate-y-2 scale-90"
+            enter-to-class="opacity-100 translate-y-0 scale-100"
+            leave-active-class="transition duration-150 ease-in"
+            leave-from-class="opacity-100 translate-y-0 scale-100"
+            leave-to-class="opacity-0 translate-y-2 scale-90"
+        >
+            <button
+                v-if="isScrolled"
+                type="button"
+                aria-label="Voltar ao topo"
+                class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 cursor-pointer justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
+                @click="scrollToTop"
+            >
+                <ArrowUp :size="16" />
+            </button>
+        </Transition>
+
         <div
-            class="relative mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8"
+            class="relative mx-auto w-full max-w-7xl px-4 pt-0 pb-12 sm:px-6 sm:pb-16 lg:px-8 lg:pt-8"
         >
             <template v-if="totalDays !== 0 && eventDay !== undefined">
-                <ProgramDaySelector
-                    :days="days"
-                    :total-days="totalDays"
-                    :query-day="queryDay"
-                    :event-day="eventDay"
-                />
+                <div class="lg:flex lg:items-start lg:gap-8 xl:gap-12">
+                    <aside
+                        class="w-full lg:sticky lg:top-24 lg:w-64 lg:shrink-0 xl:w-72"
+                    >
+                        <ProgramSidebar
+                            :days="days ?? []"
+                            :current-day="queryDay"
+                            :total-days="totalDays"
+                            :event-day="eventDay"
+                            :selected-type="selectedType"
+                            :available-tabs="availableTabs"
+                            @select-type="selectedType = $event"
+                        />
+                    </aside>
 
-                <ProgramDayPanel
-                    :key="eventDay.id"
-                    :day="eventDay"
-                    :query-day="queryDay"
-                />
+                    <div class="min-w-0 flex-1">
+                        <ProgramTimeline
+                            :event-day="eventDay"
+                            :selected-type="selectedType"
+                        />
+                    </div>
+                </div>
             </template>
 
             <div

From 430b608984459168002d096b15c8910690e990c0 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Mon, 7 Sep 2026 19:01:20 +0100
Subject: [PATCH 22/33] fix: competition page layout

---
 resources/js/Pages/Competition.vue | 313 +++++++++++++++--------------
 1 file changed, 166 insertions(+), 147 deletions(-)

diff --git a/resources/js/Pages/Competition.vue b/resources/js/Pages/Competition.vue
index cf12683a..6165b662 100644
--- a/resources/js/Pages/Competition.vue
+++ b/resources/js/Pages/Competition.vue
@@ -9,10 +9,11 @@ import type Competition from "@/Types/Competition";
 import type { CompetitionPrizes } from "@/Types/Competition";
 import { type User } from "@/Types/User";
 import Card from "@/Components/UI/Card.vue";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
 import PillSelector, {
     type PillOption,
 } from "@/Components/UI/PillSelector.vue";
-import { ExternalLink } from "@lucide/vue";
+import { ExternalLink, ArrowRight, ArrowUp, ArrowDown } from "@lucide/vue";
 
 interface Props {
     competition: Competition;
@@ -32,41 +33,51 @@ const user = computed(() => page.props.auth?.user as User | undefined);
 const competition = computed(() => props.competition);
 const leaderboard = computed(() => competition.value.teams?.slice(0, 3) ?? []);
 
-const formatDateRange = (startStr?: string, endStr?: string): string => {
-    if (!startStr || !endStr) return "";
+const formatMilestoneDate = (dateStr?: string) => {
+    if (!dateStr) return null;
     try {
-        const s = new Date(startStr);
-        const e = new Date(endStr);
-        const startDay = s.toLocaleDateString("pt-PT", {
-            day: "numeric",
-            month: "short",
-            timeZone: "Europe/Lisbon",
-        });
-        const startTime = s.toLocaleTimeString("pt-PT", {
-            hour: "2-digit",
-            minute: "2-digit",
-            timeZone: "Europe/Lisbon",
-        });
-        const endTime = e.toLocaleTimeString("pt-PT", {
+        const d = new Date(dateStr);
+        if (isNaN(d.getTime())) return null;
+        const day = d.getDate();
+        const m = d
+            .toLocaleDateString("pt-PT", {
+                month: "short",
+                timeZone: "Europe/Lisbon",
+            })
+            .replace(".", "");
+        const month = m.charAt(0).toUpperCase() + m.slice(1);
+        const time = d.toLocaleTimeString("pt-PT", {
             hour: "2-digit",
             minute: "2-digit",
             timeZone: "Europe/Lisbon",
         });
-        const endDay = e.toLocaleDateString("pt-PT", {
-            day: "numeric",
-            month: "short",
-            timeZone: "Europe/Lisbon",
-        });
-
-        if (startDay === endDay) {
-            return `${startDay}, ${startTime} - ${endTime}`;
-        }
-        return `${startDay} ${startTime} — ${endDay} ${endTime}`;
+        return {
+            dateText: `${day} ${month}`,
+            timeText: time,
+        };
     } catch {
-        return "";
+        return null;
     }
 };
 
+const startDateInfo = computed(() =>
+    formatMilestoneDate(props.competition.date_start),
+);
+const endDateInfo = computed(() =>
+    formatMilestoneDate(props.competition.date_end),
+);
+
+const formattedSchedule = computed(() => {
+    if (!startDateInfo.value || !endDateInfo.value) return "";
+    const start = startDateInfo.value;
+    const end = endDateInfo.value;
+
+    if (start.dateText === end.dateText) {
+        return `${start.dateText}, ${start.timeText} — ${end.timeText}`;
+    }
+    return `${start.dateText}, ${start.timeText} — ${end.dateText}, ${end.timeText}`;
+});
+
 const handleEnrollClick = () => {
     if (user.value) {
         router.put(route("enroll"));
@@ -176,140 +187,151 @@ onBeforeUnmount(() => {
             :aria-label="
                 isAtBottom ? 'Scroll to top' : 'Scroll to next section'
             "
-            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
+            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 cursor-pointer justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
             @click="handleQuickScroll"
         >
-            <svg
-                v-if="isAtBottom"
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M5 10l7-7m0 0l7 7m-7-7v18"
-                />
-            </svg>
-            <svg
-                v-else
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M19 14l-7 7m0 0l-7-7m7 7V3"
-                />
-            </svg>
+            <ArrowUp v-if="isAtBottom" :size="16" />
+            <ArrowDown v-else :size="16" />
         </button>
 
         <div
-            class="relative mx-auto w-full max-w-7xl space-y-12 px-4 py-16 sm:space-y-16 sm:px-6 lg:px-8"
+            class="relative mx-auto w-full max-w-7xl space-y-12 px-4 pt-4 pb-12 sm:space-y-16 sm:px-6 sm:pb-16 lg:px-8 lg:pt-8"
         >
-            <header class="flex flex-col items-center gap-6 text-center">
-                <div class="space-y-3">
-                    <h1
-                        class="text-3xl font-bold tracking-tight text-white sm:text-4xl md:text-5xl"
-                    >
-                        {{ competition.name }}
-                    </h1>
-                    <p
-                        v-if="competition.theme"
-                        class="text-base font-medium text-neutral-300 sm:text-lg md:text-xl"
-                    >
-                        {{ competition.theme }}
-                    </p>
-                </div>
+            <header class="relative overflow-hidden pt-2 pb-6 sm:pt-4 sm:pb-10">
 
                 <div
-                    class="mt-2 flex w-full flex-col gap-6 rounded-3xl border border-white/8 bg-black/50 p-6 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md sm:p-8"
+                    class="relative grid grid-cols-1 items-start gap-10 lg:grid-cols-12 lg:gap-12"
                 >
                     <div
-                        v-if="competition.date_start && competition.date_end"
-                        class="flex items-center gap-2 text-xs text-neutral-400 sm:text-sm"
+                        class="flex flex-col items-start text-left lg:col-span-7 xl:col-span-8"
                     >
-                        <svg
-                            class="h-4 w-4 text-neutral-400"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
+                        <div
+                            class="flex flex-wrap items-center gap-x-2.5 gap-y-1.5 text-xs font-semibold tracking-wider uppercase"
                         >
-                            <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                            />
-                        </svg>
-                        <span class="font-medium text-neutral-300">
-                            {{
-                                formatDateRange(
-                                    competition.date_start,
-                                    competition.date_end,
-                                )
-                            }}
-                        </span>
-                    </div>
+                            <span class="text-amber-400">Competição</span>
 
-                    <p
-                        v-if="competition.description"
-                        class="text-justify text-base leading-relaxed text-neutral-300 sm:text-lg"
-                    >
-                        {{ competition.description }}
-                    </p>
-
-                    <div class="border-t border-white/8 pt-6">
-                        <div v-if="isOver" class="text-center sm:text-left">
-                            <p class="text-xs text-neutral-400 sm:text-sm">
-                                Esta competição já acabou. Obrigado pela
-                                participação!
-                            </p>
+                            <template v-if="formattedSchedule">
+                                <span class="text-neutral-600">·</span>
+                                <span class="text-neutral-300">
+                                    {{ formattedSchedule }}
+                                </span>
+                            </template>
+
+                            <template v-if="isOver">
+                                <span class="text-neutral-600">·</span>
+                                <span class="text-neutral-500">Terminada</span>
+                            </template>
                         </div>
 
+                        <h1
+                            class="mt-4 text-3xl leading-[1.1] font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl"
+                        >
+                            {{ competition.name }}
+                        </h1>
+
                         <div
-                            v-else
-                            class="flex flex-col items-center justify-between gap-4 sm:flex-row"
+                            v-if="competition.theme"
+                            class="relative mt-4 flex items-start gap-3"
                         >
-                            <template v-if="!isEnrolled">
-                                <p
-                                    class="text-center text-xs text-neutral-400 sm:text-left sm:text-sm"
-                                >
-                                    Precisas de estar inscrito na SINF 2026 para
-                                    participar.
-                                </p>
-                                <button
-                                    type="button"
-                                    class="pill-container pill-item bg-sinf-primary/80 hover:bg-sinf-primary shrink-0 cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
-                                    @click="handleEnrollClick"
-                                >
-                                    Inscrever-me na SINF
-                                </button>
-                            </template>
+                            <p
+                                class="text-base leading-snug font-medium text-neutral-200 sm:text-lg lg:text-xl"
+                            >
+                                {{ competition.theme }}
+                            </p>
+                        </div>
+
+                        <p
+                            v-if="competition.description"
+                            class="mt-6 max-w-2xl text-left text-sm leading-relaxed font-normal text-neutral-400 sm:text-base"
+                        >
+                            {{ competition.description }}
+                        </p>
+                    </div>
 
-                            <template v-else-if="competition.registration_link">
-                                <p
-                                    class="text-center text-xs text-neutral-400 sm:text-left sm:text-sm"
+                    <div class="relative w-full lg:col-span-5 xl:col-span-4">
+                        <Card
+                            as="div"
+                            :interactive="false"
+                            padding="p-6 sm:p-7"
+                            class="w-full"
+                        >
+                            <h2
+                                class="text-xl font-bold tracking-tight text-white sm:text-2xl"
+                            >
+                                {{
+                                    isOver
+                                        ? "Competição Concluída"
+                                        : isEnrolled &&
+                                            competition.registration_link
+                                          ? "Regista a tua Equipa"
+                                          : "Participa na Competição"
+                                }}
+                            </h2>
+
+                            <p
+                                class="mt-2 text-xs leading-relaxed text-neutral-400 sm:text-sm"
+                            >
+                                <template v-if="isOver">
+                                    Esta competição já terminou. Podes consultar
+                                    a classificação e regulamento abaixo.
+                                </template>
+                                <template v-else-if="!isEnrolled">
+                                    A participação é gratuita para todos os
+                                    inscritos na SINF 2026. Inscreve-te na
+                                    conferência para poder concorrer.
+                                </template>
+                                <template
+                                    v-else-if="competition.registration_link"
                                 >
-                                    As inscrições para esta competição estão
-                                    abertas.
-                                </p>
-                                <a
-                                    :href="competition.registration_link"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    class="pill-container pill-item bg-sinf-secondary/80 hover:bg-sinf-secondary shrink-0 cursor-pointer gap-2 px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
+                                    As inscrições de equipas estão abertas. Junta
+                                    os teus colegas e submete a tua inscrição.
+                                </template>
+                                <template v-else>
+                                    As inscrições de equipas para este desafio
+                                    abrem muito em breve. Fica atento!
+                                </template>
+                            </p>
+
+                            <div class="mt-6">
+                                <PrimaryButton
+                                    v-if="isOver"
+                                    disabled
+                                    color="pill"
+                                    class="w-full"
+                                    padding="px-6 py-2.5"
                                 >
-                                    <span>Inscrever Equipa</span>
-                                    <ExternalLink :size="16" />
-                                </a>
-                            </template>
-                        </div>
+                                    Inscrições Encerradas
+                                </PrimaryButton>
+
+                                <template v-else>
+                                    <PrimaryButton
+                                        v-if="!isEnrolled"
+                                        type="button"
+                                        color="pill"
+                                        class="w-full"
+                                        padding="px-6 py-2.5"
+                                        @click="handleEnrollClick"
+                                    >
+                                        <span>Inscrever-me na SINF</span>
+                                    </PrimaryButton>
+
+                                    <PrimaryButton
+                                        v-else-if="
+                                            competition.registration_link
+                                        "
+                                        :href="competition.registration_link"
+                                        external
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        color="pill"
+                                        class="w-full"
+                                        padding="px-6 py-2.5"
+                                    >
+                                        <span>Inscrever Equipa</span>
+                                    </PrimaryButton>
+                                </template>
+                            </div>
+                        </Card>
                     </div>
                 </div>
             </header>
@@ -348,14 +370,11 @@ onBeforeUnmount(() => {
                 class="flex flex-col items-center justify-center py-20 text-center"
             >
                 <div class="pill-container mb-4 px-6 py-2.5">
-                    <span class="text-sm font-medium text-neutral-400">
-                        Em breve...
+                    <span class="text-xs text-neutral-400 sm:text-sm">
+                        Não há informações adicionais disponíveis para esta
+                        competição.
                     </span>
                 </div>
-                <p class="max-w-md text-sm text-neutral-400">
-                    Os detalhes e regulamento da competição estarão disponíveis
-                    brevemente.
-                </p>
             </div>
         </div>
     </AppLayout>

From dfb6bd728e4837f24b8d5487be0e3f1ed1f21bb0 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Mon, 7 Sep 2026 19:30:59 +0100
Subject: [PATCH 23/33] feat: better event page

---
 app/Http/Controllers/EventController.php      |  80 +--
 app/Providers/AppServiceProvider.php          |   5 +
 resources/js/Components/Event/SpeakerInfo.vue | 121 ++--
 resources/js/Components/UI/Card.vue           | 117 ++--
 resources/js/Pages/Event.vue                  | 541 +++++++++---------
 resources/js/Pages/Profile/ScanCode.vue       |  10 -
 6 files changed, 425 insertions(+), 449 deletions(-)

diff --git a/app/Http/Controllers/EventController.php b/app/Http/Controllers/EventController.php
index 736fd095..2f45e3a5 100644
--- a/app/Http/Controllers/EventController.php
+++ b/app/Http/Controllers/EventController.php
@@ -6,7 +6,6 @@
 use App\Models\User;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Gate;
-use Illuminate\Support\Facades\Log;
 use Inertia\Inertia;
 
 class EventController extends Controller
@@ -40,7 +39,7 @@ public function show(Request $request, Event $event)
         }
 
         return Inertia::render('Event', [
-            'event' => $event->load(['users', 'event_day']),
+            'event' => $event->load(['users', 'event_day', 'type']),
             'enrollments' => $enrollments,
             'enrollmentCount' => $enrollmentCount,
             'isParticipant' => $isParticipant,
@@ -56,79 +55,50 @@ public function show(Request $request, Event $event)
      */
     public function join(Request $request, Event $event)
     {
-
-        $edition = $request->input('edition');
-
-        if ($edition === null) {
-            return response('No edition found', 500);
-        }
-
-        /** @var User|null */
+        /** @var User */
         $user = $request->user();
 
         if ($user === null) {
-            return redirect()->back()->dangerBanner('Inicia sessão para fazer esta ação');
-        }
-
-        if ($user->cannot('join', $event)) {
-            Log::alert('User {user} attempted to join event "{event}" but was denied', [
-                'user' => $user->name,
-                'event' => $event->name,
-            ]);
-
-            return redirect()->back()->dangerBanner('Não podes inscrever-te neste evento');
+            return redirect()->route('login');
         }
 
-        $currentEnrollment = $user->usertype->enrollments()->where('edition_id', $edition->id)->first(); // we can safely get only the first one because there should only be one.
-
-        if ($currentEnrollment === null) {
-            Log::alert('User {user} attempted to join event "{event}" while not enrolled in the current edition', [
-                'user' => $user->name,
-                'event' => $event->name,
-            ]);
+        if ($user->can('join', $event)) {
+            $editionId = $request->input('edition')?->id ?? $event->event_day?->edition_id;
+            $enrollment = $editionId
+                ? $user->usertype->enrollments()->where('edition_id', $editionId)->first()
+                : $user->usertype->enrollments()->latest()->first();
 
-            return redirect()->route('home')->dangerBanner('Não estás inscrito nesta edição!');
+            if ($enrollment) {
+                $enrollment->events()->syncWithoutDetaching([$event->id]);
+            }
         }
 
-        $currentEnrollment->events()->attach($event);
-        Log::info('User {user} joined event {event}', [
-            'user' => $user->name,
-            'event' => $event->name,
-        ]);
-
-        return redirect()->route('profile.show')->banner('Inscrição realizada com sucesso!');
+        return redirect()->back();
     }
 
     /**
-     * The current user wants to leave the given event if enrolled.
+     * The current user wants to leave the given event.
      */
     public function leave(Request $request, Event $event)
     {
+        /** @var User */
         $user = $request->user();
 
-        $edition = $request->input('edition');
-
-        if ($edition === null) {
-            return response('No edition found', 500);
+        if ($user === null) {
+            return redirect()->route('login');
         }
 
-        $currentEnrollment = $user->usertype->enrollments()->where('edition_id', $edition->id)->first(); // we can safely get only the first one because there should only be one.
-
-        if ($currentEnrollment === null) {
-            Log::alert('User {user} attempted to leave event "{event}" while not enrolled in the current edition', [
-                'user' => $user->name,
-                'event' => $event->name,
-            ]);
+        if ($user->can('leave', $event)) {
+            $editionId = $request->input('edition')?->id ?? $event->event_day?->edition_id;
+            $enrollment = $editionId
+                ? $user->usertype->enrollments()->where('edition_id', $editionId)->first()
+                : $user->usertype->enrollments()->latest()->first();
 
-            return redirect()->route('home')->dangerBanner('Não estás inscrito nesta edição!');
+            if ($enrollment) {
+                $enrollment->events()->detach($event->id);
+            }
         }
 
-        $currentEnrollment->events()->detach($event);
-        Log::info('User {user} left event "{event}"', [
-            'user' => $user->name,
-            'event' => $event->name,
-        ]);
-
-        return redirect()->route('profile.show')->banner('Inscrição cancelada com sucesso!');
+        return redirect()->back();
     }
 }
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index c2f658dc..cb3f1c81 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -73,6 +73,11 @@ protected function configureGates(): void
             )
         ));
 
+        Gate::define('leave', fn (User $user, Event $event) => (
+            $user->isParticipant() &&
+            $event->enrollments()->where('participant_id', $user->usertype_id)->exists()
+        ));
+
         Gate::define('give', fn (User $user, Quest $quest, Enrollment $enrollment) => (
             $enrollment->quests()->where('quest_id', $quest->id)->doesntExist() &&
             (
diff --git a/resources/js/Components/Event/SpeakerInfo.vue b/resources/js/Components/Event/SpeakerInfo.vue
index 5d26e926..e708fe3b 100644
--- a/resources/js/Components/Event/SpeakerInfo.vue
+++ b/resources/js/Components/Event/SpeakerInfo.vue
@@ -73,36 +73,79 @@ const socialLinks = computed(() => {
 
     return entries;
 });
+
+const displayName = computed(() => {
+    return user.value.usertype?.display_name ?? user.value.name;
+});
 </script>
 
 <template>
     <Card
         as="article"
-        padding="p-6 sm:p-8"
-        class="md:flex-row md:items-start md:gap-8"
+        layout="horizontal"
+        :image-src="
+            user.profile_photo_url && !imageError
+                ? user.profile_photo_url
+                : undefined
+        "
+        :image-alt="displayName"
+        padding="p-6 sm:p-7"
     >
-        <div class="flex shrink-0 flex-col items-center gap-4">
+        <template v-if="!user.profile_photo_url || imageError" #image>
+            <div
+                class="flex h-full w-full items-center justify-center bg-neutral-900 text-2xl font-bold text-neutral-400 sm:text-3xl"
+            >
+                {{ displayName.charAt(0) }}
+            </div>
+        </template>
+
+        <template #header>
+            <h3 class="text-xl font-bold tracking-tight text-white sm:text-2xl">
+                {{ displayName }}
+            </h3>
+
             <div
-                class="relative h-32 w-32 overflow-hidden rounded-2xl bg-neutral-900 ring-1 ring-white/10 sm:h-40 sm:w-40"
+                v-if="user.usertype?.title || user.usertype?.organization"
+                class="mt-1 flex flex-wrap items-center justify-center gap-x-2 gap-y-0.5 text-xs font-medium text-neutral-400 sm:justify-start sm:text-sm"
             >
-                <img
-                    v-if="user.profile_photo_url && !imageError"
-                    :src="user.profile_photo_url"
-                    :alt="user.usertype?.display_name ?? user.name"
-                    class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
-                    @error="imageError = true"
-                />
-                <div
-                    v-else
-                    class="flex h-full w-full items-center justify-center bg-neutral-900 text-2xl font-bold text-neutral-400 sm:text-3xl"
+                <span v-if="user.usertype?.title" class="text-neutral-300">
+                    {{ user.usertype.title }}
+                </span>
+                <span
+                    v-if="user.usertype?.title && user.usertype?.organization"
+                    class="text-neutral-600"
+                >
+                    ·
+                </span>
+                <span
+                    v-if="user.usertype?.organization"
+                    class="text-neutral-400"
                 >
-                    {{ (user.usertype?.display_name ?? user.name).charAt(0) }}
-                </div>
+                    {{ user.usertype.organization }}
+                </span>
             </div>
+        </template>
 
+        <template
+            v-if="user.usertype?.description_html || user.usertype?.description"
+            #default
+        >
             <div
-                v-if="socialLinks.length > 0"
-                class="flex flex-wrap items-center justify-center gap-1.5"
+                v-if="user.usertype?.description_html"
+                class="prose prose-invert prose-p:leading-relaxed prose-sm max-w-none text-left text-xs leading-relaxed text-neutral-300 sm:text-sm"
+                v-html="user.usertype?.description_html"
+            />
+            <p
+                v-else-if="user.usertype?.description"
+                class="text-left text-xs leading-relaxed text-neutral-300 sm:text-sm"
+            >
+                {{ user.usertype.description }}
+            </p>
+        </template>
+
+        <template v-if="socialLinks.length > 0" #footer>
+            <div
+                class="flex flex-wrap items-center justify-center gap-1.5 sm:justify-start"
             >
                 <a
                     v-for="item in socialLinks"
@@ -110,48 +153,12 @@ const socialLinks = computed(() => {
                     :href="item.url"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="flex h-7 w-7 items-center justify-center rounded-full text-neutral-400 transition-all hover:bg-white/10 hover:text-white"
+                    class="flex h-7 w-7 items-center justify-center rounded-xl bg-white/4 text-neutral-400 ring-1 ring-white/6 transition-all duration-200 hover:bg-white/10 hover:text-white hover:ring-white/15"
                     :aria-label="item.label"
                 >
-                    <SocialIcon :platform="item.platform" :size="16" />
+                    <SocialIcon :platform="item.platform" :size="15" />
                 </a>
             </div>
-        </div>
-
-        <div class="flex min-w-0 flex-1 flex-col text-center md:text-left">
-            <div class="space-y-1">
-                <h3
-                    class="text-xl font-bold tracking-tight text-white sm:text-2xl"
-                >
-                    {{ user.usertype?.display_name ?? user.name }}
-                </h3>
-                <p
-                    v-if="user.usertype?.title || user.usertype?.organization"
-                    class="text-xs font-medium text-neutral-400 sm:text-sm"
-                >
-                    <span v-if="user.usertype?.title">{{
-                        user.usertype.title
-                    }}</span>
-                    <span
-                        v-if="
-                            user.usertype?.title && user.usertype?.organization
-                        "
-                    >
-                        ·
-                    </span>
-                    <span
-                        v-if="user.usertype?.organization"
-                        class="text-neutral-300"
-                        >{{ user.usertype.organization }}</span
-                    >
-                </p>
-            </div>
-
-            <div
-                v-if="user.usertype?.description_html"
-                class="prose prose-invert mt-4 max-w-none text-justify text-xs leading-relaxed text-neutral-300 sm:text-sm"
-                v-html="user.usertype?.description_html"
-            />
-        </div>
+        </template>
     </Card>
 </template>
diff --git a/resources/js/Components/UI/Card.vue b/resources/js/Components/UI/Card.vue
index 8243cb6a..227dcbe3 100644
--- a/resources/js/Components/UI/Card.vue
+++ b/resources/js/Components/UI/Card.vue
@@ -6,6 +6,7 @@ interface Props {
     imageAlt?: string;
     imageAspectRatio?: string;
     imageFit?: "object-cover" | "object-contain" | "object-fill" | string;
+    imageClass?: string;
     padding?: string;
     hasOverlay?: boolean;
     layout?: "vertical" | "horizontal" | "responsive";
@@ -18,6 +19,7 @@ withDefaults(defineProps<Props>(), {
     imageAlt: "",
     imageAspectRatio: "aspect-square",
     imageFit: "object-cover",
+    imageClass: undefined,
     padding: undefined,
     hasOverlay: true,
     layout: "vertical",
@@ -35,19 +37,25 @@ withDefaults(defineProps<Props>(), {
             layout === 'responsive'
                 ? 'grid grid-cols-[auto_1fr] items-center gap-x-3.5 gap-y-1 p-3.5 sm:flex sm:flex-col sm:justify-between sm:gap-0 sm:p-5'
                 : layout === 'horizontal'
-                  ? 'grid grid-cols-[auto_1fr] items-center gap-x-3.5 gap-y-1 p-3.5'
+                  ? [
+                        'flex flex-col items-center gap-6 sm:flex-row sm:items-start',
+                        padding || 'p-6 sm:p-7',
+                    ]
                   : ['flex flex-col justify-between', padding || 'p-4 sm:p-5'],
         ]"
     >
         <div
             v-if="imageSrc || $slots.image"
             :class="[
-                'relative overflow-hidden rounded-2xl bg-neutral-900 ring-1 ring-white/10',
+                'relative shrink-0 overflow-hidden rounded-2xl bg-neutral-900 ring-1 ring-white/10',
                 layout === 'responsive'
                     ? 'row-span-2 aspect-square h-20 w-20 shrink-0 min-[400px]:h-22 min-[400px]:w-22 sm:row-span-1 sm:aspect-square sm:h-auto sm:w-full'
                     : layout === 'horizontal'
-                      ? 'row-span-2 aspect-square h-20 w-20 shrink-0 min-[400px]:h-22 min-[400px]:w-22'
-                      : ['w-full', imageAspectRatio],
+                      ? [
+                            imageClass ||
+                                'aspect-square h-28 w-28 sm:h-36 sm:w-36',
+                        ]
+                      : ['w-full', imageAspectRatio, imageClass],
             ]"
         >
             <slot name="image">
@@ -68,49 +76,70 @@ withDefaults(defineProps<Props>(), {
             <slot name="image-overlay" />
         </div>
 
-        <header
-            v-if="$slots.header"
-            :class="[
-                'min-w-0',
-                layout === 'responsive'
-                    ? 'mt-0 sm:mt-4 w-full'
-                    : layout === 'horizontal'
-                      ? 'mt-0'
-                      : { 'mt-4': imageSrc || $slots.image },
-            ]"
-        >
-            <slot name="header" />
-        </header>
-
+        <!-- Horizontal layout: wrap header, default slot and footer in a flex-1 column -->
         <div
-            v-if="$slots.default"
-            :class="[
-                'min-w-0',
-                layout === 'responsive'
-                    ? 'mt-1 sm:mt-3 sm:flex-1'
-                    : layout === 'horizontal'
-                      ? 'mt-1'
-                      : {
-                            'mt-3': $slots.header || imageSrc || $slots.image,
-                            'flex-1': true,
-                        },
-            ]"
+            v-if="
+                layout === 'horizontal' &&
+                ($slots.header || $slots.default || $slots.footer)
+            "
+            class="flex min-w-0 flex-1 flex-col justify-between self-stretch text-center sm:text-left"
         >
-            <slot />
+            <header v-if="$slots.header" class="min-w-0">
+                <slot name="header" />
+            </header>
+
+            <div v-if="$slots.default" class="mt-3 min-w-0 flex-1">
+                <slot />
+            </div>
+
+            <footer
+                v-if="$slots.footer"
+                class="mt-4 flex min-h-9 min-w-0 items-center justify-center gap-2 border-t border-white/5 pt-3 sm:justify-start"
+            >
+                <slot name="footer" />
+            </footer>
         </div>
 
-        <footer
-            v-if="$slots.footer"
-            :class="[
-                'flex min-w-0 items-center justify-between',
-                layout === 'responsive'
-                    ? 'mt-1 sm:mt-4 sm:min-h-9 sm:pt-3 w-full'
-                    : layout === 'horizontal'
-                      ? 'mt-1'
-                      : 'mt-4 min-h-9 pt-3',
-            ]"
-        >
-            <slot name="footer" />
-        </footer>
+        <!-- Other layouts (vertical, responsive) -->
+        <template v-else-if="layout !== 'horizontal'">
+            <header
+                v-if="$slots.header"
+                :class="[
+                    'min-w-0',
+                    layout === 'responsive'
+                        ? 'mt-0 w-full sm:mt-4'
+                        : { 'mt-4': imageSrc || $slots.image },
+                ]"
+            >
+                <slot name="header" />
+            </header>
+
+            <div
+                v-if="$slots.default"
+                :class="[
+                    'min-w-0',
+                    layout === 'responsive'
+                        ? 'mt-1 sm:mt-3 sm:flex-1'
+                        : {
+                              'mt-3': $slots.header || imageSrc || $slots.image,
+                              'flex-1': true,
+                          },
+                ]"
+            >
+                <slot />
+            </div>
+
+            <footer
+                v-if="$slots.footer"
+                :class="[
+                    'flex min-w-0 items-center justify-between',
+                    layout === 'responsive'
+                        ? 'mt-1 w-full sm:mt-4 sm:min-h-9 sm:pt-3'
+                        : 'mt-4 min-h-9 pt-3',
+                ]"
+            >
+                <slot name="footer" />
+            </footer>
+        </template>
     </component>
 </template>
diff --git a/resources/js/Pages/Event.vue b/resources/js/Pages/Event.vue
index e742b4b6..2a16024e 100644
--- a/resources/js/Pages/Event.vue
+++ b/resources/js/Pages/Event.vue
@@ -8,10 +8,12 @@ import { type User, isSpeaker, isCompany, isAdmin } from "@/Types/User";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import SpeakerInfo from "@/Components/Event/SpeakerInfo.vue";
 import Sponsor from "@/Components/Home/Sponsor.vue";
+import Card from "@/Components/UI/Card.vue";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
 import PillSelector, {
     type PillOption,
 } from "@/Components/UI/PillSelector.vue";
-import { ExternalLink, QrCode } from "@lucide/vue";
+import { ArrowUp, ArrowDown, QrCode } from "@lucide/vue";
 
 interface Props {
     event: Event;
@@ -33,54 +35,117 @@ const event = computed(() => props.event);
 const speakers = computed(() => event.value.users?.filter(isSpeaker) ?? []);
 const companies = computed(() => event.value.users?.filter(isCompany) ?? []);
 
-const formatDateTime = (
-    dayDate?: string | Date,
-    startStr?: string,
-    endStr?: string,
-): string => {
-    let datePart = "";
-    if (dayDate) {
-        try {
-            const d = dayDate instanceof Date ? dayDate : new Date(dayDate);
-            datePart = d.toLocaleDateString("pt-PT", {
-                day: "numeric",
+const formatMilestoneDate = (dayDate?: string | Date, timeStr?: string) => {
+    if (!dayDate || !timeStr) return null;
+    try {
+        const d = dayDate instanceof Date ? dayDate : new Date(dayDate);
+        if (isNaN(d.getTime())) return null;
+        const day = d.getDate();
+        const m = d
+            .toLocaleDateString("pt-PT", {
                 month: "short",
                 timeZone: "Europe/Lisbon",
-            });
-        } catch {
-            datePart = String(dayDate);
-        }
+            })
+            .replace(".", "");
+        const month = m.charAt(0).toUpperCase() + m.slice(1);
+
+        const isoTime = timeStr.includes("T")
+            ? timeStr
+            : `1970-01-01T${timeStr}.000000Z`;
+        const timeObj = new Date(isoTime);
+        const time = isNaN(timeObj.getTime())
+            ? timeStr.slice(0, 5)
+            : timeObj.toLocaleTimeString("pt-PT", {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  timeZone: "Europe/Lisbon",
+              });
+
+        return {
+            dateText: `${day} ${month}`,
+            timeText: time,
+        };
+    } catch {
+        return null;
     }
+};
 
-    const formatTimeOnly = (t?: string): string => {
-        if (!t) return "";
-        const isoString = t.includes("T") ? t : `1970-01-01T${t}.000000Z`;
-        try {
-            const d = new Date(isoString);
-            return d.toLocaleTimeString("pt-PT", {
-                hour: "2-digit",
-                minute: "2-digit",
-                timeZone: "Europe/Lisbon",
-            });
-        } catch {
-            return t.slice(0, 5);
-        }
-    };
+const formattedSchedule = computed(() => {
+    const start = formatMilestoneDate(
+        props.event.event_day?.date,
+        props.event.time_start,
+    );
+    const end = formatMilestoneDate(
+        props.event.event_day?.date,
+        props.event.time_end,
+    );
+
+    if (!start) return "";
+    if (!end) return `${start.dateText}, ${start.timeText}`;
+    return `${start.dateText}, ${start.timeText} — ${end.timeText}`;
+});
+
+const eventCategoryLabel = computed(() => {
+    const typeName = props.event.type?.name?.toLowerCase();
+    if (typeName === "talk" || typeName === "palestra") return "Palestra";
+    if (typeName === "workshop") return "Workshop";
+    if (typeName === "pitch") return "Pitch";
+    if (typeName) {
+        return typeName.charAt(0).toUpperCase() + typeName.slice(1);
+    }
+    return "Atividade";
+});
+
+const eventTypeColorClass = computed(() => {
+    const typeName = props.event.type?.name?.toLowerCase();
+    if (typeName === "talk" || typeName === "palestra") return "text-sky-400";
+    if (typeName === "workshop") return "text-purple-400";
+    return "text-amber-400";
+});
 
-    const startTime = formatTimeOnly(startStr);
-    const endTime = formatTimeOnly(endStr);
+const isEventFull = computed(() => {
+    return Boolean(
+        props.event.capacity &&
+        props.enrollmentCount >= props.event.capacity &&
+        !props.hasJoined,
+    );
+});
 
-    if (datePart && startTime && endTime) {
-        return `${datePart}, ${startTime} - ${endTime}`;
+const cardTitle = computed(() => {
+    if (props.hasJoined) return "Inscrição Confirmada";
+    if (isEventFull.value) return "Vagas Esgotadas";
+    if (!props.isEnrolled) return "Participa no Evento";
+    if (
+        props.canJoin &&
+        (props.event.external_url || props.event.enroll_in_site)
+    ) {
+        return "Inscrições Abertas";
     }
-    if (datePart && startTime) {
-        return `${datePart}, ${startTime}`;
+    return "Entrada Livre";
+});
+
+const cardDescription = computed(() => {
+    if (props.hasJoined) {
+        return "O teu lugar neste evento está garantido. Vemo-nos lá!";
     }
-    if (startTime && endTime) {
-        return `${startTime} - ${endTime}`;
+    if (isEventFull.value) {
+        return "Este evento atingiu a lotação máxima disponível.";
     }
-    return datePart || startTime || "";
-};
+    if (!props.isEnrolled) {
+        return "A participação é gratuita para todos os inscritos na SINF 2026. Inscreve-te na conferência para teres acesso.";
+    }
+    if (props.canJoin && props.event.external_url) {
+        return "As inscrições para este evento são realizadas através do formulário oficial.";
+    }
+    if (props.canJoin && props.event.enroll_in_site) {
+        if (props.event.capacity) {
+            const remaining = props.event.capacity - props.enrollmentCount;
+            return `Ainda restam ${remaining} ${remaining === 1 ? "vaga disponível" : "vagas disponíveis"}. Garante o teu lugar.`;
+        }
+        return "As inscrições estão abertas para participantes da SINF 2026.";
+    }
+    return "Esta sessão tem acesso livre para todos os participantes inscritos na SINF 2026. Basta compareceres no local.";
+});
 
 const handleJoinEvent = () => {
     router.put(route("event.join", { event: event.value.id }));
@@ -151,6 +216,19 @@ const eventTabItems = computed<PillOption[]>(() => {
     }));
 });
 
+const scanCodeTabItems = computed<PillOption[]>(() => [
+    {
+        id: "scan-code",
+        label: "Digitalizar QR Code",
+        icon: QrCode,
+        href: route("user.scan-code", {
+            _query: {
+                event: event.value.id,
+            },
+        }),
+    },
+]);
+
 const isAtBottom = ref(false);
 
 function updateScrollState() {
@@ -211,259 +289,161 @@ onBeforeUnmount(() => {
             :aria-label="
                 isAtBottom ? 'Scroll to top' : 'Scroll to next section'
             "
-            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
+            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 cursor-pointer justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
             @click="handleQuickScroll"
         >
-            <svg
-                v-if="isAtBottom"
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M5 10l7-7m0 0l7 7m-7-7v18"
-                />
-            </svg>
-            <svg
-                v-else
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M19 14l-7 7m0 0l-7-7m7 7V3"
-                />
-            </svg>
+            <ArrowUp v-if="isAtBottom" :size="16" />
+            <ArrowDown v-else :size="16" />
         </button>
 
         <div
-            class="relative mx-auto w-full max-w-7xl space-y-12 px-4 py-16 sm:space-y-16 sm:px-6 lg:px-8"
+            class="relative mx-auto w-full max-w-7xl space-y-12 px-4 pt-4 pb-12 sm:space-y-16 sm:px-6 sm:pb-16 lg:px-8 lg:pt-8"
         >
-            <header class="flex flex-col items-center gap-6 text-center">
-                <div class="space-y-3">
-                    <h1
-                        class="text-3xl font-bold tracking-tight text-white sm:text-4xl md:text-5xl"
-                    >
-                        {{ event.name }}
-                    </h1>
-                    <p
-                        v-if="event.topic"
-                        class="text-base font-medium text-neutral-300 sm:text-lg md:text-xl"
-                    >
-                        {{ event.topic }}
-                    </p>
-                </div>
-
+            <header class="relative overflow-hidden pt-2 pb-6 sm:pt-4 sm:pb-10">
                 <div
-                    class="mt-2 flex w-full flex-col gap-6 rounded-3xl border border-white/8 bg-black/50 p-6 text-left shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md sm:p-8"
+                    class="relative grid grid-cols-1 items-start gap-10 lg:grid-cols-12 lg:gap-12"
                 >
                     <div
-                        v-if="
-                            event.time_start || event.location || event.capacity
-                        "
-                        class="flex flex-wrap items-center gap-4 text-xs text-neutral-400 sm:gap-6 sm:text-sm"
+                        class="flex flex-col items-start text-left lg:col-span-7 xl:col-span-8"
                     >
                         <div
-                            v-if="event.time_start"
-                            class="flex items-center gap-2"
+                            class="flex flex-wrap items-center gap-x-2.5 gap-y-1.5 text-xs font-semibold tracking-wider uppercase"
                         >
-                            <svg
-                                class="h-4 w-4 text-neutral-400"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                                />
-                            </svg>
-                            <span class="font-medium text-neutral-300">
-                                {{
-                                    formatDateTime(
-                                        event.event_day?.date,
-                                        event.time_start,
-                                        event.time_end,
-                                    )
-                                }}
-                            </span>
-                        </div>
-
-                        <div
-                            v-if="event.location"
-                            class="flex items-center gap-2"
-                        >
-                            <svg
-                                class="h-4 w-4 text-neutral-400"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-                                />
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-                                />
-                            </svg>
-                            <span class="font-medium text-neutral-300">
-                                {{ event.location }}
-                            </span>
-                        </div>
+                            <span :class="eventTypeColorClass">{{
+                                eventCategoryLabel
+                            }}</span>
+
+                            <template v-if="formattedSchedule">
+                                <span class="text-neutral-600">·</span>
+                                <span class="text-neutral-300">
+                                    {{ formattedSchedule }}
+                                </span>
+                            </template>
 
-                        <div
-                            v-if="event.capacity"
-                            class="flex items-center gap-2"
-                        >
-                            <svg
-                                class="h-4 w-4 text-neutral-400"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                stroke="currentColor"
-                            >
-                                <path
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                    stroke-width="2"
-                                    d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-                                />
-                            </svg>
-                            <span class="font-medium text-neutral-300">
-                                {{ event.capacity }} vagas
-                            </span>
+                            <template v-if="event.location">
+                                <span class="text-neutral-600">·</span>
+                                <span class="text-neutral-400">
+                                    {{ event.location }}
+                                </span>
+                            </template>
                         </div>
-                    </div>
-
-                    <div
-                        v-if="event.description_html"
-                        class="prose prose-invert prose-headings:text-white prose-a:text-sinf-secondary-light hover:prose-a:text-white prose-strong:text-white max-w-none text-justify text-base leading-relaxed text-neutral-300 sm:text-lg"
-                        v-html="event.description_html"
-                    />
-                    <p
-                        v-else-if="event.description"
-                        class="text-justify text-base leading-relaxed text-neutral-300 sm:text-lg"
-                    >
-                        {{ event.description }}
-                    </p>
 
-                    <div
-                        v-if="isParticipant"
-                        class="border-t border-white/8 pt-6"
-                    >
-                        <div
-                            v-if="hasJoined"
-                            class="flex flex-col items-center justify-between gap-4 sm:flex-row"
+                        <h1
+                            class="mt-4 text-3xl leading-[1.1] font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl"
                         >
-                            <div class="flex items-center gap-2">
-                                <span class="text-xs font-semibold sm:text-sm">
-                                    Inscrição confirmada! Vemo-nos lá.
-                                </span>
-                            </div>
-
-                            <button
-                                type="button"
-                                class="pill-container pill-item shrink-0 cursor-pointer border-red-500/20 bg-red-500/10 px-5 py-2 text-xs font-semibold text-red-300 transition-all hover:bg-red-500/20 active:scale-95 sm:text-sm"
-                                @click="handleLeaveEvent"
-                            >
-                                Cancelar Inscrição
-                            </button>
-                        </div>
+                            {{ event.name }}
+                        </h1>
 
                         <div
-                            v-else-if="!isEnrolled"
-                            class="flex flex-col items-center justify-between gap-4 sm:flex-row"
+                            v-if="event.topic"
+                            class="relative mt-4 flex items-start gap-3"
                         >
                             <p
-                                class="text-center text-xs text-neutral-400 sm:text-left sm:text-sm"
+                                class="text-base leading-snug font-medium text-neutral-200 sm:text-lg lg:text-xl"
                             >
-                                Precisas de estar inscrito na SINF 2026 para
-                                participar.
+                                {{ event.topic }}
                             </p>
-                            <button
-                                type="button"
-                                class="pill-container pill-item bg-sinf-primary/80 hover:bg-sinf-primary shrink-0 cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
-                                @click="handleEnrollSinf"
-                            >
-                                Inscrever-me na SINF
-                            </button>
                         </div>
 
                         <div
-                            v-else-if="canJoin && event.external_url"
-                            class="flex flex-col items-center justify-between gap-4 sm:flex-row"
+                            v-if="event.description_html"
+                            class="prose prose-invert prose-headings:text-white prose-p:leading-relaxed prose-a:text-sinf-secondary-light hover:prose-a:text-white prose-strong:text-white mt-6 max-w-2xl text-left text-sm leading-relaxed font-normal text-neutral-400 sm:text-base"
+                            v-html="event.description_html"
+                        />
+                        <p
+                            v-else-if="event.description"
+                            class="mt-6 max-w-2xl text-left text-sm leading-relaxed font-normal text-neutral-400 sm:text-base"
                         >
-                            <p
-                                class="text-center text-xs text-neutral-400 sm:text-left sm:text-sm"
-                            >
-                                As inscrições são realizadas através do
-                                formulário oficial.
-                            </p>
-                            <a
-                                :href="event.external_url"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                class="pill-container pill-item bg-sinf-secondary/80 hover:bg-sinf-secondary shrink-0 cursor-pointer gap-2 px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
-                            >
-                                <span>Inscrever-me</span>
-                                <ExternalLink :size="16" />
-                            </a>
-                        </div>
+                            {{ event.description }}
+                        </p>
+                    </div>
 
-                        <div
-                            v-else-if="canJoin && event.enroll_in_site"
-                            class="flex flex-col items-center justify-between gap-4 sm:flex-row"
+                    <div class="relative w-full lg:col-span-5 xl:col-span-4">
+                        <Card
+                            as="div"
+                            :interactive="false"
+                            padding="p-6 sm:p-7"
+                            class="w-full"
                         >
-                            <p
-                                class="text-center text-xs text-neutral-400 sm:text-left sm:text-sm"
+                            <h2
+                                class="text-xl font-bold tracking-tight text-white sm:text-2xl"
                             >
-                                <span v-if="event.capacity">
-                                    Ainda restam
-                                    {{ event.capacity - enrollmentCount }} vagas
-                                    disponíveis.
-                                </span>
-                                <span v-else>
-                                    As inscrições estão abertas para
-                                    participantes da SINF 2026.
-                                </span>
-                            </p>
-                            <button
-                                type="button"
-                                class="pill-container pill-item bg-sinf-secondary/80 hover:bg-sinf-secondary shrink-0 cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95 sm:text-sm"
-                                @click="handleJoinEvent"
-                            >
-                                Inscrever-me no Evento
-                            </button>
-                        </div>
+                                {{ cardTitle }}
+                            </h2>
 
-                        <div
-                            v-else-if="
-                                event.capacity &&
-                                enrollmentCount >= event.capacity
-                            "
-                            class="text-center sm:text-left"
-                        >
                             <p
-                                class="text-xs font-semibold text-red-400 sm:text-sm"
+                                class="mt-2 text-xs leading-relaxed text-neutral-400 sm:text-sm"
                             >
-                                Este evento está atualmente esgotado.
+                                {{ cardDescription }}
                             </p>
-                        </div>
+
+                            <div class="mt-6">
+                                <PrimaryButton
+                                    v-if="hasJoined"
+                                    color="danger"
+                                    class="w-full"
+                                    padding="px-6 py-2.5"
+                                    @click="handleLeaveEvent"
+                                >
+                                    <span>Cancelar Inscrição</span>
+                                </PrimaryButton>
+
+                                <PrimaryButton
+                                    v-else-if="isEventFull"
+                                    disabled
+                                    color="pill"
+                                    class="w-full"
+                                    padding="px-6 py-2.5"
+                                >
+                                    <span>Vagas Esgotadas</span>
+                                </PrimaryButton>
+
+                                <PrimaryButton
+                                    v-else-if="!isEnrolled"
+                                    type="button"
+                                    color="pill"
+                                    class="w-full"
+                                    padding="px-6 py-2.5"
+                                    @click="handleEnrollSinf"
+                                >
+                                    <span>Inscrever-me na SINF</span>
+                                </PrimaryButton>
+
+                                <PrimaryButton
+                                    v-else-if="canJoin && event.external_url"
+                                    :href="event.external_url"
+                                    external
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    color="pill"
+                                    class="w-full"
+                                    padding="px-6 py-2.5"
+                                >
+                                    <span>Inscrever-me</span>
+                                </PrimaryButton>
+
+                                <PrimaryButton
+                                    v-else-if="canJoin && event.enroll_in_site"
+                                    type="button"
+                                    color="pill"
+                                    class="w-full"
+                                    padding="px-6 py-2.5"
+                                    @click="handleJoinEvent"
+                                >
+                                    <span>Inscrever-me no Evento</span>
+                                </PrimaryButton>
+
+                                <PrimaryButton
+                                    v-else-if="isEnrolled"
+                                    disabled
+                                    color="pill"
+                                    class="w-full"
+                                    padding="px-6 py-2.5"
+                                >
+                                    <span>Acesso Garantido</span>
+                                </PrimaryButton>
+                            </div>
+                        </Card>
                     </div>
                 </div>
             </header>
@@ -481,24 +461,21 @@ onBeforeUnmount(() => {
 
                 <PillSelector
                     v-if="isAdmin(authUser) || isStaff"
-                    :items="[
-                        {
-                            id: 'scan-code',
-                            label: 'Digitalizar QR Code',
-                            icon: QrCode,
-                            href: route('user.scan-code', {
-                                _query: {
-                                    event: event.id,
-                                },
-                            }),
-                        },
-                    ]"
+                    :items="scanCodeTabItems"
                     size="md"
                     :wrap="false"
                 />
             </div>
 
-            <div v-if="activeTab === 'speakers'" class="space-y-6">
+            <div
+                v-if="activeTab === 'speakers'"
+                class="w-full"
+                :class="[
+                    speakers.length === 1
+                        ? 'mx-auto max-w-3xl'
+                        : 'grid grid-cols-1 gap-6 lg:grid-cols-2',
+                ]"
+            >
                 <SpeakerInfo
                     v-for="speaker in speakers"
                     :key="speaker.id"
@@ -565,23 +542,21 @@ onBeforeUnmount(() => {
                                 </div>
                             </div>
 
-                            <div class="shrink-0">
-                                <span
-                                    class="pill-container border-emerald-500/20 bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-400 shadow-none"
-                                >
-                                    Inscrito
-                                </span>
-                            </div>
+                            <span
+                                class="shrink-0 text-xs font-medium text-neutral-500"
+                            >
+                                Inscrito
+                            </span>
                         </div>
                     </div>
                 </div>
 
                 <div
                     v-else
-                    class="flex flex-col items-center justify-center py-16 text-center"
+                    class="flex flex-col items-center justify-center py-12 text-center"
                 >
-                    <p class="text-xs text-neutral-500 sm:text-sm">
-                        Ainda nenhum participante se inscreveu neste evento.
+                    <p class="text-sm text-neutral-400">
+                        Ainda não existem participantes inscritos neste evento.
                     </p>
                 </div>
             </div>
diff --git a/resources/js/Pages/Profile/ScanCode.vue b/resources/js/Pages/Profile/ScanCode.vue
index 18f24c58..fdb0c595 100644
--- a/resources/js/Pages/Profile/ScanCode.vue
+++ b/resources/js/Pages/Profile/ScanCode.vue
@@ -313,11 +313,6 @@ onMounted(() => {
                             class="flex items-center justify-between rounded-2xl border border-white/10 bg-white/5 p-3.5"
                         >
                             <div class="flex items-center gap-3 truncate">
-                                <div
-                                    class="bg-sinf-primary/30 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl text-white"
-                                >
-                                    <Check :size="16" />
-                                </div>
                                 <div class="truncate">
                                     <p
                                         class="truncate text-sm font-semibold text-white"
@@ -332,11 +327,6 @@ onMounted(() => {
                                     </span>
                                 </div>
                             </div>
-                            <span
-                                class="shrink-0 rounded-full border border-emerald-500/30 bg-emerald-500/15 px-2.5 py-0.5 text-[11px] font-medium text-emerald-300"
-                            >
-                                Selecionada
-                            </span>
                         </div>
                     </div>
 

From 422debcc34292c9a4cc55e2bfd252436539b2d05 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Mon, 7 Sep 2026 20:01:53 +0100
Subject: [PATCH 24/33] fix: shop page layout

---
 app/Http/Controllers/ShopController.php   |   8 +-
 resources/js/Components/Shop/ShopItem.vue | 406 ++++++++++++++--------
 resources/js/Pages/Shop.vue               | 301 ++++++++++++++--
 resources/js/Types/ShopPage.ts            |   1 +
 4 files changed, 542 insertions(+), 174 deletions(-)

diff --git a/app/Http/Controllers/ShopController.php b/app/Http/Controllers/ShopController.php
index 99b6ca3a..26f7797c 100644
--- a/app/Http/Controllers/ShopController.php
+++ b/app/Http/Controllers/ShopController.php
@@ -17,6 +17,7 @@ public function show(Request $request)
     {
         $edition = $request->input('edition');
         $user = $request->user();
+        $boughtProductIds = [];
 
         if ($user && $user->isParticipant()) {
             $isParticipant = $user->isParticipant();
@@ -25,13 +26,18 @@ public function show(Request $request)
             // This makes one less query to the DB ☝️🤓
             $isEnrolled = $enrollment !== null;
             $points = $enrollment?->points;
+
+            if ($enrollment) {
+                $boughtProductIds = $enrollment->products()->pluck('products.id')->all();
+            }
         }
 
         if ($edition === null) {
             return response('No edition found', 500);
         }
 
-        $products = $edition->products()->reorder('price', 'desc')->get()->each(function (Product $product) use ($user) {
+        $products = $edition->products()->reorder('price', 'desc')->get()->each(function (Product $product) use ($user, $boughtProductIds) {
+            $product->alreadyBought = in_array($product->id, $boughtProductIds);
             $product->canBeBought =
                 $product->stock <= 0
                     ? false
diff --git a/resources/js/Components/Shop/ShopItem.vue b/resources/js/Components/Shop/ShopItem.vue
index f11440ee..8da98fbe 100644
--- a/resources/js/Components/Shop/ShopItem.vue
+++ b/resources/js/Components/Shop/ShopItem.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
 import Modal from "@/Components/UI/Modal.vue";
-import { router } from "@inertiajs/vue3";
+import { router, usePage } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import type { BuyableProduct } from "@/Types/ShopPage";
+import type { User } from "@/Types/User";
 import Card from "@/Components/UI/Card.vue";
 import PillSelector, {
     type PillOption,
 } from "@/Components/UI/PillSelector.vue";
-import { ShoppingBag } from "@lucide/vue";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+import { ShoppingBag, Check, Search, Package, Sparkles } from "@lucide/vue";
 
 interface Props {
     product: BuyableProduct;
@@ -18,6 +20,9 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+const page = usePage();
+const user = computed(() => page.props.auth?.user as User | undefined);
+
 const modalOpen = ref(false);
 const isBuying = ref(false);
 const isRedeemingId = ref<number | null>(null);
@@ -25,6 +30,7 @@ const deliverySearch = ref("");
 
 const product = computed(() => props.product);
 const isOutOfStock = computed(() => (product.value.stock ?? 0) <= 0);
+const isAlreadyBought = computed(() => Boolean(product.value.alreadyBought));
 const hasEnrollments = computed(
     () =>
         product.value.enrollments !== null &&
@@ -60,7 +66,7 @@ type ModalTab = "buy" | "deliveries";
 const activeTab = ref<ModalTab>("buy");
 
 const shopTabs = computed<PillOption[]>(() => [
-    { id: "buy", label: "Comprar" },
+    { id: "buy", label: "Comprar Artigo" },
     {
         id: "deliveries",
         label: "Entregas",
@@ -77,6 +83,16 @@ watch(modalOpen, (isOpen) => {
 });
 
 const buyProduct = () => {
+    if (
+        !user.value ||
+        !hasEnoughPoints.value ||
+        isBuying.value ||
+        isOutOfStock.value ||
+        isAlreadyBought.value
+    ) {
+        return;
+    }
+
     isBuying.value = true;
     router.post(
         route("shop.product.buy", { product: product.value.id }),
@@ -134,7 +150,13 @@ const redeemProduct = (enrollmentId: number) => {
             <p
                 class="mt-1 line-clamp-2 min-h-9 text-xs leading-relaxed font-light text-neutral-400"
             >
-                <span v-if="!isOutOfStock">
+                <span
+                    v-if="isAlreadyBought"
+                    class="font-medium text-emerald-400"
+                >
+                    Artigo já adquirido por ti
+                </span>
+                <span v-else-if="!isOutOfStock">
                     {{ product.stock }}
                     {{
                         product.stock === 1
@@ -161,94 +183,128 @@ const redeemProduct = (enrollmentId: number) => {
                 />
             </div>
 
-            <button
-                type="button"
-                class="pill-container pill-item cursor-pointer gap-1 px-3.5 py-1 text-xs font-semibold transition-all"
-                :class="[
-                    isOutOfStock && !hasEnrollments
-                        ? 'cursor-not-allowed text-neutral-500 opacity-40 hover:bg-transparent'
-                        : 'text-white hover:bg-white/15 active:scale-95',
-                ]"
-                :disabled="isOutOfStock && !hasEnrollments"
+            <PrimaryButton
+                v-if="user"
+                padding="px-3.5 py-1"
+                text-size="text-xs font-semibold"
+                :disabled="isOutOfStock && !hasEnrollments && !isAlreadyBought"
                 @click="modalOpen = true"
             >
-                <span v-if="hasEnrollments && isOutOfStock">Gerir</span>
+                <span v-if="isAlreadyBought">Adquirido</span>
+                <span v-else-if="hasEnrollments && isOutOfStock">Gerir</span>
                 <span v-else-if="isOutOfStock">Esgotado</span>
                 <span v-else>Comprar</span>
-            </button>
+            </PrimaryButton>
         </template>
     </Card>
 
-    <Modal v-model="modalOpen" max-width="lg">
-        <div
-            class="flex items-center gap-4 rounded-2xl border border-white/8 bg-white/5 p-3.5 pr-10 sm:p-4"
-        >
-            <div
-                class="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-neutral-900/80 p-2 ring-1 ring-white/10 sm:h-20 sm:w-20"
-            >
-                <img
-                    v-if="product.image_product_url"
-                    :src="product.image_product_url"
-                    :alt="product.name"
-                    class="max-h-full max-w-full object-contain"
-                />
-                <svg
-                    v-else
-                    class="h-7 w-7 text-neutral-600"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                >
-                    <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                        d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+    <Modal
+        v-model="modalOpen"
+        :max-width="activeTab === 'deliveries' ? 'xl' : 'lg'"
+    >
+        <!-- Modal Custom Header -->
+        <template #header>
+            <div class="space-y-4 p-6 pb-2 sm:p-7 sm:pb-2">
+                <!-- Delivery / Buy Tabs for Staff / Admin -->
+                <div v-if="hasEnrollments" class="flex justify-center">
+                    <PillSelector
+                        v-model="activeTab"
+                        :items="shopTabs"
+                        size="sm"
                     />
-                </svg>
-            </div>
+                </div>
 
-            <div class="min-w-0 flex-1 space-y-1.5">
-                <h3 class="truncate text-base font-bold text-white sm:text-lg">
-                    {{ product.name }}
-                </h3>
-                <div class="flex flex-wrap items-center gap-2">
+                <!-- Product Card Summary inside Modal -->
+                <div
+                    class="flex items-center gap-4 rounded-2xl border border-white/10 bg-white/4 p-3.5 sm:p-4"
+                >
                     <div
-                        class="pill-container gap-1 px-2.5 py-0.5 text-xs text-white shadow-none"
+                        class="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-neutral-900/90 p-2 ring-1 ring-white/10 sm:h-20 sm:w-20"
                     >
-                        <span class="font-bold">{{ product.price }}</span>
                         <img
-                            class="h-3.5 w-3.5 object-contain"
-                            alt="SINFrão"
-                            src="/images/sinf-2026-sm.svg"
+                            v-if="product.image_product_url"
+                            :src="product.image_product_url"
+                            :alt="product.name"
+                            class="max-h-full max-w-full object-contain"
+                        />
+                        <ShoppingBag
+                            v-else
+                            class="h-8 w-8 text-neutral-600 opacity-40"
                         />
                     </div>
-                    <span
-                        v-if="isOutOfStock"
-                        class="rounded-full bg-red-500/15 px-2.5 py-0.5 text-[11px] text-red-400 ring-1 ring-red-500/20"
-                    >
-                        Esgotado
-                    </span>
-                    <span v-else class="text-xs text-neutral-400">
-                        {{ product.stock }} disponíveis
-                    </span>
+
+                    <div class="min-w-0 flex-1 space-y-1.5">
+                        <h3
+                            class="truncate text-base font-bold tracking-tight text-white sm:text-lg"
+                        >
+                            {{ product.name }}
+                        </h3>
+
+                        <div class="flex flex-wrap items-center gap-2">
+                            <div
+                                class="pill-container gap-1 px-2.5 py-0.5 text-xs text-white shadow-none"
+                            >
+                                <span class="font-bold">{{
+                                    product.price
+                                }}</span>
+                                <img
+                                    class="h-3.5 w-3.5 object-contain"
+                                    alt="SINFrão"
+                                    src="/images/sinf-2026-sm.svg"
+                                />
+                            </div>
+
+                            <span
+                                v-if="isAlreadyBought"
+                                class="inline-flex items-center gap-1 rounded-full bg-emerald-500/15 px-2.5 py-0.5 text-[11px] font-semibold text-emerald-400 ring-1 ring-emerald-500/25"
+                            >
+                                <Check :size="12" />
+                                Já Adquirido
+                            </span>
+                            <span
+                                v-else-if="isOutOfStock"
+                                class="rounded-full bg-red-500/15 px-2.5 py-0.5 text-[11px] font-semibold text-red-400 ring-1 ring-red-500/25"
+                            >
+                                Esgotado
+                            </span>
+                            <span
+                                v-else
+                                class="rounded-full bg-white/5 px-2.5 py-0.5 text-xs text-neutral-400 ring-1 ring-white/10"
+                            >
+                                {{ product.stock }} disponíveis
+                            </span>
+                        </div>
+                    </div>
                 </div>
             </div>
-        </div>
-
-        <div v-if="hasEnrollments" class="-my-2 flex justify-center">
-            <PillSelector
-                v-model="activeTab"
-                :items="shopTabs"
-                size="sm"
-                container-class="w-full sm:w-auto"
-            />
-        </div>
+        </template>
 
+        <!-- Modal Body Content -->
         <div v-if="activeTab === 'buy'" class="w-full space-y-4">
+            <!-- Already bought state -->
             <div
-                v-if="isOutOfStock"
-                class="space-y-2 rounded-2xl border border-white/8 bg-white/5 p-4 text-center"
+                v-if="isAlreadyBought"
+                class="space-y-2 rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-4 text-center"
+            >
+                <div
+                    class="flex items-center justify-center gap-2 text-emerald-400"
+                >
+                    <Check :size="18" />
+                    <span class="text-sm font-semibold"
+                        >Artigo já adquirido!</span
+                    >
+                </div>
+                <p class="text-xs leading-relaxed text-neutral-300">
+                    Já compraste este produto nesta edição da SINF 2026. Podes
+                    levantá-lo presencialmente no secretariado ou banca da
+                    organização durante o evento.
+                </p>
+            </div>
+
+            <!-- Out of stock state -->
+            <div
+                v-else-if="isOutOfStock"
+                class="space-y-2 rounded-2xl border border-white/10 bg-white/5 p-4 text-center"
             >
                 <p class="text-sm font-medium text-neutral-300">
                     Este produto está temporariamente esgotado.
@@ -259,15 +315,16 @@ const redeemProduct = (enrollmentId: number) => {
                 </p>
             </div>
 
+            <!-- Enrolled participant flow -->
             <template v-else-if="isEnrolled">
                 <div
                     v-if="points !== null && points !== undefined"
-                    class="space-y-2.5 rounded-2xl border border-white/8 bg-white/5 p-4 text-xs"
+                    class="space-y-2.5 rounded-2xl border border-white/10 bg-white/5 p-4 text-xs"
                 >
                     <div
                         class="flex items-center justify-between text-neutral-400"
                     >
-                        <span>Saldo atual</span>
+                        <span>O teu saldo atual</span>
                         <div
                             class="flex items-center gap-1 font-mono font-bold text-white"
                         >
@@ -275,11 +332,11 @@ const redeemProduct = (enrollmentId: number) => {
                             <img
                                 class="h-3 w-3 object-contain"
                                 alt="SINFrão"
-                                title="SINFrão"
                                 src="/images/sinf-2026-sm.svg"
                             />
                         </div>
                     </div>
+
                     <div
                         class="flex items-center justify-between text-neutral-400"
                     >
@@ -291,11 +348,11 @@ const redeemProduct = (enrollmentId: number) => {
                             <img
                                 class="h-3 w-3 object-contain"
                                 alt="SINFrão"
-                                title="SINFrão"
                                 src="/images/sinf-2026-sm.svg"
                             />
                         </div>
                     </div>
+
                     <div
                         class="flex items-center justify-between border-t border-white/10 pt-2 font-medium"
                     >
@@ -312,99 +369,114 @@ const redeemProduct = (enrollmentId: number) => {
                             <img
                                 class="h-3 w-3 object-contain"
                                 alt="SINFrão"
-                                title="SINFrão"
                                 src="/images/sinf-2026-sm.svg"
                             />
                         </div>
                     </div>
                 </div>
 
+                <!-- Insufficient points alert -->
                 <div
                     v-if="
                         !hasEnoughPoints &&
                         points !== undefined &&
                         points !== null
                     "
-                    class="rounded-2xl border border-red-500/20 bg-red-500/10 p-3.5 text-center text-xs text-red-300"
+                    class="space-y-1.5 rounded-2xl border border-red-500/20 bg-red-500/10 p-3.5 text-center text-xs text-red-300"
                 >
-                    Precisas de mais
-                    <span class="font-bold"
-                        >{{ product.price - points }} SINFrões</span
-                    >
-                    para efetuar esta compra.
-                </div>
-
-                <div class="flex items-center justify-end gap-3 pt-2">
-                    <button
-                        type="button"
-                        class="pill-container pill-item cursor-pointer px-5 py-2 text-xs font-medium text-neutral-400 hover:text-white"
-                        @click="modalOpen = false"
-                    >
-                        Cancelar
-                    </button>
-                    <button
-                        type="button"
-                        class="pill-container pill-item bg-sinf-primary/80 hover:bg-sinf-primary cursor-pointer px-6 py-2 text-xs font-semibold text-white transition-all active:scale-95 disabled:cursor-not-allowed disabled:opacity-40"
-                        :disabled="!hasEnoughPoints || isBuying"
-                        @click="buyProduct"
-                    >
-                        <span v-if="isBuying">A processar...</span>
-                        <span v-else>Confirmar Compra</span>
-                    </button>
+                    <p>
+                        Precisas de mais
+                        <span class="font-bold text-white">
+                            {{ product.price - points }} SINFrões
+                        </span>
+                        para efetuar esta compra.
+                    </p>
+                    <p class="text-[11px] text-red-300/80">
+                        Participa nas palestras, visita as bancas e conclui
+                        quests para acumular mais pontos!
+                    </p>
                 </div>
             </template>
 
+            <!-- Not enrolled participant / Guest flow -->
             <template v-else>
                 <div
-                    class="flex flex-col items-center justify-center space-y-4 rounded-2xl border border-white/8 bg-white/5 p-5 text-center"
+                    class="flex flex-col items-center justify-center space-y-4 rounded-2xl border border-white/10 bg-white/5 p-6 text-center"
                 >
-                    <p class="text-sm leading-relaxed text-neutral-300">
-                        Para comprares produtos na loja oficial, precisas de te
-                        inscrever na SINF 2026.
-                    </p>
-                    <button
-                        type="button"
-                        class="pill-container pill-item bg-sinf-secondary/80 hover:bg-sinf-secondary cursor-pointer px-6 py-2.5 text-xs font-semibold text-white transition-all active:scale-95"
+                    <div
+                        class="flex h-12 w-12 items-center justify-center rounded-2xl bg-white/6 text-neutral-300 ring-1 ring-white/10"
+                    >
+                        <Sparkles :size="24" />
+                    </div>
+
+                    <div class="space-y-1">
+                        <h4 class="text-sm font-semibold text-white">
+                            Inscrição Necessária
+                        </h4>
+                        <p class="text-xs leading-relaxed text-neutral-400">
+                            Para comprares produtos na loja oficial com
+                            SINFrões, precisas de te inscrever na SINF 2026.
+                        </p>
+                    </div>
+
+                    <PrimaryButton
+                        padding="px-6 py-2"
+                        text-size="text-xs"
                         @click="
-                            $page.props.auth.user
+                            $page.props.auth?.user
                                 ? router.put(route('enroll'))
                                 : router.get(route('register'))
                         "
                     >
-                        Inscrever-me
-                    </button>
+                        Inscrever-me na SINF
+                    </PrimaryButton>
                 </div>
             </template>
         </div>
 
+        <!-- Deliveries Tab for Staff / Admin -->
         <div
             v-else-if="activeTab === 'deliveries'"
-            class="flex min-h-0 w-full flex-1 flex-col space-y-3"
+            class="flex min-h-0 w-full flex-1 flex-col space-y-3.5"
         >
             <div
-                class="flex items-center justify-between text-xs text-neutral-400"
+                class="flex items-center justify-between rounded-xl border border-white/6 bg-white/3 px-3 py-2 text-xs text-neutral-400"
             >
-                <span>{{ totalDeliveriesCount }} compras registadas</span>
+                <span class="font-medium text-white">
+                    {{ totalDeliveriesCount }}
+                    {{
+                        totalDeliveriesCount === 1
+                            ? "compra registada"
+                            : "compras registadas"
+                    }}
+                </span>
                 <span
+                    class="rounded-full px-2 py-0.5 text-[11px] font-semibold"
                     :class="
                         pendingDeliveriesCount > 0
-                            ? 'font-semibold text-amber-400'
-                            : 'text-emerald-400'
+                            ? 'bg-amber-500/15 text-amber-400 ring-1 ring-amber-500/25'
+                            : 'bg-emerald-500/15 text-emerald-400 ring-1 ring-emerald-500/25'
                     "
                 >
                     {{ pendingDeliveriesCount }} por entregar
                 </span>
             </div>
 
-            <div v-if="totalDeliveriesCount > 3" class="relative">
+            <!-- Search input -->
+            <div class="relative">
+                <Search
+                    :size="14"
+                    class="pointer-events-none absolute top-1/2 left-3.5 -translate-y-1/2 text-neutral-500"
+                />
                 <input
                     v-model="deliverySearch"
                     type="text"
-                    placeholder="Pesquisar participante ou email..."
-                    class="w-full rounded-2xl border border-white/10 bg-white/5 px-3.5 py-2 text-xs text-white placeholder-neutral-500 focus:border-white/20 focus:ring-1 focus:ring-white/20 focus:outline-hidden"
+                    placeholder="Pesquisar participante por nome ou email..."
+                    class="w-full rounded-2xl border border-white/10 bg-white/5 py-2 pr-3.5 pl-9 text-xs text-white placeholder-neutral-500 transition-colors focus:border-white/20 focus:ring-1 focus:ring-white/20 focus:outline-hidden"
                 />
             </div>
 
+            <!-- Enrollments list -->
             <div
                 v-if="filteredEnrollments.length > 0"
                 class="max-h-64 space-y-2 overflow-y-auto pr-1"
@@ -412,49 +484,95 @@ const redeemProduct = (enrollmentId: number) => {
                 <div
                     v-for="enrollment in filteredEnrollments"
                     :key="enrollment.id"
-                    class="flex items-center justify-between gap-3 rounded-2xl border border-white/8 bg-white/5 p-3 text-xs"
+                    class="flex items-center justify-between gap-3 rounded-2xl border border-white/8 bg-white/4 p-3 transition-colors hover:border-white/15"
                 >
-                    <div class="flex min-w-0 flex-col">
-                        <span class="truncate font-semibold text-white">
+                    <div class="flex min-w-0 items-center gap-3">
+                        <div
+                            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-white/8 text-xs font-bold text-neutral-300 ring-1 ring-white/10"
+                        >
                             {{
-                                enrollment.participant?.user?.name ??
-                                `Inscrição #${enrollment.id}`
+                                (
+                                    enrollment.participant?.user?.name ?? "P"
+                                ).charAt(0)
                             }}
-                        </span>
-                        <span class="truncate text-[11px] text-neutral-400">
-                            {{ enrollment.participant?.user?.email }}
-                        </span>
+                        </div>
+                        <div class="flex min-w-0 flex-col">
+                            <span
+                                class="truncate text-xs font-semibold text-white"
+                            >
+                                {{
+                                    enrollment.participant?.user?.name ??
+                                    `Inscrição #${enrollment.id}`
+                                }}
+                            </span>
+                            <span class="truncate text-[11px] text-neutral-400">
+                                {{ enrollment.participant?.user?.email }}
+                            </span>
+                        </div>
                     </div>
 
                     <span
                         v-if="enrollment.pivot?.redeemed"
-                        class="shrink-0 rounded-full bg-emerald-500/15 px-2.5 py-1 text-[10px] text-emerald-400 ring-1 ring-emerald-500/25"
+                        class="inline-flex shrink-0 items-center gap-1 rounded-full bg-emerald-500/15 px-2.5 py-1 text-[11px] font-semibold text-emerald-400 ring-1 ring-emerald-500/25"
                     >
+                        <Check :size="12" />
                         Entregue
                     </span>
-                    <button
+                    <PrimaryButton
                         v-else
-                        type="button"
-                        class="pill-container pill-item shrink-0 cursor-pointer bg-white/10 px-3 py-1 text-[11px] font-semibold text-white transition-colors hover:bg-white/20 active:scale-95 disabled:opacity-50"
+                        padding="px-3.5 py-1"
+                        text-size="text-[11px] font-semibold"
                         :disabled="isRedeemingId === enrollment.id"
                         @click="redeemProduct(enrollment.id)"
                     >
-                        <span v-if="isRedeemingId === enrollment.id">...</span>
-                        <span v-else>Entregar</span>
-                    </button>
+                        <span v-if="isRedeemingId === enrollment.id"
+                            >A registar...</span
+                        >
+                        <span v-else>Entregar Artigo</span>
+                    </PrimaryButton>
                 </div>
             </div>
 
+            <!-- Empty state for search -->
             <div
                 v-else
-                class="rounded-2xl border border-white/5 bg-white/2 py-6 text-center text-xs text-neutral-500"
+                class="flex flex-col items-center justify-center rounded-2xl border border-white/6 bg-white/2 py-8 text-center"
             >
-                {{
-                    deliverySearch
-                        ? "Nenhum participante encontrado com esse termo."
-                        : "Ainda nenhum participante comprou este produto."
-                }}
+                <Package :size="28" class="mb-2 text-neutral-600 opacity-50" />
+                <p class="text-xs text-neutral-400">
+                    {{
+                        deliverySearch
+                            ? "Nenhum participante encontrado com esse termo."
+                            : "Ainda nenhum participante adquiriu este artigo."
+                    }}
+                </p>
             </div>
         </div>
+
+        <!-- Modal Footer -->
+        <template #footer>
+            <div class="flex w-full items-center justify-end gap-3">
+                <PrimaryButton
+                    padding="px-4 py-1.5"
+                    text-size="text-xs"
+                    @click="modalOpen = false"
+                >
+                    {{ activeTab === "deliveries" ? "Fechar" : "Cancelar" }}
+                </PrimaryButton>
+
+                <template v-if="activeTab === 'buy' && user && isEnrolled">
+                    <PrimaryButton
+                        v-if="!isAlreadyBought && !isOutOfStock"
+                        padding="px-5 py-1.5"
+                        text-size="text-xs"
+                        :disabled="!hasEnoughPoints || isBuying"
+                        @click="buyProduct"
+                    >
+                        <span v-if="isBuying">A processar...</span>
+                        <span v-else>Confirmar Compra</span>
+                    </PrimaryButton>
+                </template>
+            </div>
+        </template>
     </Modal>
 </template>
diff --git a/resources/js/Pages/Shop.vue b/resources/js/Pages/Shop.vue
index 795b96cc..d94e2d26 100644
--- a/resources/js/Pages/Shop.vue
+++ b/resources/js/Pages/Shop.vue
@@ -1,8 +1,20 @@
 <script setup lang="ts">
+import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { router, usePage } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import ShopItem from "@/Components/Shop/ShopItem.vue";
-import PillSelector from "@/Components/UI/PillSelector.vue";
+import PillSelector, {
+    type PillOption,
+} from "@/Components/UI/PillSelector.vue";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
 import { type BuyableProduct } from "@/Types/ShopPage";
+import { type User } from "@/Types/User";
+import {
+    ShoppingBag,
+    ArrowUp,
+    ArrowRight,
+} from "@lucide/vue";
 
 interface Props {
     products: BuyableProduct[];
@@ -11,27 +23,186 @@ interface Props {
     isParticipant: boolean;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const page = usePage();
+const user = computed(() => page.props.auth?.user as User | undefined);
+
+const selectedFilter = ref<"all" | "available" | "bought" | "out-of-stock">(
+    "all",
+);
+const sortOption = ref<"price-desc" | "price-asc" | "name">("price-desc");
+
+const totalProducts = computed(() => props.products.length);
+const availableProductsCount = computed(
+    () => props.products.filter((p) => (p.stock ?? 0) > 0).length,
+);
+const outOfStockCount = computed(
+    () => props.products.filter((p) => (p.stock ?? 0) <= 0).length,
+);
+const alreadyBoughtCount = computed(
+    () => props.products.filter((p) => Boolean(p.alreadyBought)).length,
+);
+
+const filterOptions = computed<PillOption[]>(() => {
+    const options: PillOption[] = [
+        {
+            id: "all",
+            label: "Todos",
+            count: totalProducts.value,
+        },
+        {
+            id: "available",
+            label: "Disponíveis",
+            count: availableProductsCount.value,
+        },
+    ];
+
+    if (alreadyBoughtCount.value > 0) {
+        options.push({
+            id: "bought",
+            label: "Adquiridos",
+            count: alreadyBoughtCount.value,
+        });
+    }
+
+    if (outOfStockCount.value > 0) {
+        options.push({
+            id: "out-of-stock",
+            label: "Esgotados",
+            count: outOfStockCount.value,
+        });
+    }
+
+    return options;
+});
+
+const sortLabels: Record<"price-desc" | "price-asc" | "name", string> = {
+    "price-desc": "Preço: Maior primeiro",
+    "price-asc": "Preço: Menor primeiro",
+    name: "Nome (A-Z)",
+};
+
+const sortPillItems = computed<PillOption[]>(() => [
+    {
+        id: "sort",
+        label: sortLabels[sortOption.value],
+        dropdown: {
+            align: "right",
+            width: "56",
+            items: [
+                {
+                    id: "price-desc",
+                    label: "Preço: Maior primeiro",
+                    active: sortOption.value === "price-desc",
+                    onClick: () => {
+                        sortOption.value = "price-desc";
+                    },
+                },
+                {
+                    id: "price-asc",
+                    label: "Preço: Menor primeiro",
+                    active: sortOption.value === "price-asc",
+                    onClick: () => {
+                        sortOption.value = "price-asc";
+                    },
+                },
+                {
+                    id: "name",
+                    label: "Nome (A-Z)",
+                    active: sortOption.value === "name",
+                    onClick: () => {
+                        sortOption.value = "name";
+                    },
+                },
+            ],
+        },
+    },
+]);
+
+const filteredAndSortedProducts = computed(() => {
+    let result = [...props.products];
+
+    // Status filter
+    if (selectedFilter.value === "available") {
+        result = result.filter((p) => (p.stock ?? 0) > 0);
+    } else if (selectedFilter.value === "out-of-stock") {
+        result = result.filter((p) => (p.stock ?? 0) <= 0);
+    } else if (selectedFilter.value === "bought") {
+        result = result.filter((p) => Boolean(p.alreadyBought));
+    }
+
+    // Sorting
+    if (sortOption.value === "price-desc") {
+        result.sort((a, b) => b.price - a.price);
+    } else if (sortOption.value === "price-asc") {
+        result.sort((a, b) => a.price - b.price);
+    } else if (sortOption.value === "name") {
+        result.sort((a, b) => a.name.localeCompare(b.name));
+    }
+
+    return result;
+});
+
+const isScrolled = ref(false);
+
+const updateScrollState = () => {
+    isScrolled.value = (window.scrollY || window.pageYOffset) > 400;
+};
+
+const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+};
+
+onMounted(() => {
+    updateScrollState();
+    window.addEventListener("scroll", updateScrollState, { passive: true });
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener("scroll", updateScrollState);
+});
 </script>
 
 <template>
     <AppLayout title="Loja">
+        <!-- Floating scroll-to-top button -->
+        <Transition
+            enter-active-class="transition duration-200 ease-out"
+            enter-from-class="opacity-0 translate-y-2 scale-90"
+            enter-to-class="opacity-100 translate-y-0 scale-100"
+            leave-active-class="transition duration-150 ease-in"
+            leave-from-class="opacity-100 translate-y-0 scale-100"
+            leave-to-class="opacity-0 translate-y-2 scale-90"
+        >
+            <button
+                v-if="isScrolled"
+                type="button"
+                aria-label="Voltar ao topo"
+                class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 cursor-pointer justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
+                @click="scrollToTop"
+            >
+                <ArrowUp :size="16" />
+            </button>
+        </Transition>
+
         <div
-            class="relative mx-auto w-full max-w-7xl px-4 py-16 sm:px-6 lg:px-8"
+            class="relative mx-auto w-full max-w-7xl space-y-8 px-4 py-8 sm:space-y-10 sm:px-6 sm:py-12 lg:px-8"
         >
+            <!-- User Balance Pill / Enrollment CTA -->
             <div
                 v-if="points !== null && points !== undefined"
-                class="mb-10 flex justify-center"
+                class="flex justify-center"
             >
                 <PillSelector size="md" :wrap="false">
                     <div
                         class="pill-item cursor-default gap-2.5 hover:bg-transparent"
                     >
-                        <span>O teu saldo:</span>
+                        <span class="text-neutral-400">O teu saldo:</span>
                         <span
                             class="flex items-center gap-1.5 font-bold text-white"
                         >
-                            <span class="text-sm font-semibold sm:text-base">{{
+                            <span class="font-mono text-base font-bold">{{
                                 points
                             }}</span>
                             <img
@@ -45,38 +216,110 @@ defineProps<Props>();
                 </PillSelector>
             </div>
 
-            <template v-if="products.length > 0">
-                <section
-                    class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 md:grid-cols-3 lg:grid-cols-4"
+            <div
+                v-else-if="user && !isEnrolled"
+                class="flex justify-center"
+            >
+                <PrimaryButton
+                    padding="px-4 py-1.5"
+                    text-size="text-xs"
+                    @click="router.put(route('enroll'))"
+                >
+                    <span>Inscreve-te na SINF 2026 para ganhares SINFrões</span>
+                    <ArrowRight :size="13" class="text-amber-400" />
+                </PrimaryButton>
+            </div>
+
+            <!-- Products Section -->
+            <section class="space-y-6">
+                <!-- Filter and Sort Bar (items-start on mobile prevents stretching) -->
+                <div
+                    v-if="products.length > 0"
+                    class="flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:justify-between"
+                >
+                    <!-- Status Filter Pills -->
+                    <PillSelector
+                        v-model="selectedFilter"
+                        :items="filterOptions"
+                        size="sm"
+                    />
+
+                    <!-- Dropdown Sort with PillSelector -->
+                    <PillSelector
+                        :items="sortPillItems"
+                        size="sm"
+                    />
+                </div>
+
+                <!-- Products Grid -->
+                <div
+                    v-if="filteredAndSortedProducts.length > 0"
+                    class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
                 >
                     <ShopItem
-                        v-for="product in products"
+                        v-for="product in filteredAndSortedProducts"
                         :key="product.id"
                         :product="product"
                         :points="points"
                         :is-participant="isParticipant"
                         :is-enrolled="isEnrolled"
                     />
-                </section>
-            </template>
+                </div>
 
-            <div
-                v-else
-                class="flex flex-col items-center justify-center py-28 text-center"
-            >
-                <PillSelector
-                    :items="[
-                        { id: 'soon', label: 'Em breve...', disabled: true },
-                    ]"
-                    size="sm"
-                    :wrap="false"
-                    container-class="mb-4"
-                />
-                <p class="max-w-md text-sm text-neutral-400">
-                    A loja da edição 2026 estará disponível brevemente. Fica
-                    atento às novidades!
-                </p>
-            </div>
+                <!-- Empty Filter Results -->
+                <div
+                    v-else-if="products.length > 0"
+                    class="flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/30 py-16 text-center"
+                >
+                    <ShoppingBag
+                        :size="36"
+                        class="mb-3 text-neutral-600 opacity-40"
+                    />
+                    <h3 class="text-base font-semibold text-white">
+                        Nenhum artigo encontrado
+                    </h3>
+                    <p class="mt-1 max-w-sm text-xs text-neutral-400">
+                        Não existem artigos correspondentes aos filtros selecionados.
+                    </p>
+                    <div class="mt-5">
+                        <PrimaryButton
+                            padding="px-4 py-1.5"
+                            text-size="text-xs"
+                            @click="selectedFilter = 'all'"
+                        >
+                            Limpar filtros
+                        </PrimaryButton>
+                    </div>
+                </div>
+
+                <!-- Empty Shop State (Coming soon) -->
+                <div
+                    v-else
+                    class="flex flex-col items-center justify-center py-24 text-center"
+                >
+                    <PillSelector
+                        :items="[
+                            {
+                                id: 'soon',
+                                label: 'Em breve...',
+                                disabled: true,
+                            },
+                        ]"
+                        size="sm"
+                        :wrap="false"
+                        container-class="mb-4"
+                    />
+                    <h3 class="text-lg font-bold text-white">
+                        A loja oficial da SINF 2026 estará disponível em breve
+                    </h3>
+                    <p
+                        class="mt-2 max-w-md text-xs leading-relaxed text-neutral-400 sm:text-sm"
+                    >
+                        Estamos a preparar artigos exclusivos para esta edição.
+                        Fica atento às novidades no programa e redes sociais!
+                    </p>
+                </div>
+            </section>
         </div>
     </AppLayout>
 </template>
diff --git a/resources/js/Types/ShopPage.ts b/resources/js/Types/ShopPage.ts
index 86786a9e..7e99dc5c 100644
--- a/resources/js/Types/ShopPage.ts
+++ b/resources/js/Types/ShopPage.ts
@@ -9,5 +9,6 @@ export interface EnrollmentWithRedeemed extends Enrollment {
 
 export type BuyableProduct = Omit<Product, "enrollments"> & {
     canBeBought?: boolean | number;
+    alreadyBought?: boolean;
     enrollments?: EnrollmentWithRedeemed[];
 };

From 3c13c8914792b6f4d6313872185b9e93c58d7236 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Mon, 7 Sep 2026 20:12:39 +0100
Subject: [PATCH 25/33] old editions toggable

---
 resources/js/Components/HamburgerMenu.vue | 24 ++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/resources/js/Components/HamburgerMenu.vue b/resources/js/Components/HamburgerMenu.vue
index 656da223..f5a4dc49 100644
--- a/resources/js/Components/HamburgerMenu.vue
+++ b/resources/js/Components/HamburgerMenu.vue
@@ -6,7 +6,7 @@ import ResponsiveNavLink from "@/Components/ResponsiveNavLink.vue";
 import type Competition from "@/Types/Competition";
 import type { User } from "@/Types/User";
 import PillSelector from "@/Components/UI/PillSelector.vue";
-import { Menu, X, ChevronRight, ArrowRight } from "@lucide/vue";
+import { Menu, X, ChevronRight, ChevronDown, ArrowRight } from "@lucide/vue";
 
 interface RouteItem {
     label: string;
@@ -34,6 +34,7 @@ const emit = defineEmits<{
 }>();
 
 const internalOpen = ref(props.modelValue ?? false);
+const editionsOpen = ref(false);
 
 watch(
     () => props.modelValue,
@@ -46,6 +47,9 @@ watch(
 
 watch(internalOpen, (val) => {
     emit("update:modelValue", val);
+    if (!val) {
+        editionsOpen.value = false;
+    }
     if (typeof document !== "undefined") {
         document.body.classList.toggle("overflow-hidden", val);
     }
@@ -217,12 +221,22 @@ const getPageRoute = (name: string, query?: HasQueryParam["_query"]) => {
                         </div>
 
                         <div>
+                            <button
+                                type="button"
+                                class="flex w-full items-center justify-between rounded-lg px-2 py-1 text-[11px] font-semibold tracking-wider text-neutral-500 uppercase transition-colors hover:text-neutral-300 focus:outline-none"
+                                @click="editionsOpen = !editionsOpen"
+                            >
+                                <span>Edições Anteriores</span>
+                                <ChevronDown
+                                    :size="14"
+                                    class="transition-transform duration-200"
+                                    :class="{ 'rotate-180': editionsOpen }"
+                                />
+                            </button>
                             <div
-                                class="px-2 pb-2 text-[11px] font-semibold tracking-wider text-neutral-500 uppercase"
+                                v-if="editionsOpen"
+                                class="mt-2 grid grid-cols-3 gap-2"
                             >
-                                Edições Anteriores
-                            </div>
-                            <div class="grid grid-cols-3 gap-2">
                                 <template
                                     v-for="edition in options.editions"
                                     :key="`mobile-edition-${edition}`"

From 16957b6df73a7241a0a37488067bfe48306a91c5 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Sat, 12 Sep 2026 12:35:44 +0100
Subject: [PATCH 26/33] chore: refactored folders

---
 resources/js/Components/DropdownTrigger.vue   |  16 --
 .../js/Components/{ => Form}/Checkbox.vue     |   0
 .../js/Components/{ => Form}/CodeInput.vue    |   0
 .../{ => Form}/ConfirmsPassword.vue           |   0
 .../js/Components/{ => Form}/ImageInput.vue   |   0
 .../js/Components/{ => Form}/TextInput.vue    |   0
 .../js/Components/Home/EnrollSection.vue      |  33 ----
 .../{ => Navigation}/AdminNavbar.vue          |   0
 .../js/Components/{ => Navigation}/Footer.vue |   0
 .../{ => Navigation}/HamburgerMenu.vue        |   0
 .../Components/{ => Navigation}/NavLink.vue   |   0
 .../js/Components/{ => Navigation}/Navbar.vue |   0
 .../{ => Navigation}/ResponsiveNavLink.vue    |   0
 resources/js/Components/Profile/InfoCard.vue  |  37 ----
 .../js/Components/Program/ProgramDayPanel.vue | 184 ------------------
 .../Components/Program/ProgramDaySelector.vue |  75 -------
 .../Program/{TimeLine => }/StandDisplay.vue   |   0
 .../Program/TimeLine/ActivityTimelineItem.vue | 133 -------------
 .../TimeLine/CompetitionTimelineItem.vue      |  81 --------
 .../Program/TimeLine/TalkTimelineItem.vue     | 125 ------------
 .../Program/TimeLine/TimelinePoint.vue        |  37 ----
 .../Program/TimeLine/WithTimeline.vue         |  34 ----
 .../js/Components/Team/DepartmentSelector.vue |  55 ------
 resources/js/Components/Team/SINFTeam.vue     |  15 --
 resources/js/Components/{ => UI}/Banner.vue   |   0
 resources/js/Components/{ => UI}/Dropdown.vue |   0
 .../js/Components/{ => UI}/DropdownLink.vue   |   0
 .../js/Components/{ => UI}/GlowingOrbs.vue    |   0
 .../Components/{ => UI}/PaginationLinks.vue   |   0
 .../js/Components/{ => UI}/PrimaryButton.vue  |   0
 .../{composables => Composables}/useSearch.ts |   0
 31 files changed, 825 deletions(-)
 delete mode 100644 resources/js/Components/DropdownTrigger.vue
 rename resources/js/Components/{ => Form}/Checkbox.vue (100%)
 rename resources/js/Components/{ => Form}/CodeInput.vue (100%)
 rename resources/js/Components/{ => Form}/ConfirmsPassword.vue (100%)
 rename resources/js/Components/{ => Form}/ImageInput.vue (100%)
 rename resources/js/Components/{ => Form}/TextInput.vue (100%)
 delete mode 100644 resources/js/Components/Home/EnrollSection.vue
 rename resources/js/Components/{ => Navigation}/AdminNavbar.vue (100%)
 rename resources/js/Components/{ => Navigation}/Footer.vue (100%)
 rename resources/js/Components/{ => Navigation}/HamburgerMenu.vue (100%)
 rename resources/js/Components/{ => Navigation}/NavLink.vue (100%)
 rename resources/js/Components/{ => Navigation}/Navbar.vue (100%)
 rename resources/js/Components/{ => Navigation}/ResponsiveNavLink.vue (100%)
 delete mode 100644 resources/js/Components/Profile/InfoCard.vue
 delete mode 100644 resources/js/Components/Program/ProgramDayPanel.vue
 delete mode 100644 resources/js/Components/Program/ProgramDaySelector.vue
 rename resources/js/Components/Program/{TimeLine => }/StandDisplay.vue (100%)
 delete mode 100644 resources/js/Components/Program/TimeLine/ActivityTimelineItem.vue
 delete mode 100644 resources/js/Components/Program/TimeLine/CompetitionTimelineItem.vue
 delete mode 100644 resources/js/Components/Program/TimeLine/TalkTimelineItem.vue
 delete mode 100644 resources/js/Components/Program/TimeLine/TimelinePoint.vue
 delete mode 100644 resources/js/Components/Program/TimeLine/WithTimeline.vue
 delete mode 100644 resources/js/Components/Team/DepartmentSelector.vue
 delete mode 100644 resources/js/Components/Team/SINFTeam.vue
 rename resources/js/Components/{ => UI}/Banner.vue (100%)
 rename resources/js/Components/{ => UI}/Dropdown.vue (100%)
 rename resources/js/Components/{ => UI}/DropdownLink.vue (100%)
 rename resources/js/Components/{ => UI}/GlowingOrbs.vue (100%)
 rename resources/js/Components/{ => UI}/PaginationLinks.vue (100%)
 rename resources/js/Components/{ => UI}/PrimaryButton.vue (100%)
 rename resources/js/{composables => Composables}/useSearch.ts (100%)

diff --git a/resources/js/Components/DropdownTrigger.vue b/resources/js/Components/DropdownTrigger.vue
deleted file mode 100644
index 69d80e81..00000000
--- a/resources/js/Components/DropdownTrigger.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-interface Props {
-    active?: boolean;
-}
-defineProps<Props>();
-</script>
-
-<template>
-    <button
-        type="button"
-        class="inline-flex cursor-pointer items-center gap-1 rounded-full px-3 py-1.5 text-[13px] font-medium text-neutral-300 transition-all duration-150 hover:bg-white/8 hover:text-white focus:outline-none"
-        :class="{ 'bg-white/8 text-white': active }"
-    >
-        <slot />
-    </button>
-</template>
diff --git a/resources/js/Components/Checkbox.vue b/resources/js/Components/Form/Checkbox.vue
similarity index 100%
rename from resources/js/Components/Checkbox.vue
rename to resources/js/Components/Form/Checkbox.vue
diff --git a/resources/js/Components/CodeInput.vue b/resources/js/Components/Form/CodeInput.vue
similarity index 100%
rename from resources/js/Components/CodeInput.vue
rename to resources/js/Components/Form/CodeInput.vue
diff --git a/resources/js/Components/ConfirmsPassword.vue b/resources/js/Components/Form/ConfirmsPassword.vue
similarity index 100%
rename from resources/js/Components/ConfirmsPassword.vue
rename to resources/js/Components/Form/ConfirmsPassword.vue
diff --git a/resources/js/Components/ImageInput.vue b/resources/js/Components/Form/ImageInput.vue
similarity index 100%
rename from resources/js/Components/ImageInput.vue
rename to resources/js/Components/Form/ImageInput.vue
diff --git a/resources/js/Components/TextInput.vue b/resources/js/Components/Form/TextInput.vue
similarity index 100%
rename from resources/js/Components/TextInput.vue
rename to resources/js/Components/Form/TextInput.vue
diff --git a/resources/js/Components/Home/EnrollSection.vue b/resources/js/Components/Home/EnrollSection.vue
deleted file mode 100644
index c2971bf5..00000000
--- a/resources/js/Components/Home/EnrollSection.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { router } from "@inertiajs/vue3";
-import { route } from "ziggy-js";
-</script>
-
-<template>
-    <div id="enroll-section" class="flex flex-col items-center">
-        <button
-            type="button"
-            class="group inline-flex items-center gap-3 rounded-full bg-white px-8 py-4 text-sm font-semibold text-black shadow-[0_0_35px_rgba(255,255,255,0.25)] transition-all duration-200 hover:scale-105 hover:bg-neutral-100 hover:shadow-[0_0_50px_rgba(255,255,255,0.45)] focus:outline-none active:scale-95 sm:text-base"
-            @click="
-                $page.props.auth.user
-                    ? router.put(route('enroll'))
-                    : router.get(route('register'))
-            "
-        >
-            <span>Inscrever-me</span>
-            <svg
-                class="h-4 w-4 text-neutral-800 transition-transform duration-200 group-hover:translate-x-1"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M14 5l7 7m0 0l-7 7m7-7H3"
-                />
-            </svg>
-        </button>
-    </div>
-</template>
diff --git a/resources/js/Components/AdminNavbar.vue b/resources/js/Components/Navigation/AdminNavbar.vue
similarity index 100%
rename from resources/js/Components/AdminNavbar.vue
rename to resources/js/Components/Navigation/AdminNavbar.vue
diff --git a/resources/js/Components/Footer.vue b/resources/js/Components/Navigation/Footer.vue
similarity index 100%
rename from resources/js/Components/Footer.vue
rename to resources/js/Components/Navigation/Footer.vue
diff --git a/resources/js/Components/HamburgerMenu.vue b/resources/js/Components/Navigation/HamburgerMenu.vue
similarity index 100%
rename from resources/js/Components/HamburgerMenu.vue
rename to resources/js/Components/Navigation/HamburgerMenu.vue
diff --git a/resources/js/Components/NavLink.vue b/resources/js/Components/Navigation/NavLink.vue
similarity index 100%
rename from resources/js/Components/NavLink.vue
rename to resources/js/Components/Navigation/NavLink.vue
diff --git a/resources/js/Components/Navbar.vue b/resources/js/Components/Navigation/Navbar.vue
similarity index 100%
rename from resources/js/Components/Navbar.vue
rename to resources/js/Components/Navigation/Navbar.vue
diff --git a/resources/js/Components/ResponsiveNavLink.vue b/resources/js/Components/Navigation/ResponsiveNavLink.vue
similarity index 100%
rename from resources/js/Components/ResponsiveNavLink.vue
rename to resources/js/Components/Navigation/ResponsiveNavLink.vue
diff --git a/resources/js/Components/Profile/InfoCard.vue b/resources/js/Components/Profile/InfoCard.vue
deleted file mode 100644
index 838264ab..00000000
--- a/resources/js/Components/Profile/InfoCard.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import ProfileCard from "./ProfileCard.vue";
-import type { User } from "@/Types/User";
-
-interface Props {
-    user?: User;
-    isStaff?: boolean;
-    points?: number | null;
-    showSocialMedia?: boolean;
-}
-
-withDefaults(defineProps<Props>(), {
-    user: undefined,
-    isStaff: false,
-    points: undefined,
-    showSocialMedia: true,
-});
-</script>
-
-<template>
-    <ProfileCard
-        :user="user"
-        :is-staff="isStaff"
-        :points="points"
-        :show-social-media="showSocialMedia"
-    >
-        <template v-if="$slots.avatar" #avatar>
-            <slot name="avatar" />
-        </template>
-        <template v-if="$slots.details" #details>
-            <slot name="details" />
-        </template>
-        <template v-if="$slots.actions" #actions>
-            <slot name="actions" />
-        </template>
-    </ProfileCard>
-</template>
diff --git a/resources/js/Components/Program/ProgramDayPanel.vue b/resources/js/Components/Program/ProgramDayPanel.vue
deleted file mode 100644
index 2a2fab67..00000000
--- a/resources/js/Components/Program/ProgramDayPanel.vue
+++ /dev/null
@@ -1,184 +0,0 @@
-<script setup lang="ts">
-import type EventDay from "@/Types/EventDay";
-import { ref, computed, watch } from "vue";
-import WithTimeline from "@/Components/Program/TimeLine/WithTimeline.vue";
-import StandDisplay from "@/Components/Program/TimeLine/StandDisplay.vue";
-import ActivityTimelineItem from "./TimeLine/ActivityTimelineItem.vue";
-import TalkTimelineItem from "./TimeLine/TalkTimelineItem.vue";
-import CompetitionTimelineItem from "./TimeLine/CompetitionTimelineItem.vue";
-import PillSelector from "@/Components/UI/PillSelector.vue";
-
-interface Props {
-    day: EventDay;
-}
-
-const props = defineProps<Props>();
-const day = computed(() => props.day);
-
-type TabType = "talk" | "activity" | "stand" | "competitions";
-
-interface TabOption {
-    id: TabType;
-    label: string;
-    count: number;
-}
-
-const availableTabs = computed<TabOption[]>(() => {
-    const tabs: TabOption[] = [];
-    if (day.value.talks?.length) {
-        tabs.push({
-            id: "talk",
-            label: "Palestras",
-            count: day.value.talks.length,
-        });
-    }
-    if (day.value.activities?.length) {
-        tabs.push({
-            id: "activity",
-            label: "Atividades",
-            count: day.value.activities.length,
-        });
-    }
-    if (day.value.stands?.length) {
-        tabs.push({
-            id: "stand",
-            label: "Bancas",
-            count: day.value.stands.length,
-        });
-    }
-    if (day.value.competitions?.length) {
-        tabs.push({
-            id: "competitions",
-            label: "Competições",
-            count: day.value.competitions.length,
-        });
-    }
-    return tabs;
-});
-
-const selectedType = ref<TabType>(availableTabs.value[0]?.id ?? "talk");
-
-// If day changes or current tab has no items, switch to first available tab
-watch(
-    availableTabs,
-    (tabs) => {
-        if (!tabs.some((t) => t.id === selectedType.value) && tabs.length > 0) {
-            const firstTab = tabs[0];
-            if (firstTab) {
-                selectedType.value = firstTab.id;
-            }
-        }
-    },
-    { immediate: true },
-);
-
-const times = computed<{ start?: string; end?: string }>(() => {
-    const parseTimeString = (time: string) => `1970-01-01T${time}.000000Z`;
-
-    switch (selectedType.value) {
-        case "activity": {
-            const items = day.value.activities ?? [];
-            if (!items.length) return {};
-            const first = items[0];
-            const last = items[items.length - 1];
-            return {
-                start: first ? parseTimeString(first.time_start) : undefined,
-                end: last ? parseTimeString(last.time_end) : undefined,
-            };
-        }
-        case "talk": {
-            const items = day.value.talks ?? [];
-            if (!items.length) return {};
-            const first = items[0];
-            const last = items[items.length - 1];
-            return {
-                start: first ? parseTimeString(first.time_start) : undefined,
-                end: last ? parseTimeString(last.time_end) : undefined,
-            };
-        }
-        case "stand":
-            return {
-                start: "1970-01-01T08:00:00.000000Z",
-                end: "1970-01-01T17:00:00.000000Z",
-            };
-        case "competitions": {
-            const comps = day.value.competitions ?? [];
-            if (!comps.length) return {};
-            const first = comps[0];
-            const last = comps[comps.length - 1];
-            return {
-                start: first?.date_start,
-                end: last?.date_end,
-            };
-        }
-        default:
-            return {};
-    }
-});
-</script>
-
-<template>
-    <div class="w-full">
-        <div v-if="availableTabs.length > 1" class="mb-10 flex justify-center">
-            <PillSelector
-                v-model="selectedType"
-                :items="availableTabs"
-                size="md"
-            />
-        </div>
-
-        <div
-            v-if="availableTabs.length === 0"
-            class="flex flex-col items-center justify-center py-20 text-center"
-        >
-            <PillSelector
-                :items="[
-                    {
-                        id: 'none',
-                        label: 'Sem eventos agendados',
-                        disabled: true,
-                    },
-                ]"
-                size="sm"
-                :wrap="false"
-                container-class="mb-3"
-            />
-            <p class="text-xs text-neutral-500">
-                Nenhuma atividade ou palestra disponível para este dia de
-                momento.
-            </p>
-        </div>
-
-        <template v-else-if="selectedType === 'stand'">
-            <StandDisplay :stands="day.stands ?? []" />
-        </template>
-
-        <template v-else>
-            <WithTimeline :start-time="times.start" :end-time="times.end">
-                <template v-if="selectedType === 'activity'">
-                    <ActivityTimelineItem
-                        v-for="activity in day.activities"
-                        :key="activity.id"
-                        :event="activity"
-                    />
-                </template>
-
-                <template v-else-if="selectedType === 'talk'">
-                    <TalkTimelineItem
-                        v-for="talk in day.talks"
-                        :key="talk.id"
-                        :event="talk"
-                    />
-                </template>
-
-                <template v-else-if="selectedType === 'competitions'">
-                    <CompetitionTimelineItem
-                        v-for="competition in day.competitions"
-                        :key="competition.id"
-                        :competition="competition"
-                    />
-                </template>
-            </WithTimeline>
-        </template>
-    </div>
-</template>
diff --git a/resources/js/Components/Program/ProgramDaySelector.vue b/resources/js/Components/Program/ProgramDaySelector.vue
deleted file mode 100644
index 3fd62a08..00000000
--- a/resources/js/Components/Program/ProgramDaySelector.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import { route } from "ziggy-js";
-import type EventDay from "@/Types/EventDay";
-import PillSelector, {
-    type PillOption,
-} from "@/Components/UI/PillSelector.vue";
-
-interface Props {
-    days?: EventDay[];
-    totalDays: number;
-    queryDay: number;
-    eventDay?: EventDay;
-}
-
-const props = defineProps<Props>();
-
-const formatShortDate = (dateStr?: Date | string): string => {
-    if (!dateStr) return "";
-    try {
-        const d = new Date(dateStr);
-        return d
-            .toLocaleDateString("pt-PT", {
-                day: "numeric",
-                month: "short",
-                timeZone: "Europe/Lisbon",
-            })
-            .replace(".", "");
-    } catch {
-        return "";
-    }
-};
-
-const items = computed<PillOption[]>(() => {
-    return Array.from({ length: props.totalDays }, (_, i) => {
-        const dayIndex = i + 1;
-        const d = props.days && props.days[i] ? props.days[i] : undefined;
-        const dateText = d ? formatShortDate(d.date) : undefined;
-        return {
-            id: dayIndex,
-            label: `Dia ${dayIndex}`,
-            sublabel: dayIndex === props.queryDay ? dateText : undefined,
-            href: route(route().current() ?? "program", { day: dayIndex }),
-            active: dayIndex === props.queryDay,
-        };
-    });
-});
-</script>
-
-<template>
-    <section class="mb-5 flex flex-col items-center gap-4 text-center">
-        <div v-if="totalDays > 1" class="flex justify-center">
-            <PillSelector :items="items" size="md">
-                <template #item="{ item, active }">
-                    <span class="font-semibold">{{ item.label }}</span>
-                    <template v-if="active && item.sublabel">
-                        <span class="opacity-35">•</span>
-                        <span class="text-xs opacity-85">{{
-                            item.sublabel
-                        }}</span>
-                    </template>
-                </template>
-            </PillSelector>
-        </div>
-
-        <div v-if="eventDay" class="flex flex-col items-center gap-1.5">
-            <p
-                v-if="eventDay.theme"
-                class="max-w-2xl text-sm leading-relaxed font-normal sm:text-base"
-            >
-                {{ eventDay.theme }}
-            </p>
-        </div>
-    </section>
-</template>
diff --git a/resources/js/Components/Program/TimeLine/StandDisplay.vue b/resources/js/Components/Program/StandDisplay.vue
similarity index 100%
rename from resources/js/Components/Program/TimeLine/StandDisplay.vue
rename to resources/js/Components/Program/StandDisplay.vue
diff --git a/resources/js/Components/Program/TimeLine/ActivityTimelineItem.vue b/resources/js/Components/Program/TimeLine/ActivityTimelineItem.vue
deleted file mode 100644
index 5918520a..00000000
--- a/resources/js/Components/Program/TimeLine/ActivityTimelineItem.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<script setup lang="ts">
-import type Event from "@/Types/Event";
-import { isSpeaker } from "@/Types/User";
-import { Link } from "@inertiajs/vue3";
-import { computed } from "vue";
-import { route } from "ziggy-js";
-import Card from "@/Components/UI/Card.vue";
-import { Clock, MapPin, Users, ArrowRight } from "@lucide/vue";
-
-interface Props {
-    event: Event;
-}
-
-const props = defineProps<Props>();
-const event = computed(() => props.event);
-const speakers = computed(() => event.value.users?.filter(isSpeaker) ?? []);
-
-const formatTime = (time?: string): string => {
-    if (!time) return "";
-    const isoString = time.includes("T") ? time : `1970-01-01T${time}.000000Z`;
-    try {
-        const d = new Date(isoString);
-        return d.toLocaleTimeString("pt-PT", {
-            hour: "2-digit",
-            minute: "2-digit",
-            timeZone: "Europe/Lisbon",
-        });
-    } catch {
-        return time.slice(0, 5);
-    }
-};
-</script>
-
-<template>
-    <div class="group relative">
-        <div
-            class="absolute top-8 -left-9.25 hidden h-2.5 w-2.5 rounded-full bg-neutral-600 ring-4 ring-black transition-all duration-300 group-hover:scale-125 sm:flex"
-        />
-
-        <Card as="article" padding="p-6 sm:p-7">
-            <template #header>
-                <div class="mb-4 flex flex-wrap items-center gap-2.5">
-                    <div
-                        v-if="event.time_start"
-                        class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
-                    >
-                        <Clock :size="14" class="text-neutral-400" />
-                        <span>
-                            {{ formatTime(event.time_start) }}
-                            <template v-if="event.time_end">
-                                - {{ formatTime(event.time_end) }}
-                            </template>
-                        </span>
-                    </div>
-
-                    <div
-                        v-if="event.location"
-                        class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
-                    >
-                        <MapPin :size="14" class="text-neutral-400" />
-                        <span>{{ event.location }}</span>
-                    </div>
-
-                    <div
-                        v-if="event.capacity"
-                        class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
-                    >
-                        <Users :size="14" class="text-neutral-400" />
-                        <span>{{ event.capacity }} vagas</span>
-                    </div>
-                </div>
-
-                <h3 class="text-xl font-bold tracking-tight sm:text-2xl">
-                    <Link
-                        :href="route('event.show', { event: event.id })"
-                        class="inline-flex items-center gap-2 text-white transition-colors hover:text-neutral-200"
-                        preserve-state
-                        preserve-scroll
-                    >
-                        <span>{{ event.name }}</span>
-                        <ArrowRight
-                            :size="16"
-                            class="text-neutral-500 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-white"
-                        />
-                    </Link>
-                </h3>
-            </template>
-
-            <p
-                v-if="event.topic"
-                class="mt-2 text-sm leading-relaxed text-neutral-300 sm:text-base"
-            >
-                {{ event.topic }}
-            </p>
-
-            <template v-if="speakers.length > 0" #footer>
-                <div
-                    class="flex w-full flex-wrap items-center gap-3 border-t border-white/8 pt-4"
-                >
-                    <div
-                        v-for="user in speakers"
-                        :key="user.id"
-                        class="flex items-center gap-2.5 rounded-full bg-white/5 py-1 pr-3.5 pl-1 ring-1 ring-white/10 backdrop-blur-xs"
-                    >
-                        <img
-                            v-if="user.profile_photo_url"
-                            :src="user.profile_photo_url"
-                            :alt="user.name"
-                            class="h-7 w-7 rounded-full object-cover ring-1 ring-white/20"
-                        />
-                        <div
-                            v-else
-                            class="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-800 text-xs font-bold text-white"
-                        >
-                            {{ user.name.charAt(0) }}
-                        </div>
-                        <div class="flex flex-col">
-                            <span class="text-xs font-semibold text-white">
-                                {{ user.name }}
-                            </span>
-                            <span
-                                v-if="user.usertype?.organization"
-                                class="text-[11px] text-neutral-400"
-                            >
-                                {{ user.usertype.organization }}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </Card>
-    </div>
-</template>
diff --git a/resources/js/Components/Program/TimeLine/CompetitionTimelineItem.vue b/resources/js/Components/Program/TimeLine/CompetitionTimelineItem.vue
deleted file mode 100644
index 214ac112..00000000
--- a/resources/js/Components/Program/TimeLine/CompetitionTimelineItem.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import type Competition from "@/Types/Competition";
-import { route } from "ziggy-js";
-import { Link } from "@inertiajs/vue3";
-import Card from "@/Components/UI/Card.vue";
-import { Calendar, ArrowRight } from "@lucide/vue";
-
-interface Props {
-    competition: Competition;
-}
-
-defineProps<Props>();
-
-const formatDateTime = (dateStr?: string): string => {
-    if (!dateStr) return "";
-    try {
-        const d = new Date(dateStr);
-        return d.toLocaleDateString("pt-PT", {
-            day: "numeric",
-            month: "short",
-            hour: "2-digit",
-            minute: "2-digit",
-            timeZone: "Europe/Lisbon",
-        });
-    } catch {
-        return dateStr;
-    }
-};
-</script>
-
-<template>
-    <div class="group relative">
-        <div
-            class="absolute top-8 -left-9.25 hidden h-2.5 w-2.5 rounded-full bg-neutral-600 ring-4 ring-black transition-all duration-300 group-hover:scale-125 sm:flex"
-        />
-
-        <Card as="article" padding="p-6 sm:p-7">
-            <template #header>
-                <div class="mb-4 flex flex-wrap items-center gap-2.5">
-                    <div
-                        class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
-                    >
-                        <Calendar :size="14" class="text-neutral-400" />
-                        <span>
-                            {{ formatDateTime(competition.date_start) }}
-                            <template v-if="competition.date_end">
-                                - {{ formatDateTime(competition.date_end) }}
-                            </template>
-                        </span>
-                    </div>
-                </div>
-
-                <h3 class="text-xl font-bold tracking-tight sm:text-2xl">
-                    <Link
-                        :href="
-                            route('competition.show', {
-                                competition: competition.slug,
-                            })
-                        "
-                        class="inline-flex items-center gap-2 text-white transition-colors hover:text-neutral-200"
-                        preserve-state
-                        preserve-scroll
-                    >
-                        <span>{{ competition.name }}</span>
-                        <ArrowRight
-                            :size="16"
-                            class="text-neutral-500 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-white"
-                        />
-                    </Link>
-                </h3>
-            </template>
-
-            <p
-                v-if="competition.theme"
-                class="mt-2 text-sm leading-relaxed text-neutral-300 sm:text-base"
-            >
-                {{ competition.theme }}
-            </p>
-        </Card>
-    </div>
-</template>
diff --git a/resources/js/Components/Program/TimeLine/TalkTimelineItem.vue b/resources/js/Components/Program/TimeLine/TalkTimelineItem.vue
deleted file mode 100644
index 99c2a662..00000000
--- a/resources/js/Components/Program/TimeLine/TalkTimelineItem.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import type Event from "@/Types/Event";
-import { isSpeaker } from "@/Types/User";
-import { Link } from "@inertiajs/vue3";
-import { computed } from "vue";
-import { route } from "ziggy-js";
-import Card from "@/Components/UI/Card.vue";
-import { Clock, MapPin, ArrowRight } from "@lucide/vue";
-
-interface Props {
-    event: Event;
-}
-
-const props = defineProps<Props>();
-const event = computed(() => props.event);
-const speakers = computed(() => event.value.users?.filter(isSpeaker) ?? []);
-
-const formatTime = (time?: string): string => {
-    if (!time) return "";
-    const isoString = time.includes("T") ? time : `1970-01-01T${time}.000000Z`;
-    try {
-        const d = new Date(isoString);
-        return d.toLocaleTimeString("pt-PT", {
-            hour: "2-digit",
-            minute: "2-digit",
-            timeZone: "Europe/Lisbon",
-        });
-    } catch {
-        return time.slice(0, 5);
-    }
-};
-</script>
-
-<template>
-    <div class="group relative">
-        <div
-            class="absolute top-8 -left-9.25 hidden h-2.5 w-2.5 rounded-full bg-neutral-600 ring-4 ring-black transition-all duration-300 group-hover:scale-125 sm:flex"
-        />
-
-        <Card as="article" padding="p-6 sm:p-7">
-            <template #header>
-                <div class="mb-4 flex flex-wrap items-center gap-2.5">
-                    <div
-                        v-if="event.time_start"
-                        class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
-                    >
-                        <Clock :size="14" class="text-neutral-400" />
-                        <span>
-                            {{ formatTime(event.time_start) }}
-                            <template v-if="event.time_end">
-                                - {{ formatTime(event.time_end) }}
-                            </template>
-                        </span>
-                    </div>
-
-                    <div
-                        v-if="event.location"
-                        class="pill-container gap-1.5 px-3 py-1 text-xs text-neutral-300 shadow-none"
-                    >
-                        <MapPin :size="14" class="text-neutral-400" />
-                        <span>{{ event.location }}</span>
-                    </div>
-                </div>
-
-                <h3 class="text-xl font-bold tracking-tight sm:text-2xl">
-                    <Link
-                        :href="route('event.show', { event: event.id })"
-                        class="inline-flex items-center gap-2 text-white transition-colors hover:text-neutral-200"
-                        preserve-state
-                        preserve-scroll
-                    >
-                        <span>{{ event.name }}</span>
-                        <ArrowRight
-                            :size="16"
-                            class="text-neutral-500 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-white"
-                        />
-                    </Link>
-                </h3>
-            </template>
-
-            <p
-                v-if="event.topic"
-                class="mt-2 text-sm leading-relaxed text-neutral-300 sm:text-base"
-            >
-                {{ event.topic }}
-            </p>
-
-            <template v-if="speakers.length > 0" #footer>
-                <div
-                    class="flex w-full flex-wrap items-center gap-3 border-t border-white/8 pt-4"
-                >
-                    <div
-                        v-for="user in speakers"
-                        :key="user.id"
-                        class="flex items-center gap-2.5 rounded-full bg-white/5 py-1 pr-3.5 pl-1 ring-1 ring-white/10 backdrop-blur-xs"
-                    >
-                        <img
-                            v-if="user.profile_photo_url"
-                            :src="user.profile_photo_url"
-                            :alt="user.name"
-                            class="h-7 w-7 rounded-full object-cover ring-1 ring-white/20"
-                        />
-                        <div
-                            v-else
-                            class="flex h-7 w-7 items-center justify-center rounded-full bg-neutral-800 text-xs font-bold text-white"
-                        >
-                            {{ user.name.charAt(0) }}
-                        </div>
-                        <div class="flex flex-col">
-                            <span class="text-xs font-semibold text-white">
-                                {{ user.name }}
-                            </span>
-                            <span
-                                v-if="user.usertype?.organization"
-                                class="text-[11px] text-neutral-400"
-                            >
-                                {{ user.usertype.organization }}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            </template>
-        </Card>
-    </div>
-</template>
diff --git a/resources/js/Components/Program/TimeLine/TimelinePoint.vue b/resources/js/Components/Program/TimeLine/TimelinePoint.vue
deleted file mode 100644
index 4f7eaa2e..00000000
--- a/resources/js/Components/Program/TimeLine/TimelinePoint.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-interface Props {
-    label: string;
-    timestamp?: string;
-    type?: "start" | "end";
-}
-
-defineProps<Props>();
-
-const formatTime = (time?: string): string => {
-    if (!time) return "";
-    const isoString = time.includes("T") ? time : `1970-01-01T${time}.000000Z`;
-    try {
-        const d = new Date(isoString);
-        return d.toLocaleTimeString("pt-PT", {
-            hour: "2-digit",
-            minute: "2-digit",
-            timeZone: "Europe/Lisbon",
-        });
-    } catch {
-        return time.slice(0, 5);
-    }
-};
-</script>
-
-<template>
-    <div class="flex items-center gap-3 py-2">
-        <div
-            class="pill-container gap-2 px-3.5 py-1 text-xs text-neutral-300 shadow-none"
-        >
-            <span class="font-medium text-white">{{ label }}</span>
-            <span v-if="timestamp" class="text-neutral-400">
-                • {{ formatTime(timestamp) }}
-            </span>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/Components/Program/TimeLine/WithTimeline.vue b/resources/js/Components/Program/TimeLine/WithTimeline.vue
deleted file mode 100644
index 498c90b1..00000000
--- a/resources/js/Components/Program/TimeLine/WithTimeline.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import TimelinePoint from "./TimelinePoint.vue";
-
-interface Props {
-    startTime?: string;
-    endTime?: string;
-}
-
-defineProps<Props>();
-</script>
-
-<template>
-    <div class="relative mx-auto w-full max-w-4xl py-4">
-        <TimelinePoint
-            v-if="startTime"
-            :timestamp="startTime"
-            label="Início"
-            type="start"
-        />
-
-        <div
-            class="relative my-6 space-y-6 sm:border-l sm:border-white/10 sm:pl-8"
-        >
-            <slot />
-        </div>
-
-        <TimelinePoint
-            v-if="endTime"
-            :timestamp="endTime"
-            label="Fim"
-            type="end"
-        />
-    </div>
-</template>
diff --git a/resources/js/Components/Team/DepartmentSelector.vue b/resources/js/Components/Team/DepartmentSelector.vue
deleted file mode 100644
index 7081779d..00000000
--- a/resources/js/Components/Team/DepartmentSelector.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import type Department from "@/Types/Department";
-import PillSelector, {
-    type PillOption,
-} from "@/Components/UI/PillSelector.vue";
-
-interface Props {
-    departments: Department[];
-    selectedId: number | null;
-}
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<{
-    (e: "select", id: number | null): void;
-}>();
-
-const departmentsWithStaff = computed(() =>
-    props.departments.filter((d) => (d.staff?.length ?? 0) > 0),
-);
-
-const totalMembers = computed(() =>
-    departmentsWithStaff.value.reduce(
-        (sum, d) => sum + (d.staff?.length ?? 0),
-        0,
-    ),
-);
-
-const items = computed<PillOption[]>(() => [
-    { id: "all", label: "Todos", count: totalMembers.value },
-    ...departmentsWithStaff.value.map((dept) => ({
-        id: dept.id,
-        label: dept.name,
-        count: dept.staff?.length,
-    })),
-]);
-</script>
-
-<template>
-    <div
-        v-if="departmentsWithStaff.length > 1"
-        class="mb-10 flex justify-center"
-    >
-        <PillSelector
-            :model-value="selectedId ?? 'all'"
-            :items="items"
-            size="md"
-            container-class="max-w-full"
-            @update:model-value="
-                (val) => emit('select', val === 'all' ? null : Number(val))
-            "
-        />
-    </div>
-</template>
diff --git a/resources/js/Components/Team/SINFTeam.vue b/resources/js/Components/Team/SINFTeam.vue
deleted file mode 100644
index 05708c12..00000000
--- a/resources/js/Components/Team/SINFTeam.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type Department from "@/Types/Department";
-import DepartmentSection from "./DepartmentSection.vue";
-
-interface Props {
-    department: Department;
-    color?: string;
-}
-
-defineProps<Props>();
-</script>
-
-<template>
-    <DepartmentSection :department="department" />
-</template>
diff --git a/resources/js/Components/Banner.vue b/resources/js/Components/UI/Banner.vue
similarity index 100%
rename from resources/js/Components/Banner.vue
rename to resources/js/Components/UI/Banner.vue
diff --git a/resources/js/Components/Dropdown.vue b/resources/js/Components/UI/Dropdown.vue
similarity index 100%
rename from resources/js/Components/Dropdown.vue
rename to resources/js/Components/UI/Dropdown.vue
diff --git a/resources/js/Components/DropdownLink.vue b/resources/js/Components/UI/DropdownLink.vue
similarity index 100%
rename from resources/js/Components/DropdownLink.vue
rename to resources/js/Components/UI/DropdownLink.vue
diff --git a/resources/js/Components/GlowingOrbs.vue b/resources/js/Components/UI/GlowingOrbs.vue
similarity index 100%
rename from resources/js/Components/GlowingOrbs.vue
rename to resources/js/Components/UI/GlowingOrbs.vue
diff --git a/resources/js/Components/PaginationLinks.vue b/resources/js/Components/UI/PaginationLinks.vue
similarity index 100%
rename from resources/js/Components/PaginationLinks.vue
rename to resources/js/Components/UI/PaginationLinks.vue
diff --git a/resources/js/Components/PrimaryButton.vue b/resources/js/Components/UI/PrimaryButton.vue
similarity index 100%
rename from resources/js/Components/PrimaryButton.vue
rename to resources/js/Components/UI/PrimaryButton.vue
diff --git a/resources/js/composables/useSearch.ts b/resources/js/Composables/useSearch.ts
similarity index 100%
rename from resources/js/composables/useSearch.ts
rename to resources/js/Composables/useSearch.ts

From edda3e21cb4669cdacd2aea50571c7641834b9c5 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Sat, 12 Sep 2026 12:35:59 +0100
Subject: [PATCH 27/33] chore: refactored folders

---
 database/seeders/DatabaseSeeder.php           |  30 +++-
 .../js/Components/Form/ConfirmsPassword.vue   |   8 +-
 resources/js/Components/Home/InfoPopup.vue    |   2 +-
 .../js/Components/Navigation/AdminNavbar.vue  |   6 +-
 .../Components/Navigation/HamburgerMenu.vue   |   6 +-
 resources/js/Components/Navigation/Navbar.vue |   4 +-
 .../js/Components/Profile/AllParticipants.vue |   5 +-
 resources/js/Components/Profile/CvArea.vue    |   2 +-
 .../Profile/EnrolledParticipants.vue          |   5 +-
 .../js/Components/Profile/ProfileCard.vue     |   2 +-
 resources/js/Components/Profile/QRCode.vue    |   2 +-
 .../js/Components/Program/ProgramTimeline.vue |   2 +-
 resources/js/Components/Shop/ShopItem.vue     |   2 +-
 .../js/Components/Team/DepartmentSection.vue  |   2 +-
 resources/js/Components/UI/Banner.vue         |   2 +-
 resources/js/Components/UI/Modal.vue          |   2 +-
 resources/js/Components/UI/PillSelector.vue   |   4 +-
 resources/js/Components/UI/QuickScroll.vue    |  35 +++++
 resources/js/Composables/useScroll.ts         |  82 ++++++++++
 resources/js/Layouts/AdminLayout.vue          |   6 +-
 resources/js/Layouts/AppLayout.vue            |   6 +-
 resources/js/Layouts/CRUDLayout.vue           |   6 +-
 resources/js/Pages/Admin.vue                  |   2 -
 resources/js/Pages/Auth/ConfirmPassword.vue   |   4 +-
 resources/js/Pages/Auth/ForgotPassword.vue    |   4 +-
 resources/js/Pages/Auth/Login.vue             |   6 +-
 resources/js/Pages/Auth/Register.vue          |   6 +-
 resources/js/Pages/Auth/ResetPassword.vue     |   4 +-
 .../js/Pages/Auth/TwoFactorChallenge.vue      |   6 +-
 resources/js/Pages/Auth/VerifyEmail.vue       |   2 +-
 .../js/Pages/CRUD/Competition/Create.vue      |   4 +-
 resources/js/Pages/CRUD/Competition/Edit.vue  |   4 +-
 .../Pages/CRUD/CompetitionPrizes/Create.vue   |   6 +-
 .../js/Pages/CRUD/CompetitionPrizes/Edit.vue  |   6 +-
 .../js/Pages/CRUD/CompetitionTeam/Create.vue  |   6 +-
 .../js/Pages/CRUD/CompetitionTeam/Edit.vue    |   6 +-
 resources/js/Pages/CRUD/Department/Create.vue |   4 +-
 resources/js/Pages/CRUD/Department/Edit.vue   |   4 +-
 resources/js/Pages/CRUD/Edition/Create.vue    |   4 +-
 resources/js/Pages/CRUD/Edition/Edit.vue      |   4 +-
 resources/js/Pages/CRUD/Enrollment/Create.vue |   4 +-
 resources/js/Pages/CRUD/Enrollment/Edit.vue   |   4 +-
 resources/js/Pages/CRUD/Event/Create.vue      |   6 +-
 resources/js/Pages/CRUD/Event/Edit.vue        |   6 +-
 resources/js/Pages/CRUD/EventDay/Create.vue   |   4 +-
 resources/js/Pages/CRUD/EventDay/Edit.vue     |   4 +-
 resources/js/Pages/CRUD/EventType/Create.vue  |   4 +-
 resources/js/Pages/CRUD/EventType/Edit.vue    |   4 +-
 resources/js/Pages/CRUD/Product/Create.vue    |   6 +-
 resources/js/Pages/CRUD/Product/Edit.vue      |   6 +-
 resources/js/Pages/CRUD/Quest/Create.vue      |   4 +-
 resources/js/Pages/CRUD/Quest/Edit.vue        |   4 +-
 resources/js/Pages/CRUD/Slot/Create.vue       |   6 +-
 resources/js/Pages/CRUD/Slot/Edit.vue         |   6 +-
 resources/js/Pages/CRUD/Sponsor/Create.vue    |   4 +-
 resources/js/Pages/CRUD/Sponsor/Edit.vue      |   4 +-
 .../js/Pages/CRUD/SponsorTier/Create.vue      |   6 +-
 resources/js/Pages/CRUD/SponsorTier/Edit.vue  |   6 +-
 resources/js/Pages/CRUD/Staff/Create.vue      |   6 +-
 resources/js/Pages/CRUD/Staff/Edit.vue        |   6 +-
 resources/js/Pages/CRUD/Stand/Create.vue      |   4 +-
 resources/js/Pages/CRUD/Stand/Edit.vue        |   4 +-
 resources/js/Pages/CRUD/User/Create.vue       |   6 +-
 resources/js/Pages/CRUD/User/Edit.vue         |   6 +-
 resources/js/Pages/Competition.vue            |  76 +---------
 resources/js/Pages/Error.vue                  | 143 +++++++++---------
 resources/js/Pages/Event.vue                  |  71 +--------
 resources/js/Pages/Home.vue                   |  68 +--------
 resources/js/Pages/Maintenance.vue            |   2 +-
 .../Pages/Profile/Partials/DeleteUserForm.vue |   4 +-
 .../LogoutOtherBrowserSessionsForm.vue        |   4 +-
 .../Partials/TwoFactorAuthenticationForm.vue  |   6 +-
 .../Profile/Partials/UpdatePasswordForm.vue   |   4 +-
 .../Partials/UpdateProfileInformationForm.vue |  13 +-
 resources/js/Pages/Profile/ScanCode.vue       |  10 +-
 resources/js/Pages/Program.vue                |  42 +----
 resources/js/Pages/Shop.vue                   |  63 ++------
 resources/js/Pages/Team.vue                   |  69 +--------
 resources/js/Types/index.ts                   |  34 +++++
 79 files changed, 435 insertions(+), 597 deletions(-)
 create mode 100644 resources/js/Components/UI/QuickScroll.vue
 create mode 100644 resources/js/Composables/useScroll.ts
 create mode 100644 resources/js/Types/index.ts

diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index c18e76d9..590bebee 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -683,7 +683,26 @@ public function run(): void
         });
 
         $this->command->info('Creating slots and quests');
-        $slots = Slot::factory(15)->create();
+        $slotsData = [
+            ['name' => 'Primeiro Passo', 'total_quests' => 1, 'points' => 10],
+            ['name' => 'Madrugador', 'total_quests' => 2, 'points' => 15],
+            ['name' => 'Veterano da SINF', 'total_quests' => 2, 'points' => 20],
+            ['name' => 'Espreita a Agenda', 'total_quests' => 2, 'points' => 12],
+            ['name' => 'Explorador de Bancas', 'total_quests' => 3, 'points' => 25],
+            ['name' => 'Aficionado de Palestras', 'total_quests' => 3, 'points' => 20],
+            ['name' => 'Mestre do Networking', 'total_quests' => 3, 'points' => 25],
+            ['name' => 'Colecionador de QR Codes', 'total_quests' => 4, 'points' => 30],
+            ['name' => 'Caçador de Tarefas', 'total_quests' => 4, 'points' => 30],
+            ['name' => 'Veterano de Workshops', 'total_quests' => 4, 'points' => 35],
+            ['name' => 'Maratonista SINF', 'total_quests' => 5, 'points' => 40],
+            ['name' => 'Lenda da SINF', 'total_quests' => 6, 'points' => 50],
+        ];
+
+        $slots = collect($slotsData)->map(fn (array $slot) => Slot::create([
+            'name' => $slot['name'],
+            'total_quests' => $slot['total_quests'],
+            'points' => $slot['points'],
+        ]));
 
         $standQuests = $stands->unique('sponsor_id')->map(function ($stand) use ($edition, $slots) {
             $sponsorName = $stand->sponsor?->company?->user?->name ?? 'Empresa';
@@ -729,6 +748,15 @@ public function run(): void
             $enrollment->events()->attach($events->random(rand(2, 5)));
             $enrollment->quests()->attach($allQuests->random(rand(3, 8)));
             $enrollment->products()->attach($products->random(rand(1, 3)));
+
+            // The product attach above already deducted its price from the
+            // balance via a DB trigger, but quest/slot unlocks grant too few
+            // points organically, leaving most balances negative. Set an
+            // explicit, varied positive balance so the shop is actually usable
+            // and so both the "can afford" and "insufficient funds" states
+            // are easy to demo.
+            $enrollment->points = rand(5, 150);
+            $enrollment->save();
         });
 
         $this->command->info('Seeding finished successfully!');
diff --git a/resources/js/Components/Form/ConfirmsPassword.vue b/resources/js/Components/Form/ConfirmsPassword.vue
index 5039f89d..d18227ac 100644
--- a/resources/js/Components/Form/ConfirmsPassword.vue
+++ b/resources/js/Components/Form/ConfirmsPassword.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { ref, reactive, nextTick } from "vue";
 import Modal from "@/Components/UI/Modal.vue";
-import PrimaryButton from "./PrimaryButton.vue";
+import PrimaryButton from "../UI/PrimaryButton.vue";
 import TextInput from "./TextInput.vue";
 import axios from "axios";
 import { route } from "ziggy-js";
 
 interface Props {
-    title: string;
-    content: string;
-    button: string;
+    title?: string;
+    content?: string;
+    button?: string;
 }
 
 interface Emits {
diff --git a/resources/js/Components/Home/InfoPopup.vue b/resources/js/Components/Home/InfoPopup.vue
index aa892acd..00e60d14 100644
--- a/resources/js/Components/Home/InfoPopup.vue
+++ b/resources/js/Components/Home/InfoPopup.vue
@@ -4,7 +4,7 @@ import { inject, onMounted, ref } from "vue";
 import VueCookies from "vue-cookies";
 import { route } from "ziggy-js";
 import { router } from "@inertiajs/vue3";
-import PrimaryButton from "../PrimaryButton.vue";
+import PrimaryButton from "../UI/PrimaryButton.vue";
 
 const options = ref({
     modelValue: false,
diff --git a/resources/js/Components/Navigation/AdminNavbar.vue b/resources/js/Components/Navigation/AdminNavbar.vue
index 71e87cf9..182bf250 100644
--- a/resources/js/Components/Navigation/AdminNavbar.vue
+++ b/resources/js/Components/Navigation/AdminNavbar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import NavLink from "@/Components/NavLink.vue";
-import Dropdown from "@/Components/Dropdown.vue";
-import DropdownLink from "@/Components/DropdownLink.vue";
+import NavLink from "@/Components/Navigation/NavLink.vue";
+import Dropdown from "@/Components/UI/Dropdown.vue";
+import DropdownLink from "@/Components/UI/DropdownLink.vue";
 import { route } from "ziggy-js";
 import { User } from "@lucide/vue";
 
diff --git a/resources/js/Components/Navigation/HamburgerMenu.vue b/resources/js/Components/Navigation/HamburgerMenu.vue
index f5a4dc49..fddad318 100644
--- a/resources/js/Components/Navigation/HamburgerMenu.vue
+++ b/resources/js/Components/Navigation/HamburgerMenu.vue
@@ -2,7 +2,7 @@
 import { ref, watch, onMounted, onUnmounted } from "vue";
 import { Link } from "@inertiajs/vue3";
 import { route, type HasQueryParam } from "ziggy-js";
-import ResponsiveNavLink from "@/Components/ResponsiveNavLink.vue";
+import ResponsiveNavLink from "@/Components/Navigation/ResponsiveNavLink.vue";
 import type Competition from "@/Types/Competition";
 import type { User } from "@/Types/User";
 import PillSelector from "@/Components/UI/PillSelector.vue";
@@ -97,7 +97,7 @@ const getPageRoute = (name: string, query?: HasQueryParam["_query"]) => {
     <PillSelector size="sm" :wrap="false" class="md:hidden">
         <button
             type="button"
-            class="pill-item flex h-7 w-7 items-center justify-center p-0"
+            class="pill-item flex h-7 w-7 items-center justify-center p-0 focus-visible:ring-2 focus-visible:ring-white/20"
             aria-label="Menu"
             @click="internalOpen = !internalOpen"
         >
@@ -136,7 +136,7 @@ const getPageRoute = (name: string, query?: HasQueryParam["_query"]) => {
 
                         <button
                             type="button"
-                            class="flex h-9 w-9 items-center justify-center rounded-xl border border-white/8 bg-white/4 text-neutral-300 transition-colors hover:bg-white/8 hover:text-white focus:outline-none"
+                            class="flex h-9 w-9 items-center justify-center rounded-xl border border-white/8 bg-white/4 text-neutral-300 transition-colors hover:bg-white/8 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white/20"
                             aria-label="Fechar menu"
                             @click="closeMenu"
                         >
diff --git a/resources/js/Components/Navigation/Navbar.vue b/resources/js/Components/Navigation/Navbar.vue
index d6219c87..428bbed4 100644
--- a/resources/js/Components/Navigation/Navbar.vue
+++ b/resources/js/Components/Navigation/Navbar.vue
@@ -4,8 +4,8 @@ import { usePage, router } from "@inertiajs/vue3";
 import { route, type HasQueryParam } from "ziggy-js";
 import { isAdmin as checkIsAdmin, type User } from "@/Types/User";
 import type Competition from "@/Types/Competition";
-import DropdownLink from "@/Components/DropdownLink.vue";
-import HamburgerMenu from "@/Components/HamburgerMenu.vue";
+import DropdownLink from "@/Components/UI/DropdownLink.vue";
+import HamburgerMenu from "@/Components/Navigation/HamburgerMenu.vue";
 import PillSelector, {
     type PillOption,
 } from "@/Components/UI/PillSelector.vue";
diff --git a/resources/js/Components/Profile/AllParticipants.vue b/resources/js/Components/Profile/AllParticipants.vue
index 8364dc58..228044f1 100644
--- a/resources/js/Components/Profile/AllParticipants.vue
+++ b/resources/js/Components/Profile/AllParticipants.vue
@@ -11,7 +11,7 @@ import {
 } from "@lucide/vue";
 import { computed, ref } from "vue";
 import SocialIcon from "@/Components/UI/SocialIcon.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import PillSelector, {
     type PillOption,
 } from "@/Components/UI/PillSelector.vue";
@@ -138,7 +138,8 @@ const filteredParticipants = computed(() => {
                 <button
                     v-if="searchQuery"
                     type="button"
-                    class="absolute top-1/2 right-2.5 -translate-y-1/2 text-neutral-400 hover:text-white"
+                    aria-label="Limpar pesquisa"
+                    class="absolute top-1/2 right-2.5 -translate-y-1/2 text-neutral-400 hover:text-white focus-visible:ring-2 focus-visible:ring-white/20"
                     @click="searchQuery = ''"
                 >
                     <X :size="14" />
diff --git a/resources/js/Components/Profile/CvArea.vue b/resources/js/Components/Profile/CvArea.vue
index 7a75e744..338a7d82 100644
--- a/resources/js/Components/Profile/CvArea.vue
+++ b/resources/js/Components/Profile/CvArea.vue
@@ -11,7 +11,7 @@ import {
 } from "@lucide/vue";
 import { ref, computed } from "vue";
 import { route } from "ziggy-js";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 
 interface Props {
     item: User | undefined;
diff --git a/resources/js/Components/Profile/EnrolledParticipants.vue b/resources/js/Components/Profile/EnrolledParticipants.vue
index 2257ef18..f74fa129 100644
--- a/resources/js/Components/Profile/EnrolledParticipants.vue
+++ b/resources/js/Components/Profile/EnrolledParticipants.vue
@@ -11,7 +11,7 @@ import {
 } from "@lucide/vue";
 import { computed, ref } from "vue";
 import SocialIcon from "@/Components/UI/SocialIcon.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import PillSelector, {
     type PillOption,
 } from "@/Components/UI/PillSelector.vue";
@@ -136,7 +136,8 @@ const filteredVisitors = computed(() => {
                 <button
                     v-if="searchQuery"
                     type="button"
-                    class="absolute top-1/2 right-2.5 -translate-y-1/2 text-neutral-400 hover:text-white"
+                    aria-label="Limpar pesquisa"
+                    class="absolute top-1/2 right-2.5 -translate-y-1/2 text-neutral-400 hover:text-white focus-visible:ring-2 focus-visible:ring-white/20"
                     @click="searchQuery = ''"
                 >
                     <X :size="14" />
diff --git a/resources/js/Components/Profile/ProfileCard.vue b/resources/js/Components/Profile/ProfileCard.vue
index ac82fbce..20906dc1 100644
--- a/resources/js/Components/Profile/ProfileCard.vue
+++ b/resources/js/Components/Profile/ProfileCard.vue
@@ -4,7 +4,7 @@ import { usePage } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import Card from "@/Components/UI/Card.vue";
 import SocialIcon from "@/Components/UI/SocialIcon.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import ProfilePicture from "./ProfilePicture.vue";
 import QRCode from "./QRCode.vue";
 import {
diff --git a/resources/js/Components/Profile/QRCode.vue b/resources/js/Components/Profile/QRCode.vue
index 6804d98f..2ca74a0b 100644
--- a/resources/js/Components/Profile/QRCode.vue
+++ b/resources/js/Components/Profile/QRCode.vue
@@ -4,7 +4,7 @@ import { router } from "@inertiajs/vue3";
 import { QrCode } from "@lucide/vue";
 import { computed, ref } from "vue";
 import Modal from "@/Components/UI/Modal.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import { route } from "ziggy-js";
 
 interface Props {
diff --git a/resources/js/Components/Program/ProgramTimeline.vue b/resources/js/Components/Program/ProgramTimeline.vue
index bc4f3877..716e3aef 100644
--- a/resources/js/Components/Program/ProgramTimeline.vue
+++ b/resources/js/Components/Program/ProgramTimeline.vue
@@ -6,7 +6,7 @@ import type EventDay from "@/Types/EventDay";
 import { isSpeaker, type SpeakerUser } from "@/Types/User";
 import Card from "@/Components/UI/Card.vue";
 import PillSelector from "@/Components/UI/PillSelector.vue";
-import StandDisplay from "@/Components/Program/TimeLine/StandDisplay.vue";
+import StandDisplay from "@/Components/Program/StandDisplay.vue";
 import { ArrowRight } from "@lucide/vue";
 
 interface Props {
diff --git a/resources/js/Components/Shop/ShopItem.vue b/resources/js/Components/Shop/ShopItem.vue
index 8da98fbe..7490bc05 100644
--- a/resources/js/Components/Shop/ShopItem.vue
+++ b/resources/js/Components/Shop/ShopItem.vue
@@ -9,7 +9,7 @@ import Card from "@/Components/UI/Card.vue";
 import PillSelector, {
     type PillOption,
 } from "@/Components/UI/PillSelector.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import { ShoppingBag, Check, Search, Package, Sparkles } from "@lucide/vue";
 
 interface Props {
diff --git a/resources/js/Components/Team/DepartmentSection.vue b/resources/js/Components/Team/DepartmentSection.vue
index 4b9fedd8..aa8e070f 100644
--- a/resources/js/Components/Team/DepartmentSection.vue
+++ b/resources/js/Components/Team/DepartmentSection.vue
@@ -21,7 +21,7 @@ withDefaults(defineProps<Props>(), {
     >
         <div
             v-if="showHeader"
-            class="mb-4 flex items-center justify-center sm:justify-start sm:mb-6"
+            class="mb-4 flex items-center justify-center sm:mb-6 sm:justify-start"
         >
             <PillSelector
                 :items="[
diff --git a/resources/js/Components/UI/Banner.vue b/resources/js/Components/UI/Banner.vue
index 19500fd1..e65448b2 100644
--- a/resources/js/Components/UI/Banner.vue
+++ b/resources/js/Components/UI/Banner.vue
@@ -41,7 +41,7 @@ watch(id, async () => {
 
                 <button
                     type="button"
-                    class="ml-auto flex h-8 w-8 cursor-pointer items-center justify-center text-white hover:opacity-80"
+                    class="ml-auto flex h-8 w-8 cursor-pointer items-center justify-center text-white hover:opacity-80 focus-visible:ring-2 focus-visible:ring-white/20"
                     aria-label="Dismiss"
                     @click.prevent="show = false"
                 >
diff --git a/resources/js/Components/UI/Modal.vue b/resources/js/Components/UI/Modal.vue
index 08c635a6..6ef6b6d6 100644
--- a/resources/js/Components/UI/Modal.vue
+++ b/resources/js/Components/UI/Modal.vue
@@ -89,7 +89,7 @@ const handleClose = () => {
         <button
             v-if="closeable && showCloseButton"
             type="button"
-            class="pill-container absolute top-4 right-4 z-20 h-8 w-8 cursor-pointer justify-center text-neutral-400 transition-colors hover:text-white"
+            class="pill-container absolute top-4 right-4 z-20 h-8 w-8 cursor-pointer justify-center text-neutral-400 transition-colors hover:text-white focus-visible:ring-2 focus-visible:ring-white/20"
             aria-label="Fechar"
             @click="handleClose"
         >
diff --git a/resources/js/Components/UI/PillSelector.vue b/resources/js/Components/UI/PillSelector.vue
index 5ea49b40..13ff6ab1 100644
--- a/resources/js/Components/UI/PillSelector.vue
+++ b/resources/js/Components/UI/PillSelector.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { Component } from "vue";
 import { Link } from "@inertiajs/vue3";
-import Dropdown from "@/Components/Dropdown.vue";
-import DropdownLink from "@/Components/DropdownLink.vue";
+import Dropdown from "@/Components/UI/Dropdown.vue";
+import DropdownLink from "@/Components/UI/DropdownLink.vue";
 import { ChevronDown } from "@lucide/vue";
 
 export interface PillDropdownItem {
diff --git a/resources/js/Components/UI/QuickScroll.vue b/resources/js/Components/UI/QuickScroll.vue
new file mode 100644
index 00000000..43e1573e
--- /dev/null
+++ b/resources/js/Components/UI/QuickScroll.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ArrowUp, ArrowDown } from "@lucide/vue";
+import { useScroll, type QuickScrollMode } from "@/Composables/useScroll";
+
+const props = withDefaults(
+    defineProps<{
+        mode?: QuickScrollMode;
+    }>(),
+    { mode: "sections" },
+);
+
+const { isAtBottom, shouldShow, handleClick } = useScroll(props.mode);
+</script>
+
+<template>
+    <Transition
+        enter-active-class="transition duration-200 ease-out"
+        enter-from-class="opacity-0 translate-y-2 scale-90"
+        enter-to-class="opacity-100 translate-y-0 scale-100"
+        leave-active-class="transition duration-150 ease-in"
+        leave-from-class="opacity-100 translate-y-0 scale-100"
+        leave-to-class="opacity-0 translate-y-2 scale-90"
+    >
+        <button
+            v-if="shouldShow"
+            type="button"
+            :aria-label="isAtBottom ? 'Voltar ao topo' : 'Próxima secção'"
+            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 cursor-pointer justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white/20 active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
+            @click="handleClick"
+        >
+            <ArrowUp v-if="mode === 'top' || isAtBottom" :size="16" />
+            <ArrowDown v-else :size="16" />
+        </button>
+    </Transition>
+</template>
diff --git a/resources/js/Composables/useScroll.ts b/resources/js/Composables/useScroll.ts
new file mode 100644
index 00000000..91d5bac7
--- /dev/null
+++ b/resources/js/Composables/useScroll.ts
@@ -0,0 +1,82 @@
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+
+export type QuickScrollMode = "sections" | "top";
+
+const NAV_OFFSET = 70;
+
+export function useScroll(mode: QuickScrollMode = "top") {
+    const isAtBottom = ref(false);
+    const isScrolled = ref(false);
+
+    const shouldShow = computed(() =>
+        mode === "top" ? isScrolled.value : true,
+    );
+
+    function updateScrollState() {
+        const scrollY = window.scrollY || window.pageYOffset;
+        const windowHeight = window.innerHeight;
+        const documentHeight = document.documentElement.scrollHeight;
+
+        isAtBottom.value = scrollY + windowHeight >= documentHeight - 60;
+        isScrolled.value = scrollY > 400;
+    }
+
+    function scrollToTop() {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+    }
+
+    function scrollToNextSection(): boolean {
+        const sections = Array.from(
+            document.querySelectorAll<HTMLElement>("section"),
+        );
+        if (!sections.length) return false;
+
+        const currentY = window.scrollY || window.pageYOffset;
+
+        const nextSection = sections.find((section) => {
+            const top = section.getBoundingClientRect().top + currentY;
+            return top > currentY + NAV_OFFSET + 20;
+        });
+
+        if (nextSection) {
+            const targetY =
+                nextSection.getBoundingClientRect().top + currentY - NAV_OFFSET;
+            window.scrollTo({ top: targetY, behavior: "smooth" });
+        } else {
+            window.scrollTo({
+                top: document.documentElement.scrollHeight,
+                behavior: "smooth",
+            });
+        }
+        return true;
+    }
+
+    function handleClick() {
+        if (mode === "top") {
+            scrollToTop();
+            return;
+        }
+
+        if (isAtBottom.value) {
+            scrollToTop();
+            return;
+        }
+
+        scrollToNextSection();
+    }
+
+    onMounted(() => {
+        updateScrollState();
+        window.addEventListener("scroll", updateScrollState, { passive: true });
+        window.addEventListener("resize", updateScrollState, { passive: true });
+    });
+
+    onBeforeUnmount(() => {
+        window.removeEventListener("scroll", updateScrollState);
+        window.removeEventListener("resize", updateScrollState);
+    });
+
+    return { isAtBottom, isScrolled, shouldShow, handleClick };
+}
+
+export default useScroll;
diff --git a/resources/js/Layouts/AdminLayout.vue b/resources/js/Layouts/AdminLayout.vue
index 15971cf5..bd8ffd37 100644
--- a/resources/js/Layouts/AdminLayout.vue
+++ b/resources/js/Layouts/AdminLayout.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { Head } from "@inertiajs/vue3";
-import AdminNavbar from "@/Components/AdminNavbar.vue";
-import Footer from "../Components/Footer.vue";
-import Banner from "@/Components/Banner.vue";
+import AdminNavbar from "@/Components/Navigation/AdminNavbar.vue";
+import Footer from "@/Components/Navigation/Footer.vue";
+import Banner from "@/Components/UI/Banner.vue";
 
 interface Props {
     title: string;
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index acdbd3dc..aa4546fd 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { Head } from "@inertiajs/vue3";
-import Navbar from "@/Components/Navbar.vue";
-import Footer from "@/Components/Footer.vue";
-import GlowingOrbs from "@/Components/GlowingOrbs.vue";
+import Navbar from "@/Components/Navigation/Navbar.vue";
+import Footer from "@/Components/Navigation/Footer.vue";
+import GlowingOrbs from "@/Components/UI/GlowingOrbs.vue";
 
 interface Props {
     title: string;
diff --git a/resources/js/Layouts/CRUDLayout.vue b/resources/js/Layouts/CRUDLayout.vue
index e8389632..82232f49 100644
--- a/resources/js/Layouts/CRUDLayout.vue
+++ b/resources/js/Layouts/CRUDLayout.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts" generic="T extends Model">
 import Table from "@/Components/CRUD/Table.vue";
-import PaginationLinks from "@/Components/PaginationLinks.vue";
+import PaginationLinks from "@/Components/UI/PaginationLinks.vue";
 import type Model from "@/Types/Model";
 import type Paginated from "@/Types/Paginated";
 import AdminLayout from "./AdminLayout.vue";
 import { Link } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import TextInput from "@/Components/TextInput.vue";
-import useSearch from "@/composables/useSearch";
+import TextInput from "@/Components/Form/TextInput.vue";
+import useSearch from "@/Composables/useSearch";
 
 defineProps<{
     items: Paginated<T>;
diff --git a/resources/js/Pages/Admin.vue b/resources/js/Pages/Admin.vue
index 6bd975d6..8c1e94b3 100644
--- a/resources/js/Pages/Admin.vue
+++ b/resources/js/Pages/Admin.vue
@@ -38,5 +38,3 @@ const pageRoutes = {
         </div>
     </AdminLayout>
 </template>
-
-<style></style>
diff --git a/resources/js/Pages/Auth/ConfirmPassword.vue b/resources/js/Pages/Auth/ConfirmPassword.vue
index f5b7d5dc..84d9dddc 100644
--- a/resources/js/Pages/Auth/ConfirmPassword.vue
+++ b/resources/js/Pages/Auth/ConfirmPassword.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useForm } from "@inertiajs/vue3";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import AuthLayout from "@/Layouts/AuthLayout.vue";
 import { Lock } from "@lucide/vue";
 import { route } from "ziggy-js";
diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
index 4e3c50bb..b3835274 100644
--- a/resources/js/Pages/Auth/ForgotPassword.vue
+++ b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Link, useForm } from "@inertiajs/vue3";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import AuthLayout from "@/Layouts/AuthLayout.vue";
 import { KeyRound } from "@lucide/vue";
 import { route } from "ziggy-js";
diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
index e2e340bc..f8a9b198 100644
--- a/resources/js/Pages/Auth/Login.vue
+++ b/resources/js/Pages/Auth/Login.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { Link, useForm } from "@inertiajs/vue3";
-import Checkbox from "@/Components/Checkbox.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import Checkbox from "@/Components/Form/Checkbox.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import AuthLayout from "@/Layouts/AuthLayout.vue";
 import { LogIn } from "@lucide/vue";
 import { route } from "ziggy-js";
diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
index 1303854e..4e0b1942 100644
--- a/resources/js/Pages/Auth/Register.vue
+++ b/resources/js/Pages/Auth/Register.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useForm } from "@inertiajs/vue3";
-import Checkbox from "@/Components/Checkbox.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import Checkbox from "@/Components/Form/Checkbox.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import AuthLayout from "@/Layouts/AuthLayout.vue";
 import { AlertCircle, UserPlus } from "@lucide/vue";
 import { route } from "ziggy-js";
diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
index 41d43b2b..80ce0e6d 100644
--- a/resources/js/Pages/Auth/ResetPassword.vue
+++ b/resources/js/Pages/Auth/ResetPassword.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Link, useForm } from "@inertiajs/vue3";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import AuthLayout from "@/Layouts/AuthLayout.vue";
 import { KeyRound } from "@lucide/vue";
 import { route } from "ziggy-js";
diff --git a/resources/js/Pages/Auth/TwoFactorChallenge.vue b/resources/js/Pages/Auth/TwoFactorChallenge.vue
index 0251f2f2..4c73b0b6 100644
--- a/resources/js/Pages/Auth/TwoFactorChallenge.vue
+++ b/resources/js/Pages/Auth/TwoFactorChallenge.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { nextTick, ref } from "vue";
 import { useForm } from "@inertiajs/vue3";
-import CodeInput from "@/Components/CodeInput.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import CodeInput from "@/Components/Form/CodeInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import AuthLayout from "@/Layouts/AuthLayout.vue";
 import { Smartphone, KeyRound } from "@lucide/vue";
 import { route } from "ziggy-js";
diff --git a/resources/js/Pages/Auth/VerifyEmail.vue b/resources/js/Pages/Auth/VerifyEmail.vue
index 0ff39cb5..29cd8da1 100644
--- a/resources/js/Pages/Auth/VerifyEmail.vue
+++ b/resources/js/Pages/Auth/VerifyEmail.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { Link, useForm } from "@inertiajs/vue3";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import AuthLayout from "@/Layouts/AuthLayout.vue";
 import { MailCheck } from "@lucide/vue";
 import { route } from "ziggy-js";
diff --git a/resources/js/Pages/CRUD/Competition/Create.vue b/resources/js/Pages/CRUD/Competition/Create.vue
index 6a5acb4c..3d50508e 100644
--- a/resources/js/Pages/CRUD/Competition/Create.vue
+++ b/resources/js/Pages/CRUD/Competition/Create.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import type Edition from "@/Types/Edition";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
diff --git a/resources/js/Pages/CRUD/Competition/Edit.vue b/resources/js/Pages/CRUD/Competition/Edit.vue
index 2e110922..3d2226b2 100644
--- a/resources/js/Pages/CRUD/Competition/Edit.vue
+++ b/resources/js/Pages/CRUD/Competition/Edit.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import type Edition from "@/Types/Edition";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
diff --git a/resources/js/Pages/CRUD/CompetitionPrizes/Create.vue b/resources/js/Pages/CRUD/CompetitionPrizes/Create.vue
index 974084d3..2ea8dd23 100644
--- a/resources/js/Pages/CRUD/CompetitionPrizes/Create.vue
+++ b/resources/js/Pages/CRUD/CompetitionPrizes/Create.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import type Competition from "@/Types/Competition";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import ImageInput from "@/Components/ImageInput.vue";
+import ImageInput from "@/Components/Form/ImageInput.vue";
 
 interface Props {
     with: {
diff --git a/resources/js/Pages/CRUD/CompetitionPrizes/Edit.vue b/resources/js/Pages/CRUD/CompetitionPrizes/Edit.vue
index 7f26d640..6edcaf94 100644
--- a/resources/js/Pages/CRUD/CompetitionPrizes/Edit.vue
+++ b/resources/js/Pages/CRUD/CompetitionPrizes/Edit.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import type Competition from "@/Types/Competition";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import ImageInput from "@/Components/ImageInput.vue";
+import ImageInput from "@/Components/Form/ImageInput.vue";
 import type Participant from "@/Types/Participant";
 import type { CompetitionPrizes } from "@/Types/Competition";
 
diff --git a/resources/js/Pages/CRUD/CompetitionTeam/Create.vue b/resources/js/Pages/CRUD/CompetitionTeam/Create.vue
index d59ffb75..811f4950 100644
--- a/resources/js/Pages/CRUD/CompetitionTeam/Create.vue
+++ b/resources/js/Pages/CRUD/CompetitionTeam/Create.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import type Competition from "@/Types/Competition";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import ImageInput from "@/Components/ImageInput.vue";
+import ImageInput from "@/Components/Form/ImageInput.vue";
 import type Participant from "@/Types/Participant";
 
 interface Props {
diff --git a/resources/js/Pages/CRUD/CompetitionTeam/Edit.vue b/resources/js/Pages/CRUD/CompetitionTeam/Edit.vue
index 8278a5b4..0a66f900 100644
--- a/resources/js/Pages/CRUD/CompetitionTeam/Edit.vue
+++ b/resources/js/Pages/CRUD/CompetitionTeam/Edit.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import type Competition from "@/Types/Competition";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import type CompetitionTeam from "@/Types/CompetitionTeam";
-import ImageInput from "@/Components/ImageInput.vue";
+import ImageInput from "@/Components/Form/ImageInput.vue";
 import type Participant from "@/Types/Participant";
 
 interface Props {
diff --git a/resources/js/Pages/CRUD/Department/Create.vue b/resources/js/Pages/CRUD/Department/Create.vue
index b662b9ce..d7a6ffa9 100644
--- a/resources/js/Pages/CRUD/Department/Create.vue
+++ b/resources/js/Pages/CRUD/Department/Create.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import type Edition from "@/Types/Edition";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
diff --git a/resources/js/Pages/CRUD/Department/Edit.vue b/resources/js/Pages/CRUD/Department/Edit.vue
index c87f2899..96a24efc 100644
--- a/resources/js/Pages/CRUD/Department/Edit.vue
+++ b/resources/js/Pages/CRUD/Department/Edit.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import type Edition from "@/Types/Edition";
 import type Department from "@/Types/Department";
 import { useForm } from "@inertiajs/vue3";
diff --git a/resources/js/Pages/CRUD/Edition/Create.vue b/resources/js/Pages/CRUD/Edition/Create.vue
index 4456c8a1..ff628e5d 100644
--- a/resources/js/Pages/CRUD/Edition/Create.vue
+++ b/resources/js/Pages/CRUD/Edition/Create.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
diff --git a/resources/js/Pages/CRUD/Edition/Edit.vue b/resources/js/Pages/CRUD/Edition/Edit.vue
index 9055545d..db8645f1 100644
--- a/resources/js/Pages/CRUD/Edition/Edit.vue
+++ b/resources/js/Pages/CRUD/Edition/Edit.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import type Edition from "@/Types/Edition";
 import { useForm } from "@inertiajs/vue3";
diff --git a/resources/js/Pages/CRUD/Enrollment/Create.vue b/resources/js/Pages/CRUD/Enrollment/Create.vue
index 23b374dc..1f54828a 100644
--- a/resources/js/Pages/CRUD/Enrollment/Create.vue
+++ b/resources/js/Pages/CRUD/Enrollment/Create.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type Participant from "@/Types/Participant";
 import type Edition from "@/Types/Edition";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 
diff --git a/resources/js/Pages/CRUD/Enrollment/Edit.vue b/resources/js/Pages/CRUD/Enrollment/Edit.vue
index 45bae34a..c45db8bb 100644
--- a/resources/js/Pages/CRUD/Enrollment/Edit.vue
+++ b/resources/js/Pages/CRUD/Enrollment/Edit.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type Participant from "@/Types/Participant";
 import type Edition from "@/Types/Edition";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import type Enrollment from "@/Types/Enrollment";
diff --git a/resources/js/Pages/CRUD/Event/Create.vue b/resources/js/Pages/CRUD/Event/Create.vue
index 6d98b4dd..814a5cbf 100644
--- a/resources/js/Pages/CRUD/Event/Create.vue
+++ b/resources/js/Pages/CRUD/Event/Create.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import type EventDay from "@/Types/EventDay";
 import type EventType from "@/Types/EventType";
 import type { User } from "@/Types/User";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import Checkbox from "@/Components/Checkbox.vue";
+import Checkbox from "@/Components/Form/Checkbox.vue";
 
 interface Props {
     with: {
diff --git a/resources/js/Pages/CRUD/Event/Edit.vue b/resources/js/Pages/CRUD/Event/Edit.vue
index c9e11bfe..88ee6e0c 100644
--- a/resources/js/Pages/CRUD/Event/Edit.vue
+++ b/resources/js/Pages/CRUD/Event/Edit.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import type Event from "@/Types/Event";
 import type EventDay from "@/Types/EventDay";
@@ -8,7 +8,7 @@ import type EventType from "@/Types/EventType";
 import type { User } from "@/Types/User";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import Checkbox from "@/Components/Checkbox.vue";
+import Checkbox from "@/Components/Form/Checkbox.vue";
 
 interface Props {
     item: Event;
diff --git a/resources/js/Pages/CRUD/EventDay/Create.vue b/resources/js/Pages/CRUD/EventDay/Create.vue
index 0e59303a..05ec1436 100644
--- a/resources/js/Pages/CRUD/EventDay/Create.vue
+++ b/resources/js/Pages/CRUD/EventDay/Create.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import type Edition from "@/Types/Edition";
 import { useForm } from "@inertiajs/vue3";
 import { computed } from "vue";
 import { route } from "ziggy-js";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 
 interface Props {
     with: {
diff --git a/resources/js/Pages/CRUD/EventDay/Edit.vue b/resources/js/Pages/CRUD/EventDay/Edit.vue
index 4515915d..48186760 100644
--- a/resources/js/Pages/CRUD/EventDay/Edit.vue
+++ b/resources/js/Pages/CRUD/EventDay/Edit.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import type Edition from "@/Types/Edition";
 import type EventDay from "@/Types/EventDay";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 
 interface Props {
     item: EventDay;
diff --git a/resources/js/Pages/CRUD/EventType/Create.vue b/resources/js/Pages/CRUD/EventType/Create.vue
index 81d190c2..46ef86c9 100644
--- a/resources/js/Pages/CRUD/EventType/Create.vue
+++ b/resources/js/Pages/CRUD/EventType/Create.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 
 const form = useForm({
     name: "",
diff --git a/resources/js/Pages/CRUD/EventType/Edit.vue b/resources/js/Pages/CRUD/EventType/Edit.vue
index d9d946d9..56a1e385 100644
--- a/resources/js/Pages/CRUD/EventType/Edit.vue
+++ b/resources/js/Pages/CRUD/EventType/Edit.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import type EventType from "@/Types/EventType";
 
 interface Props {
diff --git a/resources/js/Pages/CRUD/Product/Create.vue b/resources/js/Pages/CRUD/Product/Create.vue
index 6125a896..9ecbdddf 100644
--- a/resources/js/Pages/CRUD/Product/Create.vue
+++ b/resources/js/Pages/CRUD/Product/Create.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import ImageInput from "@/Components/ImageInput.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import ImageInput from "@/Components/Form/ImageInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import type Edition from "@/Types/Edition";
 import { useForm } from "@inertiajs/vue3";
diff --git a/resources/js/Pages/CRUD/Product/Edit.vue b/resources/js/Pages/CRUD/Product/Edit.vue
index a9284ac0..23833a94 100644
--- a/resources/js/Pages/CRUD/Product/Edit.vue
+++ b/resources/js/Pages/CRUD/Product/Edit.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import ImageInput from "@/Components/ImageInput.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import ImageInput from "@/Components/Form/ImageInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import type Edition from "@/Types/Edition";
 import type Product from "@/Types/Product";
diff --git a/resources/js/Pages/CRUD/Quest/Create.vue b/resources/js/Pages/CRUD/Quest/Create.vue
index 751cb57a..f56eb2fc 100644
--- a/resources/js/Pages/CRUD/Quest/Create.vue
+++ b/resources/js/Pages/CRUD/Quest/Create.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import type Edition from "@/Types/Edition";
 import type Event from "@/Types/Event";
diff --git a/resources/js/Pages/CRUD/Quest/Edit.vue b/resources/js/Pages/CRUD/Quest/Edit.vue
index b9c2bef2..5c81ee6a 100644
--- a/resources/js/Pages/CRUD/Quest/Edit.vue
+++ b/resources/js/Pages/CRUD/Quest/Edit.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import type Edition from "@/Types/Edition";
 import type Event from "@/Types/Event";
diff --git a/resources/js/Pages/CRUD/Slot/Create.vue b/resources/js/Pages/CRUD/Slot/Create.vue
index b85abcea..25053daf 100644
--- a/resources/js/Pages/CRUD/Slot/Create.vue
+++ b/resources/js/Pages/CRUD/Slot/Create.vue
@@ -3,9 +3,9 @@ import type Quest from "@/Types/Quest";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import CardLayout from "@/Layouts/CardLayout.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
-import ImageInput from "@/Components/ImageInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
+import ImageInput from "@/Components/Form/ImageInput.vue";
 
 interface Props {
     with: {
diff --git a/resources/js/Pages/CRUD/Slot/Edit.vue b/resources/js/Pages/CRUD/Slot/Edit.vue
index 5280d774..0684c574 100644
--- a/resources/js/Pages/CRUD/Slot/Edit.vue
+++ b/resources/js/Pages/CRUD/Slot/Edit.vue
@@ -3,10 +3,10 @@ import type Quest from "@/Types/Quest";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import CardLayout from "@/Layouts/CardLayout.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import type Slot from "@/Types/Slot";
-import ImageInput from "@/Components/ImageInput.vue";
+import ImageInput from "@/Components/Form/ImageInput.vue";
 
 interface Props {
     item: Slot;
diff --git a/resources/js/Pages/CRUD/Sponsor/Create.vue b/resources/js/Pages/CRUD/Sponsor/Create.vue
index 29cc50f1..3343b801 100644
--- a/resources/js/Pages/CRUD/Sponsor/Create.vue
+++ b/resources/js/Pages/CRUD/Sponsor/Create.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import type Company from "@/Types/Company";
 import type Edition from "@/Types/Edition";
diff --git a/resources/js/Pages/CRUD/Sponsor/Edit.vue b/resources/js/Pages/CRUD/Sponsor/Edit.vue
index b5e0a622..0d369e0f 100644
--- a/resources/js/Pages/CRUD/Sponsor/Edit.vue
+++ b/resources/js/Pages/CRUD/Sponsor/Edit.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import type Company from "@/Types/Company";
 import type Edition from "@/Types/Edition";
diff --git a/resources/js/Pages/CRUD/SponsorTier/Create.vue b/resources/js/Pages/CRUD/SponsorTier/Create.vue
index a5ec02c4..4fe7a108 100644
--- a/resources/js/Pages/CRUD/SponsorTier/Create.vue
+++ b/resources/js/Pages/CRUD/SponsorTier/Create.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import type Edition from "@/Types/Edition";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import Checkbox from "@/Components/Checkbox.vue";
+import Checkbox from "@/Components/Form/Checkbox.vue";
 
 interface Props {
     with: {
diff --git a/resources/js/Pages/CRUD/SponsorTier/Edit.vue b/resources/js/Pages/CRUD/SponsorTier/Edit.vue
index 90b83c99..13d43864 100644
--- a/resources/js/Pages/CRUD/SponsorTier/Edit.vue
+++ b/resources/js/Pages/CRUD/SponsorTier/Edit.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import type Edition from "@/Types/Edition";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import Checkbox from "@/Components/Checkbox.vue";
+import Checkbox from "@/Components/Form/Checkbox.vue";
 import type SponsorTier from "@/Types/SponsorTier";
 
 interface Props {
diff --git a/resources/js/Pages/CRUD/Staff/Create.vue b/resources/js/Pages/CRUD/Staff/Create.vue
index 9f69f81a..e92da50c 100644
--- a/resources/js/Pages/CRUD/Staff/Create.vue
+++ b/resources/js/Pages/CRUD/Staff/Create.vue
@@ -2,13 +2,13 @@
 import type Participant from "@/Types/Participant";
 import type Edition from "@/Types/Edition";
 import type Department from "@/Types/Department";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
-import Checkbox from "@/Components/Checkbox.vue";
+import Checkbox from "@/Components/Form/Checkbox.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import { computed } from "vue";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 
 interface Props {
     with: {
diff --git a/resources/js/Pages/CRUD/Staff/Edit.vue b/resources/js/Pages/CRUD/Staff/Edit.vue
index ab5ede84..dcce8f25 100644
--- a/resources/js/Pages/CRUD/Staff/Edit.vue
+++ b/resources/js/Pages/CRUD/Staff/Edit.vue
@@ -3,13 +3,13 @@ import type Participant from "@/Types/Participant";
 import type Staff from "@/Types/Staff";
 import type Edition from "@/Types/Edition";
 import type Department from "@/Types/Department";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
-import Checkbox from "@/Components/Checkbox.vue";
+import Checkbox from "@/Components/Form/Checkbox.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import { computed } from "vue";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 
 interface Props {
     item: Staff;
diff --git a/resources/js/Pages/CRUD/Stand/Create.vue b/resources/js/Pages/CRUD/Stand/Create.vue
index 3e8f583e..cdc9298b 100644
--- a/resources/js/Pages/CRUD/Stand/Create.vue
+++ b/resources/js/Pages/CRUD/Stand/Create.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import type EventDay from "@/Types/EventDay";
 import type Sponsor from "@/Types/Sponsor";
diff --git a/resources/js/Pages/CRUD/Stand/Edit.vue b/resources/js/Pages/CRUD/Stand/Edit.vue
index 2f6ff987..cde415a0 100644
--- a/resources/js/Pages/CRUD/Stand/Edit.vue
+++ b/resources/js/Pages/CRUD/Stand/Edit.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import type EventDay from "@/Types/EventDay";
 import type Sponsor from "@/Types/Sponsor";
diff --git a/resources/js/Pages/CRUD/User/Create.vue b/resources/js/Pages/CRUD/User/Create.vue
index be09c5fc..7995ec7d 100644
--- a/resources/js/Pages/CRUD/User/Create.vue
+++ b/resources/js/Pages/CRUD/User/Create.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import ImageInput from "@/Components/ImageInput.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import ImageInput from "@/Components/Form/ImageInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
diff --git a/resources/js/Pages/CRUD/User/Edit.vue b/resources/js/Pages/CRUD/User/Edit.vue
index de225a93..50496b21 100644
--- a/resources/js/Pages/CRUD/User/Edit.vue
+++ b/resources/js/Pages/CRUD/User/Edit.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import ImageInput from "@/Components/ImageInput.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import ImageInput from "@/Components/Form/ImageInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import CardLayout from "@/Layouts/CardLayout.vue";
 import {
     type User,
diff --git a/resources/js/Pages/Competition.vue b/resources/js/Pages/Competition.vue
index 6165b662..c87e4fc7 100644
--- a/resources/js/Pages/Competition.vue
+++ b/resources/js/Pages/Competition.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { computed, ref } from "vue";
 import { router, usePage } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import AppLayout from "@/Layouts/AppLayout.vue";
@@ -9,11 +9,11 @@ import type Competition from "@/Types/Competition";
 import type { CompetitionPrizes } from "@/Types/Competition";
 import { type User } from "@/Types/User";
 import Card from "@/Components/UI/Card.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import QuickScroll from "@/Components/UI/QuickScroll.vue";
 import PillSelector, {
     type PillOption,
 } from "@/Components/UI/PillSelector.vue";
-import { ExternalLink, ArrowRight, ArrowUp, ArrowDown } from "@lucide/vue";
 
 interface Props {
     competition: Competition;
@@ -126,79 +126,16 @@ const defaultTab = computed<CompetitionTab>(() => {
 });
 
 const activeTab = ref<CompetitionTab>(defaultTab.value);
-
-const isAtBottom = ref(false);
-
-function updateScrollState() {
-    const scrollY = window.scrollY || window.pageYOffset;
-    const windowHeight = window.innerHeight;
-    const documentHeight = document.documentElement.scrollHeight;
-
-    isAtBottom.value = scrollY + windowHeight >= documentHeight - 60;
-}
-
-function handleQuickScroll() {
-    if (isAtBottom.value) {
-        window.scrollTo({ top: 0, behavior: "smooth" });
-        return;
-    }
-
-    const sections = Array.from(
-        document.querySelectorAll<HTMLElement>("section"),
-    );
-    if (!sections.length) return;
-
-    const currentY = window.scrollY || window.pageYOffset;
-    const navOffset = 70;
-
-    const nextSection = sections.find((section) => {
-        const top = section.getBoundingClientRect().top + currentY;
-        return top > currentY + navOffset + 20;
-    });
-
-    if (nextSection) {
-        const targetY =
-            nextSection.getBoundingClientRect().top + currentY - navOffset;
-        window.scrollTo({ top: targetY, behavior: "smooth" });
-    } else {
-        window.scrollTo({
-            top: document.documentElement.scrollHeight,
-            behavior: "smooth",
-        });
-    }
-}
-
-onMounted(() => {
-    updateScrollState();
-    window.addEventListener("scroll", updateScrollState, { passive: true });
-    window.addEventListener("resize", updateScrollState, { passive: true });
-});
-
-onBeforeUnmount(() => {
-    window.removeEventListener("scroll", updateScrollState);
-    window.removeEventListener("resize", updateScrollState);
-});
 </script>
 
 <template>
     <AppLayout :title="competition.name">
-        <button
-            type="button"
-            :aria-label="
-                isAtBottom ? 'Scroll to top' : 'Scroll to next section'
-            "
-            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 cursor-pointer justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
-            @click="handleQuickScroll"
-        >
-            <ArrowUp v-if="isAtBottom" :size="16" />
-            <ArrowDown v-else :size="16" />
-        </button>
+        <QuickScroll mode="sections" />
 
         <div
             class="relative mx-auto w-full max-w-7xl space-y-12 px-4 pt-4 pb-12 sm:space-y-16 sm:px-6 sm:pb-16 lg:px-8 lg:pt-8"
         >
             <header class="relative overflow-hidden pt-2 pb-6 sm:pt-4 sm:pb-10">
-
                 <div
                     class="relative grid grid-cols-1 items-start gap-10 lg:grid-cols-12 lg:gap-12"
                 >
@@ -283,8 +220,9 @@ onBeforeUnmount(() => {
                                 <template
                                     v-else-if="competition.registration_link"
                                 >
-                                    As inscrições de equipas estão abertas. Junta
-                                    os teus colegas e submete a tua inscrição.
+                                    As inscrições de equipas estão abertas.
+                                    Junta os teus colegas e submete a tua
+                                    inscrição.
                                 </template>
                                 <template v-else>
                                     As inscrições de equipas para este desafio
diff --git a/resources/js/Pages/Error.vue b/resources/js/Pages/Error.vue
index 71abee92..e18635c1 100644
--- a/resources/js/Pages/Error.vue
+++ b/resources/js/Pages/Error.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import GlowingOrbs from "@/Components/UI/GlowingOrbs.vue";
 import { Head } from "@inertiajs/vue3";
 import { computed } from "vue";
 
@@ -13,87 +14,83 @@ const goBack = () => {
     window.history.back();
 };
 
-const description = computed(() => {
-    return {
-        500: "Whoops, something went wrong on our servers.",
-        404: "Sorry, the page you are looking for could not be found.",
-        403: "Sorry, you are forbidden from accessing this page.",
-    }[props.status];
-});
+const descriptions: Record<number, string[]> = {
+    500: [
+        "Algo correu mal nos nossos servidores.",
+        "Podes tentar novamente daqui a uns minutos.",
+    ],
+    404: [
+        "Não encontrámos a página que procuras.",
+        "O endereço pode estar errado ou a página pode ter sido movida.",
+    ],
+    403: [
+        "Não tens permissão para aceder a esta página.",
+        "Se acreditas que isto é um erro, contacta-nos.",
+    ],
+};
+
+const messages = computed(
+    () => descriptions[props.status] ?? ["Ocorreu um erro inesperado."],
+);
 </script>
 
 <template>
     <Head :title="props.status.toString()" />
-    <main class="bg-2023-bg min-h-screen">
-        <div
-            class="flex min-h-screen flex-col content-center items-center justify-center gap-44 py-16"
-        >
-            <img
-                id="svg-1"
-                class="animate-2023-maintenance-jump max-ml:hidden absolute left-[7%] w-36 opacity-50"
-                src="/../images/cy-sinf.svg"
-                alt="Stylized SINF logo"
-            />
-            <img
-                id="svg-2"
-                class="animate-2023-maintenance-jump max-ml:hidden absolute top-16 right-[7%] w-32 opacity-50"
-                src="/../images/rc-sinf.svg"
-                alt="Stylized SINF logo"
-            />
-            <img
-                id="svg-3"
-                class="animate-2023-maintenance-jump max-ml:hidden absolute right-[15%] bottom-28 w-20 opacity-50"
-                src="/../images/oc-sinf.svg"
-                alt="Stylized SINF logo"
-            />
 
-            <div class="relative">
+    <div class="relative min-h-screen bg-olive-950 text-white">
+        <GlowingOrbs />
+
+        <main
+            class="relative z-10 flex min-h-screen flex-col items-center justify-center px-4 py-16"
+        >
+            <div class="relative flex flex-col items-center text-center">
                 <img
-                    class="max-ml:w-72 w-96"
-                    src="/../images/sinf logo.png"
-                    alt="Stylized SINF logo"
+                    class="h-24 p-2 select-none sm:h-32"
+                    src="/images/sinf2026.svg"
+                    alt="SINF 2026 logo"
                 />
-                <span
-                    class="margin-0 text-2023-teal absolute right-0 -bottom-5 text-xl font-bold"
-                    >2023</span
-                >
-            </div>
 
-            <div
-                class="text-2023-teal-dark flex w-fit flex-col items-center gap-7 text-center"
-            >
-                <h1 class="text-8xl">{{ props.status }}</h1>
-                <p>{{ description }}</p>
-                <PrimaryButton
-                    class="w-fit"
-                    text-size="text-xl"
-                    @click="goBack()"
+                <h1
+                    class="mt-10 bg-linear-to-r from-white to-white/40 bg-clip-text text-[7rem] leading-none font-bold text-transparent select-none sm:text-[10rem]"
                 >
-                    Regressar
-                </PrimaryButton>
-            </div>
-            <div class="text-2023-teal-dark text-center text-lg">
-                <p class="font-bold">Mais informações</p>
-                <p>geral@sinf.pt</p>
-            </div>
-        </div>
-    </main>
-</template>
+                    {{ props.status }}
+                </h1>
 
-<style>
-body {
-    margin-bottom: 0px !important;
-}
-
-#svg-1 {
-    animation-delay: -0.5s;
-}
+                <div class="mt-6 max-w-md space-y-2">
+                    <p
+                        v-for="(line, idx) in messages"
+                        :key="idx"
+                        class="text-sm text-neutral-400"
+                        :class="
+                            idx === 0
+                                ? 'text-lg font-medium text-neutral-200'
+                                : ''
+                        "
+                    >
+                        {{ line }}
+                    </p>
+                </div>
 
-#svg-2 {
-    animation-delay: -1s;
-}
+                <div
+                    class="mt-10 flex flex-wrap items-center justify-center gap-4"
+                >
+                    <PrimaryButton color="pill" class="w-fit" @click="goBack">
+                        Regressar
+                    </PrimaryButton>
+                </div>
 
-#svg-3 {
-    animation-delay: -0.8s;
-}
-</style>
+                <div
+                    class="mt-14 flex items-center justify-center gap-2 text-sm text-neutral-400"
+                >
+                    <span>Mais informações:</span>
+                    <a
+                        href="mailto:geral@sinf.pt"
+                        class="text-neutral-200 underline-offset-4 transition-colors hover:text-white hover:underline"
+                    >
+                        geral@sinf.pt
+                    </a>
+                </div>
+            </div>
+        </main>
+    </div>
+</template>
diff --git a/resources/js/Pages/Event.vue b/resources/js/Pages/Event.vue
index 2a16024e..8640e7f3 100644
--- a/resources/js/Pages/Event.vue
+++ b/resources/js/Pages/Event.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { computed, ref } from "vue";
 import { router, usePage } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import type Event from "@/Types/Event";
@@ -9,11 +9,12 @@ import AppLayout from "@/Layouts/AppLayout.vue";
 import SpeakerInfo from "@/Components/Event/SpeakerInfo.vue";
 import Sponsor from "@/Components/Home/Sponsor.vue";
 import Card from "@/Components/UI/Card.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import QuickScroll from "@/Components/UI/QuickScroll.vue";
 import PillSelector, {
     type PillOption,
 } from "@/Components/UI/PillSelector.vue";
-import { ArrowUp, ArrowDown, QrCode } from "@lucide/vue";
+import { QrCode } from "@lucide/vue";
 
 interface Props {
     event: Event;
@@ -228,73 +229,11 @@ const scanCodeTabItems = computed<PillOption[]>(() => [
         }),
     },
 ]);
-
-const isAtBottom = ref(false);
-
-function updateScrollState() {
-    const scrollY = window.scrollY || window.pageYOffset;
-    const windowHeight = window.innerHeight;
-    const documentHeight = document.documentElement.scrollHeight;
-
-    isAtBottom.value = scrollY + windowHeight >= documentHeight - 60;
-}
-
-function handleQuickScroll() {
-    if (isAtBottom.value) {
-        window.scrollTo({ top: 0, behavior: "smooth" });
-        return;
-    }
-
-    const sections = Array.from(
-        document.querySelectorAll<HTMLElement>("section"),
-    );
-    if (!sections.length) return;
-
-    const currentY = window.scrollY || window.pageYOffset;
-    const navOffset = 70;
-
-    const nextSection = sections.find((section) => {
-        const top = section.getBoundingClientRect().top + currentY;
-        return top > currentY + navOffset + 20;
-    });
-
-    if (nextSection) {
-        const targetY =
-            nextSection.getBoundingClientRect().top + currentY - navOffset;
-        window.scrollTo({ top: targetY, behavior: "smooth" });
-    } else {
-        window.scrollTo({
-            top: document.documentElement.scrollHeight,
-            behavior: "smooth",
-        });
-    }
-}
-
-onMounted(() => {
-    updateScrollState();
-    window.addEventListener("scroll", updateScrollState, { passive: true });
-    window.addEventListener("resize", updateScrollState, { passive: true });
-});
-
-onBeforeUnmount(() => {
-    window.removeEventListener("scroll", updateScrollState);
-    window.removeEventListener("resize", updateScrollState);
-});
 </script>
 
 <template>
     <AppLayout :title="event.name">
-        <button
-            type="button"
-            :aria-label="
-                isAtBottom ? 'Scroll to top' : 'Scroll to next section'
-            "
-            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 cursor-pointer justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
-            @click="handleQuickScroll"
-        >
-            <ArrowUp v-if="isAtBottom" :size="16" />
-            <ArrowDown v-else :size="16" />
-        </button>
+        <QuickScroll mode="sections" />
 
         <div
             class="relative mx-auto w-full max-w-7xl space-y-12 px-4 pt-4 pb-12 sm:space-y-16 sm:px-6 sm:pb-16 lg:px-8 lg:pt-8"
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
index f659afdb..19011dd4 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { computed } from "vue";
 import { router } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import AppLayout from "@/Layouts/AppLayout.vue";
@@ -7,7 +7,7 @@ import SpeakersCarousel from "@/Components/Home/SpeakersCarousel.vue";
 import SponsorBanner from "@/Components/Home/SponsorBanner.vue";
 import InfoPopup from "@/Components/Home/InfoPopup.vue";
 import PillSelector from "@/Components/UI/PillSelector.vue";
-import { ArrowUp, ArrowDown } from "@lucide/vue";
+import QuickScroll from "@/Components/UI/QuickScroll.vue";
 import type Edition from "@/Types/Edition";
 import type EventDay from "@/Types/EventDay";
 import type { User } from "@/Types/User";
@@ -51,75 +51,13 @@ const statsGridColsClass = computed(() => {
     }
     return "grid-cols-2";
 });
-
-const isAtBottom = ref(false);
-
-function updateScrollState() {
-    const scrollY = window.scrollY || window.pageYOffset;
-    const windowHeight = window.innerHeight;
-    const documentHeight = document.documentElement.scrollHeight;
-
-    isAtBottom.value = scrollY + windowHeight >= documentHeight - 60;
-}
-
-function handleQuickScroll() {
-    if (isAtBottom.value) {
-        window.scrollTo({ top: 0, behavior: "smooth" });
-        return;
-    }
-
-    const sections = Array.from(
-        document.querySelectorAll<HTMLElement>("section"),
-    );
-    if (!sections.length) return;
-
-    const currentY = window.scrollY || window.pageYOffset;
-    const navOffset = 70;
-
-    const nextSection = sections.find((section) => {
-        const top = section.getBoundingClientRect().top + currentY;
-        return top > currentY + navOffset + 20;
-    });
-
-    if (nextSection) {
-        const targetY =
-            nextSection.getBoundingClientRect().top + currentY - navOffset;
-        window.scrollTo({ top: targetY, behavior: "smooth" });
-    } else {
-        window.scrollTo({
-            top: document.documentElement.scrollHeight,
-            behavior: "smooth",
-        });
-    }
-}
-
-onMounted(() => {
-    updateScrollState();
-    window.addEventListener("scroll", updateScrollState, { passive: true });
-    window.addEventListener("resize", updateScrollState, { passive: true });
-});
-
-onBeforeUnmount(() => {
-    window.removeEventListener("scroll", updateScrollState);
-    window.removeEventListener("resize", updateScrollState);
-});
 </script>
 
 <template>
     <AppLayout title="Home">
         <InfoPopup v-if="$page.props.auth.user && canEnroll" />
 
-        <button
-            type="button"
-            :aria-label="
-                isAtBottom ? 'Scroll to top' : 'Scroll to next section'
-            "
-            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 cursor-pointer justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
-            @click="handleQuickScroll"
-        >
-            <ArrowUp v-if="isAtBottom" :size="16" />
-            <ArrowDown v-else :size="16" />
-        </button>
+        <QuickScroll mode="sections" />
 
         <section
             class="relative flex min-h-[calc(100vh-5rem)] flex-col items-center justify-center gap-8 px-4 py-16 text-center"
diff --git a/resources/js/Pages/Maintenance.vue b/resources/js/Pages/Maintenance.vue
index 9e17c83d..b71e1a98 100644
--- a/resources/js/Pages/Maintenance.vue
+++ b/resources/js/Pages/Maintenance.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Head } from "@inertiajs/vue3";
-import GlowingOrbs from "@/Components/GlowingOrbs.vue";
+import GlowingOrbs from "@/Components/UI/GlowingOrbs.vue";
 </script>
 
 <template>
diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
index 9d43f055..070b59fe 100644
--- a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
+++ b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -3,10 +3,10 @@ import { ref } from "vue";
 import { useForm } from "@inertiajs/vue3";
 import Card from "@/Components/UI/Card.vue";
 import Modal from "@/Components/UI/Modal.vue";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import { AlertTriangle } from "@lucide/vue";
 import { route } from "ziggy-js";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 
 const confirmingUserDeletion = ref(false);
 const passwordInput = ref<HTMLInputElement | null>(null);
diff --git a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
index 6c97096c..78b840fb 100644
--- a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
+++ b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
@@ -3,8 +3,8 @@ import { ref } from "vue";
 import { useForm } from "@inertiajs/vue3";
 import Card from "@/Components/UI/Card.vue";
 import Modal from "@/Components/UI/Modal.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import { Laptop, Smartphone } from "@lucide/vue";
 import { route } from "ziggy-js";
 import type Session from "@/Types/Session";
diff --git a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
index 89f637d5..db4f2c27 100644
--- a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
+++ b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
@@ -3,9 +3,9 @@ import { ref, computed, watch, onMounted } from "vue";
 import { router, useForm, usePage } from "@inertiajs/vue3";
 import Card from "@/Components/UI/Card.vue";
 import Modal from "@/Components/UI/Modal.vue";
-import ConfirmsPassword from "@/Components/ConfirmsPassword.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import CodeInput from "@/Components/CodeInput.vue";
+import ConfirmsPassword from "@/Components/Form/ConfirmsPassword.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import CodeInput from "@/Components/Form/CodeInput.vue";
 import { Copy } from "@lucide/vue";
 import { route } from "ziggy-js";
 import axios from "axios";
diff --git a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
index 343da4ac..be3d0861 100644
--- a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
@@ -2,8 +2,8 @@
 import { ref } from "vue";
 import { useForm } from "@inertiajs/vue3";
 import Card from "@/Components/UI/Card.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import { route } from "ziggy-js";
 
 const passwordInput = ref<HTMLInputElement | null>(null);
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
index b0142e7d..6e7fc8b0 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import { Link, router, useForm } from "@inertiajs/vue3";
 import Modal from "@/Components/UI/Modal.vue";
 import Card from "@/Components/UI/Card.vue";
 import SocialIcon from "@/Components/UI/SocialIcon.vue";
 import { Camera, Upload, Trash2, AlertCircle } from "@lucide/vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import ProfileCard from "@/Components/Profile/ProfileCard.vue";
-import TextInput from "@/Components/TextInput.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import {
     type User,
     isCompany as checkIsCompany,
@@ -26,13 +26,6 @@ const isCompany = checkIsCompany(user);
 const isSpeaker = checkIsSpeaker(user);
 const isAdmin = checkIsAdmin(user);
 
-const userTypeLabel = computed(() => {
-    if (isAdmin) return "Administrador";
-    if (isSpeaker) return "Orador";
-    if (isCompany) return "Empresa";
-    return "Participante";
-});
-
 // Profile Photo Editing State & Modal
 const photoModalOpen = ref(false);
 const photoInput = ref<HTMLInputElement | null>(null);
diff --git a/resources/js/Pages/Profile/ScanCode.vue b/resources/js/Pages/Profile/ScanCode.vue
index fdb0c595..1e4731b4 100644
--- a/resources/js/Pages/Profile/ScanCode.vue
+++ b/resources/js/Pages/Profile/ScanCode.vue
@@ -8,8 +8,8 @@ import PillSelector, {
     type PillOption,
 } from "@/Components/UI/PillSelector.vue";
 import Card from "@/Components/UI/Card.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import TextInput from "@/Components/TextInput.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import TextInput from "@/Components/Form/TextInput.vue";
 import type Quest from "@/Types/Quest";
 import { QrcodeStream } from "vue-qrcode-reader";
 import {
@@ -25,8 +25,6 @@ import {
     CheckCircle2,
     AlertCircle,
     RotateCcw,
-    Sparkles,
-    Check,
 } from "@lucide/vue";
 
 interface Props {
@@ -60,10 +58,6 @@ const selectedQuestId = ref<string>(
         (props.quests.length > 0 ? props.quests[0]?.id?.toString() : ""),
 );
 
-const currentSelectedQuest = computed(() =>
-    props.quests.find((q) => q.id.toString() === selectedQuestId.value),
-);
-
 // Form
 const form = useForm({
     quest_code: "",
diff --git a/resources/js/Pages/Program.vue b/resources/js/Pages/Program.vue
index b3eccc71..e72b43d1 100644
--- a/resources/js/Pages/Program.vue
+++ b/resources/js/Pages/Program.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { computed, ref, watch, onMounted, onBeforeUnmount } from "vue";
+import { computed, ref, watch } from "vue";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import ProgramSidebar, {
     type TabOption,
 } from "@/Components/Program/ProgramSidebar.vue";
 import ProgramTimeline from "@/Components/Program/ProgramTimeline.vue";
 import PillSelector from "@/Components/UI/PillSelector.vue";
+import QuickScroll from "@/Components/UI/QuickScroll.vue";
 import type EventDay from "@/Types/EventDay";
-import { ArrowUp } from "@lucide/vue";
 
 interface Props {
     days?: EventDay[];
@@ -82,47 +82,11 @@ watch(
     },
     { immediate: true },
 );
-
-const isScrolled = ref(false);
-
-const updateScrollState = () => {
-    isScrolled.value = (window.scrollY || window.pageYOffset) > 400;
-};
-
-const scrollToTop = () => {
-    window.scrollTo({ top: 0, behavior: "smooth" });
-};
-
-onMounted(() => {
-    updateScrollState();
-    window.addEventListener("scroll", updateScrollState, { passive: true });
-});
-
-onBeforeUnmount(() => {
-    window.removeEventListener("scroll", updateScrollState);
-});
 </script>
 
 <template>
     <AppLayout title="Programa">
-        <Transition
-            enter-active-class="transition duration-200 ease-out"
-            enter-from-class="opacity-0 translate-y-2 scale-90"
-            enter-to-class="opacity-100 translate-y-0 scale-100"
-            leave-active-class="transition duration-150 ease-in"
-            leave-from-class="opacity-100 translate-y-0 scale-100"
-            leave-to-class="opacity-0 translate-y-2 scale-90"
-        >
-            <button
-                v-if="isScrolled"
-                type="button"
-                aria-label="Voltar ao topo"
-                class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 cursor-pointer justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
-                @click="scrollToTop"
-            >
-                <ArrowUp :size="16" />
-            </button>
-        </Transition>
+        <QuickScroll mode="top" />
 
         <div
             class="relative mx-auto w-full max-w-7xl px-4 pt-0 pb-12 sm:px-6 sm:pb-16 lg:px-8 lg:pt-8"
diff --git a/resources/js/Pages/Shop.vue b/resources/js/Pages/Shop.vue
index d94e2d26..e81c92e0 100644
--- a/resources/js/Pages/Shop.vue
+++ b/resources/js/Pages/Shop.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, onBeforeUnmount } from "vue";
+import { computed, ref } from "vue";
 import { router, usePage } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import AppLayout from "@/Layouts/AppLayout.vue";
@@ -7,14 +7,11 @@ import ShopItem from "@/Components/Shop/ShopItem.vue";
 import PillSelector, {
     type PillOption,
 } from "@/Components/UI/PillSelector.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import QuickScroll from "@/Components/UI/QuickScroll.vue";
 import { type BuyableProduct } from "@/Types/ShopPage";
 import { type User } from "@/Types/User";
-import {
-    ShoppingBag,
-    ArrowUp,
-    ArrowRight,
-} from "@lucide/vue";
+import { ShoppingBag, ArrowRight } from "@lucide/vue";
 
 interface Props {
     products: BuyableProduct[];
@@ -143,48 +140,11 @@ const filteredAndSortedProducts = computed(() => {
 
     return result;
 });
-
-const isScrolled = ref(false);
-
-const updateScrollState = () => {
-    isScrolled.value = (window.scrollY || window.pageYOffset) > 400;
-};
-
-const scrollToTop = () => {
-    window.scrollTo({ top: 0, behavior: "smooth" });
-};
-
-onMounted(() => {
-    updateScrollState();
-    window.addEventListener("scroll", updateScrollState, { passive: true });
-});
-
-onBeforeUnmount(() => {
-    window.removeEventListener("scroll", updateScrollState);
-});
 </script>
 
 <template>
     <AppLayout title="Loja">
-        <!-- Floating scroll-to-top button -->
-        <Transition
-            enter-active-class="transition duration-200 ease-out"
-            enter-from-class="opacity-0 translate-y-2 scale-90"
-            enter-to-class="opacity-100 translate-y-0 scale-100"
-            leave-active-class="transition duration-150 ease-in"
-            leave-from-class="opacity-100 translate-y-0 scale-100"
-            leave-to-class="opacity-0 translate-y-2 scale-90"
-        >
-            <button
-                v-if="isScrolled"
-                type="button"
-                aria-label="Voltar ao topo"
-                class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 cursor-pointer justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
-                @click="scrollToTop"
-            >
-                <ArrowUp :size="16" />
-            </button>
-        </Transition>
+        <QuickScroll mode="top" />
 
         <div
             class="relative mx-auto w-full max-w-7xl space-y-8 px-4 py-8 sm:space-y-10 sm:px-6 sm:py-12 lg:px-8"
@@ -216,10 +176,7 @@ onBeforeUnmount(() => {
                 </PillSelector>
             </div>
 
-            <div
-                v-else-if="user && !isEnrolled"
-                class="flex justify-center"
-            >
+            <div v-else-if="user && !isEnrolled" class="flex justify-center">
                 <PrimaryButton
                     padding="px-4 py-1.5"
                     text-size="text-xs"
@@ -245,10 +202,7 @@ onBeforeUnmount(() => {
                     />
 
                     <!-- Dropdown Sort with PillSelector -->
-                    <PillSelector
-                        :items="sortPillItems"
-                        size="sm"
-                    />
+                    <PillSelector :items="sortPillItems" size="sm" />
                 </div>
 
                 <!-- Products Grid -->
@@ -279,7 +233,8 @@ onBeforeUnmount(() => {
                         Nenhum artigo encontrado
                     </h3>
                     <p class="mt-1 max-w-sm text-xs text-neutral-400">
-                        Não existem artigos correspondentes aos filtros selecionados.
+                        Não existem artigos correspondentes aos filtros
+                        selecionados.
                     </p>
                     <div class="mt-5">
                         <PrimaryButton
diff --git a/resources/js/Pages/Team.vue b/resources/js/Pages/Team.vue
index b8878b00..9d1ebddd 100644
--- a/resources/js/Pages/Team.vue
+++ b/resources/js/Pages/Team.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { ref, computed } from "vue";
 import type Department from "@/Types/Department";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import DepartmentSection from "@/Components/Team/DepartmentSection.vue";
 import DepartmentSidebar from "@/Components/Team/DepartmentSidebar.vue";
 import PillSelector from "@/Components/UI/PillSelector.vue";
-import { ArrowUp, ArrowDown } from "@lucide/vue";
+import QuickScroll from "@/Components/UI/QuickScroll.vue";
 
 interface Props {
     departments: Department[];
@@ -14,7 +14,6 @@ interface Props {
 const props = defineProps<Props>();
 
 const selectedDepartmentId = ref<number | null>(null);
-const isAtBottom = ref(false);
 
 const departmentsWithStaff = computed(() =>
     props.departments.filter((d) => (d.staff?.length ?? 0) > 0),
@@ -37,72 +36,14 @@ function handleSelectDepartment(id: number | null) {
         window.scrollTo({ top: 0, behavior: "smooth" });
     }
 }
-
-function updateScrollState() {
-    const scrollY = window.scrollY || window.pageYOffset;
-    const windowHeight = window.innerHeight;
-    const documentHeight = document.documentElement.scrollHeight;
-
-    isAtBottom.value = scrollY + windowHeight >= documentHeight - 60;
-}
-
-function handleQuickScroll() {
-    if (isAtBottom.value) {
-        window.scrollTo({ top: 0, behavior: "smooth" });
-        return;
-    }
-
-    const sections = Array.from(
-        document.querySelectorAll<HTMLElement>("section"),
-    );
-    if (!sections.length) return;
-
-    const currentY = window.scrollY || window.pageYOffset;
-    const navOffset = 70;
-
-    const nextSection = sections.find((section) => {
-        const top = section.getBoundingClientRect().top + currentY;
-        return top > currentY + navOffset + 20;
-    });
-
-    if (nextSection) {
-        const targetY =
-            nextSection.getBoundingClientRect().top + currentY - navOffset;
-        window.scrollTo({ top: targetY, behavior: "smooth" });
-    } else {
-        window.scrollTo({
-            top: document.documentElement.scrollHeight,
-            behavior: "smooth",
-        });
-    }
-}
-
-onMounted(() => {
-    updateScrollState();
-    window.addEventListener("scroll", updateScrollState, { passive: true });
-    window.addEventListener("resize", updateScrollState, { passive: true });
-});
-
-onBeforeUnmount(() => {
-    window.removeEventListener("scroll", updateScrollState);
-    window.removeEventListener("resize", updateScrollState);
-});
 </script>
 
 <template>
     <AppLayout title="Equipa">
-        <button
+        <QuickScroll
             v-if="hasStaff && displayedDepartments.length > 1"
-            type="button"
-            :aria-label="
-                isAtBottom ? 'Scroll to top' : 'Scroll to next department'
-            "
-            class="pill-container fixed right-6 bottom-6 z-40 h-11 w-11 cursor-pointer justify-center text-neutral-300 shadow-none transition-all duration-200 hover:scale-110 hover:border-white/25 hover:text-white focus:outline-none active:scale-95 sm:right-8 sm:bottom-8 sm:h-12 sm:w-12"
-            @click="handleQuickScroll"
-        >
-            <ArrowUp v-if="isAtBottom" :size="16" />
-            <ArrowDown v-else :size="16" />
-        </button>
+            mode="sections"
+        />
 
         <div
             class="relative mx-auto w-full max-w-7xl px-4 pt-0 pb-12 sm:px-6 sm:pb-16 lg:px-8 lg:pt-8"
diff --git a/resources/js/Types/index.ts b/resources/js/Types/index.ts
new file mode 100644
index 00000000..e58eeb62
--- /dev/null
+++ b/resources/js/Types/index.ts
@@ -0,0 +1,34 @@
+export type { default as Admin } from "./Admin";
+export type { default as Company } from "./Company";
+export type { default as Competition, CompetitionPrizes } from "./Competition";
+export type { default as CompetitionTeam } from "./CompetitionTeam";
+export type { default as Department } from "./Department";
+export type { default as Edition } from "./Edition";
+export type { default as Enrollment } from "./Enrollment";
+export type { default as EventDay } from "./EventDay";
+export type { default as Event } from "./Event";
+export type { default as EventType } from "./EventType";
+export type { default as Model } from "./Model";
+export type { default as MyPageProps } from "./PageProps";
+export type { default as Paginated, PaginationLink } from "./Paginated";
+export type { default as Participant } from "./Participant";
+export type { default as Product } from "./Product";
+export type { View, TabId, Tabs } from "./ProfilePage";
+export type { default as Quest } from "./Quest";
+export type { default as Session } from "./Session";
+export type { EnrollmentWithRedeemed, BuyableProduct } from "./ShopPage";
+export type { default as Slot } from "./Slot";
+export type { default as SocialMedia } from "./SocialMedia";
+export type { default as Speaker } from "./Speaker";
+export type { default as SponsorTier } from "./SponsorTier";
+export type { default as Sponsor } from "./Sponsor";
+export type { default as Staff } from "./Staff";
+export type { default as Stand } from "./Stand";
+export type {
+    User,
+    ParticipantUser,
+    CompanyUser,
+    SpeakerUser,
+    AdminUser,
+} from "./User";
+export { isParticipant, isAdmin, isCompany, isSpeaker } from "./User";

From 085859c38eb1a7bad82cb802e62f22a0415aec1f Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Sat, 12 Sep 2026 15:20:54 +0100
Subject: [PATCH 28/33] feat: admin dashboard

---
 .../Controllers/AdminDashboardController.php  |  63 +++
 app/Http/Controllers/CRUDController.php       | 104 +++--
 public/images/sinf-logo-generic-long.svg      |   9 +
 resources/css/app.css                         | 162 +++----
 resources/js/Components/CRUD/CRUDModal.vue    | 102 +++++
 resources/js/Components/CRUD/CRUDView.vue     | 157 +++++++
 resources/js/Components/CRUD/Cell.vue         |   6 +-
 resources/js/Components/CRUD/Header.vue       | 251 ++++++++++-
 resources/js/Components/CRUD/HeaderRow.vue    |   6 +-
 resources/js/Components/CRUD/Row.vue          | 111 ++++-
 resources/js/Components/CRUD/Table.vue        |  64 +--
 resources/js/Components/Form/Checkbox.vue     |   2 +-
 resources/js/Components/Form/ImageInput.vue   | 129 ++++--
 resources/js/Components/Form/TextInput.vue    |  50 +--
 .../js/Components/Navigation/AdminNavbar.vue  |  77 ----
 .../js/Components/Navigation/AdminSidebar.vue | 419 ++++++++++++++++++
 resources/js/Components/UI/Banner.vue         |  38 +-
 .../js/Components/UI/PaginationLinks.vue      |  23 +-
 resources/js/Composables/useSearch.ts         |  39 +-
 resources/js/Layouts/AdminLayout.vue          |  79 +++-
 resources/js/Layouts/CRUDLayout.vue           |  62 ---
 resources/js/Layouts/CardLayout.vue           |  60 ---
 resources/js/Pages/Admin.vue                  | 271 +++++++++--
 .../js/Pages/CRUD/Competition/Create.vue      | 129 +++---
 resources/js/Pages/CRUD/Competition/Edit.vue  | 200 ++++-----
 resources/js/Pages/CRUD/Competition/Index.vue |  47 +-
 .../Pages/CRUD/CompetitionPrizes/Create.vue   |  79 ++--
 .../js/Pages/CRUD/CompetitionPrizes/Edit.vue  |  81 ++--
 .../js/Pages/CRUD/CompetitionPrizes/Index.vue |  42 +-
 .../js/Pages/CRUD/CompetitionTeam/Create.vue  |  83 ++--
 .../js/Pages/CRUD/CompetitionTeam/Edit.vue    |  85 ++--
 .../js/Pages/CRUD/CompetitionTeam/Index.vue   |  33 +-
 resources/js/Pages/CRUD/Department/Create.vue |  79 ++--
 resources/js/Pages/CRUD/Department/Edit.vue   |  79 ++--
 resources/js/Pages/CRUD/Department/Index.vue  |  27 +-
 resources/js/Pages/CRUD/Edition/Create.vue    |  51 +--
 resources/js/Pages/CRUD/Edition/Edit.vue      |  53 +--
 resources/js/Pages/CRUD/Edition/Index.vue     |  21 +-
 resources/js/Pages/CRUD/Enrollment/Create.vue |  77 ++--
 resources/js/Pages/CRUD/Enrollment/Edit.vue   |  91 ++--
 resources/js/Pages/CRUD/Enrollment/Index.vue  |  36 +-
 resources/js/Pages/CRUD/Event/Create.vue      | 154 ++++---
 resources/js/Pages/CRUD/Event/Edit.vue        | 143 +++---
 resources/js/Pages/CRUD/Event/Index.vue       |  96 +++-
 resources/js/Pages/CRUD/EventDay/Create.vue   |  79 ++--
 resources/js/Pages/CRUD/EventDay/Edit.vue     |  79 ++--
 resources/js/Pages/CRUD/EventDay/Index.vue    |  31 +-
 resources/js/Pages/CRUD/EventType/Create.vue  |  35 +-
 resources/js/Pages/CRUD/EventType/Edit.vue    |  35 +-
 resources/js/Pages/CRUD/EventType/Index.vue   |  17 +-
 resources/js/Pages/CRUD/Product/Create.vue    |  83 ++--
 resources/js/Pages/CRUD/Product/Edit.vue      |  85 ++--
 resources/js/Pages/CRUD/Product/Index.vue     |  48 +-
 resources/js/Pages/CRUD/Quest/Create.vue      | 145 +++---
 resources/js/Pages/CRUD/Quest/Edit.vue        | 145 +++---
 resources/js/Pages/CRUD/Quest/Index.vue       |  25 +-
 resources/js/Pages/CRUD/Slot/Create.vue       |  84 ++--
 resources/js/Pages/CRUD/Slot/Edit.vue         |  86 ++--
 resources/js/Pages/CRUD/Slot/Index.vue        |  48 +-
 resources/js/Pages/CRUD/Sponsor/Create.vue    | 102 ++---
 resources/js/Pages/CRUD/Sponsor/Edit.vue      | 101 ++---
 resources/js/Pages/CRUD/Sponsor/Index.vue     |  43 +-
 .../js/Pages/CRUD/SponsorTier/Create.vue      | 124 +++---
 resources/js/Pages/CRUD/SponsorTier/Edit.vue  | 106 +++--
 resources/js/Pages/CRUD/SponsorTier/Index.vue |  94 +++-
 resources/js/Pages/CRUD/Staff/Create.vue      |  91 ++--
 resources/js/Pages/CRUD/Staff/Edit.vue        |  86 ++--
 resources/js/Pages/CRUD/Staff/Index.vue       |  55 ++-
 resources/js/Pages/CRUD/Stand/Create.vue      |  74 ++--
 resources/js/Pages/CRUD/Stand/Edit.vue        |  73 +--
 resources/js/Pages/CRUD/Stand/Index.vue       |  35 +-
 resources/js/Pages/CRUD/User/Create.vue       | 228 +++++-----
 resources/js/Pages/CRUD/User/Edit.vue         | 236 +++++-----
 resources/js/Pages/CRUD/User/Index.vue        |  40 +-
 resources/js/messages.ts                      |   1 +
 routes/web.php                                |   6 +-
 76 files changed, 4030 insertions(+), 2460 deletions(-)
 create mode 100644 app/Http/Controllers/AdminDashboardController.php
 create mode 100644 public/images/sinf-logo-generic-long.svg
 create mode 100644 resources/js/Components/CRUD/CRUDModal.vue
 create mode 100644 resources/js/Components/CRUD/CRUDView.vue
 delete mode 100644 resources/js/Components/Navigation/AdminNavbar.vue
 create mode 100644 resources/js/Components/Navigation/AdminSidebar.vue
 delete mode 100644 resources/js/Layouts/CRUDLayout.vue
 delete mode 100644 resources/js/Layouts/CardLayout.vue

diff --git a/app/Http/Controllers/AdminDashboardController.php b/app/Http/Controllers/AdminDashboardController.php
new file mode 100644
index 00000000..3060ac83
--- /dev/null
+++ b/app/Http/Controllers/AdminDashboardController.php
@@ -0,0 +1,63 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Competition;
+use App\Models\Edition;
+use App\Models\Enrollment;
+use App\Models\Event;
+use App\Models\EventDay;
+use App\Models\Product;
+use App\Models\Quest;
+use App\Models\Sponsor;
+use App\Models\Stand;
+use App\Models\User;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class AdminDashboardController extends Controller
+{
+    public function __invoke(Request $request): Response
+    {
+        $currentEdition = Edition::orderByDesc('year')->first();
+
+        $stats = [
+            'users_count' => User::count(),
+            'enrollments_count' => $currentEdition ? $currentEdition->enrollments()->count() : Enrollment::count(),
+            'events_count' => $currentEdition ? $currentEdition->events()->count() : Event::count(),
+            'event_days_count' => $currentEdition ? $currentEdition->event_days()->count() : EventDay::count(),
+            'sponsors_count' => $currentEdition ? Sponsor::where('edition_id', $currentEdition->id)->count() : Sponsor::count(),
+            'stands_count' => Stand::count(),
+            'products_count' => Product::count(),
+            'quests_count' => Quest::count(),
+            'competitions_count' => $currentEdition ? Competition::where('edition_id', $currentEdition->id)->count() : Competition::count(),
+        ];
+
+        $upcomingEvents = Event::with(['event_day', 'type'])
+            ->orderBy('event_day_id')
+            ->orderBy('time_start')
+            ->limit(5)
+            ->get();
+
+        $recentEnrollments = Enrollment::with(['participant.user', 'edition'])
+            ->latest()
+            ->limit(5)
+            ->get()
+            ->map(fn ($enrollment) => [
+                'id' => $enrollment->id,
+                'name' => $enrollment->participant?->user?->name ?? 'Utilizador Desconhecido',
+                'email' => $enrollment->participant?->user?->email ?? '-',
+                'edition' => $enrollment->edition?->name ?? '-',
+                'points' => $enrollment->points,
+                'created_at' => $enrollment->created_at?->format('d/m/Y H:i') ?? '-',
+            ]);
+
+        return Inertia::render('Admin', [
+            'currentEdition' => $currentEdition,
+            'stats' => $stats,
+            'upcomingEvents' => $upcomingEvents,
+            'recentEnrollments' => $recentEnrollments,
+        ]);
+    }
+}
diff --git a/app/Http/Controllers/CRUDController.php b/app/Http/Controllers/CRUDController.php
index 2c8f3a68..01887120 100644
--- a/app/Http/Controllers/CRUDController.php
+++ b/app/Http/Controllers/CRUDController.php
@@ -71,65 +71,97 @@ protected function with(): array
      */
     protected $load = [];
 
-    public function index(Request $request)
+    /**
+     * Common method to get paginated items, filters, search and relations.
+     *
+     * @return array<string, mixed>
+     */
+    protected function getIndexData(Request $request): array
     {
         $isSearchable = in_array(Searchable::class, class_uses($this->model));
 
         $search = $request->query('query');
-        if ($isSearchable && $search !== null) {
-            $query = $this->model::search($search)->query(fn (Builder $query) => $query->with($this->load));
+        $sortBy = $request->query('sort_by', 'id');
+        $sortDir = strtolower($request->query('sort_dir', 'asc')) === 'desc' ? 'desc' : 'asc';
+
+        $modelInstance = new $this->model;
+        $table = $modelInstance->getTable();
+        $schema = $modelInstance->getConnection()->getSchemaBuilder();
+
+        $applySortAndFilters = function (Builder $query) use ($table, $schema, $sortBy, $sortDir, $request) {
+            $reserved = ['page', 'query', 'sort_by', 'sort_dir', 'filter_by', 'filter_val'];
+            foreach ($request->query() as $key => $value) {
+                if (!in_array($key, $reserved) && $value !== null && $value !== '') {
+                    if ($schema->hasColumn($table, $key)) {
+                        $query->where($table . '.' . $key, $value);
+                    }
+                }
+            }
+
+            if ($request->filled('filter_by') && $request->has('filter_val') && $request->get('filter_val') !== '') {
+                $filterCol = $request->query('filter_by');
+                if ($schema->hasColumn($table, $filterCol)) {
+                    $query->where($table . '.' . $filterCol, $request->query('filter_val'));
+                }
+            }
+
+            if ($schema->hasColumn($table, $sortBy)) {
+                $query->orderBy($table . '.' . $sortBy, $sortDir);
+            } else {
+                $query->orderBy($table . '.id', 'asc');
+            }
+        };
+
+        if ($isSearchable && $search !== null && trim($search) !== '') {
+            $query = $this->model::search($search)->query(function (Builder $query) use ($applySortAndFilters) {
+                $query->with($this->load);
+                $applySortAndFilters($query);
+            });
         } else {
-            $query = $this->model::with($this->load)->orderBy('id');
+            $query = $this->model::with($this->load);
+            $applySortAndFilters($query);
         }
 
-        $filteredQuery = collect($request->query())
-            ->intersectByKeys(['sort_by' => '', 'sort_dir' => '', 'query' => '', 'filter_by' => '']);
-        $items = $query->paginate()->appends($filteredQuery->toArray());
+        $items = $query->paginate()->appends($request->query());
 
-        $with = $this->with();
-
-        Log::info('Displaying all {model} records with query: {search}', ['model' => $this->model, 'search' => $search ?? 'none']);
-
-        return Inertia::render("CRUD/{$this->view}/Index", [
+        return [
             'items' => $items,
-            'with' => $with,
+            'with' => $this->with(),
             'isSearchable' => $isSearchable,
-        ]);
+            'view' => $this->view,
+        ];
     }
 
-    public function show($id)
+    public function index(Request $request)
     {
-        $item = $this->model::find($id);
+        $data = $this->getIndexData($request);
 
-        $with = $this->with();
+        Log::info('Displaying all {model} records with query: {search}', ['model' => $this->model, 'search' => $request->query('query') ?? 'none']);
 
-        Log::info('Displaying {model} record with id: {id}', ['model' => $this->model, 'id' => $id]);
+        return Inertia::render("CRUD/{$this->view}/Index", $data);
+    }
 
-        return Inertia::render("CRUD/$this->view/Show", [
-            'item' => $item,
-            'with' => $with,
-        ]);
+    public function show(Request $request, $id)
+    {
+        return $this->edit($request, $id);
     }
 
-    public function create()
+    public function create(Request $request)
     {
-        $with = $this->with();
+        $data = $this->getIndexData($request);
+        $data['modal'] = 'create';
 
-        return Inertia::render("CRUD/$this->view/Create", [
-            'with' => $with,
-        ]);
+        return Inertia::render("CRUD/{$this->view}/Index", $data);
     }
 
-    public function edit($id)
+    public function edit(Request $request, $id)
     {
+        $data = $this->getIndexData($request);
         $item = $this->model::find($id);
+        $data['modal'] = 'edit';
+        $data['item'] = $item ? $item->load($this->load) : null;
 
-        $with = $this->with();
-
-        return Inertia::render("CRUD/$this->view/Edit", [
-            'item' => $item->load($this->load),
-            'with' => $with,
-        ]);
+        return Inertia::render("CRUD/{$this->view}/Index", $data);
     }
 
     /**
@@ -147,13 +179,11 @@ protected function created(array $new): ?array
 
     public function store(Request $request)
     {
-
         $validated = $request->validate($this->storeRules());
 
         $newValues = $this->created($validated);
 
         if ($newValues !== null) {
-
             Log::info('Creating new {model} record with values: {values}', ['model' => $this->model, 'values' => Json::encode($newValues, true)]);
 
             $this->model::create($newValues);
@@ -185,7 +215,6 @@ public function update(Request $request, $id)
         $newValues = $this->updated($model, $validated);
 
         if ($newValues !== null) {
-
             Log::info('Updating {model} record with id {id} with values: {values}', ['model' => $this->model, 'id' => $model->id, 'values' => Json::encode($newValues, true)]);
 
             $model->update($newValues);
@@ -211,7 +240,6 @@ public function destroy($id)
         $model = $this->model::find($id);
 
         if ($this->destroyed($model->toArray())) {
-
             Log::alert('Deleting {model} record with id {id}', ['model' => $this->model, 'id' => $model->id]);
 
             $model->delete();
diff --git a/public/images/sinf-logo-generic-long.svg b/public/images/sinf-logo-generic-long.svg
new file mode 100644
index 00000000..139a1c94
--- /dev/null
+++ b/public/images/sinf-logo-generic-long.svg
@@ -0,0 +1,9 @@
+<svg width="2659" height="375" viewBox="0 0 2659 375" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M106.955 182.098L78.1477 183.87C77.6553 181.408 76.5966 179.192 74.9716 177.223C73.3466 175.204 71.2046 173.603 68.5455 172.422C65.9356 171.19 62.8087 170.575 59.1648 170.575C54.2898 170.575 50.178 171.609 46.8295 173.677C43.4811 175.696 41.8068 178.404 41.8068 181.802C41.8068 184.511 42.8902 186.8 45.0568 188.672C47.2235 190.543 50.9413 192.045 56.2102 193.177L76.7443 197.314C87.7746 199.579 95.9981 203.223 101.415 208.245C106.831 213.268 109.54 219.867 109.54 228.041C109.54 235.476 107.348 242.001 102.966 247.615C98.6326 253.228 92.6743 257.611 85.0909 260.762C77.5568 263.865 68.8655 265.416 59.0171 265.416C43.9981 265.416 32.0322 262.289 23.1193 256.035C14.2557 249.732 9.06061 241.164 7.53409 230.331L38.483 228.706C39.4186 233.285 41.6837 236.781 45.2784 239.194C48.8731 241.558 53.4773 242.74 59.0909 242.74C64.6061 242.74 69.0379 241.681 72.3864 239.564C75.7841 237.397 77.5076 234.615 77.5568 231.217C77.5076 228.361 76.3011 226.022 73.9375 224.2C71.5739 222.329 67.9299 220.901 63.0057 219.916L43.358 216.001C32.2784 213.785 24.0303 209.944 18.6136 204.478C13.2462 199.012 10.5625 192.045 10.5625 183.575C10.5625 176.287 12.5322 170.009 16.4716 164.74C20.4602 159.471 26.0492 155.408 33.2386 152.552C40.4773 149.696 48.947 148.268 58.6477 148.268C72.9773 148.268 84.2538 151.297 92.4773 157.353C100.75 163.41 105.576 171.658 106.955 182.098ZM172.738 265.416C161.068 265.416 151.022 263.052 142.602 258.325C134.231 253.548 127.78 246.802 123.25 238.086C118.719 229.321 116.454 218.956 116.454 206.99C116.454 195.319 118.719 185.077 123.25 176.262C127.78 167.448 134.157 160.579 142.38 155.654C150.653 150.73 160.354 148.268 171.483 148.268C178.967 148.268 185.935 149.475 192.386 151.887C198.886 154.251 204.549 157.821 209.375 162.598C214.25 167.374 218.041 173.382 220.75 180.62C223.458 187.81 224.812 196.23 224.812 205.882V214.524H129.011V195.024H195.193C195.193 190.494 194.208 186.48 192.238 182.984C190.269 179.488 187.536 176.755 184.039 174.785C180.592 172.766 176.579 171.757 172 171.757C167.223 171.757 162.988 172.865 159.295 175.081C155.651 177.247 152.795 180.177 150.727 183.87C148.659 187.514 147.6 191.577 147.551 196.058V214.598C147.551 220.211 148.585 225.062 150.653 229.149C152.77 233.236 155.75 236.387 159.591 238.603C163.431 240.819 167.986 241.927 173.255 241.927C176.752 241.927 179.952 241.435 182.858 240.45C185.763 239.465 188.25 237.988 190.318 236.018C192.386 234.048 193.962 231.636 195.045 228.779L224.147 230.7C222.67 237.692 219.642 243.798 215.062 249.018C210.532 254.189 204.672 258.226 197.483 261.132C190.342 263.988 182.094 265.416 172.738 265.416ZM237.026 263.2V149.745H267.015V169.762H268.344C270.708 163.115 274.647 157.87 280.163 154.029C285.678 150.189 292.276 148.268 299.958 148.268C307.738 148.268 314.361 150.213 319.827 154.103C325.293 157.944 328.937 163.164 330.759 169.762H331.941C334.255 163.262 338.441 158.067 344.498 154.177C350.604 150.238 357.818 148.268 366.14 148.268C376.727 148.268 385.32 151.641 391.918 158.387C398.566 165.084 401.89 174.588 401.89 186.899V263.2H370.498V193.103C370.498 186.8 368.824 182.073 365.475 178.922C362.127 175.77 357.941 174.194 352.918 174.194C347.206 174.194 342.75 176.016 339.549 179.66C336.348 183.255 334.748 188.007 334.748 193.916V263.2H304.242V192.439C304.242 186.874 302.642 182.442 299.441 179.143C296.289 175.844 292.128 174.194 286.958 174.194C283.462 174.194 280.31 175.081 277.503 176.853C274.746 178.577 272.555 181.014 270.93 184.166C269.305 187.268 268.492 190.912 268.492 195.098V263.2H237.026ZM450.777 265.342C443.539 265.342 437.088 264.086 431.425 261.575C425.762 259.014 421.281 255.247 417.982 250.274C414.732 245.251 413.107 238.997 413.107 231.512C413.107 225.209 414.264 219.916 416.578 215.632C418.893 211.348 422.044 207.901 426.033 205.291C430.022 202.681 434.552 200.711 439.624 199.382C444.745 198.052 450.112 197.117 455.726 196.575C462.325 195.886 467.643 195.245 471.681 194.654C475.719 194.014 478.648 193.079 480.47 191.848C482.292 190.617 483.203 188.795 483.203 186.382V185.939C483.203 181.261 481.726 177.641 478.772 175.081C475.866 172.52 471.73 171.24 466.362 171.24C460.7 171.24 456.194 172.495 452.845 175.007C449.497 177.469 447.281 180.571 446.198 184.314L417.095 181.95C418.573 175.056 421.478 169.098 425.811 164.075C430.145 159.003 435.734 155.113 442.578 152.404C449.472 149.647 457.45 148.268 466.51 148.268C472.813 148.268 478.845 149.007 484.607 150.484C490.417 151.961 495.563 154.251 500.044 157.353C504.575 160.456 508.145 164.444 510.755 169.319C513.364 174.145 514.669 179.931 514.669 186.677V263.2H484.828V247.467H483.942C482.12 251.012 479.683 254.139 476.63 256.848C473.577 259.507 469.908 261.6 465.624 263.126C461.34 264.603 456.391 265.342 450.777 265.342ZM459.789 243.626C464.417 243.626 468.505 242.715 472.05 240.893C475.595 239.022 478.378 236.511 480.397 233.359C482.416 230.208 483.425 226.637 483.425 222.649V210.609C482.44 211.249 481.086 211.84 479.362 212.382C477.688 212.874 475.792 213.342 473.675 213.785C471.558 214.179 469.44 214.548 467.323 214.893C465.205 215.189 463.285 215.459 461.561 215.706C457.868 216.247 454.643 217.109 451.885 218.291C449.128 219.473 446.986 221.073 445.459 223.092C443.933 225.062 443.169 227.524 443.169 230.478C443.169 234.762 444.72 238.037 447.823 240.302C450.974 242.518 454.963 243.626 459.789 243.626ZM562.227 197.609V263.2H530.761V149.745H560.75V169.762H562.079C564.591 163.164 568.801 157.944 574.71 154.103C580.619 150.213 587.784 148.268 596.204 148.268C604.083 148.268 610.953 149.992 616.812 153.439C622.672 156.886 627.227 161.81 630.477 168.211C633.727 174.564 635.352 182.147 635.352 190.961V263.2H603.886V196.575C603.935 189.632 602.163 184.215 598.568 180.325C594.973 176.386 590.024 174.416 583.721 174.416C579.487 174.416 575.744 175.327 572.494 177.149C569.293 178.971 566.782 181.63 564.96 185.126C563.187 188.573 562.276 192.734 562.227 197.609ZM684.184 265.342C676.945 265.342 670.495 264.086 664.832 261.575C659.169 259.014 654.688 255.247 651.389 250.274C648.139 245.251 646.514 238.997 646.514 231.512C646.514 225.209 647.671 219.916 649.985 215.632C652.3 211.348 655.451 207.901 659.44 205.291C663.428 202.681 667.959 200.711 673.031 199.382C678.152 198.052 683.519 197.117 689.133 196.575C695.731 195.886 701.05 195.245 705.088 194.654C709.125 194.014 712.055 193.079 713.877 191.848C715.699 190.617 716.61 188.795 716.61 186.382V185.939C716.61 181.261 715.133 177.641 712.178 175.081C709.273 172.52 705.137 171.24 699.769 171.24C694.106 171.24 689.601 172.495 686.252 175.007C682.904 177.469 680.688 180.571 679.605 184.314L650.502 181.95C651.98 175.056 654.885 169.098 659.218 164.075C663.552 159.003 669.141 155.113 675.985 152.404C682.879 149.647 690.856 148.268 699.917 148.268C706.22 148.268 712.252 149.007 718.014 150.484C723.824 151.961 728.97 154.251 733.451 157.353C737.981 160.456 741.552 164.444 744.161 169.319C746.771 174.145 748.076 179.931 748.076 186.677V263.2H718.235V247.467H717.349C715.527 251.012 713.089 254.139 710.036 256.848C706.983 259.507 703.315 261.6 699.031 263.126C694.747 264.603 689.798 265.342 684.184 265.342ZM693.195 243.626C697.824 243.626 701.911 242.715 705.457 240.893C709.002 239.022 711.784 236.511 713.803 233.359C715.822 230.208 716.832 226.637 716.832 222.649V210.609C715.847 211.249 714.493 211.84 712.769 212.382C711.095 212.874 709.199 213.342 707.082 213.785C704.964 214.179 702.847 214.548 700.73 214.893C698.612 215.189 696.692 215.459 694.968 215.706C691.275 216.247 688.05 217.109 685.292 218.291C682.534 219.473 680.392 221.073 678.866 223.092C677.339 225.062 676.576 227.524 676.576 230.478C676.576 234.762 678.127 238.037 681.23 240.302C684.381 242.518 688.37 243.626 693.195 243.626ZM845.796 265.047C837.178 265.047 829.373 262.831 822.381 258.399C815.438 253.918 809.922 247.344 805.835 238.677C801.797 229.961 799.779 219.276 799.779 206.62C799.779 193.62 801.871 182.812 806.057 174.194C810.243 165.528 815.807 159.052 822.75 154.768C829.743 150.435 837.4 148.268 845.722 148.268C852.074 148.268 857.368 149.351 861.602 151.518C865.886 153.636 869.333 156.295 871.943 159.495C874.602 162.647 876.621 165.749 878 168.802H878.96V111.927H910.352V263.2H879.33V245.029H878C876.523 248.181 874.43 251.308 871.722 254.41C869.063 257.463 865.591 259.999 861.307 262.018C857.072 264.037 851.902 265.047 845.796 265.047ZM855.767 240.007C860.839 240.007 865.123 238.628 868.619 235.87C872.165 233.064 874.873 229.149 876.744 224.126C878.665 219.103 879.625 213.219 879.625 206.473C879.625 199.726 878.69 193.867 876.818 188.893C874.947 183.92 872.239 180.079 868.693 177.37C865.148 174.662 860.839 173.308 855.767 173.308C850.597 173.308 846.239 174.711 842.693 177.518C839.148 180.325 836.464 184.215 834.642 189.189C832.82 194.162 831.909 199.923 831.909 206.473C831.909 213.071 832.82 218.906 834.642 223.978C836.513 229.001 839.197 232.94 842.693 235.797C846.239 238.603 850.597 240.007 855.767 240.007ZM979.608 265.416C967.937 265.416 957.892 263.052 949.471 258.325C941.1 253.548 934.649 246.802 930.119 238.086C925.589 229.321 923.324 218.956 923.324 206.99C923.324 195.319 925.589 185.077 930.119 176.262C934.649 167.448 941.026 160.579 949.25 155.654C957.522 150.73 967.223 148.268 978.352 148.268C985.837 148.268 992.805 149.475 999.255 151.887C1005.76 154.251 1011.42 157.821 1016.24 162.598C1021.12 167.374 1024.91 173.382 1027.62 180.62C1030.33 187.81 1031.68 196.23 1031.68 205.882V214.524H935.88V195.024H1002.06C1002.06 190.494 1001.08 186.48 999.108 182.984C997.138 179.488 994.405 176.755 990.909 174.785C987.462 172.766 983.449 171.757 978.869 171.757C974.093 171.757 969.858 172.865 966.165 175.081C962.521 177.247 959.664 180.177 957.596 183.87C955.528 187.514 954.469 191.577 954.42 196.058V214.598C954.42 220.211 955.454 225.062 957.522 229.149C959.64 233.236 962.619 236.387 966.46 238.603C970.301 240.819 974.856 241.927 980.125 241.927C983.621 241.927 986.822 241.435 989.727 240.45C992.632 239.465 995.119 237.988 997.187 236.018C999.255 234.048 1000.83 231.636 1001.91 228.779L1031.02 230.7C1029.54 237.692 1026.51 243.798 1021.93 249.018C1017.4 254.189 1011.54 258.226 1004.35 261.132C997.212 263.988 988.964 265.416 979.608 265.416ZM1083.72 263.2V149.745H1115.18V263.2H1083.72ZM1099.52 135.12C1094.85 135.12 1090.83 133.569 1087.48 130.467C1084.18 127.315 1082.53 123.548 1082.53 119.166C1082.53 114.833 1084.18 111.115 1087.48 108.012C1090.83 104.861 1094.85 103.285 1099.52 103.285C1104.2 103.285 1108.19 104.861 1111.49 108.012C1114.84 111.115 1116.51 114.833 1116.51 119.166C1116.51 123.548 1114.84 127.315 1111.49 130.467C1108.19 133.569 1104.2 135.12 1099.52 135.12ZM1163.53 197.609V263.2H1132.07V149.745H1162.06V169.762H1163.39C1165.9 163.164 1170.11 157.944 1176.02 154.103C1181.93 150.213 1189.09 148.268 1197.51 148.268C1205.39 148.268 1212.26 149.992 1218.12 153.439C1223.98 156.886 1228.53 161.81 1231.78 168.211C1235.03 174.564 1236.66 182.147 1236.66 190.961V263.2H1205.19V196.575C1205.24 189.632 1203.47 184.215 1199.87 180.325C1196.28 176.386 1191.33 174.416 1185.03 174.416C1180.79 174.416 1177.05 175.327 1173.8 177.149C1170.6 178.971 1168.09 181.63 1166.27 185.126C1164.49 188.573 1163.58 192.734 1163.53 197.609ZM1314.15 149.745V173.382H1244.13V149.745H1314.15ZM1260.16 263.2V141.547C1260.16 133.323 1261.76 126.503 1264.96 121.086C1268.21 115.67 1272.64 111.607 1278.25 108.899C1283.87 106.19 1290.24 104.836 1297.38 104.836C1302.21 104.836 1306.62 105.206 1310.6 105.944C1314.64 106.683 1317.65 107.348 1319.62 107.939L1314 131.575C1312.77 131.181 1311.24 130.812 1309.42 130.467C1307.65 130.122 1305.83 129.95 1303.96 129.95C1299.33 129.95 1296.1 131.033 1294.28 133.2C1292.46 135.317 1291.55 138.297 1291.55 142.137V263.2H1260.16ZM1372.25 265.416C1360.78 265.416 1350.86 262.978 1342.48 258.103C1334.16 253.179 1327.74 246.334 1323.21 237.569C1318.68 228.755 1316.41 218.537 1316.41 206.916C1316.41 195.196 1318.68 184.954 1323.21 176.189C1327.74 167.374 1334.16 160.529 1342.48 155.654C1350.86 150.73 1360.78 148.268 1372.25 148.268C1383.73 148.268 1393.62 150.73 1401.95 155.654C1410.32 160.529 1416.77 167.374 1421.3 176.189C1425.83 184.954 1428.09 195.196 1428.09 206.916C1428.09 218.537 1425.83 228.755 1421.3 237.569C1416.77 246.334 1410.32 253.179 1401.95 258.103C1393.62 262.978 1383.73 265.416 1372.25 265.416ZM1372.4 241.041C1377.62 241.041 1381.98 239.564 1385.47 236.609C1388.97 233.605 1391.6 229.518 1393.38 224.348C1395.2 219.177 1396.11 213.293 1396.11 206.694C1396.11 200.096 1395.2 194.211 1393.38 189.041C1391.6 183.87 1388.97 179.783 1385.47 176.779C1381.98 173.776 1377.62 172.274 1372.4 172.274C1367.13 172.274 1362.7 173.776 1359.1 176.779C1355.56 179.783 1352.88 183.87 1351.05 189.041C1349.28 194.211 1348.39 200.096 1348.39 206.694C1348.39 213.293 1349.28 219.177 1351.05 224.348C1352.88 229.518 1355.56 233.605 1359.1 236.609C1362.7 239.564 1367.13 241.041 1372.4 241.041ZM1440.23 263.2V149.745H1470.74V169.541H1471.92C1473.99 162.499 1477.46 157.181 1482.34 153.586C1487.21 149.942 1492.82 148.12 1499.18 148.12C1500.75 148.12 1502.45 148.219 1504.27 148.416C1506.09 148.613 1507.7 148.884 1509.07 149.228V177.149C1507.6 176.706 1505.55 176.312 1502.94 175.967C1500.33 175.622 1497.95 175.45 1495.78 175.45C1491.15 175.45 1487.01 176.459 1483.37 178.478C1479.77 180.448 1476.92 183.206 1474.8 186.751C1472.73 190.297 1471.7 194.384 1471.7 199.012V263.2H1440.23ZM1517.02 263.2V149.745H1547.01V169.762H1548.34C1550.7 163.115 1554.64 157.87 1560.16 154.029C1565.67 150.189 1572.27 148.268 1579.95 148.268C1587.73 148.268 1594.36 150.213 1599.82 154.103C1605.29 157.944 1608.93 163.164 1610.76 169.762H1611.94C1614.25 163.262 1618.44 158.067 1624.49 154.177C1630.6 150.238 1637.81 148.268 1646.14 148.268C1656.72 148.268 1665.32 151.641 1671.91 158.387C1678.56 165.084 1681.89 174.588 1681.89 186.899V263.2H1650.49V193.103C1650.49 186.8 1648.82 182.073 1645.47 178.922C1642.12 175.77 1637.94 174.194 1632.91 174.194C1627.2 174.194 1622.75 176.016 1619.55 179.66C1616.34 183.255 1614.74 188.007 1614.74 193.916V263.2H1584.24V192.439C1584.24 186.874 1582.64 182.442 1579.44 179.143C1576.29 175.844 1572.12 174.194 1566.95 174.194C1563.46 174.194 1560.31 175.081 1557.5 176.853C1554.74 178.577 1552.55 181.014 1550.93 184.166C1549.3 187.268 1548.49 190.912 1548.49 195.098V263.2H1517.02ZM1730.77 265.342C1723.53 265.342 1717.08 264.086 1711.42 261.575C1705.76 259.014 1701.28 255.247 1697.98 250.274C1694.73 245.251 1693.1 238.997 1693.1 231.512C1693.1 225.209 1694.26 219.916 1696.57 215.632C1698.89 211.348 1702.04 207.901 1706.03 205.291C1710.02 202.681 1714.55 200.711 1719.62 199.382C1724.74 198.052 1730.11 197.117 1735.72 196.575C1742.32 195.886 1747.64 195.245 1751.68 194.654C1755.71 194.014 1758.64 193.079 1760.47 191.848C1762.29 190.617 1763.2 188.795 1763.2 186.382V185.939C1763.2 181.261 1761.72 177.641 1758.77 175.081C1755.86 172.52 1751.73 171.24 1746.36 171.24C1740.7 171.24 1736.19 172.495 1732.84 175.007C1729.49 177.469 1727.28 180.571 1726.19 184.314L1697.09 181.95C1698.57 175.056 1701.47 169.098 1705.81 164.075C1710.14 159.003 1715.73 155.113 1722.57 152.404C1729.47 149.647 1737.45 148.268 1746.51 148.268C1752.81 148.268 1758.84 149.007 1764.6 150.484C1770.41 151.961 1775.56 154.251 1780.04 157.353C1784.57 160.456 1788.14 164.444 1790.75 169.319C1793.36 174.145 1794.67 179.931 1794.67 186.677V263.2H1764.82V247.467H1763.94C1762.12 251.012 1759.68 254.139 1756.63 256.848C1753.57 259.507 1749.9 261.6 1745.62 263.126C1741.34 264.603 1736.39 265.342 1730.77 265.342ZM1739.78 243.626C1744.41 243.626 1748.5 242.715 1752.05 240.893C1755.59 239.022 1758.37 236.511 1760.39 233.359C1762.41 230.208 1763.42 226.637 1763.42 222.649V210.609C1762.44 211.249 1761.08 211.84 1759.36 212.382C1757.68 212.874 1755.79 213.342 1753.67 213.785C1751.55 214.179 1749.44 214.548 1747.32 214.893C1745.2 215.189 1743.28 215.459 1741.56 215.706C1737.86 216.247 1734.64 217.109 1731.88 218.291C1729.12 219.473 1726.98 221.073 1725.46 223.092C1723.93 225.062 1723.17 227.524 1723.17 230.478C1723.17 234.762 1724.72 238.037 1727.82 240.302C1730.97 242.518 1734.96 243.626 1739.78 243.626ZM1736.39 135.12L1752.05 101.512H1781.15L1758.62 135.12H1736.39ZM1871.1 149.745V173.382H1802.78V149.745H1871.1ZM1818.29 122.564H1849.76V228.336C1849.76 231.242 1850.2 233.507 1851.09 235.132C1851.97 236.708 1853.2 237.815 1854.78 238.456C1856.41 239.096 1858.28 239.416 1860.39 239.416C1861.87 239.416 1863.35 239.293 1864.83 239.047C1866.3 238.751 1867.44 238.529 1868.22 238.382L1873.17 261.797C1871.6 262.289 1869.38 262.855 1866.52 263.495C1863.67 264.185 1860.2 264.603 1856.11 264.751C1848.53 265.047 1841.88 264.037 1836.17 261.723C1830.5 259.408 1826.1 255.814 1822.95 250.939C1819.79 246.064 1818.24 239.908 1818.29 232.473V122.564ZM1883.28 263.2V149.745H1914.75V263.2H1883.28ZM1899.09 135.12C1894.41 135.12 1890.4 133.569 1887.05 130.467C1883.75 127.315 1882.1 123.548 1882.1 119.166C1882.1 114.833 1883.75 111.115 1887.05 108.012C1890.4 104.861 1894.41 103.285 1899.09 103.285C1903.77 103.285 1907.75 104.861 1911.05 108.012C1914.4 111.115 1916.08 114.833 1916.08 119.166C1916.08 123.548 1914.4 127.315 1911.05 130.467C1907.75 133.569 1903.77 135.12 1899.09 135.12ZM1982.89 265.416C1971.27 265.416 1961.28 262.954 1952.91 258.029C1944.58 253.056 1938.18 246.162 1933.7 237.348C1929.27 228.533 1927.05 218.389 1927.05 206.916C1927.05 195.295 1929.29 185.101 1933.78 176.336C1938.31 167.522 1944.73 160.653 1953.05 155.728C1961.38 150.755 1971.27 148.268 1982.75 148.268C1992.64 148.268 2001.31 150.065 2008.75 153.66C2016.18 157.255 2022.07 162.302 2026.4 168.802C2030.73 175.302 2033.12 182.935 2033.57 191.7H2003.87C2003.03 186.037 2000.82 181.482 1997.22 178.035C1993.68 174.539 1989.03 172.791 1983.26 172.791C1978.39 172.791 1974.13 174.12 1970.49 176.779C1966.89 179.389 1964.08 183.206 1962.07 188.228C1960.05 193.251 1959.04 199.333 1959.04 206.473C1959.04 213.711 1960.02 219.867 1961.99 224.939C1964.01 230.011 1966.84 233.876 1970.49 236.535C1974.13 239.194 1978.39 240.524 1983.26 240.524C1986.86 240.524 1990.08 239.785 1992.94 238.308C1995.85 236.831 1998.23 234.689 2000.1 231.882C2002.03 229.026 2003.28 225.603 2003.87 221.615H2033.57C2033.07 230.281 2030.71 237.914 2026.47 244.512C2022.29 251.062 2016.5 256.183 2009.12 259.876C2001.73 263.569 1992.99 265.416 1982.89 265.416ZM2077.74 265.342C2070.51 265.342 2064.05 264.086 2058.39 261.575C2052.73 259.014 2048.25 255.247 2044.95 250.274C2041.7 245.251 2040.07 238.997 2040.07 231.512C2040.07 225.209 2041.23 219.916 2043.54 215.632C2045.86 211.348 2049.01 207.901 2053 205.291C2056.99 202.681 2061.52 200.711 2066.59 199.382C2071.71 198.052 2077.08 197.117 2082.69 196.575C2089.29 195.886 2094.61 195.245 2098.65 194.654C2102.68 194.014 2105.61 193.079 2107.44 191.848C2109.26 190.617 2110.17 188.795 2110.17 186.382V185.939C2110.17 181.261 2108.69 177.641 2105.74 175.081C2102.83 172.52 2098.7 171.24 2093.33 171.24C2087.67 171.24 2083.16 172.495 2079.81 175.007C2076.46 177.469 2074.25 180.571 2073.16 184.314L2044.06 181.95C2045.54 175.056 2048.44 169.098 2052.78 164.075C2057.11 159.003 2062.7 155.113 2069.54 152.404C2076.44 149.647 2084.42 148.268 2093.48 148.268C2099.78 148.268 2105.81 149.007 2111.57 150.484C2117.38 151.961 2122.53 154.251 2127.01 157.353C2131.54 160.456 2135.11 164.444 2137.72 169.319C2140.33 174.145 2141.64 179.931 2141.64 186.677V263.2H2111.79V247.467H2110.91C2109.09 251.012 2106.65 254.139 2103.6 256.848C2100.54 259.507 2096.87 261.6 2092.59 263.126C2088.31 264.603 2083.36 265.342 2077.74 265.342ZM2086.76 243.626C2091.38 243.626 2095.47 242.715 2099.02 240.893C2102.56 239.022 2105.34 236.511 2107.36 233.359C2109.38 230.208 2110.39 226.637 2110.39 222.649V210.609C2109.41 211.249 2108.05 211.84 2106.33 212.382C2104.65 212.874 2102.76 213.342 2100.64 213.785C2098.52 214.179 2096.41 214.548 2094.29 214.893C2092.17 215.189 2090.25 215.459 2088.53 215.706C2084.83 216.247 2081.61 217.109 2078.85 218.291C2076.09 219.473 2073.95 221.073 2072.43 223.092C2070.9 225.062 2070.14 227.524 2070.14 230.478C2070.14 234.762 2071.69 238.037 2074.79 240.302C2077.94 242.518 2081.93 243.626 2086.76 243.626Z" fill="url(#paint0_linear_3389_1976)"/>
+<path d="M2319.12 187.2H2404.06C2421.86 187.2 2438.94 194.275 2451.53 206.869C2464.13 219.463 2471.2 236.543 2471.2 254.354V339.27C2471.2 348.587 2474.9 357.522 2481.49 364.111C2488.07 370.699 2497.01 374.4 2506.32 374.4H2623.28C2632.59 374.4 2641.53 370.699 2648.11 364.111C2654.7 357.522 2658.4 348.587 2658.4 339.27V222.33C2658.4 213.013 2654.7 204.077 2648.11 197.489C2641.53 190.901 2632.59 187.2 2623.28 187.2H2538.34C2520.54 187.2 2503.46 180.125 2490.87 167.531C2478.27 154.937 2471.2 137.857 2471.2 120.046V35.13C2471.2 25.8129 2467.5 16.8775 2460.91 10.2893C2454.33 3.70118 2445.39 0 2436.08 0H2319.12C2309.81 0 2300.87 3.70118 2294.29 10.2893C2287.7 16.8775 2284 25.8129 2284 35.13V152.07C2284 161.387 2287.7 170.322 2294.29 176.911C2300.87 183.499 2309.81 187.2 2319.12 187.2Z" fill="#F9F9F9"/>
+<defs>
+<linearGradient id="paint0_linear_3389_1976" x1="2145.7" y1="61.2" x2="1154.25" y2="1264.43" gradientUnits="userSpaceOnUse">
+<stop offset="1" stop-color="#F9F9F9"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/resources/css/app.css b/resources/css/app.css
index 95df4d9b..80fbf586 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,122 +1,55 @@
 @import "tailwindcss";
 
-@plugin "@tailwindcss/forms";
-@plugin "@tailwindcss/typography";
+@source "../views";
+@source "../js";
 
 @theme {
     --font-sans:
-        "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
-        "Noto Color Emoji";
-
-    --color-text-color: #ffffff;
-
-    /* Theme: Core Brand & Ambient Glow Palette */
-    --color-sinf-primary: rgb(154, 0, 54);
-    --color-sinf-primary-light: rgb(220, 55, 105);
-    --color-sinf-primary-dark: rgb(64, 0, 23);
-    --color-sinf-secondary: rgb(106, 0, 255);
-    --color-sinf-secondary-light: rgb(165, 100, 255);
-    --color-sinf-secondary-dark: rgb(34, 1, 153);
-    --color-sinf-surface: #111215;
-    --color-sinf-surface-dark: #090a0c;
-
-    /* Previous Editions Theme Colors */
-    --color-2025-bg-green: #59b672;
-    --color-2025-blue: #3a9699;
-    --color-2025-bg: #1a74c2;
-    --color-2025-blue-dark: #0f3d57;
-    --color-2023-bg: rgb(248, 245, 231);
-    --color-2023-red: rgb(217, 79, 4);
-    --color-2023-red-dark: rgb(177, 93, 93);
-    --color-2023-teal: rgb(0, 113, 114);
-    --color-2023-teal-dark: rgb(2, 82, 89);
-    --color-2023-orange: rgb(242, 147, 37);
-
-    --background-image-2025-bg-gradient: linear-gradient(
-        45deg,
-        #0f3d56 0%,
-        #1a74c2 80%,
-        #59b672 100%
-    );
-
-    /* Shadows & Inset Highlights */
-    --shadow-sm:
-        2px 2px 0 -1px var(--tw-shadow-color, currentColor), 2px 2px 0 0 black;
-    --shadow:
-        4px 4px 0 -1px var(--tw-shadow-color, currentColor), 4px 4px 0 0 black;
-    --shadow-md:
-        6px 6px 0 -1px var(--tw-shadow-color, currentColor), 6px 6px 0 0 black;
-    --shadow-lg:
-        8px 8px 0 -1px var(--tw-shadow-color, currentColor), 8px 8px 0 0 black;
-    --shadow-xl:
-        12px 12px 0 -1px var(--tw-shadow-color, currentColor),
-        12px 12px 0 0 black;
-    --shadow-2xl:
-        16px 16px 0 -1px var(--tw-shadow-color, currentColor),
-        16px 16px 0 0 black;
-
-    --shadow-pill-inset: inset 0 1px 1px rgba(255, 255, 255, 0.05);
-    --shadow-pill-active: inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
-    --shadow-dropdown: 0 20px 50px rgba(0, 0, 0, 0.8);
-
-    /* Keyframe Animations */
-    --animate-2023-maintenance-jump: 2023-jump 2s
-        cubic-bezier(0.46, 0.03, 0.52, 0.96) infinite;
-    --animate-float-primary-1: float-primary-1 10s ease-in-out infinite;
-    --animate-float-secondary-1: float-secondary-1 12s ease-in-out infinite;
-    --animate-float-primary-2: float-primary-2 9s ease-in-out infinite;
-    --animate-float-secondary-2: float-secondary-2 11s ease-in-out infinite;
-    --animate-float-crimson-1: var(--animate-float-primary-1);
-    --animate-float-purple-1: var(--animate-float-secondary-1);
-    --animate-float-crimson-2: var(--animate-float-primary-2);
-    --animate-float-purple-2: var(--animate-float-secondary-2);
-    --animate-spin-slow: spin 25s linear infinite;
-
-    --breakpoint-ml: 900px;
-    --breakpoint-xs: 500px;
-}
-
-@keyframes 2023-jump {
-    0%,
-    100% {
-        transform: translateY(0px);
-    }
-    50% {
-        transform: translateY(-30px);
-    }
+        Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    --font-heading:
+        Plus Jakarta Sans, -apple-system, BlinkMacSystemFont, "Segoe UI",
+        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
+        sans-serif;
+
+    --color-sinf-primary: #9a0036;
+    --color-sinf-secondary: #6a00ff;
+
+    --shadow-pill-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
+    --shadow-pill-active:
+        inset 0 1px 0 0 rgba(255, 255, 255, 0.2), 0 2px 8px rgba(0, 0, 0, 0.4);
+    --shadow-dropdown:
+        0 16px 40px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
+
+    --animate-float-primary-1: float-primary-1 8s ease-in-out infinite alternate;
+    --animate-float-secondary-1: float-secondary-1 10s ease-in-out infinite
+        alternate;
+    --animate-float-primary-2: float-primary-2 9s ease-in-out infinite alternate;
+    --animate-float-secondary-2: float-secondary-2 11s ease-in-out infinite
+        alternate;
 }
 
 @keyframes float-primary-1 {
     0%,
     100% {
-        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
-        opacity: 0.85;
-    }
-    33% {
-        transform: translate3d(-18vw, 12vh, 0) scale(1.2) rotate(45deg);
-        opacity: 1;
+        transform: translate3d(0, 0, 0) scale(1);
+        opacity: 0.8;
     }
-    66% {
-        transform: translate3d(-8vw, -15vh, 0) scale(0.9) rotate(-30deg);
-        opacity: 0.75;
+    50% {
+        transform: translate3d(15vw, 12vh, 0) scale(1.15);
+        opacity: 0.95;
     }
 }
 
 @keyframes float-secondary-1 {
     0%,
     100% {
-        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
-        opacity: 0.8;
-    }
-    33% {
-        transform: translate3d(18vw, -14vh, 0) scale(0.85) rotate(-45deg);
-        opacity: 0.65;
+        transform: translate3d(0, 0, 0) scale(1);
+        opacity: 0.7;
     }
-    66% {
-        transform: translate3d(10vw, 16vh, 0) scale(1.25) rotate(35deg);
-        opacity: 0.95;
+    50% {
+        transform: translate3d(-18vw, 15vh, 0) scale(1.2);
+        opacity: 0.85;
     }
 }
 
@@ -124,10 +57,10 @@
     0%,
     100% {
         transform: translate3d(0, 0, 0) scale(1);
-        opacity: 0.7;
+        opacity: 0.75;
     }
     50% {
-        transform: translate3d(-20vw, -18vh, 0) scale(1.3);
+        transform: translate3d(-15vw, -12vh, 0) scale(1.25);
         opacity: 0.95;
     }
 }
@@ -255,12 +188,23 @@
 }
 
 @layer base {
-    *,
-    ::after,
-    ::before,
-    ::backdrop,
-    ::file-selector-button {
-        border-color: var(--color-gray-200, currentcolor);
+    * {
+        border-color: rgba(255, 255, 255, 0.08);
+    }
+
+    select {
+        color-scheme: dark;
+    }
+
+    select option {
+        background-color: #121319 !important;
+        color: #f3f4f6 !important;
+        padding: 8px 12px;
+    }
+
+    select option:checked {
+        background-color: #252833 !important;
+        color: #ffffff !important;
     }
 }
 
diff --git a/resources/js/Components/CRUD/CRUDModal.vue b/resources/js/Components/CRUD/CRUDModal.vue
new file mode 100644
index 00000000..ae728479
--- /dev/null
+++ b/resources/js/Components/CRUD/CRUDModal.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import Modal from "@/Components/UI/Modal.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import { router } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
+
+interface Props {
+    title: string;
+    description?: string;
+    name?: string;
+    backUrl?: string;
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | string;
+    submitLabel?: string;
+    cancelLabel?: string;
+    processing?: boolean;
+    hideFooter?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    description: "",
+    name: "",
+    backUrl: "",
+    maxWidth: "lg",
+    submitLabel: "",
+    cancelLabel: "Cancelar",
+    processing: false,
+    hideFooter: false,
+});
+
+const emit = defineEmits<{
+    (e: "close"): void;
+    (e: "submit"): void;
+}>();
+
+const close = () => {
+    emit("close");
+    if (props.backUrl) {
+        router.visit(props.backUrl, { preserveScroll: true });
+    } else if (props.name) {
+        router.visit(route(`admin.${props.name}.index`), {
+            preserveScroll: true,
+        });
+    } else {
+        window.history.back();
+    }
+};
+
+const computedSubmitLabel = computed(() => {
+    if (props.submitLabel) return props.submitLabel;
+    const lower = props.title.toLowerCase();
+    if (
+        lower.startsWith("editar") ||
+        lower.startsWith("atualizar") ||
+        lower.startsWith("alterar")
+    ) {
+        return "Guardar alterações";
+    }
+    return "Criar";
+});
+</script>
+
+<template>
+    <Modal
+        :model-value="true"
+        :title="title"
+        :description="description"
+        :max-width="maxWidth"
+        @close="close"
+    >
+        <form
+            id="crud-modal-form"
+            class="flex flex-col gap-4.5"
+            @submit.prevent="emit('submit')"
+        >
+            <slot :close="close" />
+
+            <div
+                v-if="!hideFooter"
+                class="mt-2 flex items-center justify-end gap-2.5 border-t border-white/10 pt-4"
+            >
+                <PrimaryButton
+                    type="button"
+                    color="pill"
+                    text-size="text-xs"
+                    @click="close"
+                >
+                    {{ cancelLabel }}
+                </PrimaryButton>
+
+                <PrimaryButton
+                    type="submit"
+                    color="pill"
+                    text-size="text-xs"
+                    :disabled="processing"
+                >
+                    {{ computedSubmitLabel }}
+                </PrimaryButton>
+            </div>
+        </form>
+    </Modal>
+</template>
diff --git a/resources/js/Components/CRUD/CRUDView.vue b/resources/js/Components/CRUD/CRUDView.vue
new file mode 100644
index 00000000..8ec46c67
--- /dev/null
+++ b/resources/js/Components/CRUD/CRUDView.vue
@@ -0,0 +1,157 @@
+<script setup lang="ts" generic="T extends Model">
+import { computed, type Component } from "vue";
+import { usePage } from "@inertiajs/vue3";
+import AdminLayout from "@/Layouts/AdminLayout.vue";
+import Table from "@/Components/CRUD/Table.vue";
+import PaginationLinks from "@/Components/UI/PaginationLinks.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import useSearch from "@/Composables/useSearch";
+import type Model from "@/Types/Model";
+import type Paginated from "@/Types/Paginated";
+import { route } from "ziggy-js";
+import { Plus, Search, X } from "@lucide/vue";
+
+interface Props {
+    title: string;
+    name: string;
+    view?: string;
+    items: Paginated<T>;
+    isSearchable?: boolean;
+    canCreate?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    view: "",
+    isSearchable: false,
+    canCreate: true,
+});
+
+defineSlots<{
+    heading?: () => unknown;
+    actions?: () => unknown;
+    header?: () => unknown;
+    row?: (props: { item: T }) => unknown;
+}>();
+
+const search = useSearch();
+const page = usePage();
+
+const createModules = import.meta.glob<Component>(
+    "../../Pages/CRUD/*/Create.vue",
+    { eager: true, import: "default" },
+);
+const editModules = import.meta.glob<Component>("../../Pages/CRUD/*/Edit.vue", {
+    eager: true,
+    import: "default",
+});
+
+const currentView = computed(() => {
+    if (props.view) return props.view;
+    if (typeof page.props.view === "string") return page.props.view;
+    return "";
+});
+
+const modalAction = computed(
+    () => page.props.modal as "create" | "edit" | undefined,
+);
+const modalItem = computed(() => page.props.item as Model | undefined);
+const modalWith = computed(
+    () => page.props.with as Record<string, unknown> | undefined,
+);
+
+const activeModalComponent = computed(() => {
+    if (!modalAction.value || !currentView.value) return null;
+    if (modalAction.value === "create") {
+        return (
+            createModules[`../../Pages/CRUD/${currentView.value}/Create.vue`] ??
+            null
+        );
+    }
+    if (modalAction.value === "edit") {
+        return (
+            editModules[`../../Pages/CRUD/${currentView.value}/Edit.vue`] ??
+            null
+        );
+    }
+    return null;
+});
+</script>
+
+<template>
+    <AdminLayout :title="title">
+        <template #header-title>
+            <slot name="heading">
+                <h1
+                    class="text-base font-bold tracking-tight text-white sm:text-lg"
+                >
+                    {{ title }}
+                </h1>
+            </slot>
+        </template>
+
+        <template #header-actions>
+            <slot name="actions">
+                <!-- Pill Search Input -->
+                <div
+                    v-if="isSearchable"
+                    class="relative flex flex-1 items-center sm:flex-initial"
+                >
+                    <Search
+                        :size="15"
+                        class="pointer-events-none absolute left-3 z-10 text-neutral-300"
+                    />
+                    <input
+                        v-model="search"
+                        type="text"
+                        placeholder="Pesquisar..."
+                        class="pill-container h-8 w-full pr-7 pl-8.5 text-xs text-white placeholder-neutral-400 focus:outline-none sm:w-60"
+                    />
+                    <button
+                        v-if="search"
+                        type="button"
+                        class="absolute right-2.5 z-10 cursor-pointer text-neutral-400 transition-colors hover:text-white"
+                        aria-label="Limpar pesquisa"
+                        @click="search = ''"
+                    >
+                        <X :size="13" />
+                    </button>
+                </div>
+
+                <!-- "Novo" Pill Button -->
+                <PrimaryButton
+                    v-if="canCreate"
+                    :href="route(`admin.${name}.create`)"
+                    color="pill"
+                    padding="px-3.5 py-1.5"
+                    text-size="text-xs"
+                    class="flex shrink-0 items-center gap-1.5"
+                >
+                    <Plus :size="14" />
+                    <span>Novo</span>
+                </PrimaryButton>
+            </slot>
+        </template>
+
+        <!-- Main View: Table & Pagination -->
+        <div class="flex flex-col gap-6">
+            <Table :items="items.data">
+                <template #header>
+                    <slot name="header" />
+                </template>
+                <template #row="{ item }">
+                    <slot name="row" :item="item" />
+                </template>
+            </Table>
+
+            <PaginationLinks :links="items.links" />
+        </div>
+
+        <!-- Dynamic CRUD Modal rendered OVER the table -->
+        <component
+            :is="activeModalComponent"
+            v-if="activeModalComponent"
+            :item="modalItem"
+            :with="modalWith"
+        />
+    </AdminLayout>
+</template>
diff --git a/resources/js/Components/CRUD/Cell.vue b/resources/js/Components/CRUD/Cell.vue
index a7198780..fcb5ba22 100644
--- a/resources/js/Components/CRUD/Cell.vue
+++ b/resources/js/Components/CRUD/Cell.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts"></script>
 
 <template>
-    <td class="px-4 py-2 text-start last:text-right"><slot></slot></td>
+    <td
+        class="px-4 py-3.5 align-middle text-sm whitespace-nowrap text-neutral-300 first:pl-6 last:pr-6 last:text-right"
+    >
+        <slot></slot>
+    </td>
 </template>
diff --git a/resources/js/Components/CRUD/Header.vue b/resources/js/Components/CRUD/Header.vue
index 3f007528..fff24e77 100644
--- a/resources/js/Components/CRUD/Header.vue
+++ b/resources/js/Components/CRUD/Header.vue
@@ -1,5 +1,252 @@
+<script setup lang="ts">
+import { computed, ref, onMounted, onUnmounted } from "vue";
+import { router } from "@inertiajs/vue3";
+import { ArrowUpDown, ArrowUp, ArrowDown, Filter, Check } from "@lucide/vue";
+
+interface Props {
+    sortBy?: string;
+    filterBy?: string;
+    filterValues?: Record<string | number, string>;
+}
+
+const props = defineProps<Props>();
+
+const filterMenuOpen = ref(false);
+const filterContainerRef = ref<HTMLElement | null>(null);
+
+const handleClickOutside = (e: MouseEvent) => {
+    if (
+        filterContainerRef.value &&
+        !filterContainerRef.value.contains(e.target as Node)
+    ) {
+        filterMenuOpen.value = false;
+    }
+};
+
+onMounted(() => {
+    document.addEventListener("click", handleClickOutside);
+});
+
+onUnmounted(() => {
+    document.removeEventListener("click", handleClickOutside);
+});
+
+const currentSortBy = computed(() => {
+    if (typeof window === "undefined") return null;
+    return new URLSearchParams(window.location.search).get("sort_by");
+});
+
+const currentSortDir = computed(() => {
+    if (typeof window === "undefined") return "asc";
+    return new URLSearchParams(window.location.search).get("sort_dir") ?? "asc";
+});
+
+const isSorted = computed(() => {
+    return props.sortBy && currentSortBy.value === props.sortBy;
+});
+
+const isSortedAsc = computed(() => {
+    return isSorted.value && currentSortDir.value === "asc";
+});
+
+const isSortedDesc = computed(() => {
+    return isSorted.value && currentSortDir.value === "desc";
+});
+
+const toggleSort = () => {
+    if (!props.sortBy) return;
+
+    const url = new URL(window.location.href);
+    let nextDir = "asc";
+
+    if (currentSortBy.value === props.sortBy) {
+        if (currentSortDir.value === "asc") {
+            nextDir = "desc";
+        } else {
+            // Reset sort
+            url.searchParams.delete("sort_by");
+            url.searchParams.delete("sort_dir");
+            url.searchParams.set("page", "1");
+            router.visit(url.toString(), {
+                preserveState: true,
+                preserveScroll: true,
+                replace: true,
+                only: ["items"],
+            });
+            return;
+        }
+    }
+
+    url.searchParams.set("sort_by", props.sortBy);
+    url.searchParams.set("sort_dir", nextDir);
+    url.searchParams.set("page", "1");
+
+    router.visit(url.toString(), {
+        preserveState: true,
+        preserveScroll: true,
+        replace: true,
+        only: ["items"],
+    });
+};
+
+const currentFilterValue = computed(() => {
+    if (!props.filterBy || typeof window === "undefined") return "";
+    return (
+        new URLSearchParams(window.location.search).get(props.filterBy) ?? ""
+    );
+});
+
+const isFilterActive = computed(() => {
+    return currentFilterValue.value !== "";
+});
+
+const setFilter = (val: string | number | null) => {
+    if (!props.filterBy) return;
+
+    const url = new URL(window.location.href);
+
+    if (val === null || val === "") {
+        url.searchParams.delete(props.filterBy);
+    } else {
+        url.searchParams.set(props.filterBy, String(val));
+    }
+
+    url.searchParams.set("page", "1");
+    filterMenuOpen.value = false;
+
+    router.visit(url.toString(), {
+        preserveState: true,
+        preserveScroll: true,
+        replace: true,
+        only: ["items"],
+    });
+};
+</script>
+
 <template>
-    <th class="px-4 py-2 text-start last:text-right">
-        <slot></slot>
+    <th
+        class="px-4 py-3.5 text-xs font-semibold tracking-wider text-neutral-300 uppercase select-none first:pl-6 last:pr-6 last:text-right"
+    >
+        <div
+            class="inline-flex items-center gap-2"
+            :class="{
+                'w-full justify-end': $attrs.class
+                    ?.toString()
+                    .includes('text-right'),
+            }"
+        >
+            <!-- Header title & sort clickable button -->
+            <button
+                v-if="sortBy"
+                type="button"
+                class="group inline-flex cursor-pointer items-center gap-1.5 text-neutral-300 transition-colors hover:text-white focus:outline-none"
+                :title="`Ordenar por ${sortBy}`"
+                @click="toggleSort"
+            >
+                <span><slot></slot></span>
+                <span class="inline-flex items-center">
+                    <ArrowUp
+                        v-if="isSortedAsc"
+                        :size="13"
+                        class="shrink-0 text-white"
+                    />
+                    <ArrowDown
+                        v-else-if="isSortedDesc"
+                        :size="13"
+                        class="shrink-0 text-white"
+                    />
+                    <ArrowUpDown
+                        v-else
+                        :size="13"
+                        class="shrink-0 text-neutral-500 opacity-0 transition-opacity group-hover:opacity-100"
+                    />
+                </span>
+            </button>
+
+            <!-- Plain header title when not sortable -->
+            <span v-else class="text-neutral-300">
+                <slot></slot>
+            </span>
+
+            <!-- Filter popover dropdown -->
+            <div
+                v-if="filterBy && filterValues"
+                ref="filterContainerRef"
+                class="relative inline-block text-left"
+            >
+                <button
+                    type="button"
+                    class="flex h-6 w-6 cursor-pointer items-center justify-center rounded-full transition-all"
+                    :class="[
+                        isFilterActive
+                            ? 'pill-item-active text-white'
+                            : 'text-neutral-500 hover:bg-white/10 hover:text-neutral-300',
+                    ]"
+                    :title="
+                        isFilterActive
+                            ? 'Filtro ativo (clique para alterar)'
+                            : 'Filtrar por esta coluna'
+                    "
+                    @click.stop="filterMenuOpen = !filterMenuOpen"
+                >
+                    <Filter :size="12" />
+                </button>
+
+                <!-- Filter menu dropdown -->
+                <div
+                    v-if="filterMenuOpen"
+                    class="glass-dropdown absolute top-full left-0 z-50 mt-1.5 min-w-44 origin-top-left p-1 text-xs normal-case shadow-2xl"
+                    @click.stop
+                >
+                    <div
+                        class="px-2.5 py-1.5 text-[10px] font-semibold tracking-wider text-neutral-400 uppercase"
+                    >
+                        Filtrar
+                    </div>
+
+                    <button
+                        type="button"
+                        class="flex w-full cursor-pointer items-center justify-between rounded-xl px-2.5 py-1.5 text-left text-xs transition-colors hover:bg-white/10"
+                        :class="[
+                            !isFilterActive
+                                ? 'pill-item-active text-white'
+                                : 'text-neutral-300',
+                        ]"
+                        @click="setFilter(null)"
+                    >
+                        <span>Todos</span>
+                        <Check
+                            v-if="!isFilterActive"
+                            :size="13"
+                            class="text-white"
+                        />
+                    </button>
+
+                    <div class="my-1 border-t border-white/10" />
+
+                    <div class="max-h-52 space-y-0.5 overflow-y-auto">
+                        <button
+                            v-for="(label, key) in filterValues"
+                            :key="key"
+                            type="button"
+                            class="flex w-full cursor-pointer items-center justify-between rounded-xl px-2.5 py-1.5 text-left text-xs transition-colors hover:bg-white/10"
+                            :class="[
+                                currentFilterValue === String(key)
+                                    ? 'pill-item-active text-white'
+                                    : 'text-neutral-300',
+                            ]"
+                            @click="setFilter(key)"
+                        >
+                            <span class="truncate">{{ label }}</span>
+                            <Check
+                                v-if="currentFilterValue === String(key)"
+                                :size="13"
+                                class="ml-2 shrink-0 text-white"
+                            />
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </th>
 </template>
diff --git a/resources/js/Components/CRUD/HeaderRow.vue b/resources/js/Components/CRUD/HeaderRow.vue
index 3557ad63..f951bc3f 100644
--- a/resources/js/Components/CRUD/HeaderRow.vue
+++ b/resources/js/Components/CRUD/HeaderRow.vue
@@ -3,9 +3,9 @@ import Header from "./Header.vue";
 </script>
 
 <template>
-    <tr class="bg-2023-teal-dark border border-black text-white">
-        <Header sort-by="id">ID</Header>
+    <tr class="border-b border-white/10 bg-white/[0.03]">
+        <Header sort-by="id" class="w-16">ID</Header>
         <slot></slot>
-        <Header>Ações</Header>
+        <Header class="w-32 text-right">Ações</Header>
     </tr>
 </template>
diff --git a/resources/js/Components/CRUD/Row.vue b/resources/js/Components/CRUD/Row.vue
index 81ada81e..141884c5 100644
--- a/resources/js/Components/CRUD/Row.vue
+++ b/resources/js/Components/CRUD/Row.vue
@@ -1,31 +1,116 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import type Model from "@/Types/Model";
 import Cell from "./Cell.vue";
-import { Link } from "@inertiajs/vue3";
+import Modal from "@/Components/UI/Modal.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import { Link, router } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
+import { Pencil, Trash2 } from "@lucide/vue";
 
 interface Props {
     item: Model;
     name: string;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const deleteModalOpen = ref(false);
+const isDeleting = ref(false);
+
+const confirmDelete = () => {
+    isDeleting.value = true;
+    router.delete(route(`admin.${props.name}.destroy`, { id: props.item.id }), {
+        preserveScroll: true,
+        onFinish: () => {
+            isDeleting.value = false;
+            deleteModalOpen.value = false;
+        },
+    });
+};
 </script>
 
 <template>
-    <tr class="even:bg-2023-orange/20 border border-black">
-        <Cell>{{ item.id.toString() }}</Cell>
-        <slot></slot>
+    <tr
+        class="border-b border-white/5 text-sm text-neutral-200 transition-colors duration-150 hover:bg-white/[0.04]"
+    >
         <Cell>
-            <Link :href="route(`admin.${name}.edit`, { id: item.id })"
-                >Editar</Link
-            >
-            <Link
-                method="delete"
-                :href="route(`admin.${name}.destroy`, { id: item.id })"
-                class="ml-2"
-                >Apagar</Link
+            <span class="font-mono text-xs text-neutral-500">
+                #{{ item.id }}
+            </span>
+        </Cell>
+
+        <slot></slot>
+
+        <Cell class="text-right">
+            <div class="flex items-center justify-end gap-3 text-xs">
+                <Link
+                    :href="route(`admin.${name}.edit`, { id: item.id })"
+                    class="inline-flex items-center gap-1 font-medium text-neutral-400 transition-colors hover:text-white"
+                    title="Editar"
+                >
+                    <Pencil :size="12" />
+                    <span>Editar</span>
+                </Link>
+
+                <span class="text-neutral-700">·</span>
+
+                <button
+                    type="button"
+                    class="inline-flex items-center gap-1 font-medium text-neutral-400 transition-colors hover:text-red-400"
+                    title="Eliminar"
+                    @click="deleteModalOpen = true"
+                >
+                    <Trash2 :size="12" />
+                    <span>Apagar</span>
+                </button>
+            </div>
+
+            <!-- Delete Confirmation Modal -->
+            <Modal
+                v-model="deleteModalOpen"
+                title="Eliminar Registo"
+                description="Tem a certeza que deseja eliminar este registo? Esta ação é irreversível."
+                max-width="md"
+                @close="deleteModalOpen = false"
             >
+                <div class="flex flex-col gap-4">
+                    <div
+                        class="rounded-2xl border border-red-500/20 bg-red-950/30 p-4 text-xs text-red-200"
+                    >
+                        O registo
+                        <span class="font-mono font-bold">#{{ item.id }}</span>
+                        será permanentemente removido da base de dados.
+                    </div>
+
+                    <div
+                        class="mt-2 flex items-center justify-end gap-2.5 border-t border-white/10 pt-4"
+                    >
+                        <PrimaryButton
+                            type="button"
+                            color="pill"
+                            text-size="text-xs"
+                            :disabled="isDeleting"
+                            @click="deleteModalOpen = false"
+                        >
+                            Cancelar
+                        </PrimaryButton>
+                        <PrimaryButton
+                            type="button"
+                            color="danger"
+                            text-size="text-xs"
+                            :disabled="isDeleting"
+                            @click="confirmDelete"
+                        >
+                            {{
+                                isDeleting
+                                    ? "A eliminar..."
+                                    : "Eliminar definitivamente"
+                            }}
+                        </PrimaryButton>
+                    </div>
+                </div>
+            </Modal>
         </Cell>
     </tr>
 </template>
diff --git a/resources/js/Components/CRUD/Table.vue b/resources/js/Components/CRUD/Table.vue
index fb4d51e6..3e10202b 100644
--- a/resources/js/Components/CRUD/Table.vue
+++ b/resources/js/Components/CRUD/Table.vue
@@ -1,35 +1,49 @@
 <script setup lang="ts" generic="T extends Model">
 import type Model from "@/Types/Model";
-import { onMounted, ref } from "vue";
+import { Inbox } from "@lucide/vue";
 
 defineProps<{
     items: T[];
 }>();
-
-const colspan = ref(0);
-
-// Kinda cringe
-onMounted(() => {
-    colspan.value = document.querySelectorAll("th").length;
-});
 </script>
 
 <template>
-    <table class="max-w-full table-fixed overflow-x-auto">
-        <thead>
-            <slot name="header"></slot>
-        </thead>
-        <tbody>
-            <template v-if="items.length > 0">
-                <template v-for="item in items" :key="item.id">
-                    <slot name="row" :item="item"></slot>
-                </template>
-            </template>
-            <tr v-else class="border border-black">
-                <td :colspan="colspan" class="p-2 text-center text-xl">
-                    Nenhum item encontrado
-                </td>
-            </tr>
-        </tbody>
-    </table>
+    <div
+        class="overflow-hidden rounded-2xl border border-white/10 bg-black/40 shadow-[0_4px_24px_rgba(0,0,0,0.3)] backdrop-blur-md"
+    >
+        <div class="w-full overflow-x-auto">
+            <table class="w-full border-collapse text-left">
+                <thead>
+                    <slot name="header"></slot>
+                </thead>
+                <tbody class="divide-y divide-white/5 text-sm text-neutral-200">
+                    <template v-if="items.length > 0">
+                        <template v-for="item in items" :key="item.id">
+                            <slot name="row" :item="item"></slot>
+                        </template>
+                    </template>
+                    <tr v-else>
+                        <td :colspan="100" class="px-6 py-16 text-center">
+                            <div
+                                class="flex flex-col items-center justify-center gap-2"
+                            >
+                                <div
+                                    class="flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-neutral-400"
+                                >
+                                    <Inbox :size="24" />
+                                </div>
+                                <span class="text-sm font-medium text-white"
+                                    >Nenhum registo encontrado</span
+                                >
+                                <span class="text-xs text-neutral-400"
+                                    >Tente ajustar a sua pesquisa ou os filtros
+                                    ativos.</span
+                                >
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
 </template>
diff --git a/resources/js/Components/Form/Checkbox.vue b/resources/js/Components/Form/Checkbox.vue
index 6a5bd342..9a92b3ab 100644
--- a/resources/js/Components/Form/Checkbox.vue
+++ b/resources/js/Components/Form/Checkbox.vue
@@ -44,6 +44,6 @@ const proxyChecked = computed({
         :name="name"
         :value="value"
         :required="required"
-        class="text-sinf-primary checked:border-sinf-primary checked:bg-sinf-primary focus:ring-sinf-primary/30 h-4.5 w-4.5 cursor-pointer rounded-md border border-white/20 bg-white/5 transition-all duration-150 hover:border-white/40 hover:bg-white/10 focus:ring-2 focus:ring-offset-0 focus:outline-hidden"
+        class="h-4.5 w-4.5 cursor-pointer rounded-md border border-white/20 bg-white/5 text-white checked:border-white/50 checked:bg-white/30 focus:ring-2 focus:ring-white/20 focus:ring-offset-0 focus:outline-hidden transition-all duration-150 hover:border-white/40 hover:bg-white/10"
     />
 </template>
diff --git a/resources/js/Components/Form/ImageInput.vue b/resources/js/Components/Form/ImageInput.vue
index a8cadc4e..af89af75 100644
--- a/resources/js/Components/Form/ImageInput.vue
+++ b/resources/js/Components/Form/ImageInput.vue
@@ -1,24 +1,22 @@
 <script setup lang="ts">
-import { Image as ImageIcon } from "@lucide/vue";
 import { ref } from "vue";
+import { Upload } from "@lucide/vue";
 
 interface Props {
-    modelValue: File | null;
+    id: string;
+    modelValue?: File | null;
     label?: string;
-    id?: string;
-    initialPreview?: string;
     errorMessage?: string;
 }
 
-interface Emits {
-    (event: "update:modelValue", value: File | null): void;
-}
+defineProps<Props>();
 
-const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
+const emit = defineEmits<{
+    (e: "update:modelValue", value: File | null): void;
+}>();
 
 const input = ref<HTMLInputElement | null>(null);
-const preview = ref(props.initialPreview);
+const preview = ref<string | null>(null);
 
 const updatePreview = () => {
     const photo = input.value?.files?.[0];
@@ -28,40 +26,99 @@ const updatePreview = () => {
     const reader = new FileReader();
 
     reader.onload = (e) => {
-        preview.value = (e.target?.result as string) ?? null;
+        preview.value = e.target?.result as string;
     };
 
     reader.readAsDataURL(photo);
 
     emit("update:modelValue", photo);
 };
+
+const clearPhoto = () => {
+    preview.value = null;
+    if (input.value) {
+        input.value.value = "";
+    }
+    emit("update:modelValue", null);
+};
 </script>
 
 <template>
-    <label class="flex cursor-pointer flex-col items-center">
-        <input
-            ref="input"
-            type="file"
-            class="sr-only"
-            @change="updatePreview"
-        />
-
-        <img
-            v-if="preview"
-            :src="preview"
-            alt=""
-            class="shadow-2023-red max-h-40 w-auto border border-black object-contain shadow-md"
-        />
-
-        <ImageIcon v-else :size="80" class="text-neutral-400" />
-
-        <span class="sr-only">{{ label }}</span>
-
-        <span
-            v-show="errorMessage"
-            :id="`${id}-error`"
-            class="text-2023-red mt-2 font-semibold"
-            >{{ errorMessage }}</span
+    <div class="flex flex-col gap-2">
+        <label
+            v-if="label"
+            :for="id"
+            class="text-xs font-medium text-neutral-300"
         >
-    </label>
+            {{ label }}
+        </label>
+
+        <div class="relative flex flex-col items-center">
+            <!-- Dropzone / preview box -->
+            <div
+                class="group hover:border-primary/50 relative flex min-h-[140px] w-full cursor-pointer flex-col items-center justify-center overflow-hidden rounded-2xl border border-dashed border-white/20 bg-white/[0.02] p-4 text-center transition-all duration-200 hover:bg-white/[0.04]"
+                @click="input?.click()"
+            >
+                <input
+                    :id="id"
+                    ref="input"
+                    type="file"
+                    class="hidden"
+                    accept="image/*"
+                    @change="updatePreview"
+                />
+
+                <!-- Image preview -->
+                <template v-if="preview">
+                    <img
+                        :src="preview"
+                        alt="Preview"
+                        class="max-h-48 w-full rounded-xl object-contain"
+                    />
+                    <div
+                        class="absolute inset-0 flex items-center justify-center bg-black/60 opacity-0 backdrop-blur-xs transition-opacity duration-200 group-hover:opacity-100"
+                    >
+                        <span class="pill-item text-xs text-white">
+                            Alterar imagem
+                        </span>
+                    </div>
+                </template>
+
+                <!-- Empty state placeholder -->
+                <template v-else>
+                    <div
+                        class="flex flex-col items-center gap-2 text-neutral-400"
+                    >
+                        <div
+                            class="group-hover:border-primary/40 group-hover:text-primary flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-white/5 text-neutral-300 transition-colors"
+                        >
+                            <Upload :size="18" />
+                        </div>
+                        <div class="flex flex-col gap-0.5">
+                            <span class="text-xs font-medium text-neutral-200">
+                                Clique para selecionar imagem
+                            </span>
+                            <span class="text-[11px] text-neutral-400">
+                                PNG, JPG ou WEBP
+                            </span>
+                        </div>
+                    </div>
+                </template>
+            </div>
+
+            <!-- Remove action if preview active -->
+            <button
+                v-if="preview"
+                type="button"
+                class="mt-2 text-xs text-neutral-400 transition-colors hover:text-red-400"
+                @click.stop="clearPhoto"
+            >
+                Remover imagem selecionada
+            </button>
+        </div>
+
+        <p v-if="errorMessage" class="text-xs text-red-400">
+            {{ errorMessage }}
+        </p>
+    </div>
 </template>
diff --git a/resources/js/Components/Form/TextInput.vue b/resources/js/Components/Form/TextInput.vue
index 93ea9d40..98d787f6 100644
--- a/resources/js/Components/Form/TextInput.vue
+++ b/resources/js/Components/Form/TextInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Eye, EyeOff, AlertCircle } from "@lucide/vue";
+import { Eye, EyeOff, AlertCircle, ChevronDown } from "@lucide/vue";
 import { onMounted, ref, type InputHTMLAttributes, computed } from "vue";
 
 interface BaseProps {
@@ -38,6 +38,7 @@ interface TextAreaProps extends BaseProps {
 }
 
 type Props = InputProps | SelectProps | TextAreaProps;
+
 const isSelect = (p: Props): p is SelectProps => {
     return p.type === "select";
 };
@@ -82,12 +83,15 @@ const visible = ref(false);
 
         <div
             v-if="isSelect(props)"
-            class="pill-container w-full px-4 py-2 transition-all duration-200 focus-within:border-white/20 focus-within:bg-black/65"
-            :class="
+            :class="[
+                props.multiple
+                    ? 'rounded-2xl border border-white/10 bg-black/50 p-2.5 shadow-(--shadow-pill-inset) backdrop-blur-md'
+                    : 'pill-container relative w-full px-4 py-2',
+                'transition-all duration-200 focus-within:border-white/20 focus-within:bg-black/65',
                 errorMessage
                     ? 'border-red-500/50 focus-within:border-red-500/60 focus-within:ring-1 focus-within:ring-red-500/30'
-                    : ''
-            "
+                    : '',
+            ]"
         >
             <select
                 :id="id"
@@ -95,7 +99,12 @@ const visible = ref(false);
                 v-model="value"
                 :name="name ?? id"
                 :autocomplete="autocomplete"
-                class="w-full cursor-pointer border-0 bg-transparent text-sm text-white shadow-none outline-none focus:border-transparent focus:shadow-none focus:ring-0 focus:outline-none"
+                class="[&>option:checked]:bg-white/20 w-full cursor-pointer border-0 bg-transparent text-sm text-white shadow-none outline-none focus:border-transparent focus:shadow-none focus:ring-0 focus:outline-none [&>option]:bg-[#121319] [&>option]:px-3 [&>option]:py-2.5 [&>option]:text-white [&>option:checked]:text-white"
+                :class="[
+                    props.multiple
+                        ? 'min-h-36 rounded-xl p-2 text-xs leading-relaxed'
+                        : 'appearance-none pr-8',
+                ]"
                 v-bind="$attrs"
                 :multiple="props.multiple"
             >
@@ -104,12 +113,17 @@ const visible = ref(false);
                     disabled
                     selected
                     hidden
-                    class="bg-neutral-900 text-neutral-400"
+                    class="bg-[#121319] text-neutral-400"
                 >
                     {{ placeholder ?? "-" }}
                 </option>
                 <slot />
             </select>
+            <ChevronDown
+                v-if="!props.multiple"
+                :size="14"
+                class="pointer-events-none absolute right-3.5 text-neutral-400"
+            />
         </div>
 
         <div
@@ -179,29 +193,9 @@ const visible = ref(false);
                 :id="`${id}-error`"
                 class="mt-1.5 ml-3.5 flex items-center gap-1.5 text-xs font-medium text-red-400"
             >
-                <AlertCircle :size="14" class="shrink-0" />
+                <AlertCircle :size="13" class="shrink-0 text-red-400" />
                 <span>{{ errorMessage }}</span>
             </div>
         </transition>
     </div>
 </template>
-
-<style scoped>
-input,
-select,
-textarea {
-    border: 0 !important;
-    outline: none !important;
-    box-shadow: none !important;
-}
-
-input:focus,
-select:focus,
-textarea:focus {
-    border-color: transparent !important;
-    outline: none !important;
-    box-shadow: none !important;
-    --tw-ring-shadow: none !important;
-    --tw-ring-offset-shadow: none !important;
-}
-</style>
diff --git a/resources/js/Components/Navigation/AdminNavbar.vue b/resources/js/Components/Navigation/AdminNavbar.vue
deleted file mode 100644
index 182bf250..00000000
--- a/resources/js/Components/Navigation/AdminNavbar.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script setup lang="ts">
-import NavLink from "@/Components/Navigation/NavLink.vue";
-import Dropdown from "@/Components/UI/Dropdown.vue";
-import DropdownLink from "@/Components/UI/DropdownLink.vue";
-import { route } from "ziggy-js";
-import { User } from "@lucide/vue";
-
-interface Route {
-    label: string;
-}
-type Routes = Record<string, Route>;
-
-const pageRoutes: Routes = {
-    "admin.index": {
-        label: "SINF",
-    },
-};
-</script>
-
-<template>
-    <nav class="bg-2023-bg relative z-30 flex border-b-2 border-black py-6">
-        <div class="flex h-full w-full pl-5 md:hidden">
-            <img
-                class="flex md:hidden"
-                src="/images/cy-sinf-small.svg"
-                alt="Stylized SINF logo"
-            />
-        </div>
-        <div class="ml-4 hidden w-full min-w-fit md:flex lg:gap-4">
-            <template v-for="({ label }, page) in pageRoutes" :key="page">
-                <NavLink
-                    :href="route(page)"
-                    :active="page === route().current()"
-                >
-                    {{ label }}
-                </NavLink>
-            </template>
-        </div>
-        <div class="ml-2 lg:mx-4">
-            <template v-if="$page.props.auth.user">
-                <Dropdown align="right" width="32">
-                    <template #trigger>
-                        <img
-                            class="h-10 w-10 cursor-pointer rounded-full object-cover"
-                            :src="$page.props.auth.user.profile_photo_url"
-                            :alt="$page.props.auth.user.name"
-                        />
-                    </template>
-                    <template #content>
-                        <div class="space-y-0.5">
-                            <DropdownLink
-                                :href="route('profile.show')"
-                                :active="route().current('profile.show')"
-                            >
-                                Perfil
-                            </DropdownLink>
-                            <DropdownLink :href="route('home')">
-                                Voltar ao site
-                            </DropdownLink>
-                            <DropdownLink :href="route('logout')" method="post">
-                                Logout
-                            </DropdownLink>
-                        </div>
-                    </template>
-                </Dropdown>
-            </template>
-            <template v-else>
-                <a
-                    :href="route('login')"
-                    class="flex items-center p-1 text-neutral-300 hover:text-white"
-                >
-                    <User :size="24" />
-                </a>
-            </template>
-        </div>
-    </nav>
-</template>
diff --git a/resources/js/Components/Navigation/AdminSidebar.vue b/resources/js/Components/Navigation/AdminSidebar.vue
new file mode 100644
index 00000000..302cfb08
--- /dev/null
+++ b/resources/js/Components/Navigation/AdminSidebar.vue
@@ -0,0 +1,419 @@
+<script setup lang="ts">
+import { computed, type Component } from "vue";
+import { Link } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
+import {
+    Calendar,
+    CalendarDays,
+    Presentation,
+    Tag,
+    Clock,
+    Users,
+    UserCheck,
+    Trophy,
+    Users2,
+    Award,
+    Building2,
+    Crown,
+    Store,
+    ShoppingBag,
+    CheckSquare,
+    Briefcase,
+    UserCog,
+    LayoutDashboard,
+    ArrowLeft,
+    LogOut,
+    X,
+} from "@lucide/vue";
+
+interface Props {
+    open?: boolean;
+    mobileOpen?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    open: false,
+    mobileOpen: false,
+});
+
+const emit = defineEmits<{
+    (e: "update:open", value: boolean): void;
+    (e: "update:mobileOpen", value: boolean): void;
+    (e: "close"): void;
+}>();
+
+const isOpen = computed(() => Boolean(props.open || props.mobileOpen));
+
+const close = () => {
+    emit("update:open", false);
+    emit("update:mobileOpen", false);
+    emit("close");
+};
+
+interface NavItem {
+    name: string;
+    route: string;
+    routePrefix: string;
+    labelKey?: string;
+    defaultLabel: string;
+    icon: Component;
+}
+
+interface NavSection {
+    id: string;
+    title: string;
+    items: NavItem[];
+}
+
+const sections: NavSection[] = [
+    {
+        id: "events",
+        title: "Programa & Eventos",
+        items: [
+            {
+                name: "editions",
+                route: "admin.editions.index",
+                routePrefix: "admin.editions",
+                labelKey: "models.edition",
+                defaultLabel: "Edições",
+                icon: Calendar,
+            },
+            {
+                name: "eventDays",
+                route: "admin.eventDays.index",
+                routePrefix: "admin.eventDays",
+                labelKey: "models.eventDay",
+                defaultLabel: "Dias do Evento",
+                icon: CalendarDays,
+            },
+            {
+                name: "events",
+                route: "admin.events.index",
+                routePrefix: "admin.events",
+                labelKey: "models.event",
+                defaultLabel: "Atividades",
+                icon: Presentation,
+            },
+            {
+                name: "eventTypes",
+                route: "admin.eventTypes.index",
+                routePrefix: "admin.eventTypes",
+                labelKey: "models.eventType",
+                defaultLabel: "Tipos de Atividade",
+                icon: Tag,
+            },
+            {
+                name: "slots",
+                route: "admin.slots.index",
+                routePrefix: "admin.slots",
+                labelKey: "models.slot",
+                defaultLabel: "Encaixes (Slots)",
+                icon: Clock,
+            },
+        ],
+    },
+    {
+        id: "participants",
+        title: "Participantes & Acessos",
+        items: [
+            {
+                name: "users",
+                route: "admin.users.index",
+                routePrefix: "admin.users",
+                labelKey: "models.user",
+                defaultLabel: "Utilizadores",
+                icon: Users,
+            },
+            {
+                name: "enrollments",
+                route: "admin.enrollments.index",
+                routePrefix: "admin.enrollments",
+                labelKey: "models.enrollment",
+                defaultLabel: "Inscrições",
+                icon: UserCheck,
+            },
+        ],
+    },
+    {
+        id: "competitions",
+        title: "Competições",
+        items: [
+            {
+                name: "competitions",
+                route: "admin.competitions.index",
+                routePrefix: "admin.competitions",
+                labelKey: "models.competition",
+                defaultLabel: "Competições",
+                icon: Trophy,
+            },
+            {
+                name: "competitionTeams",
+                route: "admin.competitionTeams.index",
+                routePrefix: "admin.competitionTeams",
+                labelKey: "models.competitionTeam",
+                defaultLabel: "Equipas",
+                icon: Users2,
+            },
+            {
+                name: "competitionPrizes",
+                route: "admin.competitionPrizes.index",
+                routePrefix: "admin.competitionPrizes",
+                labelKey: "models.competitionPrize",
+                defaultLabel: "Prémios",
+                icon: Award,
+            },
+        ],
+    },
+    {
+        id: "companies",
+        title: "Empresas & Patrocínios",
+        items: [
+            {
+                name: "sponsors",
+                route: "admin.sponsors.index",
+                routePrefix: "admin.sponsors",
+                labelKey: "models.sponsor",
+                defaultLabel: "Patrocinadores",
+                icon: Building2,
+            },
+            {
+                name: "sponsorTiers",
+                route: "admin.sponsorTiers.index",
+                routePrefix: "admin.sponsorTiers",
+                labelKey: "models.sponsorTier",
+                defaultLabel: "Níveis de Patrocínio",
+                icon: Crown,
+            },
+            {
+                name: "stands",
+                route: "admin.stands.index",
+                routePrefix: "admin.stands",
+                labelKey: "models.stand",
+                defaultLabel: "Bancas",
+                icon: Store,
+            },
+        ],
+    },
+    {
+        id: "gamification",
+        title: "Loja & Gamificação",
+        items: [
+            {
+                name: "products",
+                route: "admin.products.index",
+                routePrefix: "admin.products",
+                labelKey: "models.product",
+                defaultLabel: "Produtos",
+                icon: ShoppingBag,
+            },
+            {
+                name: "quests",
+                route: "admin.quests.index",
+                routePrefix: "admin.quests",
+                labelKey: "models.quest",
+                defaultLabel: "Tarefas",
+                icon: CheckSquare,
+            },
+        ],
+    },
+    {
+        id: "organization",
+        title: "Organização",
+        items: [
+            {
+                name: "departments",
+                route: "admin.departments.index",
+                routePrefix: "admin.departments",
+                labelKey: "models.department",
+                defaultLabel: "Departamentos",
+                icon: Briefcase,
+            },
+            {
+                name: "staff",
+                route: "admin.staff.index",
+                routePrefix: "admin.staff",
+                labelKey: "models.staff",
+                defaultLabel: "Staff",
+                icon: UserCog,
+            },
+        ],
+    },
+];
+
+const currentRouteName = computed(() => {
+    try {
+        return route().current() ?? "";
+    } catch {
+        return "";
+    }
+});
+
+const isItemActive = (item: NavItem) => {
+    if (!currentRouteName.value) return false;
+    return (
+        currentRouteName.value === item.route ||
+        currentRouteName.value.startsWith(`${item.routePrefix}.`)
+    );
+};
+
+const isDashboardActive = computed(() => {
+    return currentRouteName.value === "admin.index";
+});
+</script>
+
+<template>
+    <div
+        v-if="isOpen"
+        class="fixed inset-0 z-40 bg-black/80 backdrop-blur-sm transition-opacity md:hidden"
+        @click="close"
+    />
+
+    <aside
+        :class="[
+            'fixed inset-y-0 left-0 z-50 flex h-screen w-72 flex-col overflow-hidden border-r border-white/10 bg-[#0d0e12]/95 backdrop-blur-2xl transition-transform duration-300 ease-in-out md:static md:z-30 md:w-64 md:shrink-0 md:translate-x-0 md:bg-[#0d0e12]/80',
+            isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0',
+        ]"
+    >
+        <div
+            class="flex h-16 shrink-0 items-center justify-between border-b border-white/10 px-5"
+        >
+            <Link
+                :href="route('admin.index')"
+                class="flex items-center gap-3 transition-opacity hover:opacity-90"
+                @click="close"
+            >
+                <img
+                    src="/images/sinf-logo-generic-long.svg"
+                    alt="SINF Logo"
+                    class="h-7 w-auto"
+                />
+            </Link>
+
+            <button
+                type="button"
+                class="pill-container flex h-8 w-8 cursor-pointer items-center justify-center text-neutral-400 transition-colors hover:text-white md:hidden"
+                aria-label="Fechar menu"
+                @click="close"
+            >
+                <X :size="15" />
+            </button>
+        </div>
+
+        <div class="no-scrollbar flex-1 space-y-6 overflow-y-auto px-3.5 py-4">
+            <div>
+                <Link
+                    :href="route('admin.index')"
+                    :class="[
+                        'pill-item w-full justify-start gap-2.5 rounded-full px-3 py-2 text-xs transition-all duration-150',
+                        isDashboardActive
+                            ? 'pill-item-active text-white'
+                            : 'text-neutral-400 hover:text-white',
+                    ]"
+                    @click="close"
+                >
+                    <LayoutDashboard
+                        :size="15"
+                        :class="
+                            isDashboardActive
+                                ? 'text-white'
+                                : 'text-neutral-400'
+                        "
+                    />
+                    <span>Visão Geral</span>
+                </Link>
+            </div>
+
+            <div
+                v-for="section in sections"
+                :key="section.id"
+                class="space-y-1.5"
+            >
+                <div
+                    class="px-3 text-[10px] font-semibold tracking-wider text-neutral-500 uppercase"
+                >
+                    {{ section.title }}
+                </div>
+
+                <div class="space-y-0.5">
+                    <Link
+                        v-for="item in section.items"
+                        :key="item.name"
+                        :href="route(item.route)"
+                        :class="[
+                            'pill-item w-full justify-start gap-2.5 rounded-full px-3 py-1.5 text-xs transition-all duration-150',
+                            isItemActive(item)
+                                ? 'pill-item-active text-white'
+                                : 'text-neutral-400 hover:text-white',
+                        ]"
+                        @click="close"
+                    >
+                        <component
+                            :is="item.icon"
+                            :size="14"
+                            :class="
+                                isItemActive(item)
+                                    ? 'text-white'
+                                    : 'text-neutral-400'
+                            "
+                        />
+                        <span class="truncate">
+                            {{
+                                item.labelKey
+                                    ? $t(item.labelKey, 2)
+                                    : item.defaultLabel
+                            }}
+                        </span>
+                    </Link>
+                </div>
+            </div>
+        </div>
+
+        <div class="shrink-0 border-t border-white/10 p-3.5">
+            <div
+                v-if="$page.props.auth?.user"
+                class="mb-3 flex items-center gap-2.5 rounded-2xl border border-white/5 bg-white/2 p-2"
+            >
+                <img
+                    :src="$page.props.auth.user.profile_photo_url"
+                    :alt="$page.props.auth.user.name"
+                    class="h-7 w-7 shrink-0 rounded-full object-cover ring-1 ring-white/20"
+                />
+                <div class="min-w-0 flex-1">
+                    <div
+                        class="truncate text-xs font-semibold text-white"
+                        :title="$page.props.auth.user.name"
+                    >
+                        {{ $page.props.auth.user.name }}
+                    </div>
+                    <div
+                        class="truncate text-[10px] text-neutral-400"
+                        :title="$page.props.auth.user.email"
+                    >
+                        {{ $page.props.auth.user.email }}
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-2">
+                <Link
+                    :href="route('home')"
+                    class="pill-item flex-1 justify-center gap-1.5 px-3 py-1.5 text-xs text-neutral-300 hover:text-white"
+                    title="Voltar ao site público"
+                >
+                    <ArrowLeft :size="13" />
+                    <span>Voltar ao site</span>
+                </Link>
+
+                <Link
+                    :href="route('logout')"
+                    method="post"
+                    as="button"
+                    class="pill-item justify-center p-2 text-neutral-400 hover:bg-red-500/20 hover:text-red-400"
+                    title="Terminar sessão"
+                >
+                    <LogOut :size="13" />
+                </Link>
+            </div>
+        </div>
+    </aside>
+</template>
diff --git a/resources/js/Components/UI/Banner.vue b/resources/js/Components/UI/Banner.vue
index e65448b2..4251784c 100644
--- a/resources/js/Components/UI/Banner.vue
+++ b/resources/js/Components/UI/Banner.vue
@@ -19,33 +19,41 @@ watch(id, async () => {
     <div>
         <div
             v-if="show && message"
-            class="border-b-2 border-black"
+            class="border-b backdrop-blur-md transition-all"
             :class="{
-                'bg-2023-teal-dark': style == 'success',
-                'bg-2023-red-dark': style == 'danger',
+                'border-emerald-500/30 bg-emerald-950/80 text-emerald-200':
+                    style == 'success',
+                'border-red-500/30 bg-red-950/80 text-red-200':
+                    style == 'danger',
             }"
         >
             <div
-                class="mx-auto flex max-w-(--breakpoint-xl) items-center justify-between gap-4 px-4 py-2"
+                class="mx-auto flex max-w-(--breakpoint-xl) items-center justify-between gap-4 px-4 py-2.5"
             >
-                <CheckCircle
-                    v-if="style == 'success'"
-                    :size="28"
-                    class="shrink-0 text-white"
-                />
-                <AlertTriangle v-else :size="28" class="shrink-0 text-white" />
+                <div class="flex items-center gap-3">
+                    <CheckCircle
+                        v-if="style == 'success'"
+                        :size="20"
+                        class="shrink-0 text-emerald-400"
+                    />
+                    <AlertTriangle
+                        v-else
+                        :size="20"
+                        class="shrink-0 text-red-400"
+                    />
 
-                <span class="font-medium text-white">
-                    {{ message }}
-                </span>
+                    <span class="text-sm font-medium">
+                        {{ message }}
+                    </span>
+                </div>
 
                 <button
                     type="button"
-                    class="ml-auto flex h-8 w-8 cursor-pointer items-center justify-center text-white hover:opacity-80 focus-visible:ring-2 focus-visible:ring-white/20"
+                    class="pill-container ml-auto flex h-7 w-7 cursor-pointer items-center justify-center text-neutral-400 transition-colors hover:text-white focus-visible:ring-2 focus-visible:ring-white/20"
                     aria-label="Dismiss"
                     @click.prevent="show = false"
                 >
-                    <X :size="20" />
+                    <X :size="14" />
                 </button>
             </div>
         </div>
diff --git a/resources/js/Components/UI/PaginationLinks.vue b/resources/js/Components/UI/PaginationLinks.vue
index ff503105..2bcc9d5a 100644
--- a/resources/js/Components/UI/PaginationLinks.vue
+++ b/resources/js/Components/UI/PaginationLinks.vue
@@ -11,16 +11,31 @@ defineProps<Props>();
 </script>
 
 <template>
-    <nav v-if="links.length > 3" class="flex flex-row">
-        <template v-for="link in links" :key="link">
+    <nav
+        v-if="links && links.length > 3"
+        class="flex flex-wrap items-center justify-center gap-1.5 py-4"
+        aria-label="Paginação"
+    >
+        <template v-for="(link, index) in links" :key="index">
             <Link
                 v-if="link.url"
                 :href="link.url"
-                class="flex h-8 w-8 items-center justify-center border border-r-0 border-black last:border-r"
                 v-bind="linkProps"
+                class="pill-item min-w-9 justify-center px-3 py-1.5 text-xs font-medium transition-all"
+                :class="[
+                    link.active
+                        ? 'pill-item-active text-white'
+                        : 'text-neutral-400 hover:bg-white/10 hover:text-white',
+                ]"
             >
-                {{ link.label }}
+                <span v-html="link.label" />
             </Link>
+            <span
+                v-else
+                class="pill-item min-w-9 cursor-not-allowed justify-center px-3 py-1.5 text-xs font-medium text-neutral-600 opacity-40 select-none"
+            >
+                <span v-html="link.label" />
+            </span>
         </template>
     </nav>
 </template>
diff --git a/resources/js/Composables/useSearch.ts b/resources/js/Composables/useSearch.ts
index a1eb9345..05308e6f 100644
--- a/resources/js/Composables/useSearch.ts
+++ b/resources/js/Composables/useSearch.ts
@@ -1,30 +1,39 @@
 import { ref, unref, watch } from "vue";
-import { route } from "ziggy-js";
 import { router } from "@inertiajs/vue3";
 
 const useSearch = (param: string = "query", only?: string[]) => {
     const searchQuery = ref(
-        new URLSearchParams(location.search).get(param) ?? "",
+        typeof window !== "undefined"
+            ? (new URLSearchParams(window.location.search).get(param) ?? "")
+            : "",
     );
 
+    let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
     watch(searchQuery, () => {
-        const ziggy = route();
-        const name = ziggy.current();
-        if (!name) return;
-
-        router.visit(
-            route(name as "home", {
-                ...ziggy.params,
-                query: unref(searchQuery),
-                page: 1,
-            }) as string,
-            {
+        if (debounceTimer) clearTimeout(debounceTimer);
+
+        debounceTimer = setTimeout(() => {
+            if (typeof window === "undefined") return;
+
+            const url = new URL(window.location.href);
+            const val = unref(searchQuery)?.trim();
+
+            if (val) {
+                url.searchParams.set(param, val);
+            } else {
+                url.searchParams.delete(param);
+            }
+
+            url.searchParams.set("page", "1");
+
+            router.visit(url.toString(), {
                 preserveState: true,
                 preserveScroll: true,
                 replace: true,
                 only,
-            },
-        );
+            });
+        }, 300);
     });
 
     return searchQuery;
diff --git a/resources/js/Layouts/AdminLayout.vue b/resources/js/Layouts/AdminLayout.vue
index bd8ffd37..a9c65279 100644
--- a/resources/js/Layouts/AdminLayout.vue
+++ b/resources/js/Layouts/AdminLayout.vue
@@ -1,26 +1,79 @@
 <script setup lang="ts">
-import { Head } from "@inertiajs/vue3";
-import AdminNavbar from "@/Components/Navigation/AdminNavbar.vue";
-import Footer from "@/Components/Navigation/Footer.vue";
+import { provide, ref } from "vue";
+import { Head, Link } from "@inertiajs/vue3";
+import AdminSidebar from "@/Components/Navigation/AdminSidebar.vue";
 import Banner from "@/Components/UI/Banner.vue";
+import { route } from "ziggy-js";
+import { Menu, ExternalLink } from "@lucide/vue";
 
-interface Props {
+defineProps<{
     title: string;
-}
+}>();
 
-defineProps<Props>();
+const sidebarOpen = ref(false);
+
+provide("adminSidebarOpen", sidebarOpen);
 </script>
 
 <template>
-    <div>
+    <div
+        class="selection:bg-white/20 relative flex h-screen w-screen overflow-hidden bg-[#090a0c] font-sans text-neutral-200 antialiased selection:text-white"
+    >
         <Head :title="title" />
-        <Banner />
-        <div>
-            <AdminNavbar />
-            <main class="bg-2023-bg min-h-screen">
-                <slot />
+
+        <AdminSidebar
+            :open="sidebarOpen"
+            :mobile-open="sidebarOpen"
+            @update:open="sidebarOpen = $event"
+            @update:mobile-open="sidebarOpen = $event"
+            @close="sidebarOpen = false"
+        />
+
+        <div
+            class="relative z-10 flex h-screen min-w-0 flex-1 flex-col overflow-hidden"
+        >
+            <header
+                class="z-20 flex min-h-16 shrink-0 items-center border-b border-white/10 bg-[#090a0c]/80 px-4 py-3 backdrop-blur-xl sm:h-16 sm:px-6 sm:py-0 lg:px-8"
+            >
+                <div
+                    class="mx-auto flex w-full max-w-7xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
+                >
+                    <div class="flex items-center gap-3">
+                        <button
+                            type="button"
+                            class="pill-container flex h-9 w-9 cursor-pointer items-center justify-center text-neutral-300 transition-colors hover:text-white md:hidden"
+                            aria-label="Abrir menu"
+                            @click="sidebarOpen = true"
+                        >
+                            <Menu :size="18" />
+                        </button>
+
+                        <slot name="header-title">
+                            <h1
+                                v-if="title"
+                                class="text-base font-bold tracking-tight text-white sm:text-lg"
+                            >
+                                {{ title }}
+                            </h1>
+                        </slot>
+                    </div>
+
+                    <div
+                        v-if="$slots['header-actions']"
+                        class="flex w-full items-center gap-2 sm:w-auto sm:gap-3"
+                    >
+                        <slot name="header-actions" />
+                    </div>
+                </div>
+            </header>
+
+            <Banner />
+
+            <main class="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
+                <div class="mx-auto w-full max-w-7xl">
+                    <slot />
+                </div>
             </main>
-            <Footer />
         </div>
     </div>
 </template>
diff --git a/resources/js/Layouts/CRUDLayout.vue b/resources/js/Layouts/CRUDLayout.vue
deleted file mode 100644
index 82232f49..00000000
--- a/resources/js/Layouts/CRUDLayout.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script setup lang="ts" generic="T extends Model">
-import Table from "@/Components/CRUD/Table.vue";
-import PaginationLinks from "@/Components/UI/PaginationLinks.vue";
-import type Model from "@/Types/Model";
-import type Paginated from "@/Types/Paginated";
-import AdminLayout from "./AdminLayout.vue";
-import { Link } from "@inertiajs/vue3";
-import { route } from "ziggy-js";
-import TextInput from "@/Components/Form/TextInput.vue";
-import useSearch from "@/Composables/useSearch";
-
-defineProps<{
-    items: Paginated<T>;
-    title: string;
-    name: string;
-    isSearchable?: boolean;
-}>();
-
-const query = useSearch("query", ["items"]);
-</script>
-
-<template>
-    <AdminLayout :title="title">
-        <div
-            class="bg-2023-bg flex min-h-screen flex-col items-stretch gap-4 p-12"
-        >
-            <header
-                class="flex flex-row flex-wrap items-center justify-between gap-4"
-            >
-                <h2 class="mr-auto text-2xl"><slot name="heading"></slot></h2>
-
-                <TextInput
-                    v-if="isSearchable"
-                    v-model="query"
-                    label="Pesquisar"
-                    type="search"
-                />
-
-                <Link :href="route(`admin.${name}.create`)">Novo</Link>
-            </header>
-
-            <Table :items="items.data">
-                <template #header>
-                    <slot name="header"></slot>
-                </template>
-
-                <template #row="{ item }">
-                    <slot name="row" :item="item"></slot>
-                </template>
-            </Table>
-
-            <PaginationLinks
-                :links="items.links"
-                :link-props="{
-                    preserveState: true,
-                    preserveScroll: true,
-                    only: ['items'],
-                }"
-            />
-        </div>
-    </AdminLayout>
-</template>
diff --git a/resources/js/Layouts/CardLayout.vue b/resources/js/Layouts/CardLayout.vue
deleted file mode 100644
index ace3d9cd..00000000
--- a/resources/js/Layouts/CardLayout.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script setup lang="ts">
-import AppLayout from "./AppLayout.vue";
-import Card from "@/Components/UI/Card.vue";
-
-interface Props {
-    title: string;
-    heading?: string;
-    subtitle?: string;
-    maxWidth?: string;
-}
-
-withDefaults(defineProps<Props>(), {
-    heading: undefined,
-    subtitle: undefined,
-    maxWidth: "max-w-lg",
-});
-</script>
-
-<template>
-    <AppLayout :title="title">
-        <div
-            class="relative flex flex-1 flex-col items-center justify-center px-4 py-12 sm:px-6 sm:py-16 lg:px-8"
-        >
-            <div class="mx-auto flex w-full max-w-7xl flex-col items-center">
-                <div
-                    v-if="(heading || title) && !$slots.header"
-                    class="mb-6 flex flex-col items-center text-center"
-                >
-                    <h1
-                        class="text-2xl font-bold tracking-tight text-white sm:text-3xl"
-                    >
-                        {{ heading ?? title }}
-                    </h1>
-
-                    <p v-if="subtitle" class="mt-2 text-sm text-neutral-400">
-                        {{ subtitle }}
-                    </p>
-                </div>
-
-                <Card
-                    as="div"
-                    :interactive="false"
-                    padding="p-6 sm:p-8 md:p-10"
-                    class="w-full"
-                    :class="maxWidth"
-                >
-                    <template v-if="$slots.header" #header>
-                        <slot name="header" />
-                    </template>
-
-                    <slot />
-
-                    <template v-if="$slots.footer" #footer>
-                        <slot name="footer" />
-                    </template>
-                </Card>
-            </div>
-        </div>
-    </AppLayout>
-</template>
diff --git a/resources/js/Pages/Admin.vue b/resources/js/Pages/Admin.vue
index 8c1e94b3..693c0683 100644
--- a/resources/js/Pages/Admin.vue
+++ b/resources/js/Pages/Admin.vue
@@ -1,40 +1,253 @@
 <script setup lang="ts">
+import type { Component } from "vue";
 import AdminLayout from "@/Layouts/AdminLayout.vue";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import { Link } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
+import {
+    Calendar,
+    CalendarDays,
+    Presentation,
+    Tag,
+    Clock,
+    Users,
+    UserCheck,
+    Trophy,
+    Users2,
+    Award,
+    Building2,
+    Crown,
+    Store,
+    ShoppingBag,
+    CheckSquare,
+    Briefcase,
+    UserCog,
+    ArrowUpRight,
+    ExternalLink,
+    Plus,
+} from "@lucide/vue";
 
-const pageRoutes = {
-    "admin.competitions.index": "models.competition",
-    "admin.competitionTeams.index": "models.competitionTeam",
-    "admin.competitionPrizes.index": "models.competitionPrize",
-    "admin.departments.index": "models.department",
-    "admin.editions.index": "models.edition",
-    "admin.eventDays.index": "models.eventDay",
-    "admin.events.index": "models.event",
-    "admin.products.index": "models.product",
-    "admin.quests.index": "models.quest",
-    "admin.slots.index": "models.slot",
-    "admin.sponsors.index": "models.sponsor",
-    "admin.staff.index": "models.staff",
-    "admin.stands.index": "models.stand",
-    "admin.users.index": "models.user",
-    "admin.eventTypes.index": "models.eventType",
-    "admin.enrollments.index": "models.enrollment",
-    "admin.sponsorTiers.index": "models.sponsorTier",
-} satisfies Record<string, string>;
+interface Stats {
+    users_count: number;
+    enrollments_count: number;
+    events_count: number;
+    event_days_count: number;
+    sponsors_count: number;
+    stands_count: number;
+    products_count: number;
+    quests_count: number;
+    competitions_count: number;
+}
+
+interface Edition {
+    id: number;
+    name: string;
+    year: string;
+}
+
+defineProps<{
+    currentEdition?: Edition | null;
+    stats?: Stats;
+}>();
+
+interface NavItem {
+    route: string;
+    name: string;
+    icon: Component;
+}
+
+interface Section {
+    title: string;
+    items: NavItem[];
+}
+
+const sections: Section[] = [
+    {
+        title: "Programa & Eventos",
+        items: [
+            { route: "admin.editions.index", name: "Edições", icon: Calendar },
+            { route: "admin.eventDays.index", name: "Dias de Evento", icon: CalendarDays },
+            { route: "admin.events.index", name: "Eventos & Sessões", icon: Presentation },
+            { route: "admin.eventTypes.index", name: "Tipos de Evento", icon: Tag },
+            { route: "admin.slots.index", name: "Encaixes (Slots)", icon: Clock },
+        ],
+    },
+    {
+        title: "Participantes & Inscrições",
+        items: [
+            { route: "admin.users.index", name: "Utilizadores", icon: Users },
+            { route: "admin.enrollments.index", name: "Inscrições", icon: UserCheck },
+        ],
+    },
+    {
+        title: "Competições",
+        items: [
+            { route: "admin.competitions.index", name: "Competições", icon: Trophy },
+            { route: "admin.competitionTeams.index", name: "Equipas", icon: Users2 },
+            { route: "admin.competitionPrizes.index", name: "Prémios", icon: Award },
+        ],
+    },
+    {
+        title: "Empresas & Patrocínios",
+        items: [
+            { route: "admin.sponsors.index", name: "Patrocinadores", icon: Building2 },
+            { route: "admin.sponsorTiers.index", name: "Níveis de Patrocínio", icon: Crown },
+            { route: "admin.stands.index", name: "Bancas", icon: Store },
+        ],
+    },
+    {
+        title: "Loja & Gamificação",
+        items: [
+            { route: "admin.products.index", name: "Produtos da Loja", icon: ShoppingBag },
+            { route: "admin.quests.index", name: "Tarefas & Missões", icon: CheckSquare },
+        ],
+    },
+    {
+        title: "Organização",
+        items: [
+            { route: "admin.departments.index", name: "Departamentos", icon: Briefcase },
+            { route: "admin.staff.index", name: "Equipa & Staff", icon: UserCog },
+        ],
+    },
+];
 </script>
 
 <template>
-    <AdminLayout title="Administrador">
-        <div
-            class="grid grid-cols-1 items-center gap-10 p-10 sm:grid-cols-[repeat(auto-fill,minmax(--spacing(60),1fr))]"
-        >
-            <template v-for="(label, page) in pageRoutes" :key="page">
-                <a
-                    class="bg-2023-teal-dark shadow-2023-red w-full place-self-center border border-black p-6 text-center wrap-break-word text-white transition-all hover:shadow-md"
-                    :href="route(page)"
-                    >{{ $t(label, 2) }}</a
+    <AdminLayout title="Painel de Administração">
+        <div class="flex flex-col gap-10">
+            <div
+                class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
+            >
+                    <h1 class="text-2xl font-bold tracking-tight text-white sm:text-3xl">
+                        {{ currentEdition?.name ?? "Edição Atual" }}
+                    </h1>
+
+                <div class="flex flex-wrap items-center gap-2.5">
+                    <PrimaryButton
+                        color="pill"
+                        text-size="text-xs"
+                        :href="route('admin.events.create')"
+                    >
+                        <Plus :size="13" />
+                        <span>Novo Evento</span>
+                    </PrimaryButton>
+                    <PrimaryButton
+                        color="pill"
+                        text-size="text-xs"
+                        :href="route('admin.users.create')"
+                    >
+                        <Plus :size="13" />
+                        <span>Novo Utilizador</span>
+                    </PrimaryButton>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
+                <div
+                    class="rounded-3xl border border-white/8 bg-black/50 p-6 backdrop-blur-md transition-colors hover:border-white/15"
+                >
+                    <div class="text-3xl font-bold text-white sm:text-4xl">
+                        {{ stats?.enrollments_count ?? 0 }}
+                    </div>
+                    <div
+                        class="mt-2 font-mono text-xs font-medium tracking-wider text-neutral-400 uppercase"
+                    >
+                        Inscrições
+                    </div>
+                </div>
+
+                <div
+                    class="rounded-3xl border border-white/8 bg-black/50 p-6 backdrop-blur-md transition-colors hover:border-white/15"
                 >
-            </template>
+                    <div class="text-3xl font-bold text-white sm:text-4xl">
+                        {{ stats?.users_count ?? 0 }}
+                    </div>
+                    <div
+                        class="mt-2 font-mono text-xs font-medium tracking-wider text-neutral-400 uppercase"
+                    >
+                        Utilizadores
+                    </div>
+                </div>
+
+                <div
+                    class="rounded-3xl border border-white/8 bg-black/50 p-6 backdrop-blur-md transition-colors hover:border-white/15"
+                >
+                    <div class="text-3xl font-bold text-white sm:text-4xl">
+                        {{ stats?.events_count ?? 0 }}
+                    </div>
+                    <div
+                        class="mt-2 font-mono text-xs font-medium tracking-wider text-neutral-400 uppercase"
+                    >
+                        Eventos
+                    </div>
+                </div>
+
+                <div
+                    class="rounded-3xl border border-white/8 bg-black/50 p-6 backdrop-blur-md transition-colors hover:border-white/15"
+                >
+                    <div class="text-3xl font-bold text-white sm:text-4xl">
+                        {{ stats?.sponsors_count ?? 0 }}
+                    </div>
+                    <div
+                        class="mt-2 font-mono text-xs font-medium tracking-wider text-neutral-400 uppercase"
+                    >
+                        Empresas
+                    </div>
+                </div>
+
+                <div
+                    class="col-span-2 rounded-3xl border border-white/8 bg-black/50 p-6 backdrop-blur-md transition-colors hover:border-white/15 sm:col-span-1"
+                >
+                    <div class="text-3xl font-bold text-white sm:text-4xl">
+                        {{ stats?.competitions_count ?? 0 }}
+                    </div>
+                    <div
+                        class="mt-2 font-mono text-xs font-medium tracking-wider text-neutral-400 uppercase"
+                    >
+                        Competições
+                    </div>
+                </div>
+            </div>
+
+            <div class="space-y-6">
+                <h2 class="text-lg font-bold text-white">Acessos Rápidos</h2>
+
+                <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+                    <div
+                        v-for="section in sections"
+                        :key="section.title"
+                        class="rounded-3xl border border-white/8 bg-black/40 p-5 backdrop-blur-md"
+                    >
+                        <h3
+                            class="mb-3 font-mono text-xs font-semibold tracking-wider text-neutral-400 uppercase"
+                        >
+                            {{ section.title }}
+                        </h3>
+
+                        <div class="space-y-1.5">
+                            <Link
+                                v-for="item in section.items"
+                                :key="item.route"
+                                :href="route(item.route)"
+                                class="group flex items-center justify-between rounded-xl px-3 py-2.5 text-sm text-neutral-300 transition-colors hover:bg-white/5 hover:text-white"
+                            >
+                                <div class="flex items-center gap-2.5">
+                                    <component
+                                        :is="item.icon"
+                                        :size="15"
+                                        class="text-neutral-400 transition-colors group-hover:text-white"
+                                    />
+                                    <span>{{ item.name }}</span>
+                                </div>
+                                <ArrowUpRight
+                                    :size="13"
+                                    class="text-neutral-600 transition-colors group-hover:text-neutral-300"
+                                />
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </AdminLayout>
 </template>
diff --git a/resources/js/Pages/CRUD/Competition/Create.vue b/resources/js/Pages/CRUD/Competition/Create.vue
index 3d50508e..821db3cd 100644
--- a/resources/js/Pages/CRUD/Competition/Create.vue
+++ b/resources/js/Pages/CRUD/Competition/Create.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
 import type Edition from "@/Types/Edition";
 import { useForm } from "@inertiajs/vue3";
@@ -38,28 +37,34 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Criar Competição">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome da competição"
-                type="text"
-                required
-                autofocus
-                autocomplete="name"
-                :error-message="form.errors.theme"
-            />
+    <CRUDModal
+        title="Criar Competição"
+        name="competitions"
+        :processing="form.processing"
+        max-width="2xl"
+        @submit="submit"
+    >
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome da competição"
+            type="text"
+            required
+            autofocus
+            autocomplete="name"
+            :error-message="form.errors.name"
+        />
 
-            <TextInput
-                id="slug"
-                v-model="form.slug"
-                label="Nome que aparece no URL"
-                type="text"
-                required
-                :error-message="form.errors.slug"
-            />
+        <TextInput
+            id="slug"
+            v-model="form.slug"
+            label="Identificador no URL (Slug)"
+            type="text"
+            required
+            :error-message="form.errors.slug"
+        />
 
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
                 id="theme"
                 v-model="form.theme"
@@ -71,21 +76,23 @@ const submit = () => {
             />
 
             <TextInput
-                id="description"
-                v-model="form.description"
-                label="Descrição"
-                type="textarea"
-                :error-message="form.errors.description"
-            />
-
-            <TextInput
-                id="regulation"
-                v-model="form.regulation"
-                label="Regulamento"
-                type="textarea"
-                :error-message="form.errors.regulation"
-            />
+                v-model="form.edition_id"
+                type="select"
+                required
+                label="Edição"
+                :error-message="form.errors.edition_id"
+            >
+                <option
+                    v-for="edition in $props.with.editions"
+                    :key="edition.id"
+                    :value="edition.id"
+                >
+                    {{ edition.name }}
+                </option>
+            </TextInput>
+        </div>
 
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
                 id="date_start"
                 v-model="form.date_start"
@@ -103,33 +110,31 @@ const submit = () => {
                 required
                 :error-message="form.errors.date_end"
             />
+        </div>
 
-            <TextInput
-                id="registration_link"
-                v-model="form.registration_link"
-                label="Link para registo"
-                type="text"
-                required
-                :error-message="form.errors.registration_link"
-            />
+        <TextInput
+            id="registration_link"
+            v-model="form.registration_link"
+            label="Link para registo"
+            type="text"
+            required
+            :error-message="form.errors.registration_link"
+        />
 
-            <TextInput
-                v-model="form.edition_id"
-                type="select"
-                required
-                label="Edição"
-                :error-message="form.errors.edition_id"
-            >
-                <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
-                >
-                    {{ edition.name }}
-                </option>
-            </TextInput>
+        <TextInput
+            id="description"
+            v-model="form.description"
+            label="Descrição"
+            type="textarea"
+            :error-message="form.errors.description"
+        />
 
-            <PrimaryButton type="submit">Criar</PrimaryButton>
-        </form>
-    </CardLayout>
+        <TextInput
+            id="regulation"
+            v-model="form.regulation"
+            label="Regulamento"
+            type="textarea"
+            :error-message="form.errors.regulation"
+        />
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Competition/Edit.vue b/resources/js/Pages/CRUD/Competition/Edit.vue
index 3d2226b2..5eaf5caa 100644
--- a/resources/js/Pages/CRUD/Competition/Edit.vue
+++ b/resources/js/Pages/CRUD/Competition/Edit.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
+import type Competition from "@/Types/Competition";
 import type Edition from "@/Types/Edition";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import type Competition from "@/Types/Competition";
 import slugify from "slugify";
 import { watchEffect } from "vue";
 
@@ -20,9 +19,9 @@ const { item: competition } = defineProps<Props>();
 
 const form = useForm({
     edition_id: competition.edition_id.toString(),
-    theme: competition.theme,
     date_start: competition.date_start.substring(0, 16),
     date_end: competition.date_end.substring(0, 16),
+    theme: competition.theme,
     name: competition.name,
     slug: competition.slug,
     registration_link: competition.registration_link,
@@ -42,128 +41,103 @@ watchEffect(() => {
 </script>
 
 <template>
-    <CardLayout title="Editar Competição" max-width="max-w-2xl">
-        <template #header>
-            <div class="space-y-1">
-                <h1
-                    class="text-xl font-bold tracking-tight text-white sm:text-2xl"
-                >
-                    Editar Competição
-                </h1>
-                <p class="text-xs text-neutral-400 sm:text-sm">
-                    Atualiza as informações, regulamento e datas da competição.
-                </p>
-            </div>
-        </template>
-
-        <form
-            id="competition-edit-form"
-            class="flex flex-col gap-4"
-            @submit.prevent="submit"
-        >
+    <CRUDModal
+        title="Editar Competição"
+        name="competitions"
+        :processing="form.processing"
+        max-width="2xl"
+        @submit="submit"
+    >
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome da competição"
+            type="text"
+            required
+            autofocus
+            autocomplete="name"
+            :error-message="form.errors.name"
+        />
+
+        <TextInput
+            id="slug"
+            v-model="form.slug"
+            label="Identificador no URL (Slug)"
+            type="text"
+            required
+            :error-message="form.errors.slug"
+        />
+
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome da competição"
+                id="theme"
+                v-model="form.theme"
+                label="Tema"
                 type="text"
                 required
-                autofocus
-                autocomplete="name"
-                :error-message="form.errors.name"
+                :error-message="form.errors.theme"
             />
 
             <TextInput
-                id="slug"
-                v-model="form.slug"
-                label="Nome que aparece no URL"
-                type="text"
+                v-model="form.edition_id"
+                type="select"
                 required
-                :error-message="form.errors.slug"
-            />
-
-            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                <TextInput
-                    id="theme"
-                    v-model="form.theme"
-                    label="Tema"
-                    type="text"
-                    required
-                    :error-message="form.errors.theme"
-                />
-
-                <TextInput
-                    v-model="form.edition_id"
-                    type="select"
-                    required
-                    label="Edição"
-                    :error-message="form.errors.edition_id"
+                label="Edição"
+                :error-message="form.errors.edition_id"
+            >
+                <option
+                    v-for="edition in $props.with.editions"
+                    :key="edition.id"
+                    :value="edition.id"
                 >
-                    <option
-                        v-for="edition in $props.with.editions"
-                        :key="edition.id"
-                        :value="edition.id"
-                    >
-                        {{ edition.name }}
-                    </option>
-                </TextInput>
-            </div>
-
-            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                <TextInput
-                    id="date_start"
-                    v-model="form.date_start"
-                    label="Data de início"
-                    type="datetime-local"
-                    required
-                    :error-message="form.errors.date_start"
-                />
-
-                <TextInput
-                    id="date_end"
-                    v-model="form.date_end"
-                    label="Data de fim"
-                    type="datetime-local"
-                    required
-                    :error-message="form.errors.date_end"
-                />
-            </div>
+                    {{ edition.name }}
+                </option>
+            </TextInput>
+        </div>
 
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
-                id="registration_link"
-                v-model="form.registration_link"
-                label="Link para registo"
-                type="text"
+                id="date_start"
+                v-model="form.date_start"
+                label="Data de início"
+                type="datetime-local"
                 required
-                :error-message="form.errors.registration_link"
+                :error-message="form.errors.date_start"
             />
 
             <TextInput
-                id="description"
-                v-model="form.description"
-                label="Descrição"
-                type="textarea"
-                :error-message="form.errors.description"
-            />
-
-            <TextInput
-                id="regulation"
-                v-model="form.regulation"
-                label="Regulamento"
-                type="textarea"
-                :error-message="form.errors.regulation"
+                id="date_end"
+                v-model="form.date_end"
+                label="Data de fim"
+                type="datetime-local"
+                required
+                :error-message="form.errors.date_end"
             />
-        </form>
-
-        <template #footer>
-            <div class="flex w-full items-center justify-end">
-                <PrimaryButton
-                    type="submit"
-                    form="competition-edit-form"
-                    :disabled="form.processing"
-                >
-                    Guardar alterações
-                </PrimaryButton>
-            </div>
-        </template>
-    </CardLayout>
+        </div>
+
+        <TextInput
+            id="registration_link"
+            v-model="form.registration_link"
+            label="Link para registo"
+            type="text"
+            required
+            :error-message="form.errors.registration_link"
+        />
+
+        <TextInput
+            id="description"
+            v-model="form.description"
+            label="Descrição"
+            type="textarea"
+            :error-message="form.errors.description"
+        />
+
+        <TextInput
+            id="regulation"
+            v-model="form.regulation"
+            label="Regulamento"
+            type="textarea"
+            :error-message="form.errors.regulation"
+        />
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Competition/Index.vue b/resources/js/Pages/CRUD/Competition/Index.vue
index 503e7979..6c9f9de8 100644
--- a/resources/js/Pages/CRUD/Competition/Index.vue
+++ b/resources/js/Pages/CRUD/Competition/Index.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import type Paginated from "@/Types/Paginated";
 import type Edition from "@/Types/Edition";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
 import Header from "@/Components/CRUD/Header.vue";
 import { computed } from "vue";
 import type Competition from "@/Types/Competition";
+import { ExternalLink } from "@lucide/vue";
 
 interface Props {
     items: Paginated<Competition>;
@@ -27,8 +28,9 @@ const editions = computed<Record<number, string>>(() =>
 </script>
 
 <template>
-    <CRUDLayout
-        title="Competition"
+    <CRUDView
+        title="Competições"
+        view="Competition"
         :items="items"
         name="competitions"
         :is-searchable="isSearchable"
@@ -37,9 +39,9 @@ const editions = computed<Record<number, string>>(() =>
 
         <template #header>
             <HeaderRow>
-                <Header filter-by="edition_id" :filter-values="editions"
-                    >Edição</Header
-                >
+                <Header filter-by="edition_id" :filter-values="editions">
+                    Edição
+                </Header>
                 <Header sort-by="name">Nome</Header>
                 <Header sort-by="theme">Tema</Header>
                 <Header>Descrição</Header>
@@ -49,12 +51,33 @@ const editions = computed<Record<number, string>>(() =>
 
         <template #row="{ item }">
             <Row name="competitions" :item="item">
-                <Cell>{{ editions[item.edition_id] }}</Cell>
-                <Cell>{{ item.name }}</Cell>
-                <Cell>{{ item.theme }}</Cell>
-                <Cell>{{ item.description }}</Cell>
-                <Cell><a :href="item.registration_link">Link</a></Cell>
+                <Cell class="text-xs text-neutral-400">
+                    {{ editions[item.edition_id] ?? "-" }}
+                </Cell>
+                <Cell class="font-medium text-white">{{ item.name }}</Cell>
+                <Cell class="text-xs text-neutral-300">{{ item.theme }}</Cell>
+                <Cell>
+                    <span
+                        class="block max-w-xs truncate text-xs text-neutral-400"
+                        :title="item.description"
+                    >
+                        {{ item.description || "-" }}
+                    </span>
+                </Cell>
+                <Cell>
+                    <a
+                        v-if="item.registration_link"
+                        :href="item.registration_link"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="inline-flex items-center gap-1 text-xs font-medium text-neutral-300 transition-colors hover:text-white hover:underline"
+                    >
+                        <span>Registar</span>
+                        <ExternalLink :size="11" />
+                    </a>
+                    <span v-else class="text-xs text-neutral-600">—</span>
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/CompetitionPrizes/Create.vue b/resources/js/Pages/CRUD/CompetitionPrizes/Create.vue
index 2ea8dd23..584dc598 100644
--- a/resources/js/Pages/CRUD/CompetitionPrizes/Create.vue
+++ b/resources/js/Pages/CRUD/CompetitionPrizes/Create.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
 import type Competition from "@/Types/Competition";
 import { useForm } from "@inertiajs/vue3";
@@ -27,44 +26,46 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Associar prémio a competição">
-        <form class="contents" @submit.prevent="submit">
-            <ImageInput
-                id="image"
-                v-model="form.prize_picture"
-                label="Imagem da equipa"
-                class="self-stretch"
-                :error-message="form.errors.prize_picture"
-            />
+    <CRUDModal
+        title="Associar Prémio a Competição"
+        name="competitionPrizes"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <ImageInput
+            id="image"
+            v-model="form.prize_picture"
+            label="Imagem do prémio"
+            class="self-stretch"
+            :error-message="form.errors.prize_picture"
+        />
 
-            <TextInput
-                id="place"
-                v-model="form.place"
-                label="Lugar"
-                type="number"
-                required
-                autofocus
-                autocomplete="place"
-                :error-message="form.errors.place"
-            />
+        <TextInput
+            id="place"
+            v-model="form.place"
+            label="Lugar (Posição)"
+            type="number"
+            required
+            autofocus
+            autocomplete="place"
+            :error-message="form.errors.place"
+        />
 
-            <TextInput
-                v-model="form.competition_id"
-                type="select"
-                required
-                label="Competição"
-                :error-message="form.errors.competition_id"
+        <TextInput
+            v-model="form.competition_id"
+            type="select"
+            required
+            label="Competição"
+            :error-message="form.errors.competition_id"
+        >
+            <option
+                v-for="competition in $props.with.competitions"
+                :key="competition.id"
+                :value="competition.id"
             >
-                <option
-                    v-for="competition in $props.with.competitions"
-                    :key="competition.id"
-                    :value="competition.id"
-                >
-                    {{ competition.name }}
-                </option>
-            </TextInput>
-
-            <PrimaryButton type="submit">Criar</PrimaryButton>
-        </form>
-    </CardLayout>
+                {{ competition.name }}
+            </option>
+        </TextInput>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/CompetitionPrizes/Edit.vue b/resources/js/Pages/CRUD/CompetitionPrizes/Edit.vue
index 6edcaf94..a1da54f7 100644
--- a/resources/js/Pages/CRUD/CompetitionPrizes/Edit.vue
+++ b/resources/js/Pages/CRUD/CompetitionPrizes/Edit.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
 import type Competition from "@/Types/Competition";
 import { useForm } from "@inertiajs/vue3";
@@ -36,45 +35,47 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Associar prémio a competição">
-        <form class="contents" @submit.prevent="submit">
-            <ImageInput
-                id="image"
-                v-model="form.prize_picture"
-                :initial-preview="competitionPrize.prize_picture"
-                label="Imagem do prémio"
-                class="self-stretch"
-                :error-message="form.errors.prize_picture"
-            />
+    <CRUDModal
+        title="Editar Prémio de Competição"
+        name="competitionPrizes"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <ImageInput
+            id="image"
+            v-model="form.prize_picture"
+            :initial-preview="competitionPrize.prize_picture"
+            label="Imagem do prémio"
+            class="self-stretch"
+            :error-message="form.errors.prize_picture"
+        />
 
-            <TextInput
-                id="place"
-                v-model="form.place"
-                label="Lugar"
-                type="number"
-                required
-                autofocus
-                autocomplete="place"
-                :error-message="form.errors.place"
-            />
+        <TextInput
+            id="place"
+            v-model="form.place"
+            label="Lugar (Posição)"
+            type="number"
+            required
+            autofocus
+            autocomplete="place"
+            :error-message="form.errors.place"
+        />
 
-            <TextInput
-                v-model="form.competition_id"
-                type="select"
-                required
-                label="Competição"
-                :error-message="form.errors.competition_id"
+        <TextInput
+            v-model="form.competition_id"
+            type="select"
+            required
+            label="Competição"
+            :error-message="form.errors.competition_id"
+        >
+            <option
+                v-for="competition in $props.with.competitions"
+                :key="competition.id"
+                :value="competition.id"
             >
-                <option
-                    v-for="competition in $props.with.competitions"
-                    :key="competition.id"
-                    :value="competition.id"
-                >
-                    {{ competition.name }}
-                </option>
-            </TextInput>
-
-            <PrimaryButton type="submit">Editar</PrimaryButton>
-        </form>
-    </CardLayout>
+                {{ competition.name }}
+            </option>
+        </TextInput>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/CompetitionPrizes/Index.vue b/resources/js/Pages/CRUD/CompetitionPrizes/Index.vue
index 4fad4082..372efc1c 100644
--- a/resources/js/Pages/CRUD/CompetitionPrizes/Index.vue
+++ b/resources/js/Pages/CRUD/CompetitionPrizes/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type Paginated from "@/Types/Paginated";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -36,31 +36,55 @@ const competitionNames = computed<Record<number, string>>(() =>
         ]),
     ),
 );
+
+const formatPlace = (place: number | string) => {
+    return `${place}º Lugar`;
+};
 </script>
 
 <template>
-    <CRUDLayout
-        title="Competition Prizes"
+    <CRUDView
+        title="Prémios da Competição"
+        view="CompetitionPrizes"
         :items="items"
         name="competitionPrizes"
         :is-searchable="isSearchable"
     >
-        <template #heading>Prémios na Competição de Programação</template>
+        <template #heading>Prémios da Competição</template>
 
         <template #header>
             <HeaderRow>
                 <Header>Edição</Header>
-                <Header sort-by="place">Lugar</Header>
+                <Header sort-by="place">Classificação</Header>
                 <Header>Competição</Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
             <Row name="competitionPrizes" :item="item">
-                <Cell>{{ editions[item.competition_id] }}</Cell>
-                <Cell>{{ item.place }}</Cell>
-                <Cell>{{ competitionNames[item.competition_id] }}</Cell>
+                <Cell class="text-xs text-neutral-400">
+                    {{ editions[item.competition_id] ?? "-" }}
+                </Cell>
+                <Cell>
+                    <span
+                        class="text-xs font-semibold"
+                        :class="
+                            item.place === 1
+                                ? 'text-amber-400'
+                                : item.place === 2
+                                  ? 'text-slate-300'
+                                  : item.place === 3
+                                    ? 'text-amber-600'
+                                    : 'text-neutral-300'
+                        "
+                    >
+                        {{ formatPlace(item.place) }}
+                    </span>
+                </Cell>
+                <Cell class="font-medium text-white">
+                    {{ competitionNames[item.competition_id] ?? "-" }}
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/CompetitionTeam/Create.vue b/resources/js/Pages/CRUD/CompetitionTeam/Create.vue
index 811f4950..6fbf5dd2 100644
--- a/resources/js/Pages/CRUD/CompetitionTeam/Create.vue
+++ b/resources/js/Pages/CRUD/CompetitionTeam/Create.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
 import type Competition from "@/Types/Competition";
 import { useForm } from "@inertiajs/vue3";
@@ -31,27 +30,33 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Associar membro a equipa">
-        <form class="contents" @submit.prevent="submit">
-            <ImageInput
-                id="image"
-                v-model="form.image"
-                label="Imagem da equipa"
-                class="self-stretch"
-                :error-message="form.errors.image"
-            />
+    <CRUDModal
+        title="Criar Equipa"
+        name="competitionTeams"
+        :processing="form.processing"
+        max-width="lg"
+        @submit="submit"
+    >
+        <ImageInput
+            id="image"
+            v-model="form.image"
+            label="Imagem da equipa"
+            class="self-stretch"
+            :error-message="form.errors.image"
+        />
 
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome"
-                type="text"
-                required
-                autofocus
-                autocomplete="name"
-                :error-message="form.errors.name"
-            />
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome da equipa"
+            type="text"
+            required
+            autofocus
+            autocomplete="name"
+            :error-message="form.errors.name"
+        />
 
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
                 id="points"
                 v-model="form.points"
@@ -75,25 +80,23 @@ const submit = () => {
                     {{ competition.name }}
                 </option>
             </TextInput>
+        </div>
 
-            <TextInput
-                id="members[]"
-                v-model="form.members"
-                type="select"
-                label="Membros"
-                multiple
-                :error-message="form.errors.members"
+        <TextInput
+            id="members[]"
+            v-model="form.members"
+            type="select"
+            label="Membros da Equipa"
+            multiple
+            :error-message="form.errors.members"
+        >
+            <option
+                v-for="participant in $props.with.participants"
+                :key="participant.id"
+                :value="participant.id"
             >
-                <option
-                    v-for="participant in $props.with.participants"
-                    :key="participant.id"
-                    :value="participant.id"
-                >
-                    {{ participant.user?.name ?? participant.id }}
-                </option>
-            </TextInput>
-
-            <PrimaryButton type="submit">Criar</PrimaryButton>
-        </form>
-    </CardLayout>
+                {{ participant.user?.name ?? participant.id }}
+            </option>
+        </TextInput>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/CompetitionTeam/Edit.vue b/resources/js/Pages/CRUD/CompetitionTeam/Edit.vue
index 0a66f900..6d183853 100644
--- a/resources/js/Pages/CRUD/CompetitionTeam/Edit.vue
+++ b/resources/js/Pages/CRUD/CompetitionTeam/Edit.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
 import type Competition from "@/Types/Competition";
 import { useForm } from "@inertiajs/vue3";
@@ -38,28 +37,34 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Associar membro a equipa">
-        <form class="contents" @submit.prevent="submit">
-            <ImageInput
-                id="image"
-                v-model="form.image"
-                :initial-preview="competitionTeam.image_competition_team_url"
-                label="Imagem da equipa"
-                class="self-stretch"
-                :error-message="form.errors.image"
-            />
+    <CRUDModal
+        title="Editar Equipa"
+        name="competitionTeams"
+        :processing="form.processing"
+        max-width="lg"
+        @submit="submit"
+    >
+        <ImageInput
+            id="image"
+            v-model="form.image"
+            :initial-preview="competitionTeam.image_competition_team_url"
+            label="Imagem da equipa"
+            class="self-stretch"
+            :error-message="form.errors.image"
+        />
 
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome da equipa"
-                type="text"
-                required
-                autofocus
-                autocomplete="name"
-                :error-message="form.errors.name"
-            />
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome da equipa"
+            type="text"
+            required
+            autofocus
+            autocomplete="name"
+            :error-message="form.errors.name"
+        />
 
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
                 id="points"
                 v-model="form.points"
@@ -85,25 +90,23 @@ const submit = () => {
                     {{ competition.name }}
                 </option>
             </TextInput>
+        </div>
 
-            <TextInput
-                id="members[]"
-                v-model="form.members"
-                type="select"
-                label="Membros"
-                multiple
-                :error-message="form.errors.members"
+        <TextInput
+            id="members[]"
+            v-model="form.members"
+            type="select"
+            label="Membros da Equipa"
+            multiple
+            :error-message="form.errors.members"
+        >
+            <option
+                v-for="participant in $props.with.participants"
+                :key="participant.id"
+                :value="participant.id"
             >
-                <option
-                    v-for="participant in $props.with.participants"
-                    :key="participant.id"
-                    :value="participant.id"
-                >
-                    {{ participant.user?.name ?? participant.id }}
-                </option>
-            </TextInput>
-
-            <PrimaryButton type="submit">Associar</PrimaryButton>
-        </form>
-    </CardLayout>
+                {{ participant.user?.name ?? participant.id }}
+            </option>
+        </TextInput>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/CompetitionTeam/Index.vue b/resources/js/Pages/CRUD/CompetitionTeam/Index.vue
index ad86c7b1..f416c04f 100644
--- a/resources/js/Pages/CRUD/CompetitionTeam/Index.vue
+++ b/resources/js/Pages/CRUD/CompetitionTeam/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type Paginated from "@/Types/Paginated";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -30,31 +30,40 @@ const editions = computed<Record<number, string>>(() =>
 </script>
 
 <template>
-    <CRUDLayout
-        title="Competition Teams"
+    <CRUDView
+        title="Equipas da Competição"
+        view="CompetitionTeam"
         :items="items"
         name="competitionTeams"
         :is-searchable="isSearchable"
     >
-        <template #heading>Equipas na Competição de Programação</template>
+        <template #heading>Equipas da Competição</template>
 
         <template #header>
             <HeaderRow>
                 <Header>Edição</Header>
-                <Header sort-by="name">Nome</Header>
-                <Header>Nª Membros</Header>
+                <Header sort-by="name">Nome da Equipa</Header>
+                <Header>Nº Membros</Header>
                 <Header sort-by="points">Pontos</Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
-            ,
             <Row name="competitionTeams" :item="item">
-                <Cell>{{ editions[item.competition_id] }}</Cell>
-                <Cell>{{ item.name }}</Cell>
-                <Cell>{{ item.members?.length ?? "N/A" }}</Cell>
-                <Cell>{{ item.points }}</Cell>
+                <Cell class="text-xs text-neutral-400">
+                    {{ editions[item.competition_id] ?? "-" }}
+                </Cell>
+                <Cell class="font-medium text-white">{{ item.name }}</Cell>
+                <Cell class="font-mono text-xs text-neutral-300">
+                    {{ item.members?.length ?? 0 }}
+                </Cell>
+                <Cell>
+                    <span class="font-mono text-xs font-semibold text-neutral-200">
+                        {{ item.points }}
+                    </span>
+                    <span class="ml-1 text-xs text-neutral-500">pts</span>
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/Department/Create.vue b/resources/js/Pages/CRUD/Department/Create.vue
index d7a6ffa9..6f1d958e 100644
--- a/resources/js/Pages/CRUD/Department/Create.vue
+++ b/resources/js/Pages/CRUD/Department/Create.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
 import type Edition from "@/Types/Edition";
 import { useForm } from "@inertiajs/vue3";
@@ -26,45 +25,45 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Criar Departamento">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome"
-                type="text"
-                required
-                autofocus
-                autocomplete="name"
-                :error-message="form.errors.name"
-            />
+    <CRUDModal
+        title="Criar Departamento"
+        name="departments"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome"
+            type="text"
+            required
+            autofocus
+            autocomplete="name"
+            :error-message="form.errors.name"
+        />
 
-            <TextInput
-                v-model="form.edition_id"
-                type="select"
-                required
-                label="Edição"
-                class="self-stretch"
-                :error-message="form.errors.edition_id"
+        <TextInput
+            v-model="form.edition_id"
+            type="select"
+            required
+            label="Edição"
+            :error-message="form.errors.edition_id"
+        >
+            <option
+                v-for="edition in $props.with.editions"
+                :key="edition.id"
+                :value="edition.id"
             >
-                <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
-                >
-                    {{ edition.name }}
-                </option>
-            </TextInput>
+                {{ edition.name }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                v-model="form.priority"
-                type="number"
-                label="Prioridade"
-                class="self-stretch"
-                :error-message="form.errors.priority"
-            />
-
-            <PrimaryButton type="submit">Criar</PrimaryButton>
-        </form>
-    </CardLayout>
+        <TextInput
+            v-model="form.priority"
+            type="number"
+            label="Prioridade"
+            :error-message="form.errors.priority"
+        />
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Department/Edit.vue b/resources/js/Pages/CRUD/Department/Edit.vue
index 96a24efc..7037576d 100644
--- a/resources/js/Pages/CRUD/Department/Edit.vue
+++ b/resources/js/Pages/CRUD/Department/Edit.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
 import type Edition from "@/Types/Edition";
 import type Department from "@/Types/Department";
@@ -28,45 +27,45 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Editar Departamento">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome"
-                type="text"
-                required
-                autofocus
-                autocomplete="name"
-                :error-message="form.errors.name"
-            >
-            </TextInput>
+    <CRUDModal
+        title="Editar Departamento"
+        name="departments"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome"
+            type="text"
+            required
+            autofocus
+            autocomplete="name"
+            :error-message="form.errors.name"
+        />
 
-            <TextInput
-                v-model="form.edition_id"
-                type="select"
-                required
-                label="Edição"
-                :error-message="form.errors.edition_id"
+        <TextInput
+            v-model="form.edition_id"
+            type="select"
+            required
+            label="Edição"
+            :error-message="form.errors.edition_id"
+        >
+            <option
+                v-for="edition in $props.with.editions"
+                :key="edition.id"
+                :value="edition.id"
             >
-                <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
-                >
-                    {{ edition.name }}
-                </option>
-            </TextInput>
-
-            <TextInput
-                v-model="form.priority"
-                type="number"
-                label="Prioridade"
-                class="self-stretch"
-                :error-message="form.errors.priority"
-            />
+                {{ edition.name }}
+            </option>
+        </TextInput>
 
-            <PrimaryButton type="submit">Editar</PrimaryButton>
-        </form>
-    </CardLayout>
+        <TextInput
+            v-model="form.priority"
+            type="number"
+            label="Prioridade"
+            :error-message="form.errors.priority"
+        />
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Department/Index.vue b/resources/js/Pages/CRUD/Department/Index.vue
index 778cfe04..77dac607 100644
--- a/resources/js/Pages/CRUD/Department/Index.vue
+++ b/resources/js/Pages/CRUD/Department/Index.vue
@@ -2,7 +2,7 @@
 import type Paginated from "@/Types/Paginated";
 import type Edition from "@/Types/Edition";
 import type Department from "@/Types/Department";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -27,8 +27,9 @@ const editions = computed<Record<number, string>>(() =>
 </script>
 
 <template>
-    <CRUDLayout
-        title="Departments"
+    <CRUDView
+        title="Departamentos"
+        view="Department"
         :items="items"
         name="departments"
         :is-searchable="isSearchable"
@@ -37,20 +38,24 @@ const editions = computed<Record<number, string>>(() =>
 
         <template #header>
             <HeaderRow>
-                <Header sort-by="name">Nome</Header>
-                <Header filter-by="edition_id" :filter-values="editions"
-                    >Edição</Header
-                >
+                <Header sort-by="name">Nome do Departamento</Header>
+                <Header filter-by="edition_id" :filter-values="editions">
+                    Edição
+                </Header>
                 <Header sort-by="priority">Prioridade</Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
             <Row name="departments" :item="item">
-                <Cell>{{ item.name }}</Cell>
-                <Cell>{{ editions[item.edition_id] }}</Cell>
-                <Cell>{{ item.priority }}</Cell>
+                <Cell class="font-medium text-white">{{ item.name }}</Cell>
+                <Cell class="text-xs text-neutral-400">
+                    {{ editions[item.edition_id] ?? "-" }}
+                </Cell>
+                <Cell class="font-mono text-xs text-neutral-300">
+                    {{ item.priority }}
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/Edition/Create.vue b/resources/js/Pages/CRUD/Edition/Create.vue
index ff628e5d..266f8620 100644
--- a/resources/js/Pages/CRUD/Edition/Create.vue
+++ b/resources/js/Pages/CRUD/Edition/Create.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 
@@ -16,28 +15,30 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Criar edição">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome"
-                type="text"
-                required
-                autofocus
-                :error-message="form.errors.name"
-            />
+    <CRUDModal
+        title="Criar edição"
+        name="editions"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome"
+            type="text"
+            required
+            autofocus
+            :error-message="form.errors.name"
+        />
 
-            <TextInput
-                id="year"
-                v-model="form.year"
-                label="Ano"
-                type="number"
-                required
-                :error-message="form.errors.year"
-            />
-
-            <PrimaryButton type="submit">Criar</PrimaryButton>
-        </form>
-    </CardLayout>
+        <TextInput
+            id="year"
+            v-model="form.year"
+            label="Ano"
+            type="number"
+            required
+            :error-message="form.errors.year"
+        />
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Edition/Edit.vue b/resources/js/Pages/CRUD/Edition/Edit.vue
index db8645f1..bd05868b 100644
--- a/resources/js/Pages/CRUD/Edition/Edit.vue
+++ b/resources/js/Pages/CRUD/Edition/Edit.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import type Edition from "@/Types/Edition";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
@@ -23,29 +22,31 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Editar edição">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome"
-                type="text"
-                required
-                autofocus
-                autocomplete="name"
-                :error-message="form.errors.name"
-            />
+    <CRUDModal
+        title="Editar edição"
+        name="editions"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome"
+            type="text"
+            required
+            autofocus
+            autocomplete="name"
+            :error-message="form.errors.name"
+        />
 
-            <TextInput
-                id="year"
-                v-model="form.year"
-                label="Ano"
-                type="number"
-                required
-                :error-message="form.errors.year"
-            />
-
-            <PrimaryButton type="submit">Editar</PrimaryButton>
-        </form>
-    </CardLayout>
+        <TextInput
+            id="year"
+            v-model="form.year"
+            label="Ano"
+            type="number"
+            required
+            :error-message="form.errors.year"
+        />
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Edition/Index.vue b/resources/js/Pages/CRUD/Edition/Index.vue
index b1249eeb..448d13a1 100644
--- a/resources/js/Pages/CRUD/Edition/Index.vue
+++ b/resources/js/Pages/CRUD/Edition/Index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type Edition from "@/Types/Edition";
 import type Paginated from "@/Types/Paginated";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -16,24 +16,31 @@ defineProps<Props>();
 </script>
 
 <template>
-    <CRUDLayout
-        title="Edition"
+    <CRUDView
+        title="Edições"
+        view="Edition"
         :items="items"
         name="editions"
         :is-searchable="isSearchable"
     >
-        <template #heading>Edições</template>
+        <template #heading>Edições do Evento</template>
 
         <template #header>
             <HeaderRow>
-                <Header sort-by="name">Nome</Header>
+                <Header sort-by="name">Nome da Edição</Header>
+                <Header sort-by="year">Ano</Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
             <Row :item="item" name="editions">
-                <Cell>{{ item.name }}</Cell>
+                <Cell class="font-medium text-white">{{ item.name }}</Cell>
+                <Cell>
+                    <span class="font-mono text-xs text-neutral-400">
+                        {{ item.year }}
+                    </span>
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/Enrollment/Create.vue b/resources/js/Pages/CRUD/Enrollment/Create.vue
index 1f54828a..bb06370b 100644
--- a/resources/js/Pages/CRUD/Enrollment/Create.vue
+++ b/resources/js/Pages/CRUD/Enrollment/Create.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type Participant from "@/Types/Participant";
 import type Edition from "@/Types/Edition";
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
@@ -27,43 +26,45 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Criar inscrição">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                id="participant_id"
-                v-model="form.participant_id"
-                label="Participante"
-                type="select"
-                required
-                :error-message="form.errors.participant_id"
+    <CRUDModal
+        title="Criar inscrição"
+        name="enrollments"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <TextInput
+            id="participant_id"
+            v-model="form.participant_id"
+            label="Participante"
+            type="select"
+            required
+            :error-message="form.errors.participant_id"
+        >
+            <option
+                v-for="participant in $props.with.participants"
+                :key="participant.id"
+                :value="participant.id"
             >
-                <option
-                    v-for="participant in $props.with.participants"
-                    :key="participant.id"
-                    :value="participant.id"
-                >
-                    {{ participant.user?.name }} - {{ participant.user?.id }}
-                </option>
-            </TextInput>
+                {{ participant.user?.name ?? `Membro #${participant.id}` }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                id="edition_id"
-                v-model="form.edition_id"
-                label="Edição"
-                type="select"
-                required
-                :error-message="form.errors.edition_id"
+        <TextInput
+            id="edition_id"
+            v-model="form.edition_id"
+            label="Edição"
+            type="select"
+            required
+            :error-message="form.errors.edition_id"
+        >
+            <option
+                v-for="edition in $props.with.editions"
+                :key="edition.id"
+                :value="edition.id"
             >
-                <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
-                >
-                    {{ edition.name }}
-                </option>
-            </TextInput>
-
-            <PrimaryButton type="submit">Adicionar</PrimaryButton>
-        </form>
-    </CardLayout>
+                {{ edition.name }}
+            </option>
+        </TextInput>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Enrollment/Edit.vue b/resources/js/Pages/CRUD/Enrollment/Edit.vue
index c45db8bb..8c8d2602 100644
--- a/resources/js/Pages/CRUD/Enrollment/Edit.vue
+++ b/resources/js/Pages/CRUD/Enrollment/Edit.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import type Participant from "@/Types/Participant";
 import type Edition from "@/Types/Edition";
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
@@ -30,51 +29,53 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Editar inscrição">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                id="participant_id"
-                v-model="form.participant_id"
-                label="Participante"
-                type="select"
-                required
-                :error-message="form.errors.participant_id"
+    <CRUDModal
+        title="Editar inscrição"
+        name="enrollments"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <TextInput
+            id="participant_id"
+            v-model="form.participant_id"
+            label="Participante"
+            type="select"
+            required
+            :error-message="form.errors.participant_id"
+        >
+            <option
+                v-for="participant in $props.with.participants"
+                :key="participant.id"
+                :value="participant.id"
             >
-                <option
-                    v-for="participant in $props.with.participants"
-                    :key="participant.id"
-                    :value="participant.id"
-                >
-                    {{ participant.user?.name }} - {{ participant.user?.id }}
-                </option>
-            </TextInput>
+                {{ participant.user?.name ?? `Membro #${participant.id}` }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                id="edition_id"
-                v-model="form.edition_id"
-                label="Edição"
-                type="select"
-                required
-                :error-message="form.errors.edition_id"
+        <TextInput
+            id="edition_id"
+            v-model="form.edition_id"
+            label="Edição"
+            type="select"
+            required
+            :error-message="form.errors.edition_id"
+        >
+            <option
+                v-for="edition in $props.with.editions"
+                :key="edition.id"
+                :value="edition.id"
             >
-                <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
-                >
-                    {{ edition.name }}
-                </option>
-            </TextInput>
+                {{ edition.name }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                id="points"
-                v-model="form.points"
-                label="Pontos"
-                type="number"
-                :error-message="form.errors.points"
-            />
-
-            <PrimaryButton type="submit">Adicionar</PrimaryButton>
-        </form>
-    </CardLayout>
+        <TextInput
+            id="points"
+            v-model="form.points"
+            label="Pontos"
+            type="number"
+            :error-message="form.errors.points"
+        />
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Enrollment/Index.vue b/resources/js/Pages/CRUD/Enrollment/Index.vue
index 1c9185b5..e44ec3fc 100644
--- a/resources/js/Pages/CRUD/Enrollment/Index.vue
+++ b/resources/js/Pages/CRUD/Enrollment/Index.vue
@@ -3,7 +3,7 @@ import type Enrollment from "@/Types/Enrollment";
 import type Paginated from "@/Types/Paginated";
 import type Participant from "@/Types/Participant";
 import type Edition from "@/Types/Edition";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -38,8 +38,9 @@ const editions = computed<Record<number, string>>(() =>
 </script>
 
 <template>
-    <CRUDLayout
-        title="Enrollment"
+    <CRUDView
+        title="Inscrições"
+        view="Enrollment"
         :items="items"
         name="enrollments"
         :is-searchable="isSearchable"
@@ -48,22 +49,31 @@ const editions = computed<Record<number, string>>(() =>
 
         <template #header>
             <HeaderRow>
-                <Header filter-by="participant_id" :filter-values="participants"
-                    >Nome do Estudante</Header
-                >
-                <Header filter-by="edition_id" :filter-values="editions"
-                    >Nome da Edição</Header
-                >
+                <Header filter-by="participant_id" :filter-values="participants">
+                    Participante
+                </Header>
+                <Header filter-by="edition_id" :filter-values="editions">
+                    Edição
+                </Header>
                 <Header sort-by="points">Pontos</Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
             <Row :item="item" name="enrollments">
-                <Cell>{{ participants[item.participant_id] }}</Cell>
-                <Cell>{{ editions[item.edition_id] }}</Cell>
-                <Cell>{{ item.points }}</Cell>
+                <Cell class="font-medium text-white">
+                    {{ participants[item.participant_id] ?? `Participante #${item.participant_id}` }}
+                </Cell>
+                <Cell class="text-xs text-neutral-400">
+                    {{ editions[item.edition_id] ?? "-" }}
+                </Cell>
+                <Cell>
+                    <span class="font-mono text-xs font-semibold text-neutral-200">
+                        {{ item.points }}
+                    </span>
+                    <span class="ml-1 text-xs text-neutral-500">pts</span>
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/Event/Create.vue b/resources/js/Pages/CRUD/Event/Create.vue
index 814a5cbf..39d16ac4 100644
--- a/resources/js/Pages/CRUD/Event/Create.vue
+++ b/resources/js/Pages/CRUD/Event/Create.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
+import Checkbox from "@/Components/Form/Checkbox.vue";
 import type EventDay from "@/Types/EventDay";
 import type EventType from "@/Types/EventType";
 import type { User } from "@/Types/User";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import Checkbox from "@/Components/Form/Checkbox.vue";
 
 interface Props {
     with: {
@@ -40,37 +39,24 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Criar evento">
-        <form class="contents" @submit.prevent="submit">
+    <CRUDModal
+        title="Criar evento"
+        name="events"
+        :processing="form.processing"
+        max-width="2xl"
+        @submit="submit"
+    >
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
                 id="name"
                 v-model="form.name"
-                label="Nome"
+                label="Nome do Evento"
                 type="text"
                 required
                 autofocus
                 autocomplete="name"
                 :error-message="form.errors.name"
-            />
-
-            <TextInput
-                id="time_start"
-                v-model="form.time_start"
-                label="Hora de início"
-                type="time"
-                step="1"
-                required
-                :error-message="form.errors.time_start"
-            />
-
-            <TextInput
-                id="time_end"
-                v-model="form.time_end"
-                label="Hora de fim"
-                type="time"
-                step="1"
-                required
-                :error-message="form.errors.time_end"
+                class="sm:col-span-2"
             />
 
             <TextInput
@@ -90,39 +76,24 @@ const submit = () => {
                 :error-message="form.errors.location"
             />
 
-            <label
-                for="enroll_in_site"
-                class="flex flex-row items-center gap-6"
-            >
-                Inscrição no site?
-                <Checkbox
-                    id="enroll_in_site"
-                    v-model:checked="form.enroll_in_site"
-                />
-            </label>
-
-            <TextInput
-                id="external_url"
-                v-model="form.external_url"
-                label="URL Externo"
-                type="url"
-                :error-message="form.errors.external_url"
-            />
-
             <TextInput
-                id="description"
-                v-model="form.description"
-                label="Descrição"
-                type="textarea"
-                :error-message="form.errors.description"
+                id="time_start"
+                v-model="form.time_start"
+                label="Hora de início"
+                type="time"
+                step="1"
+                required
+                :error-message="form.errors.time_start"
             />
 
             <TextInput
-                id="capacity"
-                v-model="form.capacity"
-                label="Capacidade"
-                type="number"
-                :error-message="form.errors.capacity"
+                id="time_end"
+                v-model="form.time_end"
+                label="Hora de fim"
+                type="time"
+                step="1"
+                required
+                :error-message="form.errors.time_end"
             />
 
             <TextInput
@@ -158,23 +129,60 @@ const submit = () => {
             </TextInput>
 
             <TextInput
-                id="users[]"
-                v-model="form.users"
-                type="select"
-                label="Utilizadores"
-                multiple
-                :error-message="form.errors.users"
-            >
-                <option
-                    v-for="user in $props.with.users"
-                    :key="user.id"
-                    :value="user.id"
-                >
-                    {{ user.name }}
-                </option>
-            </TextInput>
+                id="capacity"
+                v-model="form.capacity"
+                label="Capacidade"
+                type="number"
+                :error-message="form.errors.capacity"
+            />
+
+            <TextInput
+                id="external_url"
+                v-model="form.external_url"
+                label="URL Externo"
+                type="url"
+                :error-message="form.errors.external_url"
+            />
 
-            <PrimaryButton type="submit">Criar</PrimaryButton>
-        </form>
-    </CardLayout>
+            <TextInput
+                id="description"
+                v-model="form.description"
+                label="Descrição"
+                type="textarea"
+                :error-message="form.errors.description"
+                class="sm:col-span-2"
+            />
+
+            <div class="sm:col-span-2">
+                <TextInput
+                    id="users[]"
+                    v-model="form.users"
+                    type="select"
+                    label="Utilizadores / Oradores"
+                    multiple
+                    :error-message="form.errors.users"
+                >
+                    <option
+                        v-for="user in $props.with.users"
+                        :key="user.id"
+                        :value="user.id"
+                    >
+                        {{ user.name }}
+                    </option>
+                </TextInput>
+            </div>
+
+            <div
+                class="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.02] px-4 py-3 sm:col-span-2"
+            >
+                <span class="text-xs font-medium text-neutral-300">
+                    Permitir inscrição no site?
+                </span>
+                <Checkbox
+                    id="enroll_in_site"
+                    v-model:checked="form.enroll_in_site"
+                />
+            </div>
+        </div>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Event/Edit.vue b/resources/js/Pages/CRUD/Event/Edit.vue
index 88ee6e0c..f50741c7 100644
--- a/resources/js/Pages/CRUD/Event/Edit.vue
+++ b/resources/js/Pages/CRUD/Event/Edit.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
+import Checkbox from "@/Components/Form/Checkbox.vue";
 import type Event from "@/Types/Event";
 import type EventDay from "@/Types/EventDay";
 import type EventType from "@/Types/EventType";
 import type { User } from "@/Types/User";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import Checkbox from "@/Components/Form/Checkbox.vue";
 
 interface Props {
     item: Event;
@@ -42,37 +41,24 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Editar evento">
-        <form class="contents" @submit.prevent="submit">
+    <CRUDModal
+        title="Editar evento"
+        name="events"
+        :processing="form.processing"
+        max-width="2xl"
+        @submit="submit"
+    >
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
                 id="name"
                 v-model="form.name"
-                label="Nome"
+                label="Nome do Evento"
                 type="text"
                 required
                 autofocus
                 autocomplete="name"
                 :error-message="form.errors.name"
-            />
-
-            <TextInput
-                id="time_start"
-                v-model="form.time_start"
-                label="Hora de início"
-                type="time"
-                step="1"
-                required
-                :error-message="form.errors.time_start"
-            />
-
-            <TextInput
-                id="time_end"
-                v-model="form.time_end"
-                label="Hora de fim"
-                type="time"
-                step="1"
-                required
-                :error-message="form.errors.time_end"
+                class="sm:col-span-2"
             />
 
             <TextInput
@@ -93,27 +79,23 @@ const submit = () => {
             />
 
             <TextInput
-                id="external_url"
-                v-model="form.external_url"
-                label="URL Externo"
-                type="url"
-                :error-message="form.errors.external_url"
-            />
-
-            <TextInput
-                id="description"
-                v-model="form.description"
-                label="Descrição"
-                type="textarea"
-                :error-message="form.errors.description"
+                id="time_start"
+                v-model="form.time_start"
+                label="Hora de início"
+                type="time"
+                step="1"
+                required
+                :error-message="form.errors.time_start"
             />
 
             <TextInput
-                id="capacity"
-                v-model="form.capacity"
-                label="Capacidade"
-                type="number"
-                :error-message="form.errors.capacity"
+                id="time_end"
+                v-model="form.time_end"
+                label="Hora de fim"
+                type="time"
+                step="1"
+                required
+                :error-message="form.errors.time_end"
             />
 
             <TextInput
@@ -149,31 +131,60 @@ const submit = () => {
             </TextInput>
 
             <TextInput
-                id="users[]"
-                v-model="form.users"
-                type="select"
-                label="Utilizadores"
-                multiple
-                :error-message="form.errors.users"
-            >
-                <option
-                    v-for="user in $props.with.users"
-                    :key="user.id"
-                    :value="user.id"
-                >
-                    {{ user.name }}
-                </option>
-            </TextInput>
+                id="capacity"
+                v-model="form.capacity"
+                label="Capacidade"
+                type="number"
+                :error-message="form.errors.capacity"
+            />
 
-            <label for="enroll_in_site" class="">
-                Inscrição no site?
+            <TextInput
+                id="external_url"
+                v-model="form.external_url"
+                label="URL Externo"
+                type="url"
+                :error-message="form.errors.external_url"
+            />
+
+            <TextInput
+                id="description"
+                v-model="form.description"
+                label="Descrição"
+                type="textarea"
+                :error-message="form.errors.description"
+                class="sm:col-span-2"
+            />
+
+            <div class="sm:col-span-2">
+                <TextInput
+                    id="users[]"
+                    v-model="form.users"
+                    type="select"
+                    label="Utilizadores / Oradores"
+                    multiple
+                    :error-message="form.errors.users"
+                >
+                    <option
+                        v-for="user in $props.with.users"
+                        :key="user.id"
+                        :value="user.id"
+                    >
+                        {{ user.name }}
+                    </option>
+                </TextInput>
+            </div>
+
+            <div
+                class="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.02] px-4 py-3 sm:col-span-2"
+            >
+                <span class="text-xs font-medium text-neutral-300">
+                    Permitir inscrição no site?
+                </span>
                 <Checkbox
                     id="enroll_in_site"
                     v-model:checked="form.enroll_in_site"
                 />
-            </label>
-
-            <PrimaryButton type="submit">Editar</PrimaryButton>
-        </form>
-    </CardLayout>
+            </div>
+        </div>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Event/Index.vue b/resources/js/Pages/CRUD/Event/Index.vue
index 2e0788c8..7c50e211 100644
--- a/resources/js/Pages/CRUD/Event/Index.vue
+++ b/resources/js/Pages/CRUD/Event/Index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type Event from "@/Types/Event";
 import type Paginated from "@/Types/Paginated";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -25,7 +25,7 @@ const event_days = computed<Record<number, string>>(() =>
     Object.fromEntries(
         props.with.event_days.map((event_day) => [
             event_day.id,
-            event_day.date + "",
+            `${event_day.date} (${event_day.theme})`,
         ]),
     ),
 );
@@ -38,45 +38,93 @@ const event_types = computed<Record<number, string>>(() =>
         ]),
     ),
 );
+
+const formatTime = (time?: string) => {
+    if (!time) return "-";
+    return time.slice(0, 5);
+};
 </script>
 
 <template>
-    <CRUDLayout
-        title="Event"
+    <CRUDView
+        title="Eventos"
+        view="Event"
         :items="items"
         name="events"
         :is-searchable="isSearchable"
     >
-        <template #heading>Events</template>
+        <template #heading>Eventos</template>
 
         <template #header>
             <HeaderRow>
                 <Header sort-by="name">Nome</Header>
-                <Header sort-by="time_start">Hora de Início</Header>
-                <Header sort-by="time_end">Hora de Fim</Header>
-                <Header filter-by="event_day_id" :filter-values="event_days"
-                    >Dia do evento</Header
-                >
-                <Header filter-by="event_type_id" :filter-values="event_types"
-                    >Tipo do evento</Header
-                >
+                <Header sort-by="time_start">Horário</Header>
+                <Header filter-by="event_day_id" :filter-values="event_days">
+                    Dia do Evento
+                </Header>
+                <Header filter-by="event_type_id" :filter-values="event_types">
+                    Tipo
+                </Header>
                 <Header sort-by="capacity">Capacidade</Header>
-                <Header sort-by="capacity">Local</Header>
-                <Header sort-by="capacity">Inscrição no site</Header>
+                <Header sort-by="location">Local</Header>
+                <Header sort-by="enroll_in_site">Inscrição</Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
             <Row :item="item" name="events">
-                <Cell>{{ item.name }}</Cell>
-                <Cell>{{ item.time_start }} </Cell>
-                <Cell>{{ item.time_end }} </Cell>
-                <Cell>{{ event_days[item.event_day_id] }}</Cell>
-                <Cell>{{ event_types[item.event_type_id] }}</Cell>
-                <Cell>{{ item.capacity ?? "N/A" }}</Cell>
-                <Cell>{{ item.location }}</Cell>
-                <Cell>{{ item.enroll_in_site ? "Sim" : "Não" }}</Cell>
+                <Cell class="font-medium text-white">
+                    <span class="block max-w-xs truncate" :title="item.name">
+                        {{ item.name }}
+                    </span>
+                </Cell>
+                <Cell>
+                    <span class="font-mono text-xs text-neutral-300">
+                        {{ formatTime(item.time_start) }} –
+                        {{ formatTime(item.time_end) }}
+                    </span>
+                </Cell>
+                <Cell>
+                    <span class="block max-w-44 truncate text-xs text-neutral-400">
+                        {{ event_days[item.event_day_id] ?? "-" }}
+                    </span>
+                </Cell>
+                <Cell>
+                    <span class="text-xs text-neutral-300 capitalize">
+                        {{ event_types[item.event_type_id] ?? "-" }}
+                    </span>
+                </Cell>
+                <Cell>
+                    <span
+                        v-if="item.capacity"
+                        class="font-mono text-xs text-neutral-300"
+                    >
+                        {{ item.capacity }}
+                    </span>
+                    <span v-else class="text-xs text-neutral-500">
+                        Ilimitada
+                    </span>
+                </Cell>
+                <Cell class="text-xs text-neutral-300">
+                    {{ item.location || "-" }}
+                </Cell>
+                <Cell>
+                    <span
+                        v-if="item.enroll_in_site"
+                        class="inline-flex items-center text-xs font-medium text-emerald-400"
+                    >
+                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                        Sim
+                    </span>
+                    <span
+                        v-else
+                        class="inline-flex items-center text-xs text-neutral-500"
+                    >
+                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-neutral-600" />
+                        Não
+                    </span>
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/EventDay/Create.vue b/resources/js/Pages/CRUD/EventDay/Create.vue
index 05ec1436..8311260a 100644
--- a/resources/js/Pages/CRUD/EventDay/Create.vue
+++ b/resources/js/Pages/CRUD/EventDay/Create.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import type Edition from "@/Types/Edition";
 import { useForm } from "@inertiajs/vue3";
 import { computed } from "vue";
@@ -35,44 +34,46 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Novo Dia">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                v-model="form.edition_id"
-                type="select"
-                required
-                label="Edição"
-                :error-message="form.errors.edition_id"
+    <CRUDModal
+        title="Criar Dia de Evento"
+        name="eventDays"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <TextInput
+            v-model="form.edition_id"
+            type="select"
+            required
+            label="Edição"
+            :error-message="form.errors.edition_id"
+        >
+            <option
+                v-for="edition in $props.with.editions"
+                :key="edition.id"
+                :value="edition.id"
             >
-                <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
-                >
-                    {{ edition.name }}
-                </option>
-            </TextInput>
+                {{ edition.name }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                id="theme"
-                v-model="form.theme"
-                label="Tema"
-                type="text"
-                required
-                autofocus
-                :error-message="form.errors.theme"
-            />
+        <TextInput
+            id="theme"
+            v-model="form.theme"
+            label="Tema"
+            type="text"
+            required
+            autofocus
+            :error-message="form.errors.theme"
+        />
 
-            <TextInput
-                id="date"
-                v-model="form.date"
-                label="Data"
-                type="date"
-                required
-                :error-message="form.errors.date"
-            />
-
-            <PrimaryButton type="submit">Criar</PrimaryButton>
-        </form>
-    </CardLayout>
+        <TextInput
+            id="date"
+            v-model="form.date"
+            label="Data"
+            type="date"
+            required
+            :error-message="form.errors.date"
+        />
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/EventDay/Edit.vue b/resources/js/Pages/CRUD/EventDay/Edit.vue
index 48186760..049dc237 100644
--- a/resources/js/Pages/CRUD/EventDay/Edit.vue
+++ b/resources/js/Pages/CRUD/EventDay/Edit.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import type Edition from "@/Types/Edition";
 import type EventDay from "@/Types/EventDay";
 import { useForm } from "@inertiajs/vue3";
@@ -28,44 +27,46 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Novo Dia">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                v-model="form.edition_id"
-                type="select"
-                required
-                label="Edição"
-                :error-message="form.errors.edition_id"
+    <CRUDModal
+        title="Editar Dia de Evento"
+        name="eventDays"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <TextInput
+            v-model="form.edition_id"
+            type="select"
+            required
+            label="Edição"
+            :error-message="form.errors.edition_id"
+        >
+            <option
+                v-for="edition in $props.with.editions"
+                :key="edition.id"
+                :value="edition.id"
             >
-                <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
-                >
-                    {{ edition.name }}
-                </option>
-            </TextInput>
+                {{ edition.name }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                id="theme"
-                v-model="form.theme"
-                label="Tema"
-                type="text"
-                required
-                autofocus
-                :error-message="form.errors.theme"
-            />
+        <TextInput
+            id="theme"
+            v-model="form.theme"
+            label="Tema"
+            type="text"
+            required
+            autofocus
+            :error-message="form.errors.theme"
+        />
 
-            <TextInput
-                id="date"
-                v-model="form.date"
-                label="Data"
-                type="date"
-                required
-                :error-message="form.errors.date"
-            />
-
-            <PrimaryButton type="submit">Editar </PrimaryButton>
-        </form>
-    </CardLayout>
+        <TextInput
+            id="date"
+            v-model="form.date"
+            label="Data"
+            type="date"
+            required
+            :error-message="form.errors.date"
+        />
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/EventDay/Index.vue b/resources/js/Pages/CRUD/EventDay/Index.vue
index f133a921..42400156 100644
--- a/resources/js/Pages/CRUD/EventDay/Index.vue
+++ b/resources/js/Pages/CRUD/EventDay/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type Paginated from "@/Types/Paginated";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -27,30 +27,37 @@ const editions = computed<Record<number, string>>(() =>
 </script>
 
 <template>
-    <CRUDLayout
-        title="Event"
+    <CRUDView
+        title="Dias de Evento"
+        view="EventDay"
         :items="items"
         name="eventDays"
         :is-searchable="isSearchable"
     >
-        <template #heading>Events</template>
+        <template #heading>Dias de Evento</template>
 
         <template #header>
             <HeaderRow>
-                <Header filter-by="edition_id" :filter-values="editions"
-                    >Edição</Header
-                >
-                <Header sort-by="theme">Tema</Header>
+                <Header filter-by="edition_id" :filter-values="editions">
+                    Edição
+                </Header>
+                <Header sort-by="theme">Tema Principal</Header>
                 <Header sort-by="date">Data</Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
             <Row :item="item" name="eventDays">
-                <Cell>{{ editions[item.edition_id] }}</Cell>
-                <Cell>{{ item.theme }} </Cell>
-                <Cell>{{ item.date }} </Cell>
+                <Cell class="text-xs text-neutral-400">
+                    {{ editions[item.edition_id] ?? "-" }}
+                </Cell>
+                <Cell class="font-medium text-white">{{ item.theme }}</Cell>
+                <Cell>
+                    <span class="font-mono text-xs text-neutral-300">
+                        {{ item.date }}
+                    </span>
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/EventType/Create.vue b/resources/js/Pages/CRUD/EventType/Create.vue
index 46ef86c9..6d48eb40 100644
--- a/resources/js/Pages/CRUD/EventType/Create.vue
+++ b/resources/js/Pages/CRUD/EventType/Create.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import TextInput from "@/Components/Form/TextInput.vue";
@@ -15,19 +14,21 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Criar Novo Tipo de Evento">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome"
-                type="text"
-                required
-                autofocus
-                :error-message="form.errors.name"
-            />
-
-            <PrimaryButton type="submit">Criar</PrimaryButton>
-        </form>
-    </CardLayout>
+    <CRUDModal
+        title="Criar Tipo de Evento"
+        name="eventTypes"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome do Tipo de Evento"
+            type="text"
+            required
+            autofocus
+            :error-message="form.errors.name"
+        />
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/EventType/Edit.vue b/resources/js/Pages/CRUD/EventType/Edit.vue
index 56a1e385..fa464203 100644
--- a/resources/js/Pages/CRUD/EventType/Edit.vue
+++ b/resources/js/Pages/CRUD/EventType/Edit.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import TextInput from "@/Components/Form/TextInput.vue";
@@ -22,19 +21,21 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Editar Tipo de Evento">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome"
-                type="text"
-                required
-                autofocus
-                :error-message="form.errors.name"
-            />
-
-            <PrimaryButton type="submit">Editar</PrimaryButton>
-        </form>
-    </CardLayout>
+    <CRUDModal
+        title="Editar Tipo de Evento"
+        name="eventTypes"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome do Tipo de Evento"
+            type="text"
+            required
+            autofocus
+            :error-message="form.errors.name"
+        />
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/EventType/Index.vue b/resources/js/Pages/CRUD/EventType/Index.vue
index 167fe9b8..fb8a4b5e 100644
--- a/resources/js/Pages/CRUD/EventType/Index.vue
+++ b/resources/js/Pages/CRUD/EventType/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type Paginated from "@/Types/Paginated";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -16,24 +16,27 @@ defineProps<Props>();
 </script>
 
 <template>
-    <CRUDLayout
-        title="Event Types"
+    <CRUDView
+        title="Tipos de Evento"
+        view="EventType"
         :items="items"
         name="eventTypes"
         :is-searchable="isSearchable"
     >
-        <template #heading>Event Types</template>
+        <template #heading>Tipos de Evento</template>
 
         <template #header>
             <HeaderRow>
-                <Header sort-by="name">Tipo</Header>
+                <Header sort-by="name">Tipo / Categoria</Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
             <Row :item="item" name="eventTypes">
-                <Cell>{{ item.name }} </Cell>
+                <Cell class="font-medium text-white capitalize">
+                    {{ item.name }}
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/Product/Create.vue b/resources/js/Pages/CRUD/Product/Create.vue
index 9ecbdddf..d5ccf543 100644
--- a/resources/js/Pages/CRUD/Product/Create.vue
+++ b/resources/js/Pages/CRUD/Product/Create.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import ImageInput from "@/Components/Form/ImageInput.vue";
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import type Edition from "@/Types/Edition";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
@@ -29,31 +28,37 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Criar produto">
-        <form class="contents" @submit.prevent="submit">
-            <ImageInput
-                id="image"
-                v-model="form.image"
-                label="Imagem do produto"
-                class="self-stretch"
-                :error-message="form.errors.image"
-            />
+    <CRUDModal
+        title="Criar produto"
+        name="products"
+        :processing="form.processing"
+        max-width="lg"
+        @submit="submit"
+    >
+        <ImageInput
+            id="image"
+            v-model="form.image"
+            label="Imagem do produto"
+            class="self-stretch"
+            :error-message="form.errors.image"
+        />
 
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome"
-                type="text"
-                required
-                autofocus
-                autocomplete="name"
-                :error-message="form.errors.name"
-            />
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome"
+            type="text"
+            required
+            autofocus
+            autocomplete="name"
+            :error-message="form.errors.name"
+        />
 
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
                 id="price"
                 v-model="form.price"
-                label="Preço"
+                label="Preço (Pontos)"
                 type="number"
                 :error-message="form.errors.price"
             />
@@ -65,24 +70,22 @@ const submit = () => {
                 type="number"
                 :error-message="form.errors.stock"
             />
+        </div>
 
-            <TextInput
-                v-model="form.edition_id"
-                type="select"
-                required
-                label="Edição"
-                :error-message="form.errors.edition_id"
+        <TextInput
+            v-model="form.edition_id"
+            type="select"
+            required
+            label="Edição"
+            :error-message="form.errors.edition_id"
+        >
+            <option
+                v-for="edition in $props.with.editions"
+                :key="edition.id"
+                :value="edition.id"
             >
-                <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
-                >
-                    {{ edition.name }}
-                </option>
-            </TextInput>
-
-            <PrimaryButton type="submit">Criar</PrimaryButton>
-        </form>
-    </CardLayout>
+                {{ edition.name }}
+            </option>
+        </TextInput>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Product/Edit.vue b/resources/js/Pages/CRUD/Product/Edit.vue
index 23833a94..e4b7a281 100644
--- a/resources/js/Pages/CRUD/Product/Edit.vue
+++ b/resources/js/Pages/CRUD/Product/Edit.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import ImageInput from "@/Components/Form/ImageInput.vue";
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import type Edition from "@/Types/Edition";
 import type Product from "@/Types/Product";
 import { useForm } from "@inertiajs/vue3";
@@ -32,32 +31,38 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Editar produto">
-        <form class="contents" @submit.prevent="submit">
-            <ImageInput
-                id="image"
-                v-model="form.image"
-                :initial-preview="product.image_product_url"
-                label="Imagem do produto"
-                class="self-stretch"
-                :error-message="form.errors.image"
-            />
+    <CRUDModal
+        title="Editar produto"
+        name="products"
+        :processing="form.processing"
+        max-width="lg"
+        @submit="submit"
+    >
+        <ImageInput
+            id="image"
+            v-model="form.image"
+            :initial-preview="product.image_product_url"
+            label="Imagem do produto"
+            class="self-stretch"
+            :error-message="form.errors.image"
+        />
 
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome"
-                type="text"
-                required
-                autofocus
-                autocomplete="name"
-                :error-message="form.errors.name"
-            />
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome"
+            type="text"
+            required
+            autofocus
+            autocomplete="name"
+            :error-message="form.errors.name"
+        />
 
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
                 id="price"
                 v-model="form.price"
-                label="Preço"
+                label="Preço (Pontos)"
                 type="number"
                 :error-message="form.errors.price"
             />
@@ -69,24 +74,22 @@ const submit = () => {
                 type="number"
                 :error-message="form.errors.stock"
             />
+        </div>
 
-            <TextInput
-                v-model="form.edition_id"
-                type="select"
-                required
-                label="Edição"
-                :error-message="form.errors.edition_id"
+        <TextInput
+            v-model="form.edition_id"
+            type="select"
+            required
+            label="Edição"
+            :error-message="form.errors.edition_id"
+        >
+            <option
+                v-for="edition in $props.with.editions"
+                :key="edition.id"
+                :value="edition.id"
             >
-                <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
-                >
-                    {{ edition.name }}
-                </option>
-            </TextInput>
-
-            <PrimaryButton type="submit">Editar</PrimaryButton>
-        </form>
-    </CardLayout>
+                {{ edition.name }}
+            </option>
+        </TextInput>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Product/Index.vue b/resources/js/Pages/CRUD/Product/Index.vue
index 8988e83b..c064583d 100644
--- a/resources/js/Pages/CRUD/Product/Index.vue
+++ b/resources/js/Pages/CRUD/Product/Index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type Product from "@/Types/Product";
 import type Paginated from "@/Types/Paginated";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -27,32 +27,54 @@ const editions = computed<Record<number, string>>(() =>
 </script>
 
 <template>
-    <CRUDLayout
-        title="Product"
+    <CRUDView
+        title="Produtos"
+        view="Product"
         :items="items"
         name="products"
         :is-searchable="isSearchable"
     >
-        <template #heading>Produtos</template>
+        <template #heading>Produtos da Loja</template>
 
         <template #header>
             <HeaderRow>
                 <Header sort-by="name">Nome</Header>
                 <Header sort-by="price">Preço</Header>
-                <Header sort-by="stock">Stock</Header>
-                <Header filter-by="edition_id" :filter-values="editions"
-                    >Edição</Header
-                >
+                <Header sort-by="stock">Stock Disponível</Header>
+                <Header filter-by="edition_id" :filter-values="editions">
+                    Edição
+                </Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
             <Row :item="item" name="products">
-                <Cell>{{ item.name }}</Cell>
-                <Cell>{{ item.price }}</Cell>
-                <Cell>{{ item.stock }}</Cell>
-                <Cell>{{ editions[item.edition_id] }}</Cell>
+                <Cell class="font-medium text-white">{{ item.name }}</Cell>
+                <Cell>
+                    <span class="font-mono text-xs font-semibold text-neutral-200">
+                        {{ item.price }}
+                    </span>
+                    <span class="ml-1 text-xs text-neutral-500">pts</span>
+                </Cell>
+                <Cell>
+                    <span
+                        v-if="item.stock === 0"
+                        class="text-xs font-medium text-red-400"
+                    >
+                        Esgotado (0 un.)
+                    </span>
+                    <span
+                        v-else
+                        class="font-mono text-xs text-neutral-300"
+                    >
+                        {{ item.stock }}
+                        <span class="text-neutral-500 font-sans">un.</span>
+                    </span>
+                </Cell>
+                <Cell class="text-xs text-neutral-400">
+                    {{ editions[item.edition_id] ?? "-" }}
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/Quest/Create.vue b/resources/js/Pages/CRUD/Quest/Create.vue
index f56eb2fc..487fbb17 100644
--- a/resources/js/Pages/CRUD/Quest/Create.vue
+++ b/resources/js/Pages/CRUD/Quest/Create.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import type Edition from "@/Types/Edition";
 import type Event from "@/Types/Event";
 import type Stand from "@/Types/Stand";
@@ -43,80 +42,82 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Criar quest">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome"
-                type="text"
-                required
-                autofocus
-                autocomplete="name"
-                :error-message="form.errors.name"
-            />
+    <CRUDModal
+        title="Criar quest"
+        name="quests"
+        :processing="form.processing"
+        max-width="lg"
+        @submit="submit"
+    >
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome da Quest"
+            type="text"
+            required
+            autofocus
+            autocomplete="name"
+            :error-message="form.errors.name"
+        />
 
-            <TextInput
-                v-model="form.category"
-                type="select"
-                required
-                label="Categoria"
-                :error-message="form.errors.category"
-            >
-                <option value="company">Empresa</option>
-                <option value="talk">Palestra</option>
-                <option value="workshop">Workshop</option>
-                <option value="milestone">Milestone</option>
-                <option value="teambuilding">Team Building</option>
-            </TextInput>
-
-            <TextInput
-                v-model="form.requirement"
-                type="select"
-                required
-                label="Requisito"
-                :error-message="form.errors.requirement"
-            >
-                <optgroup label="Bancas">
-                    <option
-                        v-for="stand in $props.with.stands"
-                        :key="'stand;' + stand.id"
-                        :value="'stand;' + stand.id"
-                    >
-                        {{ stands[stand.id] }}
-                    </option>
-                </optgroup>
-                <optgroup label="Eventos">
-                    <option
-                        v-for="event in $props.with.events"
-                        :key="'event;' + event.id"
-                        :value="'event;' + event.id"
-                    >
-                        {{ event.name }}
-                    </option>
-                </optgroup>
-                <optgroup label="Geral">
-                    <option key="general;0" value="general;0">Geral</option>
-                </optgroup>
-            </TextInput>
+        <TextInput
+            v-model="form.category"
+            type="select"
+            required
+            label="Categoria"
+            :error-message="form.errors.category"
+        >
+            <option value="company">Empresa</option>
+            <option value="talk">Palestra</option>
+            <option value="workshop">Workshop</option>
+            <option value="milestone">Milestone</option>
+            <option value="teambuilding">Team Building</option>
+        </TextInput>
 
-            <TextInput
-                v-model="form.edition_id"
-                type="select"
-                required
-                label="Edição"
-                :error-message="form.errors.edition_id"
-            >
+        <TextInput
+            v-model="form.requirement"
+            type="select"
+            required
+            label="Requisito"
+            :error-message="form.errors.requirement"
+        >
+            <optgroup label="Bancas">
                 <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
+                    v-for="stand in $props.with.stands"
+                    :key="'stand;' + stand.id"
+                    :value="'stand;' + stand.id"
                 >
-                    {{ edition.name }}
+                    {{ stands[stand.id] }}
                 </option>
-            </TextInput>
+            </optgroup>
+            <optgroup label="Eventos">
+                <option
+                    v-for="event in $props.with.events"
+                    :key="'event;' + event.id"
+                    :value="'event;' + event.id"
+                >
+                    {{ event.name }}
+                </option>
+            </optgroup>
+            <optgroup label="Geral">
+                <option key="general;0" value="general;0">Geral</option>
+            </optgroup>
+        </TextInput>
 
-            <PrimaryButton type="submit">Criar</PrimaryButton>
-        </form>
-    </CardLayout>
+        <TextInput
+            v-model="form.edition_id"
+            type="select"
+            required
+            label="Edição"
+            :error-message="form.errors.edition_id"
+        >
+            <option
+                v-for="edition in $props.with.editions"
+                :key="edition.id"
+                :value="edition.id"
+            >
+                {{ edition.name }}
+            </option>
+        </TextInput>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Quest/Edit.vue b/resources/js/Pages/CRUD/Quest/Edit.vue
index 5c81ee6a..73ce78e2 100644
--- a/resources/js/Pages/CRUD/Quest/Edit.vue
+++ b/resources/js/Pages/CRUD/Quest/Edit.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import type Edition from "@/Types/Edition";
 import type Event from "@/Types/Event";
 import type Quest from "@/Types/Quest";
@@ -54,80 +53,82 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Editar quest">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome"
-                type="text"
-                required
-                autofocus
-                autocomplete="name"
-                :error-message="form.errors.name"
-            />
+    <CRUDModal
+        title="Editar quest"
+        name="quests"
+        :processing="form.processing"
+        max-width="lg"
+        @submit="submit"
+    >
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome da Quest"
+            type="text"
+            required
+            autofocus
+            autocomplete="name"
+            :error-message="form.errors.name"
+        />
 
-            <TextInput
-                v-model="form.category"
-                type="select"
-                required
-                label="Categoria"
-                :error-message="form.errors.category"
-            >
-                <option value="company">Empresa</option>
-                <option value="talk">Palestra</option>
-                <option value="workshop">Workshop</option>
-                <option value="milestone">Milestone</option>
-                <option value="teambuilding">Team Building</option>
-            </TextInput>
-
-            <TextInput
-                v-model="form.requirement"
-                type="select"
-                required
-                label="Requisito"
-                :error-message="form.errors.requirement"
-            >
-                <optgroup label="Bancas">
-                    <option
-                        v-for="stand in $props.with.stands"
-                        :key="'stand;' + stand.id"
-                        :value="'stand;' + stand.id"
-                    >
-                        {{ stands[stand.id] }}
-                    </option>
-                </optgroup>
-                <optgroup label="Eventos">
-                    <option
-                        v-for="event in $props.with.events"
-                        :key="'event;' + event.id"
-                        :value="'event;' + event.id"
-                    >
-                        {{ event.name }}
-                    </option>
-                </optgroup>
-                <optgroup label="Geral">
-                    <option key="general;0" value="general;0">Geral</option>
-                </optgroup>
-            </TextInput>
+        <TextInput
+            v-model="form.category"
+            type="select"
+            required
+            label="Categoria"
+            :error-message="form.errors.category"
+        >
+            <option value="company">Empresa</option>
+            <option value="talk">Palestra</option>
+            <option value="workshop">Workshop</option>
+            <option value="milestone">Milestone</option>
+            <option value="teambuilding">Team Building</option>
+        </TextInput>
 
-            <TextInput
-                v-model="form.edition_id"
-                type="select"
-                required
-                label="Edição"
-                :error-message="form.errors.edition_id"
-            >
+        <TextInput
+            v-model="form.requirement"
+            type="select"
+            required
+            label="Requisito"
+            :error-message="form.errors.requirement"
+        >
+            <optgroup label="Bancas">
                 <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
+                    v-for="stand in $props.with.stands"
+                    :key="'stand;' + stand.id"
+                    :value="'stand;' + stand.id"
                 >
-                    {{ edition.name }}
+                    {{ stands[stand.id] }}
                 </option>
-            </TextInput>
+            </optgroup>
+            <optgroup label="Eventos">
+                <option
+                    v-for="event in $props.with.events"
+                    :key="'event;' + event.id"
+                    :value="'event;' + event.id"
+                >
+                    {{ event.name }}
+                </option>
+            </optgroup>
+            <optgroup label="Geral">
+                <option key="general;0" value="general;0">Geral</option>
+            </optgroup>
+        </TextInput>
 
-            <PrimaryButton type="submit">Editar</PrimaryButton>
-        </form>
-    </CardLayout>
+        <TextInput
+            v-model="form.edition_id"
+            type="select"
+            required
+            label="Edição"
+            :error-message="form.errors.edition_id"
+        >
+            <option
+                v-for="edition in $props.with.editions"
+                :key="edition.id"
+                :value="edition.id"
+            >
+                {{ edition.name }}
+            </option>
+        </TextInput>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Quest/Index.vue b/resources/js/Pages/CRUD/Quest/Index.vue
index 3293ac30..9a162f56 100644
--- a/resources/js/Pages/CRUD/Quest/Index.vue
+++ b/resources/js/Pages/CRUD/Quest/Index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type Quest from "@/Types/Quest";
 import type Paginated from "@/Types/Paginated";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -27,28 +27,31 @@ const editions = computed<Record<number, string>>(() =>
 </script>
 
 <template>
-    <CRUDLayout
-        title="Quest"
+    <CRUDView
+        title="Tarefas"
+        view="Quest"
         :items="items"
         name="quests"
         :is-searchable="isSearchable"
     >
-        <template #heading>Quests</template>
+        <template #heading>Tarefas & Missões</template>
 
         <template #header>
             <HeaderRow>
-                <Header sort-by="name">Nome</Header>
-                <Header filter-by="edition_id" :filter-values="editions"
-                    >Edição</Header
-                >
+                <Header sort-by="name">Nome da Tarefa</Header>
+                <Header filter-by="edition_id" :filter-values="editions">
+                    Edição
+                </Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
             <Row :item="item" name="quests">
-                <Cell>{{ item.name }}</Cell>
-                <Cell>{{ editions[item.edition_id] }}</Cell>
+                <Cell class="font-medium text-white">{{ item.name }}</Cell>
+                <Cell class="text-xs text-neutral-400">
+                    {{ editions[item.edition_id] ?? "-" }}
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/Slot/Create.vue b/resources/js/Pages/CRUD/Slot/Create.vue
index 25053daf..14e83b80 100644
--- a/resources/js/Pages/CRUD/Slot/Create.vue
+++ b/resources/js/Pages/CRUD/Slot/Create.vue
@@ -2,8 +2,7 @@
 import type Quest from "@/Types/Quest";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import CardLayout from "@/Layouts/CardLayout.vue";
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
 import ImageInput from "@/Components/Form/ImageInput.vue";
 
@@ -29,20 +28,35 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Slots">
-        <form class="contents" @submit.prevent="submit">
-            <ImageInput
-                id="image"
-                v-model="form.image"
-                label="Imagem do slot"
-                class="self-stretch"
-                :error-message="form.errors.image"
-            />
+    <CRUDModal
+        title="Criar Encaixe de Tarefas"
+        name="slots"
+        :processing="form.processing"
+        max-width="lg"
+        @submit="submit"
+    >
+        <ImageInput
+            id="image"
+            v-model="form.image"
+            label="Imagem do slot"
+            class="self-stretch"
+            :error-message="form.errors.image"
+        />
+
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome do Encaixe"
+            type="text"
+            required
+            :error-message="form.errors.name"
+        />
 
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
                 id="total_quests"
                 v-model="form.total_quests"
-                label="Numero mínimo de tarefas"
+                label="Número mínimo de tarefas"
                 type="number"
                 :error-message="form.errors.total_quests"
             />
@@ -50,37 +64,27 @@ const submit = () => {
             <TextInput
                 id="points"
                 v-model="form.points"
-                label="Pontos"
+                label="Pontos atribuídos"
                 type="number"
                 :error-message="form.errors.points"
             />
+        </div>
 
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome"
-                type="text"
-                :error-message="form.errors.name"
-            />
-
-            <TextInput
-                id="quests[]"
-                v-model="form.quests"
-                type="select"
-                label="Tarefas"
-                multiple
-                :error-message="form.errors.quests"
+        <TextInput
+            id="quests[]"
+            v-model="form.quests"
+            type="select"
+            label="Tarefas Associadas"
+            multiple
+            :error-message="form.errors.quests"
+        >
+            <option
+                v-for="quest in $props.with.quests"
+                :key="quest.id"
+                :value="quest.id"
             >
-                <option
-                    v-for="quest in $props.with.quests"
-                    :key="quest.id"
-                    :value="quest.id"
-                >
-                    {{ quest.name }}
-                </option>
-            </TextInput>
-
-            <PrimaryButton type="submit">Criar</PrimaryButton>
-        </form>
-    </CardLayout>
+                {{ quest.name }}
+            </option>
+        </TextInput>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Slot/Edit.vue b/resources/js/Pages/CRUD/Slot/Edit.vue
index 0684c574..4cd937e0 100644
--- a/resources/js/Pages/CRUD/Slot/Edit.vue
+++ b/resources/js/Pages/CRUD/Slot/Edit.vue
@@ -2,8 +2,7 @@
 import type Quest from "@/Types/Quest";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import CardLayout from "@/Layouts/CardLayout.vue";
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
 import type Slot from "@/Types/Slot";
 import ImageInput from "@/Components/Form/ImageInput.vue";
@@ -32,21 +31,36 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Slots">
-        <form class="contents" @submit.prevent="submit">
-            <ImageInput
-                id="image"
-                v-model="form.image"
-                :initial-preview="slot.image_slot_url"
-                label="Imagem do slot"
-                class="self-stretch"
-                :error-message="form.errors.image"
-            />
+    <CRUDModal
+        title="Editar Encaixe de Tarefas"
+        name="slots"
+        :processing="form.processing"
+        max-width="lg"
+        @submit="submit"
+    >
+        <ImageInput
+            id="image"
+            v-model="form.image"
+            :initial-preview="slot.image_slot_url"
+            label="Imagem do slot"
+            class="self-stretch"
+            :error-message="form.errors.image"
+        />
+
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome do Encaixe"
+            type="text"
+            required
+            :error-message="form.errors.name"
+        />
 
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
                 id="total_quests"
                 v-model="form.total_quests"
-                label="Numero mínimo de tarefas"
+                label="Número mínimo de tarefas"
                 type="number"
                 :error-message="form.errors.total_quests"
             />
@@ -54,37 +68,27 @@ const submit = () => {
             <TextInput
                 id="points"
                 v-model="form.points"
-                label="Pontos"
+                label="Pontos atribuídos"
                 type="number"
                 :error-message="form.errors.points"
             />
+        </div>
 
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome"
-                type="text"
-                :error-message="form.errors.name"
-            />
-
-            <TextInput
-                id="quests[]"
-                v-model="form.quests"
-                type="select"
-                label="Tarefas"
-                multiple
-                :error-message="form.errors.quests"
+        <TextInput
+            id="quests[]"
+            v-model="form.quests"
+            type="select"
+            label="Tarefas Associadas"
+            multiple
+            :error-message="form.errors.quests"
+        >
+            <option
+                v-for="quest in $props.with.quests"
+                :key="quest.id"
+                :value="quest.id"
             >
-                <option
-                    v-for="quest in $props.with.quests"
-                    :key="quest.id"
-                    :value="quest.id"
-                >
-                    {{ quest.name }}
-                </option>
-            </TextInput>
-
-            <PrimaryButton type="submit">Criar</PrimaryButton>
-        </form>
-    </CardLayout>
+                {{ quest.name }}
+            </option>
+        </TextInput>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Slot/Index.vue b/resources/js/Pages/CRUD/Slot/Index.vue
index abe2ff38..7a86e7ab 100644
--- a/resources/js/Pages/CRUD/Slot/Index.vue
+++ b/resources/js/Pages/CRUD/Slot/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type Paginated from "@/Types/Paginated";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -25,35 +25,47 @@ const quests = computed<number[]>(() =>
 </script>
 
 <template>
-    <CRUDLayout
-        title="Slots"
+    <CRUDView
+        title="Encaixes de Tarefas"
+        view="Slot"
         :items="items"
         name="slots"
         :is-searchable="isSearchable"
     >
-        <template #heading
-            ><span class="italic">Slots</span> de tarefas</template
-        >
+        <template #heading>Encaixes de Tarefas (Slots)</template>
 
         <template #header>
             <HeaderRow>
-                <Header sort-by="name">Nome</Header>
-                <Header sort-by="total_quests">Número mínimo de tarefas</Header>
-                <Header sort-by="points">Pontos</Header>
-                <Header>Tarefas</Header>
+                <Header sort-by="name">Nome do Encaixe</Header>
+                <Header sort-by="total_quests">Mínimo de Tarefas</Header>
+                <Header sort-by="points">Pontuação</Header>
+                <Header>Tarefas Associadas</Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
             <Row :item="item" name="slots">
-                <Cell>{{ item.name }}</Cell>
-                <Cell>{{ item.total_quests }}</Cell>
-                <Cell>{{ item.points }}</Cell>
-                <Cell>{{
-                    item.quests?.filter((q: Quest) => quests.includes(q.id))
-                        .length ?? "N/A"
-                }}</Cell>
+                <Cell class="font-medium text-white">{{ item.name }}</Cell>
+                <Cell>
+                    <span class="font-mono text-xs text-neutral-300">
+                        {{ item.total_quests }}
+                    </span>
+                </Cell>
+                <Cell>
+                    <span class="font-mono text-xs font-semibold text-neutral-200">
+                        {{ item.points }}
+                    </span>
+                    <span class="ml-1 text-xs text-neutral-500">pts</span>
+                </Cell>
+                <Cell>
+                    <span class="font-mono text-xs text-neutral-400">
+                        {{
+                            item.quests?.filter((q: Quest) => quests.includes(q.id))
+                                .length ?? 0
+                        }}
+                    </span>
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/Sponsor/Create.vue b/resources/js/Pages/CRUD/Sponsor/Create.vue
index 3343b801..18ff2b92 100644
--- a/resources/js/Pages/CRUD/Sponsor/Create.vue
+++ b/resources/js/Pages/CRUD/Sponsor/Create.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import type Company from "@/Types/Company";
 import type Edition from "@/Types/Edition";
 import type SponsorTier from "@/Types/SponsorTier";
@@ -30,57 +29,60 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Atribuir Patrocínio">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                v-model="form.edition_id"
-                type="select"
-                required
-                label="Edição"
-                :error-message="form.errors.edition_id"
+    <CRUDModal
+        title="Atribuir Patrocínio"
+        name="sponsors"
+        :processing="form.processing"
+        max-width="md"
+        submit-label="Atribuir"
+        @submit="submit"
+    >
+        <TextInput
+            v-model="form.edition_id"
+            type="select"
+            required
+            label="Edição"
+            :error-message="form.errors.edition_id"
+        >
+            <option
+                v-for="edition in $props.with.editions"
+                :key="edition.id"
+                :value="edition.id"
             >
-                <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
-                >
-                    {{ edition.name }}
-                </option>
-            </TextInput>
+                {{ edition.name }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                v-model="form.company_id"
-                type="select"
-                required
-                label="Empresa"
-                :error-message="form.errors.company_id"
+        <TextInput
+            v-model="form.company_id"
+            type="select"
+            required
+            label="Empresa"
+            :error-message="form.errors.company_id"
+        >
+            <option
+                v-for="company in $props.with.companies"
+                :key="company.id"
+                :value="company.id"
             >
-                <option
-                    v-for="company in $props.with.companies"
-                    :key="company.id"
-                    :value="company.id"
-                >
-                    {{ company.user?.name ?? company.id }}
-                </option>
-            </TextInput>
+                {{ company.user?.name ?? company.id }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                v-model="form.sponsor_tier_id"
-                type="select"
-                required
-                label="Tipo de patrocínio"
-                :error-message="form.errors.sponsor_tier_id"
+        <TextInput
+            v-model="form.sponsor_tier_id"
+            type="select"
+            required
+            label="Tipo de patrocínio"
+            :error-message="form.errors.sponsor_tier_id"
+        >
+            <option
+                v-for="tier in $props.with.tiers"
+                :key="tier.id"
+                :value="tier.id"
             >
-                <option
-                    v-for="tier in $props.with.tiers"
-                    :key="tier.id"
-                    :value="tier.id"
-                >
-                    {{ tier.name }}
-                </option>
-            </TextInput>
-
-            <PrimaryButton type="submit">Atribuir</PrimaryButton>
-        </form>
-    </CardLayout>
+                {{ tier.name }}
+            </option>
+        </TextInput>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Sponsor/Edit.vue b/resources/js/Pages/CRUD/Sponsor/Edit.vue
index 0d369e0f..1194b46d 100644
--- a/resources/js/Pages/CRUD/Sponsor/Edit.vue
+++ b/resources/js/Pages/CRUD/Sponsor/Edit.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import type Company from "@/Types/Company";
 import type Edition from "@/Types/Edition";
 import type Sponsor from "@/Types/Sponsor";
@@ -32,57 +31,59 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Editar Patrocínio">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                v-model="form.edition_id"
-                type="select"
-                required
-                label="Edição"
-                :error-message="form.errors.edition_id"
+    <CRUDModal
+        title="Editar Patrocínio"
+        name="sponsors"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <TextInput
+            v-model="form.edition_id"
+            type="select"
+            required
+            label="Edição"
+            :error-message="form.errors.edition_id"
+        >
+            <option
+                v-for="edition in $props.with.editions"
+                :key="edition.id"
+                :value="edition.id"
             >
-                <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
-                >
-                    {{ edition.name }}
-                </option>
-            </TextInput>
+                {{ edition.name }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                v-model="form.company_id"
-                type="select"
-                required
-                label="Empresa"
-                :error-message="form.errors.company_id"
+        <TextInput
+            v-model="form.company_id"
+            type="select"
+            required
+            label="Empresa"
+            :error-message="form.errors.company_id"
+        >
+            <option
+                v-for="company in $props.with.companies"
+                :key="company.id"
+                :value="company.id"
             >
-                <option
-                    v-for="company in $props.with.companies"
-                    :key="company.id"
-                    :value="company.id"
-                >
-                    {{ company.user?.name }}
-                </option>
-            </TextInput>
+                {{ company.user?.name }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                v-model="form.sponsor_tier_id"
-                type="select"
-                required
-                label="Tipo de patrocínio"
-                :error-message="form.errors.sponsor_tier_id"
+        <TextInput
+            v-model="form.sponsor_tier_id"
+            type="select"
+            required
+            label="Tipo de patrocínio"
+            :error-message="form.errors.sponsor_tier_id"
+        >
+            <option
+                v-for="tier in $props.with.tiers"
+                :key="tier.id"
+                :value="tier.id"
             >
-                <option
-                    v-for="tier in $props.with.tiers"
-                    :key="tier.id"
-                    :value="tier.id"
-                >
-                    {{ tier.name }}
-                </option>
-            </TextInput>
-
-            <PrimaryButton type="submit">Atribuir</PrimaryButton>
-        </form>
-    </CardLayout>
+                {{ tier.name }}
+            </option>
+        </TextInput>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Sponsor/Index.vue b/resources/js/Pages/CRUD/Sponsor/Index.vue
index bea9e75f..5fcb6a29 100644
--- a/resources/js/Pages/CRUD/Sponsor/Index.vue
+++ b/resources/js/Pages/CRUD/Sponsor/Index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type Paginated from "@/Types/Paginated";
 import type Sponsor from "@/Types/Sponsor";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -42,41 +42,48 @@ const tiers = computed<Record<number, string>>(() =>
     Object.fromEntries(
         props.with.tiers.map((tier) => [
             tier.id,
-            `${editions.value[tier.edition_id]} - ${tier.name}`,
+            `${editions.value[tier.edition_id] ?? ""} - ${tier.name}`,
         ]),
     ),
 );
 </script>
 
 <template>
-    <CRUDLayout
-        title="Sponsor"
+    <CRUDView
+        title="Patrocinadores"
+        view="Sponsor"
         :items="items"
         name="sponsors"
         :is-searchable="isSearchable"
     >
-        <template #heading>Patrocínios</template>
+        <template #heading>Patrocinadores</template>
 
         <template #header>
             <HeaderRow>
-                <Header filter-by="edition_id" :filter-values="editions"
-                    >Edição</Header
-                >
-                <Header filter-by="company_id" :filter-values="companies"
-                    >Empresa</Header
-                >
-                <Header filter-by="tier" :filter-values="tiers"
-                    >Tipo de patrocínio</Header
-                >
+                <Header filter-by="edition_id" :filter-values="editions">
+                    Edição
+                </Header>
+                <Header filter-by="company_id" :filter-values="companies">
+                    Empresa
+                </Header>
+                <Header filter-by="tier" :filter-values="tiers">
+                    Nível de Patrocínio
+                </Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
             <Row name="sponsors" :item="item">
-                <Cell>{{ editions[item.edition_id] }}</Cell>
-                <Cell>{{ companies[item.company_id] }}</Cell>
-                <Cell>{{ tiers[item.sponsor_tier_id] }}</Cell>
+                <Cell class="text-xs text-neutral-400">
+                    {{ editions[item.edition_id] ?? "-" }}
+                </Cell>
+                <Cell class="font-medium text-white">
+                    {{ companies[item.company_id] ?? `Empresa #${item.company_id}` }}
+                </Cell>
+                <Cell class="text-xs text-neutral-300">
+                    {{ tiers[item.sponsor_tier_id] ?? "-" }}
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/SponsorTier/Create.vue b/resources/js/Pages/CRUD/SponsorTier/Create.vue
index 4fe7a108..7c1a9b10 100644
--- a/resources/js/Pages/CRUD/SponsorTier/Create.vue
+++ b/resources/js/Pages/CRUD/SponsorTier/Create.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
+import Checkbox from "@/Components/Form/Checkbox.vue";
 import type Edition from "@/Types/Edition";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import Checkbox from "@/Components/Form/Checkbox.vue";
 
 interface Props {
     with: {
@@ -18,7 +17,7 @@ defineProps<Props>();
 const form = useForm({
     edition_id: "",
     name: "",
-    color: "",
+    color: "#6366f1",
     rank: "0",
     canSeeCV: false,
     canSeeLinkedin: false,
@@ -31,35 +30,41 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Atribuir Patrocínio">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                v-model="form.edition_id"
-                type="select"
-                required
-                autofocus
-                label="Edição"
-                :error-message="form.errors.edition_id"
+    <CRUDModal
+        title="Criar Nível de Patrocínio"
+        name="sponsorTiers"
+        :processing="form.processing"
+        max-width="lg"
+        @submit="submit"
+    >
+        <TextInput
+            v-model="form.edition_id"
+            type="select"
+            required
+            autofocus
+            label="Edição"
+            :error-message="form.errors.edition_id"
+        >
+            <option
+                v-for="edition in $props.with.editions"
+                :key="edition.id"
+                :value="edition.id"
             >
-                <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
-                >
-                    {{ edition.name }}
-                </option>
-            </TextInput>
+                {{ edition.name }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome"
-                type="text"
-                required
-                autocomplete="name"
-                :error-message="form.errors.name"
-            />
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome do Nível"
+            type="text"
+            required
+            autocomplete="name"
+            :error-message="form.errors.name"
+        />
 
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
                 id="color"
                 v-model="form.color"
@@ -72,46 +77,43 @@ const submit = () => {
             <TextInput
                 id="rank"
                 v-model="form.rank"
-                label="Posição"
+                label="Posição (Ordem)"
                 type="number"
                 required
                 :error-message="form.errors.rank"
             />
+        </div>
 
-            <label for="canSeeCV" class="flex flex-row items-center gap-6">
-                Consegue ver os CVs dos participantes?
-                <Checkbox
-                    id="canSeeCV"
-                    v-model="form.canSeeCV"
-                    :checked="false"
-                    value="false"
-                />
-            </label>
+        <div class="flex flex-col gap-2.5 pt-1">
+            <div
+                class="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.02] px-4 py-3"
+            >
+                <span class="text-xs font-medium text-neutral-300">
+                    Consegue ver os CVs dos participantes?
+                </span>
+                <Checkbox id="canSeeCV" v-model:checked="form.canSeeCV" />
+            </div>
 
-            <label
-                for="canSeeLinkedin"
-                class="flex flex-row items-center gap-6"
+            <div
+                class="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.02] px-4 py-3"
             >
-                Consegue ver o LinkedIn dos participantes?
+                <span class="text-xs font-medium text-neutral-300">
+                    Consegue ver o LinkedIn dos participantes?
+                </span>
                 <Checkbox
                     id="canSeeLinkedin"
-                    v-model="form.canSeeLinkedin"
-                    :checked="false"
-                    value="false"
+                    v-model:checked="form.canSeeLinkedin"
                 />
-            </label>
+            </div>
 
-            <label for="canSeeAll" class="flex flex-row items-center gap-6">
-                Consegue ver todos os participantes (ou só quem visita a banca)?
-                <Checkbox
-                    id="canSeeAll"
-                    v-model="form.canSeeAll"
-                    :checked="false"
-                    value="false"
-                />
-            </label>
-
-            <PrimaryButton type="submit">Atribuir</PrimaryButton>
-        </form>
-    </CardLayout>
+            <div
+                class="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.02] px-4 py-3"
+            >
+                <span class="text-xs font-medium text-neutral-300">
+                    Consegue ver todos os participantes?
+                </span>
+                <Checkbox id="canSeeAll" v-model:checked="form.canSeeAll" />
+            </div>
+        </div>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/SponsorTier/Edit.vue b/resources/js/Pages/CRUD/SponsorTier/Edit.vue
index 13d43864..c9499cd1 100644
--- a/resources/js/Pages/CRUD/SponsorTier/Edit.vue
+++ b/resources/js/Pages/CRUD/SponsorTier/Edit.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
+import Checkbox from "@/Components/Form/Checkbox.vue";
 import type Edition from "@/Types/Edition";
+import type SponsorTier from "@/Types/SponsorTier";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
-import Checkbox from "@/Components/Form/Checkbox.vue";
-import type SponsorTier from "@/Types/SponsorTier";
 
 interface Props {
     with: {
@@ -33,35 +32,41 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Atribuir Patrocínio">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                v-model="form.edition_id"
-                type="select"
-                required
-                autofocus
-                label="Edição"
-                :error-message="form.errors.edition_id"
+    <CRUDModal
+        title="Editar Nível de Patrocínio"
+        name="sponsorTiers"
+        :processing="form.processing"
+        max-width="lg"
+        @submit="submit"
+    >
+        <TextInput
+            v-model="form.edition_id"
+            type="select"
+            required
+            autofocus
+            label="Edição"
+            :error-message="form.errors.edition_id"
+        >
+            <option
+                v-for="edition in $props.with.editions"
+                :key="edition.id"
+                :value="edition.id"
             >
-                <option
-                    v-for="edition in $props.with.editions"
-                    :key="edition.id"
-                    :value="edition.id"
-                >
-                    {{ edition.name }}
-                </option>
-            </TextInput>
+                {{ edition.name }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                id="name"
-                v-model="form.name"
-                label="Nome"
-                type="text"
-                required
-                autocomplete="name"
-                :error-message="form.errors.name"
-            />
+        <TextInput
+            id="name"
+            v-model="form.name"
+            label="Nome do Nível"
+            type="text"
+            required
+            autocomplete="name"
+            :error-message="form.errors.name"
+        />
 
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
                 id="color"
                 v-model="form.color"
@@ -74,34 +79,43 @@ const submit = () => {
             <TextInput
                 id="rank"
                 v-model="form.rank"
-                label="Posição"
+                label="Posição (Ordem)"
                 type="number"
                 required
                 :error-message="form.errors.rank"
             />
+        </div>
 
-            <label for="canSeeCV" class="flex flex-row items-center gap-6">
-                Consegue ver os CVs dos participantes?
+        <div class="flex flex-col gap-2.5 pt-1">
+            <div
+                class="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.02] px-4 py-3"
+            >
+                <span class="text-xs font-medium text-neutral-300">
+                    Consegue ver os CVs dos participantes?
+                </span>
                 <Checkbox id="canSeeCV" v-model:checked="form.canSeeCV" />
-            </label>
+            </div>
 
-            <label
-                for="canSeeLinkedin"
-                class="flex flex-row items-center gap-6"
+            <div
+                class="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.02] px-4 py-3"
             >
-                Consegue ver o LinkedIn dos participantes?
+                <span class="text-xs font-medium text-neutral-300">
+                    Consegue ver o LinkedIn dos participantes?
+                </span>
                 <Checkbox
                     id="canSeeLinkedin"
                     v-model:checked="form.canSeeLinkedin"
                 />
-            </label>
+            </div>
 
-            <label for="canSeeAll" class="flex flex-row items-center gap-6">
-                Consegue ver todos os participantes?
+            <div
+                class="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.02] px-4 py-3"
+            >
+                <span class="text-xs font-medium text-neutral-300">
+                    Consegue ver todos os participantes?
+                </span>
                 <Checkbox id="canSeeAll" v-model:checked="form.canSeeAll" />
-            </label>
-
-            <PrimaryButton type="submit">Atribuir</PrimaryButton>
-        </form>
-    </CardLayout>
+            </div>
+        </div>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/SponsorTier/Index.vue b/resources/js/Pages/CRUD/SponsorTier/Index.vue
index d5022530..bc3464d2 100644
--- a/resources/js/Pages/CRUD/SponsorTier/Index.vue
+++ b/resources/js/Pages/CRUD/SponsorTier/Index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type Paginated from "@/Types/Paginated";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -27,44 +27,94 @@ const editions = computed<Record<number, string>>(() =>
 </script>
 
 <template>
-    <CRUDLayout
-        title="Sponsor Tiers"
+    <CRUDView
+        title="Níveis de Patrocínio"
+        view="SponsorTier"
         :items="items"
         name="sponsorTiers"
         :is-searchable="isSearchable"
     >
-        <template #heading
-            ><span class="italic">Tier</span> de patrocínio</template
-        >
+        <template #heading>Níveis de Patrocínio</template>
 
         <template #header>
             <HeaderRow>
-                <Header filter-by="edition_id" :filter-values="editions"
-                    >Edição</Header
-                >
+                <Header filter-by="edition_id" :filter-values="editions">
+                    Edição
+                </Header>
                 <Header sort-by="name">Nome</Header>
-
                 <Header>Cor</Header>
-                <Header>Pode ver CVs</Header>
-                <Header>Pode ver Linkedin</Header>
-                <Header>Pode ver de todos os participantes</Header>
+                <Header>Ver CVs</Header>
+                <Header>Ver LinkedIn</Header>
+                <Header>Todos Participantes</Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
             <Row name="sponsorTiers" :item="item">
-                <Cell>{{ editions[item.edition_id] }}</Cell>
-                <Cell>{{ item.name }}</Cell>
+                <Cell class="text-xs text-neutral-400">
+                    {{ editions[item.edition_id] ?? "-" }}
+                </Cell>
+                <Cell class="font-medium text-white">{{ item.name }}</Cell>
+                <Cell>
+                    <div class="flex items-center gap-2">
+                        <span
+                            class="inline-block h-3.5 w-3.5 rounded-full border border-white/20"
+                            :style="{ backgroundColor: item.color }"
+                        />
+                        <span class="font-mono text-xs text-neutral-400">
+                            {{ item.color }}
+                        </span>
+                    </div>
+                </Cell>
                 <Cell>
                     <span
-                        class="inline-block h-4 w-4 rounded-full"
-                        :style="{ backgroundColor: item.color }"
-                    ></span>
+                        v-if="item.canSeeCV"
+                        class="inline-flex items-center text-xs font-medium text-emerald-400"
+                    >
+                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                        Sim
+                    </span>
+                    <span
+                        v-else
+                        class="inline-flex items-center text-xs text-neutral-500"
+                    >
+                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-neutral-600" />
+                        Não
+                    </span>
+                </Cell>
+                <Cell>
+                    <span
+                        v-if="item.canSeeLinkedin"
+                        class="inline-flex items-center text-xs font-medium text-emerald-400"
+                    >
+                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                        Sim
+                    </span>
+                    <span
+                        v-else
+                        class="inline-flex items-center text-xs text-neutral-500"
+                    >
+                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-neutral-600" />
+                        Não
+                    </span>
+                </Cell>
+                <Cell>
+                    <span
+                        v-if="item.canSeeAll"
+                        class="inline-flex items-center text-xs font-medium text-emerald-400"
+                    >
+                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                        Sim
+                    </span>
+                    <span
+                        v-else
+                        class="inline-flex items-center text-xs text-neutral-500"
+                    >
+                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-neutral-600" />
+                        Não
+                    </span>
                 </Cell>
-                <Cell>{{ item.canSeeCV ? "✓" : "❌" }}</Cell>
-                <Cell>{{ item.canSeeLinkedin ? "✓" : "❌" }}</Cell>
-                <Cell>{{ item.canSeeAll ? "✓" : "❌" }}</Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/Staff/Create.vue b/resources/js/Pages/CRUD/Staff/Create.vue
index e92da50c..af857d08 100644
--- a/resources/js/Pages/CRUD/Staff/Create.vue
+++ b/resources/js/Pages/CRUD/Staff/Create.vue
@@ -2,8 +2,7 @@
 import type Participant from "@/Types/Participant";
 import type Edition from "@/Types/Edition";
 import type Department from "@/Types/Department";
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import Checkbox from "@/Components/Form/Checkbox.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
@@ -38,52 +37,52 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Adicionar Staff">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                v-model="form.department_id"
-                type="select"
-                required
-                label="Departamento"
-                :error-message="form.errors.department_id"
+    <CRUDModal
+        title="Criar Membro de Equipa"
+        name="staff"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <TextInput
+            v-model="form.department_id"
+            type="select"
+            required
+            label="Departamento"
+            :error-message="form.errors.department_id"
+        >
+            <option
+                v-for="department in $props.with.departments"
+                :key="department.id"
+                :value="department.id"
             >
-                <option
-                    v-for="department in $props.with.departments"
-                    :key="department.id"
-                    :value="department.id"
-                >
-                    {{ department.name }}
-                    - {{ editions[department.edition_id] }}
-                </option>
-            </TextInput>
+                {{ department.name }} - {{ editions[department.edition_id] }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                v-model="form.participant_id"
-                type="select"
-                required
-                label="Participante"
-                :error-message="form.errors.participant_id"
+        <TextInput
+            v-model="form.participant_id"
+            type="select"
+            required
+            label="Participante"
+            :error-message="form.errors.participant_id"
+        >
+            <option
+                v-for="participant in $props.with.participants"
+                :key="participant.id"
+                :value="participant.id"
             >
-                <option
-                    v-for="participant in $props.with.participants"
-                    :key="participant.id"
-                    :value="participant.id"
-                >
-                    {{ participant.user?.name }} - {{ participant.user?.id }}
-                </option>
-            </TextInput>
+                {{ participant.user?.name ?? `Membro #${participant.id}` }}
+            </option>
+        </TextInput>
 
-            <label for="coordinator" class="flex flex-row items-center gap-6">
-                Coordenador
-                <Checkbox
-                    id="coordinator"
-                    v-model="form.coordinator"
-                    :checked="false"
-                    value="false"
-                />
-            </label>
-
-            <PrimaryButton type="submit">Adicionar</PrimaryButton>
-        </form>
-    </CardLayout>
+        <div
+            class="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.02] px-4 py-3"
+        >
+            <span class="text-xs font-medium text-neutral-300">
+                Coordenador do Departamento?
+            </span>
+            <Checkbox id="coordinator" v-model:checked="form.coordinator" />
+        </div>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Staff/Edit.vue b/resources/js/Pages/CRUD/Staff/Edit.vue
index dcce8f25..828fe1a3 100644
--- a/resources/js/Pages/CRUD/Staff/Edit.vue
+++ b/resources/js/Pages/CRUD/Staff/Edit.vue
@@ -3,8 +3,7 @@ import type Participant from "@/Types/Participant";
 import type Staff from "@/Types/Staff";
 import type Edition from "@/Types/Edition";
 import type Department from "@/Types/Department";
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import Checkbox from "@/Components/Form/Checkbox.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
@@ -40,47 +39,52 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Editar Staff">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                v-model="form.department_id"
-                type="select"
-                required
-                label="Departamento"
-                :error-message="form.errors.department_id"
+    <CRUDModal
+        title="Editar Membro de Equipa"
+        name="staff"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <TextInput
+            v-model="form.department_id"
+            type="select"
+            required
+            label="Departamento"
+            :error-message="form.errors.department_id"
+        >
+            <option
+                v-for="department in $props.with.departments"
+                :key="department.id"
+                :value="department.id"
             >
-                <option
-                    v-for="department in $props.with.departments"
-                    :key="department.id"
-                    :value="department.id"
-                >
-                    {{ department.name }}
-                    - {{ editions[department.edition_id] }}
-                </option>
-            </TextInput>
+                {{ department.name }} - {{ editions[department.edition_id] }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                v-model="form.participant_id"
-                type="select"
-                required
-                label="Participante"
-                :error-message="form.errors.participant_id"
+        <TextInput
+            v-model="form.participant_id"
+            type="select"
+            required
+            label="Participante"
+            :error-message="form.errors.participant_id"
+        >
+            <option
+                v-for="participant in $props.with.participants"
+                :key="participant.id"
+                :value="participant.id"
             >
-                <option
-                    v-for="participant in $props.with.participants"
-                    :key="participant.id"
-                    :value="participant.id"
-                >
-                    {{ participant.user?.name }} - {{ participant.user?.id }}
-                </option>
-            </TextInput>
+                {{ participant.user?.name ?? `Membro #${participant.id}` }}
+            </option>
+        </TextInput>
 
-            <label for="coordinator" class="flex flex-row items-center gap-6">
-                Coordenador
-                <Checkbox id="coordinator" v-model:checked="form.coordinator" />
-            </label>
-
-            <PrimaryButton type="submit">Editar</PrimaryButton>
-        </form>
-    </CardLayout>
+        <div
+            class="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.02] px-4 py-3"
+        >
+            <span class="text-xs font-medium text-neutral-300">
+                Coordenador do Departamento?
+            </span>
+            <Checkbox id="coordinator" v-model:checked="form.coordinator" />
+        </div>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Staff/Index.vue b/resources/js/Pages/CRUD/Staff/Index.vue
index ae897842..247a4e37 100644
--- a/resources/js/Pages/CRUD/Staff/Index.vue
+++ b/resources/js/Pages/CRUD/Staff/Index.vue
@@ -4,7 +4,7 @@ import type Participant from "@/Types/Participant";
 import type Edition from "@/Types/Edition";
 import type Department from "@/Types/Department";
 import type Staff from "@/Types/Staff";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -36,43 +36,64 @@ const participants = computed<Record<number, string>>(() =>
     Object.fromEntries(
         props.with.participants.map((participant) => [
             participant.id,
-            participant.user?.name ?? "",
+            participant.user?.name ?? `Membro #${participant.id}`,
         ]),
     ),
 );
 </script>
 
 <template>
-    <CRUDLayout
-        title="Staff"
+    <CRUDView
+        title="Membros da Equipa"
+        view="Staff"
         :items="items"
         name="staff"
         :is-searchable="isSearchable"
     >
-        <template #heading>Staff</template>
+        <template #heading>Equipa & Colaboradores</template>
 
         <template #header>
             <HeaderRow>
-                <Header filter-by="participant_id" :filter-values="participants"
-                    >Participante</Header
-                >
-                <Header filter-by="department_id" :filter-values="departments"
-                    >Departamento</Header
-                >
+                <Header filter-by="participant_id" :filter-values="participants">
+                    Membro
+                </Header>
+                <Header filter-by="department_id" :filter-values="departments">
+                    Departamento
+                </Header>
                 <Header
                     filter-by="coordinator"
-                    :filter-values="{ true: '✓', false: '❌' }"
-                    >Coordenador</Header
+                    :filter-values="{ true: 'Sim', false: 'Não' }"
                 >
+                    Coordenador
+                </Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
             <Row name="staff" :item="item">
-                <Cell>{{ participants[item.participant_id] }}</Cell>
-                <Cell>{{ departments[item.department_id] }}</Cell>
-                <Cell>{{ item.coordinator ? "✓" : "❌" }}</Cell>
+                <Cell class="font-medium text-white">
+                    {{ participants[item.participant_id] ?? `Membro #${item.participant_id}` }}
+                </Cell>
+                <Cell class="text-xs text-neutral-400">
+                    {{ departments[item.department_id] ?? "-" }}
+                </Cell>
+                <Cell>
+                    <span
+                        v-if="item.coordinator"
+                        class="inline-flex items-center text-xs font-medium text-emerald-400"
+                    >
+                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                        Sim
+                    </span>
+                    <span
+                        v-else
+                        class="inline-flex items-center text-xs text-neutral-500"
+                    >
+                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-neutral-600" />
+                        Não
+                    </span>
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/Stand/Create.vue b/resources/js/Pages/CRUD/Stand/Create.vue
index cdc9298b..3af9af53 100644
--- a/resources/js/Pages/CRUD/Stand/Create.vue
+++ b/resources/js/Pages/CRUD/Stand/Create.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import type EventDay from "@/Types/EventDay";
 import type Sponsor from "@/Types/Sponsor";
 import { useForm } from "@inertiajs/vue3";
@@ -27,41 +26,44 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Associar Banca">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                v-model="form.event_day_id"
-                type="select"
-                required
-                label="Dia do evento"
-                :error-message="form.errors.event_day_id"
+    <CRUDModal
+        title="Associar Banca"
+        name="stands"
+        :processing="form.processing"
+        max-width="md"
+        submit-label="Associar"
+        @submit="submit"
+    >
+        <TextInput
+            v-model="form.event_day_id"
+            type="select"
+            required
+            label="Dia do evento"
+            :error-message="form.errors.event_day_id"
+        >
+            <option
+                v-for="event_day in $props.with.eventDays"
+                :key="event_day.id"
+                :value="event_day.id"
             >
-                <option
-                    v-for="event_day in $props.with.eventDays"
-                    :key="event_day.id"
-                    :value="event_day.id"
-                >
-                    {{ event_day.date }}
-                </option>
-            </TextInput>
+                {{ event_day.date }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                v-model="form.sponsor_id"
-                type="select"
-                required
-                label="Empresa"
-                :error-message="form.errors.sponsor_id"
+        <TextInput
+            v-model="form.sponsor_id"
+            type="select"
+            required
+            label="Empresa"
+            :error-message="form.errors.sponsor_id"
+        >
+            <option
+                v-for="sponsor in $props.with.sponsors"
+                :key="sponsor.id"
+                :value="sponsor.id"
             >
-                <option
-                    v-for="sponsor in $props.with.sponsors"
-                    :key="sponsor.id"
-                    :value="sponsor.id"
-                >
-                    {{ sponsor.company?.user?.name ?? sponsor.company?.id }}
-                </option>
-            </TextInput>
-
-            <PrimaryButton type="submit">Associar</PrimaryButton>
-        </form>
-    </CardLayout>
+                {{ sponsor.company?.user?.name ?? sponsor.company?.id }}
+            </option>
+        </TextInput>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Stand/Edit.vue b/resources/js/Pages/CRUD/Stand/Edit.vue
index cde415a0..7f89f0ae 100644
--- a/resources/js/Pages/CRUD/Stand/Edit.vue
+++ b/resources/js/Pages/CRUD/Stand/Edit.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import type EventDay from "@/Types/EventDay";
 import type Sponsor from "@/Types/Sponsor";
 import type Stand from "@/Types/Stand";
@@ -29,41 +28,43 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Associar Banca">
-        <form class="contents" @submit.prevent="submit">
-            <TextInput
-                v-model="form.event_day_id"
-                type="select"
-                required
-                label="Dia do evento"
-                :error-message="form.errors.event_day_id"
+    <CRUDModal
+        title="Editar Banca"
+        name="stands"
+        :processing="form.processing"
+        max-width="md"
+        @submit="submit"
+    >
+        <TextInput
+            v-model="form.event_day_id"
+            type="select"
+            required
+            label="Dia do evento"
+            :error-message="form.errors.event_day_id"
+        >
+            <option
+                v-for="event_day in $props.with.eventDays"
+                :key="event_day.id"
+                :value="event_day.id"
             >
-                <option
-                    v-for="event_day in $props.with.eventDays"
-                    :key="event_day.id"
-                    :value="event_day.id"
-                >
-                    {{ event_day.date }}
-                </option>
-            </TextInput>
+                {{ event_day.date }}
+            </option>
+        </TextInput>
 
-            <TextInput
-                v-model="form.sponsor_id"
-                type="select"
-                required
-                label="Empresa"
-                :error-message="form.errors.sponsor_id"
+        <TextInput
+            v-model="form.sponsor_id"
+            type="select"
+            required
+            label="Empresa"
+            :error-message="form.errors.sponsor_id"
+        >
+            <option
+                v-for="sponsor in $props.with.sponsors"
+                :key="sponsor.id"
+                :value="sponsor.id"
             >
-                <option
-                    v-for="sponsor in $props.with.sponsors"
-                    :key="sponsor.id"
-                    :value="sponsor.id"
-                >
-                    {{ sponsor.company?.user?.name ?? sponsor.company?.id }}
-                </option>
-            </TextInput>
-
-            <PrimaryButton type="submit">Associar</PrimaryButton>
-        </form>
-    </CardLayout>
+                {{ sponsor.company?.user?.name ?? sponsor.company?.id }}
+            </option>
+        </TextInput>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/Stand/Index.vue b/resources/js/Pages/CRUD/Stand/Index.vue
index 11fccc6d..b2d34fa2 100644
--- a/resources/js/Pages/CRUD/Stand/Index.vue
+++ b/resources/js/Pages/CRUD/Stand/Index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type Paginated from "@/Types/Paginated";
 import type Sponsor from "@/Types/Sponsor";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -25,7 +25,7 @@ const eventDays = computed<Record<number, string>>(() =>
     Object.fromEntries(
         props.with.eventDays.map((eventDay) => [
             eventDay.id,
-            eventDay.date.toString(),
+            `${eventDay.date} (${eventDay.theme})`,
         ]),
     ),
 );
@@ -34,35 +34,42 @@ const sponsors = computed<Record<number, string>>(() =>
     Object.fromEntries(
         props.with.sponsors.map((sponsor) => [
             sponsor.id,
-            sponsor.company?.user?.name ?? "",
+            sponsor.company?.user?.name ?? `Patrocinador #${sponsor.id}`,
         ]),
     ),
 );
 </script>
 
 <template>
-    <CRUDLayout
-        title="Stands"
+    <CRUDView
+        title="Bancas"
+        view="Stand"
         :items="items"
         name="stands"
         :is-searchable="isSearchable"
     >
-        <template #heading>Bancas</template>
+        <template #heading>Bancas de Empresas</template>
 
         <template #header>
             <HeaderRow>
-                <Header filter-by="sponsor_id" :filter-values="sponsors"
-                    >Empresa</Header
-                >
-                <Header sort-by="name">Data</Header>
+                <Header filter-by="sponsor_id" :filter-values="sponsors">
+                    Empresa
+                </Header>
+                <Header filter-by="event_day_id" :filter-values="eventDays">
+                    Dia do Evento
+                </Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
-            <Row name="sponsors" :item="item">
-                <Cell>{{ sponsors[item.sponsor_id] }}</Cell>
-                <Cell>{{ eventDays[item.event_day_id] }}</Cell>
+            <Row name="stands" :item="item">
+                <Cell class="font-medium text-white">
+                    {{ sponsors[item.sponsor_id] ?? `Empresa #${item.sponsor_id}` }}
+                </Cell>
+                <Cell class="text-xs text-neutral-400">
+                    {{ eventDays[item.event_day_id] ?? "-" }}
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/Pages/CRUD/User/Create.vue b/resources/js/Pages/CRUD/User/Create.vue
index 7995ec7d..a3c8ab86 100644
--- a/resources/js/Pages/CRUD/User/Create.vue
+++ b/resources/js/Pages/CRUD/User/Create.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import ImageInput from "@/Components/Form/ImageInput.vue";
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import { useForm } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 
@@ -30,16 +29,22 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Criar utilizador">
-        <form class="contents" @submit.prevent="submit">
-            <ImageInput
-                id="photo"
-                v-model="form.photo"
-                label="Foto de perfil"
-                class="self-stretch"
-                :error-message="form.errors.photo"
-            />
-
+    <CRUDModal
+        title="Criar utilizador"
+        name="users"
+        :processing="form.processing"
+        max-width="2xl"
+        @submit="submit"
+    >
+        <ImageInput
+            id="photo"
+            v-model="form.photo"
+            label="Foto de perfil"
+            class="self-stretch"
+            :error-message="form.errors.photo"
+        />
+
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
                 id="name"
                 v-model="form.name"
@@ -60,31 +65,34 @@ const submit = () => {
                 autocomplete="email"
                 :error-message="form.errors.email"
             />
-
-            <TextInput
-                v-model="form.type"
-                type="select"
-                label="Tipo de utilizador"
-                required
-                :error-message="form.errors.type"
-            >
-                <option value="participant">Participante</option>
-                <option value="company">Empresa</option>
-                <option value="speaker">Orador</option>
-                <option value="admin">Administrador</option>
-            </TextInput>
-
+        </div>
+
+        <TextInput
+            v-model="form.type"
+            type="select"
+            label="Tipo de utilizador"
+            required
+            :error-message="form.errors.type"
+        >
+            <option value="participant">Participante</option>
+            <option value="company">Empresa</option>
+            <option value="speaker">Orador</option>
+            <option value="admin">Administrador</option>
+        </TextInput>
+
+        <div
+            v-if="form.type === 'speaker'"
+            class="grid grid-cols-1 gap-4 sm:grid-cols-2"
+        >
             <TextInput
-                v-if="form.type === 'speaker'"
                 id="title"
                 v-model="form.title"
-                label="Título"
+                label="Título / Cargo"
                 type="text"
                 :error-message="form.errors.title"
             />
 
             <TextInput
-                v-if="form.type === 'speaker'"
                 id="displayName"
                 v-model="form.display_name"
                 label="Nome a apresentar"
@@ -93,87 +101,93 @@ const submit = () => {
             />
 
             <TextInput
-                v-if="form.type === 'company' || form.type === 'speaker'"
-                id="description"
-                v-model="form.description"
-                label="Descrição"
-                type="textarea"
-                :error-message="form.errors.description"
-            />
-
-            <TextInput
-                v-if="form.type === 'speaker'"
                 id="organization"
                 v-model="form.organization"
-                label="Organização"
+                label="Organização / Empresa"
                 type="text"
+                class="sm:col-span-2"
                 :error-message="form.errors.organization"
             />
-
-            <details v-if="form.type !== 'admin'" class="self-stretch">
-                <summary>Redes sociais</summary>
-
-                <div class="mt-4 flex flex-col gap-4">
-                    <TextInput
-                        id="public_email"
-                        v-model="form.public_email"
-                        label="Public Email"
-                        type="email"
-                        autocomplete="email"
-                        :error-message="form.errors.public_email"
-                    />
-
-                    <TextInput
-                        id="facebook"
-                        v-model="form.facebook"
-                        label="Facebook"
-                        type="url"
-                        :error-message="form.errors.facebook"
-                    />
-
-                    <TextInput
-                        id=".github"
-                        v-model="form.github"
-                        label="GitHub"
-                        type="url"
-                        :error-message="form.errors.github"
-                    />
-
-                    <TextInput
-                        id="instagram"
-                        v-model="form.instagram"
-                        label="Instagram"
-                        type="url"
-                        :error-message="form.errors.instagram"
-                    />
-
-                    <TextInput
-                        id="linkedin"
-                        v-model="form.linkedin"
-                        label="Linkedin"
-                        type="url"
-                        :error-message="form.errors.linkedin"
-                    />
-
-                    <TextInput
-                        id="twitter"
-                        v-model="form.twitter"
-                        label="Twitter"
-                        type="url"
-                        :error-message="form.errors.twitter"
-                    />
-
-                    <TextInput
-                        id="website"
-                        v-model="form.website"
-                        label="Website"
-                        type="url"
-                        :error-message="form.errors.website"
-                    />
-                </div>
-            </details>
-
-            <PrimaryButton type="submit">Criar</PrimaryButton>
-        </form>
-    </CardLayout>
+        </div>
+
+        <TextInput
+            v-if="form.type === 'company' || form.type === 'speaker'"
+            id="description"
+            v-model="form.description"
+            label="Descrição / Biografia"
+            type="textarea"
+            :error-message="form.errors.description"
+        />
+
+        <details
+            v-if="form.type && form.type !== 'admin'"
+            class="group rounded-2xl border border-white/10 bg-white/[0.02] p-4 transition-colors hover:border-white/20"
+        >
+            <summary
+                class="cursor-pointer font-mono text-xs font-semibold uppercase tracking-wider text-neutral-400 transition-colors group-open:text-white"
+            >
+                Redes sociais & Contactos públicos
+            </summary>
+
+            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <TextInput
+                    id="public_email"
+                    v-model="form.public_email"
+                    label="Email Público"
+                    type="email"
+                    autocomplete="email"
+                    :error-message="form.errors.public_email"
+                />
+
+                <TextInput
+                    id="website"
+                    v-model="form.website"
+                    label="Website"
+                    type="url"
+                    :error-message="form.errors.website"
+                />
+
+                <TextInput
+                    id="linkedin"
+                    v-model="form.linkedin"
+                    label="LinkedIn"
+                    type="url"
+                    :error-message="form.errors.linkedin"
+                />
+
+                <TextInput
+                    id="github"
+                    v-model="form.github"
+                    label="GitHub"
+                    type="url"
+                    :error-message="form.errors.github"
+                />
+
+                <TextInput
+                    id="instagram"
+                    v-model="form.instagram"
+                    label="Instagram"
+                    type="url"
+                    :error-message="form.errors.instagram"
+                />
+
+                <TextInput
+                    id="facebook"
+                    v-model="form.facebook"
+                    label="Facebook"
+                    type="url"
+                    :error-message="form.errors.facebook"
+                />
+
+                <TextInput
+                    id="twitter"
+                    v-model="form.twitter"
+                    label="Twitter / X"
+                    type="url"
+                    class="sm:col-span-2"
+                    :error-message="form.errors.twitter"
+                />
+            </div>
+        </details>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/User/Edit.vue b/resources/js/Pages/CRUD/User/Edit.vue
index 50496b21..15504dac 100644
--- a/resources/js/Pages/CRUD/User/Edit.vue
+++ b/resources/js/Pages/CRUD/User/Edit.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import ImageInput from "@/Components/Form/ImageInput.vue";
-import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
 import TextInput from "@/Components/Form/TextInput.vue";
-import CardLayout from "@/Layouts/CardLayout.vue";
+import CRUDModal from "@/Components/CRUD/CRUDModal.vue";
 import {
     type User,
     isCompany as checkIsCompany,
@@ -27,7 +26,10 @@ const form = useForm({
     name: user.name,
     email: user.email,
     type: (user.usertype_type.split("\\").pop() ?? "").toLowerCase() as
-        "participant" | "company" | "speaker" | "admin",
+        | "participant"
+        | "company"
+        | "speaker"
+        | "admin",
     title: isSpeaker ? (user.usertype?.title ?? "") : "",
     display_name: isSpeaker ? (user.usertype?.display_name ?? "") : "",
     description:
@@ -49,17 +51,23 @@ const submit = () => {
 </script>
 
 <template>
-    <CardLayout title="Editar utilizador">
-        <form class="contents" @submit.prevent="submit">
-            <ImageInput
-                id="photo"
-                v-model="form.photo"
-                :initial-preview="user.profile_photo_url"
-                label="Foto de perfil"
-                class="self-stretch"
-                :error-message="form.errors.photo"
-            />
-
+    <CRUDModal
+        title="Editar utilizador"
+        name="users"
+        :processing="form.processing"
+        max-width="2xl"
+        @submit="submit"
+    >
+        <ImageInput
+            id="photo"
+            v-model="form.photo"
+            :initial-preview="user.profile_photo_url"
+            label="Foto de perfil"
+            class="self-stretch"
+            :error-message="form.errors.photo"
+        />
+
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <TextInput
                 id="name"
                 v-model="form.name"
@@ -80,32 +88,34 @@ const submit = () => {
                 autocomplete="email"
                 :error-message="form.errors.email"
             />
-
-            <TextInput
-                v-model="form.type"
-                type="select"
-                label="Tipo de utilizador"
-                required
-                disabled
-                :error-message="form.errors.type"
-            >
-                <option value="participant">Participante</option>
-                <option value="company">Empresa</option>
-                <option value="speaker">Orador</option>
-                <option value="admin">Administrador</option>
-            </TextInput>
-
+        </div>
+
+        <TextInput
+            v-model="form.type"
+            type="select"
+            label="Tipo de utilizador"
+            required
+            :error-message="form.errors.type"
+        >
+            <option value="participant">Participante</option>
+            <option value="company">Empresa</option>
+            <option value="speaker">Orador</option>
+            <option value="admin">Administrador</option>
+        </TextInput>
+
+        <div
+            v-if="form.type === 'speaker'"
+            class="grid grid-cols-1 gap-4 sm:grid-cols-2"
+        >
             <TextInput
-                v-if="form.type === 'speaker'"
                 id="title"
                 v-model="form.title"
-                label="Título"
+                label="Título / Cargo"
                 type="text"
                 :error-message="form.errors.title"
             />
 
             <TextInput
-                v-if="form.type === 'speaker'"
                 id="displayName"
                 v-model="form.display_name"
                 label="Nome a apresentar"
@@ -114,87 +124,93 @@ const submit = () => {
             />
 
             <TextInput
-                v-if="form.type === 'company' || form.type === 'speaker'"
-                id="description"
-                v-model="form.description"
-                label="Descrição"
-                type="textarea"
-                :error-message="form.errors.description"
-            />
-
-            <TextInput
-                v-if="form.type === 'speaker'"
                 id="organization"
                 v-model="form.organization"
-                label="Organização"
+                label="Organização / Empresa"
                 type="text"
+                class="sm:col-span-2"
                 :error-message="form.errors.organization"
             />
-
-            <details v-if="form.type !== 'admin'" class="self-stretch">
-                <summary>Redes sociais</summary>
-
-                <div class="mt-4 flex flex-col gap-4">
-                    <TextInput
-                        id="public_email"
-                        v-model="form.public_email"
-                        label="Public Email"
-                        type="email"
-                        autocomplete="email"
-                        :error-message="form.errors.public_email"
-                    />
-
-                    <TextInput
-                        id="facebook"
-                        v-model="form.facebook"
-                        label="Facebook"
-                        type="url"
-                        :error-message="form.errors.facebook"
-                    />
-
-                    <TextInput
-                        id="github"
-                        v-model="form.github"
-                        label="GitHub"
-                        type="url"
-                        :error-message="form.errors.github"
-                    />
-
-                    <TextInput
-                        id="instagram"
-                        v-model="form.instagram"
-                        label="Instagram"
-                        type="url"
-                        :error-message="form.errors.instagram"
-                    />
-
-                    <TextInput
-                        id="linkedin"
-                        v-model="form.linkedin"
-                        label="Linkedin"
-                        type="url"
-                        :error-message="form.errors.linkedin"
-                    />
-
-                    <TextInput
-                        id="twitter"
-                        v-model="form.twitter"
-                        label="Twitter"
-                        type="url"
-                        :error-message="form.errors.twitter"
-                    />
-
-                    <TextInput
-                        id="website"
-                        v-model="form.website"
-                        label="Website"
-                        type="url"
-                        :error-message="form.errors.website"
-                    />
-                </div>
-            </details>
-
-            <PrimaryButton type="submit">Editar</PrimaryButton>
-        </form>
-    </CardLayout>
+        </div>
+
+        <TextInput
+            v-if="form.type === 'company' || form.type === 'speaker'"
+            id="description"
+            v-model="form.description"
+            label="Descrição / Biografia"
+            type="textarea"
+            :error-message="form.errors.description"
+        />
+
+        <details
+            v-if="form.type && form.type !== 'admin'"
+            class="group rounded-2xl border border-white/10 bg-white/[0.02] p-4 transition-colors hover:border-white/20"
+        >
+            <summary
+                class="cursor-pointer font-mono text-xs font-semibold uppercase tracking-wider text-neutral-400 transition-colors group-open:text-white"
+            >
+                Redes sociais & Contactos públicos
+            </summary>
+
+            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <TextInput
+                    id="public_email"
+                    v-model="form.public_email"
+                    label="Email Público"
+                    type="email"
+                    autocomplete="email"
+                    :error-message="form.errors.public_email"
+                />
+
+                <TextInput
+                    id="website"
+                    v-model="form.website"
+                    label="Website"
+                    type="url"
+                    :error-message="form.errors.website"
+                />
+
+                <TextInput
+                    id="linkedin"
+                    v-model="form.linkedin"
+                    label="LinkedIn"
+                    type="url"
+                    :error-message="form.errors.linkedin"
+                />
+
+                <TextInput
+                    id="github"
+                    v-model="form.github"
+                    label="GitHub"
+                    type="url"
+                    :error-message="form.errors.github"
+                />
+
+                <TextInput
+                    id="instagram"
+                    v-model="form.instagram"
+                    label="Instagram"
+                    type="url"
+                    :error-message="form.errors.instagram"
+                />
+
+                <TextInput
+                    id="facebook"
+                    v-model="form.facebook"
+                    label="Facebook"
+                    type="url"
+                    :error-message="form.errors.facebook"
+                />
+
+                <TextInput
+                    id="twitter"
+                    v-model="form.twitter"
+                    label="Twitter / X"
+                    type="url"
+                    class="sm:col-span-2"
+                    :error-message="form.errors.twitter"
+                />
+            </div>
+        </details>
+    </CRUDModal>
 </template>
diff --git a/resources/js/Pages/CRUD/User/Index.vue b/resources/js/Pages/CRUD/User/Index.vue
index 33948024..0b1ec374 100644
--- a/resources/js/Pages/CRUD/User/Index.vue
+++ b/resources/js/Pages/CRUD/User/Index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { User } from "@/Types/User";
 import type Paginated from "@/Types/Paginated";
-import CRUDLayout from "@/Layouts/CRUDLayout.vue";
+import CRUDView from "@/Components/CRUD/CRUDView.vue";
 import HeaderRow from "@/Components/CRUD/HeaderRow.vue";
 import Row from "@/Components/CRUD/Row.vue";
 import Cell from "@/Components/CRUD/Cell.vue";
@@ -16,17 +16,18 @@ interface Props {
 
 defineProps<Props>();
 
-const usertypeMap = {
+const usertypeMap: Record<string, string> = {
     "App\\Models\\Admin": "Administrador",
     "App\\Models\\Participant": "Participante",
     "App\\Models\\Company": "Empresa",
     "App\\Models\\Speaker": "Orador",
-} as const satisfies Record<User["usertype_type"], string>;
+};
 </script>
 
 <template>
-    <CRUDLayout
-        title="User"
+    <CRUDView
+        title="Utilizadores"
+        view="User"
         :items="items"
         name="users"
         :is-searchable="isSearchable"
@@ -37,22 +38,29 @@ const usertypeMap = {
             <HeaderRow>
                 <Header sort-by="name">Nome</Header>
                 <Header sort-by="email">Email</Header>
-                <Header filter-by="usertype_type" :filter-values="usertypeMap"
-                    >Tipo</Header
-                >
+                <Header filter-by="usertype_type" :filter-values="usertypeMap">
+                    Tipo de Perfil
+                </Header>
             </HeaderRow>
         </template>
 
         <template #row="{ item }">
             <Row name="users" :item="item">
-                <Cell
-                    ><Link :href="route('user.profile', { user: item })">{{
-                        item.name
-                    }}</Link></Cell
-                >
-                <Cell>{{ item.email }}</Cell>
-                <Cell>{{ usertypeMap[item.usertype_type] }}</Cell>
+                <Cell class="font-medium">
+                    <Link
+                        :href="route('user.profile', { user: item })"
+                        class="text-white transition-colors hover:text-neutral-300 hover:underline"
+                    >
+                        {{ item.name }}
+                    </Link>
+                </Cell>
+                <Cell class="font-mono text-xs text-neutral-400">
+                    {{ item.email }}
+                </Cell>
+                <Cell class="text-xs text-neutral-300">
+                    {{ usertypeMap[item.usertype_type] || "Utilizador" }}
+                </Cell>
             </Row>
         </template>
-    </CRUDLayout>
+    </CRUDView>
 </template>
diff --git a/resources/js/messages.ts b/resources/js/messages.ts
index 6e232db8..5bce73aa 100644
--- a/resources/js/messages.ts
+++ b/resources/js/messages.ts
@@ -47,6 +47,7 @@ const messages = {
             company: "Empresa | Empresas",
             competition: "Competição | Competições",
             competitionTeam: "Equipa de Competição | Equipas de Competição",
+            competitionPrize: "Prémio de Competição | Prémios de Competição",
             compettionPrize: "Prémio de Competição | Prémios de Competição",
             department: "Departamento | Departamentos",
             edition: "Edição | Edições",
diff --git a/routes/web.php b/routes/web.php
index ae27a992..dd915964 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\AdminDashboardController;
 use App\Http\Controllers\CompetitionController;
 use App\Http\Controllers\CompetitionCRUDController;
 use App\Http\Controllers\CompetitionPrizeCRUDController;
@@ -29,7 +30,6 @@
 use App\Http\Controllers\UserController;
 use App\Http\Controllers\UserCRUDController;
 use Illuminate\Support\Facades\Route;
-use Inertia\Inertia;
 
 /*
 |--------------------------------------------------------------------------
@@ -103,9 +103,7 @@ function () {
                     '/sponsorTiers' => SponsorTierCRUDController::class,
                 ]);
 
-                Route::name('index')->get('/', function () {
-                    return Inertia::render('Admin');
-                });
+                Route::name('index')->get('/', AdminDashboardController::class);
             });
 
         Route::prefix('user')->group(function () {

From 6ba1cec809efd24b5a2661ae2207c258d1c7ebcb Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Sun, 13 Sep 2026 11:40:44 +0100
Subject: [PATCH 29/33] feat: landing page

---
 resources/css/app.css                         |  15 +
 .../js/Components/Home/AboutUsSection.vue     | 105 ++++
 .../js/Components/Home/EventCtaSection.vue    | 171 +++++++
 .../Home/SpeakersVerticalColumns.vue          | 455 ++++++++++++++++++
 .../js/Components/Home/SponsorsShowcase.vue   | 381 +++++++++++++++
 resources/js/Components/Home/StatsSection.vue | 207 ++++++++
 resources/js/Composables/useScroll.ts         |  23 +-
 resources/js/Composables/useScrollReveal.ts   |  86 ++++
 resources/js/Composables/useSectionScroll.ts  | 214 ++++++++
 resources/js/Pages/Home.vue                   | 292 +++--------
 resources/js/messages.ts                      |  34 +-
 11 files changed, 1748 insertions(+), 235 deletions(-)
 create mode 100644 resources/js/Components/Home/AboutUsSection.vue
 create mode 100644 resources/js/Components/Home/EventCtaSection.vue
 create mode 100644 resources/js/Components/Home/SpeakersVerticalColumns.vue
 create mode 100644 resources/js/Components/Home/SponsorsShowcase.vue
 create mode 100644 resources/js/Components/Home/StatsSection.vue
 create mode 100644 resources/js/Composables/useScrollReveal.ts
 create mode 100644 resources/js/Composables/useSectionScroll.ts

diff --git a/resources/css/app.css b/resources/css/app.css
index 80fbf586..300d3b3f 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -223,3 +223,18 @@ textarea:-webkit-autofill {
     transition: background-color 5000s ease-in-out 0s !important;
     caret-color: #ffffff !important;
 }
+
+@utility landing-section {
+    scroll-snap-align: center;
+    scroll-snap-stop: always;
+}
+
+html.landing-snap {
+    scroll-snap-type: y mandatory;
+    scroll-behavior: smooth;
+}
+
+html.landing-snap footer {
+    scroll-snap-align: end;
+    scroll-snap-stop: always;
+}
diff --git a/resources/js/Components/Home/AboutUsSection.vue b/resources/js/Components/Home/AboutUsSection.vue
new file mode 100644
index 00000000..4c84517c
--- /dev/null
+++ b/resources/js/Components/Home/AboutUsSection.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { useScrollReveal } from "@/Composables/useScrollReveal";
+
+const { targetRef, isVisible } = useScrollReveal({
+    threshold: 0.15,
+    once: false,
+});
+</script>
+
+<template>
+    <div
+        ref="targetRef"
+        class="relative mx-auto my-auto flex w-full max-w-7xl flex-col justify-center px-4 py-4 sm:px-6 sm:py-0 lg:px-8"
+    >
+        <div
+            class="grid grid-cols-1 items-start gap-6 lg:grid-cols-12 lg:gap-12"
+        >
+            <div
+                class="self-center lg:col-span-6 xl:col-span-7 transition-all duration-700 ease-in-out"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100'
+                        : 'translate-y-12 opacity-0',
+                ]"
+            >
+                <h2
+                    class="mt-2 text-3xl tracking-tight text-white sm:text-5xl lg:text-6xl"
+                >
+                    Feita por estudantes,<br />
+                    <span class="font-black">para estudantes</span>
+                </h2>
+            </div>
+
+            <div
+                class="text-base leading-relaxed text-neutral-300 transition-all duration-700 ease-in-out delay-150 sm:text-lg lg:col-span-6 lg:pt-6 xl:col-span-5"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100'
+                        : 'translate-y-12 opacity-0',
+                ]"
+            >
+                <p>
+                    {{ $t("homePage.aboutUsDescription") }}
+                </p>
+            </div>
+        </div>
+
+        <div
+            class="mt-8 grid grid-cols-1 gap-6 border-t border-white/10 pt-6 transition-all duration-700 ease-in-out delay-250 sm:mt-10 sm:pt-8 md:grid-cols-3 md:gap-8 lg:gap-12"
+            :class="[
+                isVisible
+                    ? 'border-white/10 opacity-100'
+                    : 'border-transparent opacity-0',
+            ]"
+        >
+            <div
+                class="space-y-1.5 transition-all duration-700 ease-in-out delay-300"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100'
+                        : 'translate-y-10 opacity-0',
+                ]"
+            >
+                <h3 class="text-base font-bold text-white sm:text-lg">
+                    {{ $t("homePage.pillar1Title") }}
+                </h3>
+                <p class="text-xs leading-relaxed text-neutral-400 sm:text-sm">
+                    {{ $t("homePage.pillar1Desc") }}
+                </p>
+            </div>
+
+            <div
+                class="space-y-1.5 transition-all duration-700 ease-in-out delay-400"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100'
+                        : 'translate-y-10 opacity-0',
+                ]"
+            >
+                <h3 class="text-base font-bold text-white sm:text-lg">
+                    {{ $t("homePage.pillar2Title") }}
+                </h3>
+                <p class="text-xs leading-relaxed text-neutral-400 sm:text-sm">
+                    {{ $t("homePage.pillar2Desc") }}
+                </p>
+            </div>
+
+            <div
+                class="space-y-1.5 transition-all duration-700 ease-in-out delay-500"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100'
+                        : 'translate-y-10 opacity-0',
+                ]"
+            >
+                <h3 class="text-base font-bold text-white sm:text-lg">
+                    {{ $t("homePage.pillar3Title") }}
+                </h3>
+                <p class="text-xs leading-relaxed text-neutral-400 sm:text-sm">
+                    {{ $t("homePage.pillar3Desc") }}
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Components/Home/EventCtaSection.vue b/resources/js/Components/Home/EventCtaSection.vue
new file mode 100644
index 00000000..25b138b5
--- /dev/null
+++ b/resources/js/Components/Home/EventCtaSection.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { router } from "@inertiajs/vue3";
+import { route } from "ziggy-js";
+import { Calendar, Users, Check, UserPlus } from "@lucide/vue";
+import { useScrollReveal } from "@/Composables/useScrollReveal";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import Card from "@/Components/UI/Card.vue";
+
+interface Props {
+    canEnroll: boolean;
+}
+
+defineProps<Props>();
+
+const { targetRef, isVisible } = useScrollReveal({
+    threshold: 0.15,
+    once: false,
+});
+</script>
+
+<template>
+    <div
+        ref="targetRef"
+        class="relative mx-auto my-auto flex w-full max-w-7xl flex-col justify-center px-4 sm:px-6 lg:px-8"
+    >
+        <div class="mb-8 flex flex-col items-center text-center sm:mb-10">
+            <h2
+                class="mt-4 text-3xl font-black tracking-tight text-white transition-all duration-700 ease-in-out sm:text-5xl lg:text-6xl"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100'
+                        : 'translate-y-12 opacity-0',
+                ]"
+            >
+                Junta-te a nós na SINF 2026
+            </h2>
+            <p
+                class="mt-3 max-w-2xl text-sm leading-relaxed text-neutral-300 transition-all duration-700 ease-in-out delay-150 sm:text-base"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100'
+                        : 'translate-y-10 opacity-0',
+                ]"
+            >
+                Entrada livre e aberta a todos os estudantes. Quatro dias de
+                palestras técnicas, workshops práticos e contacto direto com as
+                equipas de engenharia das empresas participantes.
+            </p>
+        </div>
+
+        <div
+            class="grid grid-cols-1 gap-6 border-t border-white/10 pt-8 transition-all duration-700 ease-in-out delay-250 md:grid-cols-3 md:gap-6 lg:gap-8"
+            :class="[
+                isVisible
+                    ? 'border-white/10 opacity-100'
+                    : 'border-transparent opacity-0',
+            ]"
+        >
+            <Card
+                padding="p-6 sm:p-7"
+                :interactive="false"
+                class="flex flex-col justify-between transition-all duration-700 ease-in-out delay-300"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100 scale-100'
+                        : 'translate-y-14 opacity-0 scale-[0.96]',
+                ]"
+            >
+                <div>
+                    <h3 class="text-lg font-bold text-white sm:text-xl">
+                        Garante o teu lugar
+                    </h3>
+                    <p class="mt-2 text-xs leading-relaxed text-neutral-400 sm:text-sm">
+                        Acesso total às palestras no anfiteatro, sessões de networking com empresas e kit de boas-vindas do evento.
+                    </p>
+                </div>
+
+                <div class="mt-6">
+                    <PrimaryButton
+                        v-if="canEnroll"
+                        color="pill"
+                        full-width
+                        padding="px-6 py-2.5"
+                        text-size="text-xs sm:text-sm font-semibold"
+                        @click="
+                            $page.props.auth.user
+                                ? router.put(route('enroll'))
+                                : router.get(route('register'))
+                        "
+                    >
+                        <Check v-if="$page.props.auth.user" :size="15" />
+                        <UserPlus v-else :size="15" />
+                        <span>
+                            {{
+                                $page.props.auth.user
+                                    ? "Confirmar Inscrição"
+                                    : "Inscrever-me Agora"
+                            }}
+                        </span>
+                    </PrimaryButton>
+                </div>
+            </Card>
+
+            <Card
+                padding="p-6 sm:p-7"
+                :interactive="false"
+                class="flex flex-col justify-between transition-all duration-700 ease-in-out delay-450"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100 scale-100'
+                        : 'translate-y-14 opacity-0 scale-[0.96]',
+                ]"
+            >
+                <div>
+                    <h3 class="text-lg font-bold text-white sm:text-xl">
+                        Explora o programa
+                    </h3>
+                    <p class="mt-2 text-xs leading-relaxed text-neutral-400 sm:text-sm">
+                        Consulta os horários das palestras técnicas, temas das intervenções e oradores convidados para cada um dos dias.
+                    </p>
+                </div>
+
+                <div class="mt-6">
+                    <PrimaryButton
+                        color="pill"
+                        full-width
+                        padding="px-6 py-2.5"
+                        text-size="text-xs sm:text-sm font-semibold"
+                        :href="route('program')"
+                    >
+                        <Calendar :size="15" />
+                        <span>Ver Programa Completo</span>
+                    </PrimaryButton>
+                </div>
+            </Card>
+
+            <Card
+                padding="p-6 sm:p-7"
+                :interactive="false"
+                class="flex flex-col justify-between transition-all duration-700 ease-in-out delay-600"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100 scale-100'
+                        : 'translate-y-14 opacity-0 scale-[0.96]',
+                ]"
+            >
+                <div>
+                    <h3 class="text-lg font-bold text-white sm:text-xl">
+                        Feito por estudantes
+                    </h3>
+                    <p class="mt-2 text-xs leading-relaxed text-neutral-400 sm:text-sm">
+                        Uma iniciativa 100% pensada e executada por alunos da FEUP. Descobre quem está por trás desta edição da SINF.
+                    </p>
+                </div>
+
+                <div class="mt-6">
+                    <PrimaryButton
+                        color="pill"
+                        full-width
+                        padding="px-6 py-2.5"
+                        text-size="text-xs sm:text-sm font-semibold"
+                        :href="route('team')"
+                    >
+                        <Users :size="15" />
+                        <span>Conhecer a Equipa</span>
+                    </PrimaryButton>
+                </div>
+            </Card>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Components/Home/SpeakersVerticalColumns.vue b/resources/js/Components/Home/SpeakersVerticalColumns.vue
new file mode 100644
index 00000000..8843aa06
--- /dev/null
+++ b/resources/js/Components/Home/SpeakersVerticalColumns.vue
@@ -0,0 +1,455 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import type { User, SpeakerUser } from "@/Types/User";
+import SocialIcon from "@/Components/UI/SocialIcon.vue";
+import Modal from "@/Components/UI/Modal.vue";
+import { useScrollReveal } from "@/Composables/useScrollReveal";
+
+interface Props {
+    speakers: User[];
+}
+
+const props = defineProps<Props>();
+
+const { targetRef, isVisible } = useScrollReveal({
+    threshold: 0.1,
+    once: false,
+});
+
+const selectedSpeaker = ref<User | null>(null);
+const isBioModalOpen = ref(false);
+
+function openBioModal(speaker: User) {
+    selectedSpeaker.value = speaker;
+    isBioModalOpen.value = true;
+}
+
+function closeBioModal() {
+    isBioModalOpen.value = false;
+    selectedSpeaker.value = null;
+}
+
+function getSpeakerDisplayName(user: User | null): string {
+    return user?.name ?? "";
+}
+
+function getSpeakerTitle(user: User | null): string {
+    if (!user) return "";
+    const u = user as Partial<SpeakerUser>;
+    return u.usertype?.title ?? "";
+}
+
+function getSpeakerOrganization(user: User | null): string {
+    if (!user) return "";
+    const u = user as Partial<SpeakerUser>;
+    return u.usertype?.organization ?? "";
+}
+
+function getSpeakerDescriptionHtml(user: User | null): string {
+    if (!user) return "";
+    const u = user as Partial<SpeakerUser>;
+    return u.usertype?.description_html ?? "";
+}
+
+interface SpeakerSocialLink {
+    platform: string;
+    url: string;
+    label: string;
+}
+
+const SUPPORTED_SOCIAL_PLATFORMS = [
+    "github",
+    "linkedin",
+    "website",
+    "twitter",
+    "instagram",
+    "facebook",
+    "email",
+] as const;
+
+function formatSocialUrl(platform: string, val: string): string {
+    const trimmed = val.trim();
+    if (!trimmed) return "";
+    if (platform === "email") {
+        return trimmed.startsWith("mailto:") ? trimmed : `mailto:${trimmed}`;
+    }
+    if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) {
+        return trimmed;
+    }
+    if (platform === "github") {
+        return `https://github.com/${trimmed.replace(/^@/, "")}`;
+    }
+    if (platform === "linkedin") {
+        return `https://linkedin.com/in/${trimmed.replace(/^@/, "")}`;
+    }
+    if (platform === "instagram") {
+        return `https://instagram.com/${trimmed.replace(/^@/, "")}`;
+    }
+    if (platform === "twitter") {
+        return `https://x.com/${trimmed.replace(/^@/, "")}`;
+    }
+    if (platform === "facebook") {
+        return `https://facebook.com/${trimmed.replace(/^@/, "")}`;
+    }
+    return `https://${trimmed}`;
+}
+
+const selectedSpeakerSocialLinks = computed<SpeakerSocialLink[]>(() => {
+    if (!selectedSpeaker.value) return [];
+    const u = selectedSpeaker.value as Partial<SpeakerUser>;
+    const raw = (u.usertype?.social_media ?? {}) as Record<string, unknown>;
+
+    const links: SpeakerSocialLink[] = [];
+    for (const platform of SUPPORTED_SOCIAL_PLATFORMS) {
+        const val = raw[platform];
+        if (typeof val === "string" && val.trim() !== "") {
+            links.push({
+                platform,
+                url: formatSocialUrl(platform, val),
+                label: platform.charAt(0).toUpperCase() + platform.slice(1),
+            });
+        }
+    }
+    return links;
+});
+
+const COLUMN_COUNT = 6;
+
+function getColumnVisibilityClass(cIdx: number): string {
+    if (cIdx >= 4) return "hidden lg:flex";
+    if (cIdx === 3) return "hidden md:flex";
+    if (cIdx === 2) return "hidden sm:flex";
+    return "flex";
+}
+
+const columns = computed(() => {
+    if (!props.speakers || props.speakers.length === 0) {
+        return Array.from({ length: COLUMN_COUNT }, () => []);
+    }
+
+    const all = props.speakers;
+    const n = all.length;
+
+    return Array.from({ length: COLUMN_COUNT }, (_, cIdx) => {
+        const offset = (cIdx * 3) % n;
+        const reordered: User[] = [];
+        for (let i = 0; i < n; i++) {
+            reordered.push(all[(i + offset) % n]);
+        }
+
+        const trackItems: User[] = [];
+        while (trackItems.length < 10) {
+            trackItems.push(...reordered);
+        }
+        return trackItems;
+    });
+});
+</script>
+
+<template>
+    <div
+        ref="targetRef"
+        class="relative h-screen min-h-dvh max-h-dvh w-full overflow-hidden"
+    >
+        <div
+            class="pointer-events-none absolute top-16 inset-x-0 z-30 flex flex-col items-center justify-center px-4 text-center sm:top-20 lg:top-20"
+        >
+            <h2
+                class="text-2xl font-black tracking-tight text-white drop-shadow-md transition-all duration-700 ease-in-out sm:text-4xl lg:text-5xl"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100'
+                        : 'translate-y-12 opacity-0',
+                ]"
+            >
+                Conhece os oradores desta edição!
+            </h2>
+
+            <p
+                class="mt-1.5 max-w-xs text-xs text-neutral-400 transition-all duration-700 ease-in-out delay-150 sm:max-w-md sm:text-sm md:max-w-lg md:text-base"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100'
+                        : 'translate-y-10 opacity-0',
+                ]"
+            >
+                Descobre as ideias, experiências e tendências que estão a moldar o futuro da tecnologia.
+            </p>
+        </div>
+
+        <template v-if="speakers.length !== 0">
+            <div
+                class="speaker-wall-container relative h-full w-full overflow-hidden transition-all duration-1000 ease-in-out delay-150"
+                :class="[
+                    isVisible
+                        ? 'opacity-100 scale-100'
+                        : 'opacity-0 scale-95',
+                ]"
+            >
+                <div
+                    class="speaker-columns-mask grid h-full w-full grid-cols-2 gap-2.5 px-3 sm:grid-cols-3 sm:gap-3.5 sm:px-4 md:grid-cols-4 lg:grid-cols-6 lg:gap-4"
+                >
+                    <div
+                        v-for="(col, cIdx) in columns"
+                        :key="`col-${cIdx}`"
+                        class="column-track-wrapper relative h-full overflow-hidden"
+                        :class="getColumnVisibilityClass(cIdx)"
+                    >
+                        <div
+                            class="column-track"
+                            :class="[
+                                cIdx % 2 === 0
+                                    ? 'animate-scroll-up'
+                                    : 'animate-scroll-down',
+                                `speed-${(cIdx % 3) + 1}`,
+                            ]"
+                        >
+                            <div class="track-sequence">
+                                <button
+                                    v-for="(speaker, sIdx) in col"
+                                    :key="`c${cIdx}-s${speaker.id}-${sIdx}`"
+                                    type="button"
+                                    class="speaker-card group relative w-full shrink-0 cursor-pointer overflow-hidden rounded-xl border border-white/6 bg-black/40 p-2 text-left opacity-50 backdrop-blur-xs transition-opacity duration-300 hover:opacity-100 active:opacity-100 sm:rounded-2xl sm:p-2.5 sm:opacity-30 md:p-3"
+                                    @click="openBioModal(speaker)"
+                                >
+                                    <div
+                                        class="relative aspect-square w-full overflow-hidden rounded-lg bg-neutral-900/80 sm:rounded-xl"
+                                    >
+                                        <img
+                                            :src="speaker.profile_photo_url"
+                                            :alt="getSpeakerDisplayName(speaker)"
+                                            class="h-full w-full object-cover grayscale filter transition-all duration-300 group-hover:grayscale-0"
+                                            loading="lazy"
+                                        />
+                                        <div
+                                            class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/75 via-transparent to-transparent opacity-60"
+                                        />
+                                    </div>
+
+                                    <div class="mt-1.5 sm:mt-2">
+                                        <h3
+                                            class="truncate text-xs font-bold text-neutral-200 transition-colors group-hover:text-white sm:text-sm"
+                                        >
+                                            {{ getSpeakerDisplayName(speaker) }}
+                                        </h3>
+                                        <p
+                                            class="mt-0.5 truncate text-[10px] text-neutral-400 group-hover:text-neutral-300 sm:text-[11px]"
+                                        >
+                                            {{
+                                                getSpeakerTitle(speaker) ||
+                                                getSpeakerOrganization(
+                                                    speaker,
+                                                ) ||
+                                                "Speaker"
+                                            }}
+                                        </p>
+                                    </div>
+                                </button>
+                            </div>
+
+                            <div class="track-sequence" aria-hidden="true">
+                                <button
+                                    v-for="(speaker, sIdx) in col"
+                                    :key="`c${cIdx}-s${speaker.id}-dup-${sIdx}`"
+                                    type="button"
+                                    tabindex="-1"
+                                    class="speaker-card group relative w-full shrink-0 cursor-pointer overflow-hidden rounded-xl border border-white/6 bg-black/40 p-2 text-left opacity-50 backdrop-blur-xs transition-opacity duration-300 hover:opacity-100 active:opacity-100 sm:rounded-2xl sm:p-2.5 sm:opacity-30 md:p-3"
+                                    @click="openBioModal(speaker)"
+                                >
+                                    <div
+                                        class="relative aspect-square w-full overflow-hidden rounded-lg bg-neutral-900/80 sm:rounded-xl"
+                                    >
+                                        <img
+                                            :src="speaker.profile_photo_url"
+                                            :alt="getSpeakerDisplayName(speaker)"
+                                            class="h-full w-full object-cover grayscale filter transition-all duration-300 group-hover:grayscale-0"
+                                            loading="lazy"
+                                        />
+                                        <div
+                                            class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/75 via-transparent to-transparent opacity-60"
+                                        />
+                                    </div>
+
+                                    <div class="mt-1.5 sm:mt-2">
+                                        <h3
+                                            class="truncate text-xs font-bold text-neutral-200 transition-colors group-hover:text-white sm:text-sm"
+                                        >
+                                            {{ getSpeakerDisplayName(speaker) }}
+                                        </h3>
+                                        <p
+                                            class="mt-0.5 truncate text-[10px] text-neutral-400 group-hover:text-neutral-300 sm:text-[11px]"
+                                        >
+                                            {{
+                                                getSpeakerTitle(speaker) ||
+                                                getSpeakerOrganization(
+                                                    speaker,
+                                                ) ||
+                                                "Speaker"
+                                            }}
+                                        </p>
+                                    </div>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+
+        <Modal :show="isBioModalOpen" max-width="lg" @close="closeBioModal">
+            <div
+                v-if="selectedSpeaker"
+                class="relative max-h-[85vh] overflow-y-auto rounded-2xl border border-white/10 bg-neutral-950 p-5 text-white sm:p-8"
+            >
+                <div class="flex items-start gap-4 sm:gap-5">
+                    <img
+                        :src="selectedSpeaker.profile_photo_url"
+                        :alt="getSpeakerDisplayName(selectedSpeaker)"
+                        class="h-16 w-16 rounded-xl object-cover ring-2 ring-sinf-primary/50 sm:h-24 sm:w-24 sm:rounded-2xl"
+                    />
+                    <div class="flex-1">
+                        <h3 class="text-lg font-black text-white sm:text-2xl">
+                            {{ getSpeakerDisplayName(selectedSpeaker) }}
+                        </h3>
+                        <p
+                            v-if="getSpeakerTitle(selectedSpeaker)"
+                            class="text-xs font-medium text-sinf-primary sm:text-sm"
+                        >
+                            {{ getSpeakerTitle(selectedSpeaker) }}
+                            <span
+                                v-if="getSpeakerOrganization(selectedSpeaker)"
+                                class="text-neutral-400"
+                            >
+                                • {{ getSpeakerOrganization(selectedSpeaker) }}
+                            </span>
+                        </p>
+                        <p
+                            v-else-if="
+                                getSpeakerOrganization(selectedSpeaker)
+                            "
+                            class="text-xs font-medium text-neutral-400 sm:text-sm"
+                        >
+                            {{ getSpeakerOrganization(selectedSpeaker) }}
+                        </p>
+
+                        <div
+                            v-if="selectedSpeakerSocialLinks.length > 0"
+                            class="mt-2.5 flex flex-wrap items-center gap-2 sm:mt-3"
+                        >
+                            <a
+                                v-for="link in selectedSpeakerSocialLinks"
+                                :key="link.platform"
+                                :href="link.url"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                :aria-label="`${getSpeakerDisplayName(selectedSpeaker)} - ${link.label}`"
+                                class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-white/5 text-neutral-400 transition-all hover:border-sinf-primary/60 hover:bg-sinf-primary/20 hover:text-white sm:h-9 sm:w-9"
+                            >
+                                <SocialIcon
+                                    :platform="link.platform"
+                                    :size="15"
+                                />
+                            </a>
+                        </div>
+                    </div>
+                </div>
+
+                <div
+                    v-if="getSpeakerDescriptionHtml(selectedSpeaker)"
+                    class="mt-4 border-t border-white/10 pt-4 text-xs leading-relaxed text-neutral-300 sm:mt-6 sm:pt-5 sm:text-sm"
+                    v-html="getSpeakerDescriptionHtml(selectedSpeaker)"
+                />
+            </div>
+        </Modal>
+    </div>
+</template>
+
+<style scoped>
+.speaker-columns-mask {
+    mask-image: linear-gradient(
+        to bottom,
+        transparent 0%,
+        rgba(0, 0, 0, 0.05) 3%,
+        rgba(0, 0, 0, 0.6) 12%,
+        black 22%,
+        black 78%,
+        rgba(0, 0, 0, 0.6) 88%,
+        rgba(0, 0, 0, 0.05) 97%,
+        transparent 100%
+    );
+    -webkit-mask-image: linear-gradient(
+        to bottom,
+        transparent 0%,
+        rgba(0, 0, 0, 0.05) 3%,
+        rgba(0, 0, 0, 0.6) 12%,
+        black 22%,
+        black 78%,
+        rgba(0, 0, 0, 0.6) 88%,
+        rgba(0, 0, 0, 0.05) 97%,
+        transparent 100%
+    );
+}
+
+.column-track-wrapper {
+    height: 100%;
+}
+
+.column-track {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    will-change: transform;
+}
+
+.track-sequence {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    padding-bottom: 0.625rem;
+}
+
+@media (min-width: 640px) {
+    .track-sequence {
+        gap: 0.75rem;
+        padding-bottom: 0.75rem;
+    }
+}
+
+.animate-scroll-up.speed-1 {
+    animation: scrollUp 42s linear infinite;
+}
+.animate-scroll-up.speed-2 {
+    animation: scrollUp 48s linear infinite;
+}
+.animate-scroll-up.speed-3 {
+    animation: scrollUp 44s linear infinite;
+}
+
+.animate-scroll-down.speed-1 {
+    animation: scrollDown 42s linear infinite;
+}
+.animate-scroll-down.speed-2 {
+    animation: scrollDown 48s linear infinite;
+}
+.animate-scroll-down.speed-3 {
+    animation: scrollDown 44s linear infinite;
+}
+
+@keyframes scrollUp {
+    0% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(-50%);
+    }
+}
+
+@keyframes scrollDown {
+    0% {
+        transform: translateY(-50%);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+</style>
diff --git a/resources/js/Components/Home/SponsorsShowcase.vue b/resources/js/Components/Home/SponsorsShowcase.vue
new file mode 100644
index 00000000..9a2e4432
--- /dev/null
+++ b/resources/js/Components/Home/SponsorsShowcase.vue
@@ -0,0 +1,381 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import type SponsorTier from "@/Types/SponsorTier";
+import type Sponsor from "@/Types/Sponsor";
+import Modal from "@/Components/UI/Modal.vue";
+import Card from "@/Components/UI/Card.vue";
+import PillSelector from "@/Components/UI/PillSelector.vue";
+import { ExternalLink } from "@lucide/vue";
+import { useScrollReveal } from "@/Composables/useScrollReveal";
+
+interface Props {
+    sponsorTiers: SponsorTier[];
+}
+
+const props = defineProps<Props>();
+
+const { targetRef, isVisible } = useScrollReveal({
+    threshold: 0.15,
+    once: false,
+});
+
+const selectedSponsor = ref<Sponsor | null>(null);
+const selectedTier = ref<SponsorTier | null>(null);
+const isModalOpen = ref(false);
+
+function openSponsorModal(sponsor: Sponsor, tier: SponsorTier) {
+    selectedSponsor.value = sponsor;
+    selectedTier.value = tier;
+    isModalOpen.value = true;
+}
+
+function closeSponsorModal() {
+    isModalOpen.value = false;
+    selectedSponsor.value = null;
+    selectedTier.value = null;
+}
+
+// Flat list of all sponsors with their tier
+const allSponsorsWithTier = computed(() => {
+    const list: Array<{ sponsor: Sponsor; tier: SponsorTier }> = [];
+    if (!props.sponsorTiers) return list;
+
+    props.sponsorTiers.forEach((tier) => {
+        tier.sponsors?.forEach((sponsor) => {
+            list.push({ sponsor, tier });
+        });
+    });
+    return list;
+});
+
+// Top tier (e.g. Platinum/Main) partners to feature prominently
+const topTier = computed(() => {
+    if (!props.sponsorTiers || props.sponsorTiers.length === 0) return null;
+    return props.sponsorTiers.find((t) => t.sponsors && t.sponsors.length > 0) || null;
+});
+
+const topTierName = computed(() => topTier.value?.name || "Main Partners");
+
+const topTierSponsors = computed(() => {
+    if (!topTier.value) return [];
+    return (topTier.value.sponsors || []).map((sponsor) => ({
+        sponsor,
+        tier: topTier.value!,
+    }));
+});
+
+// Dual rows for infinite marquee streaming
+const marqueeRow1 = computed(() => {
+    const all = allSponsorsWithTier.value;
+    if (all.length === 0) return [];
+    const row = all.filter((_, idx) => idx % 2 === 0);
+    const padded = [...row];
+    while (padded.length < 8) {
+        padded.push(...row);
+    }
+    return padded;
+});
+
+const marqueeRow2 = computed(() => {
+    const all = allSponsorsWithTier.value;
+    if (all.length === 0) return [];
+    const row =
+        all.length > 1
+            ? all.filter((_, idx) => idx % 2 === 1)
+            : [...all].reverse();
+    const padded = [...row];
+    while (padded.length < 8) {
+        padded.push(...row);
+    }
+    return padded;
+});
+</script>
+
+<template>
+    <div
+        ref="targetRef"
+        class="relative mx-auto my-auto flex w-full max-w-7xl flex-col justify-center px-4 sm:px-6 lg:px-8"
+    >
+        <div class="mb-6 flex flex-col items-center text-center sm:mb-8">
+            <h2
+                class="mt-4 text-3xl tracking-tight text-white transition-all duration-700 ease-in-out delay-100 sm:text-5xl lg:text-6xl"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100'
+                        : 'translate-y-12 opacity-0',
+                ]"
+            >
+                Empresas que tornam a SINF <span class="font-black">possível</span>
+            </h2>
+
+            <p
+                class="mt-3 max-w-2xl text-sm leading-relaxed text-neutral-300 transition-all duration-700 ease-in-out delay-200 sm:text-base"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100'
+                        : 'translate-y-10 opacity-0',
+                ]"
+            >
+                Equipas e organizações que marcam presença na FEUP para partilhar conhecimento técnico e recrutar talento universitário.
+            </p>
+        </div>
+
+        <template v-if="allSponsorsWithTier.length > 0">
+            <div v-if="topTierSponsors.length > 0" class="mb-6 sm:mb-8">
+                <div
+                    class="mb-3 flex items-center justify-center transition-all duration-700 ease-in-out delay-250"
+                    :class="[
+                        isVisible
+                            ? 'translate-y-0 opacity-100'
+                            : 'translate-y-6 opacity-0',
+                    ]"
+                >
+                    <div class="pill-container px-3.5 py-1 shadow-none">
+                        <span
+                            class="text-xs font-semibold tracking-wider text-neutral-300 uppercase"
+                        >
+                            {{ topTierName }}
+                        </span>
+                    </div>
+                </div>
+
+                <div
+                    class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 sm:gap-6"
+                >
+                    <Card
+                        v-for="(item, idx) in topTierSponsors.slice(0, 4)"
+                        :key="`featured-${item.sponsor.id}`"
+                        as="button"
+                        padding="p-4 sm:p-5"
+                        class="flex h-28 cursor-pointer items-center justify-center focus:outline-none transition-all duration-700 ease-in-out sm:h-32"
+                        :style="{ transitionDelay: `${300 + idx * 100}ms` }"
+                        :class="[
+                            isVisible
+                                ? 'translate-y-0 opacity-100 scale-100'
+                                : 'translate-y-12 opacity-0 scale-95',
+                        ]"
+                        @click="openSponsorModal(item.sponsor, item.tier)"
+                    >
+                        <div class="flex h-14 w-full items-center justify-center p-1 sm:h-16">
+                            <img
+                                :src="item.sponsor.company?.user?.profile_photo_url"
+                                :alt="item.sponsor.company?.user?.name"
+                                class="max-h-full max-w-[85%] object-contain opacity-90 brightness-95 transition-all duration-300 group-hover:scale-105 group-hover:opacity-100 group-hover:brightness-110"
+                                loading="lazy"
+                            />
+                        </div>
+                    </Card>
+                </div>
+            </div>
+
+            <div
+                v-if="marqueeRow1.length > 0"
+                class="marquee-mask relative w-full space-y-3 overflow-hidden py-1 transition-all duration-700 ease-in-out delay-500"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100'
+                        : 'translate-y-12 opacity-0',
+                ]"
+            >
+                <div class="marquee-track-left flex items-center gap-4">
+                    <div class="marquee-group flex items-center gap-4">
+                        <Card
+                            v-for="(item, idx) in marqueeRow1"
+                            :key="`r1-g1-${item.sponsor.id}-${idx}`"
+                            as="button"
+                            padding="p-3 sm:p-4"
+                            class="flex h-16 w-36 shrink-0 cursor-pointer items-center justify-center focus:outline-none sm:h-20 sm:w-48"
+                            @click="openSponsorModal(item.sponsor, item.tier)"
+                        >
+                            <img
+                                :src="item.sponsor.company?.user?.profile_photo_url"
+                                :alt="item.sponsor.company?.user?.name"
+                                class="max-h-8 max-w-[85%] object-contain opacity-75 grayscale transition-all duration-300 group-hover:grayscale-0 group-hover:opacity-100 sm:max-h-10"
+                                loading="lazy"
+                            />
+                        </Card>
+                    </div>
+                    <div
+                        class="marquee-group flex items-center gap-4"
+                        aria-hidden="true"
+                    >
+                        <Card
+                            v-for="(item, idx) in marqueeRow1"
+                            :key="`r1-g2-${item.sponsor.id}-${idx}`"
+                            as="button"
+                            padding="p-3 sm:p-4"
+                            class="flex h-16 w-36 shrink-0 cursor-pointer items-center justify-center focus:outline-none sm:h-20 sm:w-48"
+                            @click="openSponsorModal(item.sponsor, item.tier)"
+                        >
+                            <img
+                                :src="item.sponsor.company?.user?.profile_photo_url"
+                                :alt="item.sponsor.company?.user?.name"
+                                class="max-h-8 max-w-[85%] object-contain opacity-75 grayscale transition-all duration-300 group-hover:grayscale-0 group-hover:opacity-100 sm:max-h-10"
+                                loading="lazy"
+                            />
+                        </Card>
+                    </div>
+                </div>
+
+                <div class="marquee-track-right flex items-center gap-4">
+                    <div class="marquee-group flex items-center gap-4">
+                        <Card
+                            v-for="(item, idx) in marqueeRow2"
+                            :key="`r2-g1-${item.sponsor.id}-${idx}`"
+                            as="button"
+                            padding="p-3 sm:p-4"
+                            class="flex h-16 w-36 shrink-0 cursor-pointer items-center justify-center focus:outline-none sm:h-20 sm:w-48"
+                            @click="openSponsorModal(item.sponsor, item.tier)"
+                        >
+                            <img
+                                :src="item.sponsor.company?.user?.profile_photo_url"
+                                :alt="item.sponsor.company?.user?.name"
+                                class="max-h-8 max-w-[85%] object-contain opacity-75 grayscale transition-all duration-300 group-hover:grayscale-0 group-hover:opacity-100 sm:max-h-10"
+                                loading="lazy"
+                            />
+                        </Card>
+                    </div>
+                    <div
+                        class="marquee-group flex items-center gap-4"
+                        aria-hidden="true"
+                    >
+                        <Card
+                            v-for="(item, idx) in marqueeRow2"
+                            :key="`r2-g2-${item.sponsor.id}-${idx}`"
+                            as="button"
+                            padding="p-3 sm:p-4"
+                            class="flex h-16 w-36 shrink-0 cursor-pointer items-center justify-center focus:outline-none sm:h-20 sm:w-48"
+                            @click="openSponsorModal(item.sponsor, item.tier)"
+                        >
+                            <img
+                                :src="item.sponsor.company?.user?.profile_photo_url"
+                                :alt="item.sponsor.company?.user?.name"
+                                class="max-h-8 max-w-[85%] object-contain opacity-75 grayscale transition-all duration-300 group-hover:grayscale-0 group-hover:opacity-100 sm:max-h-10"
+                                loading="lazy"
+                            />
+                        </Card>
+                    </div>
+                </div>
+            </div>
+        </template>
+
+        <div v-else class="flex justify-center py-10">
+            <div
+                class="pill-container px-6 py-2.5 font-mono text-xs text-neutral-400"
+            >
+                Em breve...
+            </div>
+        </div>
+
+        <Modal :show="isModalOpen" max-width="md" @close="closeSponsorModal">
+            <div
+                v-if="selectedSponsor"
+                class="relative flex flex-col items-center gap-6 text-center"
+            >
+                <div
+                    class="flex h-20 w-36 items-center justify-center rounded-2xl border border-white/10 bg-black/60 p-3 shadow-inner backdrop-blur-md"
+                >
+                    <img
+                        :src="selectedSponsor.company?.user?.profile_photo_url"
+                        :alt="selectedSponsor.company?.user?.name"
+                        class="max-h-full max-w-full object-contain"
+                    />
+                </div>
+
+                <div class="flex w-full flex-col items-center gap-3">
+                    <div class="flex flex-wrap items-center justify-center gap-3">
+                        <h3 class="text-2xl font-bold text-white">
+                            {{ selectedSponsor.company?.user?.name }}
+                        </h3>
+                        <div v-if="selectedTier" class="pill-container px-3 py-1 shadow-none">
+                            <span class="text-xs font-semibold uppercase tracking-wider text-neutral-300">
+                                {{ selectedTier.name }} Partner
+                            </span>
+                        </div>
+                    </div>
+
+                    <p
+                        v-if="selectedSponsor.company?.description"
+                        class="mt-2 text-sm leading-relaxed text-neutral-300"
+                    >
+                        {{ selectedSponsor.company.description }}
+                    </p>
+
+                    <div
+                        v-if="selectedSponsor.company?.user?.usertype"
+                        class="mt-4 flex justify-center border-t border-white/10 pt-4 w-full"
+                    >
+                        <a
+                            :href="
+                                selectedSponsor.company.user.usertype.toString()
+                                    .startsWith('http')
+                                    ? selectedSponsor.company.user.usertype.toString()
+                                    : `https://${selectedSponsor.company.user.usertype}`
+                            "
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            class="pill-container pill-item gap-1.5 px-5 py-2 text-xs font-semibold text-neutral-200 hover:text-white"
+                        >
+                            <span>Visitar Website</span>
+                            <ExternalLink :size="13" />
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+    </div>
+</template>
+
+<style scoped>
+.marquee-mask {
+    mask-image: linear-gradient(
+        to right,
+        transparent 0%,
+        black 10%,
+        black 90%,
+        transparent 100%
+    );
+    -webkit-mask-image: linear-gradient(
+        to right,
+        transparent 0%,
+        black 10%,
+        black 90%,
+        transparent 100%
+    );
+}
+
+.marquee-track-left {
+    display: flex;
+    width: max-content;
+    animation: marqueeScrollLeft 35s linear infinite;
+}
+
+.marquee-track-right {
+    display: flex;
+    width: max-content;
+    animation: marqueeScrollRight 38s linear infinite;
+}
+
+.marquee-track-left:hover,
+.marquee-track-right:hover {
+    animation-play-state: paused;
+}
+
+@keyframes marqueeScrollLeft {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-50%);
+    }
+}
+
+@keyframes marqueeScrollRight {
+    0% {
+        transform: translateX(-50%);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
+</style>
diff --git a/resources/js/Components/Home/StatsSection.vue b/resources/js/Components/Home/StatsSection.vue
new file mode 100644
index 00000000..1cf95025
--- /dev/null
+++ b/resources/js/Components/Home/StatsSection.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import type EventDay from "@/Types/EventDay";
+import { useScrollReveal } from "@/Composables/useScrollReveal";
+
+interface Props {
+    days: EventDay[];
+    standCount: number;
+    talkCount: number;
+    activityCount: number;
+    competitionCount?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    competitionCount: 0,
+});
+
+const { targetRef, isVisible } = useScrollReveal({
+    threshold: 0.15,
+    once: false,
+});
+
+const displayedDays = ref(0);
+const displayedStands = ref(0);
+const displayedTalks = ref(0);
+const displayedActivities = ref(0);
+const displayedCompetitions = ref(0);
+let activeRafs: number[] = [];
+
+function animateNumber(
+    targetVal: number,
+    duration: number,
+    onUpdate: (v: number) => void,
+) {
+    if (!targetVal || targetVal <= 0) {
+        onUpdate(0);
+        return;
+    }
+    const startTime = performance.now();
+    function step(now: number) {
+        const elapsed = now - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        // Smooth cubic ease-in-out curve
+        const ease =
+            progress < 0.5
+                ? 4 * progress * progress * progress
+                : 1 - Math.pow(-2 * progress + 2, 3) / 2;
+
+        onUpdate(Math.round(ease * targetVal));
+        if (progress < 1) {
+            const id = requestAnimationFrame(step);
+            activeRafs.push(id);
+        } else {
+            onUpdate(targetVal);
+        }
+    }
+    const id = requestAnimationFrame(step);
+    activeRafs.push(id);
+}
+
+function cancelAnimations() {
+    activeRafs.forEach((id) => cancelAnimationFrame(id));
+    activeRafs = [];
+}
+
+function triggerAnimation() {
+    cancelAnimations();
+
+    animateNumber(
+        props.days?.length ?? 0,
+        1200,
+        (v) => (displayedDays.value = v),
+    );
+    animateNumber(
+        props.standCount,
+        1400,
+        (v) => (displayedStands.value = v),
+    );
+    animateNumber(
+        props.talkCount,
+        1300,
+        (v) => (displayedTalks.value = v),
+    );
+    animateNumber(
+        props.activityCount,
+        1300,
+        (v) => (displayedActivities.value = v),
+    );
+    animateNumber(
+        props.competitionCount ?? 0,
+        1100,
+        (v) => (displayedCompetitions.value = v),
+    );
+}
+
+watch(
+    isVisible,
+    (visible) => {
+        if (visible) {
+            triggerAnimation();
+        } else {
+            cancelAnimations();
+            displayedDays.value = 0;
+            displayedStands.value = 0;
+            displayedTalks.value = 0;
+            displayedActivities.value = 0;
+            displayedCompetitions.value = 0;
+        }
+    },
+    { immediate: true },
+);
+
+const statsList = computed(() => {
+    const list = [];
+    if (props.days?.length) {
+        list.push({
+            value: displayedDays.value,
+            label: "dias de imersão",
+        });
+    }
+    if (props.standCount) {
+        list.push({
+            value: displayedStands.value,
+            label: "empresas em bancas",
+        });
+    }
+    if (props.talkCount) {
+        list.push({
+            value: displayedTalks.value,
+            label: "palestras",
+        });
+    }
+    if (props.activityCount) {
+        list.push({
+            value: displayedActivities.value,
+            label: "workshops",
+        });
+    }
+    if (props.competitionCount) {
+        list.push({
+            value: displayedCompetitions.value,
+            label:
+                props.competitionCount === 1
+                    ? "competição técnica"
+                    : "competições técnicas",
+        });
+    }
+    return list;
+});
+</script>
+
+<template>
+    <div
+        ref="targetRef"
+        class="relative mx-auto w-full max-w-6xl"
+    >
+        <div
+            class="mb-8 max-w-3xl transition-all duration-700 ease-in-out sm:mb-10"
+            :class="[
+                isVisible
+                    ? 'translate-y-0 opacity-100'
+                    : 'translate-y-12 opacity-0',
+            ]"
+        >
+            <h2
+                class="text-3xl tracking-tight text-white sm:text-5xl"
+            >
+                A dimensão da edição
+                <span class="font-black">2026</span>
+            </h2>
+        </div>
+
+        <div
+            class="grid grid-cols-2 gap-6 border-t border-white/10 pt-6 transition-all duration-700 ease-in-out delay-150 sm:grid-cols-3 sm:pt-8 lg:grid-cols-5 lg:gap-8"
+            :class="[
+                isVisible
+                    ? 'border-white/10 opacity-100'
+                    : 'border-transparent opacity-0',
+            ]"
+        >
+            <div
+                v-for="(item, idx) in statsList"
+                :key="idx"
+                class="flex flex-col transition-all duration-700 ease-in-out"
+                :style="{ transitionDelay: `${200 + idx * 100}ms` }"
+                :class="[
+                    isVisible
+                        ? 'translate-y-0 opacity-100 scale-100'
+                        : 'translate-y-12 opacity-0 scale-95',
+                ]"
+            >
+                <div class="flex items-baseline">
+                    <span
+                        class="text-5xl font-black tracking-tighter text-white sm:text-6xl lg:text-7xl"
+                    >
+                        {{ item.value }}
+                    </span>
+                </div>
+                <span
+                    class="mt-2 text-xs font-semibold tracking-wider text-neutral-400 uppercase sm:text-sm"
+                >
+                    {{ item.label }}
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Composables/useScroll.ts b/resources/js/Composables/useScroll.ts
index 91d5bac7..c4e778bb 100644
--- a/resources/js/Composables/useScroll.ts
+++ b/resources/js/Composables/useScroll.ts
@@ -2,8 +2,6 @@ import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 
 export type QuickScrollMode = "sections" | "top";
 
-const NAV_OFFSET = 70;
-
 export function useScroll(mode: QuickScrollMode = "top") {
     const isAtBottom = ref(false);
     const isScrolled = ref(false);
@@ -31,22 +29,23 @@ export function useScroll(mode: QuickScrollMode = "top") {
         );
         if (!sections.length) return false;
 
-        const currentY = window.scrollY || window.pageYOffset;
+        const viewportCenter = window.innerHeight / 2;
 
         const nextSection = sections.find((section) => {
-            const top = section.getBoundingClientRect().top + currentY;
-            return top > currentY + NAV_OFFSET + 20;
+            const rect = section.getBoundingClientRect();
+            const sectionCenter = rect.top + rect.height / 2;
+            return sectionCenter > viewportCenter + 60;
         });
 
         if (nextSection) {
-            const targetY =
-                nextSection.getBoundingClientRect().top + currentY - NAV_OFFSET;
-            window.scrollTo({ top: targetY, behavior: "smooth" });
+            nextSection.scrollIntoView({ behavior: "smooth", block: "center" });
         } else {
-            window.scrollTo({
-                top: document.documentElement.scrollHeight,
-                behavior: "smooth",
-            });
+            const first = sections[0];
+            if (first) {
+                first.scrollIntoView({ behavior: "smooth", block: "center" });
+            } else {
+                scrollToTop();
+            }
         }
         return true;
     }
diff --git a/resources/js/Composables/useScrollReveal.ts b/resources/js/Composables/useScrollReveal.ts
new file mode 100644
index 00000000..6de0c133
--- /dev/null
+++ b/resources/js/Composables/useScrollReveal.ts
@@ -0,0 +1,86 @@
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
+interface ScrollRevealOptions {
+    threshold?: number;
+    rootMargin?: string;
+    once?: boolean;
+}
+
+/**
+ * Composable that triggers visibility when an element scrolls into view.
+ * Supports repeatable triggering on enter/exit with once: false.
+ */
+export function useScrollReveal(options: ScrollRevealOptions = {}) {
+    const {
+        threshold = 0.15,
+        rootMargin = "0px",
+        once = false,
+    } = options;
+    const targetRef = ref<HTMLElement | null>(null);
+    const isVisible = ref(false);
+    let observer: IntersectionObserver | null = null;
+
+    function checkVisibility() {
+        if (!targetRef.value) return;
+        const rect = targetRef.value.getBoundingClientRect();
+        const vh = window.innerHeight;
+        const inView = rect.top < vh * 0.8 && rect.bottom > vh * 0.2;
+        if (inView) {
+            isVisible.value = true;
+            if (once) {
+                cleanup();
+            }
+        } else if (!once) {
+            isVisible.value = false;
+        }
+    }
+
+    function cleanup() {
+        if (observer) {
+            observer.disconnect();
+            observer = null;
+        }
+        window.removeEventListener("scroll", checkVisibility);
+        document.removeEventListener("scroll", checkVisibility);
+        window.removeEventListener("resize", checkVisibility);
+    }
+
+    onMounted(() => {
+        if (!targetRef.value) return;
+
+        // Immediate check on mount
+        setTimeout(checkVisibility, 50);
+
+        if (typeof IntersectionObserver !== "undefined") {
+            observer = new IntersectionObserver(
+                ([entry]) => {
+                    if (
+                        entry &&
+                        entry.isIntersecting &&
+                        entry.intersectionRatio >= threshold
+                    ) {
+                        isVisible.value = true;
+                        if (once) {
+                            cleanup();
+                        }
+                    } else if (!once && entry && !entry.isIntersecting) {
+                        isVisible.value = false;
+                    }
+                },
+                { threshold, rootMargin },
+            );
+
+            observer.observe(targetRef.value);
+        }
+
+        window.addEventListener("scroll", checkVisibility, { passive: true });
+        document.addEventListener("scroll", checkVisibility, { passive: true });
+        window.addEventListener("resize", checkVisibility, { passive: true });
+    });
+
+    onBeforeUnmount(() => {
+        cleanup();
+    });
+
+    return { targetRef, isVisible };
+}
diff --git a/resources/js/Composables/useSectionScroll.ts b/resources/js/Composables/useSectionScroll.ts
new file mode 100644
index 00000000..8496b93e
--- /dev/null
+++ b/resources/js/Composables/useSectionScroll.ts
@@ -0,0 +1,214 @@
+import { ref, onMounted, onBeforeUnmount, type Ref } from "vue";
+
+export interface SectionScrollOptions {
+    sectionSelector?: string;
+    threshold?: number;
+    cooldownMs?: number;
+}
+
+/**
+ * Composable for controlled section-by-section snap scrolling.
+ * Anchors the center of each section at the center of the viewport and ensures
+ * content from different sections does not appear simultaneously.
+ */
+export function useSectionScroll(
+    containerRef?: Ref<HTMLElement | null>,
+    options: SectionScrollOptions = {},
+) {
+    const {
+        sectionSelector = ".landing-section, footer",
+        threshold = 20,
+        cooldownMs = 700,
+    } = options;
+
+    const currentSectionIndex = ref(0);
+    let isTransitioning = false;
+    let touchStartY = 0;
+    let lastWheelTime = 0;
+
+    function getSections(): HTMLElement[] {
+        return Array.from(
+            document.querySelectorAll<HTMLElement>(sectionSelector),
+        );
+    }
+
+    function scrollToSection(index: number, immediate = false) {
+        const sections = getSections();
+        if (!sections.length) return;
+
+        const clampedIndex = Math.max(0, Math.min(sections.length - 1, index));
+        currentSectionIndex.value = clampedIndex;
+
+        const target = sections[clampedIndex];
+        if (!target) return;
+
+        isTransitioning = true;
+        const isFooter = target.tagName.toLowerCase() === "footer";
+        target.scrollIntoView({
+            behavior: immediate ? "instant" : "smooth",
+            block: isFooter ? "end" : "center",
+            inline: "nearest",
+        });
+
+        setTimeout(() => {
+            isTransitioning = false;
+        }, cooldownMs);
+    }
+
+    function nextSection() {
+        const sections = getSections();
+        if (currentSectionIndex.value < sections.length - 1) {
+            scrollToSection(currentSectionIndex.value + 1);
+        }
+    }
+
+    function prevSection() {
+        if (currentSectionIndex.value > 0) {
+            scrollToSection(currentSectionIndex.value - 1);
+        }
+    }
+
+    function isModalOrInteractiveOpen(e: Event): boolean {
+        const target = e.target as HTMLElement | null;
+        if (!target) return false;
+        return !!target.closest(
+            '[role="dialog"], [aria-modal="true"], .modal-container, select, input, textarea, button',
+        );
+    }
+
+    function onWheel(e: WheelEvent) {
+        // Allow modal or dropdown contents to scroll normally
+        const target = e.target as HTMLElement | null;
+        if (target?.closest('[role="dialog"], [aria-modal="true"], .modal-content, textarea')) {
+            return;
+        }
+
+        // Only handle vertical scrolling
+        if (Math.abs(e.deltaY) < threshold) return;
+
+        // Prevent free-scrolling that would display parts of two sections at once
+        e.preventDefault();
+
+        const now = Date.now();
+        if (isTransitioning || now - lastWheelTime < cooldownMs) return;
+
+        lastWheelTime = now;
+        if (e.deltaY > 0) {
+            nextSection();
+        } else {
+            prevSection();
+        }
+    }
+
+    function onKeyDown(e: KeyboardEvent) {
+        if (isModalOrInteractiveOpen(e)) return;
+
+        if (
+            ["ArrowDown", "PageDown"].includes(e.key) ||
+            (e.key === " " && !e.shiftKey)
+        ) {
+            e.preventDefault();
+            nextSection();
+        } else if (
+            ["ArrowUp", "PageUp"].includes(e.key) ||
+            (e.key === " " && e.shiftKey)
+        ) {
+            e.preventDefault();
+            prevSection();
+        } else if (e.key === "Home") {
+            e.preventDefault();
+            scrollToSection(0);
+        } else if (e.key === "End") {
+            const sections = getSections();
+            e.preventDefault();
+            scrollToSection(sections.length - 1);
+        }
+    }
+
+    function onTouchStart(e: TouchEvent) {
+        if (isModalOrInteractiveOpen(e)) return;
+        touchStartY = e.touches[0].clientY;
+    }
+
+    function onTouchEnd(e: TouchEvent) {
+        if (isModalOrInteractiveOpen(e)) return;
+        const touchEndY = e.changedTouches[0].clientY;
+        const diff = touchStartY - touchEndY;
+
+        if (Math.abs(diff) > 40) {
+            if (diff > 0) {
+                nextSection();
+            } else {
+                prevSection();
+            }
+        }
+    }
+
+    function syncActiveSectionFromScroll() {
+        if (isTransitioning) return;
+        const sections = getSections();
+        if (!sections.length) return;
+
+        const viewportCenter = window.innerHeight / 2;
+        let closestIndex = 0;
+        let minDistance = Infinity;
+
+        sections.forEach((section, idx) => {
+            const rect = section.getBoundingClientRect();
+            const sectionCenter = rect.top + rect.height / 2;
+            const distance = Math.abs(sectionCenter - viewportCenter);
+            if (distance < minDistance) {
+                minDistance = distance;
+                closestIndex = idx;
+            }
+        });
+
+        currentSectionIndex.value = closestIndex;
+    }
+
+    function syncFromHash() {
+        const hash = window.location.hash;
+        if (!hash) return;
+        const target = document.querySelector<HTMLElement>(hash);
+        if (target) {
+            const sections = getSections();
+            const idx = sections.indexOf(target);
+            if (idx !== -1) {
+                scrollToSection(idx);
+            }
+        }
+    }
+
+    onMounted(() => {
+        document.documentElement.classList.add("landing-snap");
+        window.addEventListener("wheel", onWheel, { passive: false });
+        window.addEventListener("keydown", onKeyDown);
+        window.addEventListener("touchstart", onTouchStart, { passive: true });
+        window.addEventListener("touchend", onTouchEnd, { passive: true });
+        window.addEventListener("scroll", syncActiveSectionFromScroll, {
+            passive: true,
+        });
+        window.addEventListener("hashchange", syncFromHash);
+
+        if (window.location.hash) {
+            setTimeout(syncFromHash, 150);
+        }
+    });
+
+    onBeforeUnmount(() => {
+        document.documentElement.classList.remove("landing-snap");
+        window.removeEventListener("wheel", onWheel);
+        window.removeEventListener("keydown", onKeyDown);
+        window.removeEventListener("touchstart", onTouchStart);
+        window.removeEventListener("touchend", onTouchEnd);
+        window.removeEventListener("scroll", syncActiveSectionFromScroll);
+        window.removeEventListener("hashchange", syncFromHash);
+    });
+
+    return {
+        currentSectionIndex,
+        scrollToSection,
+        nextSection,
+        prevSection,
+    };
+}
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
index 19011dd4..b901d561 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -1,13 +1,17 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import { router } from "@inertiajs/vue3";
 import { route } from "ziggy-js";
 import AppLayout from "@/Layouts/AppLayout.vue";
-import SpeakersCarousel from "@/Components/Home/SpeakersCarousel.vue";
-import SponsorBanner from "@/Components/Home/SponsorBanner.vue";
-import InfoPopup from "@/Components/Home/InfoPopup.vue";
 import PillSelector from "@/Components/UI/PillSelector.vue";
 import QuickScroll from "@/Components/UI/QuickScroll.vue";
+import InfoPopup from "@/Components/Home/InfoPopup.vue";
+import AboutUsSection from "@/Components/Home/AboutUsSection.vue";
+import StatsSection from "@/Components/Home/StatsSection.vue";
+import SpeakersVerticalColumns from "@/Components/Home/SpeakersVerticalColumns.vue";
+import SponsorsShowcase from "@/Components/Home/SponsorsShowcase.vue";
+import EventCtaSection from "@/Components/Home/EventCtaSection.vue";
+import { useSectionScroll } from "@/Composables/useSectionScroll";
+import { useScrollReveal } from "@/Composables/useScrollReveal";
 import type Edition from "@/Types/Edition";
 import type EventDay from "@/Types/EventDay";
 import type { User } from "@/Types/User";
@@ -25,31 +29,15 @@ interface Props {
     canEnroll: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
     competitionCount: 0,
 });
 
-const activeStatsCount = computed(() => {
-    let count = 0;
-    if (props.days?.length) count++;
-    if (props.standCount) count++;
-    if (props.talkCount) count++;
-    if (props.activityCount) count++;
-    if (props.competitionCount) count++;
-    return count;
-});
+useSectionScroll();
 
-const statsGridColsClass = computed(() => {
-    if (activeStatsCount.value >= 5) {
-        return "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5";
-    }
-    if (activeStatsCount.value === 4) {
-        return "grid-cols-2 md:grid-cols-4";
-    }
-    if (activeStatsCount.value === 3) {
-        return "grid-cols-1 sm:grid-cols-3";
-    }
-    return "grid-cols-2";
+const { targetRef: heroRef, isVisible: isHeroVisible } = useScrollReveal({
+    threshold: 0.1,
+    once: false,
 });
 </script>
 
@@ -60,9 +48,18 @@ const statsGridColsClass = computed(() => {
         <QuickScroll mode="sections" />
 
         <section
-            class="relative flex min-h-[calc(100vh-5rem)] flex-col items-center justify-center gap-8 px-4 py-16 text-center"
+            id="hero"
+            ref="heroRef"
+            class="landing-section relative flex h-screen min-h-dvh max-h-dvh w-full flex-col items-center justify-center gap-8 px-4 text-center overflow-hidden pt-16"
         >
-            <div class="relative">
+            <div
+                class="relative transition-all duration-700 ease-in-out"
+                :class="[
+                    isHeroVisible
+                        ? 'translate-y-0 opacity-100 scale-100'
+                        : 'translate-y-12 opacity-0 scale-95',
+                ]"
+            >
                 <img
                     class="h-16 w-auto max-w-[85vw] object-contain drop-shadow-[0_0_20px_rgba(255,255,255,0.2)] transition-all duration-300 hover:brightness-110 sm:h-24 md:h-32"
                     src="/images/sinf2026.svg"
@@ -71,220 +68,77 @@ const statsGridColsClass = computed(() => {
             </div>
 
             <p
-                class="text-lg font-medium text-neutral-300 sm:text-xl md:text-2xl"
+                class="text-lg font-medium text-neutral-300 transition-all duration-700 ease-in-out delay-150 sm:text-xl md:text-2xl"
+                :class="[
+                    isHeroVisible
+                        ? 'translate-y-0 opacity-100'
+                        : 'translate-y-10 opacity-0',
+                ]"
             >
                 16 a 19 de novembro
             </p>
 
-            <PillSelector
+            <div
                 v-if="canEnroll"
-                :items="[{ id: 'enroll', label: 'Inscrever-me', active: true }]"
-                size="md"
-                :wrap="false"
-                @select="
-                    $page.props.auth.user
-                        ? router.put(route('enroll'))
-                        : router.get(route('register'))
-                "
-            />
-        </section>
-
-        <section
-            id="aboutus"
-            class="relative mx-auto w-full max-w-7xl px-4 py-20 sm:px-6 lg:px-8"
-        >
-            <div class="mb-10 flex justify-center">
+                class="transition-all duration-700 ease-in-out delay-300"
+                :class="[
+                    isHeroVisible
+                        ? 'translate-y-0 opacity-100 scale-100'
+                        : 'translate-y-10 opacity-0 scale-95',
+                ]"
+            >
                 <PillSelector
-                    :items="[
-                        { id: 'aboutus', label: 'Sobre nós', active: true },
-                    ]"
-                    size="sm"
+                    :items="[{ id: 'enroll', label: 'Inscrever-me', active: true }]"
+                    size="md"
                     :wrap="false"
+                    @select="
+                        $page.props.auth.user
+                            ? router.put(route('enroll'))
+                            : router.get(route('register'))
+                    "
                 />
             </div>
-
-            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-                <div
-                    class="rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.01] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8"
-                >
-                    <p
-                        class="text-justify text-base leading-relaxed text-neutral-300 sm:text-lg"
-                    >
-                        {{ $t("homePage.aboutUsText1") }}
-                    </p>
-                </div>
-                <div
-                    class="rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.01] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8"
-                >
-                    <p
-                        class="text-justify text-base leading-relaxed text-neutral-300 sm:text-lg"
-                    >
-                        {{ $t("homePage.aboutUsText2") }}
-                    </p>
-                </div>
-            </div>
         </section>
 
         <section
-            class="relative mx-auto w-full max-w-7xl px-4 py-20 sm:px-6 lg:px-8"
+            id="aboutus"
+            class="landing-section relative flex h-screen min-h-dvh max-h-dvh w-full flex-col items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-8"
         >
-            <div class="mb-10 flex justify-center">
-                <PillSelector
-                    :items="[
-                        { id: 'stats', label: 'Este ano temos', active: true },
-                    ]"
-                    size="sm"
-                    :wrap="false"
-                />
-            </div>
-
-            <div
-                :class="[
-                    'grid gap-4 sm:gap-6',
-                    statsGridColsClass,
-                    {
-                        '[&>*:last-child]:col-span-2 sm:[&>*:last-child]:col-span-1':
-                            activeStatsCount % 2 !== 0,
-                    },
-                ]"
-            >
-                <div
-                    v-if="days.length !== 0"
-                    class="group flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.02] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8"
-                >
-                    <span
-                        class="text-3xl font-bold text-white transition-colors group-hover:text-neutral-100 sm:text-4xl"
-                    >
-                        {{ days.length }}
-                    </span>
-                    <span
-                        class="mt-2 font-mono text-xs font-medium tracking-wider text-neutral-400 uppercase transition-colors group-hover:text-neutral-300"
-                    >
-                        dias
-                    </span>
-                </div>
-
-                <div
-                    v-if="standCount !== 0"
-                    class="group flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.02] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8"
-                >
-                    <span
-                        class="text-3xl font-bold text-white transition-colors group-hover:text-neutral-100 sm:text-4xl"
-                    >
-                        {{ standCount }}
-                    </span>
-                    <span
-                        class="mt-2 font-mono text-xs font-medium tracking-wider text-neutral-400 uppercase transition-colors group-hover:text-neutral-300"
-                    >
-                        bancas
-                    </span>
-                </div>
-
-                <div
-                    v-if="talkCount !== 0"
-                    class="group flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.02] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8"
-                >
-                    <span
-                        class="text-3xl font-bold text-white transition-colors group-hover:text-neutral-100 sm:text-4xl"
-                    >
-                        {{ talkCount }}
-                    </span>
-                    <span
-                        class="mt-2 font-mono text-xs font-medium tracking-wider text-neutral-400 uppercase transition-colors group-hover:text-neutral-300"
-                    >
-                        palestras
-                    </span>
-                </div>
-
-                <div
-                    v-if="activityCount !== 0"
-                    class="group flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.02] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8"
-                >
-                    <span
-                        class="text-3xl font-bold text-white transition-colors group-hover:text-neutral-100 sm:text-4xl"
-                    >
-                        {{ activityCount }}
-                    </span>
-                    <span
-                        class="mt-2 font-mono text-xs font-medium tracking-wider text-neutral-400 uppercase transition-colors group-hover:text-neutral-300"
-                    >
-                        atividades
-                    </span>
-                </div>
-
-                <div
-                    v-if="competitionCount !== 0"
-                    class="group flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.08),inset_0_1px_1px_rgba(255,255,255,0.05)] backdrop-blur-md transition-all duration-300 ease-out select-none hover:scale-[1.02] hover:border-white/15 hover:shadow-[0_6px_20px_rgba(0,0,0,0.18),inset_0_1px_1px_rgba(255,255,255,0.08)] sm:p-8"
-                >
-                    <span
-                        class="text-3xl font-bold text-white transition-colors group-hover:text-neutral-100 sm:text-4xl"
-                    >
-                        {{ competitionCount }}
-                    </span>
-                    <span
-                        class="mt-2 font-mono text-xs font-medium tracking-wider text-neutral-400 uppercase transition-colors group-hover:text-neutral-300"
-                    >
-                        {{
-                            competitionCount === 1
-                                ? "competição"
-                                : "competições"
-                        }}
-                    </span>
-                </div>
-            </div>
+            <AboutUsSection />
         </section>
 
-        <section id="speakers" class="relative w-full overflow-hidden py-20">
-            <div class="mb-10 flex justify-center px-4">
-                <PillSelector
-                    :items="[
-                        { id: 'speakers', label: 'Oradores', active: true },
-                    ]"
-                    size="sm"
-                    :wrap="false"
-                />
-            </div>
+        <section
+            id="stats"
+            class="landing-section relative flex h-screen min-h-dvh max-h-dvh w-full flex-col items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-8"
+        >
+            <StatsSection
+                :days="days"
+                :stand-count="standCount"
+                :talk-count="talkCount"
+                :activity-count="activityCount"
+                :competition-count="competitionCount"
+            />
+        </section>
 
-            <template v-if="speakers.length !== 0">
-                <div class="w-full px-2 sm:px-4 md:px-6">
-                    <SpeakersCarousel :speakers="speakers" />
-                </div>
-            </template>
-            <div v-else class="flex justify-center px-4">
-                <PillSelector
-                    :items="[
-                        { id: 'soon', label: 'Em breve...', disabled: true },
-                    ]"
-                    size="sm"
-                    :wrap="false"
-                />
-            </div>
+        <section
+            id="speakers"
+            class="landing-section relative flex h-screen min-h-dvh max-h-dvh w-full flex-col items-center justify-center overflow-hidden"
+        >
+            <SpeakersVerticalColumns :speakers="speakers" />
         </section>
 
         <section
             id="sponsors"
-            class="relative mx-auto w-full max-w-7xl px-4 py-20 sm:px-6 lg:px-8"
+            class="landing-section relative flex h-screen min-h-dvh max-h-dvh w-full flex-col items-center justify-center overflow-hidden"
         >
-            <div class="mb-10 flex justify-center">
-                <PillSelector
-                    :items="[
-                        { id: 'sponsors', label: 'Patrocínios', active: true },
-                    ]"
-                    size="sm"
-                    :wrap="false"
-                />
-            </div>
+            <SponsorsShowcase :sponsor-tiers="sponsorTiers" />
+        </section>
 
-            <div class="space-y-12">
-                <SponsorBanner
-                    v-for="(tier, idx) in sponsorTiers"
-                    :key="tier.id"
-                    :title="tier.name"
-                    :sponsors="tier.sponsors ?? []"
-                    :color="tier.color"
-                    :idx="idx"
-                />
-            </div>
+        <section
+            id="cta"
+            class="landing-section relative flex h-screen min-h-dvh max-h-dvh w-full flex-col items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-8"
+        >
+            <EventCtaSection :can-enroll="canEnroll" />
         </section>
     </AppLayout>
 </template>
diff --git a/resources/js/messages.ts b/resources/js/messages.ts
index 5bce73aa..e4680c61 100644
--- a/resources/js/messages.ts
+++ b/resources/js/messages.ts
@@ -1,8 +1,22 @@
 const messages = {
     en: {
         homePage: {
-            aboutUsText1: "Buh",
-            aboutUsText2: "Bimb",
+            aboutUsTitle: "Made by students, for students.",
+            aboutUsDescription:
+                "SINF is the annual tech conference organized by NIAEFEUP for students at the Faculty of Engineering of the University of Porto (FEUP). Across four days, we bring invited speakers, hands-on workshops with real-world tools, and tech companies looking for talent.",
+            pillar1Title: "Talks & Keynotes",
+            pillar1Desc:
+                "Guest speakers sharing real-world software engineering experiences, architectures, and lessons learned.",
+            pillar2Title: "Hands-on Workshops",
+            pillar2Desc:
+                "Practical sessions exploring tools, frameworks, and technologies beyond the academic syllabus.",
+            pillar3Title: "Companies & Stands",
+            pillar3Desc:
+                "Informal hallway chats with engineering teams actively recruiting interns and junior developers.",
+            aboutUsText1:
+                "SINF is the annual tech conference organized by NIAEFEUP for students at the Faculty of Engineering of the University of Porto (FEUP).",
+            aboutUsText2:
+                "Across four days, we bring invited speakers, hands-on workshops with real-world tools, and tech companies looking for talent.",
         },
         general: {
             to: "to",
@@ -34,10 +48,22 @@ const messages = {
     },
     pt: {
         homePage: {
+            aboutUsTitle: "Feita por estudantes, para estudantes.",
+            aboutUsDescription:
+                "A SINF é a conferência anual organizada pelo NIAEFEUP para os estudantes da Faculdade de Engenharia da Universidade do Porto. Durante quatro dias, trazemos oradores convidados, workshops práticos com ferramentas do mundo real e bancas de empresas à procura de talento.",
+            pillar1Title: "Palestras & Keynotes",
+            pillar1Desc:
+                "Oradores convidados a partilhar experiências reais de engenharia, arquiteturas e desafios da indústria.",
+            pillar2Title: "Workshops Práticos",
+            pillar2Desc:
+                "Sessões práticas para experimentar tecnologias, linguagens e ferramentas fora do plano curricular.",
+            pillar3Title: "Empresas & Bancas",
+            pillar3Desc:
+                "Contacto direto e informal nos corredores da faculdade com empresas a recrutar estagiários e juniores.",
             aboutUsText1:
-                "A Semana de Informática (SINF), organizada pelo Núcleo de Informática da Associação de Estudantes da Faculdade de Engenharia da Universidade do Porto (NIAEFEUP), foi criada com o intuito de permitir aos participantes desenvolver as suas capacidades nas diversas áreas da Informática, promovendo a sua interação com o mundo empresarial através de eventos sociais.",
+                "A SINF é a conferência anual organizada pelo NIAEFEUP para os estudantes da Faculdade de Engenharia da Universidade do Porto.",
             aboutUsText2:
-                "A edição de 2025 decorre entre os dias 21 e 23 de outubro. Os participantes têm a seu dispor palestras e workshops onde entrarão em contacto com diversas tecnologias e conceitos que não intervêm no percurso académico, focando-se portanto nas skills técnicas, assim como um pitch, sessões de entrevistas e visitas a empresas, fomentando o seu contacto com empresas de topo a nível nacional e internacional, podendo desenvolver as suas soft skills.",
+                "Durante quatro dias, trazemos oradores convidados, workshops práticos com ferramentas do mundo real e bancas de empresas à procura de talento.",
         },
         general: {
             to: "a",

From 08893d6df5715ce9fdbd6f3481b722992357282d Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Sun, 13 Sep 2026 12:11:29 +0100
Subject: [PATCH 30/33] fix: inconsitencies

---
 resources/css/app.css                         |   5 +
 .../Competition/CompetitionLeaderboard.vue    |  14 +-
 .../js/Components/Form/ConfirmsPassword.vue   |   1 +
 resources/js/Components/Home/InfoPopup.vue    | 174 +++++++++++-------
 .../js/Components/Home/SponsorsShowcase.vue   |  26 +--
 .../js/Components/Profile/AllParticipants.vue |   9 +-
 .../Profile/EnrolledParticipants.vue          |   9 +-
 resources/js/Components/Profile/QRCode.vue    |  18 +-
 .../js/Components/Program/StandDisplay.vue    |  18 +-
 resources/js/Components/Shop/ShopItem.vue     |   2 +
 resources/js/Layouts/AppLayout.vue            |   2 +-
 resources/js/Pages/Competition.vue            |  15 +-
 resources/js/Pages/Error.vue                  |   2 +-
 resources/js/Pages/Event.vue                  |  12 +-
 resources/js/Pages/Maintenance.vue            |  98 +++++-----
 .../LogoutOtherBrowserSessionsForm.vue        |   1 +
 .../Partials/TwoFactorAuthenticationForm.vue  |   2 +
 .../Partials/UpdateProfileInformationForm.vue |   4 +-
 resources/js/Pages/Profile/ScanCode.vue       |  21 ++-
 .../views/vendor/mail/html/button.blade.php   |  34 +---
 .../views/vendor/mail/html/footer.blade.php   |   4 +-
 .../views/vendor/mail/html/header.blade.php   |   6 +-
 .../views/vendor/mail/html/layout.blade.php   |  23 +--
 .../views/vendor/mail/html/panel.blade.php    |   6 +-
 24 files changed, 289 insertions(+), 217 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 300d3b3f..4bf1ccb5 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -13,7 +13,12 @@
         sans-serif;
 
     --color-sinf-primary: #9a0036;
+    --color-sinf-primary-dark: #630022;
+    --color-sinf-primary-light: #d6336c;
     --color-sinf-secondary: #6a00ff;
+    --color-sinf-secondary-dark: #4300a3;
+    --color-sinf-secondary-light: #9346ff;
+    --color-sinf-surface-dark: #0d0e12;
 
     --shadow-pill-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
     --shadow-pill-active:
diff --git a/resources/js/Components/Competition/CompetitionLeaderboard.vue b/resources/js/Components/Competition/CompetitionLeaderboard.vue
index 0b08253e..bfbae038 100644
--- a/resources/js/Components/Competition/CompetitionLeaderboard.vue
+++ b/resources/js/Components/Competition/CompetitionLeaderboard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type CompetitionTeam from "@/Types/CompetitionTeam";
+import PillSelector from "@/Components/UI/PillSelector.vue";
 
 interface Props {
     teams?: CompetitionTeam[];
@@ -77,12 +78,13 @@ const props = withDefaults(defineProps<Props>(), {
             v-else
             class="flex flex-col items-center justify-center py-20 text-center"
         >
-            <div class="pill-container mb-3 px-5 py-2">
-                <span class="text-sm font-medium text-neutral-400">
-                    Sem equipas registadas
-                </span>
-            </div>
-            <p class="text-xs text-neutral-500">
+            <PillSelector
+                :items="[{ id: 'empty', label: 'Sem equipas registadas', disabled: true }]"
+                size="sm"
+                :wrap="false"
+                container-class="mb-3"
+            />
+            <p class="text-xs text-neutral-400 sm:text-sm">
                 Ainda não existem equipas registadas nesta competição.
             </p>
         </div>
diff --git a/resources/js/Components/Form/ConfirmsPassword.vue b/resources/js/Components/Form/ConfirmsPassword.vue
index d18227ac..1c615030 100644
--- a/resources/js/Components/Form/ConfirmsPassword.vue
+++ b/resources/js/Components/Form/ConfirmsPassword.vue
@@ -103,6 +103,7 @@ const closeModal = () => {
                 </PrimaryButton>
 
                 <PrimaryButton
+                    color="primary"
                     :class="{ 'opacity-25': form.processing }"
                     :disabled="form.processing"
                     @click="confirmPassword"
diff --git a/resources/js/Components/Home/InfoPopup.vue b/resources/js/Components/Home/InfoPopup.vue
index 00e60d14..6dd1f113 100644
--- a/resources/js/Components/Home/InfoPopup.vue
+++ b/resources/js/Components/Home/InfoPopup.vue
@@ -1,91 +1,137 @@
 <script setup lang="ts">
 import Modal from "@/Components/UI/Modal.vue";
 import { inject, onMounted, ref } from "vue";
-import VueCookies from "vue-cookies";
+import type { VueCookies } from "vue-cookies";
 import { route } from "ziggy-js";
-import { router } from "@inertiajs/vue3";
-import PrimaryButton from "../UI/PrimaryButton.vue";
+import { router, Link } from "@inertiajs/vue3";
+import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
+import {
+    Calendar,
+    Briefcase,
+    Trophy,
+    ShoppingBag,
+    ArrowRight,
+    Sparkles,
+} from "@lucide/vue";
 
-const options = ref({
-    modelValue: false,
-});
+const isOpen = ref(false);
 
-const $cookies = inject<typeof VueCookies.VueCookies>("$cookies");
+const $cookies = inject<VueCookies>("$cookies");
 
 onMounted(() => {
-    options.value.modelValue = $cookies?.get("seenInfo") === null;
+    isOpen.value = $cookies?.get("seenInfo") === null;
 });
 
 const cacheSeenInfo = () => {
     $cookies?.set("seenInfo", true);
-    options.value.modelValue = false;
+    isOpen.value = false;
 };
 
 const enroll = () => {
     $cookies?.set("seenInfo", true);
+    isOpen.value = false;
     router.put(route("enroll"));
 };
 </script>
 
 <template>
-    <Modal v-model="options.modelValue" max-width="xl" @closed="cacheSeenInfo">
-        <div
-            class="flex flex-col items-center gap-6 text-center text-lg text-white"
-        >
-            <img class="w-72 p-4" src="/images/sinf logo.png" alt="SINF" />
-            <p class="font-medium">
-                A
-                <span class="text-sinf-primary-light font-bold">SINF</span> está
-                mais interativa do que nunca!
+    <Modal v-model="isOpen" max-width="lg" @closed="cacheSeenInfo">
+        <div class="flex flex-col">
+            <img
+                class="h-12 w-auto select-none sm:h-14 self-start"
+                src="/images/sinf-2026-sm.svg"
+                alt="SINF 2026 Logo"
+            />
+
+            <h2 class="mt-6 text-xl font-black tracking-tight text-white sm:text-2xl">
+                A SINF está mais interativa do que nunca!
+            </h2>
+            <p class="mt-2 max-w-md text-xs leading-relaxed text-neutral-400 sm:text-sm">
+                Participa nas atividades da conferência, interage com empresas parceiras e ganha SINFrões para trocares por prémios.
             </p>
-            <ul
-                class="flex flex-col items-center gap-2 text-sm text-neutral-300"
-            >
-                <li>
-                    Participa em
-                    <a
-                        :href="route('program', { day: 6 })"
-                        target="_blank"
-                        class="text-sinf-secondary-light underline hover:text-white"
-                        >Workshops e Palestras</a
-                    >
-                </li>
-                <li>
-                    Visita
-                    <a
-                        :href="route('program', { day: 1 })"
-                        target="_blank"
-                        class="text-sinf-secondary-light underline hover:text-white"
-                        >Bancas de Empresas</a
-                    >
-                </li>
-                <li>
-                    Compete nas
-                    <a
-                        :href="route('program', { day: 3 })"
-                        target="_blank"
-                        class="text-sinf-secondary-light underline hover:text-white"
-                        >Competições de CTF e Programação</a
-                    >
-                </li>
-            </ul>
-            <p class="text-sm text-neutral-300">
-                Ganha pontos e troca-os por prémios na
-                <a
+
+            <div class="mt-6 grid w-full grid-cols-1 gap-2.5 sm:grid-cols-2 text-left">
+                <Link
+                    :href="route('program')"
+                    class="group flex items-start gap-3 rounded-2xl border border-white/8 bg-white/3 p-3.5 transition-colors hover:border-white/16 hover:bg-white/6"
+                    @click="cacheSeenInfo"
+                >
+                    <div class="min-w-0 flex-1">
+                        <h4 class="text-xs font-bold text-white transition-colors group-hover:text-purple-300">
+                            Palestras e Workshops
+                        </h4>
+                        <p class="mt-0.5 text-[11px] leading-snug text-neutral-400">
+                            Aprende com especialistas da indústria.
+                        </p>
+                    </div>
+                </Link>
+
+                <Link
+                    :href="route('program')"
+                    class="group flex items-start gap-3 rounded-2xl border border-white/8 bg-white/3 p-3.5 transition-colors hover:border-white/16 hover:bg-white/6"
+                    @click="cacheSeenInfo"
+                >
+                    <div class="min-w-0 flex-1">
+                        <h4 class="text-xs font-bold text-white transition-colors group-hover:text-amber-300">
+                            Bancas de Empresas
+                        </h4>
+                        <p class="mt-0.5 text-[11px] leading-snug text-neutral-400">
+                            Conhece oportunidades de estágio e carreira.
+                        </p>
+                    </div>
+                </Link>
+
+                <div
+                    class="flex items-start gap-3 rounded-2xl border border-white/8 bg-white/3 p-3.5"
+                >
+                    <div class="min-w-0 flex-1">
+                        <h4 class="text-xs font-bold text-white">
+                            Competições
+                        </h4>
+                        <p class="mt-0.5 text-[11px] leading-snug text-neutral-400">
+                            Desafia-te em programação e CTF.
+                        </p>
+                    </div>
+                </div>
+
+                <Link
                     :href="route('shop.show')"
-                    target="_blank"
-                    class="text-sinf-secondary-light underline hover:text-white"
-                    >Loja</a
+                    class="group flex items-start gap-3 rounded-2xl border border-white/8 bg-white/3 p-3.5 transition-colors hover:border-white/16 hover:bg-white/6"
+                    @click="cacheSeenInfo"
                 >
-            </p>
-            <PrimaryButton
-                color="gradient"
-                text-size="text-base"
-                padding="px-8 py-2.5"
-                @click="enroll"
-            >
-                Inscrever-me
-            </PrimaryButton>
+                    <div class="min-w-0 flex-1">
+                        <h4 class="text-xs font-bold text-white transition-colors group-hover:text-rose-300">
+                            Loja SINF
+                        </h4>
+                        <p class="mt-0.5 text-[11px] leading-snug text-neutral-400">
+                            Troca SINFrões por merchandising e prémios.
+                        </p>
+                    </div>
+                </Link>
+            </div>
+
+            <div class="mt-6 flex w-full flex-col sm:flex-row items-center justify-center gap-3">
+                <PrimaryButton
+                    color="pill"
+                    padding="px-5 py-2.5"
+                    text-size="text-xs sm:text-sm"
+                    class="w-full sm:w-auto"
+                    @click="cacheSeenInfo"
+                >
+                    Explorar
+                </PrimaryButton>
+
+                <PrimaryButton
+                    color="pill"
+                    padding="px-6 py-2.5"
+                    text-size="text-xs sm:text-sm"
+                    class="w-full sm:w-auto"
+                    @click="enroll"
+                >
+                    <span>Inscrever-me na SINF</span>
+                    <ArrowRight :size="14" />
+                </PrimaryButton>
+            </div>
         </div>
     </Modal>
 </template>
diff --git a/resources/js/Components/Home/SponsorsShowcase.vue b/resources/js/Components/Home/SponsorsShowcase.vue
index 9a2e4432..2b50e3ef 100644
--- a/resources/js/Components/Home/SponsorsShowcase.vue
+++ b/resources/js/Components/Home/SponsorsShowcase.vue
@@ -260,11 +260,11 @@ const marqueeRow2 = computed(() => {
         </template>
 
         <div v-else class="flex justify-center py-10">
-            <div
-                class="pill-container px-6 py-2.5 font-mono text-xs text-neutral-400"
-            >
-                Em breve...
-            </div>
+            <PillSelector
+                :items="[{ id: 'soon', label: 'Em breve...', disabled: true }]"
+                size="sm"
+                :wrap="false"
+            />
         </div>
 
         <Modal :show="isModalOpen" max-width="md" @close="closeSponsorModal">
@@ -294,23 +294,27 @@ const marqueeRow2 = computed(() => {
                         </div>
                     </div>
 
+                    <div
+                        v-if="selectedSponsor.company?.description_html"
+                        class="prose prose-invert prose-sm max-h-60 w-full overflow-y-auto px-2 text-justify leading-relaxed text-neutral-300"
+                        v-html="selectedSponsor.company.description_html"
+                    />
                     <p
-                        v-if="selectedSponsor.company?.description"
+                        v-else-if="selectedSponsor.company?.description"
                         class="mt-2 text-sm leading-relaxed text-neutral-300"
                     >
                         {{ selectedSponsor.company.description }}
                     </p>
 
                     <div
-                        v-if="selectedSponsor.company?.user?.usertype"
+                        v-if="selectedSponsor.company?.social_media?.website"
                         class="mt-4 flex justify-center border-t border-white/10 pt-4 w-full"
                     >
                         <a
                             :href="
-                                selectedSponsor.company.user.usertype.toString()
-                                    .startsWith('http')
-                                    ? selectedSponsor.company.user.usertype.toString()
-                                    : `https://${selectedSponsor.company.user.usertype}`
+                                selectedSponsor.company.social_media.website.startsWith('http')
+                                    ? selectedSponsor.company.social_media.website
+                                    : `https://${selectedSponsor.company.social_media.website}`
                             "
                             target="_blank"
                             rel="noopener noreferrer"
diff --git a/resources/js/Components/Profile/AllParticipants.vue b/resources/js/Components/Profile/AllParticipants.vue
index 228044f1..a1f7aad8 100644
--- a/resources/js/Components/Profile/AllParticipants.vue
+++ b/resources/js/Components/Profile/AllParticipants.vue
@@ -295,16 +295,19 @@ const filteredParticipants = computed(() => {
                     com o filtro selecionado</span
                 >.
             </p>
-            <button
+            <PrimaryButton
                 type="button"
-                class="text-sinf-primary mt-2 text-xs hover:underline"
+                color="pill"
+                padding="px-4 py-1.5"
+                text-size="text-xs"
+                class="mt-3"
                 @click="
                     searchQuery = '';
                     filterType = 'all';
                 "
             >
                 Limpar filtros
-            </button>
+            </PrimaryButton>
         </div>
     </div>
 
diff --git a/resources/js/Components/Profile/EnrolledParticipants.vue b/resources/js/Components/Profile/EnrolledParticipants.vue
index f74fa129..ff56ebe9 100644
--- a/resources/js/Components/Profile/EnrolledParticipants.vue
+++ b/resources/js/Components/Profile/EnrolledParticipants.vue
@@ -294,16 +294,19 @@ const filteredVisitors = computed(() => {
                     com o filtro selecionado</span
                 >.
             </p>
-            <button
+            <PrimaryButton
                 type="button"
-                class="text-sinf-primary mt-2 text-xs hover:underline"
+                color="pill"
+                padding="px-4 py-1.5"
+                text-size="text-xs"
+                class="mt-3"
                 @click="
                     searchQuery = '';
                     filterType = 'all';
                 "
             >
                 Limpar filtros
-            </button>
+            </PrimaryButton>
         </div>
     </div>
 
diff --git a/resources/js/Components/Profile/QRCode.vue b/resources/js/Components/Profile/QRCode.vue
index 2ca74a0b..929e3aa0 100644
--- a/resources/js/Components/Profile/QRCode.vue
+++ b/resources/js/Components/Profile/QRCode.vue
@@ -54,7 +54,7 @@ const showQRCode = () => {
             <span v-if="loading" class="text-sm text-neutral-400"
                 >A gerar código...</span
             >
-            <template v-else>
+            <template v-else-if="participant.quest_qr_code || participant.quest_code">
                 <div
                     v-if="participant.quest_qr_code"
                     class="flex items-center justify-center rounded-2xl bg-white p-4"
@@ -71,6 +71,22 @@ const showQRCode = () => {
                     </code>
                 </div>
             </template>
+            <div v-else class="py-4 text-center text-sm text-neutral-400">
+                Não foi possível carregar o código. Tenta novamente mais tarde.
+            </div>
         </div>
+
+        <template #footer>
+            <div class="flex w-full justify-end">
+                <PrimaryButton
+                    color="pill"
+                    padding="px-5 py-1.5"
+                    text-size="text-xs"
+                    @click="modalOpen = false"
+                >
+                    Fechar
+                </PrimaryButton>
+            </div>
+        </template>
     </Modal>
 </template>
diff --git a/resources/js/Components/Program/StandDisplay.vue b/resources/js/Components/Program/StandDisplay.vue
index cd24e930..b3e672e0 100644
--- a/resources/js/Components/Program/StandDisplay.vue
+++ b/resources/js/Components/Program/StandDisplay.vue
@@ -3,6 +3,7 @@ import type Stand from "@/Types/Stand";
 import Sponsor from "@/Components/Home/Sponsor.vue";
 import type { CompanyUser } from "@/Types/User";
 import type SponsorTier from "@/Types/SponsorTier";
+import PillSelector from "@/Components/UI/PillSelector.vue";
 import { computed } from "vue";
 
 interface Props {
@@ -43,7 +44,7 @@ const standsPerTier = computed(() => {
 </script>
 
 <template>
-    <div class="space-y-12 py-4">
+    <div v-if="standsPerTier.size > 0" class="space-y-12 py-4">
         <template v-for="[tierId, tierStands] in standsPerTier" :key="tierId">
             <section v-if="tierStands.length > 0" class="w-full">
                 <div class="mb-6 flex items-center justify-center">
@@ -71,4 +72,19 @@ const standsPerTier = computed(() => {
             </section>
         </template>
     </div>
+
+    <div
+        v-else
+        class="flex flex-col items-center justify-center py-16 text-center"
+    >
+        <PillSelector
+            :items="[{ id: 'soon', label: 'Em breve...', disabled: true }]"
+            size="sm"
+            :wrap="false"
+            container-class="mb-3"
+        />
+        <p class="max-w-md text-xs text-neutral-400 sm:text-sm">
+            As bancas de empresas para esta edição serão anunciadas brevemente.
+        </p>
+    </div>
 </template>
diff --git a/resources/js/Components/Shop/ShopItem.vue b/resources/js/Components/Shop/ShopItem.vue
index 7490bc05..ded013a4 100644
--- a/resources/js/Components/Shop/ShopItem.vue
+++ b/resources/js/Components/Shop/ShopItem.vue
@@ -520,6 +520,7 @@ const redeemProduct = (enrollmentId: number) => {
                     </span>
                     <PrimaryButton
                         v-else
+                        color="primary"
                         padding="px-3.5 py-1"
                         text-size="text-[11px] font-semibold"
                         :disabled="isRedeemingId === enrollment.id"
@@ -563,6 +564,7 @@ const redeemProduct = (enrollmentId: number) => {
                 <template v-if="activeTab === 'buy' && user && isEnrolled">
                     <PrimaryButton
                         v-if="!isAlreadyBought && !isOutOfStock"
+                        color="primary"
                         padding="px-5 py-1.5"
                         text-size="text-xs"
                         :disabled="!hasEnoughPoints || isBuying"
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index aa4546fd..817c6b9b 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -12,7 +12,7 @@ defineProps<Props>();
 </script>
 
 <template>
-    <div class="relative flex min-h-screen flex-col bg-olive-950 text-white">
+    <div class="relative flex min-h-screen flex-col bg-sinf-surface-dark text-white">
         <Head :title="title" />
 
         <GlowingOrbs />
diff --git a/resources/js/Pages/Competition.vue b/resources/js/Pages/Competition.vue
index c87e4fc7..ad48e1ec 100644
--- a/resources/js/Pages/Competition.vue
+++ b/resources/js/Pages/Competition.vue
@@ -307,12 +307,15 @@ const activeTab = ref<CompetitionTab>(defaultTab.value);
                 v-if="availableTabs.length === 0"
                 class="flex flex-col items-center justify-center py-20 text-center"
             >
-                <div class="pill-container mb-4 px-6 py-2.5">
-                    <span class="text-xs text-neutral-400 sm:text-sm">
-                        Não há informações adicionais disponíveis para esta
-                        competição.
-                    </span>
-                </div>
+                <PillSelector
+                    :items="[{ id: 'info', label: 'Em breve...', disabled: true }]"
+                    size="sm"
+                    :wrap="false"
+                    container-class="mb-3"
+                />
+                <p class="max-w-md text-xs text-neutral-400 sm:text-sm">
+                    Não há informações adicionais disponíveis para esta competição de momento.
+                </p>
             </div>
         </div>
     </AppLayout>
diff --git a/resources/js/Pages/Error.vue b/resources/js/Pages/Error.vue
index e18635c1..1f39295b 100644
--- a/resources/js/Pages/Error.vue
+++ b/resources/js/Pages/Error.vue
@@ -37,7 +37,7 @@ const messages = computed(
 <template>
     <Head :title="props.status.toString()" />
 
-    <div class="relative min-h-screen bg-olive-950 text-white">
+    <div class="relative min-h-screen bg-[#0d0e12] text-white">
         <GlowingOrbs />
 
         <main
diff --git a/resources/js/Pages/Event.vue b/resources/js/Pages/Event.vue
index 8640e7f3..c2f18498 100644
--- a/resources/js/Pages/Event.vue
+++ b/resources/js/Pages/Event.vue
@@ -14,7 +14,7 @@ import QuickScroll from "@/Components/UI/QuickScroll.vue";
 import PillSelector, {
     type PillOption,
 } from "@/Components/UI/PillSelector.vue";
-import { QrCode } from "@lucide/vue";
+import { QrCode, Users } from "@lucide/vue";
 
 interface Props {
     event: Event;
@@ -492,10 +492,14 @@ const scanCodeTabItems = computed<PillOption[]>(() => [
 
                 <div
                     v-else
-                    class="flex flex-col items-center justify-center py-12 text-center"
+                    class="flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 py-16 text-center"
                 >
-                    <p class="text-sm text-neutral-400">
-                        Ainda não existem participantes inscritos neste evento.
+                    <Users :size="36" class="mb-3 text-neutral-600 opacity-40" />
+                    <h3 class="text-base font-semibold text-white">
+                        Sem participantes inscritos
+                    </h3>
+                    <p class="mt-1 max-w-sm text-xs text-neutral-400">
+                        Ainda não existem participantes inscritos nesta sessão.
                     </p>
                 </div>
             </div>
diff --git a/resources/js/Pages/Maintenance.vue b/resources/js/Pages/Maintenance.vue
index b71e1a98..c6600e5c 100644
--- a/resources/js/Pages/Maintenance.vue
+++ b/resources/js/Pages/Maintenance.vue
@@ -1,70 +1,56 @@
 <script setup lang="ts">
 import { Head } from "@inertiajs/vue3";
 import GlowingOrbs from "@/Components/UI/GlowingOrbs.vue";
+import SocialIcon from "@/Components/UI/SocialIcon.vue";
 </script>
 
 <template>
-    <Head title="semana de informática 2026" />
+    <Head title="Semana de Informática 2026" />
 
-    <div class="relative min-h-screen bg-olive-950 text-white">
+    <div class="relative min-h-screen bg-[#0d0e12] text-white">
         <GlowingOrbs />
 
-        <main class="relative z-10 min-h-screen">
-            <div
-                class="flex min-h-screen flex-col content-center items-center justify-evenly"
-            >
-                <div class="relative flex flex-col items-center">
-                    <img
-                        id="svg-logo"
-                        class="h-32 p-4 select-none"
-                        src="/images/sinf2026.svg"
-                        alt="SINF 2026 logo"
-                    />
-                    <p
-                        class="absolute inset-x-0 top-full mt-12 text-center text-lg font-medium tracking-wide text-white select-none sm:mt-24"
+        <main class="relative z-10 flex min-h-screen flex-col items-center justify-center px-4 py-16">
+            <div class="flex flex-col items-center text-center">
+                <img
+                    id="svg-logo"
+                    class="h-28 p-2 select-none sm:h-36"
+                    src="/images/sinf2026.svg"
+                    alt="SINF 2026 logo"
+                />
+
+                <p class="mt-8 text-lg font-medium tracking-wide text-neutral-300 select-none sm:text-xl">
+                    Brevemente
+                </p>
+
+                <div class="mt-8 flex items-center justify-center gap-4 select-none">
+                    <a
+                        href="https://www.instagram.com/sinffeup/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        aria-label="Instagram"
+                        class="pill-container pill-item flex h-10 w-10 items-center justify-center text-neutral-400 transition-colors hover:text-white"
+                    >
+                        <SocialIcon platform="instagram" :size="18" />
+                    </a>
+                    <a
+                        href="https://www.facebook.com/sinffeup/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        aria-label="Facebook"
+                        class="pill-container pill-item flex h-10 w-10 items-center justify-center text-neutral-400 transition-colors hover:text-white"
                     >
-                        Brevemente
-                    </p>
-                    <div
-                        class="absolute inset-x-0 top-full mt-22 flex flex-row items-center justify-center space-x-3 select-none sm:mt-34"
+                        <SocialIcon platform="facebook" :size="18" />
+                    </a>
+                    <a
+                        href="https://www.linkedin.com/company/sinffeup"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        aria-label="LinkedIn"
+                        class="pill-container pill-item flex h-10 w-10 items-center justify-center text-neutral-400 transition-colors hover:text-white"
                     >
-                        <a
-                            href="https://www.instagram.com/sinffeup/"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            class="text-white transition-opacity hover:opacity-80"
-                        >
-                            <img
-                                class="w-4"
-                                src="/images/instagram.svg"
-                                alt="Instagram"
-                            />
-                        </a>
-                        <a
-                            href="https://www.facebook.com/sinffeup/"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            class="text-white transition-opacity hover:opacity-80"
-                        >
-                            <img
-                                class="w-4"
-                                src="/images/facebook.svg"
-                                alt="Facebook"
-                            />
-                        </a>
-                        <a
-                            href="https://www.linkedin.com/company/sinffeup"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            class="text-white transition-opacity hover:opacity-80"
-                        >
-                            <img
-                                class="w-4"
-                                src="/images/linkedin.svg"
-                                alt="LinkedIn"
-                            />
-                        </a>
-                    </div>
+                        <SocialIcon platform="linkedin" :size="18" />
+                    </a>
                 </div>
             </div>
         </main>
diff --git a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
index 78b840fb..d0438f4f 100644
--- a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
+++ b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
@@ -162,6 +162,7 @@ const closeModal = () => {
             </PrimaryButton>
 
             <PrimaryButton
+                color="primary"
                 :class="{ 'opacity-25': form.processing }"
                 :disabled="form.processing"
                 @click="logoutOtherBrowserSessions"
diff --git a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
index db4f2c27..65307b01 100644
--- a/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
+++ b/resources/js/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue
@@ -314,6 +314,7 @@ const copySetupKey = () => {
 
                 <PrimaryButton
                     type="button"
+                    color="primary"
                     :class="{ 'opacity-25': confirmationForm.processing }"
                     :disabled="confirmationForm.processing"
                     @click="confirmTwoFactorAuthentication"
@@ -368,6 +369,7 @@ const copySetupKey = () => {
 
                 <PrimaryButton
                     type="button"
+                    color="primary"
                     @click="recoveryCodesModalOpen = false"
                 >
                     Concluído
diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
index 6e7fc8b0..5d3fe377 100644
--- a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
+++ b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -115,7 +115,7 @@ const form = useForm({
     _method: "PUT",
     name: user ? user.name : "",
     email: user ? user.email : "",
-    type: (user?.usertype_type.split("\\").pop() ?? "").toLowerCase() as
+    type: (user?.usertype_type.split("\\\\").pop() ?? "").toLowerCase() as
         "participant" | "company" | "speaker" | "admin",
     title: isSpeaker ? (user?.usertype?.title ?? "") : "",
     description:
@@ -498,7 +498,7 @@ const sendEmailVerification = () => {
                         <PrimaryButton
                             v-if="photoPreview"
                             type="button"
-                            color="pill"
+                            color="primary"
                             padding="px-4 py-1.5"
                             :disabled="photoForm.processing"
                             @click="savePhoto"
diff --git a/resources/js/Pages/Profile/ScanCode.vue b/resources/js/Pages/Profile/ScanCode.vue
index 1e4731b4..59cc4b9b 100644
--- a/resources/js/Pages/Profile/ScanCode.vue
+++ b/resources/js/Pages/Profile/ScanCode.vue
@@ -745,17 +745,18 @@ onMounted(() => {
                         </div>
                     </div>
 
-                    <div class="pt-2">
-                        <PrimaryButton
-                            type="button"
-                            color="pill"
-                            full-width
-                            @click="showInstructionsModal = false"
-                        >
-                            Entendido
-                        </PrimaryButton>
-                    </div>
                 </div>
+
+                <template #footer>
+                    <PrimaryButton
+                        type="button"
+                        color="primary"
+                        full-width
+                        @click="showInstructionsModal = false"
+                    >
+                        Entendido
+                    </PrimaryButton>
+                </template>
             </Modal>
         </div>
     </AppLayout>
diff --git a/resources/views/vendor/mail/html/button.blade.php b/resources/views/vendor/mail/html/button.blade.php
index 4605c594..9e8d877d 100644
--- a/resources/views/vendor/mail/html/button.blade.php
+++ b/resources/views/vendor/mail/html/button.blade.php
@@ -1,35 +1,15 @@
-@props(['url', 'color' => 'teal', 'shadow' => 'orange', 'align' => 'center'])
+@props(['url', 'color' => 'primary', 'align' => 'center'])
 
-@php
-    $color = match ($color) {
-        'primary' => 'teal',
-        'success' => 'teal-dark',
-        'danger' => 'red-dark',
-        default => $color,
-    };
-    $shadow = match ($color) {
-        'danger' => 'teal',
-        'success', 'primary' => 'orange',
-        default => $shadow,
-    };
-@endphp
-
-<table class="m-8 mx-auto text-center w-full" align="{{ $align }}" width="100%" cellpadding="0" cellspacing="0"
-    role="presentation">
+<table class="mx-auto text-center w-full" align="{{ $align }}" width="100%" cellpadding="0" cellspacing="0"
+    role="presentation" style="margin: 24px 0;">
     <tr>
         <td align="{{ $align }}">
-            <table width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
+            <table border="0" cellpadding="0" cellspacing="0" role="presentation">
                 <tr>
                     <td align="{{ $align }}">
-                        <table border="0" cellpadding="0" cellspacing="0" role="presentation">
-                            <tr>
-                                <td>
-                                    <a href="{{ $url }}"
-                                        class="text-white text-md p-2 font-semibold transition-shadow hover:shadow-md active:shadow-none border border-black bg-2023-{{ $color }} shadow-2023-{{ $shadow }}"
-                                        target="_blank" rel="noopener">{{ $slot }}</a>
-                                </td>
-                            </tr>
-                        </table>
+                        <a href="{{ $url }}"
+                            style="display: inline-block; padding: 10px 24px; border-radius: 9999px; background: linear-gradient(135deg, #9a0036 0%, #6a00ff 100%); color: #ffffff; font-weight: 600; font-size: 14px; text-decoration: none; box-shadow: 0 4px 14px rgba(154, 0, 54, 0.35);"
+                            target="_blank" rel="noopener">{{ $slot }}</a>
                     </td>
                 </tr>
             </table>
diff --git a/resources/views/vendor/mail/html/footer.blade.php b/resources/views/vendor/mail/html/footer.blade.php
index 3257838e..5ad43622 100644
--- a/resources/views/vendor/mail/html/footer.blade.php
+++ b/resources/views/vendor/mail/html/footer.blade.php
@@ -1,8 +1,8 @@
 <tr>
     <td>
-        <table class="max-w-xl text-center" align="center" role="presentation">
+        <table class="max-w-xl text-center" align="center" role="presentation" style="max-width: 580px; margin: 0 auto;">
             <tr>
-                <td class="p-8 text-2023-teal font-bold text-md" align="center">
+                <td style="padding: 24px 16px; font-size: 12px; color: #71717a; text-align: center;" align="center">
                     {{ Illuminate\Mail\Markdown::parse($slot) }}
                 </td>
             </tr>
diff --git a/resources/views/vendor/mail/html/header.blade.php b/resources/views/vendor/mail/html/header.blade.php
index 65357bdd..79ecc0e6 100644
--- a/resources/views/vendor/mail/html/header.blade.php
+++ b/resources/views/vendor/mail/html/header.blade.php
@@ -1,9 +1,9 @@
 @props(['url'])
 <tr>
-    <td class="p-6" align="center">
-        <a href="{{ $url }}" class="inline-block font-bold text-2023-teal-dark">
+    <td class="p-6" align="center" style="padding: 24px;">
+        <a href="{{ $url }}" style="display: inline-block;">
             @if (trim($slot) === 'SINF')
-                <img src="{{ asset('images/sinf logo.png') }}" class="h-12 w-auto max-h-12 object-contain" alt="SINF Logo">
+                <img src="{{ asset('images/sinf2026.svg') }}" style="height: 40px; width: auto; max-height: 40px; object-fit: contain;" alt="SINF 2026">
             @else
                 {{ $slot }}
             @endif
diff --git a/resources/views/vendor/mail/html/layout.blade.php b/resources/views/vendor/mail/html/layout.blade.php
index d4b16b88..01889de5 100644
--- a/resources/views/vendor/mail/html/layout.blade.php
+++ b/resources/views/vendor/mail/html/layout.blade.php
@@ -6,29 +6,26 @@
     <title>{{ config('app.name') }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <meta name="color-scheme" content="light">
-    <meta name="supported-color-schemes" content="light">
-
-    <link rel="stylesheet" href="{{ public_path(vite('resources/js/app.css', relative: true, hotServer: false)) }}">
-    <!-- HACK: lets ignore the fact that the CSS file in the JS file -->
+    <meta name="color-scheme" content="dark">
+    <meta name="supported-color-schemes" content="dark">
 </head>
 
-<body class="bg-2023-bg">
-    <table class="m-0 p-0 w-full bg-2023-bg" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<body style="margin: 0; padding: 0; background-color: #0d0e12; color: #e2e8f0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">
+    <table class="m-0 p-0 w-full" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #0d0e12;">
         <tr>
-            <td align="center">
+            <td align="center" style="padding: 20px 10px;">
                 <table class="m-0 p-0 w-full" width="100%" cellpadding="0" cellspacing="0" role="presentation">
                     {{ $header ?? '' }}
 
                     <!-- Email Body -->
                     <tr>
-                        <td class="w-full" width="100%" cellpadding="0" cellspacing="0"
-                            style="border: hidden !important;">
-                            <table class="mx-auto max-w-xl border shadow-lg shadow-2023-orange w-full" align="center"
-                                cellpadding="0" cellspacing="0" role="presentation">
+                        <td class="w-full" width="100%" cellpadding="0" cellspacing="0">
+                            <table class="mx-auto max-w-xl w-full" align="center"
+                                cellpadding="0" cellspacing="0" role="presentation"
+                                style="max-width: 580px; width: 100%; margin: 0 auto; background-color: #14161f; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden;">
                                 <!-- Body content -->
                                 <tr>
-                                    <td class="p-8 prose">
+                                    <td style="padding: 32px; color: #e2e8f0; font-size: 15px; line-height: 1.6;">
                                         {{ Illuminate\Mail\Markdown::parse($slot) }}
 
                                         {{ $subcopy ?? '' }}
diff --git a/resources/views/vendor/mail/html/panel.blade.php b/resources/views/vendor/mail/html/panel.blade.php
index 81e1988a..d1baa6b2 100644
--- a/resources/views/vendor/mail/html/panel.blade.php
+++ b/resources/views/vendor/mail/html/panel.blade.php
@@ -1,9 +1,9 @@
-<table class="border" width="100%" cellpadding="0" cellspacing="0" role="presentation">
+<table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="margin: 20px 0;">
     <tr>
-        <td class="bg-2023-teal-dark text-white">
+        <td style="background-color: #1a1c26; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); padding: 16px; color: #e2e8f0;">
             <table width="100%" cellpadding="0" cellspacing="0" role="presentation">
                 <tr>
-                    <td class="p-0 prose prose-white">
+                    <td style="padding: 0; font-size: 14px; line-height: 1.5;">
                         {{ Illuminate\Mail\Markdown::parse($slot) }}
                     </td>
                 </tr>

From 26e02c7900ded33cc9249586109abf436c1101f1 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Sun, 13 Sep 2026 12:18:05 +0100
Subject: [PATCH 31/33] formatted and linted

---
 .../Competition/CompetitionLeaderboard.vue    |  8 +-
 resources/js/Components/Form/Checkbox.vue     |  2 +-
 resources/js/Components/Form/TextInput.vue    |  2 +-
 .../js/Components/Home/AboutUsSection.vue     | 12 +--
 .../js/Components/Home/EventCtaSection.vue    | 44 +++++----
 resources/js/Components/Home/InfoPopup.vue    | 58 +++++++----
 .../Home/SpeakersVerticalColumns.vue          | 33 ++++---
 .../js/Components/Home/SponsorsShowcase.vue   | 86 ++++++++++------
 resources/js/Components/Home/StatsSection.vue | 27 ++----
 resources/js/Components/Profile/QRCode.vue    |  4 +-
 resources/js/Composables/useScrollReveal.ts   |  6 +-
 resources/js/Composables/useSectionScroll.ts  |  6 +-
 resources/js/Layouts/AdminLayout.vue          |  7 +-
 resources/js/Layouts/AppLayout.vue            |  4 +-
 resources/js/Pages/Admin.vue                  | 97 +++++++++++++++----
 .../js/Pages/CRUD/CompetitionTeam/Index.vue   |  4 +-
 resources/js/Pages/CRUD/Enrollment/Index.vue  | 14 ++-
 resources/js/Pages/CRUD/Event/Index.vue       | 12 ++-
 resources/js/Pages/CRUD/Product/Index.vue     | 11 +--
 resources/js/Pages/CRUD/Slot/Index.vue        |  9 +-
 resources/js/Pages/CRUD/Sponsor/Index.vue     |  5 +-
 resources/js/Pages/CRUD/SponsorTier/Index.vue | 24 +++--
 resources/js/Pages/CRUD/Staff/Index.vue       | 18 +++-
 resources/js/Pages/CRUD/Stand/Index.vue       |  5 +-
 resources/js/Pages/CRUD/User/Create.vue       |  2 +-
 resources/js/Pages/CRUD/User/Edit.vue         |  7 +-
 resources/js/Pages/Competition.vue            |  7 +-
 resources/js/Pages/Event.vue                  |  5 +-
 resources/js/Pages/Home.vue                   | 28 +++---
 resources/js/Pages/Maintenance.vue            | 12 ++-
 resources/js/Pages/Profile/ScanCode.vue       |  1 -
 31 files changed, 365 insertions(+), 195 deletions(-)

diff --git a/resources/js/Components/Competition/CompetitionLeaderboard.vue b/resources/js/Components/Competition/CompetitionLeaderboard.vue
index bfbae038..48b0b9ca 100644
--- a/resources/js/Components/Competition/CompetitionLeaderboard.vue
+++ b/resources/js/Components/Competition/CompetitionLeaderboard.vue
@@ -79,7 +79,13 @@ const props = withDefaults(defineProps<Props>(), {
             class="flex flex-col items-center justify-center py-20 text-center"
         >
             <PillSelector
-                :items="[{ id: 'empty', label: 'Sem equipas registadas', disabled: true }]"
+                :items="[
+                    {
+                        id: 'empty',
+                        label: 'Sem equipas registadas',
+                        disabled: true,
+                    },
+                ]"
                 size="sm"
                 :wrap="false"
                 container-class="mb-3"
diff --git a/resources/js/Components/Form/Checkbox.vue b/resources/js/Components/Form/Checkbox.vue
index 9a92b3ab..d59e3630 100644
--- a/resources/js/Components/Form/Checkbox.vue
+++ b/resources/js/Components/Form/Checkbox.vue
@@ -44,6 +44,6 @@ const proxyChecked = computed({
         :name="name"
         :value="value"
         :required="required"
-        class="h-4.5 w-4.5 cursor-pointer rounded-md border border-white/20 bg-white/5 text-white checked:border-white/50 checked:bg-white/30 focus:ring-2 focus:ring-white/20 focus:ring-offset-0 focus:outline-hidden transition-all duration-150 hover:border-white/40 hover:bg-white/10"
+        class="h-4.5 w-4.5 cursor-pointer rounded-md border border-white/20 bg-white/5 text-white transition-all duration-150 checked:border-white/50 checked:bg-white/30 hover:border-white/40 hover:bg-white/10 focus:ring-2 focus:ring-white/20 focus:ring-offset-0 focus:outline-hidden"
     />
 </template>
diff --git a/resources/js/Components/Form/TextInput.vue b/resources/js/Components/Form/TextInput.vue
index 98d787f6..8f317c2f 100644
--- a/resources/js/Components/Form/TextInput.vue
+++ b/resources/js/Components/Form/TextInput.vue
@@ -99,7 +99,7 @@ const visible = ref(false);
                 v-model="value"
                 :name="name ?? id"
                 :autocomplete="autocomplete"
-                class="[&>option:checked]:bg-white/20 w-full cursor-pointer border-0 bg-transparent text-sm text-white shadow-none outline-none focus:border-transparent focus:shadow-none focus:ring-0 focus:outline-none [&>option]:bg-[#121319] [&>option]:px-3 [&>option]:py-2.5 [&>option]:text-white [&>option:checked]:text-white"
+                class="w-full cursor-pointer border-0 bg-transparent text-sm text-white shadow-none outline-none focus:border-transparent focus:shadow-none focus:ring-0 focus:outline-none [&>option]:bg-[#121319] [&>option]:px-3 [&>option]:py-2.5 [&>option]:text-white [&>option:checked]:bg-white/20 [&>option:checked]:text-white"
                 :class="[
                     props.multiple
                         ? 'min-h-36 rounded-xl p-2 text-xs leading-relaxed'
diff --git a/resources/js/Components/Home/AboutUsSection.vue b/resources/js/Components/Home/AboutUsSection.vue
index 4c84517c..109d8e2a 100644
--- a/resources/js/Components/Home/AboutUsSection.vue
+++ b/resources/js/Components/Home/AboutUsSection.vue
@@ -16,7 +16,7 @@ const { targetRef, isVisible } = useScrollReveal({
             class="grid grid-cols-1 items-start gap-6 lg:grid-cols-12 lg:gap-12"
         >
             <div
-                class="self-center lg:col-span-6 xl:col-span-7 transition-all duration-700 ease-in-out"
+                class="self-center transition-all duration-700 ease-in-out lg:col-span-6 xl:col-span-7"
                 :class="[
                     isVisible
                         ? 'translate-y-0 opacity-100'
@@ -32,7 +32,7 @@ const { targetRef, isVisible } = useScrollReveal({
             </div>
 
             <div
-                class="text-base leading-relaxed text-neutral-300 transition-all duration-700 ease-in-out delay-150 sm:text-lg lg:col-span-6 lg:pt-6 xl:col-span-5"
+                class="text-base leading-relaxed text-neutral-300 transition-all delay-150 duration-700 ease-in-out sm:text-lg lg:col-span-6 lg:pt-6 xl:col-span-5"
                 :class="[
                     isVisible
                         ? 'translate-y-0 opacity-100'
@@ -46,7 +46,7 @@ const { targetRef, isVisible } = useScrollReveal({
         </div>
 
         <div
-            class="mt-8 grid grid-cols-1 gap-6 border-t border-white/10 pt-6 transition-all duration-700 ease-in-out delay-250 sm:mt-10 sm:pt-8 md:grid-cols-3 md:gap-8 lg:gap-12"
+            class="mt-8 grid grid-cols-1 gap-6 border-t border-white/10 pt-6 transition-all delay-250 duration-700 ease-in-out sm:mt-10 sm:pt-8 md:grid-cols-3 md:gap-8 lg:gap-12"
             :class="[
                 isVisible
                     ? 'border-white/10 opacity-100'
@@ -54,7 +54,7 @@ const { targetRef, isVisible } = useScrollReveal({
             ]"
         >
             <div
-                class="space-y-1.5 transition-all duration-700 ease-in-out delay-300"
+                class="space-y-1.5 transition-all delay-300 duration-700 ease-in-out"
                 :class="[
                     isVisible
                         ? 'translate-y-0 opacity-100'
@@ -70,7 +70,7 @@ const { targetRef, isVisible } = useScrollReveal({
             </div>
 
             <div
-                class="space-y-1.5 transition-all duration-700 ease-in-out delay-400"
+                class="space-y-1.5 transition-all delay-400 duration-700 ease-in-out"
                 :class="[
                     isVisible
                         ? 'translate-y-0 opacity-100'
@@ -86,7 +86,7 @@ const { targetRef, isVisible } = useScrollReveal({
             </div>
 
             <div
-                class="space-y-1.5 transition-all duration-700 ease-in-out delay-500"
+                class="space-y-1.5 transition-all delay-500 duration-700 ease-in-out"
                 :class="[
                     isVisible
                         ? 'translate-y-0 opacity-100'
diff --git a/resources/js/Components/Home/EventCtaSection.vue b/resources/js/Components/Home/EventCtaSection.vue
index 25b138b5..ef37ca84 100644
--- a/resources/js/Components/Home/EventCtaSection.vue
+++ b/resources/js/Components/Home/EventCtaSection.vue
@@ -35,7 +35,7 @@ const { targetRef, isVisible } = useScrollReveal({
                 Junta-te a nós na SINF 2026
             </h2>
             <p
-                class="mt-3 max-w-2xl text-sm leading-relaxed text-neutral-300 transition-all duration-700 ease-in-out delay-150 sm:text-base"
+                class="mt-3 max-w-2xl text-sm leading-relaxed text-neutral-300 transition-all delay-150 duration-700 ease-in-out sm:text-base"
                 :class="[
                     isVisible
                         ? 'translate-y-0 opacity-100'
@@ -49,7 +49,7 @@ const { targetRef, isVisible } = useScrollReveal({
         </div>
 
         <div
-            class="grid grid-cols-1 gap-6 border-t border-white/10 pt-8 transition-all duration-700 ease-in-out delay-250 md:grid-cols-3 md:gap-6 lg:gap-8"
+            class="grid grid-cols-1 gap-6 border-t border-white/10 pt-8 transition-all delay-250 duration-700 ease-in-out md:grid-cols-3 md:gap-6 lg:gap-8"
             :class="[
                 isVisible
                     ? 'border-white/10 opacity-100'
@@ -59,19 +59,22 @@ const { targetRef, isVisible } = useScrollReveal({
             <Card
                 padding="p-6 sm:p-7"
                 :interactive="false"
-                class="flex flex-col justify-between transition-all duration-700 ease-in-out delay-300"
+                class="flex flex-col justify-between transition-all delay-300 duration-700 ease-in-out"
                 :class="[
                     isVisible
-                        ? 'translate-y-0 opacity-100 scale-100'
-                        : 'translate-y-14 opacity-0 scale-[0.96]',
+                        ? 'translate-y-0 scale-100 opacity-100'
+                        : 'translate-y-14 scale-[0.96] opacity-0',
                 ]"
             >
                 <div>
                     <h3 class="text-lg font-bold text-white sm:text-xl">
                         Garante o teu lugar
                     </h3>
-                    <p class="mt-2 text-xs leading-relaxed text-neutral-400 sm:text-sm">
-                        Acesso total às palestras no anfiteatro, sessões de networking com empresas e kit de boas-vindas do evento.
+                    <p
+                        class="mt-2 text-xs leading-relaxed text-neutral-400 sm:text-sm"
+                    >
+                        Acesso total às palestras no anfiteatro, sessões de
+                        networking com empresas e kit de boas-vindas do evento.
                     </p>
                 </div>
 
@@ -104,19 +107,23 @@ const { targetRef, isVisible } = useScrollReveal({
             <Card
                 padding="p-6 sm:p-7"
                 :interactive="false"
-                class="flex flex-col justify-between transition-all duration-700 ease-in-out delay-450"
+                class="flex flex-col justify-between transition-all delay-450 duration-700 ease-in-out"
                 :class="[
                     isVisible
-                        ? 'translate-y-0 opacity-100 scale-100'
-                        : 'translate-y-14 opacity-0 scale-[0.96]',
+                        ? 'translate-y-0 scale-100 opacity-100'
+                        : 'translate-y-14 scale-[0.96] opacity-0',
                 ]"
             >
                 <div>
                     <h3 class="text-lg font-bold text-white sm:text-xl">
                         Explora o programa
                     </h3>
-                    <p class="mt-2 text-xs leading-relaxed text-neutral-400 sm:text-sm">
-                        Consulta os horários das palestras técnicas, temas das intervenções e oradores convidados para cada um dos dias.
+                    <p
+                        class="mt-2 text-xs leading-relaxed text-neutral-400 sm:text-sm"
+                    >
+                        Consulta os horários das palestras técnicas, temas das
+                        intervenções e oradores convidados para cada um dos
+                        dias.
                     </p>
                 </div>
 
@@ -137,19 +144,22 @@ const { targetRef, isVisible } = useScrollReveal({
             <Card
                 padding="p-6 sm:p-7"
                 :interactive="false"
-                class="flex flex-col justify-between transition-all duration-700 ease-in-out delay-600"
+                class="flex flex-col justify-between transition-all delay-600 duration-700 ease-in-out"
                 :class="[
                     isVisible
-                        ? 'translate-y-0 opacity-100 scale-100'
-                        : 'translate-y-14 opacity-0 scale-[0.96]',
+                        ? 'translate-y-0 scale-100 opacity-100'
+                        : 'translate-y-14 scale-[0.96] opacity-0',
                 ]"
             >
                 <div>
                     <h3 class="text-lg font-bold text-white sm:text-xl">
                         Feito por estudantes
                     </h3>
-                    <p class="mt-2 text-xs leading-relaxed text-neutral-400 sm:text-sm">
-                        Uma iniciativa 100% pensada e executada por alunos da FEUP. Descobre quem está por trás desta edição da SINF.
+                    <p
+                        class="mt-2 text-xs leading-relaxed text-neutral-400 sm:text-sm"
+                    >
+                        Uma iniciativa 100% pensada e executada por alunos da
+                        FEUP. Descobre quem está por trás desta edição da SINF.
                     </p>
                 </div>
 
diff --git a/resources/js/Components/Home/InfoPopup.vue b/resources/js/Components/Home/InfoPopup.vue
index 6dd1f113..d966f918 100644
--- a/resources/js/Components/Home/InfoPopup.vue
+++ b/resources/js/Components/Home/InfoPopup.vue
@@ -5,14 +5,7 @@ import type { VueCookies } from "vue-cookies";
 import { route } from "ziggy-js";
 import { router, Link } from "@inertiajs/vue3";
 import PrimaryButton from "@/Components/UI/PrimaryButton.vue";
-import {
-    Calendar,
-    Briefcase,
-    Trophy,
-    ShoppingBag,
-    ArrowRight,
-    Sparkles,
-} from "@lucide/vue";
+import { ArrowRight } from "@lucide/vue";
 
 const isOpen = ref(false);
 
@@ -38,29 +31,40 @@ const enroll = () => {
     <Modal v-model="isOpen" max-width="lg" @closed="cacheSeenInfo">
         <div class="flex flex-col">
             <img
-                class="h-12 w-auto select-none sm:h-14 self-start"
+                class="h-12 w-auto self-start select-none sm:h-14"
                 src="/images/sinf-2026-sm.svg"
                 alt="SINF 2026 Logo"
             />
 
-            <h2 class="mt-6 text-xl font-black tracking-tight text-white sm:text-2xl">
+            <h2
+                class="mt-6 text-xl font-black tracking-tight text-white sm:text-2xl"
+            >
                 A SINF está mais interativa do que nunca!
             </h2>
-            <p class="mt-2 max-w-md text-xs leading-relaxed text-neutral-400 sm:text-sm">
-                Participa nas atividades da conferência, interage com empresas parceiras e ganha SINFrões para trocares por prémios.
+            <p
+                class="mt-2 max-w-md text-xs leading-relaxed text-neutral-400 sm:text-sm"
+            >
+                Participa nas atividades da conferência, interage com empresas
+                parceiras e ganha SINFrões para trocares por prémios.
             </p>
 
-            <div class="mt-6 grid w-full grid-cols-1 gap-2.5 sm:grid-cols-2 text-left">
+            <div
+                class="mt-6 grid w-full grid-cols-1 gap-2.5 text-left sm:grid-cols-2"
+            >
                 <Link
                     :href="route('program')"
                     class="group flex items-start gap-3 rounded-2xl border border-white/8 bg-white/3 p-3.5 transition-colors hover:border-white/16 hover:bg-white/6"
                     @click="cacheSeenInfo"
                 >
                     <div class="min-w-0 flex-1">
-                        <h4 class="text-xs font-bold text-white transition-colors group-hover:text-purple-300">
+                        <h4
+                            class="text-xs font-bold text-white transition-colors group-hover:text-purple-300"
+                        >
                             Palestras e Workshops
                         </h4>
-                        <p class="mt-0.5 text-[11px] leading-snug text-neutral-400">
+                        <p
+                            class="mt-0.5 text-[11px] leading-snug text-neutral-400"
+                        >
                             Aprende com especialistas da indústria.
                         </p>
                     </div>
@@ -72,10 +76,14 @@ const enroll = () => {
                     @click="cacheSeenInfo"
                 >
                     <div class="min-w-0 flex-1">
-                        <h4 class="text-xs font-bold text-white transition-colors group-hover:text-amber-300">
+                        <h4
+                            class="text-xs font-bold text-white transition-colors group-hover:text-amber-300"
+                        >
                             Bancas de Empresas
                         </h4>
-                        <p class="mt-0.5 text-[11px] leading-snug text-neutral-400">
+                        <p
+                            class="mt-0.5 text-[11px] leading-snug text-neutral-400"
+                        >
                             Conhece oportunidades de estágio e carreira.
                         </p>
                     </div>
@@ -88,7 +96,9 @@ const enroll = () => {
                         <h4 class="text-xs font-bold text-white">
                             Competições
                         </h4>
-                        <p class="mt-0.5 text-[11px] leading-snug text-neutral-400">
+                        <p
+                            class="mt-0.5 text-[11px] leading-snug text-neutral-400"
+                        >
                             Desafia-te em programação e CTF.
                         </p>
                     </div>
@@ -100,17 +110,23 @@ const enroll = () => {
                     @click="cacheSeenInfo"
                 >
                     <div class="min-w-0 flex-1">
-                        <h4 class="text-xs font-bold text-white transition-colors group-hover:text-rose-300">
+                        <h4
+                            class="text-xs font-bold text-white transition-colors group-hover:text-rose-300"
+                        >
                             Loja SINF
                         </h4>
-                        <p class="mt-0.5 text-[11px] leading-snug text-neutral-400">
+                        <p
+                            class="mt-0.5 text-[11px] leading-snug text-neutral-400"
+                        >
                             Troca SINFrões por merchandising e prémios.
                         </p>
                     </div>
                 </Link>
             </div>
 
-            <div class="mt-6 flex w-full flex-col sm:flex-row items-center justify-center gap-3">
+            <div
+                class="mt-6 flex w-full flex-col items-center justify-center gap-3 sm:flex-row"
+            >
                 <PrimaryButton
                     color="pill"
                     padding="px-5 py-2.5"
diff --git a/resources/js/Components/Home/SpeakersVerticalColumns.vue b/resources/js/Components/Home/SpeakersVerticalColumns.vue
index 8843aa06..199ff192 100644
--- a/resources/js/Components/Home/SpeakersVerticalColumns.vue
+++ b/resources/js/Components/Home/SpeakersVerticalColumns.vue
@@ -149,10 +149,10 @@ const columns = computed(() => {
 <template>
     <div
         ref="targetRef"
-        class="relative h-screen min-h-dvh max-h-dvh w-full overflow-hidden"
+        class="relative h-screen max-h-dvh min-h-dvh w-full overflow-hidden"
     >
         <div
-            class="pointer-events-none absolute top-16 inset-x-0 z-30 flex flex-col items-center justify-center px-4 text-center sm:top-20 lg:top-20"
+            class="pointer-events-none absolute inset-x-0 top-16 z-30 flex flex-col items-center justify-center px-4 text-center sm:top-20 lg:top-20"
         >
             <h2
                 class="text-2xl font-black tracking-tight text-white drop-shadow-md transition-all duration-700 ease-in-out sm:text-4xl lg:text-5xl"
@@ -166,24 +166,23 @@ const columns = computed(() => {
             </h2>
 
             <p
-                class="mt-1.5 max-w-xs text-xs text-neutral-400 transition-all duration-700 ease-in-out delay-150 sm:max-w-md sm:text-sm md:max-w-lg md:text-base"
+                class="mt-1.5 max-w-xs text-xs text-neutral-400 transition-all delay-150 duration-700 ease-in-out sm:max-w-md sm:text-sm md:max-w-lg md:text-base"
                 :class="[
                     isVisible
                         ? 'translate-y-0 opacity-100'
                         : 'translate-y-10 opacity-0',
                 ]"
             >
-                Descobre as ideias, experiências e tendências que estão a moldar o futuro da tecnologia.
+                Descobre as ideias, experiências e tendências que estão a moldar
+                o futuro da tecnologia.
             </p>
         </div>
 
         <template v-if="speakers.length !== 0">
             <div
-                class="speaker-wall-container relative h-full w-full overflow-hidden transition-all duration-1000 ease-in-out delay-150"
+                class="speaker-wall-container relative h-full w-full overflow-hidden transition-all delay-150 duration-1000 ease-in-out"
                 :class="[
-                    isVisible
-                        ? 'opacity-100 scale-100'
-                        : 'opacity-0 scale-95',
+                    isVisible ? 'scale-100 opacity-100' : 'scale-95 opacity-0',
                 ]"
             >
                 <div
@@ -217,7 +216,9 @@ const columns = computed(() => {
                                     >
                                         <img
                                             :src="speaker.profile_photo_url"
-                                            :alt="getSpeakerDisplayName(speaker)"
+                                            :alt="
+                                                getSpeakerDisplayName(speaker)
+                                            "
                                             class="h-full w-full object-cover grayscale filter transition-all duration-300 group-hover:grayscale-0"
                                             loading="lazy"
                                         />
@@ -261,7 +262,9 @@ const columns = computed(() => {
                                     >
                                         <img
                                             :src="speaker.profile_photo_url"
-                                            :alt="getSpeakerDisplayName(speaker)"
+                                            :alt="
+                                                getSpeakerDisplayName(speaker)
+                                            "
                                             class="h-full w-full object-cover grayscale filter transition-all duration-300 group-hover:grayscale-0"
                                             loading="lazy"
                                         />
@@ -305,7 +308,7 @@ const columns = computed(() => {
                     <img
                         :src="selectedSpeaker.profile_photo_url"
                         :alt="getSpeakerDisplayName(selectedSpeaker)"
-                        class="h-16 w-16 rounded-xl object-cover ring-2 ring-sinf-primary/50 sm:h-24 sm:w-24 sm:rounded-2xl"
+                        class="ring-sinf-primary/50 h-16 w-16 rounded-xl object-cover ring-2 sm:h-24 sm:w-24 sm:rounded-2xl"
                     />
                     <div class="flex-1">
                         <h3 class="text-lg font-black text-white sm:text-2xl">
@@ -313,7 +316,7 @@ const columns = computed(() => {
                         </h3>
                         <p
                             v-if="getSpeakerTitle(selectedSpeaker)"
-                            class="text-xs font-medium text-sinf-primary sm:text-sm"
+                            class="text-sinf-primary text-xs font-medium sm:text-sm"
                         >
                             {{ getSpeakerTitle(selectedSpeaker) }}
                             <span
@@ -324,9 +327,7 @@ const columns = computed(() => {
                             </span>
                         </p>
                         <p
-                            v-else-if="
-                                getSpeakerOrganization(selectedSpeaker)
-                            "
+                            v-else-if="getSpeakerOrganization(selectedSpeaker)"
                             class="text-xs font-medium text-neutral-400 sm:text-sm"
                         >
                             {{ getSpeakerOrganization(selectedSpeaker) }}
@@ -343,7 +344,7 @@ const columns = computed(() => {
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 :aria-label="`${getSpeakerDisplayName(selectedSpeaker)} - ${link.label}`"
-                                class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-white/5 text-neutral-400 transition-all hover:border-sinf-primary/60 hover:bg-sinf-primary/20 hover:text-white sm:h-9 sm:w-9"
+                                class="hover:border-sinf-primary/60 hover:bg-sinf-primary/20 inline-flex h-8 w-8 items-center justify-center rounded-lg border border-white/10 bg-white/5 text-neutral-400 transition-all hover:text-white sm:h-9 sm:w-9"
                             >
                                 <SocialIcon
                                     :platform="link.platform"
diff --git a/resources/js/Components/Home/SponsorsShowcase.vue b/resources/js/Components/Home/SponsorsShowcase.vue
index 2b50e3ef..99a3b9cb 100644
--- a/resources/js/Components/Home/SponsorsShowcase.vue
+++ b/resources/js/Components/Home/SponsorsShowcase.vue
@@ -51,7 +51,10 @@ const allSponsorsWithTier = computed(() => {
 // Top tier (e.g. Platinum/Main) partners to feature prominently
 const topTier = computed(() => {
     if (!props.sponsorTiers || props.sponsorTiers.length === 0) return null;
-    return props.sponsorTiers.find((t) => t.sponsors && t.sponsors.length > 0) || null;
+    return (
+        props.sponsorTiers.find((t) => t.sponsors && t.sponsors.length > 0) ||
+        null
+    );
 });
 
 const topTierName = computed(() => topTier.value?.name || "Main Partners");
@@ -98,32 +101,34 @@ const marqueeRow2 = computed(() => {
     >
         <div class="mb-6 flex flex-col items-center text-center sm:mb-8">
             <h2
-                class="mt-4 text-3xl tracking-tight text-white transition-all duration-700 ease-in-out delay-100 sm:text-5xl lg:text-6xl"
+                class="mt-4 text-3xl tracking-tight text-white transition-all delay-100 duration-700 ease-in-out sm:text-5xl lg:text-6xl"
                 :class="[
                     isVisible
                         ? 'translate-y-0 opacity-100'
                         : 'translate-y-12 opacity-0',
                 ]"
             >
-                Empresas que tornam a SINF <span class="font-black">possível</span>
+                Empresas que tornam a SINF
+                <span class="font-black">possível</span>
             </h2>
 
             <p
-                class="mt-3 max-w-2xl text-sm leading-relaxed text-neutral-300 transition-all duration-700 ease-in-out delay-200 sm:text-base"
+                class="mt-3 max-w-2xl text-sm leading-relaxed text-neutral-300 transition-all delay-200 duration-700 ease-in-out sm:text-base"
                 :class="[
                     isVisible
                         ? 'translate-y-0 opacity-100'
                         : 'translate-y-10 opacity-0',
                 ]"
             >
-                Equipas e organizações que marcam presença na FEUP para partilhar conhecimento técnico e recrutar talento universitário.
+                Equipas e organizações que marcam presença na FEUP para
+                partilhar conhecimento técnico e recrutar talento universitário.
             </p>
         </div>
 
         <template v-if="allSponsorsWithTier.length > 0">
             <div v-if="topTierSponsors.length > 0" class="mb-6 sm:mb-8">
                 <div
-                    class="mb-3 flex items-center justify-center transition-all duration-700 ease-in-out delay-250"
+                    class="mb-3 flex items-center justify-center transition-all delay-250 duration-700 ease-in-out"
                     :class="[
                         isVisible
                             ? 'translate-y-0 opacity-100'
@@ -140,25 +145,30 @@ const marqueeRow2 = computed(() => {
                 </div>
 
                 <div
-                    class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 sm:gap-6"
+                    class="grid grid-cols-2 gap-4 sm:grid-cols-3 sm:gap-6 lg:grid-cols-4"
                 >
                     <Card
                         v-for="(item, idx) in topTierSponsors.slice(0, 4)"
                         :key="`featured-${item.sponsor.id}`"
                         as="button"
                         padding="p-4 sm:p-5"
-                        class="flex h-28 cursor-pointer items-center justify-center focus:outline-none transition-all duration-700 ease-in-out sm:h-32"
+                        class="flex h-28 cursor-pointer items-center justify-center transition-all duration-700 ease-in-out focus:outline-none sm:h-32"
                         :style="{ transitionDelay: `${300 + idx * 100}ms` }"
                         :class="[
                             isVisible
-                                ? 'translate-y-0 opacity-100 scale-100'
-                                : 'translate-y-12 opacity-0 scale-95',
+                                ? 'translate-y-0 scale-100 opacity-100'
+                                : 'translate-y-12 scale-95 opacity-0',
                         ]"
                         @click="openSponsorModal(item.sponsor, item.tier)"
                     >
-                        <div class="flex h-14 w-full items-center justify-center p-1 sm:h-16">
+                        <div
+                            class="flex h-14 w-full items-center justify-center p-1 sm:h-16"
+                        >
                             <img
-                                :src="item.sponsor.company?.user?.profile_photo_url"
+                                :src="
+                                    item.sponsor.company?.user
+                                        ?.profile_photo_url
+                                "
                                 :alt="item.sponsor.company?.user?.name"
                                 class="max-h-full max-w-[85%] object-contain opacity-90 brightness-95 transition-all duration-300 group-hover:scale-105 group-hover:opacity-100 group-hover:brightness-110"
                                 loading="lazy"
@@ -170,7 +180,7 @@ const marqueeRow2 = computed(() => {
 
             <div
                 v-if="marqueeRow1.length > 0"
-                class="marquee-mask relative w-full space-y-3 overflow-hidden py-1 transition-all duration-700 ease-in-out delay-500"
+                class="marquee-mask relative w-full space-y-3 overflow-hidden py-1 transition-all delay-500 duration-700 ease-in-out"
                 :class="[
                     isVisible
                         ? 'translate-y-0 opacity-100'
@@ -188,9 +198,12 @@ const marqueeRow2 = computed(() => {
                             @click="openSponsorModal(item.sponsor, item.tier)"
                         >
                             <img
-                                :src="item.sponsor.company?.user?.profile_photo_url"
+                                :src="
+                                    item.sponsor.company?.user
+                                        ?.profile_photo_url
+                                "
                                 :alt="item.sponsor.company?.user?.name"
-                                class="max-h-8 max-w-[85%] object-contain opacity-75 grayscale transition-all duration-300 group-hover:grayscale-0 group-hover:opacity-100 sm:max-h-10"
+                                class="max-h-8 max-w-[85%] object-contain opacity-75 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 sm:max-h-10"
                                 loading="lazy"
                             />
                         </Card>
@@ -208,9 +221,12 @@ const marqueeRow2 = computed(() => {
                             @click="openSponsorModal(item.sponsor, item.tier)"
                         >
                             <img
-                                :src="item.sponsor.company?.user?.profile_photo_url"
+                                :src="
+                                    item.sponsor.company?.user
+                                        ?.profile_photo_url
+                                "
                                 :alt="item.sponsor.company?.user?.name"
-                                class="max-h-8 max-w-[85%] object-contain opacity-75 grayscale transition-all duration-300 group-hover:grayscale-0 group-hover:opacity-100 sm:max-h-10"
+                                class="max-h-8 max-w-[85%] object-contain opacity-75 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 sm:max-h-10"
                                 loading="lazy"
                             />
                         </Card>
@@ -228,9 +244,12 @@ const marqueeRow2 = computed(() => {
                             @click="openSponsorModal(item.sponsor, item.tier)"
                         >
                             <img
-                                :src="item.sponsor.company?.user?.profile_photo_url"
+                                :src="
+                                    item.sponsor.company?.user
+                                        ?.profile_photo_url
+                                "
                                 :alt="item.sponsor.company?.user?.name"
-                                class="max-h-8 max-w-[85%] object-contain opacity-75 grayscale transition-all duration-300 group-hover:grayscale-0 group-hover:opacity-100 sm:max-h-10"
+                                class="max-h-8 max-w-[85%] object-contain opacity-75 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 sm:max-h-10"
                                 loading="lazy"
                             />
                         </Card>
@@ -248,9 +267,12 @@ const marqueeRow2 = computed(() => {
                             @click="openSponsorModal(item.sponsor, item.tier)"
                         >
                             <img
-                                :src="item.sponsor.company?.user?.profile_photo_url"
+                                :src="
+                                    item.sponsor.company?.user
+                                        ?.profile_photo_url
+                                "
                                 :alt="item.sponsor.company?.user?.name"
-                                class="max-h-8 max-w-[85%] object-contain opacity-75 grayscale transition-all duration-300 group-hover:grayscale-0 group-hover:opacity-100 sm:max-h-10"
+                                class="max-h-8 max-w-[85%] object-contain opacity-75 grayscale transition-all duration-300 group-hover:opacity-100 group-hover:grayscale-0 sm:max-h-10"
                                 loading="lazy"
                             />
                         </Card>
@@ -283,12 +305,19 @@ const marqueeRow2 = computed(() => {
                 </div>
 
                 <div class="flex w-full flex-col items-center gap-3">
-                    <div class="flex flex-wrap items-center justify-center gap-3">
+                    <div
+                        class="flex flex-wrap items-center justify-center gap-3"
+                    >
                         <h3 class="text-2xl font-bold text-white">
                             {{ selectedSponsor.company?.user?.name }}
                         </h3>
-                        <div v-if="selectedTier" class="pill-container px-3 py-1 shadow-none">
-                            <span class="text-xs font-semibold uppercase tracking-wider text-neutral-300">
+                        <div
+                            v-if="selectedTier"
+                            class="pill-container px-3 py-1 shadow-none"
+                        >
+                            <span
+                                class="text-xs font-semibold tracking-wider text-neutral-300 uppercase"
+                            >
                                 {{ selectedTier.name }} Partner
                             </span>
                         </div>
@@ -308,12 +337,15 @@ const marqueeRow2 = computed(() => {
 
                     <div
                         v-if="selectedSponsor.company?.social_media?.website"
-                        class="mt-4 flex justify-center border-t border-white/10 pt-4 w-full"
+                        class="mt-4 flex w-full justify-center border-t border-white/10 pt-4"
                     >
                         <a
                             :href="
-                                selectedSponsor.company.social_media.website.startsWith('http')
-                                    ? selectedSponsor.company.social_media.website
+                                selectedSponsor.company.social_media.website.startsWith(
+                                    'http',
+                                )
+                                    ? selectedSponsor.company.social_media
+                                          .website
                                     : `https://${selectedSponsor.company.social_media.website}`
                             "
                             target="_blank"
diff --git a/resources/js/Components/Home/StatsSection.vue b/resources/js/Components/Home/StatsSection.vue
index 1cf95025..1d80cd21 100644
--- a/resources/js/Components/Home/StatsSection.vue
+++ b/resources/js/Components/Home/StatsSection.vue
@@ -71,16 +71,8 @@ function triggerAnimation() {
         1200,
         (v) => (displayedDays.value = v),
     );
-    animateNumber(
-        props.standCount,
-        1400,
-        (v) => (displayedStands.value = v),
-    );
-    animateNumber(
-        props.talkCount,
-        1300,
-        (v) => (displayedTalks.value = v),
-    );
+    animateNumber(props.standCount, 1400, (v) => (displayedStands.value = v));
+    animateNumber(props.talkCount, 1300, (v) => (displayedTalks.value = v));
     animateNumber(
         props.activityCount,
         1300,
@@ -150,10 +142,7 @@ const statsList = computed(() => {
 </script>
 
 <template>
-    <div
-        ref="targetRef"
-        class="relative mx-auto w-full max-w-6xl"
-    >
+    <div ref="targetRef" class="relative mx-auto w-full max-w-6xl">
         <div
             class="mb-8 max-w-3xl transition-all duration-700 ease-in-out sm:mb-10"
             :class="[
@@ -162,16 +151,14 @@ const statsList = computed(() => {
                     : 'translate-y-12 opacity-0',
             ]"
         >
-            <h2
-                class="text-3xl tracking-tight text-white sm:text-5xl"
-            >
+            <h2 class="text-3xl tracking-tight text-white sm:text-5xl">
                 A dimensão da edição
                 <span class="font-black">2026</span>
             </h2>
         </div>
 
         <div
-            class="grid grid-cols-2 gap-6 border-t border-white/10 pt-6 transition-all duration-700 ease-in-out delay-150 sm:grid-cols-3 sm:pt-8 lg:grid-cols-5 lg:gap-8"
+            class="grid grid-cols-2 gap-6 border-t border-white/10 pt-6 transition-all delay-150 duration-700 ease-in-out sm:grid-cols-3 sm:pt-8 lg:grid-cols-5 lg:gap-8"
             :class="[
                 isVisible
                     ? 'border-white/10 opacity-100'
@@ -185,8 +172,8 @@ const statsList = computed(() => {
                 :style="{ transitionDelay: `${200 + idx * 100}ms` }"
                 :class="[
                     isVisible
-                        ? 'translate-y-0 opacity-100 scale-100'
-                        : 'translate-y-12 opacity-0 scale-95',
+                        ? 'translate-y-0 scale-100 opacity-100'
+                        : 'translate-y-12 scale-95 opacity-0',
                 ]"
             >
                 <div class="flex items-baseline">
diff --git a/resources/js/Components/Profile/QRCode.vue b/resources/js/Components/Profile/QRCode.vue
index 929e3aa0..6b5aea86 100644
--- a/resources/js/Components/Profile/QRCode.vue
+++ b/resources/js/Components/Profile/QRCode.vue
@@ -54,7 +54,9 @@ const showQRCode = () => {
             <span v-if="loading" class="text-sm text-neutral-400"
                 >A gerar código...</span
             >
-            <template v-else-if="participant.quest_qr_code || participant.quest_code">
+            <template
+                v-else-if="participant.quest_qr_code || participant.quest_code"
+            >
                 <div
                     v-if="participant.quest_qr_code"
                     class="flex items-center justify-center rounded-2xl bg-white p-4"
diff --git a/resources/js/Composables/useScrollReveal.ts b/resources/js/Composables/useScrollReveal.ts
index 6de0c133..beb81d6e 100644
--- a/resources/js/Composables/useScrollReveal.ts
+++ b/resources/js/Composables/useScrollReveal.ts
@@ -11,11 +11,7 @@ interface ScrollRevealOptions {
  * Supports repeatable triggering on enter/exit with once: false.
  */
 export function useScrollReveal(options: ScrollRevealOptions = {}) {
-    const {
-        threshold = 0.15,
-        rootMargin = "0px",
-        once = false,
-    } = options;
+    const { threshold = 0.15, rootMargin = "0px", once = false } = options;
     const targetRef = ref<HTMLElement | null>(null);
     const isVisible = ref(false);
     let observer: IntersectionObserver | null = null;
diff --git a/resources/js/Composables/useSectionScroll.ts b/resources/js/Composables/useSectionScroll.ts
index 8496b93e..22d4f661 100644
--- a/resources/js/Composables/useSectionScroll.ts
+++ b/resources/js/Composables/useSectionScroll.ts
@@ -79,7 +79,11 @@ export function useSectionScroll(
     function onWheel(e: WheelEvent) {
         // Allow modal or dropdown contents to scroll normally
         const target = e.target as HTMLElement | null;
-        if (target?.closest('[role="dialog"], [aria-modal="true"], .modal-content, textarea')) {
+        if (
+            target?.closest(
+                '[role="dialog"], [aria-modal="true"], .modal-content, textarea',
+            )
+        ) {
             return;
         }
 
diff --git a/resources/js/Layouts/AdminLayout.vue b/resources/js/Layouts/AdminLayout.vue
index a9c65279..22bb7fdd 100644
--- a/resources/js/Layouts/AdminLayout.vue
+++ b/resources/js/Layouts/AdminLayout.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { provide, ref } from "vue";
-import { Head, Link } from "@inertiajs/vue3";
+import { Head } from "@inertiajs/vue3";
 import AdminSidebar from "@/Components/Navigation/AdminSidebar.vue";
 import Banner from "@/Components/UI/Banner.vue";
-import { route } from "ziggy-js";
-import { Menu, ExternalLink } from "@lucide/vue";
+import { Menu } from "@lucide/vue";
 
 defineProps<{
     title: string;
@@ -17,7 +16,7 @@ provide("adminSidebarOpen", sidebarOpen);
 
 <template>
     <div
-        class="selection:bg-white/20 relative flex h-screen w-screen overflow-hidden bg-[#090a0c] font-sans text-neutral-200 antialiased selection:text-white"
+        class="relative flex h-screen w-screen overflow-hidden bg-[#090a0c] font-sans text-neutral-200 antialiased selection:bg-white/20 selection:text-white"
     >
         <Head :title="title" />
 
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 817c6b9b..b0d59b4d 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -12,7 +12,9 @@ defineProps<Props>();
 </script>
 
 <template>
-    <div class="relative flex min-h-screen flex-col bg-sinf-surface-dark text-white">
+    <div
+        class="bg-sinf-surface-dark relative flex min-h-screen flex-col text-white"
+    >
         <Head :title="title" />
 
         <GlowingOrbs />
diff --git a/resources/js/Pages/Admin.vue b/resources/js/Pages/Admin.vue
index 693c0683..8307efbe 100644
--- a/resources/js/Pages/Admin.vue
+++ b/resources/js/Pages/Admin.vue
@@ -23,7 +23,6 @@ import {
     Briefcase,
     UserCog,
     ArrowUpRight,
-    ExternalLink,
     Plus,
 } from "@lucide/vue";
 
@@ -66,47 +65,103 @@ const sections: Section[] = [
         title: "Programa & Eventos",
         items: [
             { route: "admin.editions.index", name: "Edições", icon: Calendar },
-            { route: "admin.eventDays.index", name: "Dias de Evento", icon: CalendarDays },
-            { route: "admin.events.index", name: "Eventos & Sessões", icon: Presentation },
-            { route: "admin.eventTypes.index", name: "Tipos de Evento", icon: Tag },
-            { route: "admin.slots.index", name: "Encaixes (Slots)", icon: Clock },
+            {
+                route: "admin.eventDays.index",
+                name: "Dias de Evento",
+                icon: CalendarDays,
+            },
+            {
+                route: "admin.events.index",
+                name: "Eventos & Sessões",
+                icon: Presentation,
+            },
+            {
+                route: "admin.eventTypes.index",
+                name: "Tipos de Evento",
+                icon: Tag,
+            },
+            {
+                route: "admin.slots.index",
+                name: "Encaixes (Slots)",
+                icon: Clock,
+            },
         ],
     },
     {
         title: "Participantes & Inscrições",
         items: [
             { route: "admin.users.index", name: "Utilizadores", icon: Users },
-            { route: "admin.enrollments.index", name: "Inscrições", icon: UserCheck },
+            {
+                route: "admin.enrollments.index",
+                name: "Inscrições",
+                icon: UserCheck,
+            },
         ],
     },
     {
         title: "Competições",
         items: [
-            { route: "admin.competitions.index", name: "Competições", icon: Trophy },
-            { route: "admin.competitionTeams.index", name: "Equipas", icon: Users2 },
-            { route: "admin.competitionPrizes.index", name: "Prémios", icon: Award },
+            {
+                route: "admin.competitions.index",
+                name: "Competições",
+                icon: Trophy,
+            },
+            {
+                route: "admin.competitionTeams.index",
+                name: "Equipas",
+                icon: Users2,
+            },
+            {
+                route: "admin.competitionPrizes.index",
+                name: "Prémios",
+                icon: Award,
+            },
         ],
     },
     {
         title: "Empresas & Patrocínios",
         items: [
-            { route: "admin.sponsors.index", name: "Patrocinadores", icon: Building2 },
-            { route: "admin.sponsorTiers.index", name: "Níveis de Patrocínio", icon: Crown },
+            {
+                route: "admin.sponsors.index",
+                name: "Patrocinadores",
+                icon: Building2,
+            },
+            {
+                route: "admin.sponsorTiers.index",
+                name: "Níveis de Patrocínio",
+                icon: Crown,
+            },
             { route: "admin.stands.index", name: "Bancas", icon: Store },
         ],
     },
     {
         title: "Loja & Gamificação",
         items: [
-            { route: "admin.products.index", name: "Produtos da Loja", icon: ShoppingBag },
-            { route: "admin.quests.index", name: "Tarefas & Missões", icon: CheckSquare },
+            {
+                route: "admin.products.index",
+                name: "Produtos da Loja",
+                icon: ShoppingBag,
+            },
+            {
+                route: "admin.quests.index",
+                name: "Tarefas & Missões",
+                icon: CheckSquare,
+            },
         ],
     },
     {
         title: "Organização",
         items: [
-            { route: "admin.departments.index", name: "Departamentos", icon: Briefcase },
-            { route: "admin.staff.index", name: "Equipa & Staff", icon: UserCog },
+            {
+                route: "admin.departments.index",
+                name: "Departamentos",
+                icon: Briefcase,
+            },
+            {
+                route: "admin.staff.index",
+                name: "Equipa & Staff",
+                icon: UserCog,
+            },
         ],
     },
 ];
@@ -118,9 +173,11 @@ const sections: Section[] = [
             <div
                 class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
             >
-                    <h1 class="text-2xl font-bold tracking-tight text-white sm:text-3xl">
-                        {{ currentEdition?.name ?? "Edição Atual" }}
-                    </h1>
+                <h1
+                    class="text-2xl font-bold tracking-tight text-white sm:text-3xl"
+                >
+                    {{ currentEdition?.name ?? "Edição Atual" }}
+                </h1>
 
                 <div class="flex flex-wrap items-center gap-2.5">
                     <PrimaryButton
@@ -212,7 +269,9 @@ const sections: Section[] = [
             <div class="space-y-6">
                 <h2 class="text-lg font-bold text-white">Acessos Rápidos</h2>
 
-                <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+                <div
+                    class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"
+                >
                     <div
                         v-for="section in sections"
                         :key="section.title"
diff --git a/resources/js/Pages/CRUD/CompetitionTeam/Index.vue b/resources/js/Pages/CRUD/CompetitionTeam/Index.vue
index f416c04f..eca15c2f 100644
--- a/resources/js/Pages/CRUD/CompetitionTeam/Index.vue
+++ b/resources/js/Pages/CRUD/CompetitionTeam/Index.vue
@@ -58,7 +58,9 @@ const editions = computed<Record<number, string>>(() =>
                     {{ item.members?.length ?? 0 }}
                 </Cell>
                 <Cell>
-                    <span class="font-mono text-xs font-semibold text-neutral-200">
+                    <span
+                        class="font-mono text-xs font-semibold text-neutral-200"
+                    >
                         {{ item.points }}
                     </span>
                     <span class="ml-1 text-xs text-neutral-500">pts</span>
diff --git a/resources/js/Pages/CRUD/Enrollment/Index.vue b/resources/js/Pages/CRUD/Enrollment/Index.vue
index e44ec3fc..9da24947 100644
--- a/resources/js/Pages/CRUD/Enrollment/Index.vue
+++ b/resources/js/Pages/CRUD/Enrollment/Index.vue
@@ -49,7 +49,10 @@ const editions = computed<Record<number, string>>(() =>
 
         <template #header>
             <HeaderRow>
-                <Header filter-by="participant_id" :filter-values="participants">
+                <Header
+                    filter-by="participant_id"
+                    :filter-values="participants"
+                >
                     Participante
                 </Header>
                 <Header filter-by="edition_id" :filter-values="editions">
@@ -62,13 +65,18 @@ const editions = computed<Record<number, string>>(() =>
         <template #row="{ item }">
             <Row :item="item" name="enrollments">
                 <Cell class="font-medium text-white">
-                    {{ participants[item.participant_id] ?? `Participante #${item.participant_id}` }}
+                    {{
+                        participants[item.participant_id] ??
+                        `Participante #${item.participant_id}`
+                    }}
                 </Cell>
                 <Cell class="text-xs text-neutral-400">
                     {{ editions[item.edition_id] ?? "-" }}
                 </Cell>
                 <Cell>
-                    <span class="font-mono text-xs font-semibold text-neutral-200">
+                    <span
+                        class="font-mono text-xs font-semibold text-neutral-200"
+                    >
                         {{ item.points }}
                     </span>
                     <span class="ml-1 text-xs text-neutral-500">pts</span>
diff --git a/resources/js/Pages/CRUD/Event/Index.vue b/resources/js/Pages/CRUD/Event/Index.vue
index 7c50e211..7495e83d 100644
--- a/resources/js/Pages/CRUD/Event/Index.vue
+++ b/resources/js/Pages/CRUD/Event/Index.vue
@@ -85,7 +85,9 @@ const formatTime = (time?: string) => {
                     </span>
                 </Cell>
                 <Cell>
-                    <span class="block max-w-44 truncate text-xs text-neutral-400">
+                    <span
+                        class="block max-w-44 truncate text-xs text-neutral-400"
+                    >
                         {{ event_days[item.event_day_id] ?? "-" }}
                     </span>
                 </Cell>
@@ -113,14 +115,18 @@ const formatTime = (time?: string) => {
                         v-if="item.enroll_in_site"
                         class="inline-flex items-center text-xs font-medium text-emerald-400"
                     >
-                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                        <span
+                            class="mr-1.5 h-1.5 w-1.5 rounded-full bg-emerald-400"
+                        />
                         Sim
                     </span>
                     <span
                         v-else
                         class="inline-flex items-center text-xs text-neutral-500"
                     >
-                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-neutral-600" />
+                        <span
+                            class="mr-1.5 h-1.5 w-1.5 rounded-full bg-neutral-600"
+                        />
                         Não
                     </span>
                 </Cell>
diff --git a/resources/js/Pages/CRUD/Product/Index.vue b/resources/js/Pages/CRUD/Product/Index.vue
index c064583d..687ff6d7 100644
--- a/resources/js/Pages/CRUD/Product/Index.vue
+++ b/resources/js/Pages/CRUD/Product/Index.vue
@@ -51,7 +51,9 @@ const editions = computed<Record<number, string>>(() =>
             <Row :item="item" name="products">
                 <Cell class="font-medium text-white">{{ item.name }}</Cell>
                 <Cell>
-                    <span class="font-mono text-xs font-semibold text-neutral-200">
+                    <span
+                        class="font-mono text-xs font-semibold text-neutral-200"
+                    >
                         {{ item.price }}
                     </span>
                     <span class="ml-1 text-xs text-neutral-500">pts</span>
@@ -63,12 +65,9 @@ const editions = computed<Record<number, string>>(() =>
                     >
                         Esgotado (0 un.)
                     </span>
-                    <span
-                        v-else
-                        class="font-mono text-xs text-neutral-300"
-                    >
+                    <span v-else class="font-mono text-xs text-neutral-300">
                         {{ item.stock }}
-                        <span class="text-neutral-500 font-sans">un.</span>
+                        <span class="font-sans text-neutral-500">un.</span>
                     </span>
                 </Cell>
                 <Cell class="text-xs text-neutral-400">
diff --git a/resources/js/Pages/CRUD/Slot/Index.vue b/resources/js/Pages/CRUD/Slot/Index.vue
index 7a86e7ab..b3793887 100644
--- a/resources/js/Pages/CRUD/Slot/Index.vue
+++ b/resources/js/Pages/CRUD/Slot/Index.vue
@@ -52,7 +52,9 @@ const quests = computed<number[]>(() =>
                     </span>
                 </Cell>
                 <Cell>
-                    <span class="font-mono text-xs font-semibold text-neutral-200">
+                    <span
+                        class="font-mono text-xs font-semibold text-neutral-200"
+                    >
                         {{ item.points }}
                     </span>
                     <span class="ml-1 text-xs text-neutral-500">pts</span>
@@ -60,8 +62,9 @@ const quests = computed<number[]>(() =>
                 <Cell>
                     <span class="font-mono text-xs text-neutral-400">
                         {{
-                            item.quests?.filter((q: Quest) => quests.includes(q.id))
-                                .length ?? 0
+                            item.quests?.filter((q: Quest) =>
+                                quests.includes(q.id),
+                            ).length ?? 0
                         }}
                     </span>
                 </Cell>
diff --git a/resources/js/Pages/CRUD/Sponsor/Index.vue b/resources/js/Pages/CRUD/Sponsor/Index.vue
index 5fcb6a29..77774ef1 100644
--- a/resources/js/Pages/CRUD/Sponsor/Index.vue
+++ b/resources/js/Pages/CRUD/Sponsor/Index.vue
@@ -78,7 +78,10 @@ const tiers = computed<Record<number, string>>(() =>
                     {{ editions[item.edition_id] ?? "-" }}
                 </Cell>
                 <Cell class="font-medium text-white">
-                    {{ companies[item.company_id] ?? `Empresa #${item.company_id}` }}
+                    {{
+                        companies[item.company_id] ??
+                        `Empresa #${item.company_id}`
+                    }}
                 </Cell>
                 <Cell class="text-xs text-neutral-300">
                     {{ tiers[item.sponsor_tier_id] ?? "-" }}
diff --git a/resources/js/Pages/CRUD/SponsorTier/Index.vue b/resources/js/Pages/CRUD/SponsorTier/Index.vue
index bc3464d2..ed7de320 100644
--- a/resources/js/Pages/CRUD/SponsorTier/Index.vue
+++ b/resources/js/Pages/CRUD/SponsorTier/Index.vue
@@ -71,14 +71,18 @@ const editions = computed<Record<number, string>>(() =>
                         v-if="item.canSeeCV"
                         class="inline-flex items-center text-xs font-medium text-emerald-400"
                     >
-                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                        <span
+                            class="mr-1.5 h-1.5 w-1.5 rounded-full bg-emerald-400"
+                        />
                         Sim
                     </span>
                     <span
                         v-else
                         class="inline-flex items-center text-xs text-neutral-500"
                     >
-                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-neutral-600" />
+                        <span
+                            class="mr-1.5 h-1.5 w-1.5 rounded-full bg-neutral-600"
+                        />
                         Não
                     </span>
                 </Cell>
@@ -87,14 +91,18 @@ const editions = computed<Record<number, string>>(() =>
                         v-if="item.canSeeLinkedin"
                         class="inline-flex items-center text-xs font-medium text-emerald-400"
                     >
-                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                        <span
+                            class="mr-1.5 h-1.5 w-1.5 rounded-full bg-emerald-400"
+                        />
                         Sim
                     </span>
                     <span
                         v-else
                         class="inline-flex items-center text-xs text-neutral-500"
                     >
-                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-neutral-600" />
+                        <span
+                            class="mr-1.5 h-1.5 w-1.5 rounded-full bg-neutral-600"
+                        />
                         Não
                     </span>
                 </Cell>
@@ -103,14 +111,18 @@ const editions = computed<Record<number, string>>(() =>
                         v-if="item.canSeeAll"
                         class="inline-flex items-center text-xs font-medium text-emerald-400"
                     >
-                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                        <span
+                            class="mr-1.5 h-1.5 w-1.5 rounded-full bg-emerald-400"
+                        />
                         Sim
                     </span>
                     <span
                         v-else
                         class="inline-flex items-center text-xs text-neutral-500"
                     >
-                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-neutral-600" />
+                        <span
+                            class="mr-1.5 h-1.5 w-1.5 rounded-full bg-neutral-600"
+                        />
                         Não
                     </span>
                 </Cell>
diff --git a/resources/js/Pages/CRUD/Staff/Index.vue b/resources/js/Pages/CRUD/Staff/Index.vue
index 247a4e37..41b32f37 100644
--- a/resources/js/Pages/CRUD/Staff/Index.vue
+++ b/resources/js/Pages/CRUD/Staff/Index.vue
@@ -54,7 +54,10 @@ const participants = computed<Record<number, string>>(() =>
 
         <template #header>
             <HeaderRow>
-                <Header filter-by="participant_id" :filter-values="participants">
+                <Header
+                    filter-by="participant_id"
+                    :filter-values="participants"
+                >
                     Membro
                 </Header>
                 <Header filter-by="department_id" :filter-values="departments">
@@ -72,7 +75,10 @@ const participants = computed<Record<number, string>>(() =>
         <template #row="{ item }">
             <Row name="staff" :item="item">
                 <Cell class="font-medium text-white">
-                    {{ participants[item.participant_id] ?? `Membro #${item.participant_id}` }}
+                    {{
+                        participants[item.participant_id] ??
+                        `Membro #${item.participant_id}`
+                    }}
                 </Cell>
                 <Cell class="text-xs text-neutral-400">
                     {{ departments[item.department_id] ?? "-" }}
@@ -82,14 +88,18 @@ const participants = computed<Record<number, string>>(() =>
                         v-if="item.coordinator"
                         class="inline-flex items-center text-xs font-medium text-emerald-400"
                     >
-                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-emerald-400" />
+                        <span
+                            class="mr-1.5 h-1.5 w-1.5 rounded-full bg-emerald-400"
+                        />
                         Sim
                     </span>
                     <span
                         v-else
                         class="inline-flex items-center text-xs text-neutral-500"
                     >
-                        <span class="mr-1.5 h-1.5 w-1.5 rounded-full bg-neutral-600" />
+                        <span
+                            class="mr-1.5 h-1.5 w-1.5 rounded-full bg-neutral-600"
+                        />
                         Não
                     </span>
                 </Cell>
diff --git a/resources/js/Pages/CRUD/Stand/Index.vue b/resources/js/Pages/CRUD/Stand/Index.vue
index b2d34fa2..7cedd2a6 100644
--- a/resources/js/Pages/CRUD/Stand/Index.vue
+++ b/resources/js/Pages/CRUD/Stand/Index.vue
@@ -64,7 +64,10 @@ const sponsors = computed<Record<number, string>>(() =>
         <template #row="{ item }">
             <Row name="stands" :item="item">
                 <Cell class="font-medium text-white">
-                    {{ sponsors[item.sponsor_id] ?? `Empresa #${item.sponsor_id}` }}
+                    {{
+                        sponsors[item.sponsor_id] ??
+                        `Empresa #${item.sponsor_id}`
+                    }}
                 </Cell>
                 <Cell class="text-xs text-neutral-400">
                     {{ eventDays[item.event_day_id] ?? "-" }}
diff --git a/resources/js/Pages/CRUD/User/Create.vue b/resources/js/Pages/CRUD/User/Create.vue
index a3c8ab86..4deb573f 100644
--- a/resources/js/Pages/CRUD/User/Create.vue
+++ b/resources/js/Pages/CRUD/User/Create.vue
@@ -124,7 +124,7 @@ const submit = () => {
             class="group rounded-2xl border border-white/10 bg-white/[0.02] p-4 transition-colors hover:border-white/20"
         >
             <summary
-                class="cursor-pointer font-mono text-xs font-semibold uppercase tracking-wider text-neutral-400 transition-colors group-open:text-white"
+                class="cursor-pointer font-mono text-xs font-semibold tracking-wider text-neutral-400 uppercase transition-colors group-open:text-white"
             >
                 Redes sociais & Contactos públicos
             </summary>
diff --git a/resources/js/Pages/CRUD/User/Edit.vue b/resources/js/Pages/CRUD/User/Edit.vue
index 15504dac..25b060f4 100644
--- a/resources/js/Pages/CRUD/User/Edit.vue
+++ b/resources/js/Pages/CRUD/User/Edit.vue
@@ -26,10 +26,7 @@ const form = useForm({
     name: user.name,
     email: user.email,
     type: (user.usertype_type.split("\\").pop() ?? "").toLowerCase() as
-        | "participant"
-        | "company"
-        | "speaker"
-        | "admin",
+        "participant" | "company" | "speaker" | "admin",
     title: isSpeaker ? (user.usertype?.title ?? "") : "",
     display_name: isSpeaker ? (user.usertype?.display_name ?? "") : "",
     description:
@@ -147,7 +144,7 @@ const submit = () => {
             class="group rounded-2xl border border-white/10 bg-white/[0.02] p-4 transition-colors hover:border-white/20"
         >
             <summary
-                class="cursor-pointer font-mono text-xs font-semibold uppercase tracking-wider text-neutral-400 transition-colors group-open:text-white"
+                class="cursor-pointer font-mono text-xs font-semibold tracking-wider text-neutral-400 uppercase transition-colors group-open:text-white"
             >
                 Redes sociais & Contactos públicos
             </summary>
diff --git a/resources/js/Pages/Competition.vue b/resources/js/Pages/Competition.vue
index ad48e1ec..19f54a12 100644
--- a/resources/js/Pages/Competition.vue
+++ b/resources/js/Pages/Competition.vue
@@ -308,13 +308,16 @@ const activeTab = ref<CompetitionTab>(defaultTab.value);
                 class="flex flex-col items-center justify-center py-20 text-center"
             >
                 <PillSelector
-                    :items="[{ id: 'info', label: 'Em breve...', disabled: true }]"
+                    :items="[
+                        { id: 'info', label: 'Em breve...', disabled: true },
+                    ]"
                     size="sm"
                     :wrap="false"
                     container-class="mb-3"
                 />
                 <p class="max-w-md text-xs text-neutral-400 sm:text-sm">
-                    Não há informações adicionais disponíveis para esta competição de momento.
+                    Não há informações adicionais disponíveis para esta
+                    competição de momento.
                 </p>
             </div>
         </div>
diff --git a/resources/js/Pages/Event.vue b/resources/js/Pages/Event.vue
index c2f18498..05f3dfd7 100644
--- a/resources/js/Pages/Event.vue
+++ b/resources/js/Pages/Event.vue
@@ -494,7 +494,10 @@ const scanCodeTabItems = computed<PillOption[]>(() => [
                     v-else
                     class="flex flex-col items-center justify-center rounded-3xl border border-white/8 bg-black/50 py-16 text-center"
                 >
-                    <Users :size="36" class="mb-3 text-neutral-600 opacity-40" />
+                    <Users
+                        :size="36"
+                        class="mb-3 text-neutral-600 opacity-40"
+                    />
                     <h3 class="text-base font-semibold text-white">
                         Sem participantes inscritos
                     </h3>
diff --git a/resources/js/Pages/Home.vue b/resources/js/Pages/Home.vue
index b901d561..6389ecea 100644
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -50,14 +50,14 @@ const { targetRef: heroRef, isVisible: isHeroVisible } = useScrollReveal({
         <section
             id="hero"
             ref="heroRef"
-            class="landing-section relative flex h-screen min-h-dvh max-h-dvh w-full flex-col items-center justify-center gap-8 px-4 text-center overflow-hidden pt-16"
+            class="landing-section relative flex h-screen max-h-dvh min-h-dvh w-full flex-col items-center justify-center gap-8 overflow-hidden px-4 pt-16 text-center"
         >
             <div
                 class="relative transition-all duration-700 ease-in-out"
                 :class="[
                     isHeroVisible
-                        ? 'translate-y-0 opacity-100 scale-100'
-                        : 'translate-y-12 opacity-0 scale-95',
+                        ? 'translate-y-0 scale-100 opacity-100'
+                        : 'translate-y-12 scale-95 opacity-0',
                 ]"
             >
                 <img
@@ -68,7 +68,7 @@ const { targetRef: heroRef, isVisible: isHeroVisible } = useScrollReveal({
             </div>
 
             <p
-                class="text-lg font-medium text-neutral-300 transition-all duration-700 ease-in-out delay-150 sm:text-xl md:text-2xl"
+                class="text-lg font-medium text-neutral-300 transition-all delay-150 duration-700 ease-in-out sm:text-xl md:text-2xl"
                 :class="[
                     isHeroVisible
                         ? 'translate-y-0 opacity-100'
@@ -80,15 +80,17 @@ const { targetRef: heroRef, isVisible: isHeroVisible } = useScrollReveal({
 
             <div
                 v-if="canEnroll"
-                class="transition-all duration-700 ease-in-out delay-300"
+                class="transition-all delay-300 duration-700 ease-in-out"
                 :class="[
                     isHeroVisible
-                        ? 'translate-y-0 opacity-100 scale-100'
-                        : 'translate-y-10 opacity-0 scale-95',
+                        ? 'translate-y-0 scale-100 opacity-100'
+                        : 'translate-y-10 scale-95 opacity-0',
                 ]"
             >
                 <PillSelector
-                    :items="[{ id: 'enroll', label: 'Inscrever-me', active: true }]"
+                    :items="[
+                        { id: 'enroll', label: 'Inscrever-me', active: true },
+                    ]"
                     size="md"
                     :wrap="false"
                     @select="
@@ -102,14 +104,14 @@ const { targetRef: heroRef, isVisible: isHeroVisible } = useScrollReveal({
 
         <section
             id="aboutus"
-            class="landing-section relative flex h-screen min-h-dvh max-h-dvh w-full flex-col items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-8"
+            class="landing-section relative flex h-screen max-h-dvh min-h-dvh w-full flex-col items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-8"
         >
             <AboutUsSection />
         </section>
 
         <section
             id="stats"
-            class="landing-section relative flex h-screen min-h-dvh max-h-dvh w-full flex-col items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-8"
+            class="landing-section relative flex h-screen max-h-dvh min-h-dvh w-full flex-col items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-8"
         >
             <StatsSection
                 :days="days"
@@ -122,21 +124,21 @@ const { targetRef: heroRef, isVisible: isHeroVisible } = useScrollReveal({
 
         <section
             id="speakers"
-            class="landing-section relative flex h-screen min-h-dvh max-h-dvh w-full flex-col items-center justify-center overflow-hidden"
+            class="landing-section relative flex h-screen max-h-dvh min-h-dvh w-full flex-col items-center justify-center overflow-hidden"
         >
             <SpeakersVerticalColumns :speakers="speakers" />
         </section>
 
         <section
             id="sponsors"
-            class="landing-section relative flex h-screen min-h-dvh max-h-dvh w-full flex-col items-center justify-center overflow-hidden"
+            class="landing-section relative flex h-screen max-h-dvh min-h-dvh w-full flex-col items-center justify-center overflow-hidden"
         >
             <SponsorsShowcase :sponsor-tiers="sponsorTiers" />
         </section>
 
         <section
             id="cta"
-            class="landing-section relative flex h-screen min-h-dvh max-h-dvh w-full flex-col items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-8"
+            class="landing-section relative flex h-screen max-h-dvh min-h-dvh w-full flex-col items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-8"
         >
             <EventCtaSection :can-enroll="canEnroll" />
         </section>
diff --git a/resources/js/Pages/Maintenance.vue b/resources/js/Pages/Maintenance.vue
index c6600e5c..1e50dfac 100644
--- a/resources/js/Pages/Maintenance.vue
+++ b/resources/js/Pages/Maintenance.vue
@@ -10,7 +10,9 @@ import SocialIcon from "@/Components/UI/SocialIcon.vue";
     <div class="relative min-h-screen bg-[#0d0e12] text-white">
         <GlowingOrbs />
 
-        <main class="relative z-10 flex min-h-screen flex-col items-center justify-center px-4 py-16">
+        <main
+            class="relative z-10 flex min-h-screen flex-col items-center justify-center px-4 py-16"
+        >
             <div class="flex flex-col items-center text-center">
                 <img
                     id="svg-logo"
@@ -19,11 +21,15 @@ import SocialIcon from "@/Components/UI/SocialIcon.vue";
                     alt="SINF 2026 logo"
                 />
 
-                <p class="mt-8 text-lg font-medium tracking-wide text-neutral-300 select-none sm:text-xl">
+                <p
+                    class="mt-8 text-lg font-medium tracking-wide text-neutral-300 select-none sm:text-xl"
+                >
                     Brevemente
                 </p>
 
-                <div class="mt-8 flex items-center justify-center gap-4 select-none">
+                <div
+                    class="mt-8 flex items-center justify-center gap-4 select-none"
+                >
                     <a
                         href="https://www.instagram.com/sinffeup/"
                         target="_blank"
diff --git a/resources/js/Pages/Profile/ScanCode.vue b/resources/js/Pages/Profile/ScanCode.vue
index 59cc4b9b..4393ee97 100644
--- a/resources/js/Pages/Profile/ScanCode.vue
+++ b/resources/js/Pages/Profile/ScanCode.vue
@@ -744,7 +744,6 @@ onMounted(() => {
                             </p>
                         </div>
                     </div>
-
                 </div>
 
                 <template #footer>

From e00fdd4373689c063f5b44bfb8184d3a6e915cb6 Mon Sep 17 00:00:00 2001
From: Pedro Monteiro <83165668+pedroafmonteiro@users.noreply.github.com>
Date: Sun, 13 Sep 2026 12:32:15 +0100
Subject: [PATCH 32/33] feat: made banner work

---
 resources/js/Components/UI/Banner.vue | 140 +++++++++++++++++++-------
 resources/js/Layouts/AppLayout.vue    |   3 +-
 2 files changed, 105 insertions(+), 38 deletions(-)

diff --git a/resources/js/Components/UI/Banner.vue b/resources/js/Components/UI/Banner.vue
index 4251784c..b624b4c0 100644
--- a/resources/js/Components/UI/Banner.vue
+++ b/resources/js/Components/UI/Banner.vue
@@ -1,61 +1,127 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { usePage } from "@inertiajs/vue3";
-import { CheckCircle, AlertTriangle, X } from "@lucide/vue";
+import type MyPageProps from "@/Types/PageProps";
+import { CheckCircle2, AlertCircle, AlertTriangle, Info, X } from "@lucide/vue";
+
+interface FlashProps {
+    banner?: string;
+    bannerStyle?: string;
+    bannerId?: string;
+    message?: string;
+}
+
+const page = usePage();
+const pageProps = computed(() => page.props as unknown as MyPageProps);
 
 const show = ref(true);
-const style = computed(
-    () => usePage().props.jetstream.flash?.bannerStyle || "success",
+
+const flash = computed<FlashProps>(
+    () =>
+        pageProps.value.jetstream?.flash ||
+        ((page.props as { flash?: FlashProps }).flash ?? {}),
+);
+
+const style = computed(() => flash.value.bannerStyle || "success");
+const message = computed(() => flash.value.banner || flash.value.message || "");
+const id = computed(() => flash.value.bannerId || "");
+
+watch(
+    () => [id.value, message.value],
+    ([newId, newMsg], [oldId, oldMsg]) => {
+        if (newMsg && (newId !== oldId || newMsg !== oldMsg)) {
+            show.value = true;
+        }
+    },
 );
-const message = computed(() => usePage().props.jetstream.flash?.banner || "");
-const id = computed(() => usePage().props.jetstream.flash?.bannerId || "");
 
-watch(id, async () => {
-    show.value = true;
+const bannerConfig = computed(() => {
+    switch (style.value) {
+        case "danger":
+        case "error":
+            return {
+                wrapperClass:
+                    "border-red-500/30 bg-[#140608]/85 text-red-100 shadow-[0_8px_32px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.12),0_0_20px_rgba(239,68,68,0.15)]",
+                iconWrapperClass: "border border-red-500/25 bg-red-500/15",
+                iconClass: "text-red-400",
+                icon: AlertCircle,
+            };
+        case "warning":
+            return {
+                wrapperClass:
+                    "border-amber-500/30 bg-[#160f04]/85 text-amber-100 shadow-[0_8px_32px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.12),0_0_20px_rgba(245,158,11,0.15)]",
+                iconWrapperClass: "border border-amber-500/25 bg-amber-500/15",
+                iconClass: "text-amber-400",
+                icon: AlertTriangle,
+            };
+        case "info":
+            return {
+                wrapperClass:
+                    "border-sky-500/30 bg-[#05111b]/85 text-sky-100 shadow-[0_8px_32px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.12),0_0_20px_rgba(14,165,233,0.15)]",
+                iconWrapperClass: "border border-sky-500/25 bg-sky-500/15",
+                iconClass: "text-sky-400",
+                icon: Info,
+            };
+        case "success":
+        default:
+            return {
+                wrapperClass:
+                    "border-emerald-500/30 bg-[#06150e]/85 text-emerald-100 shadow-[0_8px_32px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.12),0_0_20px_rgba(16,185,129,0.15)]",
+                iconWrapperClass:
+                    "border border-emerald-500/25 bg-emerald-500/15",
+                iconClass: "text-emerald-400",
+                icon: CheckCircle2,
+            };
+    }
 });
 </script>
 
 <template>
-    <div>
-        <div
-            v-if="show && message"
-            class="border-b backdrop-blur-md transition-all"
-            :class="{
-                'border-emerald-500/30 bg-emerald-950/80 text-emerald-200':
-                    style == 'success',
-                'border-red-500/30 bg-red-950/80 text-red-200':
-                    style == 'danger',
-            }"
+    <div
+        aria-live="polite"
+        class="pointer-events-none sticky top-18 z-40 flex w-full justify-center px-4 transition-all duration-300 sm:top-20 sm:px-6"
+        :class="show && message ? 'py-2' : 'py-0'"
+    >
+        <Transition
+            appear
+            enter-active-class="transition-all duration-300 ease-out"
+            enter-from-class="-translate-y-3 scale-95 opacity-0"
+            enter-to-class="translate-y-0 scale-100 opacity-100"
+            leave-active-class="transition-all duration-200 ease-in"
+            leave-from-class="translate-y-0 scale-100 opacity-100"
+            leave-to-class="-translate-y-3 scale-95 opacity-0"
         >
-            <div
-                class="mx-auto flex max-w-(--breakpoint-xl) items-center justify-between gap-4 px-4 py-2.5"
+            <aside
+                v-if="show && message"
+                role="status"
+                class="pill-container pointer-events-auto relative flex max-w-xl items-center gap-2.5 rounded-2xl p-1.5 pr-2 pl-2 transition-all sm:gap-3 sm:rounded-full sm:pr-2 sm:pl-2"
+                :class="bannerConfig.wrapperClass"
             >
-                <div class="flex items-center gap-3">
-                    <CheckCircle
-                        v-if="style == 'success'"
-                        :size="20"
-                        class="shrink-0 text-emerald-400"
-                    />
-                    <AlertTriangle
-                        v-else
-                        :size="20"
-                        class="shrink-0 text-red-400"
+                <div
+                    class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full sm:h-8 sm:w-8"
+                    :class="bannerConfig.iconWrapperClass"
+                >
+                    <component
+                        :is="bannerConfig.icon"
+                        :size="15"
+                        class="shrink-0"
+                        :class="bannerConfig.iconClass"
                     />
-
-                    <span class="text-sm font-medium">
-                        {{ message }}
-                    </span>
                 </div>
 
+                <span class="px-1 text-xs leading-snug font-medium sm:text-sm">
+                    {{ message }}
+                </span>
+
                 <button
                     type="button"
-                    class="pill-container ml-auto flex h-7 w-7 cursor-pointer items-center justify-center text-neutral-400 transition-colors hover:text-white focus-visible:ring-2 focus-visible:ring-white/20"
-                    aria-label="Dismiss"
+                    class="pill-item ml-auto flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center p-0 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white/20 active:scale-95 sm:h-8 sm:w-8"
+                    aria-label="Dispensar"
                     @click.prevent="show = false"
                 >
                     <X :size="14" />
                 </button>
-            </div>
-        </div>
+            </aside>
+        </Transition>
     </div>
 </template>
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index b0d59b4d..5f4d6d84 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -3,6 +3,7 @@ import { Head } from "@inertiajs/vue3";
 import Navbar from "@/Components/Navigation/Navbar.vue";
 import Footer from "@/Components/Navigation/Footer.vue";
 import GlowingOrbs from "@/Components/UI/GlowingOrbs.vue";
+import Banner from "@/Components/UI/Banner.vue";
 
 interface Props {
     title: string;
@@ -21,7 +22,7 @@ defineProps<Props>();
 
         <div class="relative z-10 flex min-h-screen flex-1 flex-col">
             <Navbar />
-            <!-- <Banner /> -->
+            <Banner />
             <main class="flex flex-1 flex-col">
                 <slot />
             </main>

From 3e3841817bc027092cca9190a99e8d45fe14b6a9 Mon Sep 17 00:00:00 2001
From: Pedro Castro <falecompedroac@gmail.com>
Date: Tue, 6 Oct 2026 14:40:55 +0100
Subject: [PATCH 33/33] chore: fix code style

---
 app/Http/Controllers/CRUDController.php | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/Http/Controllers/CRUDController.php b/app/Http/Controllers/CRUDController.php
index 01887120..78136e27 100644
--- a/app/Http/Controllers/CRUDController.php
+++ b/app/Http/Controllers/CRUDController.php
@@ -91,9 +91,9 @@ protected function getIndexData(Request $request): array
         $applySortAndFilters = function (Builder $query) use ($table, $schema, $sortBy, $sortDir, $request) {
             $reserved = ['page', 'query', 'sort_by', 'sort_dir', 'filter_by', 'filter_val'];
             foreach ($request->query() as $key => $value) {
-                if (!in_array($key, $reserved) && $value !== null && $value !== '') {
+                if (! in_array($key, $reserved) && $value !== null && $value !== '') {
                     if ($schema->hasColumn($table, $key)) {
-                        $query->where($table . '.' . $key, $value);
+                        $query->where($table.'.'.$key, $value);
                     }
                 }
             }
@@ -101,14 +101,14 @@ protected function getIndexData(Request $request): array
             if ($request->filled('filter_by') && $request->has('filter_val') && $request->get('filter_val') !== '') {
                 $filterCol = $request->query('filter_by');
                 if ($schema->hasColumn($table, $filterCol)) {
-                    $query->where($table . '.' . $filterCol, $request->query('filter_val'));
+                    $query->where($table.'.'.$filterCol, $request->query('filter_val'));
                 }
             }
 
             if ($schema->hasColumn($table, $sortBy)) {
-                $query->orderBy($table . '.' . $sortBy, $sortDir);
+                $query->orderBy($table.'.'.$sortBy, $sortDir);
             } else {
-                $query->orderBy($table . '.id', 'asc');
+                $query->orderBy($table.'.id', 'asc');
             }
         };