diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index b4e023b..4983e25 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -11,14 +11,18 @@ import { WebSqlite } from 'angular-web-sqlite';
 import { Sqlite } from './services/sqlite';
 import { tables } from '../migrations/20260117';
 import { provideServiceWorker } from '@angular/service-worker';
-import {provideTranslateService } from "@ngx-translate/core";
-import {provideTranslateHttpLoader} from "@ngx-translate/http-loader";
+import { provideTranslateService, TranslateService } from '@ngx-translate/core';
+import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideAppInitializer(async () => {
       const sqlite = inject(Sqlite);
+      const translateService = inject(TranslateService);
+      translateService.addLangs(['en', 'es', 'pt']);
+      translateService.setFallbackLang('es');
       await sqlite.initializeDatabase('gptdb');
+      await sqlite.dropAllTables();
       await sqlite.batchSqlOperations(tables);
       await sqlite.executeQuery('PRAGMA foreign_keys = ON;');
       document.dispatchEvent(new CustomEvent('ng-boot'));
@@ -33,10 +37,10 @@ export const appConfig: ApplicationConfig = {
     provideTranslateService({
       loader: provideTranslateHttpLoader({
         prefix: '/i18n/',
-        suffix: '.json'
+        suffix: '.json',
       }),
       fallbackLang: 'en',
-      lang: 'en'
-    })
+      lang: 'en',
+    }),
   ],
 };
diff --git a/src/app/app.html b/src/app/app.html
index 0680b43..2757ab0 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -1 +1,4 @@
-<router-outlet></router-outlet>
+<div class="content">
+  <router-outlet></router-outlet>
+</div>
+<app-bottom-navigation-bar [options]="menuOptions"/>
\ No newline at end of file
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index dc39edb..1a5eefb 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,3 +1,30 @@
 import { Routes } from '@angular/router';
-
-export const routes: Routes = [];
+import { Home } from './pages/home/home';
+import { routes as settingsRoutes } from './pages/settings/settings.route'
+export const routes: Routes = [
+  {
+    path: 'home',
+    component: Home,
+  },
+  {
+    path: 'register',
+    component: Home,
+  },
+  {
+    path: 'budget',
+    component: Home,
+  },
+  {
+    path: 'settings',
+    children: settingsRoutes
+  },
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'home',
+  },
+  {
+    path: '**',
+    redirectTo: 'home',
+  },
+];
diff --git a/src/app/app.scss b/src/app/app.scss
new file mode 100644
index 0000000..b94d644
--- /dev/null
+++ b/src/app/app.scss
@@ -0,0 +1,19 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: 100vh;
+  width: 100%;
+}
+
+.content {
+  height: calc(100% - 56px);
+  max-height: calc(100vh - 56px);
+  overflow: auto;
+}
+
+app-bottom-navigation-bar {
+  margin-top: auto;
+  width: 100%;
+  z-index: 2;
+}
diff --git a/src/app/app.spec.ts b/src/app/app.spec.ts
index c228d87..507729c 100644
--- a/src/app/app.spec.ts
+++ b/src/app/app.spec.ts
@@ -1,10 +1,13 @@
 import { TestBed } from '@angular/core/testing';
 import { App } from './app';
 
+import { provideTranslateService } from '@ngx-translate/core';
+
 describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [App],
+      providers: [provideTranslateService({})],
     }).compileComponents();
   });
 
@@ -13,5 +16,4 @@ describe('App', () => {
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
-
 });
diff --git a/src/app/app.ts b/src/app/app.ts
index e33cf3e..f5b01b6 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -1,18 +1,33 @@
-import { Component, inject } from '@angular/core';
+import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
+import { BottomNavigationBar } from './components/bottom-navigation-bar/bottom-navigation-bar';
+import { BottomNavigationBarOption } from './components/bottom-navigation-bar/BottomNavigationBarOption';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, BottomNavigationBar],
   templateUrl: './app.html',
-  styles: [],
+  styleUrls: [
+   './app.scss'
+  ],
 })
 export class App {
-  private readonly translate = inject(TranslateService);
-  constructor() {
-        this.translate.addLangs(['en', 'es', 'pt']);
-        this.translate.setFallbackLang('en');
-        this.translate.use('en');
-    }
+  
+  protected menuOptions = [
+    new BottomNavigationBarOption('navbar.label.home', 'home', '/home'),
+    new BottomNavigationBarOption(
+      'navbar.label.register',
+      'barcode',
+      '/register',
+      'material-symbols-outlined',
+    ),
+    new BottomNavigationBarOption(
+      'navbar.label.budget',
+      'barcode_reader',
+      '/budget',
+      'material-symbols-outlined',
+    ),
+    new BottomNavigationBarOption('navbar.label.settings', 'settings', '/settings'),
+  ];
+
 }