diff --git a/src/pages/ranklist.js b/src/pages/ranklist.js
index f7218ad..692edb1 100644
--- a/src/pages/ranklist.js
+++ b/src/pages/ranklist.js
@@ -127,92 +127,102 @@ export default function RankList() {
       <Head>
         <title>Ranklista - Qmining | Frylabs.net</title>
       </Head>
-      <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}>
-              <p>
-                Az adatok kb 2020. április eleje óta vannak gyűjtve, és azonnal
-                frissülnek.
-              </p>
+      <div className={styles.container}>
+        <div>
+          <center>
+            <div id="rankHeader" className={'pageHeader'}>
+              <h1>Ranklista</h1>
             </div>
-            <Sleep />
-            <div className={styles.timeRangeSelect}>
-              <div>Megjelenítés:</div>
-              <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 (
-                    <option key={key} value={key}>
-                      {val.name}
-                    </option>
-                  )
-                })}
-              </select>
-            </div>
-            <div className={styles.headerRow}>
-              <div>{'Rank'}</div>
-              <div>{'Felhasználó ID'}</div>
-              {Object.keys(selectOptions).map((listKey) => {
-                const val = selectOptions[listKey]
+          </center>
+          <div
+            className={styles.infoText}
+          >{`A felhasználó ID-d: #${selfUserId}`}</div>
+          <div className={styles.text}>
+            <p>
+              Az adatok kb 2020. április eleje óta vannak gyűjtve, és azonnal
+              frissülnek.
+            </p>
+          </div>
+          <Sleep />
+          <div className={styles.selectContainer}>
+            <div>Megjelenítés:</div>
+            <select
+              onChange={(e) => {
+                updateSince(e.target.value)
+              }}
+            >
+              {Object.keys(sinceOptions).map((key) => {
+                const val = sinceOptions[key]
                 return (
-                  <div
-                    className={`${styles.clickable} ${listKey === key &&
-                      styles.selected}`}
-                    key={listKey}
-                    onClick={() => {
-                      setKey(listKey)
-                    }}
-                  >
+                  <option key={key} value={key}>
                     {val.name}
-                  </div>
+                  </option>
                 )
               })}
-            </div>
-            <div className={`${styles.row} ${styles.sumrow}`}>
-              <div />
-              <div>{'Összesen'}</div>
-              <div>{sum.newQuestions}</div>
-              <div>{sum.allQuestions}</div>
-              <div>{sum.count}</div>
-            </div>
+            </select>
           </div>
-          <div className={styles.table}>
-            {list ? (
-              list.map((listItem, i) => {
+          <div className={styles.selectContainer}>
+            <div>Rendezés:</div>
+            <select
+              value={key}
+              onChange={(e) => {
+                setKey(e.target.value)
+              }}
+            >
+              {Object.keys(selectOptions).map((key) => {
+                const val = selectOptions[key]
                 return (
-                  <div
-                    className={`${styles.row} ${listItem.userId ===
-                      selfUserId && styles.selfRow}`}
-                    key={i}
-                  >
-                    <div>{i + 1}</div>
-                    <div>{'#' + listItem.userId}</div>
-                    {Object.keys(selectOptions).map((listKey) => {
-                      const val = listItem[listKey]
-                      return <div key={listKey}>{val}</div>
-                    })}
-                  </div>
+                  <option key={key} value={key}>
+                    {val.name}
+                  </option>
                 )
-              })
-            ) : (
-              <LoadingIndicator />
-            )}
+              })}
+            </select>
           </div>
+          <div className={styles.headerRow}>
+            <div>{'Rank'}</div>
+            <div>{'Felhasználó ID'}</div>
+            {Object.keys(selectOptions).map((listKey) => {
+              const val = selectOptions[listKey]
+              return (
+                <div
+                  className={`${listKey === key && styles.selected}`}
+                  key={listKey}
+                >
+                  {val.name}
+                </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 (
+                <div
+                  className={`${styles.row} ${listItem.userId === selfUserId &&
+                    styles.selfRow}`}
+                  key={i}
+                >
+                  <div>{i + 1}</div>
+                  <div>{'#' + listItem.userId}</div>
+                  {Object.keys(selectOptions).map((listKey) => {
+                    const val = listItem[listKey]
+                    return <div key={listKey}>{val}</div>
+                  })}
+                </div>
+              )
+            })
+          ) : (
+            <LoadingIndicator />
+          )}
         </div>
       </div>
     </div>
diff --git a/src/pages/ranklist.module.css b/src/pages/ranklist.module.css
index 583dc35..3722c83 100644
--- a/src/pages/ranklist.module.css
+++ b/src/pages/ranklist.module.css
@@ -1,51 +1,20 @@
-.wrapper {
-  position: relative;
-  margin-top: -9px;
+.container {
+  display: flex;
+  flex-flow: column;
+  height: calc(98vh);
+}
+
+.container:first-child {
+  flex: 0 1 auto;
 }
 
 .table {
-  margin-top: 278px;
+  flex: 1 1 auto;
+  overflow-y: scroll;
+  overflow-x: hidden;
   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;
-}
-
-select.sinceHeaderRow {
-  display: flex;
-  width: 10%;
-  border-radius: 5px;
-  border: 1.5px solid white;
-  background-color: #999999;
-  font-family: inherit;
-  font-weight: 500;
-  padding-left: 4px;
-  padding-top: 2px;
-}
-
-.sinceHeaderRow:hover {
-  border: 1.5px solid var(--text-color);
-}
-select.sinceHeaderRow:hover {
-  border: 1.5px solid var(--text-color);
-}
-
 .row,
 .headerRow {
   display: flex;
@@ -60,16 +29,14 @@ select.sinceHeaderRow:hover {
 }
 
 .row div,
-.headerRow div,
-.sinceHeaderRow div {
+.headerRow div {
   flex: 1;
   padding: 0px 5px;
   text-align: center;
 }
 
-.headerRow div,
-.sinceHeaderRow div {
-  padding: 15px 5px;
+.headerRow > div {
+  padding: 5px;
 }
 
 .row :nth-child(1),
@@ -79,7 +46,7 @@ select.sinceHeaderRow:hover {
 
 .row :nth-child(2),
 .headerRow :nth-child(2) {
-  flex: 0 100px;
+  flex: 0 130px;
   text-align: left;
 }
 
@@ -92,7 +59,7 @@ select.sinceHeaderRow:hover {
 }
 
 .selfRow {
-  background-color: #9999ff;
+  background-color: var(--text-color);
   color: black;
 }
 
@@ -115,19 +82,23 @@ select.sinceHeaderRow:hover {
 }
 
 .selected {
-  background-color: #9999ff;
+  background-color: #222;
 }
 
 .sumrow {
   color: white;
 }
 
-.timeRangeSelect {
+.selectContainer {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.timeRangeSelect > div {
+.selectContainer > select {
+  width: 30%;
+}
+
+.selectContainer > div {
   padding: 0px 5px;
 }
