diff --git a/src/components/todoStuff/todo.module.css b/src/components/todoStuff/todo.module.css
new file mode 100644
index 0000000..79f61a5
--- /dev/null
+++ b/src/components/todoStuff/todo.module.css
@@ -0,0 +1,22 @@
+.groupDescription {
+  font-size: 16px;
+  padding: 4px;
+}
+
+.groupContainer {
+  display: flex;
+}
+
+.group {
+  padding: 8px 16px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.group:hover {
+  background-color: #333;
+}
+
+.selectedGroup {
+  background-color: #444;
+}
diff --git a/src/components/todoStuff/todoBoard.js b/src/components/todoStuff/todoBoard.js
index 36d0abd..9e95298 100644
--- a/src/components/todoStuff/todoBoard.js
+++ b/src/components/todoStuff/todoBoard.js
@@ -5,7 +5,14 @@ import TodoCard from './todoCard.js'
 import styles from './todoBoard.module.css'
 
 export default function TodoBoard(props) {
-  const { columns, cards, userId, categories, onCardClick } = props
+  const {
+    columns,
+    cards,
+    userId,
+    categories,
+    onCardClick,
+    selectedGroup,
+  } = props
 
   const clickableTypes = Object.keys(columns).reduce((acc, key) => {
     const col = columns[key]
@@ -24,21 +31,27 @@ export default function TodoBoard(props) {
             <div className={styles.tableCol} key={key}>
               <div className={styles.categoryName}>{category.name}</div>
               {cards.map((card, i) => {
-                if (card.state === key) {
-                  // TODO: determine if clickable here
-                  return (
-                    <TodoCard
-                      key={i}
-                      cardData={card}
-                      userId={userId}
-                      categories={categories}
-                      onClick={onCardClick}
-                      clickable={clickableTypes.includes(key)}
-                    />
-                  )
-                } else {
+                const shouldHide =
+                  card.state !== key ||
+                  (selectedGroup !== null &&
+                    selectedGroup !== 'uncat' &&
+                    card.group !== selectedGroup) ||
+                  (selectedGroup === 'uncat' && card.group !== undefined)
+
+                if (shouldHide) {
                   return null
                 }
+
+                return (
+                  <TodoCard
+                    key={i}
+                    cardData={card}
+                    userId={userId}
+                    categories={categories}
+                    onClick={onCardClick}
+                    clickable={clickableTypes.includes(key)}
+                  />
+                )
               })}
             </div>
           )
diff --git a/src/components/todoStuff/todoCard.js b/src/components/todoStuff/todoCard.js
index 051832a..7dd8313 100644
--- a/src/components/todoStuff/todoCard.js
+++ b/src/components/todoStuff/todoCard.js
@@ -4,12 +4,15 @@ import styles from './todoCard.module.css'
 
 export default function TodoCard(props) {
   const { categories, onClick, userId } = props
-  const { name, category, points, votes, id } = props.cardData
+  const { name, category, points, votes, id, group } = props.cardData
   const voted = votes.includes(userId)
 
   return (
     <div
-      className={`${styles.card} ${voted && styles.voted}`}
+      className={styles.card}
+      style={{
+        border: `2px solid ${group || '#99f'}`,
+      }}
       onClick={() => {
         onClick(props.cardData)
       }}
@@ -31,7 +34,7 @@ export default function TodoCard(props) {
         </span>
       </div>
       <div className={styles.numbers}>
-        <div>
+        <div className={`${voted && styles.voted}`}>
           <div>{`Votes: ${votes.length}`}</div>
         </div>
         <div>{points}</div>
diff --git a/src/components/todoStuff/todoCard.module.css b/src/components/todoStuff/todoCard.module.css
index 86cb918..c015768 100644
--- a/src/components/todoStuff/todoCard.module.css
+++ b/src/components/todoStuff/todoCard.module.css
@@ -1,5 +1,4 @@
 .card {
-  border: 2px solid #99f;
   border-radius: 2px;
   padding: 5px;
   margin: 6px 3px;
@@ -7,7 +6,7 @@
 }
 
 .voted {
-  border: 2px solid #cf9;
+  color: #cf9;
 }
 
 .card:hover {
@@ -26,8 +25,8 @@
 }
 
 .category {
-  word-break: break-all;
   font-size: 10px;
+  white-space: nowrap;
 }
 
 .numbers {
diff --git a/src/components/todoStuff/todoRow.js b/src/components/todoStuff/todoRow.js
index cba5bee..13ad19a 100644
--- a/src/components/todoStuff/todoRow.js
+++ b/src/components/todoStuff/todoRow.js
@@ -4,7 +4,7 @@ import styles from './todoRow.module.css'
 
 export default function TodoRow(props) {
   const { categories, userId, onClick } = props
-  const { name, category, votes, id } = props.rowData
+  const { name, category, votes, id, group } = props.rowData
   const voted = votes.includes(userId)
 
   return (
@@ -12,7 +12,10 @@ export default function TodoRow(props) {
       onClick={() => {
         onClick(props.rowData)
       }}
-      className={`${styles.row} ${voted && styles.voted}`}
+      className={styles.row}
+      style={{
+        border: `2px solid ${group || '#99f'}`,
+      }}
     >
       <div className={styles.id}>{`#${id}`}</div>
       <div className={styles.description}>{name}</div>
@@ -30,7 +33,9 @@ export default function TodoRow(props) {
           {categories[category].name}
         </div>
       </div>
-      <div className={styles.votes}>{`Votes: ${votes.length}`}</div>
+      <div
+        className={`${styles.votes} ${voted && styles.voted}`}
+      >{`Votes: ${votes.length}`}</div>
     </div>
   )
 }
diff --git a/src/components/todoStuff/todoRow.module.css b/src/components/todoStuff/todoRow.module.css
index 90085de..1e8c573 100644
--- a/src/components/todoStuff/todoRow.module.css
+++ b/src/components/todoStuff/todoRow.module.css
@@ -33,7 +33,7 @@
 }
 
 .voted {
-  border: 2px solid #cf9;
+  color: #cf9;
 }
 
 .catName {
@@ -41,6 +41,6 @@
 }
 
 .category {
-  word-break: break-all;
   font-size: 10px;
+  white-space: nowrap;
 }
diff --git a/src/components/todoStuff/todoSidebar.js b/src/components/todoStuff/todoSidebar.js
index c57c6f2..ee6c41e 100644
--- a/src/components/todoStuff/todoSidebar.js
+++ b/src/components/todoStuff/todoSidebar.js
@@ -20,6 +20,7 @@ export default function Todos({ card, userId, categories, columns, voteOn }) {
             color: 'white',
             borderRadius: '2px',
             padding: '0px 2px',
+            whiteSpace: 'nowrap',
           }}
         >
           {categories[category].name}
diff --git a/src/components/todoStuff/todoTable.js b/src/components/todoStuff/todoTable.js
index 01e7ae9..dcff74e 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, onClick } = props
+  const { tables, cards, userId, categories, onClick, selectedGroup } = props
 
   return (
     <div className={styles.tableContainer}>
@@ -21,6 +21,17 @@ export default function TodoBoard(props) {
             <div className={styles.container} key={key}>
               <div className={styles.title}>{table.name}</div>
               {tableCards.map((card, i) => {
+                const shouldHide =
+                  card.state !== key ||
+                  (selectedGroup !== null &&
+                    selectedGroup !== 'uncat' &&
+                    card.group !== selectedGroup) ||
+                  (selectedGroup === 'uncat' && card.group !== undefined)
+
+                if (shouldHide) {
+                  return null
+                }
+
                 return (
                   <TodoRow
                     onClick={onClick}
diff --git a/src/components/todoStuff/todos.js b/src/components/todoStuff/todos.js
index 3388cb1..1bc560b 100644
--- a/src/components/todoStuff/todos.js
+++ b/src/components/todoStuff/todos.js
@@ -7,6 +7,7 @@ import TodoSidebar from './todoSidebar.js'
 
 import Sidebar from '../sidebar.js'
 
+import styles from './todo.module.css'
 // import styles from './todos.module.css'
 import constants from '../../constants.json'
 
@@ -21,6 +22,8 @@ export default function Todos() {
   const [categories, setCategories] = useState(null)
   const [userId, setUserId] = useState(null)
   const [sidebarCard, setSidebarCard] = useState(null)
+  const [namedGroups, setGroups] = useState(null)
+  const [selectedGroup, setSelectedGroup] = useState(null)
 
   useEffect(() => {
     console.info('Fetching todos')
@@ -37,6 +40,7 @@ export default function Todos() {
 
   const setTodos = (data) => {
     setCategories(data.todos.categories)
+    setGroups(data.todos.groups)
     setUserId(data.userId)
 
     setCards(data.todos.cards)
@@ -81,6 +85,58 @@ export default function Todos() {
     }
   })
 
+  const groups = cards.reduce((acc, card) => {
+    if (!acc.includes(card.group) && card.group) {
+      acc.push(card.group)
+    }
+    return acc
+  }, [])
+
+  const renderGrouper = () => {
+    const sg = namedGroups[selectedGroup]
+    return (
+      <>
+        <div className={styles.groupContainer}>
+          {groups.map((group) => {
+            const namedGroup = namedGroups[group]
+            return (
+              <div
+                className={`${styles.group} ${group === selectedGroup &&
+                  styles.selectedGroup}`}
+                key={group}
+                onClick={() => {
+                  setSelectedGroup(group)
+                }}
+              >
+                {namedGroup ? namedGroup.name : group}
+              </div>
+            )
+          })}
+          <div
+            className={`${styles.group} ${'uncat' === selectedGroup &&
+              styles.selectedGroup}`}
+            onClick={() => {
+              setSelectedGroup('uncat')
+            }}
+          >
+            {'Kategorizálatlan'}
+          </div>
+          <div
+            className={styles.group}
+            onClick={() => {
+              setSelectedGroup(null)
+            }}
+          >
+            {'Összes'}
+          </div>
+        </div>
+        {sg && sg.description ? (
+          <div className={styles.groupDescription}>{sg.description}</div>
+        ) : null}
+      </>
+    )
+  }
+
   return (
     <div>
       {sidebarCard && (
@@ -110,6 +166,7 @@ export default function Todos() {
           />
         </Sidebar>
       )}
+      {renderGrouper()}
       <div
         style={{
           // width: '100%',
@@ -122,6 +179,7 @@ export default function Todos() {
           userId={userId}
           categories={categories}
           onCardClick={onClick}
+          selectedGroup={selectedGroup}
         />
         <TodoTable
           tables={tables}
@@ -129,6 +187,7 @@ export default function Todos() {
           userId={userId}
           categories={categories}
           onClick={onClick}
+          selectedGroup={selectedGroup}
         />
       </div>
     </div>