diff --git a/src/main/resources/static/images/card-list.svg b/src/main/resources/static/images/card-list.svg
new file mode 100644
index 00000000..3dc5d429
--- /dev/null
+++ b/src/main/resources/static/images/card-list.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-list" viewBox="0 0 16 16">
+  <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
+  <path d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/>
+</svg>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index e8eb4e06..10596748 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -96,9 +96,7 @@ function compareVersions(version1, version2) {
     .icon-text {
         margin-left: 4px;
     }
-    .settings-cog {
-    filter: invert(1); 
-}
+
 .nav-item-separator {
     position: relative;
     margin: 0 4px; /* Adjust the margin as needed */
@@ -113,13 +111,13 @@ function compareVersions(version1, version2) {
     width: 1px;
     background-color: #ccc; /* Adjust the color as needed */
 }
-
-#dark-mode-icon {
+.navbar-icon {
   width: 20px;
   height: 20px;
    transform: translateY(-2px);
 }
 
+
 </style>
 
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
@@ -265,7 +263,11 @@ function compareVersions(version1, version2) {
 
                   <li class="nav-item nav-item-separator"></li> 
                     <li class="nav-item dropdown" th:classappend="${currentPage}=='add-image' OR ${currentPage}=='ocr-pdf' OR ${currentPage}=='extract-images' OR ${currentPage}=='compress-pdf' ? 'active' : ''">
-                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text="#{navbar.other}"></a>
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <img class="icon" src="images/card-list.svg" alt="Security Icon" style="width: 16px; height: 16px; vertical-align: middle;"> 
+                        <span class="icon-text"  th:text="#{navbar.other}"></span>
+                        
+                        </a>
                         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                             <a class="dropdown-item" href="#" th:href="@{ocr-pdf}" th:classappend="${currentPage}=='ocr-pdf' ? 'active' : ''">
                                 <img class="icon" src="images/search.svg" alt="OCR Icon" style="width: 16px; height: 16px; vertical-align: middle;"> <span class="icon-text"  th:text="#{home.ocr.title}"></span>
@@ -287,7 +289,7 @@ function compareVersions(version1, version2) {
                 <ul class="navbar-nav ml-auto flex-nowrap">
                     <li class="nav-item">
                         <a class="nav-link" id="dark-mode-toggle" href="#">
-                          <img id="dark-mode-icon" src="moon.svg" alt="Toggle Dark Mode" />
+                          <img class="navbar-icon" id="dark-mode-icon" src="moon.svg" alt="Toggle Dark Mode" />
                         </a>
                       </li>
                    
@@ -318,9 +320,9 @@ function compareVersions(version1, version2) {
                     
                     <li class="nav-item">
                         <!-- Settings Button -->
-                        <button type="button" class="btn btn-secondary float-right" data-toggle="modal" data-target="#settingsModal">
-                            <img class="settings-cog icon" src="/images/gear.svg" alt="Settings Icon" width="15" height="15"><span class="icon-text" th:text="#{navbar.settings}"></span>
-                        </button>
+                        <a href="#" class="nav-link" data-toggle="modal" data-target="#settingsModal">
+                            <img class="navbar-icon" src="/images/gear.svg" alt="Settings Icon" width="24" height="24">
+                        </a>
 
                     </li>
                 </ul>