From 9fafc4e6f429bd2d317b70afe3038f60e19a96c4 Mon Sep 17 00:00:00 2001
From: LeoMortari <leo.mortari.forinn@gmail.com>
Date: Sat, 1 Nov 2025 21:35:59 -0300
Subject: [PATCH] Ajusta layout

---
 src/App.vue                           | 881 ++++++++++++++++++++++++--
 src/auth/roles.js                     |  36 +-
 src/auth/router.js                    |  56 +-
 src/components/Button/index.vue       | 220 +++++--
 src/components/DisplayValue/index.vue | 156 ++++-
 src/components/Dropdown/index.vue     | 103 ++-
 src/components/Table/index.vue        | 371 ++++++++---
 src/components/TextField/index.vue    | 225 +++++--
 src/config/axios.js                   |   2 +-
 src/main.js                           |   1 +
 src/quasar-variables.sass             |  21 +-
 src/routes/auth/Login.vue             | 457 ++++++++++---
 src/routes/users/index.vue            | 347 ++++++++++
 src/routes/videos/index.vue           | 341 +++++++---
 src/routes/videos/new.vue             | 752 ++++++++++++++++------
 src/styles/global.scss                | 139 ++++
 src/utils/keycloak.js                 | 164 +++++
 vite.config.js                        |  10 +
 18 files changed, 3676 insertions(+), 606 deletions(-)
 create mode 100644 src/routes/users/index.vue
 create mode 100644 src/styles/global.scss
 create mode 100644 src/utils/keycloak.js

diff --git a/src/App.vue b/src/App.vue
index 82cbaf3..5ff320f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,89 +1,898 @@
 <template>
-  <q-layout view="lHh lpr lff">
-    <q-header v-if="!isLoginPage" reveal class="bg-primary text-white">
-      <q-toolbar>
-        <Button dense flat round icon="mdi-menu" @click="toggleLeftDrawer" />
-        <q-toolbar-title> {{ currentRouteTitle }} </q-toolbar-title>
-        <Toggle v-model="darkMode" @toggle="toggleDarkMode" />
+  <q-layout view="lHh Lpr lFf" class="app-shell">
+    <q-header v-if="!isLoginPage" class="app-header">
+      <q-toolbar class="app-toolbar">
+        <div class="app-toolbar__page">
+          <q-btn
+            flat
+            dense
+            round
+            icon="sym_o_menu"
+            class="app-toolbar__menu"
+            aria-label="Abrir menu"
+            @click="toggleLeftDrawer"
+          />
+
+          <div class="app-toolbar__breadcrumbs">
+            <span class="app-toolbar__eyebrow">Clipper · Painel</span>
+            <h1 class="app-toolbar__title">{{ currentRouteTitle }}</h1>
+            <p v-if="currentRouteDescription" class="app-toolbar__subtitle">
+              {{ currentRouteDescription }}
+            </p>
+          </div>
+        </div>
+
+        <div class="app-toolbar__actions">
+          <Button
+            v-if="quickAction"
+            :icon="quickAction.icon || 'sym_o_add'"
+            :label="quickAction.label"
+            @click="handleQuickAction"
+          />
+
+          <q-btn
+            flat
+            round
+            dense
+            color="primary"
+            icon="sym_o_notifications"
+            class="app-toolbar__icon"
+            aria-label="Notificações"
+          />
+
+          <Toggle v-model="darkMode" color="primary" @toggle="toggleDarkMode" />
+
+          <q-btn
+            v-if="!isLoginPage"
+            flat
+            dense
+            round
+            class="app-toolbar__avatar-btn"
+          >
+            <q-avatar size="36px" class="app-toolbar__avatar">
+              <span>{{ userInitials }}</span>
+            </q-avatar>
+
+            <q-menu
+              class="app-user-menu"
+              anchor="bottom right"
+              self="top right"
+            >
+              <div class="app-user-menu__header">
+                <q-avatar size="40px" color="primary" text-color="white">
+                  {{ userInitials }}
+                </q-avatar>
+
+                <div class="app-user-menu__info">
+                  <div class="app-user-menu__name">
+                    {{ currentUserName || "Usuário" }}
+                  </div>
+                  <div
+                    v-if="
+                      currentUserEmail && currentUserEmail !== currentUserName
+                    "
+                    class="app-user-menu__email"
+                  >
+                    {{ currentUserEmail }}
+                  </div>
+                </div>
+              </div>
+
+              <q-separator spaced />
+
+              <q-list padding class="app-user-menu__list">
+                <q-item clickable disable>
+                  <q-item-section avatar>
+                    <q-icon name="sym_o_settings" />
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label>Configurações</q-item-label>
+                    <q-item-label caption>Em breve</q-item-label>
+                  </q-item-section>
+                </q-item>
+
+                <q-item
+                  clickable
+                  :disable="logoutLoading"
+                  @click="handleLogout"
+                >
+                  <q-item-section avatar>
+                    <q-icon name="sym_o_logout" />
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label>Logout</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </div>
       </q-toolbar>
     </q-header>
 
     <q-drawer
       v-if="!isLoginPage"
-      show-if-above
       v-model="leftDrawerOpen"
-      side="left"
+      show-if-above
+      :width="260"
       bordered
+      class="app-drawer"
     >
-      <div class="row q-pa-md items-center">
-        <div class="col q-ml-xs title">
-          <span>Clipper AI</span>
+      <div class="app-drawer__header">
+        <q-avatar size="44px" color="primary" text-color="white">CI</q-avatar>
+        <div>
+          <div class="app-drawer__brand">Clipper IA</div>
+          <div class="app-drawer__tag">Assistente de cortes</div>
         </div>
       </div>
 
-      <q-separator />
+      <q-scroll-area class="fit">
+        <template v-if="menuSections.length">
+          <q-list padding class="app-nav">
+            <template
+              v-for="(section, sectionIndex) in menuSections"
+              :key="section.key"
+            >
+              <q-item-label header class="app-nav__header">
+                <q-icon
+                  v-if="section.icon"
+                  :name="section.icon"
+                  size="18px"
+                  class="app-nav__header-icon"
+                />
+                <span>{{ section.label }}</span>
+              </q-item-label>
 
-      <q-list>
-        <q-item
-          v-for="route in routes.filter((route) => route.meta.showinModal)"
-          clickable
-          v-ripple
-          :to="route.path"
-        >
-          <q-item-section>{{ route.meta.title }}</q-item-section>
-        </q-item>
-      </q-list>
+              <q-item
+                v-for="route in section.items"
+                :key="route.path"
+                clickable
+                v-ripple
+                :active="$route.path.startsWith(route.path)"
+                :to="route.path"
+                class="app-nav__item"
+                active-class="app-nav__item--active"
+              >
+                <q-item-section avatar>
+                  <q-icon
+                    :name="
+                      route.meta?.icon || section.icon || 'sym_o_dashboard'
+                    "
+                  />
+                </q-item-section>
+                <q-item-section>
+                  <div class="app-nav__label">{{ route.meta?.title }}</div>
+                  <div v-if="route.meta?.description" class="app-nav__caption">
+                    {{ route.meta.description }}
+                  </div>
+                </q-item-section>
+                <q-item-section side>
+                  <q-icon
+                    name="sym_o_chevron_right"
+                    size="18px"
+                    class="app-nav__chevron"
+                  />
+                </q-item-section>
+              </q-item>
+
+              <q-separator
+                v-if="sectionIndex !== menuSections.length - 1"
+                spaced
+                inset
+              />
+            </template>
+          </q-list>
+        </template>
+
+        <div v-else class="app-nav__empty">
+          <q-icon name="sym_o_lock_person" size="36px" color="primary" />
+          <div class="app-nav__empty-title">Nenhum menu disponível</div>
+          <p class="app-nav__empty-text">
+            Entre em contato com o administrador para habilitar as permissões
+            necessárias.
+          </p>
+        </div>
+      </q-scroll-area>
+
+      <div class="app-drawer__footer">
+        <div class="app-drawer__cta">
+          <div class="app-drawer__cta-title">Precisa de ajuda?</div>
+          <div class="app-drawer__cta-text">
+            Nossa equipe está pronta para acelerar seus cortes.
+          </div>
+          <Button
+            color="secondary"
+            text-color="primary"
+            variant="ghost"
+            icon="sym_o_help"
+            label="Abrir suporte"
+            full-width
+          />
+        </div>
+      </div>
     </q-drawer>
 
     <q-page-container>
-      <router-view />
+      <div v-if="isLoginPage">
+        <router-view />
+      </div>
+      <div v-else class="app-page">
+        <router-view />
+      </div>
     </q-page-container>
   </q-layout>
 </template>
 
 <script>
 import { Dark } from "quasar";
+import Cookies from "js-cookie";
 
 import Button from "@components/Button";
 import Toggle from "@components/Toggle";
 
-import { routes } from "./auth/router";
+import { API } from "@config/axios";
+import { routes, MENUS } from "./auth/router";
+import {
+  buildUserProfileFromToken,
+  extractUserInitials,
+  mapRolesToAppRoles,
+} from "@/utils/keycloak";
+
+const MENU_CONFIG = {
+  default: {
+    label: "Navegação",
+    icon: "sym_o_dashboard",
+  },
+  [MENUS.VIDEOS]: {
+    label: "Vídeos",
+    icon: "sym_o_video_library",
+  },
+  [MENUS.USUARIOS]: {
+    label: "Usuários",
+    icon: "sym_o_groups",
+  },
+};
 
 export default {
+  name: "App",
   components: {
     Button,
     Toggle,
   },
   data() {
     return {
-      leftDrawerOpen: false,
+      leftDrawerOpen: true,
       darkMode: Dark.isActive,
+      logoutLoading: false,
       routes,
+      userProfile: this.getInitialUserProfile(),
     };
   },
+  computed: {
+    navigationRoutes() {
+      return this.routes.filter(
+        (route) => route.meta?.showinModal && this.hasPermission(route)
+      );
+    },
+    menuSections() {
+      const groups = this.navigationRoutes.reduce((acc, route) => {
+        const key = route.meta?.menu || "default";
+
+        if (!acc[key]) {
+          const config = MENU_CONFIG[key] || MENU_CONFIG.default || {};
+
+          acc[key] = {
+            key,
+            label:
+              config.label ||
+              route.meta?.menuLabel ||
+              route.meta?.title ||
+              "Navegação",
+            icon: config.icon,
+            items: [],
+          };
+        }
+
+        acc[key].items.push(route);
+
+        return acc;
+      }, {});
+
+      return Object.values(groups).map((section) => ({
+        ...section,
+        items: section.items.sort((a, b) => {
+          const orderA = a.meta?.order ?? 0;
+          const orderB = b.meta?.order ?? 0;
+          return orderA - orderB;
+        }),
+      }));
+    },
+    currentRouteTitle() {
+      const route = this.$route;
+      return route.meta?.title || route.name || "Clipper IA";
+    },
+    currentRouteDescription() {
+      const current = this.$route.meta?.description;
+      if (current) return current;
+
+      const fallback = this.findParentRoute();
+
+      return (
+        fallback?.meta?.description || "Operacionalize cortes com inteligência."
+      );
+    },
+    quickAction() {
+      if (this.$route.meta?.quickAction === false) {
+        return null;
+      }
+
+      if (this.$route.meta?.quickAction) {
+        return this.$route.meta.quickAction;
+      }
+
+      const fallback = this.findParentRoute();
+
+      return fallback?.meta?.quickAction || null;
+    },
+    isLoginPage() {
+      return this.$route.path === "/login";
+    },
+    userRoles() {
+      const profileRoles = Array.isArray(this.userProfile?.roles)
+        ? this.userProfile.roles
+        : [];
+      const rawRoles = Array.isArray(this.userProfile?.rawRoles)
+        ? this.userProfile.rawRoles
+        : [];
+
+      const canonical = mapRolesToAppRoles([...profileRoles, ...rawRoles]);
+
+      return Array.from(new Set(canonical));
+    },
+    currentUserName() {
+      return this.userProfile?.name || this.userProfile?.username || "";
+    },
+    currentUserEmail() {
+      return this.userProfile?.email || this.userProfile?.username || "";
+    },
+    userInitials() {
+      return extractUserInitials(this.currentUserName) || "CI";
+    },
+  },
+  watch: {
+    "$route.path"() {
+      this.syncDrawerWithViewport();
+      this.refreshUserProfile();
+    },
+  },
+  mounted() {
+    this.syncDrawerWithViewport();
+    this.refreshUserProfile();
+    window.addEventListener("resize", this.syncDrawerWithViewport);
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.syncDrawerWithViewport);
+  },
   methods: {
     toggleLeftDrawer() {
       this.leftDrawerOpen = !this.leftDrawerOpen;
     },
     toggleDarkMode() {
       Dark.toggle();
+      this.darkMode = Dark.isActive;
     },
-  },
-  computed: {
-    currentRouteTitle() {
-      const route = this.$route;
-      return route.meta?.title || route.name || "Clipper AI";
+    handleQuickAction() {
+      if (this.quickAction?.handler) {
+        this.quickAction.handler();
+        return;
+      }
+
+      if (this.quickAction?.to) {
+        this.$router.push(this.quickAction.to);
+      }
     },
-    isLoginPage() {
-      return this.$route.path === "/login";
+    async handleLogout() {
+      try {
+        this.logoutLoading = true;
+
+        await API.post("/auth/logout");
+
+        const cookieRemovalOptions = { path: "/" };
+
+        Cookies.remove("token", cookieRemovalOptions);
+        Cookies.remove("refresh_token", cookieRemovalOptions);
+        Cookies.remove("user_roles", cookieRemovalOptions);
+        Cookies.remove("user_profile", cookieRemovalOptions);
+
+        this.userProfile = { roles: [] };
+        this.leftDrawerOpen = false;
+
+        if (this.$route.path !== "/login") {
+          this.$router.push("/login");
+        }
+      } catch (error) {
+      } finally {
+        this.logoutLoading = false;
+      }
+    },
+    syncDrawerWithViewport() {
+      if (window.innerWidth < 1024) {
+        this.leftDrawerOpen = false;
+      } else {
+        this.leftDrawerOpen = true;
+      }
+    },
+    findParentRoute() {
+      const currentMenu = this.$route.meta?.menu;
+
+      if (!currentMenu) {
+        return this.navigationRoutes.find(
+          (route) => route.path === this.$route.path
+        );
+      }
+
+      return this.navigationRoutes.find(
+        (route) => route.meta?.menu && route.meta.menu === currentMenu
+      );
+    },
+    hasPermission(route) {
+      const required = route.meta?.permissions;
+
+      if (!Array.isArray(required) || required.length === 0) {
+        return true;
+      }
+
+      return required.some((role) => this.userRoles.includes(role));
+    },
+    getInitialUserProfile() {
+      const profileCookie = Cookies.get("user_profile");
+      const rolesCookie = Cookies.get("user_roles");
+
+      let profileFromCookie = null;
+
+      if (profileCookie) {
+        try {
+          profileFromCookie = JSON.parse(profileCookie);
+        } catch (error) {
+          console.warn("Invalid user profile cookie", error);
+        }
+      }
+
+      const collectedRawRoles = new Set();
+
+      if (Array.isArray(profileFromCookie?.roles)) {
+        profileFromCookie.roles.forEach((role) => collectedRawRoles.add(role));
+      }
+
+      if (Array.isArray(profileFromCookie?.rawRoles)) {
+        profileFromCookie.rawRoles.forEach((role) =>
+          collectedRawRoles.add(role)
+        );
+      }
+
+      if (rolesCookie) {
+        try {
+          const parsedRoles = JSON.parse(rolesCookie);
+
+          if (Array.isArray(parsedRoles)) {
+            parsedRoles.forEach((role) => collectedRawRoles.add(role));
+          }
+        } catch (error) {
+          console.warn("Invalid roles cookie", error);
+        }
+      }
+
+      const combinedRawRoles = Array.from(collectedRawRoles);
+      const mappedRoles = mapRolesToAppRoles(combinedRawRoles);
+
+      if (profileFromCookie) {
+        return {
+          ...profileFromCookie,
+          rawRoles: combinedRawRoles,
+          roles: mappedRoles,
+        };
+      }
+
+      const token = Cookies.get("token");
+
+      if (!token) {
+        if (mappedRoles.length) {
+          return {
+            roles: mappedRoles,
+            rawRoles: combinedRawRoles,
+          };
+        }
+
+        return { roles: [] };
+      }
+
+      const profile = buildUserProfileFromToken(token);
+
+      if (!profile) {
+        return { roles: [] };
+      }
+
+      const combinedFromToken = new Set([
+        ...(profile.rawRoles || []),
+        ...combinedRawRoles,
+        ...(profile.roles || []),
+      ]);
+
+      const finalRawRoles = Array.from(combinedFromToken);
+      const finalRoles = mapRolesToAppRoles(finalRawRoles);
+
+      return {
+        ...profile,
+        rawRoles: finalRawRoles,
+        roles: finalRoles,
+      };
+    },
+    refreshUserProfile() {
+      const profile = this.getInitialUserProfile();
+      this.userProfile = profile || { roles: [] };
     },
   },
 };
 </script>
 
-<style lang="scss" scoped>
-.title {
-  font-size: 24px;
-  color: $primary;
+<style scoped lang="scss">
+.app-shell {
+  background: transparent;
+}
+
+.app-header {
+  backdrop-filter: blur(18px);
+  background: rgba(255, 255, 255, 0.92);
+  border-bottom: 1px solid rgba(127, 86, 217, 0.12);
+  padding: 10px clamp(12px, 2vw, 24px);
+}
+
+body.body--dark .app-header {
+  background: rgba(16, 24, 40, 0.9);
+  border-bottom-color: rgba(244, 235, 255, 0.08);
+}
+
+.app-toolbar {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: clamp(16px, 3vw, 40px);
+}
+
+.app-toolbar__page {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.app-toolbar__menu {
+  display: none;
+}
+
+.app-toolbar__breadcrumbs {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.app-toolbar__eyebrow {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: #7f56d9;
+  font-weight: 600;
+}
+
+.app-toolbar__title {
+  font-size: clamp(24px, 3vw, 32px);
+  font-weight: 700;
+  color: #101828;
+  margin: 0;
+}
+
+.app-toolbar__subtitle {
+  font-size: 14px;
+  color: #475467;
+  margin: 0;
+  max-width: 420px;
+}
+
+body.body--dark .app-toolbar__eyebrow {
+  color: #f4ebff;
+}
+
+body.body--dark .app-toolbar__title {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+body.body--dark .app-toolbar__subtitle {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.app-toolbar__actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.app-toolbar__avatar-btn {
+  padding: 0;
+  min-width: 0;
+}
+
+.app-toolbar__avatar-btn .q-btn__content {
+  padding: 0;
+}
+
+.app-toolbar__icon {
+  background: rgba(127, 86, 217, 0.08);
+  color: #53389e;
+}
+
+body.body--dark .app-toolbar__icon {
+  background: rgba(244, 235, 255, 0.12);
+  color: #f4ebff;
+}
+
+.app-toolbar__avatar {
+  background: rgba(127, 86, 217, 0.16);
+  color: #53389e;
+  font-weight: 600;
+}
+
+body.body--dark .app-toolbar__avatar {
+  background: rgba(244, 235, 255, 0.2);
+  color: #0b1120;
+}
+
+.app-user-menu {
+  min-width: 240px;
+  padding: 12px 0;
+}
+
+.app-user-menu__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 16px 8px;
+}
+
+.app-user-menu__info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.app-user-menu__name {
+  font-weight: 600;
+  color: #101828;
+}
+
+.app-user-menu__email {
+  font-size: 13px;
+  color: #667085;
+}
+
+.app-user-menu__list .q-item {
+  border-radius: 12px;
+}
+
+.app-user-menu__list .q-item:not(.q-item--disabled):hover {
+  background: rgba(127, 86, 217, 0.08);
+}
+
+body.body--dark .app-user-menu__name {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+body.body--dark .app-user-menu__email {
+  color: rgba(255, 255, 255, 0.65);
+}
+
+body.body--dark .app-user-menu__list .q-item:not(.q-item--disabled):hover {
+  background: rgba(244, 235, 255, 0.12);
+}
+
+.app-drawer {
+  padding: 24px 0 16px;
+  border-right: none;
+  background: #ffffff;
+}
+
+body.body--dark .app-drawer {
+  background: rgba(16, 24, 40, 0.96);
+}
+
+.app-drawer__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 24px 24px;
+}
+
+.app-drawer__brand {
+  font-weight: 700;
+  font-size: 18px;
+  color: #101828;
+}
+
+.app-drawer__tag {
+  font-size: 13px;
+  color: #667085;
+}
+
+body.body--dark .app-drawer__brand {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+body.body--dark .app-drawer__tag {
+  color: rgba(255, 255, 255, 0.55);
+}
+
+.app-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.app-nav__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #98a2b3;
+}
+
+.app-nav__header-icon {
+  color: #7f56d9;
+}
+
+.app-nav__item {
+  border-radius: 14px;
+  margin: 0 12px;
+  padding: 12px;
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.app-nav__item:hover {
+  background: rgba(127, 86, 217, 0.08);
+  transform: translateX(4px);
+}
+
+.app-nav__item--active {
+  background: rgba(127, 86, 217, 0.16);
+  color: #53389e;
+}
+
+.app-nav__label {
+  font-weight: 600;
+  color: #101828;
+}
+
+.app-nav__caption {
+  font-size: 12px;
+  color: #667085;
+}
+
+.app-nav__chevron {
+  color: #c7c9d9;
+}
+
+body.body--dark .app-nav__item:hover {
+  background: rgba(244, 235, 255, 0.1);
+}
+
+body.body--dark .app-nav__item--active {
+  background: rgba(244, 235, 255, 0.18);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+body.body--dark .app-nav__label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+body.body--dark .app-nav__caption {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+body.body--dark .app-nav__chevron {
+  color: rgba(244, 235, 255, 0.4);
+}
+
+.app-nav__empty {
+  padding: 48px 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 12px;
+  color: #475467;
+}
+
+.app-nav__empty-title {
+  font-weight: 600;
+  color: #101828;
+}
+
+.app-nav__empty-text {
+  margin: 0;
+  font-size: 13px;
+  color: #667085;
+}
+
+body.body--dark .app-nav__header-icon {
+  color: #f4ebff;
+}
+
+body.body--dark .app-nav__empty-title {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+body.body--dark .app-nav__empty-text {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.app-drawer__footer {
+  padding: 24px;
+}
+
+.app-drawer__cta {
+  background: rgba(127, 86, 217, 0.12);
+  border-radius: 16px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.app-drawer__cta-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #53389e;
+}
+
+.app-drawer__cta-text {
+  font-size: 13px;
+  color: #475467;
+}
+
+body.body--dark .app-drawer__cta {
+  background: rgba(244, 235, 255, 0.12);
+}
+
+body.body--dark .app-drawer__cta-title {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+body.body--dark .app-drawer__cta-text {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+@media (max-width: 1024px) {
+  .app-toolbar__menu {
+    display: inline-flex;
+  }
+
+  .app-drawer {
+    background: #ffffff;
+  }
+}
+
+@media (max-width: 768px) {
+  .app-toolbar__actions {
+    gap: 8px;
+  }
+
+  .app-toolbar__subtitle {
+    max-width: 280px;
+  }
+
+  .app-toolbar__icon,
+  .app-toolbar__avatar {
+    display: none;
+  }
 }
 </style>
diff --git a/src/auth/roles.js b/src/auth/roles.js
index 8c8cc31..5a4b402 100644
--- a/src/auth/roles.js
+++ b/src/auth/roles.js
@@ -1,3 +1,35 @@
-export default {
-  VIDEOS_LIST: "role_videos_6550",
+const ROLES = {
+  ADMIN: "ADMIN",
+  USER: "USER",
 };
+
+export const ROLE_ALIASES = {
+  [ROLES.ADMIN]: [
+    "ADMIN",
+    "ROLE_ADMIN",
+    "REALM_ADMIN",
+    "MASTER_ADMIN",
+    "APP_ADMIN",
+    "CLIPPER_ADMIN",
+    "ADMINISTRATOR",
+    "SUPERUSER",
+  ],
+  [ROLES.USER]: [
+    "USER",
+    "ROLE_USER",
+    "DEFAULT_USER",
+    "DEFAULT_ROLES",
+    "DEFAULT-ROLES",
+    "CLIPPER_USER",
+    "VIDEO_USER",
+    "ROLE_VIDEOS_6550",
+    "ROLE_VIDEOS",
+    "ROLE_VIEWER",
+  ],
+};
+
+export const ROLE_INHERITANCE = {
+  [ROLES.ADMIN]: [ROLES.USER],
+};
+
+export default ROLES;
diff --git a/src/auth/router.js b/src/auth/router.js
index 7c839a1..2860d3b 100644
--- a/src/auth/router.js
+++ b/src/auth/router.js
@@ -3,9 +3,11 @@ import Cookies from "js-cookie";
 import { createWebHistory, createRouter } from "vue-router";
 
 import roles from "@/auth/roles";
+import { extractRolesFromToken } from "@/utils/keycloak";
 
 import Videos from "@/routes/videos";
 import NewVideo from "@/routes/videos/new";
+import Users from "@/routes/users/index.vue";
 import Login from "@/routes/auth/Login";
 
 export const MENUS = {
@@ -14,9 +16,27 @@ export const MENUS = {
 };
 
 const getUserRoles = () => {
-  const rolesFromCookie = Cookies.get("user_roles"); // TODO: Tirar as permissões do usuário
+  const rolesFromCookie = Cookies.get("user_roles");
 
-  return rolesFromCookie ? JSON.parse(rolesFromCookie) : [];
+  if (rolesFromCookie) {
+    try {
+      const parsed = JSON.parse(rolesFromCookie);
+      if (Array.isArray(parsed)) {
+        return parsed;
+      }
+    } catch (error) {
+      console.warn("Invalid roles cookie", error);
+    }
+  }
+
+  const token = Cookies.get("token");
+  const decodedRoles = extractRolesFromToken(token);
+
+  if (decodedRoles.length) {
+    Cookies.set("user_roles", JSON.stringify(decodedRoles), { sameSite: "lax" });
+  }
+
+  return decodedRoles;
 };
 
 export const routes = [
@@ -36,9 +56,17 @@ export const routes = [
     meta: {
       requiresAuth: true,
       title: "Vídeos",
-      permissions: [roles.VIDEOS_LIST],
+      permissions: [roles.USER, roles.ADMIN],
       showinModal: true,
       menu: MENUS.VIDEOS,
+      icon: "sym_o_video_library",
+      description: "Acompanhe e gerencie os vídeos capturados automaticamente.",
+      quickAction: {
+        label: "Novo vídeo",
+        to: "/videos/new",
+        icon: "sym_o_add",
+      },
+      order: 1,
     },
   },
   {
@@ -48,9 +76,29 @@ export const routes = [
     meta: {
       requiresAuth: true,
       title: "Novo Vídeo",
-      permissions: [roles.VIDEOS_LIST],
+      permissions: [roles.USER, roles.ADMIN],
       showinModal: false,
       menu: MENUS.VIDEOS,
+      icon: "sym_o_add_to_queue",
+      description: "Cole o link do YouTube e deixe a IA preparar seus cortes.",
+      quickAction: false,
+      order: 2,
+    },
+  },
+  {
+    path: "/users",
+    name: "Users",
+    component: Users,
+    meta: {
+      requiresAuth: true,
+      title: "Usuários",
+      permissions: [roles.ADMIN],
+      showinModal: true,
+      menu: MENUS.USUARIOS,
+      icon: "sym_o_groups",
+      description: "Gerencie quem tem acesso ao Clipper IA.",
+      quickAction: false,
+      order: 1,
     },
   },
   {
diff --git a/src/components/Button/index.vue b/src/components/Button/index.vue
index dfd9541..7bc57d7 100644
--- a/src/components/Button/index.vue
+++ b/src/components/Button/index.vue
@@ -1,51 +1,195 @@
 <template>
   <q-btn
+    v-bind="attrs"
+    class="app-btn"
+    :class="[`app-btn--${variant}`]"
+    :style="variantStyles"
     :icon="icon"
     :label="label"
     :loading="loading"
-    :color="color"
+    :color="resolvedColor"
+    :text-color="resolvedTextColor"
     :type="type"
+    :flat="isFlat"
+    :outline="isOutline"
+    :unelevated="isUnelevated"
+    :round="round"
+    :rounded="rounded"
+    :dense="dense"
     :disable="loading || disabled"
-    :text-color="textColor"
     :full-width="fullWidth"
-  />
+    :padding="padding"
+    :size="size"
+    :ripple="ripple"
+    :no-wrap="noWrap"
+    :href="href"
+    :to="to"
+  >
+    <slot />
+  </q-btn>
 </template>
 
-<script>
-export default {
+<script setup>
+import { computed, useAttrs } from "vue";
+
+defineOptions({
   name: "Button",
-  props: {
-    color: {
-      type: String,
-      default: "primary",
-      validator: (value) => ["primary", "secondary"].includes(value),
-    },
-    icon: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    type: {
-      type: String,
-      default: "button",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    textColor: {
-      type: String,
-      default: "white",
-    },
-    fullWidth: {
-      type: Boolean,
-      default: false,
-    },
+});
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: "primary",
   },
-};
+  textColor: {
+    type: String,
+    default: null,
+  },
+  variant: {
+    type: String,
+    default: "filled",
+    validator: (value) =>
+      ["filled", "outline", "ghost", "link"].includes(value),
+  },
+  icon: String,
+  label: String,
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: "button",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  fullWidth: {
+    type: Boolean,
+    default: false,
+  },
+  dense: {
+    type: Boolean,
+    default: false,
+  },
+  round: {
+    type: Boolean,
+    default: false,
+  },
+  rounded: {
+    type: Boolean,
+    default: true,
+  },
+  size: {
+    type: String,
+    default: "md",
+  },
+  padding: {
+    type: String,
+    default: "12px 20px",
+  },
+  ripple: {
+    type: [Boolean, Object],
+    default: true,
+  },
+  noWrap: {
+    type: Boolean,
+    default: false,
+  },
+  to: {
+    type: [String, Object],
+    default: null,
+  },
+  href: {
+    type: String,
+    default: null,
+  },
+});
+
+const attrs = useAttrs();
+
+const isOutline = computed(() => props.variant === "outline");
+const isGhost = computed(() => props.variant === "ghost");
+const isLink = computed(() => props.variant === "link");
+const isFlat = computed(() => isGhost.value || isLink.value);
+const isUnelevated = computed(() => props.variant === "filled" || isGhost.value);
+
+const resolvedColor = computed(() => props.color);
+
+const resolvedTextColor = computed(() => {
+  if (props.variant === "filled") {
+    return props.textColor || "white";
+  }
+
+  return props.textColor || props.color;
+});
+
+const variantStyles = computed(() => {
+  if (props.variant === "ghost") {
+    const backgrounds = {
+      primary: "rgba(127, 86, 217, 0.12)",
+      accent: "rgba(83, 56, 158, 0.12)",
+      secondary: "rgba(244, 235, 255, 0.4)",
+      white: "rgba(255, 255, 255, 0.2)",
+    };
+
+    const hoverBackgrounds = {
+      primary: "rgba(83, 56, 158, 0.16)",
+      accent: "rgba(83, 56, 158, 0.22)",
+      secondary: "rgba(244, 235, 255, 0.55)",
+      white: "rgba(255, 255, 255, 0.28)",
+    };
+
+    const background = backgrounds[props.color] || "rgba(127, 86, 217, 0.12)";
+    const hover = hoverBackgrounds[props.color] || "rgba(83, 56, 158, 0.18)";
+    const color = props.textColor || props.color;
+
+    return {
+      "--app-btn-ghost-bg": background,
+      "--app-btn-ghost-hover-bg": hover,
+      "--app-btn-ghost-color": color,
+    };
+  }
+
+  return null;
+});
 </script>
+
+<style scoped>
+.app-btn {
+  border-radius: 14px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.app-btn:hover:not(.disabled):not(.q-btn--flat) {
+  transform: translateY(-1px);
+  box-shadow: var(--app-shadow-sm);
+}
+
+.app-btn--ghost {
+  background: var(--app-btn-ghost-bg, rgba(127, 86, 217, 0.12));
+  color: var(--app-btn-ghost-color, #53389e);
+}
+
+.app-btn--ghost:hover {
+  background: var(--app-btn-ghost-hover-bg, rgba(83, 56, 158, 0.16));
+}
+
+.app-btn--outline {
+  border-width: 2px;
+}
+
+.app-btn--link {
+  padding: 0;
+  min-height: auto;
+  font-weight: 600;
+}
+
+body.body--dark .app-btn--ghost {
+  background: rgba(244, 235, 255, 0.12);
+  color: var(--app-btn-ghost-color, #f4ebff);
+}
+</style>
diff --git a/src/components/DisplayValue/index.vue b/src/components/DisplayValue/index.vue
index f69397a..4a3a9b4 100644
--- a/src/components/DisplayValue/index.vue
+++ b/src/components/DisplayValue/index.vue
@@ -1,34 +1,150 @@
 <template>
-  <div>
-    <span class="display-label">{{ label }}</span>
-  </div>
+  <div class="display-value" :class="[`display-value--${orientation}`, `display-value--${variant}`]">
+    <div class="display-value__label">
+      <slot name="label">
+        <span>{{ label }}</span>
+      </slot>
+      <q-icon v-if="icon" :name="icon" size="18px" class="display-value__icon" />
+    </div>
 
-  <div>
-    <span>{{ value }}</span>
+    <div class="display-value__content">
+      <slot>
+        <span :class="['display-value__text', { 'display-value__text--muted': !hasValue }]">
+          {{ hasValue ? value : placeholder }}
+        </span>
+      </slot>
+      <small v-if="helper" class="display-value__helper">{{ helper }}</small>
+    </div>
   </div>
 </template>
 
-<script>
-import { defineComponent } from "vue";
+<script setup>
+import { computed } from "vue";
 
-export default defineComponent({
+defineOptions({
   name: "DisplayValue",
-  props: {
-    label: {
-      type: String,
-      default: "",
-    },
-    value: {
-      type: [String, Number],
-      default: "",
-    },
+});
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: "",
+  },
+  value: {
+    type: [String, Number],
+    default: "",
+  },
+  placeholder: {
+    type: String,
+    default: "—",
+  },
+  orientation: {
+    type: String,
+    default: "vertical",
+    validator: (value) => ["vertical", "horizontal"].includes(value),
+  },
+  helper: {
+    type: String,
+    default: "",
+  },
+  icon: {
+    type: String,
+    default: "",
+  },
+  variant: {
+    type: String,
+    default: "default",
+    validator: (value) => ["default", "highlight"].includes(value),
   },
 });
+
+const hasValue = computed(() => props.value !== undefined && props.value !== null && props.value !== "");
 </script>
 
 <style scoped>
-.display-label {
-  font-weight: bold;
-  color: gray;
+.display-value {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  padding: 12px 16px;
+  border-radius: 12px;
+  background: rgba(127, 86, 217, 0.06);
+  color: #101828;
+}
+
+.display-value--horizontal {
+  flex-direction: row;
+  align-items: center;
+}
+
+.display-value--vertical {
+  flex-direction: column;
+}
+
+.display-value--highlight {
+  background: rgba(127, 86, 217, 0.12);
+  box-shadow: inset 0 0 0 1px rgba(83, 56, 158, 0.22);
+}
+
+.display-value__label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #53389e;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.display-value__icon {
+  color: #7f56d9;
+}
+
+.display-value__content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.display-value__text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #101828;
+  word-break: break-word;
+}
+
+.display-value__text--muted {
+  color: #98a2b3;
+}
+
+.display-value__helper {
+  font-size: 12px;
+  color: #475467;
+}
+
+body.body--dark .display-value {
+  background: rgba(244, 235, 255, 0.08);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+body.body--dark .display-value__label {
+  color: #f4ebff;
+}
+
+body.body--dark .display-value__icon {
+  color: #f4ebff;
+}
+
+body.body--dark .display-value__text {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+body.body--dark .display-value__text--muted {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+body.body--dark .display-value__helper {
+  color: rgba(255, 255, 255, 0.6);
 }
 </style>
diff --git a/src/components/Dropdown/index.vue b/src/components/Dropdown/index.vue
index c4e1680..1f7fb00 100644
--- a/src/components/Dropdown/index.vue
+++ b/src/components/Dropdown/index.vue
@@ -1,8 +1,10 @@
 <template>
-  <div>
-    <div v-if="label">
-      <span>{{ label }} {{ required ? "*" : "" }}</span>
-    </div>
+  <div class="app-input">
+    <label v-if="label" class="app-input__label">
+      <span>{{ label }}</span>
+      <span v-if="required" class="app-input__required">*</span>
+      <span v-if="hint" class="app-input__hint">{{ hint }}</span>
+    </label>
 
     <slot
       name="select"
@@ -11,6 +13,13 @@
     >
       <q-select
         outlined
+        dense
+        :emit-value="emitValue"
+        :map-options="mapOptions"
+        :behavior="behavior"
+        :use-input="useInput"
+        :use-chips="useChips"
+        :fill-input="fillInput"
         :model-value="modelValue"
         @update:model-value="updateModelValue"
         :multiple="multiple"
@@ -18,12 +27,20 @@
         :loading="loading"
         :clearable="clearable"
         :disable="loading || disable"
+        :option-label="optionLabel"
+        :option-value="optionValue"
+        :popup-content-style="popupContentStyle"
+        popup-cover
       />
     </slot>
   </div>
 </template>
 
 <script setup>
+defineOptions({
+  name: "Dropdown",
+});
+
 const props = defineProps({
   modelValue: {
     type: [String, Number, Array, Object],
@@ -37,6 +54,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  hint: {
+    type: String,
+    default: "",
+  },
   multiple: {
     type: Boolean,
     default: false,
@@ -57,6 +78,45 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  emitValue: {
+    type: Boolean,
+    default: false,
+  },
+  mapOptions: {
+    type: Boolean,
+    default: false,
+  },
+  optionLabel: {
+    type: [String, Function],
+    default: "label",
+  },
+  optionValue: {
+    type: [String, Function],
+    default: "value",
+  },
+  popupContentStyle: {
+    type: [String, Object],
+    default: () => ({
+      borderRadius: "12px",
+      boxShadow: "0 12px 32px rgba(16, 24, 40, 0.12)",
+    }),
+  },
+  behavior: {
+    type: String,
+    default: "default",
+  },
+  useInput: {
+    type: Boolean,
+    default: false,
+  },
+  fillInput: {
+    type: Boolean,
+    default: false,
+  },
+  useChips: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["update:modelValue"]);
@@ -65,3 +125,38 @@ const updateModelValue = (value) => {
   emit("update:modelValue", value);
 };
 </script>
+
+<style scoped>
+.app-input {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.app-input__label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #53389e;
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+}
+
+.app-input__required {
+  color: #f04438;
+}
+
+.app-input__hint {
+  font-size: 12px;
+  font-weight: 400;
+  color: #475467;
+}
+
+body.body--dark .app-input__label {
+  color: #f4ebff;
+}
+
+body.body--dark .app-input__hint {
+  color: rgba(255, 255, 255, 0.6);
+}
+</style>
diff --git a/src/components/Table/index.vue b/src/components/Table/index.vue
index 2d2205e..415680d 100644
--- a/src/components/Table/index.vue
+++ b/src/components/Table/index.vue
@@ -1,122 +1,327 @@
 <template>
-  <q-card class="q-pa-md" flat bordered>
+  <q-card class="app-card app-table" flat bordered>
+    <header v-if="title || subtitle || hasActionsSlot" class="app-table__header">
+      <div class="app-table__heading">
+        <h2 v-if="title" class="app-table__title">{{ title }}</h2>
+        <p v-if="subtitle" class="app-table__subtitle">{{ subtitle }}</p>
+      </div>
+
+      <div v-if="hasActionsSlot" class="app-table__actions">
+        <slot name="actions" />
+      </div>
+    </header>
+
     <q-table
-      :key="key + '-' + pagination.perPage"
-      :title="title"
+      :key="tableKey"
+      flat
+      bordered
+      :title="undefined"
       :rows="rows"
       :columns="columns"
       :row-key="rowKey"
       :loading="loading"
-      :pagination="{ rowsPerPage: pagination.perPage, page: pagination.page }"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      flat
-      bordered
-      hide-pagination
+      :grid="grid"
+      :rows-per-page-options="rowsPerPageOptions"
+      :pagination="tablePagination"
+      :hide-pagination="true"
+      :virtual-scroll="virtualScroll"
+      :separator="separator"
+      class="app-table__body"
     >
-      <template v-slot:loading>
+      <template #top>
+        <slot name="top" />
+      </template>
+
+      <template #loading>
         <q-inner-loading showing color="primary" />
       </template>
 
-      <template v-slot:no-data>
-        <slot name="no-data" />
+      <template #no-data>
+        <div class="app-table__empty">
+          <q-icon name="sym_o_video_library" size="32px" color="primary" />
+          <div class="app-table__empty-title">Nada por aqui ainda</div>
+          <div class="app-table__empty-subtitle">
+            <slot name="empty-message">Refine os filtros ou cadastre um novo item.</slot>
+          </div>
+        </div>
+      </template>
+
+      <template #body="props">
+        <slot name="body" v-bind="props">
+          <q-tr :props="props">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              {{ col.value }}
+            </q-td>
+          </q-tr>
+        </slot>
       </template>
     </q-table>
 
-    <div class="row q-mt-md">
-      <div class="col-2 flex items-center">
+    <footer v-if="showPagination" class="app-table__footer">
+      <div class="app-table__density">
         <q-select
-          filled
-          v-model="pagination.perPage"
-          :options="[10, 25, 50, 100]"
+          v-model="internalPagination.perPage"
+          dense
+          borderless
+          :options="rowsPerPageOptions"
           emit-value
           map-options
-          :disable="loading || rows.length === 0"
+          option-value="value"
+          option-label="label"
+          :disable="loading || !hasRows"
           @update:model-value="updatePagination({ perPage: $event })"
         />
       </div>
 
-      <div class="col-8 flex justify-center">
+      <div class="app-table__pagination">
         <q-pagination
-          v-model="pagination.page"
+          v-model="internalPagination.page"
           color="primary"
           size="md"
-          :max="pagination.totalPages"
-          :disable="loading"
+          :max="internalPagination.totalPages"
+          :disable="loading || !hasRows"
           input
           @update:model-value="updatePagination({ page: $event })"
         />
       </div>
 
-      <div class="col-2 flex justify-end items-center">
-        <span class="text-grey-5">Total: {{ pagination.total }}</span>
+      <div class="app-table__meta">
+        <span>{{ metaText }}</span>
       </div>
-    </div>
+    </footer>
   </q-card>
 </template>
 
-<script>
+<script setup>
+import { computed, reactive, useSlots, watch } from "vue";
 import has from "lodash/has";
 
-export default {
+defineOptions({
   name: "Table",
-  props: {
-    key: {
-      type: String,
-      default: "table-clipperia",
-    },
-    columns: {
-      type: Array,
-      required: true,
-      validator: (value) =>
-        Array.isArray(value) &&
-        value.every((col) => has(col, "name") && has(col, "label")),
-    },
-    rows: {
-      type: Array,
-      required: true,
-      validator: (value) => Array.isArray(value),
-    },
-    rowName: {
-      type: String,
-      default: "name",
-    },
-    rowKey: {
-      type: String,
-      default: "id",
-    },
-    title: String,
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    pagination: {
-      type: Object,
-      required: false,
-      default: {
-        page: 1,
-        direction: "desc",
-        perPage: 10,
-        total: 10,
-        totalPages: 1,
-        hasNext: false,
-        hasPrev: false,
-      },
-    },
-  },
-  emits: ["update:pagination"],
-  methods: {
-    updatePagination({ page, perPage }) {
-      const newPagination = { ...this.pagination };
+});
 
-      if (page) {
-        newPagination.page = page;
-      }
-      if (perPage) {
-        newPagination.perPage = perPage;
-      }
-
-      this.$emit("update:pagination", newPagination);
-    },
+const props = defineProps({
+  key: {
+    type: String,
+    default: "table-clipperia",
   },
+  columns: {
+    type: Array,
+    required: true,
+    validator: (value) =>
+      Array.isArray(value) && value.every((col) => has(col, "name") && has(col, "label")),
+  },
+  rows: {
+    type: Array,
+    required: true,
+    validator: Array.isArray,
+  },
+  rowName: {
+    type: String,
+    default: "name",
+  },
+  rowKey: {
+    type: String,
+    default: "id",
+  },
+  title: {
+    type: String,
+    default: "",
+  },
+  subtitle: {
+    type: String,
+    default: "",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  pagination: {
+    type: Object,
+    default: () => ({
+      page: 1,
+      direction: "desc",
+      perPage: 10,
+      total: 0,
+      totalPages: 1,
+      hasNext: false,
+      hasPrev: false,
+    }),
+  },
+  rowsPerPageOptions: {
+    type: Array,
+    default: () => [
+      { label: "10 por página", value: 10 },
+      { label: "25 por página", value: 25 },
+      { label: "50 por página", value: 50 },
+      { label: "100 por página", value: 100 },
+    ],
+  },
+  grid: {
+    type: Boolean,
+    default: false,
+  },
+  virtualScroll: {
+    type: Boolean,
+    default: false,
+  },
+  separator: {
+    type: String,
+    default: "horizontal",
+  },
+  hidePagination: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:pagination"]);
+
+const slots = useSlots();
+
+const hasActionsSlot = computed(() => !!slots.actions);
+const hasRows = computed(() => props.rows.length > 0);
+const showPagination = computed(() => !props.hidePagination && hasRows.value);
+
+const internalPagination = reactive({
+  page: props.pagination.page,
+  perPage: props.pagination.perPage,
+  total: props.pagination.total,
+  totalPages: props.pagination.totalPages,
+});
+
+watch(
+  () => props.pagination,
+  (newPagination) => {
+    internalPagination.page = newPagination.page || 1;
+    internalPagination.perPage = newPagination.perPage || 10;
+    internalPagination.total = newPagination.total || 0;
+    internalPagination.totalPages = newPagination.totalPages || 1;
+  },
+  { deep: true }
+);
+
+const tablePagination = computed(() => ({
+  page: internalPagination.page,
+  rowsPerPage: internalPagination.perPage,
+}));
+
+const tableKey = computed(() => `${props.key}-${internalPagination.perPage}`);
+
+const metaText = computed(() => {
+  if (!hasRows.value) {
+    return "Nenhum resultado";
+  }
+
+  return `Mostrando página ${internalPagination.page} de ${internalPagination.totalPages} · Total: ${internalPagination.total}`;
+});
+
+const updatePagination = ({ page, perPage }) => {
+  const nextPagination = {
+    ...props.pagination,
+    page: page ?? internalPagination.page,
+    perPage: perPage ?? internalPagination.perPage,
+  };
+
+  emit("update:pagination", nextPagination);
 };
 </script>
+
+<style scoped>
+.app-table {
+  gap: 0;
+}
+
+.app-table__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.app-table__heading {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.app-table__title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #101828;
+  margin: 0;
+}
+
+.app-table__subtitle {
+  margin: 0;
+  font-size: 14px;
+  color: #475467;
+}
+
+.app-table__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.app-table__body {
+  border-radius: 16px;
+}
+
+.app-table__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 32px 16px;
+  color: #475467;
+}
+
+.app-table__empty-title {
+  font-weight: 600;
+  color: #101828;
+}
+
+.app-table__empty-subtitle {
+  font-size: 14px;
+  color: #667085;
+  text-align: center;
+}
+
+.app-table__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 24px;
+  flex-wrap: wrap;
+}
+
+.app-table__density {
+  min-width: 160px;
+}
+
+.app-table__meta {
+  font-size: 14px;
+  color: #475467;
+}
+
+body.body--dark .app-table__title {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+body.body--dark .app-table__subtitle,
+body.body--dark .app-table__meta {
+  color: rgba(255, 255, 255, 0.65);
+}
+
+body.body--dark .app-table__empty-title {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+body.body--dark .app-table__empty-subtitle {
+  color: rgba(255, 255, 255, 0.6);
+}
+</style>
diff --git a/src/components/TextField/index.vue b/src/components/TextField/index.vue
index 7a81a1f..975fe08 100644
--- a/src/components/TextField/index.vue
+++ b/src/components/TextField/index.vue
@@ -1,59 +1,208 @@
 <template>
-  <div>
-    <div>
-      <span>{{ label }} {{ required ? "*" : "" }}</span>
-    </div>
+  <div class="app-input">
+    <label v-if="label" class="app-input__label">
+      <span>{{ label }}</span>
+      <span v-if="required" class="app-input__required">*</span>
+      <span v-if="hint" class="app-input__hint">{{ hint }}</span>
+    </label>
 
     <q-input
+      v-bind="attrs"
       outlined
+      dense
       :model-value="modelValue"
       @update:model-value="updateValue"
-      :disabled="disabled"
+      :disable="disabled"
+      :readonly="readonly"
+      :type="type"
+      :clearable="clearable"
+      :placeholder="placeholder"
+      :maxlength="maxlength"
+      :counter="counter"
+      :autogrow="autogrow"
+      :rows="rows"
+      :debounce="debounce"
+      :mask="mask"
+      :unmasked-value="unmaskedValue"
       :required="required"
+      :prefix="prefix"
+      :suffix="suffix"
+      :input-style="inputStyle"
+      :input-class="inputClass"
+      :class="['app-input__field', fieldDensity]"
+      @blur="emit('blur')"
+      @focus="emit('focus')"
     >
-      <template v-slot:append>
-        <slot name="append"></slot>
+      <template #append>
+        <slot name="append" />
       </template>
 
-      <template v-slot:prepend>
-        <slot name="prepend"></slot>
+      <template #prepend>
+        <slot name="prepend" />
+      </template>
+
+      <template #hint>
+        <slot name="hint" />
       </template>
     </q-input>
   </div>
 </template>
 
-<script>
-import { defineComponent } from "vue";
+<script setup>
+import { computed, useAttrs } from "vue";
 
-export default defineComponent({
+defineOptions({
   name: "TextField",
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: "",
-    },
-    label: {
-      type: String,
-      default: "",
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const updateValue = (value) => {
-      emit("update:modelValue", value);
-    };
+});
 
-    return {
-      updateValue,
-    };
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: "",
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  hint: {
+    type: String,
+    default: "",
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: "text",
+  },
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: "",
+  },
+  maxlength: {
+    type: [Number, String],
+    default: null,
+  },
+  counter: {
+    type: [Boolean, Number],
+    default: false,
+  },
+  autogrow: {
+    type: Boolean,
+    default: false,
+  },
+  rows: {
+    type: [Number, String],
+    default: 3,
+  },
+  debounce: {
+    type: [Number, String],
+    default: 0,
+  },
+  mask: {
+    type: String,
+    default: undefined,
+  },
+  unmaskedValue: {
+    type: Boolean,
+    default: false,
+  },
+  prefix: {
+    type: String,
+    default: "",
+  },
+  suffix: {
+    type: String,
+    default: "",
+  },
+  inputStyle: {
+    type: [String, Object],
+    default: undefined,
+  },
+  inputClass: {
+    type: [String, Array, Object],
+    default: undefined,
+  },
+  density: {
+    type: String,
+    default: "comfortable",
+    validator: (value) => ["compact", "comfortable", "spacious"].includes(value),
   },
 });
+
+const emit = defineEmits(["update:modelValue", "blur", "focus"]);
+
+const densityClass = {
+  compact: "app-input__field--compact",
+  comfortable: "app-input__field--comfortable",
+  spacious: "app-input__field--spacious",
+};
+
+const fieldDensity = computed(() => densityClass[props.density]);
+
+const updateValue = (value) => {
+  emit("update:modelValue", value);
+};
+
+const attrs = useAttrs();
 </script>
+
+<style scoped>
+.app-input {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.app-input__label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #53389e;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.app-input__required {
+  color: #f04438;
+}
+
+.app-input__hint {
+  font-size: 12px;
+  font-weight: 400;
+  color: #475467;
+}
+
+.app-input__field--compact {
+  --q-field-padding: 8px 12px;
+}
+
+.app-input__field--comfortable {
+  --q-field-padding: 12px 16px;
+}
+
+.app-input__field--spacious {
+  --q-field-padding: 16px 20px;
+}
+
+body.body--dark .app-input__label {
+  color: #f4ebff;
+}
+
+body.body--dark .app-input__hint {
+  color: rgba(255, 255, 255, 0.6);
+}
+</style>
diff --git a/src/config/axios.js b/src/config/axios.js
index f3309ae..65ccd34 100644
--- a/src/config/axios.js
+++ b/src/config/axios.js
@@ -26,6 +26,6 @@ API.interceptors.response.use(
       window.location.href = "/login";
     }
 
-    return Promise.reject(error);
+    throw error;
   }
 );
diff --git a/src/main.js b/src/main.js
index 02ebe30..3fc6fc3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@ import "@quasar/extras/material-symbols-outlined/material-symbols-outlined.css";
 import "@quasar/extras/mdi-v7/mdi-v7.css";
 
 import "quasar/src/css/index.sass";
+import "./styles/global.scss";
 
 import App from "./App.vue";
 
diff --git a/src/quasar-variables.sass b/src/quasar-variables.sass
index 637a8d1..9e47051 100644
--- a/src/quasar-variables.sass
+++ b/src/quasar-variables.sass
@@ -1,11 +1,14 @@
-$primary   : #8200ff
-$secondary : #eabdff
-$accent    : #8200ff
+$primary   : #7f56d9
+$secondary : #f4ebff
+$accent    : #53389e
 
-$dark      : #1c1e21
-$dark-page : #1c1e21
+$dark      : #101828
+$dark-page : #0b1120
 
-$success  : #31cb00
-$error  : #ee2e31
-$info      : #226ce0
-$warning   : #fcdc4d
\ No newline at end of file
+$positive  : #12b76a
+$negative  : #f04438
+$info      : #2e90fa
+$warning   : #f79009
+
+$success   : $positive
+$error     : $negative
diff --git a/src/routes/auth/Login.vue b/src/routes/auth/Login.vue
index 11fb4d8..573fe67 100644
--- a/src/routes/auth/Login.vue
+++ b/src/routes/auth/Login.vue
@@ -1,95 +1,147 @@
 <template>
-  <q-layout view="hHh LpR fFf">
-    <q-drawer
-      v-model="leftDrawerOpen"
-      show-if-above
-      :width="400"
-      :breakpoint="700"
-      bordered
-      side="right"
-      class="bg-primary text-white"
-    >
-      <q-scroll-area class="fit">
-        <div class="q-pa-md">
-          <q-form @submit.prevent="handleLogin" class="q-mt-lg">
-            <q-input
-              v-model="username"
-              type="text"
-              label="Username"
-              lazy-rules
-              :rules="[(val) => !!val || 'Campo obrigatório']"
-              class="q-mb-md"
-              dark
-              filled
+  <q-page class="login-page">
+    <div class="login-page__container">
+      <section class="login-page__hero">
+        <div class="login-page__hero-content">
+          <div class="login-page__brand">
+            <q-avatar size="48px" color="white" text-color="primary"
+              >CI</q-avatar
             >
-              <template v-slot:prepend>
-                <q-icon name="person" />
-              </template>
-            </q-input>
+            <div>
+              <div class="login-page__brand-title">Clipper IA</div>
+              <div class="login-page__brand-subtitle">
+                Cortes automáticos com inteligência
+              </div>
+            </div>
+          </div>
 
-            <q-input
+          <h2>Produza cortes envolventes sem perder tempo na edição.</h2>
+          <p>
+            Envie a url do vídeo no Youtube e receba os melhores momentos
+            prontos para divulgar em minutos. Nossa IA identifica picos de
+            retenção, fala e emoção para gerar clipes certeiros.
+          </p>
+
+          <div class="login-page__stats">
+            <div>
+              <span class="login-page__stat-value">+3x</span>
+              <span class="login-page__stat-label">mais alcance</span>
+            </div>
+            <div>
+              <span class="login-page__stat-value">24/7</span>
+              <span class="login-page__stat-label">operando</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="login-card__wrapper">
+        <q-card flat bordered class="login-card">
+          <div class="login-card__header">
+            <div class="login-card__badge">
+              <q-icon name="sym_o_bolt" size="20px" />
+              <span>Beta exclusivo</span>
+            </div>
+            <h1>Bem-vindo de volta</h1>
+            <p>
+              Entre para continuar gerando clipes automaticamente com o Clipper
+              IA.
+            </p>
+          </div>
+
+          <q-form class="login-card__form">
+            <TextField
+              v-model="username"
+              label="Email ou usuário"
+              placeholder="seuemail@clipper.ai"
+              required
+            >
+              <template #prepend>
+                <q-icon name="sym_o_person" color="primary" />
+              </template>
+            </TextField>
+
+            <TextField
               v-model="password"
               :type="showPassword ? 'text' : 'password'"
               label="Senha"
-              lazy-rules
-              :rules="[(val) => !!val || 'Campo obrigatório']"
-              class="q-mb-lg"
-              dark
-              filled
+              required
+              placeholder="••••••••"
             >
-              <template v-slot:prepend>
-                <q-icon name="lock" />
+              <template #prepend>
+                <q-icon name="sym_o_lock" color="primary" />
               </template>
-
-              <template v-slot:append>
+              <template #append>
                 <q-icon
-                  :name="showPassword ? 'visibility_off' : 'visibility'"
+                  :name="
+                    showPassword ? 'sym_o_visibility_off' : 'sym_o_visibility'
+                  "
                   class="cursor-pointer"
+                  color="primary"
                   @click="showPassword = !showPassword"
                 />
               </template>
-            </q-input>
+            </TextField>
+
+            <div class="login-card__links">
+              <Button
+                variant="link"
+                color="primary"
+                text-color="primary"
+                label="Esqueci minha senha"
+                @click.prevent="handleForgotPassword"
+              />
+            </div>
 
             <Button
               type="submit"
               label="Entrar"
-              color="white"
-              textColor="primary"
-              full-width
               :loading="loading"
+              @click="handleLogin"
+              full-width
             />
           </q-form>
 
-          <p v-if="error" class="text-negative q-mt-md">{{ error }}</p>
-        </div>
-      </q-scroll-area>
-    </q-drawer>
+          <p v-if="error" class="login-card__error">{{ error }}</p>
 
-    <q-page-container>
-      <q-page class="flex flex-center bg-black-1">
-        <div class="text-center q-pa-md">
-          <div class="text-h4 q-mb-md">Clipper IA</div>
-
-          <p class="text-grey-8">Cortes automaticos de vídeos</p>
-        </div>
-      </q-page>
-    </q-page-container>
-  </q-layout>
+          <div class="login-card__footer">
+            <span>Precisa de ajuda?</span>
+            <Button
+              variant="ghost"
+              color="secondary"
+              text-color="primary"
+              icon="sym_o_chat"
+              label="Falar com suporte"
+              full-width
+              @click.prevent="handleSupport"
+            />
+          </div>
+        </q-card>
+      </section>
+    </div>
+  </q-page>
 </template>
 
 <script>
 import Cookies from "js-cookie";
+
 import Button from "@components/Button";
+import TextField from "@components/TextField";
+
 import { API } from "@config/axios";
+import {
+  buildUserProfileFromToken,
+  extractRolesFromToken,
+} from "@utils/keycloak";
 
 export default {
   name: "LoginView",
   components: {
     Button,
+    TextField,
   },
   data() {
     return {
-      leftDrawerOpen: true,
       username: "",
       password: "",
       showPassword: false,
@@ -104,12 +156,13 @@ export default {
         return;
       }
 
+      this.error = "";
+
       try {
         this.loading = true;
 
         const params = new URLSearchParams();
-
-        params.append("username", this.username);
+        params.append("username", this.username.trim());
         params.append("password", this.password);
 
         const { data } = await API.post("/auth/login", params.toString(), {
@@ -118,63 +171,285 @@ export default {
           },
         });
 
+        const accessTokenDays = data.expires_in
+          ? data.expires_in / (60 * 60 * 24)
+          : undefined;
+        const refreshTokenDays = data.refresh_expires_in
+          ? data.refresh_expires_in / (60 * 60 * 24)
+          : undefined;
+
+        const cookieOptions = {
+          sameSite: "lax",
+          secure: window.location.protocol === "https:",
+          path: "/",
+        };
+
         Cookies.set("token", data.access_token, {
-          expires: data.expires_in,
+          ...cookieOptions,
+          expires: accessTokenDays,
         });
 
         Cookies.set("refresh_token", data.refresh_token, {
-          expires: data.refresh_expires_in,
+          ...cookieOptions,
+          expires: refreshTokenDays,
         });
 
-        await this.$router.push("/");
+        const profile = buildUserProfileFromToken(data.access_token);
+        const roles = profile?.roles?.length
+          ? profile.roles
+          : extractRolesFromToken(data.access_token);
+
+        if (roles?.length) {
+          Cookies.set("user_roles", JSON.stringify(roles), {
+            ...cookieOptions,
+            expires: accessTokenDays,
+          });
+        }
+
+        if (profile) {
+          Cookies.set("user_profile", JSON.stringify(profile), {
+            ...cookieOptions,
+            expires: accessTokenDays,
+          });
+        }
+
+        await this.$router.push("/videos");
       } catch (error) {
-        console.log(error);
+        console.log("ok");
+
+        this.$q.notify({
+          type: "negative",
+          message: "Não foi possível entrar. Verifique as credenciais.",
+        });
       } finally {
         this.loading = false;
       }
     },
-  },
-  mounted() {
-    if (window.innerWidth < 700) {
-      this.leftDrawerOpen = false;
-    }
+    handleForgotPassword() {
+      this.$q.notify({
+        type: "info",
+        message: "Entre em contato com o suporte para redefinir sua senha.",
+      });
+    },
+    handleSupport() {
+      this.$q.notify({
+        type: "info",
+        message:
+          "Envie um email para suporte@clipper.ai e responderemos rapidamente.",
+      });
+    },
   },
 };
 </script>
 
-<style>
-/* Estilos personalizados para o formulário de login */
-.q-drawer {
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+<style scoped lang="scss">
+.login-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  background: radial-gradient(
+      circle at top left,
+      rgba(127, 86, 217, 0.18),
+      transparent 55%
+    ),
+    radial-gradient(
+      circle at bottom right,
+      rgba(83, 56, 158, 0.22),
+      transparent 45%
+    ),
+    #f5f6fa;
 }
 
-/* Ajustes para responsividade */
-@media (max-width: 700px) {
-  .q-drawer {
-    width: 100% !important;
+.login-page__container {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
+  width: min(1100px, 92vw);
+  gap: clamp(32px, 6vw, 56px);
+  align-items: center;
+  padding: clamp(32px, 5vw, 64px) 0;
+}
+
+.login-page__hero {
+  color: #f8f9ff;
+  background: linear-gradient(160deg, #53389e 0%, #7f56d9 60%, #b692f6 100%);
+  border-radius: 32px;
+  padding: clamp(32px, 5vw, 56px);
+  box-shadow: 0 24px 64px rgba(83, 56, 158, 0.35);
+}
+
+.login-page__hero h2 {
+  font-size: clamp(28px, 3vw, 36px);
+  font-weight: 700;
+  margin: 32px 0 16px;
+  line-height: 1.2;
+}
+
+.login-page__hero p {
+  font-size: 16px;
+  line-height: 1.6;
+  color: rgba(255, 255, 255, 0.82);
+  margin-bottom: 36px;
+}
+
+.login-page__brand {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.login-page__brand-title {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.login-page__brand-subtitle {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.login-page__stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.login-page__stat-value {
+  display: block;
+  font-size: 28px;
+  font-weight: 700;
+}
+
+.login-page__stat-label {
+  font-size: 13px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.login-card__wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.login-card {
+  width: 100%;
+  border-radius: 24px;
+  padding: clamp(28px, 4vw, 40px);
+  box-shadow: 0 22px 40px rgba(16, 24, 40, 0.12);
+  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.login-card__header {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.login-card__badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: rgba(127, 86, 217, 0.12);
+  color: #53389e;
+  font-weight: 600;
+}
+
+.login-card__header h1 {
+  font-size: clamp(24px, 3vw, 30px);
+  font-weight: 700;
+  margin: 0;
+  color: #101828;
+}
+
+.login-card__header p {
+  margin: 0;
+  color: #475467;
+  font-size: 16px;
+}
+
+.login-card__form {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.login-card__links {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.login-card__error {
+  margin-top: 18px;
+  color: #f97066;
+  font-weight: 600;
+}
+
+.login-card__footer {
+  margin-top: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  color: #475467;
+  font-size: 14px;
+}
+
+body.body--dark .login-page {
+  background: radial-gradient(
+      circle at top left,
+      rgba(83, 56, 158, 0.5),
+      transparent 55%
+    ),
+    #0b1120;
+}
+
+body.body--dark .login-card {
+  background: rgba(16, 24, 40, 0.94);
+  box-shadow: 0 22px 44px rgba(12, 18, 32, 0.65);
+}
+
+body.body--dark .login-card__header h1 {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+body.body--dark .login-card__header p,
+body.body--dark .login-card__footer {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+@media (max-width: 1024px) {
+  .login-page__container {
+    grid-template-columns: minmax(0, 1fr);
   }
 
-  .q-page-container {
-    padding-right: 0 !important;
+  .login-card {
+    max-width: 460px;
+    margin: 0 auto;
   }
 }
 
-/* Estilo para o botão de login */
-.q-btn--actionable {
-  transition: transform 0.2s, opacity 0.2s;
-}
+@media (max-width: 640px) {
+  .login-page {
+    background: #f5f6fa;
+  }
 
-.q-btn--actionable:active:not(.disabled) {
-  transform: scale(0.98);
-}
+  .login-page__container {
+    width: 100%;
+    padding: 24px 16px 64px;
+  }
 
-/* Melhorias na acessibilidade */
-.q-field--filled .q-field__control {
-  border-radius: 8px;
-}
+  .login-page__hero {
+    display: none;
+  }
 
-/* Efeito de hover nos inputs */
-.q-field--filled:not(.q-field--readonly):hover .q-field__control:before {
-  border-color: rgba(255, 255, 255, 0.7) !important;
+  .login-card {
+    border-radius: 20px;
+    padding: 28px 20px;
+  }
 }
 </style>
diff --git a/src/routes/users/index.vue b/src/routes/users/index.vue
new file mode 100644
index 0000000..0d2029c
--- /dev/null
+++ b/src/routes/users/index.vue
@@ -0,0 +1,347 @@
+<template>
+  <div class="users-page">
+    <section class="app-page__header">
+      <div>
+        <h2 class="app-page__title">Gestão de usuários</h2>
+        <p class="app-page__subtitle">
+          Controle quem pode acessar o Clipper IA, convide novos membros e acompanhe o status de cada conta.
+        </p>
+      </div>
+
+      <div class="app-actions-bar">
+        <Button
+          icon="sym_o_person_add"
+          label="Convidar usuário"
+          @click="handleInvite"
+        />
+        <Button
+          variant="ghost"
+          color="secondary"
+          text-color="primary"
+          icon="sym_o_download"
+          label="Exportar"
+          @click="handleExport"
+        />
+      </div>
+    </section>
+
+    <div class="users-page__grid">
+      <q-card flat bordered class="app-card users-page__card">
+        <header class="users-page__card-head">
+          <div>
+            <h3>Times e permissões</h3>
+            <span>Use os níveis de acesso para definir o que cada grupo pode operar.</span>
+          </div>
+          <Button
+            variant="ghost"
+            color="secondary"
+            text-color="primary"
+            icon="sym_o_settings"
+            label="Configurar permissões"
+            @click="handlePermissions"
+          />
+        </header>
+
+        <div class="users-page__roles">
+          <q-item v-for="role in roles" :key="role.name" class="users-page__role-item">
+            <q-item-section avatar>
+              <q-avatar :color="role.color" text-color="white" icon="sym_o_badge" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{{ role.name }}</q-item-label>
+              <q-item-label caption>{{ role.description }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-chip outline color="primary" :label="role.membersLabel" />
+            </q-item-section>
+          </q-item>
+        </div>
+      </q-card>
+
+      <q-card flat bordered class="app-card users-page__card">
+        <header class="users-page__card-head">
+          <div>
+            <h3>Status da equipe</h3>
+            <span>Indicadores rápidos para acompanhar convites e acessos recentes.</span>
+          </div>
+        </header>
+
+        <div class="users-page__stats">
+          <div v-for="stat in stats" :key="stat.label" class="users-page__stat">
+            <div class="users-page__stat-label">{{ stat.label }}</div>
+            <div class="users-page__stat-value">{{ stat.value }}</div>
+            <div class="users-page__stat-caption">{{ stat.caption }}</div>
+          </div>
+        </div>
+
+        <div class="users-page__cta">
+          <Button
+            variant="ghost"
+            icon="sym_o_smart_toy"
+            label="Automatizar aprovações"
+            @click="handleWorkflow"
+          />
+          <Button
+            icon="sym_o_notifications_active"
+            label="Ativar alertas"
+            @click="handleAlerts"
+          />
+        </div>
+      </q-card>
+    </div>
+
+    <q-card flat bordered class="app-card users-page__roadmap">
+      <header class="users-page__card-head">
+        <div>
+          <h3>Próximas entregas</h3>
+          <span>Fique de olho nos recursos que estão chegando para a gestão da sua equipe.</span>
+        </div>
+      </header>
+
+      <ul class="users-page__roadmap-list">
+        <li v-for="item in roadmap" :key="item.title">
+          <div class="users-page__roadmap-title">{{ item.title }}</div>
+          <p class="users-page__roadmap-description">{{ item.description }}</p>
+        </li>
+      </ul>
+    </q-card>
+  </div>
+</template>
+
+<script>
+import Button from "@components/Button";
+
+export default {
+  name: "UsersPage",
+  components: {
+    Button,
+  },
+  data() {
+    return {
+      roles: [
+        {
+          name: "Administradores",
+          description: "Acesso total às configurações, convites e billing.",
+          membersLabel: "3 membros",
+          color: "primary",
+        },
+        {
+          name: "Editores",
+          description: "Podem criar cortes, revisar sugestões e publicar.",
+          membersLabel: "8 membros",
+          color: "secondary",
+        },
+        {
+          name: "Leitores",
+          description: "Acompanham relatórios e status dos clipes gerados.",
+          membersLabel: "12 membros",
+          color: "accent",
+        },
+      ],
+      stats: [
+        {
+          label: "Convites pendentes",
+          value: "04",
+          caption: "Envie lembretes automáticos em 1 clique",
+        },
+        {
+          label: "Último acesso",
+          value: "há 2h",
+          caption: "Bruna adicionou novos cortes",
+        },
+        {
+          label: "Contas bloqueadas",
+          value: "01",
+          caption: "Revise motivos e restaure acessos",
+        },
+      ],
+      roadmap: [
+        {
+          title: "Fluxo de aprovação com múltiplos níveis",
+          description: "Defina revisores responsáveis por validar cortes antes da publicação automática.",
+        },
+        {
+          title: "Integração com Slack / Discord",
+          description: "Envie alertas de novos convites e aprovações direto para os canais do time.",
+        },
+        {
+          title: "Perfis avançados",
+          description: "Crie papéis personalizados combinando permissões de forma granular.",
+        },
+      ],
+    };
+  },
+  methods: {
+    handleInvite() {
+      this.$q.notify({
+        type: "positive",
+        message: "Convites em lote estarão disponíveis em breve.",
+      });
+    },
+    handlePermissions() {
+      this.$q.notify({
+        type: "info",
+        message: "Configurações avançadas de permissões ainda não foram conectadas ao backend.",
+      });
+    },
+    handleExport() {
+      this.$q.notify({
+        type: "info",
+        message: "Exportação de usuários será liberada após a integração com o Keycloak.",
+      });
+    },
+    handleWorkflow() {
+      this.$q.notify({
+        type: "info",
+        message: "Automação de aprovações está em desenvolvimento.",
+      });
+    },
+    handleAlerts() {
+      this.$q.notify({
+        type: "info",
+        message: "Em breve você poderá receber alertas no email ou no Slack.",
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.users-page {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(32px, 6vw, 48px);
+}
+
+.users-page__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: clamp(24px, 4vw, 32px);
+}
+
+.users-page__card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.users-page__card-head h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #101828;
+}
+
+.users-page__card-head span {
+  font-size: 14px;
+  color: #475467;
+}
+
+.users-page__roles {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.users-page__role-item {
+  border: 1px solid rgba(127, 86, 217, 0.1);
+  border-radius: 14px;
+  padding: 8px 12px;
+  background: rgba(127, 86, 217, 0.04);
+}
+
+.users-page__stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.users-page__stat {
+  padding: 16px;
+  border-radius: 16px;
+  border: 1px solid rgba(127, 86, 217, 0.08);
+  background: rgba(127, 86, 217, 0.05);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.users-page__stat-label {
+  font-size: 13px;
+  color: #475467;
+}
+
+.users-page__stat-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #101828;
+}
+
+.users-page__stat-caption {
+  font-size: 12px;
+  color: #667085;
+}
+
+.users-page__cta {
+  margin-top: 28px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.users-page__roadmap {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.users-page__roadmap-list {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+  display: grid;
+  gap: 18px;
+}
+
+.users-page__roadmap-title {
+  font-weight: 600;
+  color: #101828;
+}
+
+.users-page__roadmap-description {
+  margin: 4px 0 0;
+  color: #475467;
+}
+
+body.body--dark .users-page__card-head h3,
+body.body--dark .users-page__stat-value,
+body.body--dark .users-page__roadmap-title {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+body.body--dark .users-page__card-head span,
+body.body--dark .users-page__stat-label,
+body.body--dark .users-page__stat-caption,
+body.body--dark .users-page__roadmap-description {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+body.body--dark .users-page__role-item {
+  background: rgba(244, 235, 255, 0.1);
+  border-color: rgba(244, 235, 255, 0.18);
+}
+
+@media (max-width: 640px) {
+  .users-page__card-head {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .users-page__cta {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>
diff --git a/src/routes/videos/index.vue b/src/routes/videos/index.vue
index 5dd66ca..95e0222 100644
--- a/src/routes/videos/index.vue
+++ b/src/routes/videos/index.vue
@@ -1,68 +1,123 @@
 <template>
-  <div class="user-list q-pa-md">
-    <q-card
-      flat
-      bordered
-      class="q-pa-sm q-mb-lg"
-      :class="{
-        'bg-grey-2': !$q.dark.isActive,
-      }"
-    >
-      <div class="row q-pa-sm q-gutter-md">
-        <div class="col-3">
-          <TextField label="Título" />
+  <div class="videos-page">
+    <section class="app-page__header">
+      <div>
+        <h2 class="app-page__title">Biblioteca de vídeos</h2>
+        <p class="app-page__subtitle">
+          Filtre os vídeos processados pela IA, acompanhe o status dos recortes e inicie novas captações
+          em poucos cliques.
+        </p>
+      </div>
+
+      <div class="app-actions-bar">
+        <Button
+          variant="ghost"
+          icon="sym_o_refresh"
+          label="Atualizar"
+          @click="handleSearch(pagination)"
+        />
+        <Button icon="sym_o_add" label="Novo vídeo" @click="handleAddVideo" />
+      </div>
+    </section>
+
+    <q-card flat bordered class="videos-page__filters app-card">
+      <div class="videos-page__filters-head">
+        <div>
+          <h3>Filtrar resultados</h3>
+          <span>Refine a busca por título, identificador ou situação.</span>
         </div>
-        <div class="col-3">
-          <TextField label="Video ID" />
-        </div>
-        <div class="col-3">
-          <Dropdown
-            v-model="select"
-            label="Situação"
-            clearable
-            :options="situations"
-            :loading="situationsLoading"
+
+        <div class="videos-page__filters-actions">
+          <Button
+            variant="ghost"
+            color="secondary"
+            text-color="primary"
+            icon="sym_o_close"
+            label="Limpar filtros"
+            :disabled="!hasFilters"
+            @click="resetFilters"
           />
         </div>
       </div>
 
-      <div class="row q-pa-sm">
-        <div class="col-6">
-          <Button
-            label="Buscar"
-            :loading="loading"
-            @click="handleSearch(pagination)"
-            fullWidth
-          />
-        </div>
-        <div class="col-6">
-          <Button label="Teste" @click="handleTeste()" fullWidth />
-        </div>
+      <div class="videos-page__filters-grid">
+        <TextField
+          v-model="filters.title"
+          label="Título"
+          placeholder="Ex.: Cortes da live com convidados"
+        >
+          <template #prepend>
+            <q-icon name="sym_o_title" color="primary" />
+          </template>
+        </TextField>
+
+        <TextField
+          v-model="filters.videoId"
+          label="Video ID"
+          placeholder="Ex.: x9-YRAYhesI"
+        >
+          <template #prepend>
+            <q-icon name="sym_o_confirmation_number" color="primary" />
+          </template>
+        </TextField>
+
+        <Dropdown
+          v-model="filters.situations"
+          label="Situação"
+          clearable
+          :options="situations"
+          :loading="situationsLoading"
+          multiple
+        />
+      </div>
+
+      <div class="videos-page__filters-footer">
+        <Button
+          label="Buscar vídeos"
+          icon="sym_o_search"
+          :loading="loading"
+          :disabled="loading"
+          @click="handleSearch({ ...pagination, page: 1 })"
+        />
       </div>
     </q-card>
 
     <Table
+      key="videos-table"
+      class="videos-page__table"
+      title="Resultados"
+      subtitle="Veja os vídeos cadastrados, a quantidade de clipes e o status de processamento."
       :columns="columns"
       :rows="rows"
       :pagination="pagination"
       :loading="loading"
-      key="table-videos"
       @update:pagination="updatePagination"
     >
-      <template #no-data>
-        <div
-          class="full-width row flex-center q-gutter-sm"
-          style="font-size: 1.3em"
-        >
-          <span> Não há vídeos </span>
-        </div>
+      <template #actions>
+        <Button
+          variant="ghost"
+          icon="sym_o_download"
+          label="Exportar CSV"
+          @click="handleExport"
+        />
+      </template>
+
+      <template #empty-message>
+        Nenhum vídeo encontrado para os filtros selecionados.
+      </template>
+
+      <template #body="props">
+        <q-tr :props="props">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div class="videos-page__cell">
+              <div class="videos-page__cell-label">{{ col.label }}</div>
+              <div class="videos-page__cell-value">{{ col.value }}</div>
+            </div>
+          </q-td>
+        </q-tr>
       </template>
     </Table>
   </div>
-
-  <q-page-sticky position="bottom-right" :offset="[20, 70]">
-    <q-btn fab icon="add" color="accent" @click="handleAddVideo" />
-  </q-page-sticky>
 </template>
 
 <script>
@@ -84,18 +139,18 @@ const columns = [
   {
     name: "title",
     label: "Título",
-    align: "center",
+    align: "left",
     field: "title",
   },
   {
     name: "clips_quantity",
     label: "Clipes",
-    align: "left",
+    align: "center",
     field: "clips_quantity",
   },
   {
     name: "videoid",
-    label: "VideoID",
+    label: "Video ID",
     field: "videoid",
   },
   {
@@ -106,7 +161,7 @@ const columns = [
 ];
 
 export default {
-  name: "UserList",
+  name: "VideosList",
   components: {
     Button,
     Table,
@@ -122,27 +177,54 @@ export default {
         page: 1,
         direction: "desc",
         perPage: 10,
-        total: 10,
+        total: 0,
         totalPages: 1,
         hasNext: false,
         hasPrev: false,
       },
       situations: [],
       situationsLoading: false,
-      select: [],
+      filters: {
+        title: "",
+        videoId: "",
+        situations: [],
+      },
     };
   },
-  mounted() {
-    this.getSituation();
+  computed: {
+    hasFilters() {
+      return (
+        !!this.filters.title ||
+        !!this.filters.videoId ||
+        (Array.isArray(this.filters.situations) && this.filters.situations.length > 0)
+      );
+    },
+  },
+  created() {
+    this.initializePage();
   },
   methods: {
+    async initializePage() {
+      await this.getSituation();
+      await this.handleSearch(this.pagination);
+    },
     async handleSearch(pagination) {
       try {
         this.loading = true;
 
-        const baseParams = {
-          situation: this.select,
-        };
+        const baseParams = {};
+
+        if (this.filters.title) {
+          baseParams.title = this.filters.title;
+        }
+
+        if (this.filters.videoId) {
+          baseParams.videoId = this.filters.videoId;
+        }
+
+        if (Array.isArray(this.filters.situations) && this.filters.situations.length) {
+          baseParams.situation = this.filters.situations;
+        }
 
         const { data } = await API.get("/videos", {
           params: {
@@ -182,31 +264,138 @@ export default {
         this.situationsLoading = false;
       }
     },
-    async handleTeste() {
-      try {
-        const { data } = await API.get("/videos/search", {
-          params: {
-            url: "https://www.youtube.com/watch?v=x9-YRAYhesI",
-          },
-        });
-
-        console.log(data);
-      } catch (error) {
-        this.$q.notify({
-          type: "negative",
-          message: getErrorMessage(error, "Erro ao buscar situações"),
-        });
-      }
-    },
     handleAddVideo() {
       this.$router.push("/videos/new");
     },
+    resetFilters() {
+      this.filters = {
+        title: "",
+        videoId: "",
+        situations: [],
+      };
+
+      this.handleSearch({ ...this.pagination, page: 1 });
+    },
+    handleExport() {
+      if (!this.rows.length) {
+        this.$q.notify({
+          type: "warning",
+          message: "Não há dados para exportar. Ajuste os filtros e tente novamente.",
+        });
+        return;
+      }
+
+      this.$q.notify({
+        type: "info",
+        message: "Exportação em CSV disponível em breve.",
+      });
+    },
   },
 };
 </script>
 
-<style scoped>
-.user-list {
-  margin: 0 auto;
+<style scoped lang="scss">
+.videos-page {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.videos-page__filters h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #101828;
+}
+
+.videos-page__filters span {
+  color: #475467;
+  font-size: 14px;
+}
+
+.videos-page__filters-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.videos-page__filters-actions {
+  display: flex;
+  align-items: center;
+}
+
+.videos-page__filters-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px;
+}
+
+.videos-page__filters-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 24px;
+}
+
+.videos-page__table {
+  margin-bottom: 32px;
+}
+
+.videos-page__cell {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.videos-page__cell-label {
+  display: none;
+  font-size: 12px;
+  font-weight: 600;
+  color: #98a2b3;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.videos-page__cell-value {
+  font-size: 15px;
+  font-weight: 600;
+  color: #101828;
+}
+
+body.body--dark .videos-page__filters h3 {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+body.body--dark .videos-page__filters span {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+body.body--dark .videos-page__cell-value {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+@media (max-width: 768px) {
+  .videos-page__filters-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .app-actions-bar {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .videos-page__filters-footer {
+    justify-content: stretch;
+  }
+
+  .videos-page__filters-footer > * {
+    width: 100%;
+  }
+
+  .videos-page__cell-label {
+    display: block;
+  }
 }
 </style>
diff --git a/src/routes/videos/new.vue b/src/routes/videos/new.vue
index c2f04e2..ed14e75 100644
--- a/src/routes/videos/new.vue
+++ b/src/routes/videos/new.vue
@@ -1,183 +1,244 @@
 <template>
-  <div class="user-list q-pa-md">
-    <q-card
-      flat
-      bordered
-      class="q-pa-sm q-mb-lg"
-      :class="{
-        'bg-grey-2': !$q.dark.isActive,
-      }"
-    >
-      <div class="row q-pa-sm">
-        <div class="col-12">
-          <TextField label="URL do Vídeo" v-model="url" :disabled="loading" />
-        </div>
+  <div class="video-create">
+    <section class="app-page__header">
+      <div>
+        <h2 class="app-page__title">Cadastrar novo vídeo</h2>
+        <p class="app-page__subtitle">
+          Cole a URL do YouTube para que a IA analise o conteúdo, identifique os
+          picos de atenção e gere sugestões de clipes automaticamente.
+        </p>
       </div>
 
-      <div class="row q-pa-sm">
-        <div class="col-6">
+      <div class="app-actions-bar">
+        <Button
+          variant="ghost"
+          color="secondary"
+          text-color="primary"
+          icon="sym_o_lightbulb"
+          label="Guia de cortes rápidos"
+          @click="handleGuide"
+        />
+      </div>
+    </section>
+
+    <div class="video-create__grid">
+      <q-card flat bordered class="app-card video-create__card">
+        <header class="video-create__card-head">
+          <div>
+            <h3>URL do vídeo</h3>
+            <p>
+              Utilize vídeos públicos ou não listados. Links privados não são
+              suportados.
+            </p>
+          </div>
+        </header>
+
+        <TextField
+          v-model="url"
+          label="Link do YouTube"
+          placeholder="https://www.youtube.com/watch?v=..."
+          :disabled="loading"
+          required
+          @keyup.enter="handleSearch"
+        >
+          <template #prepend>
+            <q-icon name="sym_o_link" color="primary" />
+          </template>
+          <template #append>
+            <q-btn
+              v-if="url"
+              dense
+              flat
+              round
+              icon="sym_o_close"
+              color="primary"
+              @click="url = ''"
+            />
+          </template>
+        </TextField>
+
+        <div class="video-create__actions">
           <Button
-            label="Buscar Informações"
+            label="Buscar informações"
+            icon="sym_o_search"
+            :loading="loading"
             :disabled="!url || loading"
             @click="handleSearch"
-            fullWidth
           />
         </div>
-      </div>
-    </q-card>
 
-    <q-card
-      flat
-      bordered
-      class="q-pa-sm q-mb-lg"
-      :class="{
-        'bg-grey-2': !$q.dark.isActive,
-      }"
-    >
-      <div v-if="loading" class="user-list q-pa-md flex justify-center">
-        <q-spinner color="primary" size="3em" :thickness="10" />
-      </div>
+        <ul class="video-create__hints">
+          <li>Informe apenas o link completo do vídeo no YouTube.</li>
+          <li>
+            Suporte a vídeos até 4 horas e canais com integração liberada.
+          </li>
+          <li>Após a busca, confirme os dados e envie para processamento.</li>
+        </ul>
+      </q-card>
 
-      <div v-else-if="Object.keys(video).length" class="user-list q-pa-md">
-        <div class="row q-pa-sm">
-          <span class="text-center text-h6">Vídeo</span>
-        </div>
-
-        <div class="row q-pa-sm">
-          <div class="col-12">
-            <DisplayValue label="Título" :value="video.title" />
-          </div>
-        </div>
-
-        <div class="row q-pa-sm">
-          <div class="col-12">
-            <DisplayValue label="Descrição" :value="video.description" />
-          </div>
-        </div>
-
-        <div class="row q-pa-sm">
-          <div class="col-4">
-            <DisplayValue label="Video ID" :value="video.id" />
+      <transition name="fade-slide">
+        <q-card
+          v-if="loading || videoLoaded"
+          flat
+          bordered
+          class="video-create__preview-card"
+        >
+          <div v-if="loading" class="video-create__preview-loading">
+            <q-skeleton type="rect" class="video-create__thumbnail-skeleton" />
+            <q-skeleton type="text" width="80%" />
+            <q-skeleton type="text" width="60%" />
           </div>
 
-          <div class="col-4">
-            <DisplayValue label="Duração" :value="getDuration()" />
-          </div>
+          <div v-else class="video-create__preview">
+            <div class="video-create__thumbnail">
+              <img :src="videoThumbnail" :alt="video.title" />
+              <q-badge color="primary" class="video-create__badge">{{
+                formattedDuration
+              }}</q-badge>
+            </div>
 
-          <div class="col-4">
-            <DisplayValue label="Data de Postagem" :value="getDateVideo()" />
-          </div>
-        </div>
-
-        <div class="row q-pa-sm">
-          <div class="col-4">
-            <DisplayValue
-              label="Visualizações"
-              :value="convertoToNumberFormat(video.view_count)"
-            />
-          </div>
-
-          <div class="col-4">
-            <DisplayValue
-              label="Likes"
-              :value="convertoToNumberFormat(video.like_count)"
-            />
-          </div>
-
-          <div class="col-4">
-            <DisplayValue
-              label="Comentários"
-              :value="convertoToNumberFormat(video.comment_count)"
-            />
-          </div>
-        </div>
-
-        <div class="row q-pa-sm">
-          <div class="col-6">
-            <DisplayValue
-              label="Categorias"
-              :value="video.categories.join(', ')"
-            />
-          </div>
-
-          <div class="col-12 q-mt-md">
-            <div style="color: #999; font-weight: bold">Tags</div>
-
-            <div class="row q-mt-sm">
-              <div v-for="tag in video.tags" :key="tag">
-                <q-chip color="primary">{{ tag }}</q-chip>
+            <div class="video-create__preview-body">
+              <h4>{{ video.title }}</h4>
+              <p>{{ video.description }}</p>
+              <div class="video-create__preview-actions">
+                <Button
+                  variant="ghost"
+                  icon="sym_o_content_copy"
+                  label="Copiar ID do vídeo"
+                  @click="
+                    copyToClipboard(
+                      video.id,
+                      'Video ID copiado para a área de transferência.'
+                    )
+                  "
+                />
+                <Button
+                  variant="outline"
+                  color="primary"
+                  text-color="primary"
+                  icon="sym_o_open_in_new"
+                  label="Abrir no YouTube"
+                  @click="openOnYoutube"
+                />
               </div>
             </div>
           </div>
-        </div>
+        </q-card>
+      </transition>
+    </div>
 
-        <q-separator class="q-mt-md" />
+    <transition name="fade-slide">
+      <div v-if="videoLoaded" class="video-create__details">
+        <q-card flat bordered class="app-card video-create__section">
+          <header class="video-create__section-head">
+            <div>
+              <h3>Insights do vídeo</h3>
+              <span>Resumo dos dados coletados diretamente da plataforma.</span>
+            </div>
+            <Button
+              variant="ghost"
+              icon="sym_o_download"
+              label="Exportar dados"
+              @click="handleExport"
+            />
+          </header>
 
-        <div class="row q-mt-md q-pa-sm">
-          <span class="text-center text-h6">Canal</span>
-        </div>
-
-        <div class="row q-pa-sm">
-          <div class="col-4">
-            <q-tooltip :offset="[-200, 0]">
-              Clique para abrir no youtube
-            </q-tooltip>
-            <a :href="video.channel_url" target="_blank">
-              <DisplayValue label="Canal" :value="video.channel" />
-            </a>
+          <div class="video-create__stats">
+            <DisplayValue
+              label="Visualizações"
+              :value="formatNumber(video.view_count)"
+            />
+            <DisplayValue
+              label="Likes"
+              :value="formatNumber(video.like_count)"
+            />
+            <DisplayValue
+              label="Comentários"
+              :value="formatNumber(video.comment_count)"
+            />
+            <DisplayValue label="Postado em" :value="formattedDate" />
           </div>
 
-          <div class="col-4">
+          <div class="video-create__meta">
             <DisplayValue
-              label="Inscritos"
-              :value="convertoToNumberFormat(video.channel_follower_count)"
+              label="Categorias"
+              :value="
+                video.categories?.length
+                  ? video.categories.join(', ')
+                  : 'Não informado'
+              "
+            />
+            <DisplayValue
+              label="Tags"
+              :value="
+                video.tags?.length
+                  ? `${video.tags.length} tags detectadas`
+                  : 'Nenhuma tag localizada'
+              "
+              helper="Os melhores recortes consideram tags com termos fortes."
             />
           </div>
 
-          <div class="col-4">
-            <DisplayValue label="Identificador" :value="video.channel_id" />
+          <div v-if="video.tags?.length" class="video-create__tags">
+            <q-chip
+              v-for="tag in video.tags"
+              :key="tag"
+              color="primary"
+              text-color="white"
+            >
+              {{ tag }}
+            </q-chip>
           </div>
-        </div>
+        </q-card>
 
-        <q-separator v-if="video.thumbnail" class="q-mt-md" />
+        <q-card flat bordered class="app-card video-create__section">
+          <header class="video-create__section-head">
+            <div>
+              <h3>Canal</h3>
+              <span
+                >Entenda a audiência do canal para calibrar os próximos
+                cortes.</span
+              >
+            </div>
+          </header>
 
-        <div v-if="video.thumbnail" class="row q-mt-md q-pa-sm">
-          <span class="text-center text-h6">Thumbnail</span>
-        </div>
+          <div class="video-create__meta">
+            <DisplayValue label="Nome" :value="video.channel" />
+            <DisplayValue
+              label="Inscritos"
+              :value="
+                video.channel_follower_count
+                  ? formatNumber(video.channel_follower_count)
+                  : '—'
+              "
+            />
+            <DisplayValue
+              label="Uploader"
+              :value="video.uploader || video.channel"
+            />
+          </div>
 
-        <div v-if="video.thumbnail" class="row q-pa-sm">
-          <img
-            :src="video.thumbnail"
-            alt="Thumbnail"
-            height="300"
-            width="500"
-          />
-        </div>
+          <div class="video-create__actions">
+            <Button
+              variant="ghost"
+              color="secondary"
+              text-color="primary"
+              icon="sym_o_notifications_active"
+              label="Ativar alertas do canal"
+              @click="handleChannelAlerts"
+            />
+
+            <Button
+              label="Enviar para processamento"
+              icon="sym_o_auto_awesome"
+              :disabled="!video.id"
+              :loading="saveLoading"
+              @click="handleSave"
+            />
+          </div>
+        </q-card>
       </div>
-
-      <div v-else class="user-list q-pa-md">
-        <p class="text-center">
-          Cole uma URL e faça a busca dos dados do vídeo
-        </p>
-      </div>
-    </q-card>
-
-    <q-card flat bordered>
-      <div class="row justify-between q-pa-sm">
-        <div>
-          <Button label="Voltar" color="negative" @click="handleCancel" />
-        </div>
-
-        <div>
-          <Button
-            label="Cadastrar"
-            @click="handleSave"
-            :loading="saveLoading"
-            :disabled="!video.id"
-          />
-        </div>
-      </div>
-    </q-card>
+    </transition>
   </div>
 </template>
 
@@ -194,40 +255,6 @@ import { getErrorMessage } from "@utils/axios";
 
 dayjs.extend(duration);
 
-// const mock = {
-//   id: "x9-YRAYhesI",
-//   title:
-//     "PROVEI A COMIDA DO EXÉRCITO CHINÊS - TROPA DE ELITE DA CHINA, PACOTE RARO",
-//   thumbnail: "https://i.ytimg.com/vi_webp/x9-YRAYhesI/maxresdefault.webp",
-//   description:
-//     "Hoje iremos experimentar o mais novo pacote de ração militar das forças de elite da China, um dos pacotes de MRE mais difíceis e raros! Vamos comparar para ver se esse pacote é superior ao do exército do Brasil!?",
-//   channel_id: "UCcFgREmujdPHvA7I_VOmgIA",
-//   channel_url: "https://www.youtube.com/channel/UCcFgREmujdPHvA7I_VOmgIA",
-//   duration: 1534,
-//   view_count: 352973,
-//   webpage_url: "https://www.youtube.com/watch?v=x9-YRAYhesI",
-//   categories: ["People & Blogs"],
-//   tags: [
-//     "area secreta",
-//     "mre",
-//     "camping",
-//     "balian",
-//     "acampamento",
-//     "comida do exército",
-//     "ração militar",
-//     "sobrevivi",
-//     "24 horas",
-//     "acampando",
-//     "comida chinesa",
-//   ],
-//   comment_count: 785,
-//   like_count: 26175,
-//   channel: "Área Secreta",
-//   channel_follower_count: 10700000,
-//   uploader: "Área Secreta",
-//   timestamp: 1740956718,
-// };
-
 export default {
   name: "NewVideo",
   components: {
@@ -239,19 +266,52 @@ export default {
     return {
       url: "",
       loading: false,
+      saveLoading: false,
       video: {},
     };
   },
+  computed: {
+    videoLoaded() {
+      return Object.keys(this.video).length > 0;
+    },
+    videoThumbnail() {
+      if (this.video.thumbnail) return this.video.thumbnail;
+      if (
+        Array.isArray(this.video.thumbnails) &&
+        this.video.thumbnails.length
+      ) {
+        return this.video.thumbnails[0];
+      }
+
+      if (this.video.id) {
+        return `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`;
+      }
+
+      return "https://placehold.co/640x360/7f56d9/FFFFFF?text=Clipper+IA";
+    },
+    formattedDuration() {
+      if (!this.video.duration) return "—";
+
+      const videoDuration = dayjs.duration(this.video.duration, "seconds");
+      return videoDuration.format("HH:mm:ss");
+    },
+    formattedDate() {
+      if (!this.video.timestamp) return "—";
+
+      return dayjs(this.video.timestamp * 1000).format("DD/MM/YYYY HH:mm");
+    },
+  },
   methods: {
     async handleSearch() {
       if (!this.url) return;
 
       try {
         this.loading = true;
+        this.video = {};
 
         const { data } = await API.get("/videos/search", {
           params: {
-            url: this.url,
+            url: this.url.trim(),
           },
         });
 
@@ -259,40 +319,324 @@ export default {
       } catch (error) {
         this.$q.notify({
           type: "negative",
-          message: getErrorMessage(error, "Erro ao buscar vídeos"),
+          message: getErrorMessage(
+            error,
+            "Erro ao buscar informações do vídeo"
+          ),
         });
       } finally {
         this.loading = false;
       }
     },
-    getDateVideo() {
-      const duration = dayjs(this.video.timestamp * 1000);
+    formatNumber(number) {
+      if (!number && number !== 0) return "—";
 
-      return duration.format("DD/MM/YYYY HH:mm:ss");
-    },
-    getDuration() {
-      const duration = dayjs.duration(this.video.duration, "seconds");
-
-      return duration.format("HH:mm:ss");
-    },
-    convertoToNumberFormat(number) {
       const formatter = new Intl.NumberFormat("pt-BR", {
-        maximumSignificantDigits: 3,
+        notation: "compact",
+        compactDisplay: "short",
       });
 
       return formatter.format(number);
     },
+    copyToClipboard(value, successMessage) {
+      if (!value) return;
+
+      const canUseClipboard =
+        typeof navigator !== "undefined" && navigator.clipboard;
+
+      if (canUseClipboard) {
+        navigator.clipboard
+          .writeText(value)
+          .then(() => {
+            this.$q.notify({ type: "positive", message: successMessage });
+          })
+          .catch(() => {
+            this.$q.notify({
+              type: "warning",
+              message: "Não foi possível copiar o conteúdo.",
+            });
+          });
+      } else {
+        this.$q.notify({
+          type: "warning",
+          message: "Clipboard não suportado neste dispositivo.",
+        });
+      }
+    },
+    openOnYoutube() {
+      if (!this.video.webpage_url || typeof window === "undefined") return;
+      window.open(this.video.webpage_url, "_blank", "noopener");
+    },
+    handleExport() {
+      this.$q.notify({
+        type: "info",
+        message: "Exportação disponível em breve.",
+      });
+    },
+    handleGuide() {
+      this.$q.notify({
+        type: "info",
+        message:
+          "Confira em breve nosso guia com as melhores práticas de cortes!",
+      });
+    },
+    handleChannelAlerts() {
+      this.$q.notify({
+        type: "info",
+        message:
+          "Integração com alertas do canal estará disponível em uma próxima atualização.",
+      });
+    },
+    async handleSave() {
+      if (!this.video.id) {
+        this.$q.notify({
+          type: "warning",
+          message: "Busque um vídeo antes de enviar para processamento.",
+        });
+        return;
+      }
+
+      try {
+        this.saveLoading = true;
+        // Chamada de criação ainda não implementada.
+        await new Promise((resolve) => setTimeout(resolve, 1200));
+        this.$q.notify({
+          type: "positive",
+          message:
+            "Vídeo enviado para processamento. Você será notificado quando os cortes estiverem prontos!",
+        });
+      } catch (error) {
+        this.$q.notify({
+          type: "negative",
+          message:
+            "Não foi possível enviar o vídeo. Tente novamente mais tarde.",
+        });
+      } finally {
+        this.saveLoading = false;
+      }
+    },
+    pasteExample() {
+      this.url = "https://www.youtube.com/watch?v=x9-YRAYhesI";
+    },
   },
 };
 </script>
 
-<style scoped>
-.user-list {
-  margin: 0 auto;
+<style scoped lang="scss">
+.video-create {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(32px, 6vw, 48px);
 }
 
-a {
-  text-decoration: none;
-  color: inherit;
+.video-create__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
+  gap: clamp(24px, 4vw, 36px);
+  align-items: stretch;
+}
+
+.video-create__card h3 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  color: #101828;
+}
+
+.video-create__card p {
+  margin: 4px 0 0;
+  color: #475467;
+  font-size: 14px;
+}
+
+.video-create__card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.video-create__actions {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.video-create__hints {
+  margin: 24px 0 0;
+  padding: 0 0 0 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: #475467;
+  font-size: 14px;
+}
+
+.video-create__preview-card {
+  border-radius: var(--app-border-radius);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  justify-content: center;
+}
+
+.video-create__preview-loading {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.video-create__thumbnail-skeleton {
+  height: 180px;
+  border-radius: 16px;
+}
+
+.video-create__preview {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.video-create__thumbnail {
+  position: relative;
+  border-radius: 18px;
+  overflow: hidden;
+  aspect-ratio: 16 / 9;
+  background: rgba(127, 86, 217, 0.12);
+}
+
+.video-create__thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.video-create__badge {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+  border-radius: 999px;
+  padding: 6px 12px;
+  font-weight: 600;
+}
+
+.video-create__preview-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.video-create__preview-body h4 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #101828;
+}
+
+.video-create__preview-body p {
+  margin: 0;
+  color: #475467;
+  line-height: 1.5;
+}
+
+.video-create__preview-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.video-create__details {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: clamp(24px, 4vw, 36px);
+}
+
+.video-create__section-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.video-create__section-head h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #101828;
+}
+
+.video-create__section-head span {
+  font-size: 14px;
+  color: #475467;
+}
+
+.video-create__stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 16px;
+}
+
+.video-create__meta {
+  margin-top: 24px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+}
+
+.video-create__tags {
+  margin-top: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.video-create__actions {
+  margin-top: 28px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: opacity 0.22s ease, transform 0.22s ease;
+}
+
+.fade-slide-enter-from,
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(12px);
+}
+
+body.body--dark .video-create__card h3,
+body.body--dark .video-create__preview-body h4,
+body.body--dark .video-create__section-head h3 {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+body.body--dark .video-create__card p,
+body.body--dark .video-create__preview-body p,
+body.body--dark .video-create__section-head span,
+body.body--dark .video-create__hints,
+body.body--dark .video-create__actions {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+@media (max-width: 1024px) {
+  .video-create__grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .video-create__preview-actions,
+  .video-create__actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
 }
 </style>
diff --git a/src/styles/global.scss b/src/styles/global.scss
new file mode 100644
index 0000000..16548e8
--- /dev/null
+++ b/src/styles/global.scss
@@ -0,0 +1,139 @@
+:root {
+  --app-border-radius: 16px;
+  --app-shadow-sm: 0 8px 18px rgba(16, 24, 40, 0.05);
+  --app-shadow-md: 0 12px 32px rgba(105, 65, 198, 0.12);
+  --app-gradient: linear-gradient(135deg, rgba(127, 86, 217, 0.12), rgba(83, 56, 158, 0.08));
+}
+
+body {
+  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
+  background: #f5f6fa;
+  color: #101828;
+  transition: background 0.3s ease;
+}
+
+body.body--dark {
+  background: #0b1120;
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.q-layout__section--marginal {
+  backdrop-filter: blur(18px);
+  background: rgba(255, 255, 255, 0.88);
+}
+
+body.body--dark .q-layout__section--marginal {
+  background: rgba(16, 24, 40, 0.85);
+}
+
+.q-header, .q-footer {
+  border-color: transparent;
+  box-shadow: var(--app-shadow-sm);
+}
+
+.q-card {
+  border-radius: var(--app-border-radius);
+  border: 1px solid rgba(127, 86, 217, 0.12);
+  box-shadow: none;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.q-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--app-shadow-sm);
+}
+
+body.body--dark .q-card {
+  background: rgba(16, 24, 40, 0.92);
+  border: 1px solid rgba(244, 235, 255, 0.1);
+  box-shadow: none;
+}
+
+.app-page {
+  min-height: 100%;
+  padding: 32px clamp(16px, 4vw, 64px);
+  background: linear-gradient(180deg, rgba(127, 86, 217, 0.12) 0%, rgba(255, 255, 255, 0) 40%);
+}
+
+body.body--dark .app-page {
+  background: linear-gradient(180deg, rgba(83, 56, 158, 0.3) 0%, rgba(11, 17, 32, 0) 50%);
+}
+
+.app-page__header {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.app-page__title {
+  font-size: clamp(28px, 4vw, 36px);
+  font-weight: 700;
+  color: #53389e;
+}
+
+body.body--dark .app-page__title {
+  color: #f4ebff;
+}
+
+.app-page__subtitle {
+  max-width: 680px;
+  color: #475467;
+}
+
+body.body--dark .app-page__subtitle {
+  color: rgba(255, 255, 255, 0.74);
+}
+
+.app-actions-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+}
+
+.app-card {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+body.body--dark .q-page-container {
+  background: transparent;
+}
+
+body:not(.body--dark) .q-page-container {
+  background: #f5f6fa;
+}
+
+.q-table__top {
+  padding: 0 0 16px;
+}
+
+.q-table__bottom {
+  padding: 16px 0 0;
+}
+
+.q-table__grid-content {
+  border-radius: var(--app-border-radius);
+}
+
+.q-pagination {
+  background: rgba(127, 86, 217, 0.06);
+  border-radius: 999px;
+  padding: 6px 12px;
+}
+
+body.body--dark .q-pagination {
+  background: rgba(83, 56, 158, 0.4);
+}
+
+body.body--dark .q-field--filled .q-field__control {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.q-notification {
+  border-radius: 14px;
+  box-shadow: var(--app-shadow-md);
+}
diff --git a/src/utils/keycloak.js b/src/utils/keycloak.js
new file mode 100644
index 0000000..43aa85b
--- /dev/null
+++ b/src/utils/keycloak.js
@@ -0,0 +1,164 @@
+import ROLES, { ROLE_ALIASES, ROLE_INHERITANCE } from "@/auth/roles";
+
+const decodeBase64 = (value) => {
+  if (!value) return "";
+
+  let normalized = value.replace(/-/g, "+").replace(/_/g, "/");
+  const pad = normalized.length % 4;
+
+  if (pad) {
+    normalized = normalized.padEnd(normalized.length + (4 - pad), "=");
+  }
+
+  if (typeof globalThis.atob === "function") {
+    return globalThis.atob(normalized);
+  }
+
+  if (typeof globalThis.Buffer !== "undefined") {
+    return globalThis.Buffer.from(normalized, "base64").toString("utf-8");
+  }
+
+  throw new Error("Environment does not support base64 decoding");
+};
+
+const decodeTokenPayload = (token) => {
+  if (!token || typeof token !== "string") return null;
+
+  const parts = token.split(".");
+  if (parts.length < 2) return null;
+
+  try {
+    const payload = JSON.parse(decodeBase64(parts[1]));
+    return payload;
+  } catch (error) {
+    console.error("Failed to decode token payload", error);
+    return null;
+  }
+};
+
+const collectRoles = (payload) => {
+  if (!payload) return [];
+
+  const roles = new Set();
+
+  if (Array.isArray(payload.realm_access?.roles)) {
+    payload.realm_access.roles.forEach((role) => roles.add(role));
+  }
+
+  const resourceAccess = payload.resource_access || {};
+  Object.values(resourceAccess).forEach((resource) => {
+    if (Array.isArray(resource?.roles)) {
+      resource.roles.forEach((role) => roles.add(role));
+    }
+  });
+
+  return Array.from(roles);
+};
+
+const aliasEntries = Object.entries(ROLE_ALIASES).map(([canonical, aliases]) => ({
+  canonical,
+  normalized: [...new Set([canonical, ...(aliases || [])])]
+    .filter(Boolean)
+    .map((alias) => alias.toString().trim().toUpperCase()),
+}));
+
+const escapeRegex = (value) =>
+  value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+const matchesAlias = (role, alias) => {
+  if (role === alias) {
+    return true;
+  }
+
+  const escaped = escapeRegex(alias);
+  const boundaryRegex = new RegExp(`(^|[\\s_:\\-])${escaped}($|[\\s_:\\-])`);
+
+  return boundaryRegex.test(role);
+};
+
+const applyInheritance = (roleSet) => {
+  const augmented = new Set(roleSet);
+
+  Object.entries(ROLE_INHERITANCE).forEach(([parent, children]) => {
+    if (augmented.has(parent)) {
+      children.forEach((child) => augmented.add(child));
+    }
+  });
+
+  return augmented;
+};
+
+export const mapRolesToAppRoles = (rawRoles = [], { fallbackToUser = true } = {}) => {
+  const normalizedRoles = (Array.isArray(rawRoles) ? rawRoles : [])
+    .filter(Boolean)
+    .map((role) => role.toString().trim())
+    .filter(Boolean);
+
+  const normalizedUpper = normalizedRoles.map((role) => role.toUpperCase());
+  const result = new Set();
+
+  aliasEntries.forEach(({ canonical, normalized }) => {
+    const match = normalizedUpper.some((role) =>
+      normalized.some((alias) => matchesAlias(role, alias))
+    );
+
+    if (match) {
+      result.add(canonical);
+    }
+  });
+
+  const inherited = applyInheritance(result);
+
+  if (
+    inherited.size === 0 &&
+    fallbackToUser &&
+    normalizedUpper.length > 0
+  ) {
+    inherited.add(ROLES.USER);
+  }
+
+  return Array.from(inherited);
+};
+
+export const extractRolesFromToken = (token) => {
+  const payload = decodeTokenPayload(token);
+  const rawRoles = collectRoles(payload);
+
+  return mapRolesToAppRoles(rawRoles);
+};
+
+export const buildUserProfileFromToken = (token) => {
+  const payload = decodeTokenPayload(token);
+
+  if (!payload) {
+    return null;
+  }
+
+  const rawRoles = collectRoles(payload);
+  const appRoles = mapRolesToAppRoles(rawRoles);
+  const name = payload.name || payload.preferred_username || "";
+
+  return {
+    id: payload.sub,
+    name,
+    email: payload.email || "",
+    username: payload.preferred_username || payload.email || name,
+    firstName: payload.given_name || "",
+    lastName: payload.family_name || "",
+    roles: appRoles,
+    rawRoles,
+    raw: payload,
+  };
+};
+
+export const extractUserInitials = (name = "") => {
+  const sanitized = name.trim();
+  if (!sanitized) return "";
+
+  const parts = sanitized.split(/\s+/).slice(0, 2);
+  return parts
+    .map((part) => part.charAt(0).toUpperCase())
+    .join("");
+};
+
+export const decodeToken = (token) => decodeTokenPayload(token);
diff --git a/vite.config.js b/vite.config.js
index ffc8b4a..6caec9f 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,6 +6,16 @@ import { fileURLToPath } from "node:url";
 import { quasar, transformAssetUrls } from "@quasar/vite-plugin";
 
 export default defineConfig({
+  server: {
+    host: "127.0.0.1",
+    port: 5173,
+    strictPort: true,
+  },
+  preview: {
+    host: "127.0.0.1",
+    port: 4173,
+    strictPort: true,
+  },
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "src/"),