diff --git a/App.js b/App.js
index ccc692f..0600d31 100644
--- a/App.js
+++ b/App.js
@@ -1,29 +1,58 @@
 import "@expo/metro-runtime";
+import { StyleSheet } from "react-native";
+import { StatusBar } from "expo-status-bar";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
+import colors from "./src/constants/colors";
 import HomeScreen from "./src/screens/HomeScreen";
-import SignInScreen from "./src/screens/SignInScreen";
+import AccountScreen from "./src/screens/AccountScreen";
+// import SignInScreen from "./src/screens/SignInScreen";
 import DonateScreen from "./src/screens/DonateScreen";
 import WebsitesScreen from "./src/screens/WebsitesScreen";
 import VolunteerFormScreen from "./src/screens/VolunteerFormScreen";
-
 import VolunteerOpportunityScreen from "./src/screens/VolunteerOpportunityScreen";
 import OtherInfoScreen from "./src/screens/OtherInfoScreen";
+import HomeHeader from "./src/components/HomeHeader";
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
-    // <NavigationContainer>
-    //   <Stack.Navigator initialRouteName="Other Info">
-    //     <Stack.Screen name="Home" component={HomeScreen} />
-    //     <Stack.Screen name="Donate" component={DonateScreen} />
-    //     <Stack.Screen name="Websites" component={WebsitesScreen} />
-    //     <Stack.Screen name="Other Info" component={OtherInfoScreen} />
-    //   </Stack.Navigator>
-    // </NavigationContainer>
-    // <SignInScreen></SignInScreen>
-    <OtherInfoScreen></OtherInfoScreen>
+    <NavigationContainer>
+      <StatusBar style="light" />
+      <Stack.Navigator
+        initialRouteName="Home"
+        screenOptions={{
+          headerStyle: {
+            backgroundColor: colors.primary,
+          },
+          headerTintColor: colors.white,
+        }}
+      >
+        <Stack.Screen
+          name="Home"
+          component={HomeScreen}
+          options={{
+            header: (props) => <HomeHeader {...props} />,
+          }}
+        />
+        <Stack.Screen name="Account" component={AccountScreen} />
+        <Stack.Screen name="Donate" component={DonateScreen} />
+        <Stack.Screen name="Websites" component={WebsitesScreen} />
+        <Stack.Screen name="Other Info" component={OtherInfoScreen} />
+        <Stack.Screen
+          name="Volunteer Opportunity"
+          component={VolunteerOpportunityScreen}
+          options={{
+            title: null,
+            headerStyle: {
+              backgroundColor: colors.black,
+            },
+          }}
+        />
+        <Stack.Screen name="Volunteer Form" component={VolunteerFormScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 }
diff --git a/src/assets/placeholder-profile.png b/src/assets/placeholder-profile.png
new file mode 100644
index 0000000..c5ef792
Binary files /dev/null and b/src/assets/placeholder-profile.png differ
diff --git a/src/components/Heading.js b/src/components/Heading.js
new file mode 100644
index 0000000..ab0f996
--- /dev/null
+++ b/src/components/Heading.js
@@ -0,0 +1,12 @@
+import { StyleSheet, Text } from "react-native";
+
+export default function Heading({ children }) {
+  return <Text style={styles.heading}>{children}</Text>;
+}
+
+const styles = StyleSheet.create({
+  heading: {
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+});
diff --git a/src/components/HomeHeader.js b/src/components/HomeHeader.js
new file mode 100644
index 0000000..0850722
--- /dev/null
+++ b/src/components/HomeHeader.js
@@ -0,0 +1,45 @@
+import { Image, Text, StyleSheet, Pressable, View } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import colors from "../constants/colors";
+
+export default function HomeHeader({ navigation }) {
+  return (
+    <LinearGradient
+      colors={[colors.primaryLight, colors.primaryDark]}
+      style={styles.container}
+    >
+      <View style={styles.subcontainer}>
+        <Text style={styles.headerText}>Audacity Music Club</Text>
+        <Pressable onPress={() => navigation.navigate("Account")}>
+          <Image
+            style={styles.profile}
+            source={require("../assets/placeholder-profile.png")}
+          />
+        </Pressable>
+      </View>
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 120,
+    paddingHorizontal: 20,
+    paddingBottom: 10,
+    justifyContent: "flex-end",
+  },
+  subcontainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  headerText: {
+    color: colors.white,
+    fontSize: 20,
+  },
+  profile: {
+    width: 40,
+    height: 40,
+    borderRadius: 100,
+  },
+});
diff --git a/src/components/Logout.js b/src/components/LogOutButton.js
similarity index 58%
rename from src/components/Logout.js
rename to src/components/LogOutButton.js
index fa796af..1cfecae 100644
--- a/src/components/Logout.js
+++ b/src/components/LogOutButton.js
@@ -1,8 +1,9 @@
-import { StyleSheet, Text, Pressable } from "react-native";
+import { StyleSheet, Text, Pressable, Alert } from "react-native";
+import colors from "../constants/colors";
 
-export default function Logout() {
+export default function LogOutButton() {
   return (
-    <Pressable style={styles.button}>
+    <Pressable style={styles.button} onPress={() => Alert.alert("Log out")}>
       <Text style={styles.text}> Log Out</Text>
     </Pressable>
   );
@@ -10,7 +11,7 @@ export default function Logout() {
 
 const styles = StyleSheet.create({
   button: {
-    backgroundColor: "#d9534f",
+    backgroundColor: colors.danger,
     borderRadius: 10,
     paddingVertical: 10,
     paddingHorizontal: 110,
diff --git a/src/components/OtherOpportunities.js b/src/components/OtherOpportunities.js
index b622daa..efa29ef 100644
--- a/src/components/OtherOpportunities.js
+++ b/src/components/OtherOpportunities.js
@@ -1,42 +1,33 @@
-import React from "react";
 import { View, Text, StyleSheet, Image, Pressable } from "react-native";
 
 export default function OtherOpportunities() {
   return (
-    <View>
-      <Text style={styles.header}>Other Opportunities</Text>
-      <View style={styles.cardContainer}>
-        <Pressable style={[styles.card, styles.first]}>
-          <Image
-            style={styles.icon}
-            source={require("./../assets/music-note.png")}
-          />
-          <Text style={styles.text}>Request a Concert</Text>
-          <Image
-            style={styles.arrow}
-            source={require("./../assets/caret-left.png")}
-          />
-        </Pressable>
-        <View style={styles.divider} />
-        <Pressable style={[styles.card, styles.last]}>
-          <Image style={styles.icon} source={require("./../assets/gift.png")} />
-          <Text style={styles.text}>Make a Donation</Text>
-          <Image
-            style={styles.arrow}
-            source={require("./../assets/caret-left.png")}
-          />
-        </Pressable>
-      </View>
+    <View style={styles.cardContainer}>
+      <Pressable style={[styles.card, styles.first]}>
+        <Image
+          style={styles.icon}
+          source={require("./../assets/music-note.png")}
+        />
+        <Text style={styles.text}>Request a Concert</Text>
+        <Image
+          style={styles.arrow}
+          source={require("./../assets/caret-left.png")}
+        />
+      </Pressable>
+      <View style={styles.divider} />
+      <Pressable style={[styles.card, styles.last]}>
+        <Image style={styles.icon} source={require("./../assets/gift.png")} />
+        <Text style={styles.text}>Make a Donation</Text>
+        <Image
+          style={styles.arrow}
+          source={require("./../assets/caret-left.png")}
+        />
+      </Pressable>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  header: {
-    fontSize: 16,
-    fontWeight: "bold",
-    marginBottom: 10,
-  },
   cardContainer: {
     backgroundColor: "#f5f5f5",
     borderRadius: 10,
diff --git a/src/components/Profile.js b/src/components/Profile.js
index 7d89025..7276751 100644
--- a/src/components/Profile.js
+++ b/src/components/Profile.js
@@ -5,11 +5,11 @@ export default function Profile() {
     <View style={styles.background}>
       <Image
         style={styles.image}
-        source={require("./../assets/audacity-music-club.png")}
+        source={require("./../assets/placeholder-profile.png")}
       ></Image>
       <View>
-        <Text style={styles.name}>Rick</Text>
-        <Text style={styles.email}>cat</Text>
+        <Text style={styles.name}>Rick Astley</Text>
+        <Text style={styles.email}>nevergonnagiveyouup@gmail.com</Text>
       </View>
     </View>
   );
@@ -20,16 +20,16 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     backgroundColor: "#f5f5f5", // Light grey background color
-    padding: 20,
+    padding: 15,
     borderRadius: 10,
     borderColor: "#e0e0e0",
     borderWidth: 1,
     margin: 10,
   },
   image: {
-    width: 50,
-    height: 50,
-    borderRadius: 25,
+    width: 60,
+    height: 60,
+    borderRadius: 100,
     marginRight: 10,
   },
   name: {
diff --git a/src/components/SignUpButton.js b/src/components/SignUpButton.js
index bb1d9c2..fa11da0 100644
--- a/src/components/SignUpButton.js
+++ b/src/components/SignUpButton.js
@@ -1,4 +1,5 @@
 import { StyleSheet, Text, View, Image } from "react-native";
+import colors from "../constants/colors";
 
 export default function SignUpButton() {
   return (
@@ -22,7 +23,7 @@ const styles = StyleSheet.create({
     borderRadius: 15,
     height: 59,
     width: 145,
-    backgroundColor: "#007913",
+    backgroundColor: colors.primary,
   },
 
   backText: {
diff --git a/src/components/VolunteerOpportunity.js b/src/components/VolunteerOpportunity.js
index 4e21945..5d4bb71 100644
--- a/src/components/VolunteerOpportunity.js
+++ b/src/components/VolunteerOpportunity.js
@@ -1,62 +1,61 @@
-import React from "react";
 import { View, Text, StyleSheet, Image, Pressable } from "react-native";
 
-export default function VolunteerOpportunity(props) {
+export default function VolunteerOpportunity({ navigation }) {
   return (
-    <View style={styles.background}>
+    <Pressable
+      style={styles.container}
+      onPress={() => navigation.navigate("Volunteer Opportunity")}
+    >
       <Image
         style={styles.image}
         source={require("./../assets/warm-springs-bart.png")}
       />
       <View>
-        <Pressable>
-          <Text style={styles.title}>Library Music Hour</Text>
-          <Text style={styles.info}>
-            <Image
-              style={styles.icon}
-              source={require("./../assets/clock.png")}
-            />
-            Saturday, August 10, 2024 2:30 PM
-          </Text>
-          <Text style={styles.info}>
-            <Image
-              style={styles.icon}
-              source={require("./../assets/location.png")}
-            />
-            Fremont Main Library
-          </Text>
-        </Pressable>
+        <Text style={styles.title}>Library Music Hour</Text>
+        <Text style={styles.info}>
+          <Image
+            style={styles.icon}
+            source={require("./../assets/clock.png")}
+          />
+          Saturday, August 10, 2024 2:30 PM
+        </Text>
+        <Text style={styles.info}>
+          <Image
+            style={styles.icon}
+            source={require("./../assets/location.png")}
+          />
+          Fremont Main Library
+        </Text>
       </View>
       <Image
         style={styles.caret}
         source={require("./../assets/caret-left.png")}
       />
-    </View>
+    </Pressable>
   );
 }
 
 const styles = StyleSheet.create({
-  background: {
+  container: {
     flexDirection: "row",
     alignItems: "center",
     backgroundColor: "#f5f5f5",
-    borderTopRightRadius: 10,
-    borderBottomRightRadius: 10,
-    borderBottomLeftRadius: 1005,
+    borderTopRightRadius: 50,
+    borderBottomRightRadius: 50,
+    borderBottomLeftRadius: 1000,
     borderTopLeftRadius: 1000,
-
     borderColor: "#e0e0e0",
     borderWidth: 1,
-    margin: 10,
+    marginBottom: 10,
   },
   image: {
     width: 80,
     height: 80,
     marginRight: 10,
-    borderTopRightRadius: 1,
-    borderBottomRightRadius: 1,
-    borderBottomLeftRadius: 10,
-    borderTopLeftRadius: 10,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 15,
+    borderTopLeftRadius: 15,
   },
   title: {
     fontSize: 20,
diff --git a/src/components/Websites.js b/src/components/Websites.js
new file mode 100644
index 0000000..f0a8068
--- /dev/null
+++ b/src/components/Websites.js
@@ -0,0 +1,9 @@
+import { StyleSheet, Text } from "react-native";
+
+export default function Websites() {
+  return <Text>TODO</Text>;
+}
+
+const styles = StyleSheet.create({
+  // TODO
+});
diff --git a/src/constants/colors.js b/src/constants/colors.js
new file mode 100644
index 0000000..ed1b461
--- /dev/null
+++ b/src/constants/colors.js
@@ -0,0 +1,9 @@
+export default {
+  primary: "#006000",
+  primaryLight: "#008000",
+  primaryDark: "#004000",
+  secondary: "#353535",
+  danger: "#E12504",
+  black: "#000",
+  white: "#fff",
+};
diff --git a/src/screens/AccountScreen.js b/src/screens/AccountScreen.js
index b18b0d6..e0ecc33 100644
--- a/src/screens/AccountScreen.js
+++ b/src/screens/AccountScreen.js
@@ -1,12 +1,13 @@
-import { StyleSheet, Text, View } from "react-native";
-import LogOutButton from "../components/Logout.js";
+import { View } from "react-native";
+
+import LogOutButton from "../components/LogOutButton.js";
 import Profile from "../components/Profile.js";
+
 export default function AccountScreen() {
   return (
     <View>
-      <Text>{"\n\n\n\n\n\n\n"}</Text>
-      <Profile></Profile>
-      <LogOutButton></LogOutButton>
+      <Profile />
+      <LogOutButton />
     </View>
   );
 }
diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js
index 1f5b117..a43f714 100644
--- a/src/screens/HomeScreen.js
+++ b/src/screens/HomeScreen.js
@@ -1,88 +1,26 @@
-import { StyleSheet, Text, Image, View, Pressable } from "react-native";
+import { StyleSheet, View } from "react-native";
+import VolunteerOpportunity from "../components/VolunteerOpportunity";
+import OtherOpportunities from "../components/OtherOpportunities";
+import Heading from "../components/Heading";
+import Websites from "../components/Websites";
 
 export default function HomeScreen({ navigation }) {
   return (
     <View style={styles.container}>
-      <Image
-        source={require("./../assets/audacity-music-club.png")}
-        style={styles.logo}
-      />
-      <Pressable
-        style={styles.volunteer}
-        onPress={() => navigation.navigate("Sign In")}
-      >
-        <Text style={styles.buttonText}>Volunteer</Text>
-      </Pressable>
-      <Pressable
-        style={styles.request}
-        onPress={() => navigation.navigate("Sign In")}
-      >
-        <Text style={[styles.buttonText, { fontSize: 24 }]}>
-          Request a Concert
-        </Text>
-      </Pressable>
-      <Pressable onPress={() => navigation.navigate("Donate")}>
-        <Text style={styles.smallButton}>Donate</Text>
-      </Pressable>
-      <Pressable onPress={() => navigation.navigate("Websites")}>
-        <Text style={styles.smallButton}>Visit our websites</Text>
-      </Pressable>
+      <Heading>Volunteer Opportunities</Heading>
+      <VolunteerOpportunity navigation={navigation} />
+      <VolunteerOpportunity navigation={navigation} />
+      <VolunteerOpportunity navigation={navigation} />
+      <Heading>Other Opportunities</Heading>
+      <OtherOpportunities />
+      <Heading>Websites</Heading>
+      <Websites />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    display: "flex",
-    flex: 1,
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    columnGap: 24,
-  },
-  logo: {
-    flexDirection: "column",
-    justifyContent: "center",
-    width: 387,
-    height: 208,
-  },
-  volunteer: {
-    flexDirection: "column",
-    justifyContent: "center",
-    borderRadius: 15,
-    borderWidth: 1,
-    width: 267,
-    height: 74,
-    backgroundColor: "#4B5588",
-    marginBottom: 24,
-    shadowColor: "black",
-    shadowOpacity: 0.25,
-    shadowOffset: { width: 0, height: 4 },
-    shadowRadius: 4,
-  },
-  buttonText: {
-    textAlign: "center",
-    fontSize: 36,
-    fontWeight: "medium",
-    color: "white",
-  },
-  request: {
-    flexDirection: "column",
-    justifyContent: "center",
-    borderRadius: 15,
-    borderWidth: 1,
-    width: 267,
-    height: 74,
-    backgroundColor: "#000000",
-    marginBottom: 24,
-    shadowColor: "black",
-    shadowOpacity: 0.25,
-    shadowOffset: { width: 0, height: 4 },
-    shadowRadius: 4,
-  },
-  smallButton: {
-    borderBottomWidth: 2,
-    fontSize: 24,
-    marginBottom: 10,
+    margin: 20,
   },
 });
diff --git a/src/screens/VolunteerOpportunityScreen.js b/src/screens/VolunteerOpportunityScreen.js
index 4b607de..6ef5800 100644
--- a/src/screens/VolunteerOpportunityScreen.js
+++ b/src/screens/VolunteerOpportunityScreen.js
@@ -8,11 +8,11 @@ import {
   ImageBackground,
 } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
-import BackButton from "../components/BackButton";
 import SignUpButton from "../components/SignUpButton";
 import Tag from "../components/Tag";
+import Heading from "../components/Heading";
 
-export default function VolunteerOpportunityScreen() {
+export default function VolunteerOpportunityScreen({ navigation }) {
   const tagTexts = ["Electric Piano", "Indoors", "Presentation Equipment"];
   const tags = tagTexts.map((text) => <Tag key={text} text={text} />);
   return (
@@ -27,9 +27,6 @@ export default function VolunteerOpportunityScreen() {
             style={{ width: "100%", height: "100%", position: "absolute" }}
           ></LinearGradient>
         </ImageBackground>
-        <Pressable style={styles.backButton}>
-          <BackButton opaque={true} />
-        </Pressable>
         <View
           style={[
             {
@@ -42,49 +39,46 @@ export default function VolunteerOpportunityScreen() {
           <Text style={styles.headerText}>Music By The Tracks</Text>
         </View>
       </View>
-      <View style={styles.details}>
-        <View style={{ flexDirection: "row", gap: 8, alignItems: "center" }}>
-          <Image
-            source={require("./../assets/clock.png")}
-            style={{ height: 18, width: 18 }}
-          ></Image>
-          <Text style={styles.detailsText}>
-            Saturday, July 27, 2024 4:00 PM
+      <View style={styles.subcontainer}>
+        <View style={styles.details}>
+          <View style={{ flexDirection: "row", gap: 8, alignItems: "center" }}>
+            <Image
+              source={require("./../assets/clock.png")}
+              style={{ height: 18, width: 18 }}
+            ></Image>
+            <Text style={styles.detailsText}>
+              Saturday, July 27, 2024 4:00 PM
+            </Text>
+          </View>
+          <View style={{ flexDirection: "row", gap: 8, alignItems: "center" }}>
+            <Image
+              source={require("./../assets/location.png")}
+              style={{ height: 18, width: 18 }}
+            ></Image>
+            <Text style={styles.detailsText}>Warm Springs BART Station</Text>
+          </View>
+        </View>
+        <View style={styles.about}>
+          <Heading>About</Heading>
+          <Text style={{ fontSize: 14 }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet
+            nibh nulla. Vestibulum ante ipsum primis in faucibus orci luctus et
+            ultrices posuere cubilia curae; Aenean vitae orci in mi ultricies
+            varius et at tellus. Maecenas posuere vestibulum tortor, euismod
+            aliquam odio ullamcorper eget. Phasellus quam mi, bibendum id
+            elementum eget, semper id risus. Nunc eu bibendum erat, nec
+            pellentesque est. Nullam lobortis mattis laoreet. Aliquam quis ipsum
+            at arcu tempus scelerisque.
           </Text>
         </View>
-        <View style={{ flexDirection: "row", gap: 8, alignItems: "center" }}>
-          <Image
-            source={require("./../assets/location.png")}
-            style={{ height: 18, width: 18 }}
-          ></Image>
-          <Text style={styles.detailsText}>Warm Springs BART Station</Text>
+        <View style={styles.tagsContainer}>
+          <Heading>Tags</Heading>
+          <View style={styles.tags}>{tags}</View>
         </View>
-      </View>
-      <View style={styles.about}>
-        <Text style={{ fontSize: 16, color: "353535", fontWeight: "bold" }}>
-          About
-        </Text>
-        <Text style={{ fontSize: 14 }}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet
-          nibh nulla. Vestibulum ante ipsum primis in faucibus orci luctus et
-          ultrices posuere cubilia curae; Aenean vitae orci in mi ultricies
-          varius et at tellus. Maecenas posuere vestibulum tortor, euismod
-          aliquam odio ullamcorper eget. Phasellus quam mi, bibendum id
-          elementum eget, semper id risus. Nunc eu bibendum erat, nec
-          pellentesque est. Nullam lobortis mattis laoreet. Aliquam quis ipsum
-          at arcu tempus scelerisque. Nullam malesuada, enim quis dignissim
-          suscipit, neque massa tristique diam, non rhoncus diam felis at
-          turpis. Ut ullamcorper quis leo a pharetra.
-        </Text>
-      </View>
-      <View style={styles.tagsContainer}>
-        <Text style={[{ fontSize: 16, fontWeight: "bold", color: "353535" }]}>
-          Tags
-        </Text>
-        <View style={styles.tags}>{tags}</View>
-      </View>
-      <View style={styles.signUpButton}>
-        <Pressable style={[{ marginBottom: "5%", marginRight: "4%" }]}>
+        <Pressable
+          style={styles.signUpButton}
+          onPress={() => navigation.navigate("Volunteer Form")}
+        >
           <SignUpButton />
         </Pressable>
       </View>
@@ -100,34 +94,30 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   banner: {
-    flex: 4,
+    flex: 0.5,
   },
-  details: {
+  subcontainer: {
     flex: 1,
-    paddingLeft: "4%",
+    marginHorizontal: 20,
+  },
+  details: {
+    paddingTop: 10,
     justifyContent: "center",
   },
   about: {
-    flex: 3,
-    paddingLeft: "4%",
-    paddingTop: "5%",
-    paddingRight: "8%",
+    paddingVertical: 10,
   },
   tagsContainer: {
-    flex: 1.5,
-    paddingLeft: "4%",
-    paddingTop: "5%",
     flexDirection: "column",
   },
   tags: {
+    paddingVertical: 5,
     flexDirection: "row",
     flexWrap: "wrap",
-    gap: 10,
-    paddingTop: "1%",
-    paddingRight: "4%",
+    gap: 5,
   },
   signUpButton: {
-    flex: 1.5,
+    flex: 1,
     justifyContent: "flex-end",
     alignItems: "flex-end",
   },
@@ -136,12 +126,6 @@ const styles = StyleSheet.create({
     height: "100%",
     resizeMode: "cover",
   },
-  backButton: {
-    position: "absolute",
-    paddingTop: "15%",
-
-    transform: [{ scale: 0.8 }],
-  },
   headerText: {
     position: "absolute",
     fontSize: 48,