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;