diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.ts
index 27728ca5..8568ace5 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.ts
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.component.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { NavbarComponent } from "./components/navbar/navbar.component";
 import { LoginComponent } from "./components/login/login.component";
-import { HomeComponent } from "./components/home/home.component";
+import { HomeComponent } from "./pages/home/home.component";
 
 @Component({
     selector: 'app-root',
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.routes.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.routes.ts
index 4cb81b1f..627a7e5f 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.routes.ts
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/app.routes.ts
@@ -1,10 +1,10 @@
 import { Routes } from '@angular/router';
-import { EnvelopeTableComponent } from '../app/components/envelope-table/envelope-table.component'
-import { HomeComponent } from '../app/components/home/home.component'
+import { HomeComponent } from '../app/pages/home/home.component'
 import { authGuard } from './guards/auth.guard'
+import { EnvelopeComponent } from './pages/envelope/envelope.component';
 
 export const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'login', component: HomeComponent },
-  { path: 'envelope', component: EnvelopeTableComponent, canActivate: [authGuard] }
+  { path: 'envelope', component: EnvelopeComponent, canActivate: [authGuard] }
 ];
\ No newline at end of file
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/guards/auth.guard.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/guards/auth.guard.ts
index c61fddfc..e3a485e0 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/guards/auth.guard.ts
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/guards/auth.guard.ts
@@ -13,7 +13,7 @@ export const authGuard: CanActivateFn = (route, state) => {
   return authService.isAuthenticated().pipe(
     map(isAuthenticated => {
       if (!isAuthenticated) {
-        router.navigate(['/']);
+        router.navigate(['/login']);
       }
       return isAuthenticated;
     })
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope/envelope.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope/envelope.component.html
new file mode 100644
index 00000000..75e91683
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope/envelope.component.html
@@ -0,0 +1,8 @@
+<mat-tab-group>
+    <mat-tab label="First">
+        <app-envelope-table></app-envelope-table>
+    </mat-tab>
+    <mat-tab label="Second">
+        <app-envelope-table></app-envelope-table>
+    </mat-tab>
+</mat-tab-group>
\ No newline at end of file
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope/envelope.component.scss b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope/envelope.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope/envelope.component.spec.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope/envelope.component.spec.ts
new file mode 100644
index 00000000..4e4d9132
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope/envelope.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EnvelopeComponent } from './envelope.component';
+
+describe('EnvelopeComponent', () => {
+  let component: EnvelopeComponent;
+  let fixture: ComponentFixture<EnvelopeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EnvelopeComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(EnvelopeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope/envelope.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope/envelope.component.ts
new file mode 100644
index 00000000..b91f2f7f
--- /dev/null
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/envelope/envelope.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { EnvelopeTableComponent } from "../../components/envelope-table/envelope-table.component";
+import {MatTabsModule} from '@angular/material/tabs';
+
+@Component({
+    selector: 'app-envelope',
+    standalone: true,
+    templateUrl: './envelope.component.html',
+    styleUrl: './envelope.component.scss',
+    imports: [EnvelopeTableComponent, MatTabsModule]
+})
+export class EnvelopeComponent {
+
+}
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/home/home.component.html b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/home/home.component.html
similarity index 100%
rename from EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/home/home.component.html
rename to EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/home/home.component.html
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/home/home.component.scss b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/home/home.component.scss
similarity index 100%
rename from EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/home/home.component.scss
rename to EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/home/home.component.scss
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/home/home.component.spec.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/home/home.component.spec.ts
similarity index 100%
rename from EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/home/home.component.spec.ts
rename to EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/home/home.component.spec.ts
diff --git a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/home/home.component.ts b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/home/home.component.ts
similarity index 77%
rename from EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/home/home.component.ts
rename to EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/home/home.component.ts
index 05b66c38..59c98ab9 100644
--- a/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/home/home.component.ts
+++ b/EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/pages/home/home.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { LoginComponent } from "../login/login.component";
+import { LoginComponent } from "../../components/login/login.component";
 
 @Component({
     selector: 'app-home',