diff --git a/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor b/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor
index cf319b6..edca698 100644
--- a/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor
+++ b/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor
@@ -3,14 +3,11 @@
 <PageTitle>adminBlazor</PageTitle>
 
 <div class="page">
-    <div class="sidebar">
-        <NavMenu />
+    <div class="navbar">
+        <NavBar />
     </div>
 
     <main>
-        <div class="top-row px-4">
-            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
-        </div>
 
         <article class="content px-4">
             @Body
diff --git a/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor.css b/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor.css
index 1ded576..f1c12a7 100644
--- a/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor.css
+++ b/Project/adminBlazor/adminBlazor/Shared/MainLayout.razor.css
@@ -4,16 +4,24 @@
     flex-direction: column;
 }
 
+
+.content {
+    flex: 1;
+    padding: 20px;
+}
+
 main {
     flex: 1;
 }
 
-.sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+.navbar {
+    background-color: #7464a1;
+    justify-content:flex-end;
+    padding-right: 7rem;
 }
 
 .top-row {
-    background-color: #f7f7f7;
+    background-color: #7464a1;
     border-bottom: 1px solid #d6d5d5;
     justify-content: flex-end;
     height: 3.5rem;
@@ -41,25 +49,23 @@ main {
     }
 
     .top-row a, .top-row .btn-link {
-        margin-left: 0;
+        margin-left: 1rem;
     }
 }
 
 @media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
+    
 
-    .sidebar {
-        width: 250px;
-        height: 100vh;
+    .navbar {
+        width: 100vw;
+        min-height:5rem;
         position: sticky;
         top: 0;
     }
 
     .top-row {
         position: sticky;
-        top: 0;
+        top: 5rem;
         z-index: 1;
     }
 
@@ -67,5 +73,10 @@ main {
         padding-left: 2rem !important;
         padding-right: 1.5rem !important;
     }
+
+    px-4 {
+        padding-right: 1.5rem !important;
+        padding-left: 1.5rem !important;
+    }
 }
 
diff --git a/Project/adminBlazor/adminBlazor/Shared/NavBar.razor b/Project/adminBlazor/adminBlazor/Shared/NavBar.razor
index 9fd2288..808857e 100644
--- a/Project/adminBlazor/adminBlazor/Shared/NavBar.razor
+++ b/Project/adminBlazor/adminBlazor/Shared/NavBar.razor
@@ -1,24 +1,17 @@
-<div class="container px-4 px-lg-5">
-    <a class="navbar-brand" href="/">
-        <img class="logo" alt="Logo" />
-    </a>
-    <button class="navbar-toggler" @onclick="ToggleNavMenu">
-        Menu
-        <i class="fas fa-bars"></i>
-    </button>
-    <div class="collapse navbar-collapse" style="@navMenuStyle">
-        <ul class="navbar-nav ms-auto">
-            <li class="nav-item"><a class="nav-link" href="http://londres.uca.local/~lugoigoux1/SAE_2A_Anglais/Project/php/#page-top">Home</a></li>
-            <li class="nav-item"><a class="nav-link" href="http://londres.uca.local/~lugoigoux1/SAE_2A_Anglais/Project/php/#download">Download</a></li>
-            <li class="nav-item"><a class="nav-link" href="http://londres.uca.local/~lugoigoux1/SAE_2A_Anglais/Project/php/visitor/login">Log in</a></li>
-        </ul>
-    </div>
-    </div>
+
+
+<div class="navbar">
+    <a href="http://localhost/SAE_2A_Anglais/Project/php/#page-top">Accueil</a>
+    <a href="/list">Users</a>
+    <a href="/account">My Account</a>
+    <a href="/voc">Vocabulary Lists</a>
+</div>
+
 
 @code {
     private bool isNavMenuVisible = false;
 
-    private string navMenuStyle => isNavMenuVisible ? "display: flex;" : "display: none;";
+    private string navMenuStyle => isNavMenuVisible ? "display: flex;" : "display: show;";
 
     private void ToggleNavMenu()
     {
diff --git a/Project/adminBlazor/adminBlazor/Shared/NavBar.razor.css b/Project/adminBlazor/adminBlazor/Shared/NavBar.razor.css
index 525ee40..d7be557 100644
--- a/Project/adminBlazor/adminBlazor/Shared/NavBar.razor.css
+++ b/Project/adminBlazor/adminBlazor/Shared/NavBar.razor.css
@@ -1,644 +1,20 @@
-.container,
-.container-fluid,
-.container-xxl,
-.container-xl,
-.container-lg,
-.container-md,
-.container-sm {
-    --bs-gutter-x: 1.5rem;
-    --bs-gutter-y: 0;
-    width: 100%;
-    padding-right: calc(var(--bs-gutter-x) * 0.5);
-    padding-left: calc(var(--bs-gutter-x) * 0.5);
-    margin-right: auto;
-    margin-left: auto;
-}
-
-@media (min-width: 576px) {
-    .container-sm, .container {
-        max-width: 540px;
-    }
-}
-
-@media (min-width: 768px) {
-    .container-md, .container-sm, .container {
-        max-width: 720px;
-    }
-}
-
-@media (min-width: 992px) {
-    .container-lg, .container-md, .container-sm, .container {
-        max-width: 960px;
-    }
-}
-
-@media (min-width: 1200px) {
-    .container-xl, .container-lg, .container-md, .container-sm, .container {
-        max-width: 1140px;
-    }
-}
-
-@media (min-width: 1400px) {
-    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
-        max-width: 1320px;
-    }
-}
-
-.navbar > .container,
-.navbar > .container-fluid,
-.navbar > .container-sm,
-.navbar > .container-md,
-.navbar > .container-lg,
-.navbar > .container-xl,
-.navbar > .container-xxl {
-    display: flex;
-    flex-wrap: inherit;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.navbar-brand {
-    padding-top: var(--bs-navbar-brand-padding-y);
-    padding-bottom: var(--bs-navbar-brand-padding-y);
-    margin-right: var(--bs-navbar-brand-margin-end);
-    font-size: var(--bs-navbar-brand-font-size);
-    color: var(--bs-navbar-brand-color);
-    text-decoration: none;
-    white-space: nowrap;
-}
-
-    .navbar-brand:hover, .navbar-brand:focus {
-        color: var(--bs-navbar-brand-hover-color);
-    }
-
-.navbar-nav {
-    --bs-nav-link-padding-x: 0;
-    --bs-nav-link-padding-y: 0.5rem;
-    --bs-nav-link-font-weight:;
-    --bs-nav-link-color: var(--bs-navbar-color);
-    --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
-    --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
-    display: flex;
-    flex-direction: column;
-    padding-left: 0;
-    margin-bottom: 0;
-    list-style: none;
-}
-
-    .navbar-nav .show > .nav-link,
-    .navbar-nav .nav-link.active {
-        color: var(--bs-navbar-active-color);
-    }
-
-    .navbar-nav .dropdown-menu {
-        position: static;
-    }
-
-.navbar-text {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    color: var(--bs-navbar-color);
-}
-
-    .navbar-text a,
-    .navbar-text a:hover,
-    .navbar-text a:focus {
-        color: var(--bs-navbar-active-color);
-    }
-
-.navbar-collapse {
-    flex-basis: 100%;
-    flex-grow: 1;
-    align-items: center;
-}
-
-.navbar-toggler {
-    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
-    font-size: var(--bs-navbar-toggler-font-size);
-    line-height: 1;
-    color: var(--bs-navbar-color);
-    background-color: transparent;
-    border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
-    border-radius: var(--bs-navbar-toggler-border-radius);
-    transition: var(--bs-navbar-toggler-transition);
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .navbar-toggler {
-        transition: none;
-    }
-}
-
-.navbar-toggler:hover {
-    text-decoration: none;
-}
-
-.navbar-toggler:focus {
-    text-decoration: none;
-    outline: 0;
-    box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
-}
-
-.navbar-toggler-icon {
-    display: inline-block;
-    width: 1.5em;
-    height: 1.5em;
-    vertical-align: middle;
-    background-image: var(--bs-navbar-toggler-icon-bg);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 100%;
-}
-
-.navbar-nav-scroll {
-    max-height: var(--bs-scroll-height, 75vh);
-    overflow-y: auto;
-}
-
-@media (min-width: 576px) {
-    .navbar-expand-sm {
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-    }
-
-        .navbar-expand-sm .navbar-nav {
-            flex-direction: row;
-        }
-
-            .navbar-expand-sm .navbar-nav .dropdown-menu {
-                position: absolute;
-            }
-
-            .navbar-expand-sm .navbar-nav .nav-link {
-                padding-right: var(--bs-navbar-nav-link-padding-x);
-                padding-left: var(--bs-navbar-nav-link-padding-x);
-            }
-
-        .navbar-expand-sm .navbar-nav-scroll {
-            overflow: visible;
-        }
-
-        .navbar-expand-sm .navbar-collapse {
-            display: flex !important;
-            flex-basis: auto;
-        }
-
-        .navbar-expand-sm .navbar-toggler {
-            display: none;
-        }
-
-        .navbar-expand-sm .offcanvas {
-            position: static;
-            z-index: auto;
-            flex-grow: 1;
-            width: auto !important;
-            height: auto !important;
-            visibility: visible !important;
-            background-color: transparent !important;
-            border: 0 !important;
-            transform: none !important;
-            transition: none;
-        }
-
-            .navbar-expand-sm .offcanvas .offcanvas-header {
-                display: none;
-            }
-
-            .navbar-expand-sm .offcanvas .offcanvas-body {
-                display: flex;
-                flex-grow: 0;
-                padding: 0;
-                overflow-y: visible;
-            }
-}
-
-@media (min-width: 768px) {
-    .navbar-expand-md {
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-    }
-
-        .navbar-expand-md .navbar-nav {
-            flex-direction: row;
-        }
-
-            .navbar-expand-md .navbar-nav .dropdown-menu {
-                position: absolute;
-            }
-
-            .navbar-expand-md .navbar-nav .nav-link {
-                padding-right: var(--bs-navbar-nav-link-padding-x);
-                padding-left: var(--bs-navbar-nav-link-padding-x);
-            }
-
-        .navbar-expand-md .navbar-nav-scroll {
-            overflow: visible;
-        }
-
-        .navbar-expand-md .navbar-collapse {
-            display: flex !important;
-            flex-basis: auto;
-        }
-
-        .navbar-expand-md .navbar-toggler {
-            display: none;
-        }
-
-        .navbar-expand-md .offcanvas {
-            position: static;
-            z-index: auto;
-            flex-grow: 1;
-            width: auto !important;
-            height: auto !important;
-            visibility: visible !important;
-            background-color: transparent !important;
-            border: 0 !important;
-            transform: none !important;
-            transition: none;
-        }
-
-            .navbar-expand-md .offcanvas .offcanvas-header {
-                display: none;
-            }
-
-            .navbar-expand-md .offcanvas .offcanvas-body {
-                display: flex;
-                flex-grow: 0;
-                padding: 0;
-                overflow-y: visible;
-            }
-}
-
-@media (min-width: 992px) {
-    .navbar-expand-lg {
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-    }
-
-        .navbar-expand-lg .navbar-nav {
-            flex-direction: row;
-        }
-
-            .navbar-expand-lg .navbar-nav .dropdown-menu {
-                position: absolute;
-            }
-
-            .navbar-expand-lg .navbar-nav .nav-link {
-                padding-right: var(--bs-navbar-nav-link-padding-x);
-                padding-left: var(--bs-navbar-nav-link-padding-x);
-            }
-
-        .navbar-expand-lg .navbar-nav-scroll {
-            overflow: visible;
-        }
-
-        .navbar-expand-lg .navbar-collapse {
-            display: flex !important;
-            flex-basis: auto;
-        }
-
-        .navbar-expand-lg .navbar-toggler {
-            display: none;
-        }
-
-        .navbar-expand-lg .offcanvas {
-            position: static;
-            z-index: auto;
-            flex-grow: 1;
-            width: auto !important;
-            height: auto !important;
-            visibility: visible !important;
-            background-color: transparent !important;
-            border: 0 !important;
-            transform: none !important;
-            transition: none;
-        }
-
-            .navbar-expand-lg .offcanvas .offcanvas-header {
-                display: none;
-            }
-
-            .navbar-expand-lg .offcanvas .offcanvas-body {
-                display: flex;
-                flex-grow: 0;
-                padding: 0;
-                overflow-y: visible;
-            }
-}
-
-@media (min-width: 1200px) {
-    .navbar-expand-xl {
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-    }
-
-        .navbar-expand-xl .navbar-nav {
-            flex-direction: row;
-        }
-
-            .navbar-expand-xl .navbar-nav .dropdown-menu {
-                position: absolute;
-            }
-
-            .navbar-expand-xl .navbar-nav .nav-link {
-                padding-right: var(--bs-navbar-nav-link-padding-x);
-                padding-left: var(--bs-navbar-nav-link-padding-x);
-            }
-
-        .navbar-expand-xl .navbar-nav-scroll {
-            overflow: visible;
-        }
-
-        .navbar-expand-xl .navbar-collapse {
-            display: flex !important;
-            flex-basis: auto;
-        }
-
-        .navbar-expand-xl .navbar-toggler {
-            display: none;
-        }
-
-        .navbar-expand-xl .offcanvas {
-            position: static;
-            z-index: auto;
-            flex-grow: 1;
-            width: auto !important;
-            height: auto !important;
-            visibility: visible !important;
-            background-color: transparent !important;
-            border: 0 !important;
-            transform: none !important;
-            transition: none;
-        }
-
-            .navbar-expand-xl .offcanvas .offcanvas-header {
-                display: none;
-            }
-
-            .navbar-expand-xl .offcanvas .offcanvas-body {
-                display: flex;
-                flex-grow: 0;
-                padding: 0;
-                overflow-y: visible;
-            }
-}
-
-@media (min-width: 1400px) {
-    .navbar-expand-xxl {
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-    }
-
-        .navbar-expand-xxl .navbar-nav {
-            flex-direction: row;
-        }
-
-            .navbar-expand-xxl .navbar-nav .dropdown-menu {
-                position: absolute;
-            }
-
-            .navbar-expand-xxl .navbar-nav .nav-link {
-                padding-right: var(--bs-navbar-nav-link-padding-x);
-                padding-left: var(--bs-navbar-nav-link-padding-x);
-            }
-
-        .navbar-expand-xxl .navbar-nav-scroll {
-            overflow: visible;
-        }
-
-        .navbar-expand-xxl .navbar-collapse {
-            display: flex !important;
-            flex-basis: auto;
-        }
-
-        .navbar-expand-xxl .navbar-toggler {
-            display: none;
-        }
-
-        .navbar-expand-xxl .offcanvas {
-            position: static;
-            z-index: auto;
-            flex-grow: 1;
-            width: auto !important;
-            height: auto !important;
-            visibility: visible !important;
-            background-color: transparent !important;
-            border: 0 !important;
-            transform: none !important;
-            transition: none;
-        }
-
-            .navbar-expand-xxl .offcanvas .offcanvas-header {
-                display: none;
-            }
-
-            .navbar-expand-xxl .offcanvas .offcanvas-body {
-                display: flex;
-                flex-grow: 0;
-                padding: 0;
-                overflow-y: visible;
-            }
-}
-
-.navbar-expand {
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-}
-
-    .navbar-expand .navbar-nav {
-        flex-direction: row;
-    }
-
-        .navbar-expand .navbar-nav .dropdown-menu {
-            position: absolute;
-        }
-
-        .navbar-expand .navbar-nav .nav-link {
-            padding-right: var(--bs-navbar-nav-link-padding-x);
-            padding-left: var(--bs-navbar-nav-link-padding-x);
-        }
-
-    .navbar-expand .navbar-nav-scroll {
-        overflow: visible;
-    }
-
-    .navbar-expand .navbar-collapse {
-        display: flex !important;
-        flex-basis: auto;
-    }
-
-    .navbar-expand .navbar-toggler {
-        display: none;
-    }
-
-    .navbar-expand .offcanvas {
-        position: static;
-        z-index: auto;
-        flex-grow: 1;
-        width: auto !important;
-        height: auto !important;
-        visibility: visible !important;
-        background-color: transparent !important;
-        border: 0 !important;
-        transform: none !important;
-        transition: none;
-    }
-
-        .navbar-expand .offcanvas .offcanvas-header {
-            display: none;
-        }
-
-        .navbar-expand .offcanvas .offcanvas-body {
-            display: flex;
-            flex-grow: 0;
-            padding: 0;
-            overflow-y: visible;
-        }
-
-.navbar-dark {
-    --bs-navbar-color: rgba(255, 255, 255, 0.55);
-    --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
-    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
-    --bs-navbar-active-color: #fff;
-    --bs-navbar-brand-color: #fff;
-    --bs-navbar-brand-hover-color: #fff;
-    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
-    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-}
-
-.px-4 {
-    padding-right: 1.5rem !important;
-    padding-left: 1.5rem !important;
-}
-
-.px-lg-5 {
-    padding-right: 3rem !important;
-    padding-left: 3rem !important;
+body {
+    margin-right: 0;
+    font-family: Arial, sans-serif;
 }
 
 .navbar {
-    --bs-navbar-padding-x: 0;
-    --bs-navbar-padding-y: 0.5rem;
-    --bs-navbar-color: rgba(0, 0, 0, 0.55);
-    --bs-navbar-hover-color: rgba(0, 0, 0, 0.7);
-    --bs-navbar-disabled-color: rgba(0, 0, 0, 0.3);
-    --bs-navbar-active-color: rgba(0, 0, 0, 0.9);
-    --bs-navbar-brand-padding-y: 0.3125rem;
-    --bs-navbar-brand-margin-end: 1rem;
-    --bs-navbar-brand-font-size: 1.25rem;
-    --bs-navbar-brand-color: rgba(0, 0, 0, 0.9);
-    --bs-navbar-brand-hover-color: rgba(0, 0, 0, 0.9);
-    --bs-navbar-nav-link-padding-x: 0.5rem;
-    --bs-navbar-toggler-padding-y: 0.25rem;
-    --bs-navbar-toggler-padding-x: 0.75rem;
-    --bs-navbar-toggler-font-size: 1.25rem;
-    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
-    --bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
-    --bs-navbar-toggler-border-radius: 0.375rem;
-    --bs-navbar-toggler-focus-width: 0.25rem;
-    --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
+    background-color: #7464a1;
+    padding: 15px;
+    color: #fff; 
 }
 
-.logo {
-    margin-top: 10%;
-    max-height: 8vh;
-}
-
-#mainNav {
-    min-height: 3.5rem;
-    background-color: transparent;
-}
-
-    #mainNav .navbar-toggler {
-        font-size: 80%;
-        padding: 0.75rem;
-        color: #64a19d;
-        border: 1px solid #64a19d;
-    }
-
-        #mainNav .navbar-toggler:focus {
-            outline: none;
-        }
-
-    #mainNav .navbar-brand {
-        color: #000;
-        font-weight: 700;
-        padding: 0.9rem 0;
-    }
-
-    #mainNav .navbar-nav .nav-item:hover {
-        color: #faf4e0;
-        outline: none;
-        background-color: transparent;
-    }
-
-    #mainNav .navbar-nav .nav-item:active, #mainNav .navbar-nav .nav-item:focus {
-        outline: none;
-        background-color: transparent;
+    .navbar a {
+        color: #fff; 
+        text-decoration: none;
+        margin: 0 15px;
     }
 
-@media (min-width: 992px) {
-    #mainNav {
-        padding-top: 0;
-        padding-bottom: 0;
-        border-bottom: none;
-        transition: background-color 0.3s ease-in-out;
+    .navbar a:hover {
+        color: #463c61;
     }
-
-        #mainNav .navbar-brand {
-            padding: 0.5rem 0;
-            color: #000;
-        }
-
-        #mainNav .nav-link {
-            transition: none;
-            padding: 2rem 1.5rem;
-            color: #fff;
-        }
-
-            #mainNav .nav-link:hover {
-                color: #faf4e0;
-            }
-
-            #mainNav .nav-link:active {
-                color: #fff;
-            }
-
-        #mainNav.navbar-shrink {
-            background-color: #fff;
-        }
-
-            #mainNav.navbar-shrink .navbar-brand {
-                color: #000;
-            }
-
-            #mainNav.navbar-shrink .nav-link {
-                color: #000;
-                padding: 1.5rem 1.5rem 1.25rem;
-                border-bottom: 0.25rem solid transparent;
-            }
-
-                #mainNav.navbar-shrink .nav-link:hover {
-                    color: #64a19d;
-                }
-
-                #mainNav.navbar-shrink .nav-link:active {
-                    color: #467370;
-                }
-
-                #mainNav.navbar-shrink .nav-link.active {
-                    color: #64a19d;
-                    outline: none;
-                    border-bottom: 0.25rem solid #64a19d;
-                }
-}
-
-.ms-auto {
-    margin-left: auto !important;
-}
diff --git a/Project/adminBlazor/adminBlazor/Shared/NavMenu.razor b/Project/adminBlazor/adminBlazor/Shared/NavMenu.razor
index bb2bdef..9c500e4 100644
--- a/Project/adminBlazor/adminBlazor/Shared/NavMenu.razor
+++ b/Project/adminBlazor/adminBlazor/Shared/NavMenu.razor
@@ -9,26 +9,16 @@
 
 <div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
     <nav class="flex-column">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="list" Match="NavLinkMatch.All">
-                <span class="oi oi-list-rich" aria-hidden="true"></span> List
-            </NavLink>
-        </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                 <span class="oi oi-home" aria-hidden="true"></span> Home
             </NavLink>
         </div>
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="oi oi-plus" aria-hidden="true"></span> Counter
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="fetchdata">
-                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
+            <NavLink class="nav-link" href="list" Match="NavLinkMatch.All">
+                <span class="oi oi-list-rich" aria-hidden="true"></span> List
             </NavLink>
-        </div>
+        </div>         
 
     </nav>
 </div>