diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2934ad1..5e470c1 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,3 @@
-<app-home></app-home>
+<app-navbar></app-navbar>
+<!-- <app-home></app-home> -->
+<router-outlet></router-outlet>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index f33c411..eab0f81 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
 import { HomeComponent } from './pages/home/home.component';
+import { RouterOutlet } from '@angular/router';
+import { NavbarComponent } from './components/navbar/navbar.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [HomeComponent],
+  imports: [HomeComponent, RouterOutlet, NavbarComponent],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
   title = 'TASK-NG-Routing';
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index dc39edb..6cf44cb 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,3 +1,23 @@
 import { Routes } from '@angular/router';
+import { TripsListComponent } from './pages/trips-list/trips-list.component';
+import { TripComponent } from './pages/trip/trip.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: '',
+    loadComponent: () =>
+      import('./pages/home/home.component').then((m) => m.HomeComponent),
+  },
+  {
+    path: 'trips',
+    component: TripsListComponent,
+  },
+  {
+    path: 'trips/:slug',
+    component: TripComponent,
+  },
+  {
+    path: '**',
+    redirectTo: '',
+  },
+];
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index 86bcc47..52ce9be 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -6,10 +6,10 @@
       <div class="navbar-links" id="navbarResponsive">
         <ul class="navbar-list">
           <li class="navbar-item">
-            <a href="#" class="navbar-link">Home</a>
+            <a routerLink="" class="navbar-link">Home</a>
           </li>
           <li class="navbar-item">
-            <a href="#" class="navbar-link">Trips</a>
+            <a routerLink="trips" class="navbar-link">Trips</a>
           </li>
         </ul>
       </div>
diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts
index aef9405..a997e0e 100644
--- a/src/app/components/navbar/navbar.component.ts
+++ b/src/app/components/navbar/navbar.component.ts
@@ -1,12 +1,11 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-navbar',
   standalone: true,
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './navbar.component.html',
-  styleUrl: './navbar.component.css'
+  styleUrl: './navbar.component.css',
 })
-export class NavbarComponent {
-
-}
+export class NavbarComponent {}
diff --git a/src/app/components/search-filter/search-filter.component.ts b/src/app/components/search-filter/search-filter.component.ts
index cf02263..e07abea 100644
--- a/src/app/components/search-filter/search-filter.component.ts
+++ b/src/app/components/search-filter/search-filter.component.ts
@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 import { DifficultyLevel } from '../../../data/trips';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-search-filter',
@@ -12,9 +13,18 @@ export class SearchFilterComponent {
   @Output() searchChange = new EventEmitter<string>();
   @Output() filterChange = new EventEmitter<DifficultyLevel>();
 
-  difficultyLevels: DifficultyLevel[] = ['All','Easy', 'Moderate', 'Hard'];
+  difficultyLevels: DifficultyLevel[] = ['All', 'Easy', 'Moderate', 'Hard'];
   activeFilter: DifficultyLevel = 'All';
 
+  constructor(private route: ActivatedRoute) {
+    this.route.queryParams.subscribe((params) => {
+      const difficulty = params['difficulty'] as DifficultyLevel;
+      if (difficulty && ['Easy', 'Moderate', 'Hard'].includes(difficulty)) {
+        this.activeFilter = difficulty;
+      }
+    });
+  }
+
   onSearch(event: Event) {
     const inputElement = event.target as HTMLInputElement;
     this.searchChange.emit(inputElement.value);
diff --git a/src/app/components/trip-card/trip-card.component.html b/src/app/components/trip-card/trip-card.component.html
index 0428d14..1d01c33 100644
--- a/src/app/components/trip-card/trip-card.component.html
+++ b/src/app/components/trip-card/trip-card.component.html
@@ -1,4 +1,4 @@
-<div class="trip-card-wrapper">
+<div class="trip-card-wrapper" [routerLink]="['/trips', trip.slug]">
   <div class="trip-card">
     <div class="trip-card-overlay">
       <div class="trip-card-icon">
diff --git a/src/app/components/trip-card/trip-card.component.ts b/src/app/components/trip-card/trip-card.component.ts
index eb6eee8..38f5322 100644
--- a/src/app/components/trip-card/trip-card.component.ts
+++ b/src/app/components/trip-card/trip-card.component.ts
@@ -1,10 +1,11 @@
 import { Component, Input } from '@angular/core';
 import { Trip } from '../../../data/trips';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-trip-card',
   standalone: true,
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './trip-card.component.html',
   styleUrl: './trip-card.component.css',
 })
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 08171ab..9f2c545 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -1,25 +1,4 @@
-<app-navbar></app-navbar>
-
 <app-banner
   title="Welcome To Hike"
   subtitle="a delightful way to explore nature with friends and family"
 ></app-banner>
-
-<section class="explore-section" id="portfolio">
-  <div class="explore-container">
-    <h2 class="explore-title">Explore Trips</h2>
-    <br />
-    <app-search-filter
-      (searchChange)="handleSearch($event)"
-      (filterChange)="handleFilter($event)"
-    ></app-search-filter>
-    <app-divider></app-divider>
-    <app-trips-grid
-      [trips]="filteredTrips"
-    ></app-trips-grid>
-  </div>
-</section>
-
-@if (selectedTrip) {
-<app-trip-details [trip]="selectedTrip"></app-trip-details>
-}
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index 00f224f..cb81a01 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -21,35 +21,4 @@ import { NavbarComponent } from '../../components/navbar/navbar.component';
   templateUrl: './home.component.html',
   styleUrl: './home.component.css',
 })
-export class HomeComponent {
-  trips: Trip[] = trips;
-  filteredTrips: Trip[] = [...trips];
-  selectedTrip: Trip = trips[0];
-  searchQuery: string = '';
-  activeDifficultyFilter: DifficultyLevel = 'All';
-
-  handleSearch(searchTerm: string) {
-    this.searchQuery = searchTerm.toLowerCase();
-    this.applyFilters();
-  }
-
-  handleFilter(difficulty: DifficultyLevel) {
-    this.activeDifficultyFilter = difficulty;
-    this.applyFilters();
-  }
-
-  private applyFilters() {
-    this.filteredTrips = this.trips.filter((trip) => {
-      const matchesSearch =
-        !this.searchQuery ||
-        trip.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
-        trip.city.toLowerCase().includes(this.searchQuery.toLowerCase()) 
-
-      const matchesDifficulty =
-        this.activeDifficultyFilter === 'All' ||
-        trip.difficulty === this.activeDifficultyFilter;
-
-      return matchesSearch && matchesDifficulty;
-    });
-  }
-}
+export class HomeComponent {}
diff --git a/src/app/pages/trip/trip.component.css b/src/app/pages/trip/trip.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/trip/trip.component.html b/src/app/pages/trip/trip.component.html
new file mode 100644
index 0000000..f0c9eae
--- /dev/null
+++ b/src/app/pages/trip/trip.component.html
@@ -0,0 +1,3 @@
+@if (trip) {
+<app-trip-details [trip]="trip"></app-trip-details>
+}
diff --git a/src/app/pages/trip/trip.component.spec.ts b/src/app/pages/trip/trip.component.spec.ts
new file mode 100644
index 0000000..4c19a5b
--- /dev/null
+++ b/src/app/pages/trip/trip.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TripComponent } from './trip.component';
+
+describe('TripComponent', () => {
+  let component: TripComponent;
+  let fixture: ComponentFixture<TripComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TripComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TripComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/trip/trip.component.ts b/src/app/pages/trip/trip.component.ts
new file mode 100644
index 0000000..4759594
--- /dev/null
+++ b/src/app/pages/trip/trip.component.ts
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Trip, trips } from '../../../data/trips';
+import { TripDetailsComponent } from '../../components/trip-details/trip-details.component';
+
+@Component({
+  selector: 'app-trip',
+  standalone: true,
+  imports: [TripDetailsComponent],
+  templateUrl: './trip.component.html',
+  styleUrl: './trip.component.css',
+})
+export class TripComponent {
+  trips = trips;
+  trip: Trip | undefined = this.trips[0];
+  constructor(private route: ActivatedRoute, private router: Router) {
+    const slug: string = this.route.snapshot.paramMap.get('slug')!;
+    console.log(slug);
+    this.trip = this.trips.find((trip) => trip.slug === slug.toString()); // Find the fruit by ID
+    if (!this.trip) {
+      this.router.navigate(['/trips']);
+    }
+  }
+}
diff --git a/src/app/pages/trips-list/trips-list.component.css b/src/app/pages/trips-list/trips-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/trips-list/trips-list.component.html b/src/app/pages/trips-list/trips-list.component.html
new file mode 100644
index 0000000..022da23
--- /dev/null
+++ b/src/app/pages/trips-list/trips-list.component.html
@@ -0,0 +1,13 @@
+<!-- Move this to trips-list.component.html -->
+<section class="explore-section" id="portfolio">
+  <div class="explore-container">
+    <h2 class="explore-title">Explore Trips</h2>
+    <br />
+    <app-search-filter
+      (searchChange)="handleSearch($event)"
+      (filterChange)="handleFilter($event)"
+    ></app-search-filter>
+    <app-divider></app-divider>
+    <app-trips-grid [trips]="filteredTrips"></app-trips-grid>
+  </div>
+</section>
diff --git a/src/app/pages/trips-list/trips-list.component.spec.ts b/src/app/pages/trips-list/trips-list.component.spec.ts
new file mode 100644
index 0000000..354f397
--- /dev/null
+++ b/src/app/pages/trips-list/trips-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TripsListComponent } from './trips-list.component';
+
+describe('TripsListComponent', () => {
+  let component: TripsListComponent;
+  let fixture: ComponentFixture<TripsListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TripsListComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TripsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/trips-list/trips-list.component.ts b/src/app/pages/trips-list/trips-list.component.ts
new file mode 100644
index 0000000..95dd0e5
--- /dev/null
+++ b/src/app/pages/trips-list/trips-list.component.ts
@@ -0,0 +1,60 @@
+import { Component } from '@angular/core';
+import { DifficultyLevel, Trip, trips } from '../../../data/trips';
+import { SearchFilterComponent } from '../../components/search-filter/search-filter.component';
+import { DividerComponent } from '../../components/divider/divider.component';
+import { TripsGridComponent } from '../../components/trips-grid/trips-grid.component';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-trips-list',
+  standalone: true,
+  imports: [SearchFilterComponent, DividerComponent, TripsGridComponent],
+  templateUrl: './trips-list.component.html',
+  styleUrl: './trips-list.component.css',
+})
+export class TripsListComponent {
+  trips: Trip[] = trips;
+  filteredTrips: Trip[] = [...trips];
+  // selectedTrip: Trip = trips[0];
+  searchQuery: string = '';
+  activeDifficultyFilter: DifficultyLevel = 'All';
+
+  constructor(private route: ActivatedRoute, private router: Router) {
+    this.route.queryParams.subscribe((params) => {
+      const difficulty = params['difficulty'] as DifficultyLevel;
+      if (difficulty && ['Easy', 'Moderate', 'Hard'].includes(difficulty)) {
+        this.activeDifficultyFilter = difficulty;
+        this.applyFilters();
+      }
+    });
+  }
+
+  handleSearch(searchTerm: string) {
+    this.searchQuery = searchTerm.toLowerCase();
+    this.applyFilters();
+  }
+
+  handleFilter(difficulty: DifficultyLevel) {
+    this.activeDifficultyFilter = difficulty;
+    this.router.navigate([], {
+      queryParams: { difficulty: difficulty !== 'All' ? difficulty : null },
+      queryParamsHandling: 'merge',
+    });
+    this.applyFilters();
+  }
+
+  private applyFilters() {
+    this.filteredTrips = this.trips.filter((trip) => {
+      const matchesSearch =
+        !this.searchQuery ||
+        trip.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
+        trip.city.toLowerCase().includes(this.searchQuery.toLowerCase());
+
+      const matchesDifficulty =
+        this.activeDifficultyFilter === 'All' ||
+        trip.difficulty === this.activeDifficultyFilter;
+
+      return matchesSearch && matchesDifficulty;
+    });
+  }
+}
diff --git a/src/data/trips.ts b/src/data/trips.ts
index 6d7c0ba..3187cd9 100644
--- a/src/data/trips.ts
+++ b/src/data/trips.ts
@@ -75,7 +75,7 @@ export const trips: Trip[] = [
   },
   {
     id: 6,
-    name: 'Ajloun Hike',
+    name: 'Maarij Hike',
     slug: 'ajloun-hike',
     city: 'ajloun',
     length: '30',