diff --git a/react-ystemandchess/src/App.tsx b/react-ystemandchess/src/App.tsx
index 53281882..94317b6d 100644
--- a/react-ystemandchess/src/App.tsx
+++ b/react-ystemandchess/src/App.tsx
@@ -142,7 +142,7 @@ function App() {
    */
   return (
     <Router>
-      <div className="App flex flex-col min-h-screen">
+      <div className="App pt-24 flex flex-col min-h-screen">
         <NavBar />
         <main className="flex-1">
           <AppRoutes />
diff --git a/react-ystemandchess/src/components/navbar/NavBar.tsx b/react-ystemandchess/src/components/navbar/NavBar.tsx
index de5b720f..fc8d07aa 100644
--- a/react-ystemandchess/src/components/navbar/NavBar.tsx
+++ b/react-ystemandchess/src/components/navbar/NavBar.tsx
@@ -376,7 +376,7 @@ const NavBar = () => {
   );
 
   return (
-    <header className="bg-light border-b-2 border-dark sticky top-0 z-50">
+    <header className="fixed top-0 left-0 right-0 w-full bg-light border-b-2 border-dark z-50">
       <div className="max-w-full mx-auto">
         <div className="flex justify-between items-center h-24 pr-8">
           
diff --git a/react-ystemandchess/src/features/lessons/lessons-main/Lessons.module.scss b/react-ystemandchess/src/features/lessons/lessons-main/Lessons.module.scss
index 2dc42d06..5761d16f 100644
--- a/react-ystemandchess/src/features/lessons/lessons-main/Lessons.module.scss
+++ b/react-ystemandchess/src/features/lessons/lessons-main/Lessons.module.scss
@@ -96,28 +96,33 @@
 }
 
 .prevNextLessonButton {
-  width: 160px;
+  min-width: 160px;
   height: 60px;
   border-radius: 5px;
   color: black;
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
+  gap: 12px;
+  padding: 0 22px;
 }
 
 .prevNextLessonButtonInactive {
-  width: 160px;
+  min-width: 160px;
   height: 60px;
   border-radius: 5px;
   color: rgb(173, 169, 169);
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
+  gap: 12px;
+  padding: 0 22px;
 }
 
 .buttonDescription {
   font-size: 20px;
   font-weight: bold;
+  margin: 0;
 }
 
 .next {
diff --git a/react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/Lesson-overlay.module.scss b/react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/Lesson-overlay.module.scss
index 88e95e73..eddb9f70 100644
--- a/react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/Lesson-overlay.module.scss
+++ b/react-ystemandchess/src/features/lessons/piece-lessons/lesson-overlay/Lesson-overlay.module.scss
@@ -272,8 +272,8 @@
   padding: 0;
   position: relative;
 }
-
-.prevNextLessonButtonInactive {
+ 
+ .prevNextLessonButtonInactive {
   width: 160px;
   height: 60px;
   border-radius: 5px;
@@ -284,30 +284,29 @@
   padding: 0;
   position: relative;
 }
-
-.prevNextLessonButton svg,
-.prevNextLessonButtonInactive svg {
+ 
+ .prevNextLessonButton svg,
+ .prevNextLessonButtonInactive svg {
   width: 22px;
   height: 22px;
   position: absolute;
 }
-
-.prev svg {
+ 
+ .prev svg {
   left: 16px;
 }
-
-.next svg {
+ 
+ .next svg {
   right: 16px;
 }
-
-.buttonDescription {
+ 
+ .buttonDescription {
   font-size: 20px;
   font-weight: bold;
 }
-
-.next {
+ 
+ .next {
   background-color: var(--green-color);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }
 
 .next:hover {