diff --git a/Sources/AllInApp/AllIn/Assets.xcassets/BlackTitleColor.colorset/Contents.json b/Sources/AllInApp/AllIn/Assets.xcassets/BlackTitleColor.colorset/Contents.json
new file mode 100644
index 0000000..0e54db2
--- /dev/null
+++ b/Sources/AllInApp/AllIn/Assets.xcassets/BlackTitleColor.colorset/Contents.json
@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x49",
+          "green" : "0x49",
+          "red" : "0x49"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x49",
+          "green" : "0x49",
+          "red" : "0x49"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Sources/AllInApp/AllIn/Assets.xcassets/Bleue200.colorset/Contents.json b/Sources/AllInApp/AllIn/Assets.xcassets/Bleue200.colorset/Contents.json
new file mode 100644
index 0000000..0286b3d
--- /dev/null
+++ b/Sources/AllInApp/AllIn/Assets.xcassets/Bleue200.colorset/Contents.json
@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xF8",
+          "green" : "0x99",
+          "red" : "0x23"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xF8",
+          "green" : "0x99",
+          "red" : "0x23"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Sources/AllInApp/AllIn/Assets.xcassets/BleueBadge.imageset/Contents.json b/Sources/AllInApp/AllIn/Assets.xcassets/BleueBadge.imageset/Contents.json
new file mode 100644
index 0000000..446d6be
--- /dev/null
+++ b/Sources/AllInApp/AllIn/Assets.xcassets/BleueBadge.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "Vector.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Sources/AllInApp/AllIn/Assets.xcassets/BleueBadge.imageset/Vector.png b/Sources/AllInApp/AllIn/Assets.xcassets/BleueBadge.imageset/Vector.png
new file mode 100644
index 0000000..2114e9d
Binary files /dev/null and b/Sources/AllInApp/AllIn/Assets.xcassets/BleueBadge.imageset/Vector.png differ
diff --git a/Sources/AllInApp/AllIn/Assets.xcassets/LoadingHeart.imageset/Contents.json b/Sources/AllInApp/AllIn/Assets.xcassets/LoadingHeart.imageset/Contents.json
new file mode 100644
index 0000000..063d4f3
--- /dev/null
+++ b/Sources/AllInApp/AllIn/Assets.xcassets/LoadingHeart.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "Group 280.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Sources/AllInApp/AllIn/Assets.xcassets/LoadingHeart.imageset/Group 280.png b/Sources/AllInApp/AllIn/Assets.xcassets/LoadingHeart.imageset/Group 280.png
new file mode 100644
index 0000000..956a97a
Binary files /dev/null and b/Sources/AllInApp/AllIn/Assets.xcassets/LoadingHeart.imageset/Group 280.png differ
diff --git a/Sources/AllInApp/AllIn/Assets.xcassets/Pink100.colorset/Contents.json b/Sources/AllInApp/AllIn/Assets.xcassets/Pink100.colorset/Contents.json
new file mode 100644
index 0000000..3492dff
--- /dev/null
+++ b/Sources/AllInApp/AllIn/Assets.xcassets/Pink100.colorset/Contents.json
@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x8A",
+          "green" : "0x2B",
+          "red" : "0xFE"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x8A",
+          "green" : "0x2B",
+          "red" : "0xFE"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Sources/AllInApp/AllIn/Assets.xcassets/Pink200.colorset/Contents.json b/Sources/AllInApp/AllIn/Assets.xcassets/Pink200.colorset/Contents.json
new file mode 100644
index 0000000..c0ba743
--- /dev/null
+++ b/Sources/AllInApp/AllIn/Assets.xcassets/Pink200.colorset/Contents.json
@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xA8",
+          "green" : "0x49",
+          "red" : "0xC2"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xA8",
+          "green" : "0x49",
+          "red" : "0xC2"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Sources/AllInApp/AllIn/Assets.xcassets/PinkBadge.imageset/Contents.json b/Sources/AllInApp/AllIn/Assets.xcassets/PinkBadge.imageset/Contents.json
new file mode 100644
index 0000000..b0b4a62
--- /dev/null
+++ b/Sources/AllInApp/AllIn/Assets.xcassets/PinkBadge.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "Vector (1).png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Sources/AllInApp/AllIn/Assets.xcassets/PinkBadge.imageset/Vector (1).png b/Sources/AllInApp/AllIn/Assets.xcassets/PinkBadge.imageset/Vector (1).png
new file mode 100644
index 0000000..c6c1d71
Binary files /dev/null and b/Sources/AllInApp/AllIn/Assets.xcassets/PinkBadge.imageset/Vector (1).png differ
diff --git a/Sources/AllInApp/AllIn/Assets.xcassets/Purple200.colorset/Contents.json b/Sources/AllInApp/AllIn/Assets.xcassets/Purple200.colorset/Contents.json
new file mode 100644
index 0000000..8beecea
--- /dev/null
+++ b/Sources/AllInApp/AllIn/Assets.xcassets/Purple200.colorset/Contents.json
@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xC5",
+          "green" : "0x66",
+          "red" : "0x8A"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xC5",
+          "green" : "0x66",
+          "red" : "0x8A"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Sources/AllInApp/AllIn/Components/AllcoinsCounter.swift b/Sources/AllInApp/AllIn/Components/AllcoinsCounter.swift
index eb21bd1..e5771c1 100644
--- a/Sources/AllInApp/AllIn/Components/AllcoinsCounter.swift
+++ b/Sources/AllInApp/AllIn/Components/AllcoinsCounter.swift
@@ -8,6 +8,8 @@
 import SwiftUI
 
 struct AllcoinsCounter: View {
+    var backgroundColor: Color = AllInColors.whiteColor
+    var foreGroundColor: Color = AllInColors.primaryColor
     var body: some View {
         HStack(alignment: .center) {
             Image("allcoinIcon")
@@ -15,10 +17,10 @@ struct AllcoinsCounter: View {
                 .frame(width: 17, height: 17, alignment: .leading)
             Text(String(AppStateContainer.shared.user?.nbCoins ?? 0))
                 .fontWeight(.black)
-                .foregroundColor(AllInColors.primaryColor)
+                .foregroundColor(foreGroundColor)
         }
         .frame(width: 90, height: 40)
-        .background(Color.white)
+        .background(backgroundColor)
         .cornerRadius(9999, corners: [.topLeft, .bottomLeft])
         
     }
diff --git a/Sources/AllInApp/AllIn/Components/BetCard.swift b/Sources/AllInApp/AllIn/Components/BetCard.swift
index a1d3eda..653f9a9 100644
--- a/Sources/AllInApp/AllIn/Components/BetCard.swift
+++ b/Sources/AllInApp/AllIn/Components/BetCard.swift
@@ -9,47 +9,46 @@ import SwiftUI
 
 struct BetCard: View {
     @State var showDetails: Bool = false
+    @State var showParticipate: Bool = false
     var body: some View {
-        ZStack{
-            VStack(spacing: 0){
-                VStack(alignment: .leading,spacing: 2){
-                    HStack{
-                        Spacer()
-                        Text("proposé par Lucas").font(.system(size: 10)).foregroundColor(AllInColors.grey800Color)
-                        
-                    }
-                    Text("Etudes").font(.system(size: 15)).foregroundColor(AllInColors.grey800Color)
-                    Text("Emre va réussir son TP de CI/CD mercredi?").font(.system(size: 20)).fontWeight(.bold)
-                    HStack{
-                        Text("Commence le").font(.system(size: 15)).foregroundColor(AllInColors.grey800Color)
-                        TextCapsule()
-                        TextCapsule()
-                        Spacer()
-                        
-                    }
+        VStack(spacing: 0){
+            VStack(alignment: .leading,spacing: 2){
+                HStack{
+                    Spacer()
+                    Text("proposé par Lucas").font(.system(size: 10)).foregroundColor(AllInColors.grey800Color)
+                    
                 }
-                .frame(width: .infinity)
-                .padding(.all,15)
-                .background(AllInColors.componentBackgroundColor).cornerRadius(20, corners: [.topLeft,.topRight]).padding(.bottom,0)
-                
-                VStack(alignment: .leading,spacing: 2){
-                    HStack{
-                        Spacer()
-                        UsersPreview()
-                        Text(" 4 joueurs en attente").font(.system(size: 15)).foregroundColor(AllInColors.grey800Color).fontWeight(.medium)
-                        
-                        Spacer()
-                        
-                    }.padding(0)
-                    ParticipateButton().padding(.top, 5)
+                Text("Etudes").font(.system(size: 15)).foregroundColor(AllInColors.grey800Color)
+                Text("Emre va réussir son TP de CI/CD mercredi?").font(.system(size: 20)).fontWeight(.bold)
+                HStack{
+                    Text("Commence le").font(.system(size: 15)).foregroundColor(AllInColors.grey800Color)
+                    TextCapsule()
+                    TextCapsule()
+                    Spacer()
                     
                 }
-                .frame(width: .infinity)
-                .padding(.all,8)
-                .background(AllInColors.underComponentBackgroundColor)
-                .cornerRadius(20, corners: [.bottomLeft,.bottomRight])
-                .border(width: 1, edges: [.top], color: AllInColors.delimiterGrey)
             }
+            .frame(width: .infinity)
+            .padding(.all,15)
+            .background(AllInColors.componentBackgroundColor).cornerRadius(20, corners: [.topLeft,.topRight]).padding(.bottom,0)
+            
+            VStack(alignment: .leading,spacing: 2){
+                HStack{
+                    Spacer()
+                    UsersPreview()
+                    Text(" 4 joueurs en attente").font(.system(size: 15)).foregroundColor(AllInColors.grey800Color).fontWeight(.medium)
+                    
+                    Spacer()
+                    
+                }.padding(0)
+                ParticipateButton(isOpen: $showParticipate).padding(.top, 5)
+                
+            }
+            .frame(width: .infinity)
+            .padding(.all,8)
+            .background(AllInColors.underComponentBackgroundColor)
+            .cornerRadius(20, corners: [.bottomLeft,.bottomRight])
+            .border(width: 1, edges: [.top], color: AllInColors.delimiterGrey)
         }.onTapGesture {
             showDetails.toggle()
         }.fullScreenCover(isPresented: $showDetails) {
@@ -57,6 +56,8 @@ struct BetCard: View {
         }
         
     }
+        
+
 }
 
 struct BetCard_Previews: PreviewProvider {
diff --git a/Sources/AllInApp/AllIn/Components/BetLineLoading.swift b/Sources/AllInApp/AllIn/Components/BetLineLoading.swift
new file mode 100644
index 0000000..ba9dc95
--- /dev/null
+++ b/Sources/AllInApp/AllIn/Components/BetLineLoading.swift
@@ -0,0 +1,77 @@
+//
+//  BetLineLoading.swift
+//  AllIn
+//
+//  Created by Lucas Delanier on 19/01/2024.
+//
+
+import SwiftUI
+
+struct BetLineLoading: View {
+    
+    @Binding var value: Float
+    var body: some View {
+        GeometryReader { geometry in
+            VStack(spacing: 0){
+                HStack(spacing: 5){
+                    Text("OUI").font(.system(size: 25)).fontWeight(.bold).foregroundColor(AllInColors.bleue200)
+                    Spacer()
+                    Text("NON").font(.system(size: 25)).fontWeight(.bold).foregroundColor(AllInColors.pink100)
+
+                }
+                ZStack(alignment: .leading) {
+                    HStack{
+                        Spacer()
+                        Rectangle().frame(width: min(CGFloat(1-self.value)*geometry.size.width, geometry.size.width), height: 17)
+                            .foregroundStyle(AllInColors.PinkBetGradiant).cornerRadius(999)
+                    }
+                    
+                    HStack(spacing: 0){
+                        Rectangle().frame(width: min(CGFloat(self.value)*geometry.size.width, geometry.size.width), height: 17)
+                            .foregroundStyle(AllInColors.BlueBetGradiant).cornerRadius(999)
+                            .animation(.linear)
+                        Image("LoadingHeart").resizable().frame(width: 29, height: 32).padding(.leading, -10)
+                    }
+                    
+                }
+                VStack(spacing: 1){
+                    HStack(spacing: 5){
+                        Image("BleueBadge").resizable().frame(width:10, height: 14)
+                        Text("1.2").font(.system(size: 15)).fontWeight(.bold).foregroundColor(AllInColors.bleue200)
+                        Spacer()
+                        Text("1.2").font(.system(size: 15)).fontWeight(.bold).foregroundColor(AllInColors.pink100)
+                        Image("PinkBadge").resizable().frame(width:10, height: 14)
+
+                    }
+                    HStack(spacing: 5){
+                        Image("BleueBadge").resizable().frame(width:10, height: 14)
+                        Text("1.2").font(.system(size: 15)).fontWeight(.bold).foregroundColor(AllInColors.bleue200)
+                        Spacer()
+                        Text("1.2").font(.system(size: 15)).fontWeight(.bold).foregroundColor(AllInColors.pink100)
+                        Image("PinkBadge").resizable().frame(width:10, height: 14)
+
+                    }
+                    HStack(spacing: 5){
+                        Image("BleueBadge").resizable().frame(width:10, height: 14)
+                        Text("1.2").font(.system(size: 15)).fontWeight(.bold).foregroundColor(AllInColors.bleue200)
+                        Spacer()
+                        Text("1.2").font(.system(size: 15)).fontWeight(.bold).foregroundColor(AllInColors.pink100)
+                        Image("PinkBadge").resizable().frame(width:10, height: 14)
+
+                    }
+                    HStack(spacing: 5){
+                        Image("BleueBadge").resizable().frame(width:10, height: 14)
+                        Text("1.2").font(.system(size: 15)).fontWeight(.bold).foregroundColor(AllInColors.bleue200)
+                        Spacer()
+                        Text("1.2").font(.system(size: 15)).fontWeight(.bold).foregroundColor(AllInColors.pink100)
+                        Image("PinkBadge").resizable().frame(width:10, height: 14)
+
+                    }
+                }
+            }
+                    
+        }
+    }
+}
+
+
diff --git a/Sources/AllInApp/AllIn/Components/DropDownAnswerMenu.swift b/Sources/AllInApp/AllIn/Components/DropDownAnswerMenu.swift
new file mode 100644
index 0000000..b3c3c99
--- /dev/null
+++ b/Sources/AllInApp/AllIn/Components/DropDownAnswerMenu.swift
@@ -0,0 +1,81 @@
+//
+//  DropDownAnswerMenu.swift
+//  AllIn
+//
+//  Created by Lucas Delanier on 16/01/2024.
+//
+
+import SwiftUI
+
+//
+//  DropDownMenu.swift
+//  AllIn
+//
+//  Created by Emre on 19/10/2023.
+//
+
+import SwiftUI
+
+struct DropDownAnswerMenu: View {
+    
+    @State var expand = false
+    @Binding var selectedOption: Int
+    var options: [(Int, String, Float)]
+    
+    var body: some View {
+        VStack(spacing: 0, content: {
+            Button(action: { self.expand.toggle() }) {
+                HStack{
+                    Text(options[selectedOption].1.description)
+                        .textStyle(weight: .bold, color: AllInColors.blueAccentColor, size: 20)
+                    Text(options[selectedOption].2.description)
+                        .textStyle(weight: .bold, color: AllInColors.lightPurpleColor, size: 10)
+                    
+                    Spacer()
+                    Image(expand ? "chevronUpIcon" : "chevronDownIcon").resizable().frame(width: 15, height: 10).scaledToFill()
+                }
+                .padding([.leading, .trailing], 15)
+                .frame(height: 43)
+            }
+            if expand {
+                Rectangle()
+                    .frame(height: 1)
+                    .foregroundColor(AllInColors.delimiterGrey)
+                    .padding(.bottom, 18)
+                VStack(spacing: 0) {
+                    ForEach(0..<options.count, id: \.self) { index in
+                        if options[index].0 != selectedOption {
+                            Button(action: {self.selectedOption = options[index].0
+                                self.expand.toggle()}) {
+                                    HStack{
+                                        Text(options[index].1.description)
+                                            .textStyle(weight: .bold, color: AllInColors.blueAccentColor, size: 20)
+                                        Text(options[index].2.description)
+                                            .textStyle(weight: .bold, color: AllInColors.lightPurpleColor, size: 10)
+                                        Spacer()
+                                    }
+                                }
+                                .padding(.bottom, 15)
+                        }
+                    }
+                }
+                .padding([.leading, .trailing], 15)
+            }
+        })
+        .frame(width: .infinity)
+        .background(AllInColors.componentBackgroundColor)
+        .cornerRadius(10)
+    }
+}
+
+struct DropDownAnswerMenu_Previews: PreviewProvider {
+    static var previews: some View {
+        DropDownAnswerMenu(selectedOption: .constant(0), options: [
+            (0, "questionMarkIcon", 1.2),
+            (1, "footballIcon", 2.2),
+            (2, "paintbrushIcon", 3.3)
+        ])
+        .preferredColorScheme(.dark)
+    }
+}
+
diff --git a/Sources/AllInApp/AllIn/Components/ParticipateButton.swift b/Sources/AllInApp/AllIn/Components/ParticipateButton.swift
index 02c40c6..72a020b 100644
--- a/Sources/AllInApp/AllIn/Components/ParticipateButton.swift
+++ b/Sources/AllInApp/AllIn/Components/ParticipateButton.swift
@@ -8,9 +8,10 @@
 import SwiftUI
 
 struct ParticipateButton: View {
+    @Binding var isOpen : Bool
     var body: some View {
         Button {
-            
+            isOpen.toggle()
         } label: {
             Text("Participer")
                 .font(.system(size: 30))
@@ -35,7 +36,3 @@ struct ParticipateButton: View {
         
     }
 }
-
-#Preview {
-    ParticipateButton()
-}
diff --git a/Sources/AllInApp/AllIn/Components/ParticipationModal.swift b/Sources/AllInApp/AllIn/Components/ParticipationModal.swift
new file mode 100644
index 0000000..3ce675f
--- /dev/null
+++ b/Sources/AllInApp/AllIn/Components/ParticipationModal.swift
@@ -0,0 +1,77 @@
+//
+//  ParticipationModal.swift
+//  AllIn
+//
+//  Created by Lucas Delanier on 16/01/2024.
+//
+
+import SwiftUI
+
+struct ParticipationModal: View {
+    @State private var selectedOption = 0
+    @State private var mise: String = ""
+    let options: [(Int, String, Float)] = [
+        (0, "OUI", 1.2),
+        (1, "NON", 3.3),
+    ]
+    var body: some View {
+        VStack(alignment: .leading){
+            HStack{
+                Spacer()
+                Rectangle().foregroundStyle(AllInColors.grey800Color).frame(maxWidth: 80, maxHeight: 5).cornerRadius(999)
+                Spacer()
+
+            }.padding(10)
+            HStack{
+                Text("Faites vos paris").font(.system(size: 18)).foregroundColor(AllInColors.blackTitleColor).fontWeight(.semibold)
+                Spacer()
+                AllcoinsCounter(backgroundColor: AllInColors.purpleAccentColor, foreGroundColor: AllInColors.whiteColor)
+            }
+            .padding(.leading, 15)
+            VStack(alignment: .leading){
+                Text("Emre va réussir son TP de CI/CD mercredi?").font(.system(size: 13)).foregroundColor(AllInColors.grey100Color).fontWeight(.light)
+                DropDownAnswerMenu(selectedOption: $selectedOption, options: options)
+                TextField("",text: $mise, prompt: Text("Mise")
+                    .foregroundColor(AllInColors.lightGrey300Color)
+                    .font(.system(size: 14))
+                    .fontWeight(.bold))
+                .padding()
+                .keyboardType(.numberPad)
+                .background(
+                    RoundedRectangle(cornerRadius: 9)
+                        .fill(AllInColors.lightGrey200Color)
+                        .frame(height: 40)
+                )
+                .frame(width: .infinity, height: 40)
+                .foregroundColor(AllInColors.primaryTextColor)
+                .overlay(
+                    RoundedRectangle(cornerRadius: 10, style: .continuous)
+                        .stroke(AllInColors.delimiterGrey, lineWidth: 1)
+                )
+                .padding(.bottom, 5)
+
+            }
+            .padding(15)
+            Spacer()
+            VStack{
+                HStack{
+                    Text("Gains possibles").font(.system(size: 13)).foregroundColor(AllInColors.blackTitleColor).fontWeight(.regular)
+                    Spacer()
+                    Text("231").font(.system(size: 13)).foregroundColor(AllInColors.blackTitleColor).fontWeight(.light)
+                }.padding(.top, 10).padding(.bottom, 0)
+                Button {
+                    
+                } label: {
+                    Text("Miser").font(.system(size: 23)).foregroundColor(AllInColors.whiteColor).fontWeight(.bold)
+                        .frame(maxWidth: .infinity).padding(.vertical, 3)
+                }
+                .buttonStyle(.borderedProminent).tint(AllInColors.purpleAccentColor)
+
+            }.padding(.horizontal, 10).background(AllInColors.whiteColor).border(width: 1, edges: [.top], color: AllInColors.delimiterGrey)
+        }.background(AllInColors.underComponentBackgroundColor)
+    }
+}
+
+#Preview {
+    ParticipationModal()
+}
diff --git a/Sources/AllInApp/AllIn/Ressources/Colors.swift b/Sources/AllInApp/AllIn/Ressources/Colors.swift
index a8eba0a..ae60939 100644
--- a/Sources/AllInApp/AllIn/Ressources/Colors.swift
+++ b/Sources/AllInApp/AllIn/Ressources/Colors.swift
@@ -48,7 +48,11 @@ struct AllInColors {
     static let componentBackgroundColor = Color("ComponentBackgroundColor")
     static let underComponentBackgroundColor = Color("UnderComponentBackgroundColor")
     static let winBannerBackground = Color("WinBannerBackground")
-    
+    static let blackTitleColor = Color("BlackTitleColor")
+    static let bleue200 = Color("Bleue200")
+    static let purple200 = Color("Purple200")
+    static let pink200 = Color("Pink200")
+    static let pink100 = Color("Pink100")
     // Gradients
     static let primaryGradient = LinearGradient(
         gradient: Gradient(colors: [AllInColors.pinkAccentColor, AllInColors.blueAccentColor]),
@@ -61,4 +65,16 @@ struct AllInColors {
         endPoint: .top
     )
     
+    static let BlueBetGradiant = LinearGradient(
+        gradient: Gradient(colors: [AllInColors.bleue200, AllInColors.purple200]),
+        startPoint: .leading,
+        endPoint: .trailing
+    )
+    
+    static let PinkBetGradiant = LinearGradient(
+        gradient: Gradient(colors: [AllInColors.pink100, AllInColors.pink200]),
+        startPoint: .leading,
+        endPoint: .trailing
+    )
+    
 }
diff --git a/Sources/AllInApp/AllIn/Views/DetailsView.swift b/Sources/AllInApp/AllIn/Views/DetailsView.swift
index d739ba0..021a907 100644
--- a/Sources/AllInApp/AllIn/Views/DetailsView.swift
+++ b/Sources/AllInApp/AllIn/Views/DetailsView.swift
@@ -2,23 +2,25 @@ import SwiftUI
 
 struct DetailsView: View {
     @Binding var isModalPresented: Bool
+    @State var isModalParticipated: Bool = false
+    @State var progressValue: Float = 0.2
     var body: some View {
         GeometryReader { geometry in
             ZStack(alignment: .bottom) {
-                VStack(alignment: .trailing) {
+                VStack(alignment: .center) {
                     HStack{
+                        Text("Terminé!").font(.system(size: 25)).fontWeight(.bold).padding(.bottom, 10).foregroundStyle(AllInColors.blackTitleColor).opacity(0.7)
                         Spacer()
                         Image("CloseiconRounded")
                             .resizable()
-                            .padding(8)
-                            .frame(maxWidth: 40, maxHeight: 40)
+                            .frame(maxWidth: 25, maxHeight: 25)
                             .onTapGesture {
                                 isModalPresented = false
                             }
                     }
                     Spacer()
                 }
-                .frame(maxWidth: .infinity, maxHeight: .infinity)
+                .padding(.horizontal, 15)
                 .background(Color.green)
                 .transition(.slideInFromBottom(yOffset:0))
                 VStack(spacing: 0) {
@@ -47,27 +49,34 @@ struct DetailsView: View {
                     }
                     .frame(width: .infinity)
                     .padding(.all,15).padding(.vertical, 10)
-                    .background(AllInColors.componentBackgroundColor).cornerRadius(20, corners: [.topLeft,.topRight]).padding(.bottom,0)
+                    .background(AllInColors.whiteColor).cornerRadius(20, corners: [.topLeft,.topRight]).padding(.bottom,0)
                     ResultBanner()
-                    VStack(alignment: .leading,spacing: 2){
-                        
+                    VStack(alignment: .leading,spacing: 15){
+                        BetLineLoading(value: $progressValue).padding(.vertical, 15)
+                        Spacer()
                         
                         
                     }
                     .frame(maxWidth: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/, maxHeight : .infinity)
-                    .padding([.bottom,.trailing,.leading],8)
+                    .padding([.bottom,.trailing,.leading],15)
                     .background(AllInColors.underComponentBackgroundColor)
                     .border(width: 1, edges: [.top], color: AllInColors.delimiterGrey)
                     Spacer()
+                
                     
                     
                 }
                 .frame(maxWidth: .infinity, maxHeight: geometry.size.height*0.98)
                 .background(Color.white)
                 .cornerRadius(15)
-                ParticipateButton().padding(10)
+                
+                ParticipateButton(isOpen: $isModalParticipated).padding(10)
+            
+                
+            }
+            .sheet(isPresented: $isModalParticipated) {
+                ParticipationModal().presentationDetents([.fraction(0.55)])
             }
-            .transition(.slideInFromBottom(yOffset: 800))
             .edgesIgnoringSafeArea(.bottom)
         }
     }
diff --git a/Sources/AllInApp/AllInApp.xcodeproj/project.pbxproj b/Sources/AllInApp/AllInApp.xcodeproj/project.pbxproj
index a86ec07..8a5d873 100644
--- a/Sources/AllInApp/AllInApp.xcodeproj/project.pbxproj
+++ b/Sources/AllInApp/AllInApp.xcodeproj/project.pbxproj
@@ -7,11 +7,14 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		120919182B56D0AE00D0FA29 /* ParticipationModal.swift in Sources */ = {isa = PBXBuildFile; fileRef = 120919172B56D0AE00D0FA29 /* ParticipationModal.swift */; };
+		1209191A2B56DC6C00D0FA29 /* DropDownAnswerMenu.swift in Sources */ = {isa = PBXBuildFile; fileRef = 120919192B56DC6C00D0FA29 /* DropDownAnswerMenu.swift */; };
 		123590B42B51792000F7AEBD /* DetailsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 123590B32B51792000F7AEBD /* DetailsView.swift */; };
 		123590B62B5537E200F7AEBD /* ResultBanner.swift in Sources */ = {isa = PBXBuildFile; fileRef = 123590B52B5537E200F7AEBD /* ResultBanner.swift */; };
 		123590B82B5541BA00F7AEBD /* ParticipateButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 123590B72B5541BA00F7AEBD /* ParticipateButton.swift */; };
 		1244EF602B4EC31E00374ABF /* HistoricBetView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1244EF5F2B4EC31E00374ABF /* HistoricBetView.swift */; };
 		1244EF622B4EC67000374ABF /* ReviewCard.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1244EF612B4EC67000374ABF /* ReviewCard.swift */; };
+		12C370482B5A5EE500CD9F0F /* BetLineLoading.swift in Sources */ = {isa = PBXBuildFile; fileRef = 12C370472B5A5EE500CD9F0F /* BetLineLoading.swift */; };
 		EC0193782B25BF16005D81E6 /* AllcoinsCapsule.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC0193772B25BF16005D81E6 /* AllcoinsCapsule.swift */; };
 		EC01937A2B25C12B005D81E6 /* BetCard.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC0193792B25C12B005D81E6 /* BetCard.swift */; };
 		EC01937C2B25C2A8005D81E6 /* AllcoinsCounter.swift in Sources */ = {isa = PBXBuildFile; fileRef = EC01937B2B25C2A8005D81E6 /* AllcoinsCounter.swift */; };
@@ -99,6 +102,8 @@
 /* End PBXCopyFilesBuildPhase section */
 
 /* Begin PBXFileReference section */
+		120919172B56D0AE00D0FA29 /* ParticipationModal.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ParticipationModal.swift; sourceTree = "<group>"; };
+		120919192B56DC6C00D0FA29 /* DropDownAnswerMenu.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DropDownAnswerMenu.swift; sourceTree = "<group>"; };
 		122278B72B4BDE1100E632AA /* DependencyInjection.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; path = DependencyInjection.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 		122278B92B4BDE9500E632AA /* Package.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = Package.swift; path = ../Model/Package.swift; sourceTree = "<group>"; };
 		122278BB2B4BDEC300E632AA /* Sources */ = {isa = PBXFileReference; lastKnownFileType = folder; name = Sources; path = ../StubLib/Sources; sourceTree = "<group>"; };
@@ -107,6 +112,7 @@
 		123590B72B5541BA00F7AEBD /* ParticipateButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ParticipateButton.swift; sourceTree = "<group>"; };
 		1244EF5F2B4EC31E00374ABF /* HistoricBetView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HistoricBetView.swift; sourceTree = "<group>"; };
 		1244EF612B4EC67000374ABF /* ReviewCard.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ReviewCard.swift; sourceTree = "<group>"; };
+		12C370472B5A5EE500CD9F0F /* BetLineLoading.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BetLineLoading.swift; sourceTree = "<group>"; };
 		EC0193772B25BF16005D81E6 /* AllcoinsCapsule.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AllcoinsCapsule.swift; sourceTree = "<group>"; };
 		EC0193792B25C12B005D81E6 /* BetCard.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BetCard.swift; sourceTree = "<group>"; };
 		EC01937B2B25C2A8005D81E6 /* AllcoinsCounter.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AllcoinsCounter.swift; sourceTree = "<group>"; };
@@ -325,6 +331,9 @@
 				1244EF612B4EC67000374ABF /* ReviewCard.swift */,
 				123590B52B5537E200F7AEBD /* ResultBanner.swift */,
 				123590B72B5541BA00F7AEBD /* ParticipateButton.swift */,
+				120919172B56D0AE00D0FA29 /* ParticipationModal.swift */,
+				120919192B56DC6C00D0FA29 /* DropDownAnswerMenu.swift */,
+				12C370472B5A5EE500CD9F0F /* BetLineLoading.swift */,
 			);
 			path = Components;
 			sourceTree = "<group>";
@@ -501,6 +510,7 @@
 				EC6B969E2B24B4CC00FC1C58 /* ContentView.swift in Sources */,
 				EC89F7BD2B250D66003821CE /* LoginView.swift in Sources */,
 				EC650A442B25CDF3003AFCAD /* ParameterMenu.swift in Sources */,
+				120919182B56D0AE00D0FA29 /* ParticipationModal.swift in Sources */,
 				ECB26A132B406A9400FE06B3 /* BetViewModel.swift in Sources */,
 				EC30770F2B24FCB00060E34D /* RegisterView.swift in Sources */,
 				EC650A522B2794DD003AFCAD /* BetView.swift in Sources */,
@@ -537,9 +547,11 @@
 				EC6B96D12B24BAE800FC1C58 /* AuthService.swift in Sources */,
 				123590B62B5537E200F7AEBD /* ResultBanner.swift in Sources */,
 				EC01937C2B25C2A8005D81E6 /* AllcoinsCounter.swift in Sources */,
+				12C370482B5A5EE500CD9F0F /* BetLineLoading.swift in Sources */,
 				EC650A542B279545003AFCAD /* ChoiceCapsule.swift in Sources */,
 				ECB7BC6C2B2F43EE002A6654 /* AppState.swift in Sources */,
 				ECA9D1C92B2D9ADA0076E0EC /* UserInfo.swift in Sources */,
+				1209191A2B56DC6C00D0FA29 /* DropDownAnswerMenu.swift in Sources */,
 				EC650A582B279D9D003AFCAD /* RecapBetCard.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;