diff --git a/src/components/ui/feedback/Attention.stories.tsx b/src/components/ui/feedback/Attention.stories.tsx
deleted file mode 100644
index 3aae9913d..000000000
--- a/src/components/ui/feedback/Attention.stories.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import {Meta, StoryObj} from '@storybook/react'
-import {Attention} from '@/components/ui/feedback/Attention'
-import {Paragraph} from '@/components/ui/text/Paragraph'
-
-export default {
-  component: Attention,
-} as Meta<typeof Attention>
-
-export const Default: StoryObj<typeof Attention> = {
-  args: {
-    children: (
-      <Paragraph>
-        Er is iets misgegaan met de app. Sorry voor het ongemak!
-      </Paragraph>
-    ),
-    warning: false,
-  },
-}
diff --git a/src/components/ui/feedback/Attention.tsx b/src/components/ui/feedback/Attention.tsx
deleted file mode 100644
index bdb3a6dfb..000000000
--- a/src/components/ui/feedback/Attention.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import {ReactNode} from 'react'
-import {StyleSheet, View} from 'react-native'
-import {Theme} from '@/themes/themes'
-import {useThemable} from '@/themes/useThemable'
-
-type Props = {
-  children: ReactNode
-  warning?: boolean
-}
-
-export const Attention = ({children, warning}: Props) => {
-  const styles = useThemable(createStyles)
-
-  return (
-    <View
-      accessibilityLanguage="nl-NL"
-      accessibilityRole="alert"
-      style={[styles.attention, warning && styles.warning]}>
-      {children}
-    </View>
-  )
-}
-
-const borderWidth = 2
-
-const createStyles = ({color, size}: Theme) =>
-  StyleSheet.create({
-    attention: {
-      borderLeftColor: color.attention.default.border,
-      borderLeftWidth: borderWidth,
-      paddingLeft: size.spacing.md - borderWidth,
-    },
-    warning: {
-      borderLeftColor: color.attention.warning.border,
-    },
-  })
diff --git a/src/components/ui/feedback/Warning.stories.tsx b/src/components/ui/feedback/Warning.stories.tsx
deleted file mode 100644
index a094868fc..000000000
--- a/src/components/ui/feedback/Warning.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Meta, StoryObj} from '@storybook/react'
-import {Warning} from '@/components/ui/feedback/Warning'
-
-export default {
-  component: Warning,
-} as Meta<typeof Warning>
-
-export const Default: StoryObj<typeof Warning> = {
-  args: {
-    title: 'Sorry …',
-    text: 'Er is iets misgegaan',
-  },
-}
diff --git a/src/components/ui/feedback/Warning.tsx b/src/components/ui/feedback/Warning.tsx
deleted file mode 100644
index d3d64f200..000000000
--- a/src/components/ui/feedback/Warning.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import {Attention} from '@/components/ui/feedback/Attention'
-import {Paragraph} from '@/components/ui/text/Paragraph'
-import {Title} from '@/components/ui/text/Title'
-
-type Props = {
-  text: string
-  title: string
-}
-
-export const Warning = ({text, title}: Props) => (
-  <Attention warning>
-    <Title
-      level="h5"
-      text={title}
-    />
-    <Paragraph variant="small">{text}</Paragraph>
-  </Attention>
-)
diff --git a/src/components/ui/feedback/alert/AlertBase.tsx b/src/components/ui/feedback/alert/AlertBase.tsx
index 3e4fbd12b..4ab2b6f47 100644
--- a/src/components/ui/feedback/alert/AlertBase.tsx
+++ b/src/components/ui/feedback/alert/AlertBase.tsx
@@ -66,9 +66,7 @@ export const AlertBase = ({
           ref={setAccessibilityFocus}
           style={styles?.view}
           testID={testID}>
-          {children ? (
-            children
-          ) : (
+          {children ?? (
             <Row align="between">
               <SingleSelectable
                 accessibilityLabel={accessibleText(title, text)}
diff --git a/src/components/ui/feedback/alert/AlertInformation.tsx b/src/components/ui/feedback/alert/AlertInformation.tsx
deleted file mode 100644
index ecce5b95b..000000000
--- a/src/components/ui/feedback/alert/AlertInformation.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import {AlertVariant} from '@/components/ui/feedback/alert/Alert.types'
-import {
-  AlertBase,
-  AlertBaseProps,
-} from '@/components/ui/feedback/alert/AlertBase'
-
-export const AlertInformation = (props: AlertBaseProps) => (
-  <AlertBase
-    {...props}
-    variant={AlertVariant.information}
-  />
-)
diff --git a/src/modules/home/components/ModuleSettings.tsx b/src/modules/home/components/ModuleSettings.tsx
index 25256f0a5..6c858647c 100644
--- a/src/modules/home/components/ModuleSettings.tsx
+++ b/src/modules/home/components/ModuleSettings.tsx
@@ -1,15 +1,22 @@
 import {pascalCase} from 'pascal-case'
 import {getVersion} from 'react-native-device-info'
+import {NoInternetErrorFullScreen} from '@/components/features/NoInternetFullScreenError'
 import {Box} from '@/components/ui/containers/Box'
+import {EmptyMessage} from '@/components/ui/feedback/EmptyMessage'
 import {PleaseWait} from '@/components/ui/feedback/PleaseWait'
 import {Column} from '@/components/ui/layout/Column'
+import {FullScreenError} from '@/components/ui/layout/FullScreenError'
+import {ModulesFigure} from '@/components/ui/media/errors/ModulesFigure'
 import {Paragraph} from '@/components/ui/text/Paragraph'
+import {useSelector} from '@/hooks/redux/useSelector'
 import {useModules} from '@/hooks/useModules'
 import {ModuleSetting} from '@/modules/home/components/ModuleSetting'
-import {ModulesWarning} from '@/modules/home/components/ModulesWarning'
+import {selectIsInternetReachable} from '@/store/slices/internetConnection'
 
 export const ModuleSettings = () => {
-  const {toggleableModules, modulesLoading} = useModules()
+  const {modulesError, toggleableModules, modulesLoading, refetchModules} =
+    useModules()
+  const isInternetReachable = useSelector(selectIsInternetReachable)
 
   if (modulesLoading) {
     return (
@@ -20,14 +27,38 @@ export const ModuleSettings = () => {
     )
   }
 
-  if (!toggleableModules || toggleableModules.length === 0) {
+  if (modulesError || !toggleableModules) {
+    if (isInternetReachable === false) {
+      return <NoInternetErrorFullScreen />
+    }
+
     return (
-      <ModulesWarning
-        text={`We hebben geen modules gevonden voor versie ${getVersion()} van de app.`}
+      <FullScreenError
+        buttonAccessibilityLabel="Laad de modules opnieuw"
+        buttonLabel="Laad opnieuw"
+        error={modulesError}
+        Image={ModulesFigure}
+        onPress={refetchModules}
+        testProps={{
+          testID: 'ModuleSettingsErrorScreen',
+        }}
+        text="Probeer het later opnieuw."
+        title="Helaas kunnen de modules niet geladen worden"
       />
     )
   }
 
+  if (!toggleableModules.length) {
+    return (
+      <Box>
+        <EmptyMessage
+          testID="ModuleSettingsEmptyList"
+          text={`We hebben geen modules gevonden voor versie ${getVersion()} van de app.`}
+        />
+      </Box>
+    )
+  }
+
   return (
     <Box>
       <Column gutter="md">
diff --git a/src/modules/home/components/Modules.tsx b/src/modules/home/components/Modules.tsx
index 4e289d2e3..0ce1313f4 100644
--- a/src/modules/home/components/Modules.tsx
+++ b/src/modules/home/components/Modules.tsx
@@ -1,38 +1,18 @@
 import {pascalCase} from 'pascal-case'
 import {Box} from '@/components/ui/containers/Box'
 import {EmptyMessage} from '@/components/ui/feedback/EmptyMessage'
-import {PleaseWait} from '@/components/ui/feedback/PleaseWait'
 import {Column} from '@/components/ui/layout/Column'
-import {useModules} from '@/hooks/useModules'
 import {ModuleButton} from '@/modules/home/components/ModuleButton'
-import {ModulesWarning} from '@/modules/home/components/ModulesWarning'
-import {ModuleStatus} from '@/modules/types'
+import {ModuleStatus, type Module} from '@/modules/types'
 
-export const Modules = () => {
-  const {enabledModules, modulesError, modulesLoading, refetchModules} =
-    useModules()
-
-  if (modulesLoading) {
-    return (
-      <PleaseWait
-        grow
-        testID="HomeModulesLoadingSpinner"
-      />
-    )
-  }
-
-  if (modulesError || !enabledModules) {
-    return (
-      <ModulesWarning
-        onRetry={refetchModules}
-        text="Er is iets misgegaan bij het ophalen van de modules."
-      />
-    )
-  }
+type Props = {
+  modules: Module[]
+}
 
-  const availableModules = enabledModules?.filter(m => !m.hiddenInMenu)
+export const Modules = ({modules}: Props) => {
+  const availableModules = modules?.filter(m => !m.hiddenInMenu)
 
-  if (!availableModules.length) {
+  if (!modules.length) {
     return (
       <Box>
         <EmptyMessage
diff --git a/src/modules/home/components/ModulesWarning.tsx b/src/modules/home/components/ModulesWarning.tsx
deleted file mode 100644
index 4c805edaa..000000000
--- a/src/modules/home/components/ModulesWarning.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import {Button} from '@/components/ui/buttons/Button'
-import {Box} from '@/components/ui/containers/Box'
-import {Warning} from '@/components/ui/feedback/Warning'
-import {Gutter} from '@/components/ui/layout/Gutter'
-
-type Props = {
-  onRetry?: () => void
-  text: string
-}
-
-export const ModulesWarning = ({onRetry, text}: Props) => (
-  <Box>
-    <Warning
-      text={text}
-      title="Fout"
-    />
-    <Gutter height="md" />
-    {!!onRetry && (
-      <Button
-        label="Probeer opnieuw"
-        onPress={onRetry}
-        testID="HomeModulesWarningRetryButton"
-      />
-    )}
-  </Box>
-)
diff --git a/src/modules/home/screens/Home.screen.tsx b/src/modules/home/screens/Home.screen.tsx
index 74de18a38..d4a21baa3 100644
--- a/src/modules/home/screens/Home.screen.tsx
+++ b/src/modules/home/screens/Home.screen.tsx
@@ -10,7 +10,8 @@ import {Modules} from '@/modules/home/components/Modules'
 import {selectIsInternetReachable} from '@/store/slices/internetConnection'
 
 export const HomeScreen = () => {
-  const {modulesError, modulesLoading, refetchModules} = useModules()
+  const {enabledModules, modulesError, modulesLoading, refetchModules} =
+    useModules()
   const {isPortrait} = useDeviceContext()
 
   const isInternetReachable = useSelector(selectIsInternetReachable)
@@ -19,7 +20,7 @@ export const HomeScreen = () => {
     return <PleaseWait testID="HomeLoadingSpinner" />
   }
 
-  if (modulesError) {
+  if (modulesError || !enabledModules) {
     if (isInternetReachable === false) {
       return <NoInternetErrorFullScreen />
     }
@@ -48,7 +49,7 @@ export const HomeScreen = () => {
 
   return (
     <Screen testID="HomeScreen">
-      <Modules />
+      <Modules modules={enabledModules} />
     </Screen>
   )
 }
diff --git a/src/modules/waste-guide/components/Fraction.tsx b/src/modules/waste-guide/components/Fraction.tsx
index 6331bc9e8..7b2611b69 100644
--- a/src/modules/waste-guide/components/Fraction.tsx
+++ b/src/modules/waste-guide/components/Fraction.tsx
@@ -1,4 +1,4 @@
-import {Attention} from '@/components/ui/feedback/Attention'
+import {AlertBase} from '@/components/ui/feedback/alert/AlertBase'
 import {AlertWarning} from '@/components/ui/feedback/alert/AlertWarning'
 import {Column} from '@/components/ui/layout/Column'
 import {Row} from '@/components/ui/layout/Row'
@@ -140,12 +140,12 @@ export const Fraction = ({fraction, testID}: Props) => {
         />
       </Column>
       {!!afvalwijzerAfvalkalenderOpmerking && (
-        <Attention>
+        <AlertBase testID={testID + 'Remark'}>
           <FractionContent
             content={afvalwijzerAfvalkalenderOpmerking}
             testID={`${testID}RemarksContent`}
           />
-        </Attention>
+        </AlertBase>
       )}
     </Column>
   )