diff --git a/webapp/src/components/boardComponent.scss b/webapp/src/components/boardComponent.scss
index 294986d4a..7151e9af6 100644
--- a/webapp/src/components/boardComponent.scss
+++ b/webapp/src/components/boardComponent.scss
@@ -32,6 +32,13 @@
         > div {
             margin-right: 5px;
         }
+
+        .IconButton{
+            background-color: unset;
+            &:hover {
+                background-color: rgba(var(--main-fg), 0.1);
+            }
+        }
     }
 
 
diff --git a/webapp/src/components/boardComponent.tsx b/webapp/src/components/boardComponent.tsx
index fb029b317..315677b43 100644
--- a/webapp/src/components/boardComponent.tsx
+++ b/webapp/src/components/boardComponent.tsx
@@ -20,6 +20,7 @@ import HideIcon from '../widgets/icons/hide'
 import ShowIcon from '../widgets/icons/show'
 import DeleteIcon from '../widgets/icons/delete'
 import Button from '../widgets/buttons/button'
+import IconButton from '../widgets/buttons/iconButton'
 
 import BoardCard from './boardCard'
 import {BoardColumn} from './boardColumn'
@@ -308,7 +309,7 @@ class BoardComponent extends React.Component<Props, State> {
                     <Button>{`${group.cards.length}`}</Button>
                     <div className='octo-spacer'/>
                     <MenuWrapper>
-                        <Button><OptionsIcon/></Button>
+                        <IconButton icon={<OptionsIcon/>}/>
                         <Menu>
                             <Menu.Text
                                 id='hide'
@@ -318,11 +319,10 @@ class BoardComponent extends React.Component<Props, State> {
                             />
                         </Menu>
                     </MenuWrapper>
-                    <Button
-                        onClick={() => {
-                            this.addCard(undefined)
-                        }}
-                    ><AddIcon/></Button>
+                    <IconButton
+                        icon={<AddIcon/>}
+                        onClick={() => this.addCard(undefined)}
+                    />
                 </div>
             )
         }
@@ -372,7 +372,7 @@ class BoardComponent extends React.Component<Props, State> {
                 <Button>{`${group.cards.length}`}</Button>
                 <div className='octo-spacer'/>
                 <MenuWrapper>
-                    <Button><OptionsIcon/></Button>
+                    <IconButton icon={<OptionsIcon/>}/>
                     <Menu>
                         <Menu.Text
                             id='hide'
@@ -397,11 +397,10 @@ class BoardComponent extends React.Component<Props, State> {
                         )}
                     </Menu>
                 </MenuWrapper>
-                <Button
-                    onClick={() => {
-                        this.addCard(group.option.id)
-                    }}
-                ><AddIcon/></Button>
+                <IconButton
+                    icon={<AddIcon/>}
+                    onClick={() => this.addCard(group.option.id)}
+                />
             </div>
         )
     }