diff --git a/app/(tabs)/bonjourFL.tsx b/app/(tabs)/bonjourFL.tsx
index 4a63a40..0b5d690 100644
--- a/app/(tabs)/bonjourFL.tsx
+++ b/app/(tabs)/bonjourFL.tsx
@@ -156,8 +156,5 @@ const styles = StyleSheet.create({
   },
   selectChantier:{
     width:"100%",
-    padding:10,
-    margin:10,
-    marginTop:50,
   },
 });
\ No newline at end of file
diff --git a/app/login/login.tsx b/app/login/login.tsx
index 67be2c4..1150585 100644
--- a/app/login/login.tsx
+++ b/app/login/login.tsx
@@ -7,6 +7,9 @@ import {
 import { doc, setDoc } from "firebase/firestore";
 import { auth, db } from "../../firebase_config";
 import { router } from "expo-router";
+import { ThemedTextInput } from "@/components/themed-textinpute";
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
 
 const DEFAULT_ROLE = "resp";
 
@@ -33,10 +36,12 @@ const LoginScreen: React.FC = () => {
   }; */
 
   return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Se connecter / S'incrire</Text>
-      <TextInput
-        style={[styles.input, { color: 'white' }]}
+    <ThemedView lvl={1} style={styles.container}>
+      <ThemedText style={styles.title}>Se connecter / S'incrire</ThemedText>
+      <ThemedTextInput
+        lvl = {2}
+        border = {5}
+        style={[styles.input]}
         placeholder="Email:"
         placeholderTextColor={'white'}
         value={email}
@@ -44,8 +49,10 @@ const LoginScreen: React.FC = () => {
         autoCapitalize="none"
 
       />
-      <TextInput
-        style={[styles.input, { color: 'white' }]}
+      <ThemedTextInput
+        lvl = {2}
+        border = {5}
+        style={[styles.input]}
         placeholder="Mot de passe:"
         placeholderTextColor={'white'}
         value={password}
@@ -55,14 +62,14 @@ const LoginScreen: React.FC = () => {
       <Button title="Se connecter" onPress={handleLogin} />
       <View style={{ height: 10 }} />
       {/* <Button title="S'inscrire" onPress={handleRegister} /> */}
-    </View>
+    </ThemedView>
   );
 };
 
 export default LoginScreen;
 
 const styles = StyleSheet.create({
-  container: { flex: 1, justifyContent: "center", padding: 20 },
+  container: { flex: 1, padding: 20, paddingTop: 100},
   title: {
     fontSize: 22,
     fontWeight: "bold",
@@ -71,7 +78,7 @@ const styles = StyleSheet.create({
   },
   input: {
     borderWidth: 1,
-    borderColor: "#ccc",
+    //borderColor: "#ccc",
     borderRadius: 8,
     padding: 10,
     marginBottom: 10,
diff --git a/class/class.tsx b/class/class.tsx
new file mode 100644
index 0000000..24ff68a
--- /dev/null
+++ b/class/class.tsx
@@ -0,0 +1,139 @@
+export class Chantier{
+    id: number;
+    adresse: string;
+    etat: string;
+    contact: string;
+    chef: Chef;
+    equipe : Equipier[];
+    materiel : Materiel[];
+    dateDep : string;
+    tempsEst : number;
+    vehicules : Vehicule[];
+    anomalies : string[];
+
+        constructor(
+        id: number,
+        adresse: string,
+        etat: string,
+        contact: string,
+        chef: Chef,
+        equipe: Equipier[],
+        materiel: Materiel[],
+        dateDep: string,
+        tempsEst: number,
+        vehicules: Vehicule[],
+        anomalies: string[]
+    ) {
+        this.id = id;
+        this.adresse = adresse;
+        this.etat = etat;
+        this.contact = contact;
+        this.chef = chef;
+        this.equipe = equipe;
+        this.materiel = materiel;
+        this.dateDep = dateDep;
+        this.tempsEst = tempsEst;
+        this.vehicules = vehicules;
+        this.anomalies = anomalies;
+    }
+}
+
+export abstract class Equipier{
+    id: number;
+    nom: string;
+    prenom: string;
+    allocation: Reservation[];
+
+    constructor(id: number, nom:string, prenom:string, allocation: Reservation[]){
+        this.id = id;
+        this.nom = nom;
+        this.prenom = prenom;
+        this.allocation = allocation;
+    }
+}
+
+export class Chef extends Equipier{
+    constructor(id: number, nom:string, prenom:string, allocation: Reservation[]){
+        super(id,nom,prenom,allocation);
+    }
+}
+
+export class Ouvrier extends Equipier{
+    qualification : string;
+
+    constructor(id: number, nom:string, prenom:string, allocation: Reservation[], qualification: string){
+        super(id,nom,prenom,allocation);
+        this.qualification=qualification;
+    }
+}
+
+export class ResponsableChantier extends Equipier{
+    constructor(id: number, nom:string, prenom:string, allocation: Reservation[]){
+        super(id,nom,prenom,allocation);
+    } 
+}
+
+export class Materiel {
+    id: number;
+    nom: string;
+    prenom: string;
+    type: string;
+    allocation: Reservation[];
+
+    constructor(
+        id: number,
+        nom: string,
+        prenom: string,
+        type: string,
+        allocation: Reservation[]
+    ) {
+        this.id = id;
+        this.nom = nom;
+        this.prenom = prenom;
+        this.type = type;
+        this.allocation = allocation;
+    }
+}
+
+
+export class Reservation {
+    id: string;
+    dateChantier: Date;
+    dateFin: Date;
+    duree: number;
+
+    constructor(
+        id: string,
+        dateChantier: Date,
+        dateFin: Date,
+        duree: number
+    ) {
+        this.id = id;
+        this.dateChantier = dateChantier;
+        this.dateFin = dateFin;
+        this.duree = duree;
+    }
+}
+
+
+export class Vehicule {
+    id: number;
+    nom: string;
+    type: string;
+    allocation: Reservation[];
+
+    constructor(
+        id: number,
+        nom: string,
+        type: string,
+        allocation: Reservation[]
+    ) {
+        this.id = id;
+        this.nom = nom;
+        this.type = type;
+        this.allocation = allocation;
+    }
+}
+
+
+export const exempleChantier = new Chantier(1,"Rennes","en cours","contact",new Chef(1,"Chyeef","YEE",[]),[],[],"01/01/25",10,[],["YEE"])
diff --git a/components/selectChantier.tsx b/components/selectChantier.tsx
index b0b22dd..dfaff69 100644
--- a/components/selectChantier.tsx
+++ b/components/selectChantier.tsx
@@ -4,12 +4,17 @@ import { ThemedTextInput } from './themed-textinpute';
 import { ThemedView } from "./themed-view";
 import { ThemedText } from './themed-text';
 import { ThemedButton } from './themed-button';
+import { Chantier, Chef, exempleChantier } from '@/class/class';
+import {BlurView} from 'expo-blur';
+import { Dimensions } from "react-native";
+
+const screenHeight = Dimensions.get("window").height;
 
 export default function SelectChantier() {
 
     const [search, setSearch] = useState('');
     const [isOpen,setIsOpen] = useState(false);
-    const [chantiers,setChantiers] = useState([]);
+    const [chantiers,setChantiers] = useState<Chantier[]>([exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier]);
     
 
   function onPressOpen(event: GestureResponderEvent): void {
@@ -17,45 +22,62 @@ export default function SelectChantier() {
   }
 
 
-    const renderChantier = ()  => {
+    const renderChantier = (chantier:Chantier, index: number)  => {
       return(
-      <ThemedView lvl={0} style={styles.chantier}>
+      <ThemedView key={index} lvl={3} style={styles.chantier}>
+        <ThemedText>adresse: {chantier.adresse}</ThemedText>
+        <ThemedText>chef de chantier: {chantier.chef.prenom} {chantier.chef.nom}</ThemedText>
+        <ThemedText>date de début: {chantier.dateDep}</ThemedText>
+        <ThemedText>etat: {chantier.etat}</ThemedText>
       </ThemedView>
       );
     };
 
-    if(isOpen){
+    if(!isOpen){
     return (
         <View style={styles.closedSelectZone}>
-              <ThemedButton  style={styles.button} lvl={2} onPress={onPressOpen}>
-              <ThemedText style={styles.buttonText}>Open</ThemedText>
-              </ThemedButton>
+          <ThemedButton  style={styles.button} lvl={2} onPress={onPressOpen}>
+            <ThemedText style={styles.buttonText}>Open</ThemedText>
+          </ThemedButton>
         </View>
     )
     }
     else{
       return(
-        <ThemedView lvl={2} style={styles.openedSelectZone}>
-          <ScrollView>
-            <ThemedButton  style={styles.buttonOpen} lvl={3} onPress={onPressOpen}>
-              <ThemedText style={styles.buttonText}>Close</ThemedText>
-            </ThemedButton>
-              <View style={styles.searchZone}>
-                <ThemedTextInput
-                  lvl={1}
-                  border={5}
-                  style={styles.input}
-                  placeholder='Rechercher un chantier'
-                  value={search}
-                  onChangeText={setSearch}
-                />
-              </View>
+        <View style={styles.openedSelectZone}>
+          <BlurView intensity={1} blurReductionFactor={0.2} experimentalBlurMethod='dimezisBlurView' style={styles.blur}>
+            <ThemedView lvl={0} opacity="40">
               
-              <View>
+                <ThemedButton  style={styles.buttonOpen} lvl={3} onPress={onPressOpen}>
+                  <ThemedText style={styles.buttonText}>Close</ThemedText>
+                </ThemedButton>
+
+                <View style={styles.searchZone}>
+                  <ThemedTextInput
+                    lvl={1}
+                    border={4}
+                    style={styles.input}
+                    placeholder='Rechercher un chantier'
+                    value={search}
+                    onChangeText={setSearch}
+                  />
+                </View>
+                
+                
+                  <ScrollView>
+                    {chantiers.map((chantier, index) => (
+                      renderChantier(chantier, index)
+                      ))
+                    }
+                  </ScrollView>
+                  
+
+            </ThemedView>
+            
+        </BlurView>
+      </View>
+
 
-              </View>
-          </ScrollView>
-      </ThemedView>
       )
     };
 }
@@ -67,6 +89,13 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     zIndex: 9999,
     elevation: 9999,
+    overflow: "hidden",
+    paddingTop:25,
+    height: screenHeight/2,
+  },
+  blur:{
+    /*flex: 1,*/
+    /*backgroundColor: "rgba(255,255,255,0.0001)",*/
   },
   closedSelectZone:{
     position: 'absolute',
@@ -90,11 +119,15 @@ const styles = StyleSheet.create({
   },
     searchZone:{
     width: "100%",
-    padding:20,
-    marginTop:50,
+    padding:10,
+    marginTop:10,
     alignItems: 'center',
   },
   chantier:{
+    padding:10,
+    margin:10,
+    borderRadius:10,
+    //borderWidth: 1,
   },
   input: {
     width: '100%',
diff --git a/components/themed-button.tsx b/components/themed-button.tsx
index a013974..773bf2b 100644
--- a/components/themed-button.tsx
+++ b/components/themed-button.tsx
@@ -7,9 +7,11 @@ export type ThemedPressableProps = PressableProps & {
   darkColor?: string;
   lvl?:number;
   border?:number;
+  opacity?:string;
 };
 
-export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1, ...otherProps }: ThemedPressableProps) {
+//nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
+export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF", ...otherProps }: ThemedPressableProps) {
   var lvlStr:string = "background";
   var borderColor ="";
   if(lvl>=0 && lvl<6){
@@ -17,7 +19,7 @@ export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1, ...
   }
   else lvlStr+='5';
 
-  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity;
 
 
   if(border!=-1){
diff --git a/components/themed-textinpute.tsx b/components/themed-textinpute.tsx
index 2478cfc..c9cdaa1 100644
--- a/components/themed-textinpute.tsx
+++ b/components/themed-textinpute.tsx
@@ -8,10 +8,12 @@ export type ThemedTextInputProps = TextInputProps & {
   reverse?:boolean;
   lvl?:number;
   border?:number;
+  opacity?:string;
   type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
 };
 
-export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lvl=1,border=-1,type = 'default', ...rest}: ThemedTextInputProps) {
+//nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
+export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lvl=1,border=-1,opacity="FF",type = 'default', ...rest}: ThemedTextInputProps) {
 
   var text:string = 'text'
   if(reverse){
@@ -26,7 +28,7 @@ export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lv
   }
   else lvlStr+='5';
 
-  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity;
 
 
   if(border!=-1){
diff --git a/components/themed-view.tsx b/components/themed-view.tsx
index cea822b..6206520 100644
--- a/components/themed-view.tsx
+++ b/components/themed-view.tsx
@@ -7,9 +7,12 @@ export type ThemedViewProps = ViewProps & {
   darkColor?: string;
   lvl?:number;
   border?:number;
+  opacity?:string;
 };
 
-export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1, ...otherProps }: ThemedViewProps) {
+
+//nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
+export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF", ...otherProps }: ThemedViewProps) {
   var lvlStr:string = "background";
   var borderColor ="";
   if(lvl>=0 && lvl<6){
@@ -17,7 +20,7 @@ export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1, ...ot
   }
   else lvlStr+='5';
 
-  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5');
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor },lvlStr as 'background0'|'background1'|'background2'|'background3'|'background4'|'background5')+opacity;
 
 
   if(border!=-1){
diff --git a/package-lock.json b/package-lock.json
index 75bdfd0..c07e9de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@react-navigation/elements": "^2.6.3",
         "@react-navigation/native": "^7.1.19",
         "expo": "~54.0.13",
+        "expo-blur": "~15.0.7",
         "expo-constants": "~18.0.9",
         "expo-font": "~14.0.9",
         "expo-haptics": "~15.0.7",
@@ -7026,6 +7027,17 @@
         "react-native": "*"
       }
     },
+    "node_modules/expo-blur": {
+      "version": "15.0.7",
+      "resolved": "https://registry.npmjs.org/expo-blur/-/expo-blur-15.0.7.tgz",
+      "integrity": "sha512-SugQQbQd+zRPy8z2G5qDD4NqhcD7srBF7fN7O7yq6q7ZFK59VWvpDxtMoUkmSfdxgqONsrBN/rLdk00USADrMg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/expo-constants": {
       "version": "18.0.9",
       "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-18.0.9.tgz",
diff --git a/package.json b/package.json
index ee2cf16..6f506cb 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@react-navigation/elements": "^2.6.3",
     "@react-navigation/native": "^7.1.19",
     "expo": "~54.0.13",
+    "expo-blur": "~15.0.7",
     "expo-constants": "~18.0.9",
     "expo-font": "~14.0.9",
     "expo-haptics": "~15.0.7",