diff --git a/src/assets/sample_session.png b/src/assets/sample_session.png
new file mode 100644
index 0000000..0f61e30
Binary files /dev/null and b/src/assets/sample_session.png differ
diff --git a/src/component/session-card/aggregate_stat.tsx b/src/component/session-card/aggregate_stat.tsx
new file mode 100644
index 0000000..df8281f
--- /dev/null
+++ b/src/component/session-card/aggregate_stat.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+const AggregateStat = ({ aggregateStat, displayName, numberFormat }) => {
+ return (
+
+ {displayName}
+
+ {aggregateStat}
+ {numberFormat}
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ statItem: {
+ fontSize: 10,
+ alignItems: "center",
+ fontWeight: "light",
+ color: "#666",
+ },
+ statValue: {
+ fontSize: 22,
+ fontWeight: "bold",
+ },
+});
+
+export default AggregateStat;
diff --git a/src/component/session-card/session-card.tsx b/src/component/session-card/session-card.tsx
new file mode 100644
index 0000000..2471184
--- /dev/null
+++ b/src/component/session-card/session-card.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { Image, StyleSheet, View } from "react-native";
+import SessionFooter from "./session_footer";
+import SessionHeader from "./session_header";
+import SessionStats from "./session_stats";
+
+const StatsCard = ({
+ playerName,
+ location,
+ type,
+ makePercent,
+ medianRun,
+ duration,
+ shotPacing,
+ sessionName,
+ lastPlayed,
+ imageURL,
+ profileImageURL,
+ locationIconURL,
+}) => {
+ console.log(imageURL);
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ card: {
+ backgroundColor: "white",
+ },
+ image: {
+ width: "100%",
+ height: "50%",
+ },
+});
+
+export default StatsCard;
diff --git a/src/component/session-card/session_footer.tsx b/src/component/session-card/session_footer.tsx
new file mode 100644
index 0000000..024c50b
--- /dev/null
+++ b/src/component/session-card/session_footer.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+
+const SessionFooter = ({ sessionName, lastPlayed }) => {
+ return (
+
+ {sessionName}
+ {lastPlayed}
+
+ );
+};
+
+const styles = StyleSheet.create({
+ sessionName: {
+ fontSize: 18,
+ fontWeight: "medium",
+ paddingTop: 5,
+ marginLeft: 16,
+ marginRight: 16,
+ },
+ sessionDatetime: {
+ fontSize: 10,
+ fontWeight: "light",
+ color: "#A3A3A3",
+ marginLeft: 16,
+ marginRight: 16,
+ marginBottom: 16,
+ },
+});
+
+export default SessionFooter;
diff --git a/src/component/session-card/session_header.tsx b/src/component/session-card/session_header.tsx
new file mode 100644
index 0000000..bb3e776
--- /dev/null
+++ b/src/component/session-card/session_header.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import { Image, StyleSheet, Text, View } from "react-native";
+
+const SessionHeader = ({
+ playerName,
+ location,
+ type,
+ locationIconURL,
+ profileImageURL,
+}) => {
+ return (
+
+
+
+
+
+ {playerName}
+
+
+ {location}
+
+ {type}
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ headerContainer: {
+ flexDirection: "row",
+ alignItems: "center",
+ marginLeft: 16,
+ marginRight: 16,
+ },
+
+ headerProfileImage: {
+ width: 60,
+ height: 60,
+ resizeMode: "contain",
+ },
+
+ headerText: {
+ flexDirection: "column",
+ padding: 10,
+ },
+ playerName: {
+ fontSize: 24,
+ fontWeight: "bold",
+ },
+ locationContainer: {
+ flexDirection: "row",
+ alignItems: "center",
+ },
+ locationText: {
+ fontSize: 13,
+ },
+ gameType: {
+ fontSize: 13,
+ },
+ icon: {
+ width: 18,
+ height: 18,
+ resizeMode: "contain",
+ },
+});
+
+export default SessionHeader;
diff --git a/src/component/session-card/session_stats.tsx b/src/component/session-card/session_stats.tsx
new file mode 100644
index 0000000..ebe23d7
--- /dev/null
+++ b/src/component/session-card/session_stats.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import AggregateStat from "./aggregate_stat";
+
+const SessionStats = ({ makePercent, medianRun, duration, shotPacing }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ statsContainer: {
+ flexDirection: "row",
+ justifyContent: "space-around",
+ margin: 16,
+ alignItems: "center",
+ },
+ verticalSpacer: {
+ width: 0.5,
+ backgroundColor: "#A3A3A3",
+ height: "75%",
+ marginHorizontal: 12,
+ },
+});
+
+export default SessionStats;
diff --git a/src/screens/session-feed.tsx b/src/screens/session-feed.tsx
new file mode 100644
index 0000000..72d88f3
--- /dev/null
+++ b/src/screens/session-feed.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import sampleSessionImage from "../assets/sample_session.png";
+import StatsCard from "../component/session-card/session-card.tsx";
+
+const SessionFeed: React.FC = () => {
+ return (
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: "#f0f0f0", // Light gray background
+ alignItems: "center",
+ },
+});
+
+export default SessionFeed;