diff --git a/src/components/sidebar.js b/src/components/sidebar.js
new file mode 100644
index 0000000..343ce42
--- /dev/null
+++ b/src/components/sidebar.js
@@ -0,0 +1,20 @@
+import React from 'react'
+
+import styles from './sidebar.module.css'
+
+export default function Sidebar(props) {
+  const { onClose } = props
+  return (
+    <div className={styles.container}>
+      <div
+        className={styles.closeBorder}
+        onClick={() => {
+          onClose()
+        }}
+      >
+        {'>'}
+      </div>
+      <div className={styles.content}>{props.children}</div>
+    </div>
+  )
+}
diff --git a/src/components/sidebar.module.css b/src/components/sidebar.module.css
new file mode 100644
index 0000000..764822e
--- /dev/null
+++ b/src/components/sidebar.module.css
@@ -0,0 +1,29 @@
+.container {
+  background-color: var(--background-color);
+  border-left: 3px solid #99f;
+  top: 0;
+  right: 0px;
+  height: 100%;
+  width: 400px;
+  max-width: 100%;
+  position: fixed;
+
+  display: flex;
+}
+
+.closeBorder {
+  padding: 5px;
+  cursor: pointer;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  color: white;
+}
+
+.closeBorder:hover {
+  background-color: #333;
+}
+
+.content {
+  width: 100%;
+}
diff --git a/src/components/todoStuff/todoCard.js b/src/components/todoStuff/todoCard.js
index eaf0ea2..051832a 100644
--- a/src/components/todoStuff/todoCard.js
+++ b/src/components/todoStuff/todoCard.js
@@ -3,19 +3,15 @@ import React from 'react'
 import styles from './todoCard.module.css'
 
 export default function TodoCard(props) {
-  const { categories, onClick, userId, clickable } = props
-  const { name, description, category, points, votes, id } = props.cardData
+  const { categories, onClick, userId } = props
+  const { name, category, points, votes, id } = props.cardData
   const voted = votes.includes(userId)
 
   return (
     <div
-      className={`${styles.card} ${clickable && styles.clickable} ${voted &&
-        styles.voted}`}
-      title={description}
+      className={`${styles.card} ${voted && styles.voted}`}
       onClick={() => {
-        if (clickable) {
-          onClick(id)
-        }
+        onClick(props.cardData)
       }}
     >
       <div className={styles.description}>
diff --git a/src/components/todoStuff/todoCard.module.css b/src/components/todoStuff/todoCard.module.css
index baaf9c7..86cb918 100644
--- a/src/components/todoStuff/todoCard.module.css
+++ b/src/components/todoStuff/todoCard.module.css
@@ -3,17 +3,14 @@
   border-radius: 2px;
   padding: 5px;
   margin: 6px 3px;
+  cursor: pointer;
 }
 
 .voted {
   border: 2px solid #cf9;
 }
 
-.clickable {
-  cursor: pointer;
-}
-
-.clickable:hover {
+.card:hover {
   background-color: #333;
   border: 2px solid #f99;
 }
diff --git a/src/components/todoStuff/todoRow.js b/src/components/todoStuff/todoRow.js
index 6714428..cba5bee 100644
--- a/src/components/todoStuff/todoRow.js
+++ b/src/components/todoStuff/todoRow.js
@@ -3,14 +3,16 @@ import React from 'react'
 import styles from './todoRow.module.css'
 
 export default function TodoRow(props) {
-  const { categories, userId } = props
-  const { name, description, category, votes, id } = props.rowData
+  const { categories, userId, onClick } = props
+  const { name, category, votes, id } = props.rowData
   const voted = votes.includes(userId)
 
   return (
     <div
+      onClick={() => {
+        onClick(props.rowData)
+      }}
       className={`${styles.row} ${voted && styles.voted}`}
-      title={description}
     >
       <div className={styles.id}>{`#${id}`}</div>
       <div className={styles.description}>{name}</div>
diff --git a/src/components/todoStuff/todoRow.module.css b/src/components/todoStuff/todoRow.module.css
index 18af760..90085de 100644
--- a/src/components/todoStuff/todoRow.module.css
+++ b/src/components/todoStuff/todoRow.module.css
@@ -4,6 +4,12 @@
   border-radius: 2px;
   padding: 5px;
   margin: 6px 3px;
+  cursor: pointer;
+}
+
+.row:hover {
+  background-color: #333;
+  border: 2px solid #f99;
 }
 
 .row > div {
diff --git a/src/components/todoStuff/todoSidebar.js b/src/components/todoStuff/todoSidebar.js
new file mode 100644
index 0000000..c57c6f2
--- /dev/null
+++ b/src/components/todoStuff/todoSidebar.js
@@ -0,0 +1,63 @@
+import React from 'react'
+
+import styles from './todoSidebar.module.css'
+
+export default function Todos({ card, userId, categories, columns, voteOn }) {
+  const { name, description, category, points, votes, id } = card
+  const voteable = columns[card.state].clickable
+
+  // TODO: hide vote button if not voteable
+  return (
+    <div className={styles.container}>
+      <div className={styles.name}>
+        <span className={styles.id}>#{id}</span>
+        {name}
+        <span
+          style={{
+            margin: '0px 5px',
+            fontSize: '10px',
+            backgroundColor: categories[category].color,
+            color: 'white',
+            borderRadius: '2px',
+            padding: '0px 2px',
+          }}
+        >
+          {categories[category].name}
+        </span>
+      </div>
+      <hr />
+      <div className={styles.row} title={'Minél több a pont, annál nehezebb'}>
+        <div>Nehézség:</div>
+        <div>{points}</div>
+      </div>
+      <div
+        className={`${styles.row} ${votes.includes(userId) &&
+          styles.votedtext}`}
+        title={'Hány felhasználó szavazott a feladatra'}
+      >
+        <div>Szavazatok:</div>
+        <div>{votes.length}</div>
+      </div>
+      <hr />
+      {description && (
+        <>
+          <div className={styles.title}>Leírás</div>
+          <div dangerouslySetInnerHTML={{ __html: description }} />
+          <hr />
+        </>
+      )}
+      <div className={styles.category}></div>
+      {voteable && (
+        <div
+          className={`${styles.button} ${votes.includes(userId) &&
+            styles.voted}`}
+          onClick={() => {
+            voteOn(card)
+          }}
+        >
+          {votes.includes(userId) ? 'Szavazat visszavonása' : 'Szavazás'}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/todoStuff/todoSidebar.module.css b/src/components/todoStuff/todoSidebar.module.css
new file mode 100644
index 0000000..8159b96
--- /dev/null
+++ b/src/components/todoStuff/todoSidebar.module.css
@@ -0,0 +1,54 @@
+.container {
+  display: flex;
+  flex-flow: column;
+  margin: 5px;
+}
+
+.container > hr {
+  width: 100%;
+}
+
+.title {
+  color: #99f;
+  font-size: 18px;
+}
+
+.name {
+  color: #99f;
+  font-size: 20px;
+  margin: 20px 0px;
+}
+
+.category {
+  word-break: break-all;
+  font-size: 10px;
+}
+
+.id {
+  font-size: 16px;
+  margin: 0px 3px;
+  color: #999;
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.button {
+  border: 2px solid #99f;
+  border-radius: 3px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: #333;
+}
+
+.votedtext {
+  color: #cf9;
+}
+.voted {
+  border: 2px solid #cf9;
+}
diff --git a/src/components/todoStuff/todoTable.js b/src/components/todoStuff/todoTable.js
index be909fa..01e7ae9 100644
--- a/src/components/todoStuff/todoTable.js
+++ b/src/components/todoStuff/todoTable.js
@@ -5,7 +5,7 @@ import TodoRow from './todoRow.js'
 import styles from './todoTable.module.css'
 
 export default function TodoBoard(props) {
-  const { tables, cards, userId, categories } = props
+  const { tables, cards, userId, categories, onClick } = props
 
   return (
     <div className={styles.tableContainer}>
@@ -23,6 +23,7 @@ export default function TodoBoard(props) {
               {tableCards.map((card, i) => {
                 return (
                   <TodoRow
+                    onClick={onClick}
                     key={i}
                     type={key}
                     rowData={card}
diff --git a/src/components/todoStuff/todoTable.module.css b/src/components/todoStuff/todoTable.module.css
index eecc804..524aeeb 100644
--- a/src/components/todoStuff/todoTable.module.css
+++ b/src/components/todoStuff/todoTable.module.css
@@ -1,8 +1,11 @@
 .tableContainer {
+  overflow-y: hidden;
+  overflow-x: auto;
   margin: 5px 0px;
 }
 
 .table {
+  min-width: 500px;
   justify-content: center;
 }
 
diff --git a/src/components/todoStuff/todos.js b/src/components/todoStuff/todos.js
index 46a80f1..3388cb1 100644
--- a/src/components/todoStuff/todos.js
+++ b/src/components/todoStuff/todos.js
@@ -3,7 +3,11 @@ import React, { useState, useEffect } from 'react'
 import LoadingIndicator from '../LoadingIndicator.js'
 import TodoBoard from './todoBoard.js'
 import TodoTable from './todoTable.js'
+import TodoSidebar from './todoSidebar.js'
 
+import Sidebar from '../sidebar.js'
+
+// import styles from './todos.module.css'
 import constants from '../../constants.json'
 
 const byVotes = (a, b) => {
@@ -13,11 +17,10 @@ const byVotes = (a, b) => {
 export default function Todos() {
   const [loaded, setLoaded] = useState(false)
   const [columns, setColumns] = useState(null)
-  const [boardCards, setBoardCards] = useState(null)
-  const [tables, setTables] = useState(null)
-  const [tableCards, setTableCards] = useState(null)
+  const [cards, setCards] = useState(null)
   const [categories, setCategories] = useState(null)
   const [userId, setUserId] = useState(null)
+  const [sidebarCard, setSidebarCard] = useState(null)
 
   useEffect(() => {
     console.info('Fetching todos')
@@ -36,72 +39,98 @@ export default function Todos() {
     setCategories(data.todos.categories)
     setUserId(data.userId)
 
-    let bCards = []
-    let tCards = []
-    data.todos.cards.forEach((card) => {
-      if (data.todos.columns[card.state].type === 'table') {
-        tCards.push(card)
-      } else {
-        bCards.push(card)
-      }
-    })
-
-    setTableCards(tCards.sort(byVotes))
-    setBoardCards(bCards.sort(byVotes))
-
-    let cols = {}
-    let tables = {}
-    Object.keys(data.todos.columns).forEach((key) => {
-      const col = data.todos.columns[key]
-      if (col.type !== 'table') {
-        cols = {
-          ...cols,
-          [key]: col,
-        }
-      } else {
-        tables = {
-          ...tables,
-          [key]: col,
-        }
-      }
-    })
-    setColumns(cols)
-    setTables(tables)
-
+    setCards(data.todos.cards)
+    setColumns(data.todos.columns)
     setLoaded(true)
   }
 
-  const onCardClick = (id) => {
-    fetch(`${constants.apiUrl}voteTodo?id=${id}`, {
-      credentials: 'include',
-    })
-      .then((resp) => {
-        return resp.json()
-      })
-      .then((data) => {
-        setTodos(data)
-      })
+  const onClick = (card) => {
+    setSidebarCard(card.id)
   }
 
   if (!loaded) {
     return <LoadingIndicator />
   }
 
+  let bCards = []
+  let tCards = []
+  cards.forEach((card) => {
+    if (columns[card.state].type === 'table') {
+      tCards.push(card)
+    } else {
+      bCards.push(card)
+    }
+  })
+  bCards = bCards.sort(byVotes)
+  tCards = tCards.sort(byVotes)
+
+  let cols = {}
+  let tables = {}
+  Object.keys(columns).forEach((key) => {
+    const col = columns[key]
+    if (col.type !== 'table') {
+      cols = {
+        ...cols,
+        [key]: col,
+      }
+    } else {
+      tables = {
+        ...tables,
+        [key]: col,
+      }
+    }
+  })
+
   return (
     <div>
-      <TodoBoard
-        columns={columns}
-        cards={boardCards}
-        userId={userId}
-        categories={categories}
-        onCardClick={onCardClick}
-      />
-      <TodoTable
-        tables={tables}
-        cards={tableCards}
-        userId={userId}
-        categories={categories}
-      />
+      {sidebarCard && (
+        <Sidebar
+          onClose={() => {
+            setSidebarCard(null)
+          }}
+        >
+          <TodoSidebar
+            card={cards.find((card) => {
+              return card.id === sidebarCard
+            })}
+            userId={userId}
+            categories={categories}
+            columns={columns}
+            voteOn={(card) => {
+              fetch(`${constants.apiUrl}todos?id=${card.id}`, {
+                credentials: 'include',
+              })
+                .then((resp) => {
+                  return resp.json()
+                })
+                .then((data) => {
+                  setTodos(data)
+                })
+            }}
+          />
+        </Sidebar>
+      )}
+      <div
+        style={{
+          // width: '100%',
+          marginRight: sidebarCard ? 380 : 0,
+        }}
+      >
+        <TodoBoard
+          columns={cols}
+          cards={bCards}
+          userId={userId}
+          categories={categories}
+          onCardClick={onClick}
+        />
+        <TodoTable
+          tables={tables}
+          cards={tCards}
+          userId={userId}
+          categories={categories}
+          onClick={onClick}
+        />
+      </div>
     </div>
   )
 }
diff --git a/src/components/todoStuff/todos.module.css b/src/components/todoStuff/todos.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index 750b6f8..a187c12 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -25,6 +25,9 @@ a {
 }
 
 .sidebar {
+  display: flex;
+  flex-direction: column;
+
   margin: 0;
   padding: 0;
   width: 200px;
@@ -52,6 +55,11 @@ a {
   color: white;
 }
 
+.userInfo {
+  margin-bottom: 15px;
+  margin-top: auto;
+}
+
 .content {
   margin-left: 200px;
   padding: 1px 16px;
@@ -130,6 +138,17 @@ a {
     width: 100%;
     margin: 0 auto;
   }
+
+  .rtfmImage {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .manualUsage {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 .questionContainer {
@@ -198,3 +217,12 @@ a {
 .donate {
   background-color: #222a26;
 }
+
+.rtfmImage {
+  justify-content: center;
+  margin: 0px 10px;
+}
+
+.manualUsage {
+  display: flex;
+}
diff --git a/src/pages/contribute.js b/src/pages/contribute.js
index cef3044..e560ee4 100644
--- a/src/pages/contribute.js
+++ b/src/pages/contribute.js
@@ -66,10 +66,11 @@ export default function contribute() {
         <title>Qmining - Todos | Frylabs.net</title>
       </Head>
       <div className={styles.description}>
-        Egy kártyára kattintva szavazhatsz. Minél több szavazat érkezik egy
-        kártyára, annál magasabb lesz a pioritása. Jobb alsó szám minél több,
-        annál nehezebb a feladat. Tartsd egeret kártyán részletesebb leírásért
-        (ha van hozzá)
+        Egy kártyára kattintva nézheted meg a részleteket, vagy szavazhatsz.
+        Minél több szavazat érkezik egy kártyára, annál magasabb lesz a
+        pioritása. Jobb alsó szám minél több, annál nehezebb a feladat. A Done
+        oszlopban lévő feladatok kész vannak, de különböző okok miat még nem
+        lettek kiadva frissítésként. Ami az In Prod táblázatban van az van kint.
       </div>
       <Todos />
       <div className={styles.description}>
diff --git a/src/pages/manual.js b/src/pages/manual.js
index 52c4a74..e0b7201 100644
--- a/src/pages/manual.js
+++ b/src/pages/manual.js
@@ -3,7 +3,7 @@ import React from 'react'
 import Sleep from '../components/sleep'
 import Head from 'next/head'
 
-export default function Manual(props) {
+export default function Manual() {
   return <div>{renderMaual()}</div>
 }
 
@@ -16,6 +16,8 @@ function renderMaual() {
       <center>
         <h1>Manual</h1>
       </center>
+      <hr />
+      <hr />
       <Sleep />
       <center>
         Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során segítséget
@@ -27,92 +29,103 @@ function renderMaual() {
         Valószínűleg semmi baj nem lesz, de én szóltam. Ha ez iránt aggódsz,
         olvasd el a kockázatok részt
       </center>
+      <hr />
+      <hr />
       <center>
         <h1>Userscript használata</h1>
       </center>
       <hr />
-      <table
-        style={{ tableLayout: 'fixed', verticalAlign: 'top', width: '100%' }}
-      >
-        <tbody>
-          <tr>
-            <td>
+      <hr />
+      <div className={'manualUsage'}>
+        <div>
+          <ul>
+            <li>
+              Tölts le egy userscript futtató kiegészítőt a böngésződhöz:{' '}
+              <a
+                href="https://www.tampermonkey.net/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Tampermonkey
+              </a>
+            </li>
+            <li>
+              <a
+                href="http://qmining.frylabs.net/install?man"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Weboldalról
+              </a>{' '}
+              rakd fel a scriptet
+            </li>
+            <li>
+              Script majd udvariasan megkéri, hogy hagy beszélgessen a
+              szerverrel, mert mással nem tud, ezt engedélyezd.
+            </li>
+            <li>
+              Ezután:
               <ul>
                 <li>
-                  Tölts le egy userscript futtató kiegészítőt a böngésződhöz:{' '}
-                  <a href="https://www.tampermonkey.net/" target="_blank">
-                    Tampermonkey
-                  </a>
+                  Teszt oldalon a kérdésre a választ kell látnod felül egy
+                  felugró ablakszerűben
                 </li>
                 <li>
-                  <a
-                    href="http://qmining.frylabs.net/install?man"
-                    target="_blank"
-                  >
-                    Weboldalról
-                  </a>{' '}
-                  rakd fel a scriptet
-                </li>
-                <li>
-                  Script majd udvariasan megkéri, hogy hagy beszélgessen a
-                  szerverrel, mert mással nem tud, ezt engedélyezd.
-                </li>
-                <li>
-                  Ezután:
-                  <ul>
-                    <li>
-                      Teszt oldalon a kérdésre a választ kell látnod felül egy
-                      felugró ablakszerűben
-                    </li>
-                    <li>
-                      Teszt ellenőrzés oldalon a script beküldi a szervernek a
-                      helyes válaszokat, az lementi az új kérdéseket, amik
-                      ezután azonnal elérhetők lesznek
-                    </li>
-                  </ul>
+                  Teszt ellenőrzés oldalon a script beküldi a szervernek a
+                  helyes válaszokat, az lementi az új kérdéseket, amik ezután
+                  azonnal elérhetők lesznek
                 </li>
               </ul>
-              Egyéb fontos tudnivalók:
-              <ul>
-                <li>
-                  Ezt ments sokszor akár minden nap:{' '}
-                  <a
-                    href="http://qmining.frylabs.net/allqr.txt?man"
-                    target="_blank"
-                  >
-                    {' '}
-                    Összes kérdés TXT
-                  </a>{' '}
-                  (ha elszállna a szerver)
-                </li>
-                <li>
-                  <a
-                    href="https://qmining.frylabs.net/allQuestions.html"
-                    target="_blank"
-                  >
-                    Összes kérdés oldal
-                  </a>
-                  , ahol manuál tudsz keresni ha valami gáz lenne a scriptel
-                </li>
-              </ul>
-              <p /> Egyéb funkciók:
-              <ul>
-                <li>
-                  Ha esetleg videókat nézel, akkor spaceval lehet play/pausolni,
-                  és jobbra/balra gombbal ugrani a videóban.
-                </li>
-              </ul>
-            </td>
-            <td width="40%" style={{ textAlign: 'center' }}>
-              <img style={{ maxWidth: '100%' }} src="img/rtfm.jpg" alt="img" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
+            </li>
+          </ul>
+          Egyéb fontos tudnivalók:
+          <ul>
+            <li>
+              Ezt ments sokszor akár minden nap:{' '}
+              <a
+                href="http://qmining.frylabs.net/allqr.txt?man"
+                target="_blank"
+                rel="noreferrer"
+              >
+                {' '}
+                Összes kérdés TXT
+              </a>{' '}
+              (ha elszállna a szerver)
+            </li>
+            <li>
+              <a
+                href="https://qmining.frylabs.net/allQuestions.html"
+                target="_blank"
+                rel="noreferrer"
+              >
+                Összes kérdés oldal
+              </a>
+              , ahol manuál tudsz keresni ha valami gáz lenne a scriptel
+            </li>
+          </ul>
+          <p /> Egyéb funkciók:
+          <ul>
+            <li>
+              Ha esetleg videókat nézel, akkor spaceval lehet play/pausolni, és
+              jobbra/balra gombbal ugrani a videóban.
+            </li>
+          </ul>
+        </div>
+        <div className={'rtfmImage'}>
+          <img
+            style={{ maxWidth: '100%', minWidth: '200px' }}
+            src="img/rtfm.jpg"
+            alt="img"
+          />
+        </div>
+      </div>
+      <hr />
+      <hr />
       <center>
         <h1>Jelszavak</h1>
       </center>
       <hr />
+      <hr />
       Ha ezt olvasod valszeg már van neked egy. Azért lett bevezetve, hogy
       nagyjából zárt legyen a felhasználók köre
       <ul>
@@ -121,19 +134,27 @@ function renderMaual() {
           Elvileg elég csak 1 szer beírnod, és nem kell többet, de{' '}
           <b>mentsd le biztos helyre a jelszót, hogy később is meglegyen!</b> Ha
           többször kell akkor az bug,{' '}
-          <a href="http://qmining.frylabs.net/feedback?man" target="_blank">
+          <a
+            href="http://qmining.frylabs.net/feedback?man"
+            target="_blank"
+            rel="noreferrer"
+          >
             és szólj
           </a>
         </li>
         <li>
           <b>
-            Jelenleg nincs 'elfelejtett jelszó' funkció, ha elfelejted akkor az
+            Jelenleg nincs elfelejtett jelszó funkció, ha elfelejted akkor az
             örökre eltűnik!
           </b>
         </li>
         <li>
           Ha van jelszavad akkor bizonyos határok között{' '}
-          <a href="https://qmining.frylabs.net/pwRequest?man" target="_blank">
+          <a
+            href="https://qmining.frylabs.net/pwRequest?man"
+            target="_blank"
+            rel="noreferrer"
+          >
             te is tudsz generálni másoknak
           </a>
           (ncore style).
@@ -148,10 +169,13 @@ function renderMaual() {
           megmaradjon
         </li>
       </ul>
+      <hr />
+      <hr />
       <center>
         <h1>Gyakran előforduló kérdések</h1>
       </center>
       <hr />
+      <hr />
       <ul>
         <li>
           <b>
@@ -172,42 +196,20 @@ function renderMaual() {
           amíg újra nem töltöd az oldalt, vagy másikra ugrasz.
         </li>
         <p />
-        <li>
-          <b>Mi ez a ... ?</b>
-          <br />
-          <img style={{ maxWidth: '100%' }} src="img/imgq.jpg" alt="img" />
-        </li>
         <li>
           <b>Gombok, %-ok, számok</b>
           <br />
           <img style={{ maxWidth: '100%' }} src="img/6.png" alt="img" />
         </li>
-        <li>
-          <b id="sitesave">Weboldal lementése</b>
-          <br />
-          Hogy a hibákat a saját gépemen reprodukálni tudjam, és könnyen ki
-          bírjam javítani sokszor jól jön ha egy lementett weboldalt megkapok.
-          Így lehet letölteni egy oldalt:
-          <img
-            style={{ maxWidth: '100%' }}
-            src="img/websitesave.png"
-            alt="img"
-          />
-          <br />
-          <a href="http://qmining.frylabs.net/feedback?man" target="_blank">
-            Ide tudod feltölteni
-          </a>
-          <br />
-          Mivel nincs hozzáférésem semmilyen egyetemi oldalhoz, így csak így
-          tudom hatékonyan tesztelni a scriptet. Ezért hatalmas segítség ha
-          feltöltöd azt az oldalt amin hibával találkozol.
-        </li>
         <p />
       </ul>
       <hr />
+      <hr />
       <center>
         <h1>Kockázatok</h1>
       </center>
+      <hr />
+      <hr />
       <ul>
         <li>
           <b>Bármikor észrevehetik hogy használod a scriptet</b>
@@ -219,7 +221,7 @@ function renderMaual() {
           Ha arra nem veszik a fáradságot, hogy a kérdéseket lecseréljék akkor
           valószínűleg arra se hogy userscript futását detektáló kódot rakjanak
           a weboldalra. A{' '}
-          <a href="https://moodle.org/" target="_blank">
+          <a href="https://moodle.org/" target="_blank" rel="noreferrer">
             Moodle
           </a>{' '}
           egy nyílt forráskódú, valószínűleg self-hosted rendszer. Valószínűleg
@@ -240,7 +242,11 @@ function renderMaual() {
           <b>Bármikor leállhat a szerver</b>
           <br />
           És akkor nem bírod megnézni a válaszokat. Erre van az{' '}
-          <a href="http://qmining.frylabs.net/allqr.txt?man" target="_blank">
+          <a
+            href="http://qmining.frylabs.net/allqr.txt?man"
+            target="_blank"
+            rel="noreferrer"
+          >
             {' '}
             összes kérdés TXT
           </a>
@@ -252,6 +258,63 @@ function renderMaual() {
         </li>
       </ul>
       <hr />
+      <hr />
+      <center>
+        <h1>Egyéb</h1>
+      </center>
+      <hr />
+      <hr />
+      <h2 id="sitesave">Weboldal lementése</h2>
+      Hogy a hibákat a saját gépemen reprodukálni tudjam, és könnyen ki bírjam
+      javítani sokszor jól jön ha egy lementett weboldalt megkapok. Így lehet
+      letölteni egy oldalt:
+      <img style={{ maxWidth: '100%' }} src="img/websitesave.png" alt="img" />
+      <br />
+      <a
+        href="http://qmining.frylabs.net/feedback?man"
+        target="_blank"
+        rel="noreferrer"
+      >
+        Ide tudod feltölteni
+      </a>
+      <br />
+      Mivel nincs hozzáférésem semmilyen egyetemi oldalhoz, így csak így tudom
+      hatékonyan tesztelni a scriptet. Ezért hatalmas segítség ha feltöltöd azt
+      az oldalt amin hibával találkozol.
+      <hr />
+      <h2 id="scriptreinstall">Script újratelepítése</h2>
+      Jelenleg két helyről lehet telepíteni a scriptet: greasyforkról és a
+      weboldalamról. A greasyforkos telepítési lehetőség meg fog szűnni, így ha
+      onnan telepítetted, akkor nem lesznek frissítések elérhetők (amik nagyon
+      fontosak (de tényleg)). Ezért a következő rövid manővert kellene
+      végrehajtani, hogy minden zökkenőmentesen menjen:
+      <ul>
+        <li>Böngésző bővítményeidnél kattints a tampermonkey-ra</li>
+        <li>Válaszd ki alulról második opciót, ami dashboard néven fut</li>
+        <li>
+          Ekkor új tabban felugranak telepített scriptjeid. Keresd meg a
+          Moodle/Elearning/KMOOC test help-et, és a sor végén kattints a kuka
+          gombra
+        </li>
+        <li>Ha megkérdezi mondd neki, hogy biztos törölni akarod</li>
+        <li>
+          Ezután simán kattints{' '}
+          <a
+            href="http://qmining.frylabs.net/install?man"
+            target="_blank"
+            rel="noreferrer"
+          >
+            ide a script újratelepítéséhez a weboldalamról
+          </a>
+        </li>
+        <li>
+          Kész! Lehet megkérdezi újra, hogy elérheti-e a szervert, de azt csak
+          egyszer. Szokásos módon engedélyezd, hogy le bírja kérni a helyes
+          válaszokat
+        </li>
+      </ul>
+      Ezzel semmi adat nem vész el, régi jelszó ugyanolyan jó marad (csak ne
+      felejtsd azt el)
     </div>
   )
 }