diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 4c0f726..656ebc4 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,11 +1,11 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
-import {HelloComponent} from './components/hello/hello.component';
+import {SigningComponent} from './components/signing/signing.component';
 import {LoginComponent} from './components/login/login.component';
 
 const routes: Routes = [
   {path: "login", component: LoginComponent},
-  {path: "", component: HelloComponent}
+  {path: "", component: SigningComponent}
 ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e4b5d48..0fbaedd 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,7 +3,7 @@ import {BrowserModule} from '@angular/platform-browser';
 
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './components/app.component';
-import {HelloComponent} from './components/hello/hello.component';
+import {SigningComponent} from './components/signing/signing.component';
 import {BASE_PATH} from '../gen';
 import {environment} from '../environments/environment';
 import {HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
@@ -11,12 +11,15 @@ import { LoginComponent } from './components/login/login.component';
 import {FormsModule} from '@angular/forms';
 import {RequestInterceptor} from './interceptors/request.interceptor';
 import {UnauthorizedInterceptor} from './interceptors/unauthorizedResponseInterceptor';
+import {SigningSidebarComponent} from './components/signing/signing-sidebar/signing-sidebar.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    HelloComponent,
-    LoginComponent
+    SigningComponent,
+    LoginComponent,
+    SigningSidebarComponent,
+    SigningSidebarComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/hello/hello.component.html b/src/app/components/hello/hello.component.html
deleted file mode 100644
index 18ae303..0000000
--- a/src/app/components/hello/hello.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<h1 class="text-3xl font-bold underline">{{ helloValue }}</h1>
diff --git a/src/app/components/hello/hello.component.ts b/src/app/components/hello/hello.component.ts
deleted file mode 100644
index f42b428..0000000
--- a/src/app/components/hello/hello.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {HelloResponse, HelloService} from '../../../gen';
-
-@Component({
-  selector: 'app-hello',
-  standalone: false,
-  templateUrl: './hello.component.html',
-  styleUrl: './hello.component.css'
-})
-export class HelloComponent implements OnInit {
-  public helloValue: string = "Loading...";
-
-  constructor(private helloService: HelloService) {
-  }
-
-  ngOnInit(): void {
-    this.helloService.getHello().subscribe({
-      next: (response: HelloResponse): void => {
-        this.helloValue = response.value || "";
-      },
-      error: (err: Error): void => {
-        this.helloValue = err.message;
-      }
-    });
-  }
-}
diff --git a/src/app/components/hello/hello.component.css b/src/app/components/signing/signing-sidebar/signing-sidebar.component.css
similarity index 100%
rename from src/app/components/hello/hello.component.css
rename to src/app/components/signing/signing-sidebar/signing-sidebar.component.css
diff --git a/src/app/components/signing/signing-sidebar/signing-sidebar.component.html b/src/app/components/signing/signing-sidebar/signing-sidebar.component.html
new file mode 100644
index 0000000..030eb4c
--- /dev/null
+++ b/src/app/components/signing/signing-sidebar/signing-sidebar.component.html
@@ -0,0 +1,17 @@
+<div class="w-full h-full bg-white p-6 shadow-lg">
+  <h2 class="text-lg font-semibold mb-2">Signing 4 documents</h2>
+  <p class="text-gray-500 text-sm mb-4">Submitted 5 days ago.</p>
+
+  <ul>
+    <li class="bg-green-100 text-green-700 p-2 rounded mb-2">✅ Form W-8BEN.pdf</li>
+    <li class="bg-green-100 text-green-700 p-2 rounded mb-2">✅ 1195 - Identity declaration.pdf</li>
+    <li class="bg-gray-200 p-2 rounded mb-2">👁️ CGA.pdf</li>
+    <li class="bg-red-600 text-white p-2 rounded mb-2">⚠️ Review document →</li>
+    <li class="bg-gray-200 p-2 rounded">📄 Terms and conditions for US citizens.pdf</li>
+  </ul>
+
+  <div class="mt-6 flex justify-between">
+    <button class="px-4 py-2 bg-gray-300 rounded">Reject all</button>
+    <button class="px-4 py-2 bg-gray-500 text-white rounded" disabled>Confirm signing</button>
+  </div>
+</div>
diff --git a/src/app/components/signing/signing-sidebar/signing-sidebar.component.spec.ts b/src/app/components/signing/signing-sidebar/signing-sidebar.component.spec.ts
new file mode 100644
index 0000000..8a2cddb
--- /dev/null
+++ b/src/app/components/signing/signing-sidebar/signing-sidebar.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SigningSidebarComponent } from './signing-sidebar.component';
+
+describe('SigningSidebarComponent', () => {
+  let component: SigningSidebarComponent;
+  let fixture: ComponentFixture<SigningSidebarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SigningSidebarComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SigningSidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/signing/signing-sidebar/signing-sidebar.component.ts b/src/app/components/signing/signing-sidebar/signing-sidebar.component.ts
new file mode 100644
index 0000000..e5fe614
--- /dev/null
+++ b/src/app/components/signing/signing-sidebar/signing-sidebar.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-signing-sidebar',
+  standalone: false,
+  
+  templateUrl: './signing-sidebar.component.html',
+  styleUrl: './signing-sidebar.component.css'
+})
+export class SigningSidebarComponent {
+
+}
diff --git a/src/app/components/signing/signing.component.html b/src/app/components/signing/signing.component.html
new file mode 100644
index 0000000..7f16fec
--- /dev/null
+++ b/src/app/components/signing/signing.component.html
@@ -0,0 +1,19 @@
+<div class="flex h-screen bg-gray-100">
+  <div class="w-1/4">
+    <app-signing-sidebar></app-signing-sidebar>
+  </div>
+
+  <div class="w-3/4 p-6">
+    <div class="bg-gray-700 text-white p-4 flex justify-between">
+      <span>Review document before confirming</span>
+      <button class="bg-red-600 px-4 py-2 rounded">Confirm</button>
+    </div>
+
+    <div class="bg-white p-6 shadow-lg mt-4">
+      <h2 class="text-xl font-bold">Dear Mr. Jones</h2>
+      <p class="mt-2 text-gray-700">
+        Evelitat endanda nonsecto bland autemque re exerio volorporeium eos eicabo...
+      </p>
+    </div>
+  </div>
+</div>
diff --git a/src/app/components/hello/hello.component.spec.ts b/src/app/components/signing/signing.component.spec.ts
similarity index 60%
rename from src/app/components/hello/hello.component.spec.ts
rename to src/app/components/signing/signing.component.spec.ts
index 86937f7..0286e93 100644
--- a/src/app/components/hello/hello.component.spec.ts
+++ b/src/app/components/signing/signing.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HelloComponent } from './hello.component';
+import { SigningComponent } from './signing.component';
 
 describe('HelloComponent', () => {
-  let component: HelloComponent;
-  let fixture: ComponentFixture<HelloComponent>;
+  let component: SigningComponent;
+  let fixture: ComponentFixture<SigningComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [HelloComponent]
+      declarations: [SigningComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(HelloComponent);
+    fixture = TestBed.createComponent(SigningComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/components/signing/signing.component.ts b/src/app/components/signing/signing.component.ts
new file mode 100644
index 0000000..a49be6f
--- /dev/null
+++ b/src/app/components/signing/signing.component.ts
@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-hello',
+  standalone: false,
+  templateUrl: './signing.component.html',
+  styleUrl: './signing.component.css'
+})
+export class SigningComponent implements OnInit {
+  constructor() {
+  }
+
+  ngOnInit(): void {
+
+  }
+}