The header position is fixed to top of the page. Some of the colors are changed

client/src/App.css

@@ -14,7 +14,9 @@
 }
 
 .header {
-  background-color: gray;
+  position: fixed;
+  width: 100%;
+  background-color: rgb(1, 0, 34);
   min-height: 5vh;
   display: flex;
   flex-direction: row;
@@ -24,6 +26,7 @@
   color: white;
   font-size: large;
   margin: auto;
+  z-index: 10;
 }
 
 #textfield1, #textfield2, #checkbox1  {
@@ -55,6 +58,8 @@
 }
 
 table {
+  position: absolute;
+  margin-top: 5vh;
   table-layout:fixed;
   width: 100%;
   text-align: center;
@@ -62,15 +67,15 @@ table {
 
 th {
   color: white;
-  background-color: rgb(20, 16, 63);
+  background-color: rgb(38, 59, 90);
 }
 
 tr:nth-child(even) {
-  background-color: #cdd1ea;
+  background-color: #c8ddeb;
 }
 
 table, th, td {
-  border: 1px solid #cdd6ea;
+  border: 1px solid #c5d7ff;
   padding: 1em;
   overflow: visible;
   word-wrap: break-word;

client/src/components/Movies.tsx

@@ -45,7 +45,6 @@ function Movies(props: MoviesProps){
             pageStart={0}
             loadMore={() => {
                 if (MoviesStore.hasMore){
-                    if(MoviesStore.movies.length )
                     getAllMovies({ lim: MoviesStore.movies.length + 13 })
                 }
             }}