diff --git a/src/components/area.tsx b/src/components/area.tsx
new file mode 100644
index 0000000..9f31d52
--- /dev/null
+++ b/src/components/area.tsx
@@ -0,0 +1,50 @@
+import { ReactElement } from "react";
+import { Card, Icon, Text } from "react-native-paper";
+import { StyleSheet, View } from "react-native";
+
+export default function Area({
+  title,
+  icon,
+  children,
+  right,
+}: {
+  title: string;
+  icon: string;
+  children?: ReactElement | ReactElement[];
+  right?: undefined | ReactElement;
+}) {
+  return (
+    <Card>
+      <Card.Content>
+        <View style={styles.container}>
+          <View style={styles.header}>
+            <Icon size={22} source={icon} />
+            <Text style={styles.text} variant={"titleMedium"}>
+              {title}
+            </Text>
+            {right}
+          </View>
+          {children && <View style={styles.content}>{children}</View>}
+        </View>
+      </Card.Content>
+    </Card>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 16,
+  },
+  header: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+  },
+  text: {
+    flex: 1,
+  },
+  content: {
+    gap: 10,
+  },
+});
diff --git a/src/components/feed/feed.tsx b/src/components/feed/feed.tsx
index 305578e..2f89fa1 100644
--- a/src/components/feed/feed.tsx
+++ b/src/components/feed/feed.tsx
@@ -4,20 +4,18 @@ import { useAtomValue } from "jotai";
 import { feedAtom } from "../../stores/feed";
 import { ActivityIndicator, Card } from "react-native-paper";
 import Item from "./item";
+import Area from "../area";
 
 export default function Feed() {
   const feed = useAtomValue(feedAtom);
 
   return (
-    <Card>
-      <Card.Title title={"Nieuws"} />
-      <Card.Content style={{ gap: 10 }}>
-        {feed ? (
-          feed.map((item, index) => <Item key={index} item={item} />)
-        ) : (
-          <ActivityIndicator animating={true} />
-        )}
-      </Card.Content>
-    </Card>
+    <Area title={"Nieuws"} icon={"bullhorn"}>
+      {feed ? (
+        feed.map((item, index) => <Item key={index} item={item} />)
+      ) : (
+        <ActivityIndicator animating={true} />
+      )}
+    </Area>
   );
 }
diff --git a/src/components/register/listing.tsx b/src/components/register/listing.tsx
index b1ed5ad..cd03d1a 100644
--- a/src/components/register/listing.tsx
+++ b/src/components/register/listing.tsx
@@ -10,6 +10,7 @@ import { StyleSheet, TouchableOpacity } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { NativeStackNavigationProp } from "react-native-screens/native-stack";
 import { StackParamList } from "../../../App";
+import Area from "../area";
 
 type SlotNavigationProps = NativeStackNavigationProp<StackParamList>;
 
@@ -38,23 +39,14 @@ export default function Listing() {
   const slots = useAtomValue(slotsAtom);
 
   return (
-    <Card>
-      <Card.Title title={"Aanmelden"} />
-      <Card.Content style={styles.content}>
-        {slots ? (
-          slots.map((slot, index) => (
-            <SlotListing key={index} slot={slot} index={index} />
-          ))
-        ) : (
-          <ActivityIndicator animating={true} />
-        )}
-      </Card.Content>
-    </Card>
+    <Area title={"Aanmelden"} icon={"playlist-check"}>
+      {slots ? (
+        slots.map((slot, index) => (
+          <SlotListing key={index} slot={slot} index={index} />
+        ))
+      ) : (
+        <ActivityIndicator animating={true} />
+      )}
+    </Area>
   );
 }
-
-const styles = StyleSheet.create({
-  content: {
-    gap: 10,
-  },
-});
diff --git a/src/components/register/precenseCard.tsx b/src/components/register/precenseCard.tsx
index 0634895..f794f95 100644
--- a/src/components/register/precenseCard.tsx
+++ b/src/components/register/precenseCard.tsx
@@ -38,7 +38,7 @@ export default function PresenceCard({
   if (!slot.presence) return;
 
   return (
-    <>
+    <View>
       <PaperSelect
         label={"Lid handmatig aanmelden"}
         arrayList={members
@@ -69,7 +69,7 @@ export default function PresenceCard({
           <Presence key={presence.id} presence={presence} slot={slot} />
         ))}
       </View>
-    </>
+    </View>
   );
 }
 
diff --git a/src/components/register/presence.tsx b/src/components/register/presence.tsx
index c7bb683..93515d2 100644
--- a/src/components/register/presence.tsx
+++ b/src/components/register/presence.tsx
@@ -44,7 +44,7 @@ export default function Presence({
     <TouchableOpacity style={styles.presence} onPress={markSeen}>
       <Switch value={seen} onChange={markSeen} />
       <Text>{presence.name}</Text>
-      {presence.stripcard_count && (
+      {!!presence.stripcard_count && (
         <View style={styles.stripcard}>
           <Icon size={22} source={"clipboard-list"} />
           <Text>
diff --git a/src/screens/calendar/calendar.tsx b/src/screens/calendar/calendar.tsx
index 755147f..f828ac9 100644
--- a/src/screens/calendar/calendar.tsx
+++ b/src/screens/calendar/calendar.tsx
@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import { parse, VEvent } from "unfucked-ical";
 import Item from "../../components/feed/item";
 import { ActionType, FeedItem, sortFeeds } from "../../stores/feed";
+import Area from "../../components/area";
 
 export default function CalendarScreen() {
   const [date, setDate] = useState(new Date());
@@ -64,45 +65,41 @@ export default function CalendarScreen() {
       </Appbar.Header>
       <ScrollView>
         <View style={styles.container}>
-          <Card>
-            <Card.Content style={styles.header}>
-              <View style={styles.headerText}>
-                <Icon size={18} source={"calendar"} />
-                <Text variant={"titleMedium"}>Vanaf</Text>
-              </View>
+          <Area
+            title={"Vanaf"}
+            icon={"calendar"}
+            right={
+              <>
+                {Platform.OS === "ios" && (
+                  <DateTimePicker
+                    value={date}
+                    onChange={(_, date) => setDate(date as Date)}
+                    mode={"date"}
+                  />
+                )}
+                {Platform.OS === "android" && (
+                  <Button
+                    mode={"elevated"}
+                    onPress={() => {
+                      DateTimePickerAndroid.open({
+                        value: date,
+                        onChange: (_, date) => setDate(date as Date),
+                        mode: "date",
+                      });
+                    }}
+                  >
+                    {date.toLocaleDateString("nl-NL")}
+                  </Button>
+                )}
+              </>
+            }
+          />
 
-              {Platform.OS === "ios" && (
-                <DateTimePicker
-                  value={date}
-                  onChange={(_, date) => setDate(date as Date)}
-                  mode={"date"}
-                />
-              )}
-              {Platform.OS === "android" && (
-                <Button
-                  mode={"elevated"}
-                  onPress={() => {
-                    DateTimePickerAndroid.open({
-                      value: date,
-                      onChange: (_, date) => setDate(date as Date),
-                      mode: "date",
-                    });
-                  }}
-                >
-                  {date.toLocaleDateString("nl-NL")}
-                </Button>
-              )}
-            </Card.Content>
-          </Card>
-
-          <Card>
-            <Card.Title title={"Bijzonderheden"} titleVariant={"titleMedium"} />
-            <Card.Content style={{ gap: 10 }}>
-              {items.map((item, index) => (
-                <Item item={item} key={index} />
-              ))}
-            </Card.Content>
-          </Card>
+          <Area title={"Bijzonderheden"} icon={"calendar-alert"}>
+            {items.map((item, index) => (
+              <Item item={item} key={index} />
+            ))}
+          </Area>
         </View>
       </ScrollView>
     </>
diff --git a/src/screens/calendar/event.tsx b/src/screens/calendar/event.tsx
index 539d315..8026609 100644
--- a/src/screens/calendar/event.tsx
+++ b/src/screens/calendar/event.tsx
@@ -19,6 +19,7 @@ import { useAtom } from "jotai";
 import { useContext } from "react";
 import AuthContext, { Authed } from "../../auth";
 import * as WebBrowser from "expo-web-browser";
+import Area from "../../components/area";
 
 function friday() {
   return isFriday(new Date()) ? new Date() : nextFriday(new Date());
@@ -168,19 +169,13 @@ export default function EventScreen({ route, navigation }: Props) {
           </Button>
         )}
         {getDescription() && (
-          <Card>
-            <Card.Title titleVariant={"titleMedium"} title={"Beschrijving"} />
-            <Card.Content>
-              <Text>{getDescription()}</Text>
-            </Card.Content>
-          </Card>
+          <Area title={"Beschrijving"} icon={"information"}>
+            <Text>{getDescription()}</Text>
+          </Area>
         )}
-        <Card>
-          <Card.Title titleVariant={"titleMedium"} title={"Wanneer"} />
-          <Card.Content>
-            <Text>{getDates()}</Text>
-          </Card.Content>
-        </Card>
+        <Area title={"Wanneer"} icon={"calendar"}>
+          <Text>{getDates()}</Text>
+        </Area>
       </View>
     </ScrollView>
   );
diff --git a/src/screens/feed/search.tsx b/src/screens/feed/search.tsx
index 8d5ca72..af1fe71 100644
--- a/src/screens/feed/search.tsx
+++ b/src/screens/feed/search.tsx
@@ -14,6 +14,7 @@ import { ActionType, FeedItem } from "../../stores/feed";
 import Item from "../../components/feed/item";
 import { parse } from "fast-html-parser";
 import * as WebBrowser from "expo-web-browser";
+import Area from "../../components/area";
 
 export interface Item {
   id: number;
@@ -135,45 +136,39 @@ export default function SearchScreen() {
           >
             {searched && (
               <>
-                <Card>
-                  <Card.Title title={"Inventaris"} />
-                  <Card.Content style={styles.content}>
-                    {itemResults ? (
-                      itemResults.length > 0 ? (
-                        itemResults.map((result, index) => (
-                          <Item key={index} item={result} />
-                        ))
-                      ) : (
-                        <View style={styles.center}>
-                          <Text>Geen producten gevonden</Text>
-                          <Button onPress={orderList} mode={"text"}>
-                            Mis je iets? Bekijk de bestellijst
-                          </Button>
-                        </View>
-                      )
+                <Area title={"Inventaris"} icon={"package-variant-closed"}>
+                  {itemResults ? (
+                    itemResults.length > 0 ? (
+                      itemResults.map((result, index) => (
+                        <Item key={index} item={result} />
+                      ))
                     ) : (
-                      <ActivityIndicator animating={true} />
-                    )}
-                  </Card.Content>
-                </Card>
-                <Card>
-                  <Card.Title title={"Artikelen"} />
-                  <Card.Content style={styles.content}>
-                    {articleResults ? (
-                      articleResults.length > 0 ? (
-                        articleResults.map((result, index) => (
-                          <Item key={index} item={result} />
-                        ))
-                      ) : (
-                        <View style={styles.center}>
-                          <Text>Geen artikelen gevonden</Text>
-                        </View>
-                      )
+                      <View style={styles.center}>
+                        <Text>Geen producten gevonden</Text>
+                        <Button onPress={orderList} mode={"text"}>
+                          Mis je iets? Bekijk de bestellijst
+                        </Button>
+                      </View>
+                    )
+                  ) : (
+                    <ActivityIndicator animating={true} />
+                  )}
+                </Area>
+                <Area title={"Artikelen"} icon={"post"}>
+                  {articleResults ? (
+                    articleResults.length > 0 ? (
+                      articleResults.map((result, index) => (
+                        <Item key={index} item={result} />
+                      ))
                     ) : (
-                      <ActivityIndicator animating={true} />
-                    )}
-                  </Card.Content>
-                </Card>
+                      <View style={styles.center}>
+                        <Text>Geen artikelen gevonden</Text>
+                      </View>
+                    )
+                  ) : (
+                    <ActivityIndicator animating={true} />
+                  )}
+                </Area>
               </>
             )}
           </View>
diff --git a/src/screens/feed/slot.tsx b/src/screens/feed/slot.tsx
index 6e81449..afb7152 100644
--- a/src/screens/feed/slot.tsx
+++ b/src/screens/feed/slot.tsx
@@ -8,6 +8,7 @@ import { StackParamList } from "../../../App";
 import AuthContext, { Authed } from "../../auth";
 import { AANMELDEN } from "../../env";
 import PresenceCard from "../../components/register/precenseCard";
+import Area from "../../components/area";
 
 type Props = StackScreenProps<StackParamList, "Slot">;
 
@@ -96,45 +97,29 @@ export default function SlotScreen({ route, navigation }: Props) {
               </Card>
             </>
           )}
-          <View style={styles.header}>
-            <Icon size={22} source={"account"} />
-            <Text variant={"titleMedium"}>Beschikbaarheid</Text>
-          </View>
-          <Card>
-            <Card.Content>
-              <Text variant={"titleSmall"}>
-                Er zijn {slot.available}/{slot.available + slot.taken} plekken
-                beschikbaar.
-              </Text>
-            </Card.Content>
-          </Card>
+          <Area title={"Beschikbaarheid"} icon={"account"}>
+            <Text variant={"titleSmall"}>
+              Er zijn {slot.available}/{slot.available + slot.taken} plekken
+              beschikbaar.
+            </Text>
+          </Area>
 
-          <View style={styles.header}>
-            <Icon size={22} source={"account-supervisor"} />
-            <Text variant={"titleMedium"}>Begeleiders</Text>
-          </View>
-          <Card>
-            <Card.Content style={styles.chips}>
+          <Area title={"Begeleiders"} icon={"account-supervisor"}>
+            <View style={styles.chips}>
               {slot.tutors.length === 0 && (
                 <Text>Er zijn nog geen begeleiders aangemeld</Text>
               )}
               {slot.tutors.map((tutor) => (
                 <Chip key={tutor}>{tutor}</Chip>
               ))}
-            </Card.Content>
-          </Card>
+            </View>
+          </Area>
 
           {slot.presence && (
             <>
-              <View style={styles.header}>
-                <Icon size={22} source={"account-details"} />
-                <Text variant={"titleMedium"}>Leden</Text>
-              </View>
-              <Card>
-                <Card.Content>
-                  <PresenceCard slot={slot} members={members} />
-                </Card.Content>
-              </Card>
+              <Area title={"Leden"} icon={"account-details"}>
+                <PresenceCard slot={slot} members={members} />
+              </Area>
             </>
           )}
         </View>
diff --git a/src/screens/settings.tsx b/src/screens/settings.tsx
index 37d07cf..386055b 100644
--- a/src/screens/settings.tsx
+++ b/src/screens/settings.tsx
@@ -6,6 +6,7 @@ import * as WebBrowser from "expo-web-browser";
 import auth from "../auth";
 import logging from "../logging";
 import * as Sharing from "expo-sharing";
+import Area from "../components/area";
 
 export default function SettingsScreen() {
   const authState = useContext(AuthContext);
@@ -33,52 +34,50 @@ export default function SettingsScreen() {
       </Appbar.Header>
       <ScrollView>
         <View style={styles.container}>
-          <Card>
-            <Card.Title title={"Algemeen"} />
-            <Card.Content style={styles.content}>
-              <Button mode={"contained"} onPress={orderList}>
-                Bestellijst
+          <Area title={"Algemeen"} icon={"cog"}>
+            <Button mode={"contained"} onPress={orderList}>
+              Bestellijst
+            </Button>
+            <View style={styles.related}>
+              <Button
+                mode={"contained-tonal"}
+                onPress={clearLog}
+                style={styles.relatedButton}
+              >
+                Leeg log
               </Button>
-              <View style={styles.related}>
-                <Button
-                  mode={"contained-tonal"}
-                  onPress={clearLog}
-                  style={styles.relatedButton}
-                >
-                  Leeg log
-                </Button>
-                <Button
-                  mode={"contained"}
-                  onPress={exportLog}
-                  style={styles.relatedButton}
-                >
-                  Exporteer log
-                </Button>
-              </View>
-            </Card.Content>
-          </Card>
-          <Card>
-            <Card.Title title={"Account"} />
-            {authState.authenticated === Authed.AUTHENTICATED && (
-              <Card.Content style={styles.content}>
-                <Text>
-                  {authState.user.given_name} {authState.user.family_name} (
-                  {authState.user.sub})
-                </Text>
-                <Button mode={"contained"} onPress={authState.logout}>
-                  Log uit
-                </Button>
-              </Card.Content>
-            )}
-            {authState.authenticated === Authed.GUEST && (
-              <Card.Content style={styles.content}>
-                <Text>Demo Mode</Text>
-                <Button mode={"contained"} onPress={authState.login}>
-                  Ga uit demo mode
-                </Button>
-              </Card.Content>
-            )}
-          </Card>
+              <Button
+                mode={"contained"}
+                onPress={exportLog}
+                style={styles.relatedButton}
+              >
+                Exporteer log
+              </Button>
+            </View>
+          </Area>
+          <Area title={"Account"} icon={"account"}>
+            <>
+              {authState.authenticated === Authed.AUTHENTICATED && (
+                <>
+                  <Text>
+                    {authState.user.given_name} {authState.user.family_name} (
+                    {authState.user.sub})
+                  </Text>
+                  <Button mode={"contained"} onPress={authState.logout}>
+                    Log uit
+                  </Button>
+                </>
+              )}
+              {authState.authenticated === Authed.GUEST && (
+                <>
+                  <Text>Demo Mode</Text>
+                  <Button mode={"contained"} onPress={authState.login}>
+                    Ga uit demo mode
+                  </Button>
+                </>
+              )}
+            </>
+          </Area>
         </View>
       </ScrollView>
     </>