diff --git a/itenium-socks/src/app/layout/header.component.html b/itenium-socks/src/app/layout/header.component.html
index 33bd0da..2194d30 100644
--- a/itenium-socks/src/app/layout/header.component.html
+++ b/itenium-socks/src/app/layout/header.component.html
@@ -1,7 +1,7 @@
 <div class="hero_area" style="margin-bottom: 36px">
   <header class="header_section">
     <nav class="navbar navbar-expand-lg custom_nav-container">
-      <a class="navbar-brand" routerLink="/">
+      <a class="navbar-brand" routerLink="/home">
         <span>Toe-tally Amazing</span>
       </a>
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -11,15 +11,15 @@
       <div class="collapse navbar-collapse innerpage_navbar" id="navbarSupportedContent">
         <ul class="navbar-nav">
           <li class="nav-item">
-            <a class="nav-link" routerLink="/">Home</a>
+            <a class="nav-link" routerLinkActive="active" routerLink="/home">Home</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" routerLink="/socks">
+            <a class="nav-link" routerLinkActive="active" routerLink="/socks">
               Shop
             </a>
           </li>
           <li class="nav-item">
-            <a class="nav-link active" routerLink="/why-us">
+            <a class="nav-link" routerLinkActive="active" routerLink="/why-us">
               <span class="sr-only">(current)</span>Why Us
             </a>
           </li>
diff --git a/itenium-socks/src/app/layout/header.component.ts b/itenium-socks/src/app/layout/header.component.ts
index 55ef036..526af13 100644
--- a/itenium-socks/src/app/layout/header.component.ts
+++ b/itenium-socks/src/app/layout/header.component.ts
@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
+import {RouterLink, RouterLinkActive} from '@angular/router';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [RouterLink],
+  imports: [RouterLink, RouterLinkActive],
   templateUrl: './header.component.html'
 })
 export class HeaderComponent {}