diff --git a/R-Dash/components/TeamCmp.tsx b/R-Dash/components/TeamCmp.tsx
new file mode 100644
index 0000000..c696508
--- /dev/null
+++ b/R-Dash/components/TeamCmp.tsx
@@ -0,0 +1,39 @@
+import { View,Image,Text, StyleSheet } from "react-native";
+import { Team } from "../core/Team";
+
+type TeamListItemProps = {
+    team: Team;
+  }
+  
+  export default function TeamListItem(props: TeamListItemProps) {
+    return (
+      <View style={styles.container}>
+        <Image style={styles.teaserImage} source={props.team.getLogo()} />
+        <Text style={styles.text_style}> {props.team.getName()}</Text>
+      </View>
+    )
+  }
+  
+  const styles = StyleSheet.create({
+    container: {
+        alignItems:'center',
+        backgroundColor:'#e1e8ee',
+        padding:10,
+        flex: 1,
+        flexDirection: "row",
+        marginTop:10,
+    },
+    text_style:{
+        marginLeft:15,
+        textAlign:'center',
+        fontSize:20,
+    },
+    teaserImage: {
+        borderWidth:1,
+        borderColor:'black',
+        borderRadius:50,
+        width: 50,
+        height: 50,
+    }
+  });
+  
\ No newline at end of file
diff --git a/R-Dash/screens/Team_Browser.tsx b/R-Dash/screens/Team_Browser.tsx
index 906a3c3..b701271 100644
--- a/R-Dash/screens/Team_Browser.tsx
+++ b/R-Dash/screens/Team_Browser.tsx
@@ -3,47 +3,23 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { SearchBar } from '@rneui/base';
 import { TouchableHighlight } from 'react-native-gesture-handler';
 import React from 'react';
+import { TEAMS } from '../stub/stub';
+import TeamListItem from '../components/TeamCmp';
 
 
 
 export default function Team_Browser(props: { navigation: any }) {
     const { navigation } = props;
-    type ItemProps = { title: string };
-  const Item = ({title}: ItemProps) => (
-    <View style={styles.item}>
-      <Text style={styles.title}>{title}</Text>
-    </View>
-  );
-  const DATA = [
-    {
-      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
-      title: 'First Item',
-    },
-    {
-      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
-      title: 'Second Item',
-    },
-    {
-      id: '58694a0f-3da1-471f-bd96-145571e29d71',
-      title: 'Third Item',
-    },
-    {
-      id: '58694a0f-3da1-471f-bd96-145571e29d78',
-      title: 'c Item',
-    },
-    {
-      id: '58694a0f-3da1-471f-bd96-145571e29d76',
-      title: 'b Item',
-    },
-    {
-      id: '58694a0f-3da1-471f-bd96-145571e29d75',
-      title: 'a Item',
-    },
-    {
-      id: '58694a0f-3da1-471f-bd96-145571e29d73',
-      title: 's Item',
-    },
-  ];
+    const state = {
+      search: '',
+    };
+
+    const updateSearch = (search: string) => {
+        state.search=search;
+    };
+
+    const { search } = state;
+    
   return (
     <SafeAreaView style={styles.container}>
         <View style={styles.card}>
@@ -52,11 +28,9 @@ export default function Team_Browser(props: { navigation: any }) {
             platform="default"
             lightTheme
           />
-              <FlatList data={DATA} renderItem={({ item }) =>
-                  <TouchableHighlight onPress={() => navigation.navigate('Info', { "team": item })}>
-                      <Item title={item.title} />
-                  </TouchableHighlight>
-              }/>
+          <FlatList
+            data={TEAMS}
+            renderItem={({ item }) => <TeamListItem team={item} />} />
         </View>
         
     </SafeAreaView>