diff --git a/src/assets/CtrlCash-blue.png b/src/assets/CtrlCash-blue.png
new file mode 100644
index 0000000..8ce775a
Binary files /dev/null and b/src/assets/CtrlCash-blue.png differ
diff --git a/src/assets/CtrlCash-white.png b/src/assets/CtrlCash-white.png
new file mode 100644
index 0000000..9114a5c
Binary files /dev/null and b/src/assets/CtrlCash-white.png differ
diff --git a/src/assets/CtrlCash.png b/src/assets/CtrlCash.png
deleted file mode 100644
index 4ba7af6..0000000
Binary files a/src/assets/CtrlCash.png and /dev/null differ
diff --git a/src/components/FooterPublic.vue b/src/components/FooterPublic.vue
index 0889eec..84d00d6 100644
--- a/src/components/FooterPublic.vue
+++ b/src/components/FooterPublic.vue
@@ -4,7 +4,7 @@
             <div class="row g-4">
                 
                 <div class="col-md-4 col-12">
-                    <img src="@/assets/CtrlCash.png" alt="CtrlCash Logo" width="120" height="35" class="mb-3">
+                    <img src="@/assets/CtrlCash-white.png" alt="CtrlCash Logo" width="120" height="35" class="mb-3">
                     <p class="text-secondary-footer mt-2">
                         Seu dinheiro. Seu controle total.
                     </p>
diff --git a/src/components/HeaderApp.vue b/src/components/HeaderApp.vue
new file mode 100644
index 0000000..8faa550
--- /dev/null
+++ b/src/components/HeaderApp.vue
@@ -0,0 +1,95 @@
+<template>
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary-dark shadow-lg sticky-top">
+    <div class="container-fluid max-w-7xl mx-auto px-4">
+      
+      <!-- Logo e Branding -->
+      <!-- O 'd-flex align-items-center' da navbar deve garantir o alinhamento central -->
+      <router-link to="/dashboard" class="navbar-brand d-flex align-items-center me-4">
+        <img src="@/assets/CtrlCash-white.png" alt="CtrlCash Logo" width="120" class="d-inline-block logo-align">
+      </router-link>
+
+      <!-- Botão para Mobile (Hamburguer) -->
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse" id="navbarNav">
+        
+        <!-- Navegação Principal -->
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <router-link to="/dashboard" :class="['nav-link', route.path === '/dashboard' ? 'active fw-bold text-white' : 'text-white-50', 'hover-success-feature']">Dashboard</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link to="/transacoes" :class="['nav-link', route.path === '/transacoes' ? 'active fw-bold text-white' : 'text-white-50', 'hover-success-feature']">Transações</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link to="/configuracoes" :class="['nav-link', route.path === '/configuracoes' ? 'active fw-bold text-white' : 'text-white-50', 'hover-success-feature']">Configurações</router-link>
+          </li>
+        </ul>
+        
+        <!-- Ícones de Ação e Usuário -->
+        <div class="d-flex align-items-center ms-auto">
+          
+          <!-- Botão de Notificações -->
+          <button class="btn btn-link text-white me-3 p-0" title="Notificações">
+            <i class="bi bi-bell-fill fs-5 position-relative">
+              <span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle"></span>
+            </i>
+          </button>
+
+          <!-- Avatar do Usuário -->
+          <div class="dropdown me-3">
+            <button class="btn btn-link p-0 d-flex align-items-center text-white" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+              <img class="rounded-circle border border-white" src="https://placehold.co/36x36/1A3B5E/FFFFFF?text=JP" alt="Avatar" style="width: 36px; height: 36px; object-fit: cover;">
+              <span class="ms-2 d-none d-md-inline text-sm">João Pedro</span>
+            </button>
+            <!-- Dropdown Menu (Placeholder) -->
+            <!-- <ul class="dropdown-menu">...</ul> -->
+          </div>
+          
+          <!-- Botão de Logout -->
+          <button @click="logout" class="btn btn-outline-light btn-sm d-none d-sm-inline-flex align-items-center" title="Sair">
+             <i class="bi bi-box-arrow-right me-1"></i>
+             Sair
+          </button>
+        </div>
+        
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup>
+    import { useRouter, useRoute } from 'vue-router';
+    import { ref, watch } from 'vue'; // Importando ref e watch
+
+    const router = useRouter();
+    const route = useRoute(); // Obtém o objeto de rota atual
+
+    const logout = () => {
+        console.log("Usuário desconectado. Redirecionando para o login.");
+        // Ação de logout real (ex: limpar token, session) seria aqui.
+        router.push('/login');
+    };
+</script>
+
+<style scoped>
+    /* Definição das cores customizadas com Bootstrap */
+    .bg-primary-dark { background-color: #1A3B5E !important; }
+    .text-primary-dark { color: #1A3B5E !important; }
+    .text-success-feature { color: #2ECC71 !important; }
+    .hover-success-feature:hover { color: #2ECC71 !important; }
+    
+  
+
+    /* FORÇA O ALINHAMENTO VERTICAL DA IMAGEM E DO TEXTO */
+    .navbar-brand {
+        display: flex;
+        align-items: center; /* Garante que todos os itens no brand estão centralizados */
+    }
+    .logo-align {
+        vertical-align: middle;
+        /* Removendo o ajuste manual para confiar no alinhamento Flexbox do Bootstrap */
+    }
+</style>
diff --git a/src/components/HeaderPublic.vue b/src/components/HeaderPublic.vue
index 0819815..838cc6b 100644
--- a/src/components/HeaderPublic.vue
+++ b/src/components/HeaderPublic.vue
@@ -8,7 +8,7 @@
             <div class="container-fluid">
                 
                 <router-link class="navbar-brand p-0" to="/">
-                    <img src="@/assets/CtrlCash.png" alt="CtrlCash Logo" width="140" height="40">
+                    <img src="@/assets/CtrlCash-white.png" alt="CtrlCash Logo" width="140" height="40">
                 </router-link>
 
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -22,7 +22,7 @@
                         <router-link to="/about" class="nav-link">Sobre nós</router-link>
                         <router-link to="/help" class="nav-link me-3">Ajuda</router-link> 
                         
-                        <router-link to="/register" class="btn btn-success me-2">Abrir Conta</router-link>
+                        <router-link to="/cadastro" class="btn btn-success me-2">Abrir Conta</router-link>
                         <router-link to="/login" class="btn btn-light text-primary">Login</router-link>
 
                     </div>
diff --git a/src/router/index.js b/src/router/index.js
index 12633a2..44b5710 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,12 +1,58 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import UserDashboardView from '../views/UserDashboardView.vue'
+import LoginView from '../views/LoginView.vue'
+import CadastroView from '@/views/CadastroView.vue'
+import TransacoesView from '@/views/TransacoesView.vue'
+import ConfiguracoesView from '@/views/ConfiguracoesView.vue'
+import SobreNosView from '@/views/SobreNosView.vue'
+import AjudaView from '@/views/AjudaView.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [{
+  routes: [
+    {
     path: '/',
     name: 'home',
     component: HomeView
-  }],
+  },
+  {
+    path: '/dashboard',
+    name: 'dashboard',
+    component: UserDashboardView
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: LoginView
+  },
+  {
+    path: '/cadastro',
+    name: 'cadastro',
+    component: CadastroView
+  },
+  {
+    path: '/transacoes',
+    name: 'transacoes',
+    component: TransacoesView
+  },
+  {
+    path: '/configuracoes',
+    name: 'configuracoes',
+    component: ConfiguracoesView
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: SobreNosView
+  },
+  {
+    path: '/help',
+    name: 'help',
+    component: AjudaView
+  },
+  
+
+],
 })
 
 export default router
diff --git a/src/views/AjudaView.vue b/src/views/AjudaView.vue
new file mode 100644
index 0000000..79ec3e4
--- /dev/null
+++ b/src/views/AjudaView.vue
@@ -0,0 +1,78 @@
+<template>
+    <div class="ajuda-page bg-light min-vh-100">
+        
+        <!-- Header Público (Links para Login/Cadastro) -->
+        <HeaderPublic />
+
+        <div class="container-fluid py-5 max-w-7xl mx-auto px-4">
+            
+            <h1 class="display-5 fw-bold text-primary-dark mb-4 text-center">Central de Ajuda e FAQ</h1>
+            <p class="text-center text-muted mb-5">Encontre respostas rápidas para suas dúvidas mais comuns ou envie seu feedback.</p>
+            
+            <div class="row justify-content-center">
+                <div class="col-lg-10">
+                    
+                    <!-- ACORDEÃO DE PERGUNTAS FREQUENTES -->
+                    <div class="accordion" id="faqAccordion">
+                        
+                        <!-- Pergunta 1 -->
+                        <div class="accordion-item shadow-sm mb-3 rounded-3">
+                            <h2 class="accordion-header" id="headingOne">
+                                <button class="accordion-button fw-bold text-primary-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                    Como faço para registrar uma nova transação?
+                                </button>
+                            </h2>
+                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
+                                <div class="accordion-body text-muted small">
+                                    No seu Dashboard, clique em "Transações" na barra de navegação. Na View de Transações, use o botão "Nova Transação" (verde) para adicionar Receitas ou Despesas. Certifique-se de categorizar corretamente para as análises futuras.
+                                </div>
+                            </div>
+                        </div>
+                    
+
+                        <!-- Pergunta 2 -->
+                        <div class="accordion-item shadow-sm mb-3 rounded-3">
+                            <h2 class="accordion-header" id="headingThree">
+                                <button class="accordion-button collapsed fw-bold text-primary-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                                    Posso adicionar minhas próprias categorias?
+                                </button>
+                            </h2>
+                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
+                                <div class="accordion-body text-muted small">
+                                    Sim! Vá para a View "Configurações" e selecione a aba "Gestão de Categorias". Lá você pode criar, editar ou remover categorias personalizadas para se adequar ao seu estilo de vida financeiro.
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import HeaderPublic from '@/components/HeaderPublic.vue';
+</script>
+
+<style scoped>
+    /* Estilos Customizados do CtrlCash */
+    .bg-primary-dark { background-color: #1A3B5E !important; }
+    .text-primary-dark { color: #1A3B5E !important; }
+    .text-success-feature { color: #2ECC71 !important; }
+    .btn-success-feature { background-color: #2ECC71 !important; border-color: #2ECC71 !important; color: white; }
+    
+    .max-w-7xl { max-width: 80rem; }
+    .mx-auto { margin-left: auto !important; margin-right: auto !important; }
+
+    .accordion-button:not(.collapsed) {
+        color: white !important;
+        background-color: #1A3B5E !important;
+        box-shadow: none;
+    }
+    .accordion-button:focus {
+        box-shadow: none;
+        border-color: #1A3B5E;
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/CadastroView.vue b/src/views/CadastroView.vue
new file mode 100644
index 0000000..d8ff372
--- /dev/null
+++ b/src/views/CadastroView.vue
@@ -0,0 +1,158 @@
+<template>
+    <HeaderPublic />
+    <div class="cadastro-container d-flex align-items-center justify-content-center min-vh-100 p-3">
+        
+        <div class="cadastro-card p-5 shadow-lg rounded-4 bg-white">
+            
+            
+
+            
+            <div class="text-center mb-4">
+                
+                <img src="@/assets/CtrlCash-blue.png" alt="CtrlCash Logo" width="150" class="mb-3">
+                <h2 class="fw-bold text-primary-dark">Abra Sua Conta</h2>
+                <p class="text-secondary-dark">Preencha os campos para iniciar seu controle financeiro.</p>
+            </div>
+
+           
+            <form @submit.prevent="handleCadastro">
+                
+               
+                <div class="mb-3">
+                    <label for="nome" class="form-label fw-medium text-primary-dark">Nome Completo</label>
+                    <div class="input-group">
+                        <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
+                        <input type="text" class="form-control" id="nome" v-model="nome" required placeholder="Seu nome">
+                    </div>
+                </div>
+
+               
+                <div class="mb-3">
+                    <label for="email" class="form-label fw-medium text-primary-dark">E-mail</label>
+                    <div class="input-group">
+                        <span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
+                        <input type="email" class="form-control" id="email" v-model="email" required placeholder="seu.email@exemplo.com">
+                    </div>
+                </div>
+                
+                
+                <div class="mb-3">
+                    <label for="password" class="form-label fw-medium text-primary-dark">Crie Sua Senha</label>
+                    <div class="input-group">
+                        <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
+                        <input type="password" class="form-control" id="password" v-model="password" required placeholder="Mínimo 8 caracteres">
+                    </div>
+                </div>
+                
+                
+                <div class="mb-4">
+                    <label for="confirmPassword" class="form-label fw-medium text-primary-dark">Confirmar Senha</label>
+                    <div class="input-group">
+                        <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
+                        <input type="password" class="form-control" id="confirmPassword" v-model="confirmPassword" required placeholder="Repita a senha">
+                    </div>
+                </div>
+                
+                
+                <button type="submit" class="btn btn-primary-feature w-100 fw-bold py-2 shadow-sm">
+                    Criar Minha Conta CtrlCash
+                </button>
+            </form>
+
+            
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import HeaderPublic from '@/components/HeaderPublic.vue'
+    import { ref } from 'vue';
+    import { useRouter } from 'vue-router';
+
+    const nome = ref('');
+    const email = ref('');
+    const password = ref('');
+    const confirmPassword = ref('');
+    const router = useRouter();
+
+    const handleCadastro = () => {
+        
+        if (password.value !== confirmPassword.value) {
+            console.error("As senhas não coincidem!");
+            
+            return;
+        }
+
+        console.log('Tentativa de Cadastro:', nome.value, email.value); 
+        alertSimulado('Conta criada com sucesso! Faça login para acessar o dashboard.');
+        router.push('/login'); 
+    };
+
+    
+    const alertSimulado = (message) => {
+        
+        console.log(`[ALERTA SIMULADO]: ${message}`);
+    };
+</script>
+
+<style scoped>
+   
+    .text-primary-dark {
+        color: #1A3B5E !important;
+    }
+    .text-secondary-dark {
+        color: #6c757d !important;
+    }
+
+    
+    .cadastro-container {
+        background-color: #F8F9FA;
+    }
+
+    
+    .cadastro-card {
+        max-width: 450px;
+        width: 100%;
+        position: relative; 
+    }
+
+    
+    .back-button {
+        position: absolute;
+        top: 20px; 
+        left: 20px; 
+        text-decoration: none;
+        transition: opacity 0.2s;
+        z-index: 10;
+    }
+    .back-button:hover {
+        opacity: 0.7;
+    }
+
+    
+    .btn-primary-feature {
+        background-color: #1A3B5E; 
+        border-color: #1A3B5E;
+        color: white;
+        transition: background-color 0.2s;
+    }
+    .btn-primary-feature:hover {
+        background-color: #29517b; 
+        border-color: #29517b;
+    }
+
+   
+    .form-control:focus {
+        border-color: #1A3B5E;
+        box-shadow: 0 0 0 0.25rem rgba(26, 59, 94, 0.25);
+    }
+    .input-group-text {
+        background-color: #e9ecef;
+        border-right: none;
+        color: #1A3B5E;
+    }
+
+    .hover-link:hover {
+        text-decoration: underline !important;
+    }
+</style>
diff --git a/src/views/ConfiguracoesView.vue b/src/views/ConfiguracoesView.vue
new file mode 100644
index 0000000..e13e5de
--- /dev/null
+++ b/src/views/ConfiguracoesView.vue
@@ -0,0 +1,111 @@
+<template>
+    <div class="config-page bg-light min-vh-100">
+        
+        <!-- Header da Aplicação -->
+        <HeaderApp />
+
+        <div class="container-fluid py-4 max-w-7xl mx-auto px-4">
+            
+            <h1 class="h3 fw-bold text-primary-dark mb-4">Configurações e Gestão da Conta</h1>
+            
+            <div class="row g-4">
+                
+                <!-- Coluna de Navegação Lateral -->
+                <div class="col-lg-3">
+                    <div class="list-group shadow-sm border-0 rounded-3">
+                        <a href="#" 
+                           @click.prevent="setActiveTab('perfil')" 
+                           :class="['list-group-item list-group-item-action', {'active-feature': activeTab === 'perfil'}]">
+                            <i class="bi bi-person-circle me-2"></i> Perfil e Dados Pessoais
+                        </a>
+                        <a href="#" 
+                           @click.prevent="setActiveTab('categorias')" 
+                           :class="['list-group-item list-group-item-action', {'active-feature': activeTab === 'categorias'}]">
+                            <i class="bi bi-tags-fill me-2"></i> Gestão de Categorias
+                        </a>
+                        <a href="#" 
+                           @click.prevent="setActiveTab('seguranca')" 
+                           :class="['list-group-item list-group-item-action', {'active-feature': activeTab === 'seguranca'}]">
+                            <i class="bi bi-lock-fill me-2"></i> Segurança e Senha
+                        </a>
+                    </div>
+                </div>
+
+                <!-- Área de Conteúdo (Abas) -->
+                <div class="col-lg-9">
+                    <div class="card shadow-sm border-0 p-4 h-100">
+                        
+                        <!-- Aba: Perfil e Dados Pessoais -->
+                        <div v-if="activeTab === 'perfil'">
+                            <h2 class="h4 fw-bold text-primary-dark mb-3">Meu Perfil</h2>
+                            <p class="text-muted">Gerencie seu nome, e-mail e outras informações de contato.</p>
+                            <!-- Placeholder de Formulário -->
+                            <form>
+                                <div class="mb-3"><label class="form-label">Nome:</label><input type="text" class="form-control" value="[Nome do Usuário]"></div>
+                                <div class="mb-3"><label class="form-label">E-mail:</label><input type="email" class="form-control" value="[Email do Usuário]" disabled></div>
+                                <button class="btn btn-primary-feature mt-2">Salvar Alterações</button>
+                            </form>
+                        </div>
+                        
+                        <!-- Aba: Gestão de Categorias -->
+                        <div v-if="activeTab === 'categorias'">
+                            <h2 class="h4 fw-bold text-primary-dark mb-3">Categorias Financeiras</h2>
+                            <p class="text-muted">Crie, edite ou remova categorias de receitas e despesas.</p>
+                            <button class="btn btn-success-feature mb-3"><i class="bi bi-plus-circle me-2"></i> Nova Categoria</button>
+                            <!-- Placeholder de Lista -->
+                            <ul class="list-group">
+                                <li class="list-group-item d-flex justify-content-between align-items-center">Moradia <span class="badge bg-danger">Despesa</span></li>
+                                <li class="list-group-item d-flex justify-content-between align-items-center">Salário <span class="badge bg-success">Receita</span></li>
+                            </ul>
+                        </div>
+                        
+                        <!-- Aba: Segurança e Senha -->
+                        <div v-if="activeTab === 'seguranca'">
+                            <h2 class="h4 fw-bold text-primary-dark mb-3">Segurança da Conta</h2>
+                            <p class="text-muted">Altere sua senha e configure a autenticação de dois fatores.</p>
+                            <!-- Placeholder de Formulário -->
+                            <form>
+                                <div class="mb-3"><label class="form-label">Nova Senha:</label><input type="password" class="form-control"></div>
+                                <div class="mb-3"><label class="form-label">Confirmar Nova Senha:</label><input type="password" class="form-control"></div>
+                                <button class="btn btn-warning text-white mt-2">Alterar Senha</button>
+                            </form>
+                        </div>
+
+                        <!-- Aba: Integrações -->
+                        
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { ref, onMounted } from 'vue';
+    import HeaderApp from '@/components/HeaderApp.vue';
+    
+    const activeTab = ref('perfil'); // Aba ativa por padrão
+
+    const setActiveTab = (tabName) => {
+        activeTab.value = tabName;
+    };
+    
+    // Lógica para marcar o link "Configurações" como ativo no HeaderApp
+    onMounted(() => {
+        // Esta lógica é apenas um lembrete. O HeaderApp usa o Vue Router para gerenciar o estado ativo.
+    });
+
+</script>
+
+<style scoped>
+    /* Estilos Customizados do CtrlCash */
+    .bg-primary-dark { background-color: #1A3B5E !important; }
+    .text-primary-dark { color: #1A3B5E !important; }
+    .btn-primary-feature { background-color: #1A3B5E !important; border-color: #1A3B5E !important; color: white; }
+    .btn-success-feature { background-color: #2ECC71 !important; border-color: #2ECC71 !important; color: white; }
+    .active-feature { background-color: #1A3B5E !important; color: white !important; }
+
+    .max-w-7xl { max-width: 80rem; }
+    .mx-auto { margin-left: auto !important; margin-right: auto !important; }
+</style>
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
new file mode 100644
index 0000000..5b11a2f
--- /dev/null
+++ b/src/views/LoginView.vue
@@ -0,0 +1,129 @@
+<template>
+    <HeaderPublic />
+    <div class="login-container d-flex align-items-center justify-content-center min-vh-100 p-3">
+        
+        <div class="login-card p-5 shadow-lg rounded-4 bg-white">
+            
+           
+            <div class="text-center mb-4">
+                
+                <img src="@/assets/CtrlCash-blue.png" alt="CtrlCash Logo" width="150" class="mb-3">
+                <h2 class="fw-bold text-primary-dark">Login</h2>
+                <p class="text-secondary-dark">Insira seus dados para continuar o controle.</p>
+            </div>
+
+           
+            <form @submit.prevent="handleLogin">
+                
+                
+                <div class="mb-3">
+                    <label for="email" class="form-label fw-medium text-primary-dark">E-mail</label>
+                    <div class="input-group">
+                        <span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
+                        <input type="email" class="form-control" id="email" v-model="email" required placeholder="seu.email@exemplo.com">
+                    </div>
+                </div>
+                
+               
+                <div class="mb-4">
+                    <label for="password" class="form-label fw-medium text-primary-dark">Senha</label>
+                    <div class="input-group">
+                        <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
+                        <input type="password" class="form-control" id="password" v-model="password" required placeholder="********">
+                    </div>
+                    <div class="text-end mt-2">
+                        <a href="/recuperar-senha" class="text-secondary-dark small text-decoration-none hover-link">Esqueceu a senha?</a>
+                    </div>
+                </div>
+                
+                
+                <button type="submit" class="btn btn-primary-feature w-100 fw-bold py-2 shadow-sm">
+                    Acessar Minha Conta
+                </button>
+            </form>
+
+            
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import HeaderPublic from '@/components/HeaderPublic.vue'
+    import { ref } from 'vue';
+    import { useRouter } from 'vue-router';
+
+    const email = ref('');
+    const password = ref('');
+    const router = useRouter();
+
+    const handleLogin = () => {
+        
+        
+        console.log('Tentativa de Login:', email.value);
+        router.push('/dashboard'); 
+    };
+</script>
+
+<style scoped>
+    
+    .text-primary-dark {
+        color: #1A3B5E !important;
+    }
+    .text-secondary-dark {
+        color: #6c757d !important;
+    }
+    .text-success-feature {
+        color: #2ECC71 !important;
+    }
+
+    
+    .login-container {
+        background-color: #F8F9FA;
+    }
+
+    
+    .login-card {
+        max-width: 420px;
+        width: 100%;
+    }
+
+   
+    .btn-primary-feature {
+        background-color: #1A3B5E; 
+        border-color: #1A3B5E;
+        color: white;
+        transition: background-color 0.2s;
+    }
+    .btn-primary-feature:hover {
+        background-color: #29517b; 
+        border-color: #29517b;
+    }
+
+    
+    .btn-outline-primary-feature {
+        color: #1A3B5E;
+        border-color: #1A3B5E;
+        background-color: transparent;
+        transition: all 0.2s;
+        margin-top: 15px; 
+    }
+    .btn-outline-primary-feature:hover {
+        background-color: #1A3B5E;
+        color: white;
+    }
+
+   
+    .form-control:focus {
+        border-color: #1A3B5E;
+        box-shadow: 0 0 0 0.25rem rgba(26, 59, 94, 0.25);
+    }
+    .input-group-text {
+        background-color: #e9ecef;
+        border-right: none;
+        color: #1A3B5E;
+    }
+
+    .hover-link:hover {
+        text-decoration: underline !important;
+    }
+</style>
diff --git a/src/views/SobreNosView.vue b/src/views/SobreNosView.vue
new file mode 100644
index 0000000..f883bc1
--- /dev/null
+++ b/src/views/SobreNosView.vue
@@ -0,0 +1,61 @@
+<template>
+    <div class="sobre-nos-page bg-light min-vh-100">
+        
+        <!-- Header Público (Links para Login/Cadastro) -->
+        <HeaderPublic />
+
+        <div class="container-fluid py-5 max-w-7xl mx-auto px-4">
+            
+            <div class="row g-5 align-items-center">
+                <!-- Seção de Texto (Sobre a Missão) -->
+                <div class="col-lg-6">
+                    <h1 class="display-5 fw-bold text-primary-dark mb-4">
+                        Nossa Missão: <span class="text-success-feature">Empoderar</span> Suas Finanças.
+                    </h1>
+                    <p class="lead text-muted">
+                        O CtrlCash nasceu da necessidade de simplificar a gestão financeira pessoal. Acreditamos que controlar suas finanças não deve ser um fardo, mas uma ferramenta para alcançar seus objetivos.
+                    </p>
+                    <p class="text-muted">
+                        Nosso sistema oferece uma visão clara e organizada de onde seu dinheiro está indo, permitindo que você tome decisões informadas. Não se trata apenas de registrar gastos, mas de planejar o futuro.
+                    </p>
+                    
+                    <router-link to="/cadastro" class="btn btn-lg btn-success-feature shadow-lg mt-4">
+                        Comece a Controlar Sua Vida Financeira Hoje
+                    </router-link>
+                </div>
+
+                <!-- Seção de Imagem/Visual -->
+                <div class="col-lg-6 d-none d-lg-block">
+                    <div class="p-5 bg-white shadow-lg rounded-5 text-center border">
+                        <i class="bi bi-wallet2 display-1 text-primary-dark mb-3"></i>
+                        <h3 class="fw-bold text-primary-dark">Controle Financeiro Descomplicado</h3>
+                        <p class="text-muted">A plataforma ideal para quem busca clareza e inteligência nos gastos diários.</p>
+                        <i class="bi bi-graph-up display-4 text-success-feature mt-3"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- FOOTER SIMPLES -->
+        <footer class="bg-primary-dark text-white-50 py-3 mt-5">
+            <div class="container-fluid text-center small">
+                &copy; {{ new Date().getFullYear() }} CtrlCash. Todos os direitos reservados.
+            </div>
+        </footer>
+    </div>
+</template>
+
+<script setup>
+    import HeaderPublic from '@/components/HeaderPublic.vue';
+</script>
+
+<style scoped>
+    /* Estilos Customizados do CtrlCash (Garantindo que o TXT funcione) */
+    .bg-primary-dark { background-color: #1A3B5E !important; }
+    .text-primary-dark { color: #1A3B5E !important; }
+    .text-success-feature { color: #2ECC71 !important; }
+    .btn-success-feature { background-color: #2ECC71 !important; border-color: #2ECC71 !important; color: white; }
+    
+    .max-w-7xl { max-width: 80rem; }
+    .mx-auto { margin-left: auto !important; margin-right: auto !important; }
+</style>
\ No newline at end of file
diff --git a/src/views/TransacoesView.vue b/src/views/TransacoesView.vue
new file mode 100644
index 0000000..5ee7779
--- /dev/null
+++ b/src/views/TransacoesView.vue
@@ -0,0 +1,228 @@
+<template>
+    <div class="transacoes-page bg-light min-vh-100">
+        
+        <!-- Componente do Header (Barra de navegação da aplicação) -->
+        <HeaderApp />
+
+        <div class="container-fluid py-4 max-w-7xl mx-auto px-4">
+            
+            <div class="d-flex justify-content-between align-items-center mb-4">
+                <h1 class="h3 fw-bold text-primary-dark">Minhas Transações</h1>
+                
+                <!-- Botão para abrir o Modal de Nova Transação -->
+                <button 
+                    type="button" 
+                    class="btn btn-success-feature fw-bold shadow-sm d-flex align-items-center" 
+                    data-bs-toggle="modal" 
+                    data-bs-target="#novaTransacaoModal"
+                >
+                    <i class="bi bi-plus-circle-fill me-2"></i>
+                    Nova Transação
+                </button>
+            </div>
+
+            <!-- Card de Filtros e Pesquisa -->
+            <div class="card shadow-sm border-0 mb-4 p-3">
+                <div class="row g-3 align-items-center">
+                    
+                    <!-- Filtro por Tipo -->
+                    <div class="col-md-3">
+                        <label for="filtroTipo" class="form-label small text-muted">Tipo</label>
+                        <select id="filtroTipo" class="form-select">
+                            <option selected>Todos</option>
+                            <option value="receita">Receitas</option>
+                            <option value="despesa">Despesas</option>
+                        </select>
+                    </div>
+
+                    <!-- Filtro por Categoria -->
+                    <div class="col-md-4">
+                        <label for="filtroCategoria" class="form-label small text-muted">Categoria</label>
+                        <input type="text" id="filtroCategoria" class="form-control" placeholder="Buscar por categoria...">
+                    </div>
+
+                    <!-- Filtro por Período -->
+                    <div class="col-md-5">
+                        <label for="filtroPeriodo" class="form-label small text-muted">Período</label>
+                        <div class="input-group">
+                            <input type="date" class="form-control">
+                            <span class="input-group-text">a</span>
+                            <input type="date" class="form-control">
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Tabela de Transações -->
+            <div class="card shadow-sm border-0">
+                <div class="card-body p-0">
+                    <div class="table-responsive">
+                        <table class="table table-hover mb-0">
+                            <thead class="bg-light">
+                                <tr>
+                                    <th scope="col" class="text-primary-dark fw-bold">Descrição</th>
+                                    <th scope="col" class="text-primary-dark fw-bold">Categoria</th>
+                                    <th scope="col" class="text-primary-dark fw-bold text-center">Tipo</th>
+                                    <th scope="col" class="text-primary-dark fw-bold text-end">Valor</th>
+                                    <th scope="col" class="text-primary-dark fw-bold">Data</th>
+                                    <th scope="col" class="text-primary-dark fw-bold text-center">Ações</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <!-- Exemplo de Receita -->
+                                <tr>
+                                    <td>Salário Mês de Setembro</td>
+                                    <td>Renda Principal</td>
+                                    <td class="text-center"><span class="badge bg-success-feature"><i class="bi bi-arrow-up"></i> Receita</span></td>
+                                    <td class="text-end fw-bold text-success-feature">R$ 4.200,00</td>
+                                    <td>28/09/2025</td>
+                                    <td class="text-center">
+                                        <button class="btn btn-sm btn-link text-primary-dark p-0 me-2" title="Editar"><i class="bi bi-pencil-square"></i></button>
+                                        <button class="btn btn-sm btn-link text-danger p-0" title="Excluir"><i class="bi bi-trash"></i></button>
+                                    </td>
+                                </tr>
+                                <!-- Exemplo de Despesa -->
+                                <tr>
+                                    <td>Pagamento do Aluguel</td>
+                                    <td>Moradia</td>
+                                    <td class="text-center"><span class="badge bg-danger"><i class="bi bi-arrow-down"></i> Despesa</span></td>
+                                    <td class="text-end fw-bold text-danger">R$ 1.200,00</td>
+                                    <td>05/10/2025</td>
+                                    <td class="text-center">
+                                        <button class="btn btn-sm btn-link text-primary-dark p-0 me-2" title="Editar"><i class="bi bi-pencil-square"></i></button>
+                                        <button class="btn btn-sm btn-link text-danger p-0" title="Excluir"><i class="bi bi-trash"></i></button>
+                                    </td>
+                                </tr>
+                                <!-- Mais um Exemplo -->
+                                <tr>
+                                    <td>Compra no Supermercado</td>
+                                    <td>Alimentação</td>
+                                    <td class="text-center"><span class="badge bg-danger"><i class="bi bi-arrow-down"></i> Despesa</span></td>
+                                    <td class="text-end fw-bold text-danger">R$ 250,50</td>
+                                    <td>15/10/2025</td>
+                                    <td class="text-center">
+                                        <button class="btn btn-sm btn-link text-primary-dark p-0 me-2" title="Editar"><i class="bi bi-pencil-square"></i></button>
+                                        <button class="btn btn-sm btn-link text-danger p-0" title="Excluir"><i class="bi bi-trash"></i></button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <!-- Paginação ou Footer -->
+                <div class="card-footer bg-white text-center">
+                    <small class="text-muted">Exibindo 1 a 10 de 52 transações.</small>
+                </div>
+            </div>
+
+        </div>
+
+        <!-- Modal de Nova Transação (Formulário Flutuante) -->
+        <div class="modal fade" id="novaTransacaoModal" tabindex="-1" aria-labelledby="novaTransacaoModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered">
+                <div class="modal-content">
+                    <div class="modal-header bg-primary-dark text-white">
+                        <h5 class="modal-title fw-bold" id="novaTransacaoModalLabel">Adicionar Nova Transação</h5>
+                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fechar"></button>
+                    </div>
+                    <div class="modal-body">
+                        <form>
+                            
+                            <!-- Tipo de Transação (Receita/Despesa) -->
+                            <div class="mb-3">
+                                <label class="form-label fw-medium text-primary-dark">Tipo</label>
+                                <div class="btn-group w-100" role="group">
+                                    <input type="radio" class="btn-check" name="tipoTransacao" id="tipoReceita" value="receita" checked>
+                                    <label class="btn btn-outline-success-feature fw-bold" for="tipoReceita">Receita</label>
+
+                                    <input type="radio" class="btn-check" name="tipoTransacao" id="tipoDespesa" value="despesa">
+                                    <label class="btn btn-outline-danger fw-bold" for="tipoDespesa">Despesa</label>
+                                </div>
+                            </div>
+                            
+                            <!-- Descrição -->
+                            <div class="mb-3">
+                                <label for="descricao" class="form-label fw-medium text-primary-dark">Descrição</label>
+                                <input type="text" class="form-control" id="descricao" placeholder="Ex: Salário, Aluguel, Supermercado">
+                            </div>
+                            
+                            <!-- Valor e Data -->
+                            <div class="row">
+                                <div class="col-md-6 mb-3">
+                                    <label for="valor" class="form-label fw-medium text-primary-dark">Valor (R$)</label>
+                                    <input type="number" step="0.01" class="form-control" id="valor" placeholder="0.00">
+                                </div>
+                                <div class="col-md-6 mb-3">
+                                    <label for="data" class="form-label fw-medium text-primary-dark">Data</label>
+                                    <input type="date" class="form-control" id="data">
+                                </div>
+                            </div>
+
+                            <!-- Categoria -->
+                            <div class="mb-3">
+                                <label for="categoria" class="form-label fw-medium text-primary-dark">Categoria</label>
+                                <select id="categoria" class="form-select">
+                                    <option selected>Selecione uma categoria...</option>
+                                    <option value="renda">Renda Principal</option>
+                                    <option value="moradia">Moradia</option>
+                                    <option value="alimentacao">Alimentação</option>
+                                    <option value="transporte">Transporte</option>
+                                    <option value="lazer">Lazer</option>
+                                </select>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
+                        <button type="submit" class="btn btn-primary-dark-feature fw-bold">Salvar Transação</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup>
+    import HeaderApp from '@/components/HeaderApp.vue';
+    // Lógica para controle de filtros e interação com o modal (será adicionada com o Flask)
+</script>
+
+<style scoped>
+    /* Definição das cores customizadas para o Bootstrap (Garantia de cores) */
+    .bg-primary-dark { background-color: #1A3B5E !important; }
+    .text-primary-dark { color: #1A3B5E !important; }
+    
+    .bg-success-feature { background-color: #2ECC71 !important; }
+    .text-success-feature { color: #2ECC71 !important; }
+    
+    .btn-outline-success-feature {
+        --bs-btn-color: #2ECC71;
+        --bs-btn-border-color: #2ECC71;
+        --bs-btn-hover-bg: #2ECC71;
+        --bs-btn-hover-border-color: #2ECC71;
+        --bs-btn-active-bg: #2ECC71;
+        --bs-btn-active-border-color: #2ECC71;
+        --bs-btn-active-color: white;
+    }
+    
+    .btn-primary-dark-feature {
+        background-color: #1A3B5E;
+        color: white;
+        border-color: #1A3B5E;
+    }
+    .btn-primary-dark-feature:hover {
+        background-color: #122841;
+        border-color: #122841;
+        color: white;
+    }
+
+    /* Utilitário para limitar largura (usado no header) */
+    .max-w-7xl {
+        max-width: 80rem; /* 1280px */
+    }
+    .mx-auto {
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+</style>
diff --git a/src/views/UserDashboardView.vue b/src/views/UserDashboardView.vue
new file mode 100644
index 0000000..b78e969
--- /dev/null
+++ b/src/views/UserDashboardView.vue
@@ -0,0 +1,129 @@
+<template>
+    <div class="dashboard-page bg-light min-vh-100">
+        
+        <!-- Componente do Header (Barra de navegação da aplicação) -->
+        <HeaderApp />
+
+        <div class="container-fluid py-4 max-w-7xl mx-auto px-4">
+            
+            <h1 class="h3 fw-bold text-primary-dark mb-4">Visão Geral</h1>
+
+            <!-- Sumário (Cards de Resumo) -->
+            <div class="row g-4 mb-5">
+                
+                <!-- Card Saldo Total -->
+                <div class="col-lg-4 col-md-6 col-sm-12">
+                    <div class="card shadow-sm border-0 h-100 p-3">
+                        <div class="card-body">
+                            <h5 class="card-title text-muted mb-3">Saldo Total</h5>
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="card-text fs-3 fw-bold text-primary-dark">R$ 15.480,23</p>
+                                <i class="bi bi-wallet2 fs-2 text-primary-dark opacity-75"></i>
+                            </div>
+                            <small class="text-success-feature fw-medium">+2.5% desde o mês passado</small>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Card Receitas -->
+                <div class="col-lg-4 col-md-6 col-sm-12">
+                    <div class="card shadow-sm border-0 h-100 p-3">
+                        <div class="card-body">
+                            <h5 class="card-title text-muted mb-3">Receitas do Mês</h5>
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="card-text fs-3 fw-bold text-success-feature">R$ 4.200,00</p>
+                                <i class="bi bi-arrow-up-circle-fill fs-2 text-success-feature opacity-75"></i>
+                            </div>
+                            <small class="text-muted">Meta alcançada: 84%</small>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Card Despesas -->
+                <div class="col-lg-4 col-md-12 col-sm-12">
+                    <div class="card shadow-sm border-0 h-100 p-3">
+                        <div class="card-body">
+                            <h5 class="card-title text-muted mb-3">Despesas do Mês</h5>
+                            <div class="d-flex justify-content-between align-items-center">
+                                <p class="card-text fs-3 fw-bold text-danger">R$ 1.850,50</p>
+                                <i class="bi bi-arrow-down-circle-fill fs-2 text-danger opacity-75"></i>
+                            </div>
+                            <small class="text-muted">Limite restante: R$ 649,50</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Gráfico Principal (Matplotlib) e Atividade Recente -->
+            <div class="row g-4">
+                
+                <!-- Coluna Principal para o Gráfico (Placeholder para Matplotlib) -->
+                <div class="col-lg-8">
+                    <div class="card shadow-sm border-0 h-100 p-4">
+                        <h4 class="fw-bold text-primary-dark mb-3">Evolução Financeira (Gráfico)</h4>
+                        <p class="text-muted">Aqui será renderizado o gráfico gerado pelo Matplotlib no Flask.</p>
+                        <!-- Área de 400px de altura para o gráfico -->
+                        <div class="matplotlib-placeholder bg-light-subtle rounded-3 border border-dashed p-5 text-center d-flex align-items-center justify-content-center" style="min-height: 400px; height: 100%;">
+                            <i class="bi bi-bar-chart-fill fs-1 text-primary-dark opacity-25"></i>
+                            <p class="ms-3 text-primary-dark opacity-50">Carregando visualização de dados...</p>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Coluna de Atividade Recente -->
+                <div class="col-lg-4">
+                    <div class="card shadow-sm border-0 h-100 p-4">
+                        <h4 class="fw-bold text-primary-dark mb-3">Atividade Recente</h4>
+                        <ul class="list-group list-group-flush">
+                            <li class="list-group-item d-flex justify-content-between align-items-center">
+                                Pagamento de Aluguel
+                                <span class="badge bg-danger">-R$ 1.200,00</span>
+                            </li>
+                            <li class="list-group-item d-flex justify-content-between align-items-center">
+                                Salário - Empresa Y
+                                <span class="badge bg-success-feature">+R$ 4.200,00</span>
+                            </li>
+                            <li class="list-group-item d-flex justify-content-between align-items-center">
+                                Compra Mercado
+                                <span class="badge bg-danger">-R$ 250,50</span>
+                            </li>
+                            <li class="list-group-item d-flex justify-content-between align-items-center">
+                                Recebimento de Freelance
+                                <span class="badge bg-success-feature">+R$ 500,00</span>
+                            </li>
+                            <li class="list-group-item text-center">
+                                <router-link to="/transacoes" class="btn btn-link btn-sm text-primary-dark fw-medium">Ver todas as transações</router-link>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import HeaderApp from '@/components/HeaderApp.vue';
+    // Importações e lógica do dashboard (serão adicionadas ao integrar com Flask)
+</script>
+
+<style scoped>
+    .bg-primary-dark { background-color: #1A3B5E !important; }
+    .text-primary-dark { color: #1A3B5E !important; }
+    .bg-success-feature { background-color: #2ECC71 !important; }
+    .text-success-feature { color: #2ECC71 !important; }
+
+    /* Estilos de Card de Destaque */
+    .card-body {
+        padding: 1.5rem;
+    }
+
+    /* Utilitário para limitar largura (usado no header) */
+    .max-w-7xl {
+        max-width: 80rem; /* 1280px */
+    }
+    .mx-auto {
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+</style>