diff --git a/apps/react/src/app/components/page-layout/page-layout.scss b/apps/react/src/app/components/page-layout/page-layout.scss
index b2c09014b..3d51f5e19 100644
--- a/apps/react/src/app/components/page-layout/page-layout.scss
+++ b/apps/react/src/app/components/page-layout/page-layout.scss
@@ -1,27 +1,63 @@
 .page-layout {
-  display: grid;
-  grid-template-columns: 285px 1fr;
-  gap: 20px;
-  min-height: calc(100vh - 60px);
-  padding: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 32px 24px;
+  gap: 0;
+
+  @media (max-width: 1050px) {
+    flex-direction: column;
+    padding: 20px 24px;
+  }
 
   @media (max-width: 768px) {
-    grid-template-columns: 1fr;
-    gap: 10px;
-    padding: 10px;
+    padding: 10px 16px;
   }
 }
 
 .page-layout__left {
-  flex-direction: column;
+  position: sticky;
+  top: 20px;
+  flex-shrink: 0;
+  width: 285px;
+  margin-right: 1.5%;
+  z-index: 1001;
+
+  @media (max-width: 1300px) {
+    width: calc(23.875% * 1.04);
+  }
+
+  @media (max-width: 1050px) {
+    position: relative;
+    top: 0;
+    width: 100%;
+    margin-right: 0;
+    margin-bottom: 20px;
+  }
 }
 
 .page-layout__right {
   display: flex;
   flex-direction: column;
+  width: calc(100% - 285px - 1.5%);
+  position: relative;
+
+  @media (max-width: 1300px) {
+    width: calc(100% - calc(23.875% * 1.04) - 1.5%);
+  }
+
+  @media (max-width: 1050px) {
+    width: 100%;
+  }
 }
 
 .page-layout__header {
+  position: relative;
+  z-index: 1001;
+  padding-top: 0;
   margin-bottom: 20px;
 }
 
diff --git a/apps/react/src/app/features/online-board/components/online-board-filter.scss b/apps/react/src/app/features/online-board/components/online-board-filter.scss
index 3dfb4e19e..8384f6129 100644
--- a/apps/react/src/app/features/online-board/components/online-board-filter.scss
+++ b/apps/react/src/app/features/online-board/components/online-board-filter.scss
@@ -17,5 +17,5 @@
 }
 
 .online-board-filter .p-accordion-content {
-  padding: 5px 20px 20px 20px !important;
+  padding: 0 20px 20px 20px !important;
 }
diff --git a/apps/react/src/app/features/online-board/components/route-filter.scss b/apps/react/src/app/features/online-board/components/route-filter.scss
index a5a2f7b83..4a0bf6dd2 100644
--- a/apps/react/src/app/features/online-board/components/route-filter.scss
+++ b/apps/react/src/app/features/online-board/components/route-filter.scss
@@ -1,14 +1,14 @@
 .route-filter {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  padding: 16px 0;
+  gap: 10px;
+  padding: 20px;
 }
 
 .route-filter__group {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
 
 .route-filter__label {
@@ -16,16 +16,16 @@
   font-weight: 500;
   color: #666;
   text-transform: uppercase;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 
 .route-filter__swap {
   align-self: center;
-  margin: 8px 0 !important;
+  margin: 10px 0 !important;
 }
 
 .route-filter__search-button {
-  margin-top: 8px;
+  margin-top: 10px;
 }
 
 .route-filter__display {
@@ -45,12 +45,12 @@
 
 .route-filter__trip-options {
   display: flex;
-  gap: 16px;
+  gap: 20px;
 
   label {
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 8px;
     font-size: 14px;
     cursor: pointer;
     font-weight: normal;
@@ -83,7 +83,7 @@
 .route-filter__passenger-controls {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
   padding: 12px;
   background-color: #fafafa;
   border: 1px solid #e0e0e0;
@@ -200,7 +200,7 @@
 .route-filter__additional-segments {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
   padding: 12px;
   background-color: #fafafa;
   border: 1px solid #e0e0e0;
@@ -210,8 +210,8 @@
 .route-filter__segment {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  padding: 8px;
+  gap: 5px;
+  padding: 10px;
   background-color: #fff;
   border: 1px solid #e0e0e0;
   border-radius: 4px;