diff --git a/src/components/Buttons/Darkmode.js b/src/components/Buttons/Darkmode.js
index 924937c..b5e04b4 100644
--- a/src/components/Buttons/Darkmode.js
+++ b/src/components/Buttons/Darkmode.js
@@ -1,15 +1,24 @@
 import React, { useContext } from "react";
 import { ThemeContext } from "../../Context/themeContext";
-import sol from "../../Sun.png";
-import lua from "../../Moon.png";
+import SunIcon from "../../Sun.png";
+import MoonIcon from "../../Moon.png";
 
-function Darkmode() {
+const Darkmode = () => {
   const { theme } = useContext(ThemeContext);
-  return theme.mode === "light" ? (
-    <img src={lua} alt="lua icone" className="w-10"></img>
-  ) : (
-    <img src={sol} alt="sol icone" className="w-10"></img>
+  const isLightMode = theme.mode === "light";
+
+  return (
+    <button
+      aria-label={`Switch to ${isLightMode ? "dark" : "light"} mode`}
+      className="w-10 h-10 focus:outline-none"
+    >
+      <img
+        src={isLightMode ? MoonIcon : SunIcon}
+        alt={isLightMode ? "Moon icon" : "Sun icon"}
+        className="w-full h-full object-contain transition-transform duration-300 hover:scale-110"
+      />
+    </button>
   );
-}
+};
 
 export default Darkmode;
diff --git a/src/components/Header.js b/src/components/Header.js
index b1bad5f..785f02d 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -39,7 +39,7 @@ const Header = ({ language, setLanguage, setInputSearch }) => {
 
   return (
     <Navbar id="header">
-      <Container className=" flex lg:flex-row flex-col  justify-center items-center  w-full px-4">
+      <Container className=" flex lg:flex-row flex-col justify-start items-center  w-full px-8">
         <Navbar.Brand href="/" className="d-none d-sm-block ">
           {theme.mode === "light" ? (
             <img src={logo_white} alt="Logo" className="w-24 h-24"></img>
@@ -81,9 +81,9 @@ const Header = ({ language, setLanguage, setInputSearch }) => {
           <div
             onClick={changeTheme}
             className={
-              "cursor-pointer max-lg:!hidden hover:scale-105 transition-all ease-linear duration-200"
+              "cursor-pointer max-lg:hidden hover:scale-100 transition-all ease duration-300"
             }
-            style={{ fontSize: "1.5rem" }}
+            style={{ fontSize: "1.6rem" }}
             aria-hidden="true"
           >
             <Darkmode />
diff --git a/src/components/Navigation.css b/src/components/Navigation.css
index a1599b8..4e517f1 100644
--- a/src/components/Navigation.css
+++ b/src/components/Navigation.css
@@ -1,37 +1,35 @@
+/* ========================
+   Navigation Bar Styles
+   ======================== */
 .nav {
   width: 100%;
+  display: flex; /* ensure flex layout */
   flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
-  padding: 0.5rem 0rem 0.5rem 0rem;
+  padding: 0.5rem 0; /* simplified shorthand */
 }
 
+/* Button container inside nav */
 .nav__buttons {
   display: flex;
   width: auto;
-}
-
-.nav__buttons > * {
-  margin-left: 0.5rem;
+  gap: 0.5rem; /* use gap instead of margin for better spacing */
 }
 
 /* Mobile Breakpoints */
-/* Use 768 instead of 576 since Pagination can get wide */
 @media (max-width: 768px) {
   .nav {
-    flex-direction: column;
+    flex-direction: column; /* stack vertically on small screens */
   }
 
-  .nav__buttons > * {
-    margin-top: 0.5rem;
-  }
-
-  .nav__buttons > :first-child {
-    margin-left: 0rem;
+  .nav__buttons {
+    flex-direction: column;
+    gap: 0.5rem; /* consistent spacing */
   }
 }
 
-/* Helpers */
+/* Utility Class: Remove default padding/margin */
 .noBuff {
   padding: 0;
   margin: 0;