diff --git a/src/components/Home/DashboardShortcuts.tsx b/src/components/Home/DashboardShortcuts.tsx
new file mode 100644
index 00000000..abd2b511
--- /dev/null
+++ b/src/components/Home/DashboardShortcuts.tsx
@@ -0,0 +1,147 @@
+/*
+ * Copyright (c) 2019 - 2020 Arnaud Vergnet.
+ *
+ * This file is part of Campus INSAT.
+ *
+ * Campus INSAT is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Campus INSAT is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import * as React from 'react';
+import { FlatList, StyleSheet } from 'react-native';
+import type { PlanningEventType } from '../../utils/Planning';
+import SmallDashboardItem from './SmallDashboardItem';
+import DashboardItem from './EventDashboardItem';
+import PreviewEventDashboardItem from './PreviewEventDashboardItem';
+import type { ServiceItemType } from '../../utils/Services';
+import { readData } from '../../utils/WebData';
+import Urls from '../../constants/Urls';
+import { getDisplayEvent, getFutureEvents } from '../../utils/Home';
+import { useNavigation } from '@react-navigation/native';
+import { TabRoutes } from '../../navigation/TabNavigator';
+
+export type FullDashboardType = {
+  today_menu: Array<{ [key: string]: object }>;
+  available_dryers: number;
+  available_washers: number;
+  today_events: Array<PlanningEventType>;
+  available_tutorials: number;
+  latest_notification: number;
+};
+
+export type RawDashboardType = {
+  dashboard: FullDashboardType;
+};
+
+type Props = {
+  services: Array<ServiceItemType | undefined>;
+  style?: object;
+};
+
+const styles = StyleSheet.create({
+  dashboardRow: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginTop: 10,
+    marginBottom: 10,
+  },
+});
+
+/**
+ * Shortcut shown on Home Screen.
+ */
+const DashboardShortcutItem = ({
+  item,
+  dashboardData,
+}: {
+  item: ServiceItemType | undefined;
+  dashboardData: FullDashboardType | null;
+}) => {
+  if (item != null) {
+    return (
+      <SmallDashboardItem
+        image={item.image}
+        onPress={item.onPress}
+        badgeCount={
+          dashboardData != null && item.badgeFunction != null
+            ? item.badgeFunction(dashboardData)
+            : undefined
+        }
+      />
+    );
+  }
+  return <SmallDashboardItem />;
+};
+
+/**
+ * Home screen dashboard shortcuts row.
+ * Fetches and updates badge count for the number of available washing machines...
+ */
+function DashboardShortcuts({ services, style }: Props) {
+  const [dashboardData, setDashboardData] =
+    React.useState<FullDashboardType | null>(null);
+  const navigation = useNavigation();
+
+  React.useEffect(() => {
+    const fetchDashboardData = async () => {
+      try {
+        const data = await readData<RawDashboardType>(Urls.app.dashboard);
+        if (data?.dashboard) {
+          setDashboardData(data.dashboard);
+        }
+      } catch (error) {
+        console.error('Failed to fetch dashboard data:', error);
+      }
+    };
+
+    fetchDashboardData();
+  }, []);
+
+  const renderItem = ({ item }: { item: ServiceItemType | undefined }) => (
+    <DashboardShortcutItem item={item} dashboardData={dashboardData} />
+  );
+
+  const onEventContainerClick = () => navigation.navigate(TabRoutes.Planning);
+
+  const getDashboardEvent = (content: Array<PlanningEventType>) => {
+    const futureEvents = getFutureEvents(content);
+    const displayEvent = getDisplayEvent(futureEvents);
+    return (
+      <DashboardItem
+        eventNumber={futureEvents.length}
+        clickAction={onEventContainerClick}
+      >
+        <PreviewEventDashboardItem
+          event={displayEvent}
+          clickAction={onEventContainerClick}
+        />
+      </DashboardItem>
+    );
+  };
+
+  return (
+    <>
+      <FlatList
+        data={services}
+        renderItem={renderItem}
+        horizontal
+        contentContainerStyle={[styles.dashboardRow, style]}
+      />
+      {dashboardData != null
+        ? getDashboardEvent(dashboardData.today_events)
+        : null}
+    </>
+  );
+}
+
+export default DashboardShortcuts;
diff --git a/src/components/Home/Feed.tsx b/src/components/Home/Feed.tsx
new file mode 100644
index 00000000..096eec14
--- /dev/null
+++ b/src/components/Home/Feed.tsx
@@ -0,0 +1,153 @@
+/*
+ * Copyright (c) 2019 - 2021 Arnaud Vergnet.
+ * Copyright (c) 2021 - 2026 Paul ALNET.
+ *
+ * This file is part of Campus INSAT.
+ *
+ * Campus INSAT is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Campus INSAT is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import { SectionListData, StyleSheet } from 'react-native';
+import i18n from 'i18n-js';
+import { Headline, useTheme } from 'react-native-paper';
+import { View } from 'react-native-animatable';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import WebSectionList from '../../components/Screens/WebSectionList';
+import FeedItem from '../../components/Home/FeedItem';
+import GENERAL_STYLES from '../../constants/Styles';
+import { useAuthenticatedRequest } from '../../context/loginContext';
+
+const REFRESH_TIME = 1000 * 20; // Refresh every 20 seconds
+
+export type FeedPostType = {
+  id: number;
+  clubId: number;
+  clubName: string;
+  clubLogo: string; // URL
+  date: number; // Unix timestamp
+  title: string;
+  content: string; // HTML
+  image: string | null; // URL
+};
+
+type FeedResponseType = {
+  posts: Array<FeedPostType>;
+  next: string; // URL to next page
+  canReact: boolean; // Can the user react to the posts
+};
+
+const styles = StyleSheet.create({
+  sectionHeader: {
+    textAlign: 'center',
+    marginTop: 50,
+    marginBottom: 10,
+  },
+  sectionHeaderEmpty: {
+    textAlign: 'center',
+    marginTop: 50,
+    marginBottom: 10,
+    marginLeft: 20,
+    marginRight: 20,
+  },
+});
+
+function Feed() {
+  const theme = useTheme();
+
+  const request = useAuthenticatedRequest<FeedResponseType>('feed');
+
+  const getRenderItem = ({ item }: { item: FeedPostType }) => (
+    <FeedItem item={item} />
+  );
+
+  const getRenderSectionHeader = (data: {
+    section: SectionListData<FeedPostType>;
+  }) => {
+    const icon = data.section.icon;
+    if (data.section.data.length > 0) return;
+
+    return (
+      <View>
+        <Headline
+          style={{
+            ...styles.sectionHeaderEmpty,
+            color: theme.colors.textDisabled,
+          }}
+        >
+          {data.section.title}
+        </Headline>
+        {icon ? (
+          <MaterialCommunityIcons
+            name={icon}
+            size={100}
+            color={theme.colors.textDisabled}
+            style={GENERAL_STYLES.center}
+          />
+        ) : null}
+      </View>
+    );
+  };
+
+  /**
+   * Creates the dataset to be used in the FlatList
+   */
+  const createDataset = (
+    fetchedData: FeedResponseType | undefined,
+    isLoading: boolean
+  ): Array<{
+    title: string;
+    data: [] | Array<FeedPostType>;
+    icon?: string;
+    id: string;
+  }> => {
+    let currentNewFeed: Array<FeedPostType> = [];
+    if (fetchedData && fetchedData.posts) {
+      currentNewFeed = fetchedData.posts;
+    }
+    if (currentNewFeed.length > 0) {
+      return [
+        {
+          title: i18n.t('screens.home.feedTitle'),
+          data: currentNewFeed,
+          id: 'feed',
+        },
+      ];
+    }
+    return [
+      {
+        title: isLoading
+          ? i18n.t('screens.home.feedLoading')
+          : i18n.t('screens.home.feedError'),
+        data: [],
+        icon: isLoading ? undefined : 'access-point-network-off',
+        id: 'feed',
+      },
+    ];
+  };
+
+  return (
+    <WebSectionList
+      scrollEnabled={false}
+      request={request}
+      createDataset={createDataset}
+      autoRefreshTime={REFRESH_TIME}
+      refreshOnFocus={true}
+      renderItem={getRenderItem}
+      renderSectionHeader={getRenderSectionHeader}
+    />
+  );
+}
+
+export default Feed;
diff --git a/src/components/Home/FeedItem.tsx b/src/components/Home/FeedItem.tsx
index 2ba00ab5..d66bc3f7 100644
--- a/src/components/Home/FeedItem.tsx
+++ b/src/components/Home/FeedItem.tsx
@@ -18,23 +18,19 @@
  */
 
 import * as React from 'react';
-import { Button, Card, Text, TouchableRipple } from 'react-native-paper';
-import { Image, StyleSheet, View } from 'react-native';
-import Autolink from 'react-native-autolink';
+import { Button, Card, TouchableRipple } from 'react-native-paper';
+import { StyleSheet, View } from 'react-native';
 import i18n from 'i18n-js';
-import type { FeedItemType } from '../../screens/Home/HomeScreen';
-import NewsSourcesConstants, {
-  AvailablePages,
-} from '../../constants/NewsSourcesConstants';
-import type { NewsSourceType } from '../../constants/NewsSourcesConstants';
+import type { FeedPostType } from '../../components/Home/Feed';
 import ImageGalleryButton from '../Media/ImageGalleryButton';
 import { useNavigation } from '@react-navigation/native';
 import GENERAL_STYLES from '../../constants/Styles';
 import { MainRoutes } from '../../navigation/MainNavigator';
+import { Avatar } from 'react-native-paper';
+import CustomHTML from '../Overrides/CustomHTML';
 
 type PropsType = {
-  item: FeedItemType;
-  height: number;
+  item: FeedPostType;
 };
 
 /**
@@ -60,6 +56,11 @@ const styles = StyleSheet.create({
   action: {
     marginLeft: 'auto',
   },
+  avatar: {
+    backgroundColor: 'transparent',
+    marginLeft: 10,
+    marginRight: 10,
+  },
 });
 
 /**
@@ -70,61 +71,52 @@ function FeedItem(props: PropsType) {
   const onPress = () => {
     navigation.navigate(MainRoutes.FeedInformation, {
       data: item,
-      date: getFormattedDate(props.item.time),
+      date: getFormattedDate(props.item.date),
     });
   };
 
-  const { item, height } = props;
+  const { item } = props;
   const image = item.image !== '' && item.image != null ? item.image : null;
-  const pageSource: NewsSourceType =
-    NewsSourcesConstants[item.page_id as AvailablePages];
   const cardMargin = 10;
-  const cardHeight = height - 2 * cardMargin;
   const imageSize = 250;
   const titleHeight = 80;
   const actionsHeight = 60;
-  const textHeight =
-    image != null
-      ? cardHeight - titleHeight - actionsHeight - imageSize
-      : cardHeight - titleHeight - actionsHeight;
   return (
     <Card
       style={{
         margin: cardMargin,
-        height: cardHeight,
       }}
     >
       <TouchableRipple style={GENERAL_STYLES.flex} onPress={onPress}>
         <View>
           <Card.Title
-            title={pageSource.name}
-            subtitle={getFormattedDate(item.time)}
-            left={() => <Image source={pageSource.icon} style={styles.image} />}
+            title={item.title}
+            subtitle={getFormattedDate(item.date)}
+            left={() => (
+              <Avatar.Image
+                style={styles.avatar}
+                size={40}
+                source={{ uri: item.clubLogo }}
+              />
+            )}
             style={{ height: titleHeight }}
           />
-          {image != null ? (
-            <ImageGalleryButton
-              images={[{ url: image }]}
-              style={{
-                ...styles.button,
-                width: imageSize,
-                height: imageSize,
-              }}
-            />
-          ) : null}
-          <Card.Content>
-            {item.message !== undefined ? (
-              <Autolink
-                text={item.message}
-                hashtag={'facebook'}
-                component={Text}
-                style={{ height: textHeight }}
-                truncate={32}
-                email={true}
-                url={true}
-                phone={true}
+
+          {
+            // TODO: enable images after further testing
+            false && image != null ? (
+              <ImageGalleryButton
+                images={[{ url: image }]}
+                style={{
+                  ...styles.button,
+                  width: imageSize,
+                  height: imageSize,
+                }}
               />
-            ) : null}
+            ) : null
+          }
+          <Card.Content>
+            <CustomHTML html={item.content} />
           </Card.Content>
           <Card.Actions style={{ height: actionsHeight }}>
             <Button onPress={onPress} icon="plus" style={styles.action}>
diff --git a/src/constants/NewsSourcesConstants.ts b/src/constants/NewsSourcesConstants.ts
deleted file mode 100644
index e3cab9d3..00000000
--- a/src/constants/NewsSourcesConstants.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * Copyright (c) 2019 - 2020 Arnaud Vergnet.
- *
- * This file is part of Campus INSAT.
- *
- * Campus INSAT is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * Campus INSAT is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-const ICON_AMICALE = require('../../assets/amicale.png');
-const ICON_CAMPUS = require('../../assets/android.icon.png');
-
-export type NewsSourceType = {
-  icon: number;
-  name: string;
-};
-
-export type AvailablePages = 'amicale.deseleves' | 'campus.insat';
-
-export default {
-  'amicale.deseleves': {
-    icon: ICON_AMICALE,
-    name: 'Amicale INSA Toulouse',
-  },
-  'campus.insat': {
-    icon: ICON_CAMPUS,
-    name: 'Application Campus',
-  },
-};
diff --git a/src/navigation/MainNavigator.tsx b/src/navigation/MainNavigator.tsx
index 3bd8b474..15640bb0 100644
--- a/src/navigation/MainNavigator.tsx
+++ b/src/navigation/MainNavigator.tsx
@@ -60,7 +60,7 @@ import GroupSelectionScreen from '../screens/Planex/GroupSelectionScreen';
 import ServicesSectionScreen from '../screens/Services/ServicesSectionScreen';
 import AmicaleContactScreen from '../screens/Amicale/AmicaleContactScreen';
 import NotificationsScreen from '../screens/Other/NotificationsScreen';
-import { FeedItemType } from '../screens/Home/HomeScreen';
+import { FeedPostType } from '../components/Home/Feed';
 import { PlanningEventType } from '../utils/Planning';
 import { ServiceCategoryType } from '../utils/Services';
 import { ParsedUrlDataType } from '../utils/URLHandler';
@@ -118,7 +118,7 @@ export type MainStackParamsList = DefaultParams & {
     title: string;
   };
   [MainRoutes.FeedInformation]: {
-    data: FeedItemType;
+    data: FeedPostType;
     date: string;
   };
   [MainRoutes.PlanningInformation]: PlanningInformationScreenParams;
diff --git a/src/screens/Home/FeedItemScreen.tsx b/src/screens/Home/FeedItemScreen.tsx
index a4f79d1d..05954a0d 100644
--- a/src/screens/Home/FeedItemScreen.tsx
+++ b/src/screens/Home/FeedItemScreen.tsx
@@ -17,26 +17,20 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import React, { useLayoutEffect } from 'react';
-import { Linking, Image, StyleSheet } from 'react-native';
-import { Card, Text } from 'react-native-paper';
-import Autolink from 'react-native-autolink';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { Card } from 'react-native-paper';
 import { StackScreenProps } from '@react-navigation/stack';
-import MaterialHeaderButtons, {
-  Item,
-} from '../../components/Overrides/CustomHeaderButton';
 
 import { ScrollView } from 'react-native';
 import ImageGalleryButton from '../../components/Media/ImageGalleryButton';
-import NewsSourcesConstants, {
-  AvailablePages,
-} from '../../constants/NewsSourcesConstants';
-import type { NewsSourceType } from '../../constants/NewsSourcesConstants';
 import {
   MainRoutes,
   MainStackParamsList,
 } from '../../navigation/MainNavigator';
-import { useNavigation } from '@react-navigation/core';
+import CustomHTML from '../../components/Overrides/CustomHTML';
+import { Avatar } from 'react-native-paper';
+import { TAB_BAR_HEIGHT } from '../../components/Tabbar/CustomTabBar';
 
 type Props = StackScreenProps<MainStackParamsList, MainRoutes.FeedInformation>;
 
@@ -54,49 +48,33 @@ const styles = StyleSheet.create({
     marginLeft: 'auto',
     marginRight: 'auto',
   },
+  avatar: {
+    backgroundColor: 'transparent',
+    marginLeft: 10,
+    marginRight: 10,
+  },
 });
 
 /**
  * Function defining a feed item page.
  */
 function FeedItemScreen(props: Props) {
-  const navigation = useNavigation();
-  const { data, date } = props.route.params;
-
-  useLayoutEffect(() => {
-    navigation.setOptions({
-      headerRight: getHeaderButton,
-    });
-  });
+  const { data } = props.route.params;
+  const post = data;
 
-  /**
-   * Opens the feed item out link in browser or compatible app
-   */
-  const onOutLinkPress = () => {
-    Linking.openURL(data.url);
-  };
-
-  const getHeaderButton = () => {
-    return (
-      <MaterialHeaderButtons>
-        <Item
-          title="main"
-          iconName="facebook"
-          color="#2e88fe"
-          onPress={onOutLinkPress}
-        />
-      </MaterialHeaderButtons>
-    );
-  };
-
-  const pageSource: NewsSourceType =
-    NewsSourcesConstants[data.page_id as AvailablePages];
   return (
     <ScrollView style={styles.container}>
       <Card.Title
-        title={pageSource.name}
-        subtitle={date}
-        left={() => <Image source={pageSource.icon} style={styles.image} />}
+        title={post.title}
+        subtitle={post.clubName}
+        left={() => (
+          <Avatar.Image
+            style={styles.avatar}
+            size={40}
+            source={{ uri: post.clubLogo }}
+          />
+        )}
+        style={{ height: 80 }}
       />
       {data.image ? (
         <ImageGalleryButton
@@ -104,18 +82,8 @@ function FeedItemScreen(props: Props) {
           style={styles.button}
         />
       ) : null}
-      <Card.Content style={{ paddingBottom: 20 }}>
-        {data.message !== undefined ? (
-          <Autolink
-            text={data.message}
-            hashtag={'facebook'}
-            component={Text}
-            truncate={32}
-            email={true}
-            url={true}
-            phone={true}
-          />
-        ) : null}
+      <Card.Content style={{ paddingBottom: TAB_BAR_HEIGHT + 20 }}>
+        <CustomHTML html={data.content} />
       </Card.Content>
     </ScrollView>
   );
diff --git a/src/screens/Home/HomeScreen.tsx b/src/screens/Home/HomeScreen.tsx
index 31a1e5fc..0422f5f2 100644
--- a/src/screens/Home/HomeScreen.tsx
+++ b/src/screens/Home/HomeScreen.tsx
@@ -19,86 +19,36 @@
 
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import {
-  FlatList,
-  NativeScrollEvent,
-  NativeSyntheticEvent,
-  SectionListData,
+  ScrollView,
+  //  NativeScrollEvent,
+  //  NativeSyntheticEvent,
   StyleSheet,
 } from 'react-native';
+import Feed from '../../components/Home/Feed';
 import i18n from 'i18n-js';
-import { Headline, useTheme } from 'react-native-paper';
+import { useTheme } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
 import { StackScreenProps } from '@react-navigation/stack';
 import * as Animatable from 'react-native-animatable';
 import { View } from 'react-native-animatable';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
-import DashboardItem from '../../components/Home/EventDashboardItem';
-import WebSectionList from '../../components/Screens/WebSectionList';
-import FeedItem from '../../components/Home/FeedItem';
-import SmallDashboardItem from '../../components/Home/SmallDashboardItem';
-import PreviewEventDashboardItem from '../../components/Home/PreviewEventDashboardItem';
 import ActionsDashBoardItem from '../../components/Home/ActionsDashboardItem';
 import MaterialHeaderButtons, {
   Item,
 } from '../../components/Overrides/CustomHeaderButton';
-import AnimatedFAB from '../../components/Animations/AnimatedFAB';
 import LogoutDialog from '../../components/Amicale/LogoutDialog';
 import { MASCOT_STYLE } from '../../components/Mascot/Mascot';
 import MascotPopup from '../../components/Mascot/MascotPopup';
-import { getDisplayEvent, getFutureEvents } from '../../utils/Home';
-import type { PlanningEventType } from '../../utils/Planning';
 import GENERAL_STYLES from '../../constants/Styles';
-import Urls from '../../constants/Urls';
-import { readData } from '../../utils/WebData';
 import { TabRoutes, TabStackParamsList } from '../../navigation/TabNavigator';
-import { ServiceItemType } from '../../utils/Services';
 import { useCurrentDashboard } from '../../context/preferencesContext';
 import { MainRoutes } from '../../navigation/MainNavigator';
 import { useLoginState } from '../../context/loginContext';
+import DashboardShortcuts from '../../components/Home/DashboardShortcuts';
 // import PushNotification from 'react-native-push-notification';
 
-const FEED_ITEM_HEIGHT = 500;
-
-const SECTIONS_ID = ['dashboard', 'news_feed'];
-
-const REFRESH_TIME = 1000 * 20; // Refresh every 20 seconds
-
-export type FeedItemType = {
-  id: string;
-  message: string;
-  url: string;
-  image: string | null;
-  video: string | null;
-  link: string | null;
-  time: number;
-  page_id: string;
-};
-
-export type FullDashboardType = {
-  today_menu: Array<{ [key: string]: object }>;
-  available_dryers: number;
-  available_washers: number;
-  today_events: Array<PlanningEventType>;
-  available_tutorials: number;
-  latest_notification: number;
-};
-
-type RawNewsFeedType = { [key: string]: Array<FeedItemType> };
-
-type RawDashboardType = {
-  news_feed: RawNewsFeedType;
-  dashboard: FullDashboardType;
-};
-
 type Props = StackScreenProps<TabStackParamsList, TabRoutes.Home>;
 
 const styles = StyleSheet.create({
-  dashboardRow: {
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    marginTop: 10,
-    marginBottom: 10,
-  },
   sectionHeader: {
     textAlign: 'center',
     marginTop: 50,
@@ -121,27 +71,11 @@ const styles = StyleSheet.create({
   },
 });
 
-const sortFeedTime = (a: FeedItemType, b: FeedItemType): number =>
-  b.time - a.time;
-
-const generateNewsFeed = (rawFeed: RawNewsFeedType): Array<FeedItemType> => {
-  const finalFeed: Array<FeedItemType> = [];
-  Object.keys(rawFeed).forEach((key: string) => {
-    const category: Array<FeedItemType> | null = rawFeed[key];
-    if (category != null && category.length > 0) {
-      finalFeed.push(...category);
-    }
-  });
-  finalFeed.sort(sortFeedTime);
-  return finalFeed;
-};
-
 function HomeScreen(props: Props) {
   const theme = useTheme();
   const navigation = useNavigation();
 
   const [dialogVisible, setDialogVisible] = useState(false);
-  const fabRef = useRef<AnimatedFAB>(null);
   const pageLoaded = useRef(false);
 
   const isLoggedIn = useLoginState();
@@ -149,8 +83,6 @@ function HomeScreen(props: Props) {
   // const { preferences, updatePreferences } = useNotificationPreferences();
   // const { updatePreferences } = useNotificationPreferences();
 
-  let homeDashboard: FullDashboardType | null = null;
-
   // function onRegister({ token }: { token: string }) {
   //   console.log('TOKEN:', token);
   //   PushNotification.subscribeToTopic('amicale');
@@ -213,183 +145,17 @@ function HomeScreen(props: Props) {
     }
   }, [navigation, props, pageLoaded]);
 
-  /**
-   * Gets the event dashboard render item.
-   * If a preview is available, it will be rendered inside
-   *
-   * @param content
-   * @return {*}
-   */
-  const getDashboardEvent = (content: Array<PlanningEventType>) => {
-    const futureEvents = getFutureEvents(content);
-    const displayEvent = getDisplayEvent(futureEvents);
-    // const clickPreviewAction = () =>
-    //     this.props.navigation.navigate('students', {
-    //         screen: 'planning-information',
-    //         params: {data: displayEvent}
-    //     });
-    return (
-      <DashboardItem
-        eventNumber={futureEvents.length}
-        clickAction={onEventContainerClick}
-      >
-        <PreviewEventDashboardItem
-          event={displayEvent}
-          clickAction={onEventContainerClick}
-        />
-      </DashboardItem>
-    );
-  };
-
-  /**
-   * Gets a dashboard item with a row of shortcut buttons.
-   *
-   * @param content
-   * @return {*}
-   */
-  const getDashboardRow = (content: Array<ServiceItemType | undefined>) => {
-    return (
-      <FlatList
-        data={content}
-        renderItem={getDashboardRowRenderItem}
-        horizontal
-        contentContainerStyle={styles.dashboardRow}
-      />
-    );
-  };
-
-  /**
-   * Gets a dashboard shortcut item
-   *
-   * @param item
-   * @returns {*}
-   */
-  const getDashboardRowRenderItem = ({
-    item,
-  }: {
-    item: ServiceItemType | undefined;
-  }) => {
-    if (item != null) {
-      return (
-        <SmallDashboardItem
-          image={item.image}
-          onPress={item.onPress}
-          badgeCount={
-            homeDashboard != null && item.badgeFunction != null
-              ? item.badgeFunction(homeDashboard)
-              : undefined
-          }
-        />
-      );
-    }
-    return <SmallDashboardItem />;
-  };
-
-  const getRenderItem = ({ item }: { item: FeedItemType }) => (
-    <FeedItem item={item} height={FEED_ITEM_HEIGHT} />
-  );
-
-  const getRenderSectionHeader = (data: {
-    section: SectionListData<FeedItemType>;
-  }) => {
-    const icon = data.section.icon;
-    if (data.section.data.length > 0) {
-      return (
-        <Headline style={styles.sectionHeader}>{data.section.title}</Headline>
-      );
-    }
-    return (
-      <View>
-        <Headline
-          style={{
-            ...styles.sectionHeaderEmpty,
-            color: theme.colors.textDisabled,
-          }}
-        >
-          {data.section.title}
-        </Headline>
-        {icon ? (
-          <MaterialCommunityIcons
-            name={icon}
-            size={100}
-            color={theme.colors.textDisabled}
-            style={GENERAL_STYLES.center}
-          />
-        ) : null}
-      </View>
-    );
-  };
-
-  const getListHeader = (fetchedData: RawDashboardType | undefined) => {
-    let dashboard = null;
-    if (fetchedData != null) {
-      dashboard = fetchedData.dashboard;
-    }
+  const getListHeader = () => {
     return (
       <Animatable.View animation="fadeInDown" duration={500} useNativeDriver>
         <ActionsDashBoardItem />
-        {getDashboardRow(currentDashboard)}
-        {getDashboardEvent(dashboard == null ? [] : dashboard.today_events)}
+        <DashboardShortcuts services={currentDashboard} />
       </Animatable.View>
     );
   };
 
   const hideDisconnectDialog = () => setDialogVisible(false);
 
-  /**
-   * Creates the dataset to be used in the FlatList
-   *
-   * @param fetchedData
-   * @param isLoading
-   * @return {*}
-   */
-  const createDataset = (
-    fetchedData: RawDashboardType | undefined,
-    isLoading: boolean
-  ): Array<{
-    title: string;
-    data: [] | Array<FeedItemType>;
-    icon?: string;
-    id: string;
-  }> => {
-    let currentNewFeed: Array<FeedItemType> = [];
-    if (fetchedData) {
-      if (fetchedData.news_feed) {
-        currentNewFeed = generateNewsFeed(fetchedData.news_feed);
-      }
-      if (fetchedData.dashboard) {
-        homeDashboard = fetchedData.dashboard;
-      }
-    }
-    if (currentNewFeed.length > 0) {
-      return [
-        {
-          title: i18n.t('screens.home.feedTitle'),
-          data: currentNewFeed,
-          id: SECTIONS_ID[1],
-        },
-      ];
-    }
-    return [
-      {
-        title: isLoading
-          ? i18n.t('screens.home.feedLoading')
-          : i18n.t('screens.home.feedError'),
-        data: [],
-        icon: isLoading ? undefined : 'access-point-network-off',
-        id: SECTIONS_ID[1],
-      },
-    ];
-  };
-
-  const onEventContainerClick = () => navigation.navigate(TabRoutes.Planning);
-
-  const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    if (fabRef.current) {
-      fabRef.current.onScroll(event);
-    }
-  };
-
   /**
    * Callback when pressing the login button on the banner.
    * This hides the banner and takes the user to the login page.
@@ -401,19 +167,10 @@ function HomeScreen(props: Props) {
 
   return (
     <View style={GENERAL_STYLES.flex}>
-      <View style={styles.content}>
-        <WebSectionList
-          request={() => readData<RawDashboardType>(Urls.app.dashboard)}
-          createDataset={createDataset}
-          autoRefreshTime={REFRESH_TIME}
-          refreshOnFocus={true}
-          renderItem={getRenderItem}
-          itemHeight={FEED_ITEM_HEIGHT}
-          onScroll={onScroll}
-          renderSectionHeader={getRenderSectionHeader}
-          renderListHeaderComponent={getListHeader}
-        />
-      </View>
+      <ScrollView style={styles.content}>
+        {getListHeader()}
+        <Feed />
+      </ScrollView>
       {!isLoggedIn ? (
         <MascotPopup
           title={i18n.t('screens.home.mascotDialog.title')}
diff --git a/src/utils/Services.ts b/src/utils/Services.ts
index fd16e640..e440a71b 100644
--- a/src/utils/Services.ts
+++ b/src/utils/Services.ts
@@ -17,7 +17,7 @@
  * along with Campus INSAT.  If not, see <https://www.gnu.org/licenses/>.
  */
 import i18n from 'i18n-js';
-import type { FullDashboardType } from '../screens/Home/HomeScreen';
+import type { FullDashboardType } from '../components/Home/DashboardShortcuts';
 import Urls from '../constants/Urls';
 import { MainRoutes } from '../navigation/MainNavigator';
 import { TabRoutes } from '../navigation/TabNavigator';
diff --git a/src/utils/WebData.ts b/src/utils/WebData.ts
index 32a4dfc0..26261ead 100644
--- a/src/utils/WebData.ts
+++ b/src/utils/WebData.ts
@@ -73,7 +73,7 @@ export async function apiRequest<T>(
       headers.append('Accept', 'application/json');
       headers.append('Content-Type', 'application/json');
       headers.append('User-Agent', userAgent);
-      if (token) {
+      if (token && token.length > 0) {
         headers.append('Authorization', 'Bearer ' + token);
       }