diff --git a/assets/tab-icon-outline.png b/assets/tab-icon-outline.png
new file mode 100644
index 0000000..3f5db22
Binary files /dev/null and b/assets/tab-icon-outline.png differ
diff --git a/assets/tab-icon.png b/assets/tab-icon.png
new file mode 100644
index 0000000..8e127c8
Binary files /dev/null and b/assets/tab-icon.png differ
diff --git a/src/navigation/MainTabNavigator.js b/src/navigation/MainTabNavigator.js
index 7f1f53e..26a826e 100644
--- a/src/navigation/MainTabNavigator.js
+++ b/src/navigation/MainTabNavigator.js
@@ -13,7 +13,7 @@ import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
 import PlanexScreen from '../screens/Websites/PlanexScreen';
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import AsyncStorageManager from "../managers/AsyncStorageManager";
-import {useTheme, withTheme} from 'react-native-paper';
+import {FAB, useTheme, withTheme} from 'react-native-paper';
 import i18n from "i18n-js";
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
 import ScannerScreen from "../screens/ScannerScreen";
@@ -22,7 +22,6 @@ import FeedItemScreen from "../screens/FeedItemScreen";
 import {createCollapsibleStack} from "react-navigation-collapsible";
 import GroupSelectionScreen from "../screens/GroupSelectionScreen";
 
-
 const TAB_ICONS = {
     home: 'triangle',
     planning: 'calendar-range',
@@ -330,18 +329,31 @@ class TabNavigator extends React.Component<Props> {
         this.createHomeStackComponent = () => HomeStackComponent(props.defaultRoute, props.defaultData);
     }
 
+    getHomeButton(focused: boolean) {
+        let icon = focused ? require('../../assets/tab-icon.png') : require('../../assets/tab-icon-outline.png')
+        return (
+                <FAB
+                    icon={icon}
+                    small
+                    style={{position: 'absolute', top: '-25%'}}/>
+        );
+    }
+
     render() {
         return (
             <Tab.Navigator
                 initialRouteName={this.defaultRoute}
-                barStyle={{backgroundColor: this.props.theme.colors.surface}}
+                barStyle={{backgroundColor: this.props.theme.colors.surface, overflow: 'visible'}}
                 screenOptions={({route}) => ({
-                    tabBarIcon: ({focused, color, size}) => {
+                    tabBarIcon: ({focused, color}) => {
                         let icon = TAB_ICONS[route.name];
-                        // tintColor is ignoring activeColor and inactiveColor for some reason
                         icon = focused ? icon : icon + ('-outline');
-                        return <MaterialCommunityIcons name={icon} color={color} size={26}/>;
+                        if (route.name !== "home")
+                            return <MaterialCommunityIcons name={icon} color={color} size={26}/>;
+                        else
+                            return this.getHomeButton(focused);
                     },
+                    tabBarLabel: route.name !== 'home' ? undefined : ''
                 })}
                 activeColor={this.props.theme.colors.primary}
                 inactiveColor={this.props.theme.colors.tabIcon}