diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index 9ee7da45..e8eb4e06 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -75,6 +75,13 @@ function compareVersions(version1, version2) {
 </script>
 
 <style>
+
+    .main-icon {
+        width: 36px;
+        height: 36px;
+        vertical-align: middle;
+        transform: translateY(-2px);
+    }
     .icon {
         width: 16px;
         height: 16px;
@@ -110,6 +117,7 @@ function compareVersions(version1, version2) {
 #dark-mode-icon {
   width: 20px;
   height: 20px;
+   transform: translateY(-2px);
 }
 
 </style>
@@ -117,8 +125,12 @@ function compareVersions(version1, version2) {
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <div class="container ">
 
-            <a class="navbar-brand" href="#" th:href="@{/}" th:text="${@navBarText}"></a>
+            <a class="navbar-brand" href="#" th:href="@{/}" >
+                <img class="main-icon" src="favicon.svg" alt="Page Operations Icon">
+                <span class="icon-text"  th:text="${@navBarText}"></span>
+            </a>
 
+         
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>