diff --git a/app/(tabs)/budget/index.tsx b/app/(tabs)/budget/index.tsx
index 3e2052c..b2a2b29 100644
--- a/app/(tabs)/budget/index.tsx
+++ b/app/(tabs)/budget/index.tsx
@@ -37,6 +37,10 @@ export default function Page() {
         }
     };
 
+    const handleCategoryPress = (item: {[column: string]: any;}) => {
+        console.log(item.category_name);
+    }
+
     return (
         <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
             <BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
@@ -48,7 +52,15 @@ export default function Page() {
             {isLoading ? (<LoadingSymbol/>) : (
                <FlatList 
                 data={data} 
-                renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_amount={item.allocated_amount ?? 0} color={item.category_color} category_guid={item.category_guid} total_expenses={item.total_expenses ?? 0}/>}
+                renderItem = {({item}) => <CategoryItem 
+                    category={item.category_name} 
+                    allocated_amount={item.allocated_amount ?? 0} 
+                    color={item.category_color} 
+                    category_guid={item.category_guid} 
+                    total_expenses={item.total_expenses ?? 0} 
+                    onPress={() => {
+                        handleCategoryPress(item);
+                    }}/>}
                 keyExtractor={item => item.category_guid}
                 ItemSeparatorComponent={() => {
                     return (<View style={styles.itemSeperatorStyle}/>);
diff --git a/components/budget/budgetHeader.tsx b/components/budget/budgetHeader.tsx
index 7fe8f01..bca2e9b 100644
--- a/components/budget/budgetHeader.tsx
+++ b/components/budget/budgetHeader.tsx
@@ -1,6 +1,6 @@
 import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
-import TextInputBar from "../common/TextInputBar";
 import { useTheme } from "../../app/contexts/ThemeContext";
+import TextInputBar from "../common/TextInputBar";
 
 type BudgetHeaderProperties = {
     selectedPage: string,
@@ -34,7 +34,7 @@ const BudgetHeader = (properties: BudgetHeaderProperties) => {
                 }}
             />
         </View>
-        <TextInputBar placeholder='Search...'></TextInputBar>
+        <TextInputBar style={styles.searchBarStyle} placeholder='Search...'></TextInputBar>
     </>);
 }
 
@@ -81,4 +81,8 @@ const styles = StyleSheet.create({
         marginBottom: 20,
         marginTop: 10,
     },
+    searchBarStyle: {
+        marginBottom: 20,
+        marginHorizontal: 10,
+    }
 });
\ No newline at end of file
diff --git a/components/budget/categoryItem.tsx b/components/budget/categoryItem.tsx
index e651caf..6c29e14 100644
--- a/components/budget/categoryItem.tsx
+++ b/components/budget/categoryItem.tsx
@@ -1,4 +1,5 @@
 import { ColorValue, StyleSheet, Text, View } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
 import { useTheme } from "../../app/contexts/ThemeContext";
 import CustomCard from "../common/CustomCard";
 
@@ -8,6 +9,7 @@ export type CategoryItemProps = {
     allocated_amount: number,
     total_expenses: number,
     category_guid: string, 
+    onPress?: () => void,
 }
 
 const CategoryItem = (properties: CategoryItemProps) => {
@@ -17,40 +19,46 @@ const CategoryItem = (properties: CategoryItemProps) => {
     const subText = `${properties.total_expenses} / ${properties.allocated_amount} €`;
 
     return (
-        <CustomCard> 
-            <View style={[styles.colorTipStyle, {backgroundColor: properties.color}]}></View>
-            <View style={[styles.textViewStyle]}>
-                <Text style={[styles.categoryNameStyle, {color: colors.primaryText}]}>
-                  {properties.category}
-                </Text>
-                <Text style={[styles.subTextStyle, {color: colors.secondaryText}]}>
-                  {subText}
-                </Text>
-            </View>
-        </CustomCard>
+        <TouchableOpacity onPress={properties.onPress}>
+            <CustomCard style={styles.customCardStyle}> 
+                <View style={[styles.colorTipStyle, {backgroundColor: "blue"}]}/>
+                <View style={[styles.textViewStyle]}>
+                    <Text style={[styles.categoryNameStyle, {color: colors.primaryText}]}>
+                        {properties.category}
+                    </Text>
+                    <Text style={[styles.subTextStyle, {color: colors.secondaryText}]}>
+                        {subText}
+                    </Text>
+                </View>
+            </CustomCard>
+        </TouchableOpacity>
     );
 };
 
 export default CategoryItem;
 
 const styles = StyleSheet.create({
+    customCardStyle: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
     colorTipStyle: {
-      width: 25,
-      borderTopLeftRadius: 10,
-      borderBottomLeftRadius: 10,
+        width: 25,
+        borderTopLeftRadius: 10,
+        borderBottomLeftRadius: 10,
     },
     textViewStyle: {
-      flex: 2,
-      flexDirection: "column",
-      paddingVertical: 5,
-      paddingHorizontal: 10,
-      alignSelf: "stretch",
+        flex: 2,
+        flexDirection: "column",
+        paddingVertical: 5,
+        paddingHorizontal: 10,
+        alignSelf: "stretch",
     },
     categoryNameStyle: {
-      fontSize: 30,
-      fontWeight: "bold",
+        fontSize: 30,
+        fontWeight: "bold",
     },
     subTextStyle: {
-      fontSize: 17.5,
+        fontSize: 17.5,
     }
-  })
+});