diff --git a/bob_party/src/components/ButtonGameChoice.tsx b/bob_party/src/components/ButtonGameChoice.tsx
new file mode 100644
index 0000000..f740210
--- /dev/null
+++ b/bob_party/src/components/ButtonGameChoice.tsx
@@ -0,0 +1,16 @@
+import { FC} from "react"
+import { Pressable, Text} from "react-native"
+import React from "react"
+import styles from "./style/ButtonGameChoice.style"
+
+export const ButtonGameChoice:
+FC<{ onPress: any; title?: any | undefined; }>
+=
+({onPress,title}) =>
+     {
+    return (
+      <Pressable style={styles.button} onPress={onPress}>
+        <Text style={styles.text}>{title}</Text>
+      </Pressable>
+    );
+  }
\ No newline at end of file
diff --git a/bob_party/src/components/style/ButtonGameChoice.style.js b/bob_party/src/components/style/ButtonGameChoice.style.js
new file mode 100644
index 0000000..b4f05ec
--- /dev/null
+++ b/bob_party/src/components/style/ButtonGameChoice.style.js
@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+    button: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '30%',
+        width: '100%',
+        marginTop: '10%',
+        paddingVertical: 12,
+        paddingHorizontal: 32,
+        borderRadius: 10,
+        elevation: 3,
+        backgroundColor: '#0085FF',
+      },
+      text: {
+        fontSize: 16,
+        lineHeight: 21,
+        fontWeight: 'bold',
+        letterSpacing: 0.25,
+        color: 'white',
+      },
+});
\ No newline at end of file
diff --git a/bob_party/src/screens/Home.tsx b/bob_party/src/screens/Home.tsx
index b006037..aaf1c09 100644
--- a/bob_party/src/screens/Home.tsx
+++ b/bob_party/src/screens/Home.tsx
@@ -7,6 +7,7 @@ import { Skin } from '../core/skin';
 import { TopBar } from '../components/TopBar';
 import { BotBar } from '../components/BotBar';
 import { Conversation } from '../core/conversation';
+import { ButtonGameChoice } from '../components/ButtonGameChoice';
 
 
 
@@ -34,11 +35,11 @@ function Home(props: { navigation: any; }) {
         nav={navigation}
       />
       <View style={styles.body}>
-        <Button 
+        <ButtonGameChoice
         title='Jouer Seul'
         onPress={() => navigation.navigate('GameChoice')}
         />
-        <Button 
+        <ButtonGameChoice
         title='Défier mes amis'
         onPress={() => navigation.navigate('GameChoice')}
         />
@@ -51,17 +52,6 @@ function Home(props: { navigation: any; }) {
   );
 }
 
-
-function Button(props: { onPress: any; title?: any | undefined; }) {
-  const { onPress, title = 'Save' } = props;
-  return (
-    <Pressable style={styles.button} onPress={onPress}>
-      <Text style={styles.text}>{title}</Text>
-    </Pressable>
-  );
-}
-
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -70,35 +60,6 @@ const styles = StyleSheet.create({
     justifyContent: "flex-start",
     alignItems: "center",
   },
-  button: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: '30%',
-    width: '100%',
-    marginTop: '10%',
-    paddingVertical: 12,
-    paddingHorizontal: 32,
-    borderRadius: 10,
-    elevation: 3,
-    backgroundColor: '#0085FF',
-  },
-  text: {
-    fontSize: 16,
-    lineHeight: 21,
-    fontWeight: 'bold',
-    letterSpacing: 0.25,
-    color: 'white',
-  },
-  titre: {
-    flex: 0.7,
-    flexDirection: 'column',
-    textAlign: 'center',
-    fontSize: 30,
-    fontFamily: 'Helvetica',
-    fontWeight: 'bold',
-    letterSpacing: 0.25,
-    color: 'white',
-  },
   engrenage: {
     borderRadius: 50,
     width: 50,