diff --git a/screens/HomeScreen.tsx b/screens/HomeScreen.tsx
new file mode 100644
index 0000000..4b8642d
--- /dev/null
+++ b/screens/HomeScreen.tsx
@@ -0,0 +1,51 @@
+import { StyleSheet, View, ActivityIndicator, ScrollView } from 'react-native';
+import { Header } from '../components/Header';
+import { BalanceCard } from '../components/BalanceCard';
+import { TransactionForm } from '../components/TransactionForm';
+import { TransactionList } from '../components/TransactionList';
+import { useTransactions } from '../hooks/useTransactions';
+import { calculateBalance } from '../utils/helpers';
+import { COLORS } from '../constants/theme';
+
+export default function HomeScreen() {
+  const { transactions, loading, addTransaction, deleteTransaction } = useTransactions();
+  const balance = calculateBalance(transactions);
+
+  if (loading) {
+    return (
+      <View style={styles.loading}>
+        <ActivityIndicator size="large" color={COLORS.primary} />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Header title="Pengeluaran Kita" />
+      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+        <BalanceCard balance={balance} />
+        <TransactionForm onAdd={addTransaction} />
+        <TransactionList
+          transactions={transactions}
+          onDelete={deleteTransaction}
+        />
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.background,
+  },
+  content: {
+    flex: 1,
+  },
+  loading: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: COLORS.background,
+  },
+});
\ No newline at end of file