diff --git a/src/components/LoadingIndicator.module.css b/src/components/LoadingIndicator.module.css
index 4638be8..59bba69 100644
--- a/src/components/LoadingIndicator.module.css
+++ b/src/components/LoadingIndicator.module.css
@@ -1,6 +1,6 @@
 .load {
   border: 4px solid #f3f3f3;
-  border-top: 4px solid #99f;
+  border-top: 4px solid var(--text-color);
   border-radius: 50%;
   width: 20px;
   height: 20px;
diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index 5eb2e86..b36cf90 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -291,11 +291,11 @@ input {
 }
 
 .pageHeader {
-  background-color: var(--text-color);
-  height: 45px;
-  max-width: 100%;
-  color: black;
-  margin: 5px 0px 0px 0px;
+    background-color: var(--text-color);
+    height: 45px;
+    max-width: 98%;
+    color: black !important;
+    margin: 5px 0px 0px 0px;
 }
 
 .pageHeader h1 {
diff --git a/src/pages/ranklist.js b/src/pages/ranklist.js
index 6068c63..f2d8898 100644
--- a/src/pages/ranklist.js
+++ b/src/pages/ranklist.js
@@ -127,35 +127,43 @@ export default function RankList() {
       <Head>
         <title>Ranklista - Qmining | Frylabs.net</title>
       </Head>
-      <div>
+      <div className={'endofpage'}>      
+        <div className={styles.wrapper}>        
+        <div className={styles.sinceTable}>
+        <center>
+        <div id="rankHeader" className={'pageHeader'}>
+            <h1>Ranklista</h1>
+        </div>
+        </center>
         <div
           className={styles.infoText}
         >{`A felhasználó ID-d: #${selfUserId}`}</div>
         <div className={styles.text}>
-          Az adatok kb 2020. április eleje óta vannak gyűjtve, és azonnal
-          frissülnek.
+          <p>Az adatok kb 2020. április eleje óta vannak gyűjtve, és azonnal
+          frissülnek.</p>
         </div>
         <Sleep />
-        <div className={styles.sinceTable}>
-          <div className={styles.sinceHeaderRow}>
+          <center>
+          <label>Megjelenítés: 
+          <select className={styles.sinceHeaderRow} onChange={(e) => {
+                 console.log(e.target.value)
+                 updateSince(e.target.value)
+               }}
+             >
             {Object.keys(sinceOptions).map((key) => {
               const val = sinceOptions[key]
               return (
-                <div
-                  key={key}
-                  className={`${styles.clickable} ${key === since &&
-                    styles.selected}`}
-                  onClick={() => {
-                    updateSince(key)
-                  }}
-                >
+                <option
+                      key={key}
+                      value={key}
+                  >
                   {val.name}
-                </div>
+                </option>
               )
             })}
-          </div>
-        </div>
-        <div className={styles.table}>
+          </select>
+          </label>
+          </center>
           <div className={styles.headerRow}>
             <div>{'Rank'}</div>
             <div>{'Felhasználó ID'}</div>
@@ -175,13 +183,16 @@ export default function RankList() {
               )
             })}
           </div>
-          <div className={`${styles.row} ${styles.sumrow}`}>
-            <div />
-            <div>{'Összesen'}</div>
-            <div>{sum.newQuestions}</div>
-            <div>{sum.allQuestions}</div>
-            <div>{sum.count}</div>
-          </div>
+        <div className={`${styles.row} ${styles.sumrow}`}>
+                <div />
+                <div>{'Összesen'}</div>
+                <div>{sum.newQuestions}</div>
+                <div>{sum.allQuestions}</div>
+                <div>{sum.count}</div>
+                </div>
+        </div>
+        <div className={styles.table}>          
+          
           {list ? (
             list.map((listItem, i) => {
               return (
@@ -203,6 +214,7 @@ export default function RankList() {
             <LoadingIndicator />
           )}
         </div>
+        </div>
       </div>
     </div>
   )
diff --git a/src/pages/ranklist.module.css b/src/pages/ranklist.module.css
index b440043..657a9c9 100644
--- a/src/pages/ranklist.module.css
+++ b/src/pages/ranklist.module.css
@@ -1,81 +1,108 @@
-.table,
-.sinceTable {
-  display: flex;
-  flex-direction: column;
-  padding: 0px 10px;
+.wrapper {
+    position: relative;
+    margin-top: -9px;
 }
 
-.table :nth-child(1),
-.sinceTable :nth-child(1) {
-  color: white;
+.table {
+    margin-top: 278px;
+    background-color: #1f2021;
 }
 
+.sinceTable {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    padding-top: 10px;
+    padding-left: 5px;
+    background-color: var(--background-color);
+    width: 87%;
+    top: 0;
+}
+
+.sinceHeaderRow {
+    display: flex;
+    width: 10%;
+    border-radius: 5px;
+    border: 1.5px solid white;
+    background-color: #999999;
+}
+
+    .sinceHeaderRow:hover {
+        border: 1.5px solid var(--text-color);
+    }
+
 .row,
-.headerRow,
-.sinceHeaderRow {
-  display: flex;
-  padding: 1px;
+.headerRow {
+    display: flex;
+    padding: 1px;
 }
 
-.row:hover {
-  background-color: #333333;
-}
+    .row:hover {
+        background-color: #191919;
+        cursor: default;
+        text-shadow: 1px 1px 6px gray;
+        color: var(--text-color);
+    }
 
-.row div,
-.headerRow div,
-.sinceHeaderRow div {
-  flex: 1;
-  padding: 0px 5px;
-  text-align: center;
-}
+    .row div,
+    .headerRow div,
+    .sinceHeaderRow div {
+        flex: 1;
+        padding: 0px 5px;
+        text-align: center;
+    }
 
-.headerRow div,
-.sinceHeaderRow div {
-  padding: 15px 5px;
-}
+    .headerRow div,
+    .sinceHeaderRow div {
+        padding: 15px 5px;
+    }
 
-.row :nth-child(1),
-.headerRow :nth-child(1) {
-  flex: 0 30px;
-}
+    .row :nth-child(1),
+    .headerRow :nth-child(1) {
+        flex: 0 30px;
+    }
 
-.row :nth-child(2),
-.headerRow :nth-child(2) {
-  flex: 0 100px;
-  text-align: left;
-}
+    .row :nth-child(2),
+    .headerRow :nth-child(2) {
+        flex: 0 100px;
+        text-align: left;
+    }
 
 .clickable:hover {
-  background-color: var(--hoover-color);
+    background-color: var(--hoover-color);
 }
 
 .clickable {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .selfRow {
-  background-color: #9999ff;
-  color: black;
+    background-color: #9999ff;
+    color: black;
 }
 
-.selfRow:hover {
-  background-color: #9999ee;
-}
+    .selfRow:hover {
+        background-color: #9999ee;
+    }
 
 .text {
-  text-align: center;
-  font-size: 12px;
+    text-align: center;
+    font-size: 12px;
+    font-style: italic;
+    color: var(--text-color);
+    padding-bottom: 10px;
 }
 
 .infoText {
-  text-align: center;
-  font-size: 20px;
+    text-align: center;
+    font-size: 20px;
+    padding-top: 20px;
 }
 
 .selected {
-  background-color: #9999ff;
+    background-color: #9999ff;
 }
 
 .sumrow {
-  color: white;
+    color: white;
 }
