diff --git a/package.json b/package.json
index a05a09b..c44d720 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@expo/metro-runtime": "^3.1.3",
     "@react-native-async-storage/async-storage": "^1.18.1",
     "@react-navigation/material-bottom-tabs": "^6.2.15",
     "@react-navigation/native": "^6.1.6",
@@ -21,13 +22,16 @@
     "expo-constants": "^14.4.2",
     "expo-modules-core": "^1.5.12",
     "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-native": "0.71.4",
     "react-native-async-storage": "^0.0.1",
     "react-native-paper": "^5.6.0",
     "react-native-safe-area-context": "^4.9.0",
     "react-native-safe-area-view": "^1.1.1",
     "react-native-simple-toast": "^2.0.0",
+    "react-native-toast-notifications": "^3.4.0",
     "react-native-vector-icons": "^9.2.0",
+    "react-native-web": "~0.18.10",
     "react-redux": "^8.0.5",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0"
diff --git a/src/App.tsx b/src/App.tsx
index e58a14a..8a61ca8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,29 +6,18 @@
  */
 import * as React from 'react';
 import {NavigationContainer, StackActions} from '@react-navigation/native';
-import type {PropsWithChildren} from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
+import {Platform} from 'react-native';
 import ClipViewLocal from './clip/ClipViewLocal';
 import ClipViewRemote from './clip/ClipViewRemote';
 import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import SignIn from './auth/SignIn';
 import SignUp from './auth/SignUp';
 import {Provider} from 'react-redux';
 import {store, persistor} from './redux/store';
 import {PersistGate} from 'redux-persist/integration/react';
-
-const Stack = createNativeStackNavigator();
 const Tab = createMaterialBottomTabNavigator();
+import { ToastProvider } from 'react-native-toast-notifications'
+
 
 class App extends React.Component<any, any> {
   constructor(props: any) {
@@ -40,59 +29,64 @@ class App extends React.Component<any, any> {
     store.subscribe(() => {
       this.setState({token: store.getState().persistedUserReducer.token});
     });
+    console.log(Platform.OS);
+    console.log(typeof store);
   }
 
+
   render(): React.ReactNode {
     console.log('render app', store.getState());
     console.log('app state', this.state);
     return (
-      <Provider store={store}>
-        <PersistGate loading={null} persistor={persistor} />
-        <NavigationContainer>
-          <Tab.Navigator>
-            {
-              this.state.token === '' ? (
+      <ToastProvider>
+        <Provider store={store}>
+          <PersistGate loading={null} persistor={persistor} />
+          <NavigationContainer>
+            <Tab.Navigator>
+              {
+                this.state.token === '' ? (
+                  ////////////////////////////////////////////////////////////
+                  <>
+                    <Tab.Screen
+                      children={() => <SignIn store={store} />}
+                      name="Login"
+                      options={{title: 'Connexion'}}
+                    />
+                    <Tab.Screen
+                      children={() => <SignUp store={store} />}
+                      name="Register"
+                      options={{title: 'Créer un compte'}}
+                    />
+                  </>
+                ) : (
+                    ////////////////////////////////////////////////////////////
+                    <>
+                      <Tab.Screen name="Local" options={{title: 'local'}}>
+                        {props => (
+                          <ClipViewLocal
+                            store={store}
+                            navigation={props.navigation}
+                            type={'local'}
+                          />
+                        )}
+                      </Tab.Screen>
+                      <Tab.Screen name="Remote" options={{title: 'distant'}}>
+                        {props => (
+                          <ClipViewRemote
+                            store={store}
+                            navigation={props.navigation}
+                            type={'remote'}
+                          />
+                        )}
+                      </Tab.Screen>
+                    </>
+                  )
                 ////////////////////////////////////////////////////////////
-                <>
-                  <Tab.Screen
-                    children={() => <SignIn store={store} />}
-                    name="Login"
-                    options={{title: 'Connexion'}}
-                  />
-                  <Tab.Screen
-                    children={() => <SignUp store={store} />}
-                    name="Register"
-                    options={{title: 'Créer un compte'}}
-                  />
-                </>
-              ) : (
-                ////////////////////////////////////////////////////////////
-                <>
-                  <Tab.Screen name="Local" options={{title: 'local'}}>
-                    {props => (
-                      <ClipViewLocal
-                        store={store}
-                        navigation={props.navigation}
-                        type={'local'}
-                      />
-                    )}
-                  </Tab.Screen>
-                  <Tab.Screen name="Remote" options={{title: 'distant'}}>
-                    {props => (
-                      <ClipViewRemote
-                        store={store}
-                        navigation={props.navigation}
-                        type={'remote'}
-                      />
-                    )}
-                  </Tab.Screen>
-                </>
-              )
-              ////////////////////////////////////////////////////////////
-            }
-          </Tab.Navigator>
-        </NavigationContainer>
-      </Provider>
+              }
+            </Tab.Navigator>
+          </NavigationContainer>
+        </Provider>
+      </ToastProvider>
     );
   }
 }
diff --git a/src/auth/SignIn.tsx b/src/auth/SignIn.tsx
index 1cd80f4..14a001b 100644
--- a/src/auth/SignIn.tsx
+++ b/src/auth/SignIn.tsx
@@ -32,22 +32,22 @@ export default class SignIn extends React.Component<any, any> {
         } else console.log(signInJson);
     }
 
-    updateUsername(event: any) {
-        this.setState({ username: event.target.value });
+    updateUsername(username: string) {
+        this.setState({ username: username });
     }
 
-    updatePassword(event: any) {
-        this.setState({ password: event.target.value });
+    updatePassword(password: string) {
+        this.setState({ password: password });
     }
 
     render(): React.ReactNode {
         return (
             <View>
                 <Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20 }}>Connexion</Text>
-                <TextInput placeholder="Nom d'utilisateur" value={this.state.username} onChange={this.updateUsername} />
-                <TextInput placeholder="Mot de Passe" value={this.state.password} onChange={this.updatePassword} />
+                <TextInput placeholder="Nom d'utilisateur" value={this.state.username} onChangeText={this.updateUsername} />
+                <TextInput placeholder="Mot de Passe" value={this.state.password} onChangeText={this.updatePassword} />
                 <Button title="Se connecter" onPress={this.signInFunction} />
             </View>
         );
     }
-}
\ No newline at end of file
+}
diff --git a/src/auth/SignUp.tsx b/src/auth/SignUp.tsx
index da986a8..02cd8fe 100644
--- a/src/auth/SignUp.tsx
+++ b/src/auth/SignUp.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {View, Text, Button, TextInput} from 'react-native';
-import {accessibilityProps} from 'react-native-paper/lib/typescript/src/components/MaterialCommunityIcon';
 import {setUser} from '../redux/actions';
 
 export default class SignUp extends React.Component<any, any> {
@@ -50,7 +49,7 @@ export default class SignUp extends React.Component<any, any> {
     this.setState({username: username});
   }
 
-  updatePassword(password: any) {
+  updatePassword(password: string) {
     this.setState({password: password});
   }
 
diff --git a/src/clip/AClipElement.tsx b/src/clip/AClipElement.tsx
deleted file mode 100644
index 7ddc9d1..0000000
--- a/src/clip/AClipElement.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { Clipboard } from 'react-native';
-import Toast from 'react-native-simple-toast';
-
-export default class AClipElement extends React.Component<any, any> {
-
-    constructor(props: any) {
-        super(props);
-    }
-
-    onCopy() {
-        Clipboard.setString(this.props.content);
-        Toast.show('Put "' + this.props.content + '" in clipboard', Toast.SHORT);
-    }
-
-}
\ No newline at end of file
diff --git a/src/clip/ClipElementLocal.tsx b/src/clip/ClipElementLocal.tsx
index 84a3860..3beefed 100644
--- a/src/clip/ClipElementLocal.tsx
+++ b/src/clip/ClipElementLocal.tsx
@@ -1,20 +1,24 @@
 import {View, Text, Button} from 'react-native';
 import IconVector from 'react-native-vector-icons/FontAwesome5';
-import AClipElement from './AClipElement';
 import Toast from 'react-native-simple-toast';
+import { Clipboard } from 'react-native';
+import { Store } from 'redux';
+import { black } from 'react-native-paper/lib/typescript/styles/themes/v2/colors';
 
-export default class ClipElementLocal extends AClipElement {
-  constructor(props: any) {
-    super(props);
-  }
+export default function ClipElementLocal({content, store}:{content: string,store : Store  }){
+ 
+   function onCopy() {
+        Clipboard.setString(content);
+        Toast.show('Put "' + content + '" in clipboard', Toast.SHORT);
+    }
 
-  async sendToRemote() {
+  async function sendToRemote() {
     const data = new FormData();
     data.append(
       'token',
-      this.props.store.getState().persistedUserReducer.token,
+      store.getState().persistedUserReducer.token,
     );
-    data.append('content', this.props.content);
+    data.append('content', content);
     data.append('deviceName', 'TODOChangeThisMobileDevice');
     const sendToRemoteResponse = await fetch(
       'https://notifysync.simailadjalim.fr/clipboard',
@@ -24,11 +28,9 @@ export default class ClipElementLocal extends AClipElement {
       },
     );
     const response = await sendToRemoteResponse.json();
-    Toast.show(this.props.content + 'was sent to the server', Toast.SHORT);
+    Toast.show(content + 'was sent to the server', Toast.SHORT);
   }
-
-  render(): JSX.Element {
-    return (
+  return (
       <View
         style={{
           flex: 1,
@@ -36,11 +38,13 @@ export default class ClipElementLocal extends AClipElement {
           flexDirection: 'row',
           justifyContent: 'space-between',
           alignItems: 'center',
+          
         }}>
-        <Text style={{fontSize: 20}}>{this.props.content.length >28 ?this.props.content.slice(0,24)+"...":this.props.content }</Text>
-        <IconVector name="sendTo" size={40} onPress={() => this.sendToRemote()} />
-        <IconVector name="clipboard" size={40} onPress={() => this.onCopy()} />
+        <Text style={{fontSize: 20,color:"black"}}>{content.length >28 ?content.slice(0,24)+"...":content }</Text>
+        <IconVector name="sendTo" size={40} color="black"  onPress={() => sendToRemote()} />
+        <IconVector name="clipboard" size={40} color="black" onPress={() => onCopy()} />
       </View>
     );
   }
-}
+
+
diff --git a/src/clip/ClipElementRemote.tsx b/src/clip/ClipElementRemote.tsx
index 32fab72..07cdc09 100644
--- a/src/clip/ClipElementRemote.tsx
+++ b/src/clip/ClipElementRemote.tsx
@@ -1,23 +1,24 @@
 import { View, Text } from 'react-native';
 import IconVector from 'react-native-vector-icons/FontAwesome5';
-import AClipElement from './AClipElement';
+import { Store } from 'redux';
+import { Clipboard } from 'react-native';
+import Toast from 'react-native-simple-toast';
 
-export default class ClipElementRemote extends AClipElement {
+export default function ClipElementRemote({content,timestamp,deviceName,store}:{content:string;timestamp:number,deviceName:string;store: Store}){
 
-    constructor(props: any) {
-        super(props);
-    }
+  function onCopy() {
+    Clipboard.setString(content);
+    Toast.show('Put "' + content + '" in clipboard', Toast.SHORT);
+  }
 
-    render(): JSX.Element {
-        const date= new Date(this.props.timestamp*1000);
-        console.log(this.props.timestamp*1000);
-        return <View style={{flex:1,margin:10,flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
-            <View style={{flex:1,margin:10,flexDirection:'column'}}>
-                <Text style={{fontSize:20,}}>{this.props.content.length >28 ?this.props.content.slice(0,24)+"...":this.props.content}</Text>
-                <Text style={{fontSize:10,}}>{this.props.deviceName}</Text>
-                <Text style={{fontSize:10,}}>{date.getHours() + ":" + date.getMinutes() + ", "+ date.toDateString()}</Text>
-            </View>
-            <IconVector name="clipboard" size={40} onPress={() => this.onCopy()} />
-        </View>;
-    }
-}
\ No newline at end of file
+  const date= new Date(timestamp*1000);
+  console.log(timestamp*1000);
+  return <View style={{flex:1,margin:10,flexDirection:'row',justifyContent:'space-between',alignItems:'center'}}>
+    <View style={{flex:1,margin:10,flexDirection:'column'}}>
+      <Text style={{fontSize:20,color:"black"}}>{content.length >28 ?content.slice(0,24)+"...":content}</Text>
+      <Text style={{fontSize:10,color:"black"}}>{deviceName}</Text>
+      <Text style={{fontSize:10,color:"black"}}>{date.getHours() + ":" + date.getMinutes() + ", "+ date.toDateString()}</Text>
+    </View>
+    <IconVector name="clipboard" size={40} color="black" onPress={() => onCopy()} />
+  </View>;
+}
diff --git a/src/clip/ClipViewLocal.tsx b/src/clip/ClipViewLocal.tsx
index af64a7d..5685102 100644
--- a/src/clip/ClipViewLocal.tsx
+++ b/src/clip/ClipViewLocal.tsx
@@ -1,5 +1,3 @@
-import axios from 'axios';
-import React from 'react';
 import {ScrollView, Text, Button, Clipboard} from 'react-native';
 import ClipList from './ClipList';
 import AClipView from './AClipView';
@@ -39,7 +37,7 @@ export default class ClipViewLocal extends AClipView {
     let notTitle = 'Remote Clipboard';
     return (
       <ScrollView>
-        <Text style={{fontWeight: 'bold', fontSize: 30, margin: 20}}>
+        <Text style={{fontWeight: 'bold', fontSize: 30, margin: 20, color:"black"}}>
           {title}
         </Text>
         <Button
diff --git a/src/clip/ClipViewRemote.tsx b/src/clip/ClipViewRemote.tsx
index ad57022..7f67c7e 100644
--- a/src/clip/ClipViewRemote.tsx
+++ b/src/clip/ClipViewRemote.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { ScrollView, Text, Button } from 'react-native';
 import ClipList from './ClipList';
 import AClipView from './AClipView';
+import { black } from 'react-native-paper/lib/typescript/styles/themes/v2/colors';
 
 export default class ClipViewRemote extends AClipView {
     constructor(props: any) {
@@ -23,10 +24,12 @@ export default class ClipViewRemote extends AClipView {
     render(): JSX.Element {
         let title = "Remote Clipboard";
         return <ScrollView>
-            <Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20 }}>{title}</Text>
-            <ClipList type={this.props.type} clips={this.state.clips} />
+            <Text style={{ fontWeight: 'bold', fontSize: 30, margin: 20, color:"black" }}>
+                {title}
+            </Text>
             <Button title="Refresh" onPress={() => this.componentDidMount()} />
+            <ClipList type={this.props.type} clips={this.state.clips} />
             {this.getSignOutBtn()}
         </ScrollView>;
     }
-}
\ No newline at end of file
+}