diff --git a/app/(tabs)/home/_layout.tsx b/app/(tabs)/home/_layout.tsx
index 58ae6dd..52141bc 100644
--- a/app/(tabs)/home/_layout.tsx
+++ b/app/(tabs)/home/_layout.tsx
@@ -6,21 +6,42 @@ import Colors from '@/constants/Colors';
 import { useClientOnlyValue } from '@/components/useClientOnlyValue';
 import StyledText from '@/components/common/StyledText';
 import MainHeader from '@/components/headers/MainHeader';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet, View } from 'react-native';
+import { spacing } from '@/constants/Styles';
 
 // You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
 function TabBarIcon(props: { name: React.ComponentProps<typeof MaterialCommunityIcons>['name']; color: string }) {
   return <MaterialCommunityIcons size={28} style={{ marginBottom: -3 }} {...props} />;
 }
 
+function CustomHeader() {
+  const insets = useSafeAreaInsets();
+  return (
+    <View style={[styles.headerContainer, { paddingTop: insets.top + spacing.sm, paddingHorizontal: spacing.lg }]}>
+      <MainHeader />
+    </View>
+  );
+}
+
 export default function TabLayout() {
-  //TODO: show tab labels if tab is focussed
+  const insets = useSafeAreaInsets();
+
+  const headerHeight = 120;
 
   return (
     <Tabs
       screenOptions={{
         tabBarStyle: {
-          backgroundColor: Colors.palette.primary,
-          borderTopColor: Colors.palette.primary,
+          backgroundColor: Colors.palette.primary + '80',
+          borderTopColor: 'transparent',
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          elevation: 0,
+          height: 60 + insets.bottom,
+          paddingBottom: insets.bottom,
         },
         tabBarActiveTintColor: Colors.palette.secondary,
         tabBarInactiveTintColor: Colors.palette.text,
@@ -30,6 +51,13 @@ export default function TabLayout() {
         // Disable the static render of the header on web
         // to prevent a hydration error in React Navigation v6.
         headerShown: useClientOnlyValue(false, true),
+        headerTitleContainerStyle: {
+          width: '100%',
+        },
+        headerStyle: {
+          height: headerHeight,
+        },
+        header: () => <CustomHeader />,
       }}
     >
       <Tabs.Screen
@@ -41,14 +69,6 @@ export default function TabLayout() {
               Schedule
             </StyledText>
           ),
-          headerStyle: {
-            backgroundColor: Colors.palette.primary,
-            height: 120,
-            elevation: 0,
-            shadowOpacity: 0,
-            borderBottomWidth: 0,
-          },
-          headerTitle: () => <MainHeader />,
         }}
       />
       <Tabs.Screen
@@ -60,14 +80,6 @@ export default function TabLayout() {
               Bookmarked
             </StyledText>
           ),
-          headerStyle: {
-            backgroundColor: Colors.palette.primary,
-            height: 120,
-            elevation: 0,
-            shadowOpacity: 0,
-            borderBottomWidth: 0,
-          },
-          headerTitle: () => <MainHeader />,
         }}
       />
       <Tabs.Screen
@@ -79,14 +91,6 @@ export default function TabLayout() {
               Speakers
             </StyledText>
           ),
-          headerStyle: {
-            backgroundColor: Colors.palette.primary,
-            height: 110,
-            elevation: 0,
-            shadowOpacity: 0,
-            borderBottomWidth: 0,
-          },
-          headerTitle: () => <MainHeader />,
         }}
       />
       <Tabs.Screen
@@ -98,16 +102,19 @@ export default function TabLayout() {
               About
             </StyledText>
           ),
-          headerStyle: {
-            backgroundColor: Colors.palette.primary,
-            height: 120,
-            elevation: 0,
-            shadowOpacity: 0,
-            borderBottomWidth: 0,
-          },
-          headerTitle: () => <MainHeader />,
         }}
       />
     </Tabs>
   );
 }
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: Colors.palette.primary + 'CC', // Semi-transparent
+    height: 100,
+  },
+});
diff --git a/app/(tabs)/home/about.tsx b/app/(tabs)/home/about.tsx
index 154a1b6..1aaf723 100644
--- a/app/(tabs)/home/about.tsx
+++ b/app/(tabs)/home/about.tsx
@@ -6,7 +6,7 @@ import { spacing } from '@/constants/Styles';
 
 const home = () => {
   return (
-    <MainContainer>
+    <MainContainer backgroundImage={require('@/assets/images/bg.png')} ImageBackgroundProps={{ resizeMode: 'cover' }}>
       <View style={styles.container}>
         <StyledText size="lg" font="semiBold">
           About
diff --git a/app/(tabs)/home/bookmarks.tsx b/app/(tabs)/home/bookmarks.tsx
index 8d9f7cd..60807c6 100644
--- a/app/(tabs)/home/bookmarks.tsx
+++ b/app/(tabs)/home/bookmarks.tsx
@@ -6,7 +6,7 @@ import { spacing } from '@/constants/Styles';
 
 const home = () => {
   return (
-    <MainContainer>
+    <MainContainer backgroundImage={require('@/assets/images/bg.png')} ImageBackgroundProps={{ resizeMode: 'cover' }}>
       <View style={styles.container}>
         <StyledText size="lg" font="semiBold">
           Bookmarks
diff --git a/app/(tabs)/home/index.tsx b/app/(tabs)/home/index.tsx
index 1ef929d..98bcfb1 100644
--- a/app/(tabs)/home/index.tsx
+++ b/app/(tabs)/home/index.tsx
@@ -6,7 +6,7 @@ import { spacing } from '@/constants/Styles';
 
 const home = () => {
   return (
-    <MainContainer>
+    <MainContainer backgroundImage={require('@/assets/images/bg.png')} ImageBackgroundProps={{ resizeMode: 'cover' }}>
       <View style={styles.container}>
         <StyledText size="lg" font="semiBold">
           Schedule page
diff --git a/assets/images/bg.png b/assets/images/bg.png
new file mode 100644
index 0000000..d778f9f
Binary files /dev/null and b/assets/images/bg.png differ
diff --git a/components/containers/MainContainer.tsx b/components/containers/MainContainer.tsx
index 41b9bdc..166889d 100644
--- a/components/containers/MainContainer.tsx
+++ b/components/containers/MainContainer.tsx
@@ -2,8 +2,14 @@ import Colors from '@/constants/Colors';
 import type { StatusBarProps } from 'expo-status-bar';
 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
-import type { KeyboardAvoidingViewProps, ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
-import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, View } from 'react-native';
+import type {
+  ImageBackgroundProps,
+  KeyboardAvoidingViewProps,
+  ScrollViewProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { ImageBackground, KeyboardAvoidingView, Platform, ScrollView, StyleSheet, View } from 'react-native';
 import type { Edge, SafeAreaViewProps } from 'react-native-safe-area-context';
 import { SafeAreaProvider, SafeAreaView, initialWindowMetrics } from 'react-native-safe-area-context';
 
@@ -15,6 +21,8 @@ interface BaseScreenProps {
   KeyboardAvoidingViewProps?: KeyboardAvoidingViewProps;
   safeAreaEdges?: Edge[];
   style?: StyleProp<ViewStyle>;
+  backgroundImage?: ImageBackgroundProps['source'];
+  ImageBackgroundProps?: Omit<ImageBackgroundProps, 'source'>;
 }
 
 interface FixedScreenProps extends BaseScreenProps {
@@ -68,6 +76,8 @@ const MainContainer = (props: ScreenProps) => {
     keyboardOffset = 0,
     KeyboardAvoidingViewProps,
     style,
+    backgroundImage,
+    ImageBackgroundProps,
   } = props;
 
   const backgroundColor = Colors.palette.primary;
@@ -78,19 +88,28 @@ const MainContainer = (props: ScreenProps) => {
 
   const wrapperStyles = StyleSheet.compose(styles.container, style);
 
+  const Content = (
+    <KeyboardAvoidingView
+      behavior={isIos ? 'padding' : undefined}
+      keyboardVerticalOffset={keyboardOffset}
+      {...KeyboardAvoidingViewProps}
+      style={[styles.keyboard, KeyboardAvoidingViewProps?.style]}
+    >
+      {isNonScrolling(props.preset) ? <ScreenWithoutScrolling {...props} /> : <ScreenWithScrolling {...props} />}
+    </KeyboardAvoidingView>
+  );
+
   return (
     <SafeAreaProvider testID="main-container" initialMetrics={initialWindowMetrics}>
       <Wrapper edges={safeAreaEdges} {...SafeAreaViewProps} style={[{ backgroundColor }, wrapperStyles]}>
         <StatusBar style={statusBarStyle} {...StatusBarProps} />
-
-        <KeyboardAvoidingView
-          behavior={isIos ? 'padding' : undefined}
-          keyboardVerticalOffset={keyboardOffset}
-          {...KeyboardAvoidingViewProps}
-          style={[styles.keyboard, KeyboardAvoidingViewProps?.style]}
-        >
-          {isNonScrolling(props.preset) ? <ScreenWithoutScrolling {...props} /> : <ScreenWithScrolling {...props} />}
-        </KeyboardAvoidingView>
+        {backgroundImage ? (
+          <ImageBackground source={backgroundImage} style={styles.backgroundImage} {...ImageBackgroundProps}>
+            {Content}
+          </ImageBackground>
+        ) : (
+          Content
+        )}
       </Wrapper>
     </SafeAreaProvider>
   );
@@ -99,6 +118,7 @@ const MainContainer = (props: ScreenProps) => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    paddingTop: Platform.OS === 'android' ? 60 : 40,
   },
   containerStyle: {
     width: '100%',
@@ -107,6 +127,11 @@ const styles = StyleSheet.create({
   keyboard: {
     flex: 1,
   },
+  backgroundImage: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
 });
 
 export default MainContainer;