diff --git a/src/components/b.js b/src/components/b.js
new file mode 100644
index 0000000..598dd09
--- /dev/null
+++ b/src/components/b.js
@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react'
+
+import constants from '../constants.json'
+
+const soundCount = 7
+function GetRandom(min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min)
+}
+
+export default function BB() {
+  const [audios, setAudios] = useState(null)
+  const [range, setRange] = useState([0, 3])
+  const [clicks, setClicks] = useState(0)
+  const [shouldRender, setShouldRender] = useState(false)
+
+  useEffect(() => {
+    setShouldRender(GetRandom(0, 100) === 4)
+  }, [])
+
+  useEffect(() => {
+    if (shouldRender) {
+      const res = []
+      for (let i = 1; i < soundCount + 2; i++) {
+        res.push(new Audio(`${constants.siteUrl}sound/deer${i}.mp3`))
+      }
+      setAudios(res)
+    }
+  }, [shouldRender])
+
+  useEffect(() => {
+    if (clicks > 3) {
+      setRange([4, 5])
+    }
+    if (clicks > 6) {
+      setRange([6, 7])
+    }
+  }, [clicks])
+
+  if (!shouldRender) {
+    return null
+  }
+
+  return (
+    <div
+      style={{ position: 'fixed', right: 0, bottom: 0, margin: 0, padding: 0 }}
+      onClick={() => {
+        const rnd = GetRandom(range[0], range[1])
+        audios[rnd].play()
+        setClicks(clicks + 1)
+      }}
+    >
+      <img
+        src={`${constants.siteUrl}img/tiszai.png`}
+        alt="img"
+        style={{ cursor: 'pointer', width: '200px' }}
+      />
+    </div>
+  )
+}
diff --git a/src/components/layout.js b/src/components/layout.js
index 9d690f7..d297bb4 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -3,6 +3,7 @@ import Link from 'next/link'
 
 import tabs from '../data/tabs.json'
 import constants from '../constants.json'
+import BB from './b.js'
 
 // FIXME: window resize event listener to show sidebar on resize
 
@@ -70,6 +71,7 @@ export default function Layout(props) {
         ) : null}
       </div>
       <div className="content">{props.children}</div>
+      <BB />
     </div>
   )
 }
diff --git a/src/components/todoStuff/todoSidebar.js b/src/components/todoStuff/todoSidebar.js
index ee6c41e..03d1809 100644
--- a/src/components/todoStuff/todoSidebar.js
+++ b/src/components/todoStuff/todoSidebar.js
@@ -2,10 +2,28 @@ 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
+export default function Todos({
+  card,
+  userId,
+  categories,
+  columns,
+  voteOn,
+  namedGroups,
+}) {
+  const {
+    name,
+    description,
+    category,
+    points,
+    votes,
+    id,
+    group,
+    gitlink,
+  } = card
   const voteable = columns[card.state].clickable
 
+  console.log(card)
+
   // TODO: hide vote button if not voteable
   return (
     <div className={styles.container}>
@@ -27,6 +45,14 @@ export default function Todos({ card, userId, categories, columns, voteOn }) {
         </span>
       </div>
       <hr />
+      {group && (
+        <div className={styles.row}>
+          <div>Csoport:</div>
+          <div style={{ color: group }}>
+            {namedGroups[group] ? namedGroups[group].name : group}
+          </div>
+        </div>
+      )}
       <div className={styles.row} title={'Minél több a pont, annál nehezebb'}>
         <div>Nehézség:</div>
         <div>{points}</div>
@@ -39,6 +65,13 @@ export default function Todos({ card, userId, categories, columns, voteOn }) {
         <div>Szavazatok:</div>
         <div>{votes.length}</div>
       </div>
+      {gitlink && (
+        <div className={styles.row}>
+          <a href={gitlink} target={'_blank'} rel={'noreferrer'}>
+            Git link
+          </a>
+        </div>
+      )}
       <hr />
       {description && (
         <>
diff --git a/src/components/todoStuff/todos.js b/src/components/todoStuff/todos.js
index 1bc560b..cb02953 100644
--- a/src/components/todoStuff/todos.js
+++ b/src/components/todoStuff/todos.js
@@ -152,6 +152,7 @@ export default function Todos() {
             userId={userId}
             categories={categories}
             columns={columns}
+            namedGroups={namedGroups}
             voteOn={(card) => {
               fetch(`${constants.apiUrl}todos?id=${card.id}`, {
                 credentials: 'include',
diff --git a/src/constants.json b/src/constants.json
index 8650745..dec44ec 100644
--- a/src/constants.json
+++ b/src/constants.json
@@ -1,6 +1,6 @@
 {
   "siteUrl": "https://qmining.frylabs.net/",
-  "apiUrl": "https://api.frylabs.net/",
+  "apiUrl": "http://localhost:8080/",
   "mobileWindowWidth": 700,
   "maxQuestionsToRender": 250
 }
diff --git a/src/pages/_app.js b/src/pages/_app.js
index 69f3ec4..e1263f4 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -3,83 +3,29 @@
 import React from 'react'
 import '../defaultStyles.css'
 import Layout from '../components/layout'
-import constants from '../constants.json'
-
-var data = null
-
-function fetchData() {
-  return new Promise((resolve) => {
-    if (data) {
-      resolve(data)
-      return
-    }
-
-    console.info('Fetching data')
-    fetch(`${constants.apiUrl}getDbs`, {
-      credentials: 'include',
-    })
-      .then((resp) => {
-        return resp.json()
-      })
-      .then((data) => {
-        const promises = data.map((db) => {
-          return fetch(`${constants.apiUrl}${db.path}`, {
-            credentials: 'include',
-          }).then((resp) => {
-            return new Promise((resolve) => {
-              resp.json().then((jsonRes) => {
-                resolve({
-                  dbName: db.name,
-                  data: jsonRes,
-                })
-              })
-            })
-          })
-        })
-
-        Promise.all(promises).then((data) => {
-          const mergedData = data.reduce((acc, db) => {
-            return [
-              ...acc,
-              ...db.data.map((subj) => {
-                return {
-                  ...subj,
-                  Name: `${subj.Name} (${db.dbName})`,
-                }
-              }),
-            ]
-          }, [])
-
-          data = mergedData
-          resolve(mergedData)
-        })
-      })
-  })
-}
 
 function MyApp({ Component, pageProps, router }) {
-  console.log(pageProps)
   return (
     <Layout route={router.route}>
-      <Component {...pageProps} router={router} getData={fetchData} />
+      <Component {...pageProps} router={router} />
     </Layout>
   )
 }
 
-export async function getStaticProps() {
-  console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
-  const res = await fetch('https://stuff.frylabs.net/asd.json', {
-    credentials: 'include',
-  })
-  const resp = await res.json()
-  console.log('aaaaaaaaaaaaa', resp)
-  return {
-    props: {
-      msg: 'aaaaa',
-      fetched: resp,
-    },
-  }
-}
+// MyApp.getStaticProps = () => {
+//   console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
+//   const res = await fetch('https://stuff.frylabs.net/asd.json', {
+//     credentials: 'include',
+//   })
+//   const resp = await res.json()
+//   console.log('aaaaaaaaaaaaa', resp)
+//   return {
+//     props: {
+//       msg: 'aaaaa',
+//       fetched: resp,
+//     },
+//   }
+// }
 
 // Only uncomment this method if you have blocking data requirements for
 // every single page in your application. This disables the ability to
diff --git a/src/pages/allQuestions.js b/src/pages/allQuestions.js
index 61e9bd6..55e4266 100644
--- a/src/pages/allQuestions.js
+++ b/src/pages/allQuestions.js
@@ -6,22 +6,76 @@ import QuestionSearchResult from '../components/QuestionSearchResult.js'
 
 import styles from './allQuestions.module.css'
 
-export default function AllQuestions({ router, getData }) {
+import constants from '../constants.json'
+
+function mergeData(data) {
+  return data.reduce((acc, db) => {
+    return [
+      ...acc,
+      ...db.data.map((subj) => {
+        return {
+          ...subj,
+          Name: `${subj.Name} (${db.dbName})`,
+        }
+      }),
+    ]
+  }, [])
+}
+
+function fetchData(db) {
+  return new Promise((resolve) => {
+    fetch(`${constants.apiUrl}${db.path}`, {
+      credentials: 'include',
+    })
+      .then((resp) => {
+        resp.json()
+      })
+      .then((data) => {
+        resolve({
+          dbName: db.name,
+          data: data,
+        })
+      })
+  })
+}
+
+function fetchDbs() {
+  return new Promise((resolve) => {
+    console.info('Fetching data')
+    fetch(`${constants.apiUrl}getDbs`, {
+      credentials: 'include',
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((data) => {
+        resolve(data)
+      })
+  })
+}
+
+export default function AllQuestions({ router }) {
   const [data, setData] = useState(null)
+  const [dbs, setDbs] = useState(null)
   const [searchTerm, setSearchTerm] = useState('')
 
   useEffect(() => {
-    getData().then((result) => {
-      setData(result)
-
-      router.replace(`${router.asPath.replace('.html', '')}`, undefined, {
-        shallow: true,
-      })
-      const querySearch = router.query.question
-        ? decodeURIComponent(router.query.question)
-        : ''
-      setSearchTerm(querySearch)
+    router.replace(`${router.asPath.replace('.html', '')}`, undefined, {
+      shallow: true,
     })
+    const querySearch = router.query.question
+      ? decodeURIComponent(router.query.question)
+      : ''
+
+    fetchDbs().then((res) => {
+      setDbs(res)
+      console.log(res)
+    })
+    // fetchData().then((result) => {
+    //   setData(result)
+
+    //   setSearchTerm(querySearch)
+    // })
   }, [])
 
   return (
@@ -29,6 +83,29 @@ export default function AllQuestions({ router, getData }) {
       <Head>
         <title>Qmining - Kérdés keresés | Frylabs.net</title>
       </Head>
+      {dbs ? (
+        <>
+          <select
+            onChange={(e) => {
+              console.log(e.target.value)
+            }}
+          >
+            <option value={'none'} key={'none'}>
+              {'...'}
+            </option>
+            {dbs.map((db) => {
+              return (
+                <option value={db.path} key={db.path}>
+                  {db.name}
+                </option>
+              )
+            })}
+            <option value={'all'} key={'all'}>
+              {'All'}
+            </option>
+          </select>
+        </>
+      ) : null}
       {data ? (
         <>
           <div className={styles.searchContainer}>
@@ -38,11 +115,11 @@ export default function AllQuestions({ router, getData }) {
               className={styles.searchBar}
               type="text"
               value={searchTerm}
-              onChange={(e) => {
-                setSearchTerm(e.target.value)
+              onChange={(event) => {
+                setSearchTerm(event.target.value)
                 router.replace(
-                  `${router.pathname}${e.target.value &&
-                    '?question='}${encodeURIComponent(e.target.value)}`,
+                  `${router.pathname}${event.target.value &&
+                    '?question='}${encodeURIComponent(event.target.value)}`,
                   undefined,
                   { shallow: true }
                 )
diff --git a/src/pages/index.js b/src/pages/index.js
index 175d19b..f43ce82 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,6 +1,3 @@
-// TODO: css remove unnecesarry stuff
-// TODO: fetch only once
-
 import React, { useState, useEffect } from 'react'
 import fetch from 'unfetch'
 import Head from 'next/head'
diff --git a/src/pages/todos.js b/src/pages/todos.js
new file mode 100644
index 0000000..31c68b4
--- /dev/null
+++ b/src/pages/todos.js
@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+import Head from 'next/head'
+
+import Sleep from '../components/sleep'
+import Todos from '../components/todoStuff/todos'
+
+import constants from '../constants.json'
+import styles from './todos.module.css'
+
+export default function contribute() {
+  const [newTask, setNewTask] = useState('')
+
+  const submitNewTask = async () => {
+    if (!newTask) {
+      return
+    }
+
+    fetch(constants.apiUrl + 'postfeedback', {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        newTask: newTask,
+        from: 'contribute',
+      }),
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((resp) => {
+        if (resp.success) {
+          alert('Elküldve')
+          setNewTask('')
+        } else {
+          alert('Hiba küldés közben')
+        }
+      })
+      .catch((err) => {
+        alert('Hiba küldés közben')
+        console.error(err)
+      })
+  }
+
+  const renderNewTaskArea = () => {
+    return (
+      <div className={styles.inputArea}>
+        <textarea
+          onChange={(event) => setNewTask(event.target.value)}
+          value={newTask || ''}
+          className={styles.feedback}
+        />
+        <button className={styles.button} onClick={submitNewTask}>
+          Küldés
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <Head>
+        <title>Qmining - Todos | Frylabs.net</title>
+      </Head>
+      <div className={styles.description}>
+        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}>
+        Itt írhatsz új todo-ra ötleteket, vagy jelezhetsz hogy egyikben
+        segítenél
+      </div>
+      {renderNewTaskArea()}
+      <Sleep />
+    </div>
+  )
+}
diff --git a/src/pages/todos.module.css b/src/pages/todos.module.css
new file mode 100644
index 0000000..081839f
--- /dev/null
+++ b/src/pages/todos.module.css
@@ -0,0 +1,41 @@
+.description {
+  font-size: 15px;
+  color: white;
+  text-align: center;
+  margin: 10px;
+}
+
+.warning {
+  color: white;
+  padding: 10px;
+  font-size: 26px;
+  text-align: center;
+}
+
+.feedback {
+  color: var(--text-color);
+  background-color: var(--background-color);
+  font-size: 14px;
+  width: 100%;
+  box-sizing: border-box;
+  height: 60px;
+}
+
+.button {
+  background-color: var(--text-color);
+  border: none;
+  padding: 5px 15px;
+  margin: 5px;
+  color: white;
+  width: 200px;
+}
+
+.inputArea {
+  display: flex;
+}
+
+.title {
+  color: #9999ff;
+  font-size: 30px;
+  text-align: center;
+}