diff --git a/implem/src/app/pages/main/main.html b/implem/src/app/pages/main/main.html
index 8747da5..4116d5f 100644
--- a/implem/src/app/pages/main/main.html
+++ b/implem/src/app/pages/main/main.html
@@ -3,7 +3,12 @@
   <main>
 
     <h2 class="title">
-      CSC Solution Matcher helps match client questions with similar previous cases using AI technology
+      CSC Solution Matcher helps match client questions with similar previous cases using
+      <span class="magic-text">
+
+      AI technology
+      <i class="ri-sparkling-fill"></i>
+      </span>
     </h2>
     <!--  traduction de requête-->
     <div id="translation_request">
@@ -11,7 +16,6 @@
       <div class="helper">
         Original question
         <i class="ri-arrow-right-line"></i>
-
       </div>
 
       <lib-translate-texts></lib-translate-texts>
@@ -20,6 +24,7 @@
     <div id="question_alaysis">
       <!--filters-->
       <!--      advanced filters-->
+      <lib-filters-group></lib-filters-group>
     </div>
   </main>
   <footer>
@@ -27,5 +32,6 @@
     <!--  bottom nav -->
     <!--  bottom fixed bar -->
     <!--  search button-->
+    <app-bottom-navigation></app-bottom-navigation>
   </footer>
 </div>
diff --git a/implem/src/app/pages/main/main.scss b/implem/src/app/pages/main/main.scss
index e69de29..d08836e 100644
--- a/implem/src/app/pages/main/main.scss
+++ b/implem/src/app/pages/main/main.scss
@@ -0,0 +1,3 @@
+.magic-text{
+  color: #EEA100;
+}
diff --git a/implem/src/app/pages/main/main.ts b/implem/src/app/pages/main/main.ts
index 2e4c07b..b82566c 100644
--- a/implem/src/app/pages/main/main.ts
+++ b/implem/src/app/pages/main/main.ts
@@ -1,12 +1,17 @@
 import { Component } from '@angular/core';
 import {TopNavigation} from '../../shared/navigation/top-navigation/top-navigation';
 import {TranslateTexts} from '../../../../../my-workspace/projects/my-lib/translate-texts/translate-texts';
+import {FiltersGroup} from '../../../../../my-workspace/projects/my-lib/filters/filters-group/filters-group';
+import {BottomNavigation} from '../../shared/navigation/bottom-navigation/bottom-navigation';
+
 
 @Component({
   selector: 'app-main',
   imports: [
     TopNavigation,
-    TranslateTexts
+    TranslateTexts,
+    FiltersGroup,
+    BottomNavigation
   ],
   templateUrl: './main.html',
   styleUrl: './main.scss'
diff --git a/implem/src/app/shared/navigation/bottom-navigation/bottom-navigation.html b/implem/src/app/shared/navigation/bottom-navigation/bottom-navigation.html
new file mode 100644
index 0000000..a6016a0
--- /dev/null
+++ b/implem/src/app/shared/navigation/bottom-navigation/bottom-navigation.html
@@ -0,0 +1,15 @@
+<div class="bottom-navigation">
+  <nav class="navigation">
+    <a class="nav-item">
+      privacy policy
+    </a>
+    <a class="nav-item">
+      contact
+    </a>
+  </nav>
+  <div class="fixed-navigation">
+    <button class="next-step" routerLink="similar-cases">
+      Search similar cases
+    </button>
+  </div>
+</div>
diff --git a/implem/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss b/implem/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss
new file mode 100644
index 0000000..717d914
--- /dev/null
+++ b/implem/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss
@@ -0,0 +1,14 @@
+.next-step{
+  color: var(--color-text-invert, #FFF);
+  text-align: center;
+  leading-trim: both;
+  text-edge: cap;
+
+  /* Text/text-button */
+  font-family: var(--Fonts-Font-text, Barlow);
+  font-size: var(--Font-Base, 14px);
+  font-style: normal;
+  font-weight: 600;
+  line-height: 100%; /* 14px */
+  letter-spacing: 1.12px;
+}
diff --git a/implem/src/app/shared/navigation/bottom-navigation/bottom-navigation.spec.ts b/implem/src/app/shared/navigation/bottom-navigation/bottom-navigation.spec.ts
new file mode 100644
index 0000000..9bf0f82
--- /dev/null
+++ b/implem/src/app/shared/navigation/bottom-navigation/bottom-navigation.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BottomNavigation } from './bottom-navigation';
+
+describe('BottomNavigation', () => {
+  let component: BottomNavigation;
+  let fixture: ComponentFixture<BottomNavigation>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BottomNavigation]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BottomNavigation);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/implem/src/app/shared/navigation/bottom-navigation/bottom-navigation.ts b/implem/src/app/shared/navigation/bottom-navigation/bottom-navigation.ts
new file mode 100644
index 0000000..e7e3a46
--- /dev/null
+++ b/implem/src/app/shared/navigation/bottom-navigation/bottom-navigation.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {RouterLink} from '@angular/router';
+
+@Component({
+  selector: 'app-bottom-navigation',
+  imports: [
+    RouterLink
+  ],
+  templateUrl: './bottom-navigation.html',
+  styleUrl: './bottom-navigation.scss'
+})
+export class BottomNavigation {
+
+}