diff --git a/src/.idea/gradle.xml b/src/.idea/gradle.xml
index 0b0534c6c584f8266466555130d8a68a8540c88b..03b83c4d585e92155419803f8440de5a587d7006 100644
--- a/src/.idea/gradle.xml
+++ b/src/.idea/gradle.xml
@@ -4,8 +4,10 @@
   <component name="GradleSettings">
     <option name="linkedExternalProjectsSettings">
       <GradleProjectSettings>
+        <option name="testRunner" value="GRADLE" />
+        <option name="distributionType" value="DEFAULT_WRAPPED" />
         <option name="externalProjectPath" value="$PROJECT_DIR$" />
-        <option name="gradleJvm" value="#GRADLE_LOCAL_JAVA_HOME" />
+        <option name="gradleJvm" value="jbr-17" />
         <option name="modules">
           <set>
             <option value="$PROJECT_DIR$" />
diff --git a/src/app/src/main/java/com/example/moviestudio/BottomNavItem.kt b/src/app/src/main/java/com/example/moviestudio/Components/BottomNavItem.kt
similarity index 83%
rename from src/app/src/main/java/com/example/moviestudio/BottomNavItem.kt
rename to src/app/src/main/java/com/example/moviestudio/Components/BottomNavItem.kt
index 591f4a991f651650e7b142d8b62d1cf0df5d6d7c..50fd207c23c5cb2d606c7e40c05c1396c01c891b 100644
--- a/src/app/src/main/java/com/example/moviestudio/BottomNavItem.kt
+++ b/src/app/src/main/java/com/example/moviestudio/Components/BottomNavItem.kt
@@ -1,4 +1,6 @@
-package com.example.moviestudio
+package com.example.moviestudio.Components
+
+import com.example.moviestudio.R
 
 sealed class BottomNavItem(
     var title: String,
diff --git a/src/app/src/main/java/com/example/moviestudio/BottomNavigation.kt b/src/app/src/main/java/com/example/moviestudio/Components/BottomNavigation.kt
similarity index 88%
rename from src/app/src/main/java/com/example/moviestudio/BottomNavigation.kt
rename to src/app/src/main/java/com/example/moviestudio/Components/BottomNavigation.kt
index f92fe6664a3b2548e4cd924b7dc5379386821998..e110fc8808d8e935cfaece4451723a559231f038 100644
--- a/src/app/src/main/java/com/example/moviestudio/BottomNavigation.kt
+++ b/src/app/src/main/java/com/example/moviestudio/Components/BottomNavigation.kt
@@ -1,7 +1,6 @@
-package com.example.moviestudio
+package com.example.moviestudio.Components
 
 import android.util.Log
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material3.Icon
 import androidx.compose.material3.NavigationBar
@@ -9,11 +8,9 @@ import androidx.compose.material3.NavigationBarItem
 import androidx.compose.material3.NavigationBarItemDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.navigation.NavController
-import androidx.navigation.NavHostController
 import com.example.moviestudio.ui.theme.dark
 import com.example.moviestudio.ui.theme.main
 
diff --git a/src/app/src/main/java/com/example/moviestudio/Components/Components.kt b/src/app/src/main/java/com/example/moviestudio/Components/Components.kt
new file mode 100644
index 0000000000000000000000000000000000000000..6c9d0e47866b78ba912a3b276fea7ada26b044e7
--- /dev/null
+++ b/src/app/src/main/java/com/example/moviestudio/Components/Components.kt
@@ -0,0 +1,129 @@
+package com.example.moviestudio.Components
+
+import android.annotation.SuppressLint
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.dp
+import com.example.moviestudio.R
+
+@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SearchBarAndFilters(
+    searchQuery: String,
+    onSearchQueryChange: (String) -> Unit,
+    onDateSelected: (String) -> Unit,
+    onActorSelected: (String) -> Unit,
+    onGenreSelected: (String) -> Unit
+) {
+    LazyRow(
+        modifier = Modifier
+            .fillMaxWidth()
+    ) {
+        item {
+            SearchBar(searchQuery, onSearchQueryChange = onSearchQueryChange)
+        }
+        item {
+            SearchDateReleased { selectedDate ->
+                onDateSelected(selectedDate)
+            }
+        }
+        item {
+            SearchActor { selectedActor ->
+                onActorSelected(selectedActor)
+            }
+        }
+        item {
+            SearchGenre { selectedGenre ->
+                onGenreSelected(selectedGenre)
+            }
+        }
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SearchBar(searchQuery: String, onSearchQueryChange: (String) -> Unit) {
+    val search = stringResource(id = R.string.app_search)
+    OutlinedTextField(
+        value = searchQuery,
+        onValueChange = { onSearchQueryChange(it) },
+        label = { Text(search) },
+        modifier = Modifier
+            .padding(top = 55.dp)
+            .padding(8.dp),
+        textStyle = TextStyle(color = Color.White)
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SearchDateReleased(onDateReleasedSelected: (String) -> Unit) {
+    var selectedDate by remember { mutableStateOf("") }
+
+    OutlinedTextField(
+        value = selectedDate,
+        onValueChange = { newSelectedDate ->
+            selectedDate = newSelectedDate
+            onDateReleasedSelected(newSelectedDate)
+        },
+        label = { Text("Date de sortie") },
+        modifier = Modifier
+            .padding(8.dp)
+            .padding(top = 55.dp),
+        textStyle = TextStyle(color = Color.White)
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SearchActor(onActorSelected: (String) -> Unit) {
+    var actorName by remember { mutableStateOf("") }
+
+    OutlinedTextField(
+        value = actorName,
+        onValueChange = { newActorName ->
+            actorName = newActorName
+            onActorSelected(newActorName)
+        },
+        label = { Text("Acteur") },
+        modifier = Modifier
+            .padding(8.dp)
+            .padding(top = 55.dp),
+        textStyle = TextStyle(color = Color.White)
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SearchGenre(onGenreSelected: (String) -> Unit) {
+    var genre by remember { mutableStateOf("") }
+
+    OutlinedTextField(
+        value = genre,
+        onValueChange = { newGenre ->
+            genre = newGenre
+            onGenreSelected(newGenre)
+        },
+        label = { Text("Genre") },
+        modifier = Modifier
+            .padding(8.dp)
+            .padding(top = 55.dp),
+        textStyle = TextStyle(color = Color.White)
+    )
+}
+
+
diff --git a/src/app/src/main/java/com/example/moviestudio/Components/LibraryComponent.kt b/src/app/src/main/java/com/example/moviestudio/Components/LibraryComponent.kt
new file mode 100644
index 0000000000000000000000000000000000000000..099e9b2d75cd90b1fb187c1deba3552b270cb43a
--- /dev/null
+++ b/src/app/src/main/java/com/example/moviestudio/Components/LibraryComponent.kt
@@ -0,0 +1,115 @@
+package com.example.moviestudio.Components
+
+import android.annotation.SuppressLint
+import android.util.Log
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavController
+import com.example.moviestudio.R
+import com.example.moviestudio.ui.theme.dark
+import com.example.moviestudio.ui.theme.main
+
+@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun Library(navController: NavController) {
+    var isPopupVisible by remember { mutableStateOf(false) }
+    val appName = stringResource(id = R.string.app_name)
+    val pageName = stringResource(id = R.string.app_library)
+
+    var searchQuery by remember { mutableStateOf("") }
+
+    var movieTitle by remember { mutableStateOf("Inception") }
+    var movieDescription by remember { mutableStateOf("Dom Cobb est un voleur expérimenté dans l'art périlleux de `l'extraction' : sa spécialité consiste à s'approprier les secrets les plus précieux d'un individu, enfouis au plus profond de son subconscient, pendant qu'il rêve et que son esprit est particulièrement vulnérable. Très recherché pour ses talents dans l'univers trouble de l'espionnage industriel, Cobb est aussi devenu un fugitif traqué dans le monde entier. Cependant, une ultime mission pourrait lui permettre de retrouver sa vie d'avant.") }
+    var moviePoster = painterResource(id = R.drawable.ic_launcher_background)
+
+
+
+    Scaffold(
+        modifier = Modifier,
+        topBar = {
+            if (!isPopupVisible) {
+                TopAppBar(colors = TopAppBarDefaults.smallTopAppBarColors(
+                    containerColor = main,
+                    titleContentColor = Color.White,
+                ), title = {
+                    Column {
+                        Text(text = appName, fontSize = 24.sp)
+                        Text(text = pageName, fontSize = 16.sp)
+                    }
+                }
+                )
+            }
+        },
+        content = {
+            // Content with a Column containing search components and LazyColumn
+            Column(
+                modifier = Modifier
+                    .background(dark)
+                    .fillMaxSize()
+                    .padding(4.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                if (!isPopupVisible) {
+                    SearchBarAndFilters(
+                        searchQuery = searchQuery,
+                        onSearchQueryChange = { searchQuery = it },
+                        onDateSelected = { selectedDate -> println("Selected Date: $selectedDate") },
+                        onActorSelected = { selectedActor -> println("Selected Actor: $selectedActor") },
+                        onGenreSelected = { selectedGenre -> println("Selected Genre: $selectedGenre") }
+                    )
+                }
+
+                // LazyColumn
+                LazyColumn(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .weight(1f)
+                ) {
+                    items((0..5).toList()) { _ ->
+                        MovieCardLibrary(
+                            poster = moviePoster,
+                            name = movieTitle,
+                            description = movieDescription,
+                            onKnowMoreClick = { isPopupVisible = true },
+                            onDeleteClick = { Log.i("LIBRARY", "Delete movie from list") }
+                        )
+                    }
+                }
+
+
+                ShowMovie(
+                    isPopupVisible = isPopupVisible,
+                    onCloseClick = { isPopupVisible = false })
+                Spacer(modifier = Modifier.height(55.dp))
+            }
+        },
+        bottomBar = {
+            BottomNavigation(navController = navController)
+        }
+    )
+}
\ No newline at end of file
diff --git a/src/app/src/main/java/com/example/moviestudio/Models.kt b/src/app/src/main/java/com/example/moviestudio/Components/Models.kt
similarity index 95%
rename from src/app/src/main/java/com/example/moviestudio/Models.kt
rename to src/app/src/main/java/com/example/moviestudio/Components/Models.kt
index ad549bd44b4e823b1591e8fb5faf265206b442ae..b3315ee3052261dd3994cf4bc8aaf6a50dfdcbca 100644
--- a/src/app/src/main/java/com/example/moviestudio/Models.kt
+++ b/src/app/src/main/java/com/example/moviestudio/Components/Models.kt
@@ -1,4 +1,4 @@
-package com.example.moviestudio
+package com.example.moviestudio.Components
 
 import androidx.room.ColumnInfo
 import androidx.room.Embedded
diff --git a/src/app/src/main/java/com/example/moviestudio/Components/MovieCardComponent.kt b/src/app/src/main/java/com/example/moviestudio/Components/MovieCardComponent.kt
new file mode 100644
index 0000000000000000000000000000000000000000..c65a31d6e785d748f96adcaa441a038b107455a3
--- /dev/null
+++ b/src/app/src/main/java/com/example/moviestudio/Components/MovieCardComponent.kt
@@ -0,0 +1,242 @@
+package com.example.moviestudio.Components
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Divider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.moviestudio.R
+import com.example.moviestudio.ui.theme.second
+
+@Composable
+fun MovieCard(
+    poster: Painter,
+    name: String,
+    description: String,
+    onKnowMoreClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    actionButton: (@Composable () -> Unit)? = null
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp)
+            .then(modifier)
+    ) {
+        Row() {
+            // Movie poster on the left
+            Image(
+                painter = poster,
+                contentDescription = "Movie Poster",
+                modifier = Modifier
+                    .height(220.dp)
+                    .width(120.dp)
+                    .clip(MaterialTheme.shapes.medium),
+                contentScale = ContentScale.Crop
+            )
+
+            // Movie details on the right
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(start = 16.dp)
+            ) {
+                Text(
+                    text = name,
+                    fontSize = 20.sp,
+                    fontWeight = FontWeight.Bold,
+                    color = Color.White
+                )
+                Text(
+                    text = description.take(120) + "...",
+                    fontSize = 16.sp,
+                    color = Color.White,
+                    textAlign = TextAlign.Left
+                )
+
+                // Buttons
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = 8.dp),
+                    horizontalArrangement = Arrangement.SpaceBetween
+                ) {
+                    Column(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(top = 10.dp)
+                    ) {
+                        Button(
+                            onClick = onKnowMoreClick,
+                            modifier = Modifier.fillMaxWidth(),
+                            colors = ButtonDefaults.buttonColors(containerColor = second)
+                        ) {
+                            Text(text = stringResource(id = R.string.app_moreInformations))
+                        }
+                        actionButton?.invoke()
+                    }
+                }
+            }
+        }
+    }
+    Spacer(modifier = Modifier.height(2.dp))
+    Divider(
+        color = Color.LightGray,
+        thickness = 0.01.dp,
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(LocalDensity.current.density.dp)
+    )
+}
+
+@Composable
+fun MovieCardLibrary(
+    poster: Painter,
+    name: String,
+    description: String,
+    onKnowMoreClick: () -> Unit,
+    onDeleteClick: () -> Unit
+) {
+    Box(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(16.dp)
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+        ) {
+            // Movie poster on the left
+            Image(
+                painter = poster,
+                contentDescription = "Movie Poster",
+                modifier = Modifier
+                    .height(220.dp)
+                    .width(120.dp)
+                    .clip(MaterialTheme.shapes.medium),
+                contentScale = ContentScale.Crop
+            )
+
+            // Movie details in the middle
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(start = 16.dp)
+            ) {
+                Text(
+                    text = name,
+                    fontSize = 20.sp,
+                    fontWeight = FontWeight.Bold,
+                    color = Color.White
+                )
+                Text(
+                    text = description.take(120) + "...",
+                    fontSize = 16.sp,
+                    color = Color.White,
+                    textAlign = TextAlign.Left,
+                    modifier = Modifier.padding(top = 6.dp)
+                )
+
+                // Buttons
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(top = 8.dp),
+                    horizontalArrangement = Arrangement.SpaceBetween
+                ) {
+                    Column(
+                        modifier = Modifier.fillMaxWidth()
+                    ) {
+                        Button(
+                            onClick = onKnowMoreClick,
+                            modifier = Modifier.fillMaxWidth(),
+                            colors = ButtonDefaults.buttonColors(containerColor = second)
+                        ) {
+                            Text(text = "Plus d'informations")
+                        }
+                    }
+                }
+            }
+        }
+
+        // Trash icon in the top-right corner
+        Icon(
+            painter = painterResource(id = R.drawable.baseline_delete_24),
+            contentDescription = "Delete",
+            modifier = Modifier
+                .padding(8.dp)
+                .size(24.dp)
+                .clickable { onDeleteClick() }
+                .align(Alignment.TopEnd),
+            tint = Color.White
+        )
+    }
+
+    Spacer(modifier = Modifier.height(2.dp))
+    Divider(
+        color = Color.LightGray,
+        thickness = 0.01.dp,
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(LocalDensity.current.density.dp)
+    )
+}
+
+@Composable
+fun MovieCardSearch(
+    poster: Painter,
+    name: String,
+    description: String,
+    onKnowMoreClick: () -> Unit,
+    onAddToLibraryClick: () -> Unit
+) {
+    MovieCard(
+        poster = poster,
+        name = name,
+        description = description,
+        onKnowMoreClick = onKnowMoreClick,
+        actionButton = {
+            Button(
+                onClick = onAddToLibraryClick,
+                modifier = Modifier.fillMaxWidth(),
+                colors = ButtonDefaults.buttonColors(containerColor = second)
+            ) {
+                Text(text = stringResource(id = R.string.app_library))
+                Icon(
+                    imageVector = Icons.Default.Add,
+                    contentDescription = null,
+                    tint = Color.White
+                )
+            }
+        }
+    )
+}
\ No newline at end of file
diff --git a/src/app/src/main/java/com/example/moviestudio/Components.kt b/src/app/src/main/java/com/example/moviestudio/Components/PopupComponent.kt
similarity index 53%
rename from src/app/src/main/java/com/example/moviestudio/Components.kt
rename to src/app/src/main/java/com/example/moviestudio/Components/PopupComponent.kt
index f403b6beb4f01853d5750d2fc6914fc555269182..0ea18da1b680d1a3cf91b14a506a66642e12803e 100644
--- a/src/app/src/main/java/com/example/moviestudio/Components.kt
+++ b/src/app/src/main/java/com/example/moviestudio/Components/PopupComponent.kt
@@ -1,7 +1,6 @@
-package com.example.moviestudio
+package com.example.moviestudio.Components
 
 import android.annotation.SuppressLint
-import android.util.Log
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
@@ -16,19 +15,15 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.Divider
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -49,418 +44,20 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.RectangleShape
-import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import androidx.core.text.isDigitsOnly
-import androidx.navigation.NavController
+import com.example.moviestudio.R
 import com.example.moviestudio.ui.theme.dark
 import com.example.moviestudio.ui.theme.main
 import com.example.moviestudio.ui.theme.second
 import com.example.moviestudio.ui.theme.third
 
-@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun SearchBarAndFilters(
-    searchQuery: String,
-    onSearchQueryChange: (String) -> Unit,
-    onDateSelected: (String) -> Unit,
-    onActorSelected: (String) -> Unit,
-    onGenreSelected: (String) -> Unit
-) {
-    LazyRow(
-        modifier = Modifier
-            .fillMaxWidth()
-    ) {
-        item {
-            SearchBar(searchQuery, onSearchQueryChange = onSearchQueryChange)
-        }
-        item {
-            SearchDateReleased { selectedDate ->
-                onDateSelected(selectedDate)
-            }
-        }
-        item {
-            SearchActor { selectedActor ->
-                onActorSelected(selectedActor)
-            }
-        }
-        item {
-            SearchGenre { selectedGenre ->
-                onGenreSelected(selectedGenre)
-            }
-        }
-    }
-}
-
-@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun Library(navController: NavController) {
-    var isPopupVisible by remember { mutableStateOf(false) }
-    val appName = stringResource(id = R.string.app_name)
-    val pageName = stringResource(id = R.string.app_library)
-
-    var searchQuery by remember { mutableStateOf("") }
-
-    var movieTitle by remember { mutableStateOf("Inception") }
-    var movieDescription by remember { mutableStateOf("Dom Cobb est un voleur expérimenté dans l'art périlleux de `l'extraction' : sa spécialité consiste à s'approprier les secrets les plus précieux d'un individu, enfouis au plus profond de son subconscient, pendant qu'il rêve et que son esprit est particulièrement vulnérable. Très recherché pour ses talents dans l'univers trouble de l'espionnage industriel, Cobb est aussi devenu un fugitif traqué dans le monde entier. Cependant, une ultime mission pourrait lui permettre de retrouver sa vie d'avant.") }
-    var moviePoster = painterResource(id = R.drawable.ic_launcher_background)
-
-
-
-    Scaffold(
-        modifier = Modifier,
-        topBar = {
-            if (!isPopupVisible) {
-                TopAppBar(colors = TopAppBarDefaults.smallTopAppBarColors(
-                    containerColor = main,
-                    titleContentColor = Color.White,
-                ), title = {
-                    Column {
-                        Text(text = appName, fontSize = 24.sp)
-                        Text(text = pageName, fontSize = 16.sp)
-                    }
-                }
-                )
-            }
-        },
-        content = {
-            // Content with a Column containing search components and LazyColumn
-            Column(
-                modifier = Modifier
-                    .background(dark)
-                    .fillMaxSize()
-                    .padding(4.dp),
-                horizontalAlignment = Alignment.CenterHorizontally
-            ) {
-                if (!isPopupVisible) {
-                    SearchBarAndFilters(
-                        searchQuery = searchQuery,
-                        onSearchQueryChange = { searchQuery = it },
-                        onDateSelected = { selectedDate -> println("Selected Date: $selectedDate") },
-                        onActorSelected = { selectedActor -> println("Selected Actor: $selectedActor") },
-                        onGenreSelected = { selectedGenre -> println("Selected Genre: $selectedGenre") }
-                    )
-                }
-
-                // LazyColumn
-                LazyColumn(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .weight(1f)
-                ) {
-                    items((0..5).toList()) { _ ->
-                        MovieCardLibrary(
-                            poster = moviePoster,
-                            name = movieTitle,
-                            description = movieDescription,
-                            onKnowMoreClick = { isPopupVisible = true },
-                            onDeleteClick = { Log.i("LIBRARY", "Delete movie from list") }
-                        )
-                    }
-                }
-
-
-                ShowMovie(
-                    isPopupVisible = isPopupVisible,
-                    onCloseClick = { isPopupVisible = false })
-                Spacer(modifier = Modifier.height(55.dp))
-            }
-        },
-        bottomBar = {
-            BottomNavigation(navController = navController)
-        }
-    )
-}
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun SearchBar(searchQuery: String, onSearchQueryChange: (String) -> Unit) {
-    val search = stringResource(id = R.string.app_search)
-    OutlinedTextField(
-        value = searchQuery,
-        onValueChange = { onSearchQueryChange(it) },
-        label = { Text(search) },
-        modifier = Modifier
-            .padding(top = 55.dp)
-            .padding(8.dp),
-        textStyle = TextStyle(color = Color.White)
-    )
-}
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun SearchDateReleased(onDateReleasedSelected: (String) -> Unit) {
-    var selectedDate by remember { mutableStateOf("") }
-
-    OutlinedTextField(
-        value = selectedDate,
-        onValueChange = { newSelectedDate ->
-            selectedDate = newSelectedDate
-            onDateReleasedSelected(newSelectedDate)
-        },
-        label = { Text("Date de sortie") },
-        modifier = Modifier
-            .padding(8.dp)
-            .padding(top = 55.dp),
-        textStyle = TextStyle(color = Color.White)
-    )
-}
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun SearchActor(onActorSelected: (String) -> Unit) {
-    var actorName by remember { mutableStateOf("") }
-
-    OutlinedTextField(
-        value = actorName,
-        onValueChange = { newActorName ->
-            actorName = newActorName
-            onActorSelected(newActorName)
-        },
-        label = { Text("Acteur") },
-        modifier = Modifier
-            .padding(8.dp)
-            .padding(top = 55.dp),
-        textStyle = TextStyle(color = Color.White)
-    )
-}
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun SearchGenre(onGenreSelected: (String) -> Unit) {
-    var genre by remember { mutableStateOf("") }
-
-    OutlinedTextField(
-        value = genre,
-        onValueChange = { newGenre ->
-            genre = newGenre
-            onGenreSelected(newGenre)
-        },
-        label = { Text("Genre") },
-        modifier = Modifier
-            .padding(8.dp)
-            .padding(top = 55.dp),
-        textStyle = TextStyle(color = Color.White)
-    )
-}
-
-@Composable
-fun MovieCard(
-    poster: Painter,
-    name: String,
-    description: String,
-    onKnowMoreClick: () -> Unit,
-    modifier: Modifier = Modifier,
-    actionButton: (@Composable () -> Unit)? = null
-) {
-    Box(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(16.dp)
-            .then(modifier)
-    ) {
-        Row() {
-            // Movie poster on the left
-            Image(
-                painter = poster,
-                contentDescription = "Movie Poster",
-                modifier = Modifier
-                    .height(220.dp)
-                    .width(120.dp)
-                    .clip(MaterialTheme.shapes.medium),
-                contentScale = ContentScale.Crop
-            )
-
-            // Movie details on the right
-            Column(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(start = 16.dp)
-            ) {
-                Text(
-                    text = name,
-                    fontSize = 20.sp,
-                    fontWeight = FontWeight.Bold,
-                    color = Color.White
-                )
-                Text(
-                    text = description.take(120) + "...",
-                    fontSize = 16.sp,
-                    color = Color.White,
-                    textAlign = TextAlign.Left
-                )
-
-                // Buttons
-                Row(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(top = 8.dp),
-                    horizontalArrangement = Arrangement.SpaceBetween
-                ) {
-                    Column(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(top = 10.dp)
-                    ) {
-                        Button(
-                            onClick = onKnowMoreClick,
-                            modifier = Modifier.fillMaxWidth(),
-                            colors = ButtonDefaults.buttonColors(containerColor = second)
-                        ) {
-                            Text(text = stringResource(id = R.string.app_moreInformations))
-                        }
-                        actionButton?.invoke()
-                    }
-                }
-            }
-        }
-    }
-    Spacer(modifier = Modifier.height(2.dp))
-    Divider(
-        color = Color.LightGray,
-        thickness = 0.01.dp,
-        modifier = Modifier
-            .fillMaxWidth()
-            .height(LocalDensity.current.density.dp)
-    )
-}
-
-@Composable
-fun MovieCardLibrary(
-    poster: Painter,
-    name: String,
-    description: String,
-    onKnowMoreClick: () -> Unit,
-    onDeleteClick: () -> Unit
-) {
-    Box(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(16.dp)
-    ) {
-        Row(
-            modifier = Modifier
-                .fillMaxWidth()
-        ) {
-            // Movie poster on the left
-            Image(
-                painter = poster,
-                contentDescription = "Movie Poster",
-                modifier = Modifier
-                    .height(220.dp)
-                    .width(120.dp)
-                    .clip(MaterialTheme.shapes.medium),
-                contentScale = ContentScale.Crop
-            )
-
-            // Movie details in the middle
-            Column(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(start = 16.dp)
-            ) {
-                Text(
-                    text = name,
-                    fontSize = 20.sp,
-                    fontWeight = FontWeight.Bold,
-                    color = Color.White
-                )
-                Text(
-                    text = description.take(120) + "...",
-                    fontSize = 16.sp,
-                    color = Color.White,
-                    textAlign = TextAlign.Left,
-                    modifier = Modifier.padding(top = 6.dp)
-                )
-
-                // Buttons
-                Row(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(top = 8.dp),
-                    horizontalArrangement = Arrangement.SpaceBetween
-                ) {
-                    Column(
-                        modifier = Modifier.fillMaxWidth()
-                    ) {
-                        Button(
-                            onClick = onKnowMoreClick,
-                            modifier = Modifier.fillMaxWidth(),
-                            colors = ButtonDefaults.buttonColors(containerColor = second)
-                        ) {
-                            Text(text = "Plus d'informations")
-                        }
-                    }
-                }
-            }
-        }
-
-        // Trash icon in the top-right corner
-        Icon(
-            painter = painterResource(id = R.drawable.baseline_delete_24),
-            contentDescription = "Delete",
-            modifier = Modifier
-                .padding(8.dp)
-                .size(24.dp)
-                .clickable { onDeleteClick() }
-                .align(Alignment.TopEnd),
-            tint = Color.White
-        )
-    }
-
-    Spacer(modifier = Modifier.height(2.dp))
-    Divider(
-        color = Color.LightGray,
-        thickness = 0.01.dp,
-        modifier = Modifier
-            .fillMaxWidth()
-            .height(LocalDensity.current.density.dp)
-    )
-}
-
-@Composable
-fun MovieCardSearch(
-    poster: Painter,
-    name: String,
-    description: String,
-    onKnowMoreClick: () -> Unit,
-    onAddToLibraryClick: () -> Unit
-) {
-    MovieCard(
-        poster = poster,
-        name = name,
-        description = description,
-        onKnowMoreClick = onKnowMoreClick,
-        actionButton = {
-            Button(
-                onClick = onAddToLibraryClick,
-                modifier = Modifier.fillMaxWidth(),
-                colors = ButtonDefaults.buttonColors(containerColor = second)
-            ) {
-                Text(text = stringResource(id = R.string.app_library))
-                Icon(
-                    imageVector = Icons.Default.Add,
-                    contentDescription = null,
-                    tint = Color.White
-                )
-            }
-        }
-    )
-}
-
 @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -905,138 +502,4 @@ fun PreviewMovie(
             }
         )
     }
-}
-
-@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun SearchMovie(navController: NavController) {
-    var isPopupVisible by remember { mutableStateOf(false) }
-    val appName = stringResource(id = R.string.app_name)
-    val pageName = stringResource(id = R.string.app_addMovie)
-
-    var searchQuery by remember { mutableStateOf("") }
-
-    var movieTitle by remember { mutableStateOf("Inception") }
-    var movieDescription by remember { mutableStateOf("Dom Cobb est un voleur expérimenté dans l'art périlleux de `l'extraction' : sa spécialité consiste à s'approprier les secrets les plus précieux d'un individu, enfouis au plus profond de son subconscient, pendant qu'il rêve et que son esprit est particulièrement vulnérable. Très recherché pour ses talents dans l'univers trouble de l'espionnage industriel, Cobb est aussi devenu un fugitif traqué dans le monde entier. Cependant, une ultime mission pourrait lui permettre de retrouver sa vie d'avant.") }
-    var moviePoster = painterResource(id = R.drawable.ic_launcher_background)
-
-    Scaffold(modifier = Modifier,
-        topBar = {
-            if (!isPopupVisible) {
-                TopAppBar(colors = TopAppBarDefaults.smallTopAppBarColors(
-                    containerColor = main, // Adjust color as needed
-                    titleContentColor = Color.White,
-                ), title = {
-                    Column {
-                        Text(text = appName, fontSize = 24.sp)
-                        Text(text = pageName, fontSize = 16.sp)
-                    }
-                })
-            }
-        },
-        content = {
-            Column(
-                modifier = Modifier
-                    .background(dark)
-                    .fillMaxWidth()
-                    .padding(4.dp),
-                horizontalAlignment = Alignment.CenterHorizontally
-            ) {
-                if (!isPopupVisible) {
-                    SearchMovieBar(searchQuery, onSearchQueryChange = { searchQuery = it })
-                }
-                LazyColumn(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .weight(1f)
-                ) {
-                    items((0..3).toList()) { index ->
-                        MovieCardSearch(
-                            poster = moviePoster,
-                            name = movieTitle,
-                            description = movieDescription,
-                            onKnowMoreClick = { isPopupVisible = true },
-                            onAddToLibraryClick = { /* Handle add to library button click */ }
-                        )
-                    }
-                }
-                PreviewMovie(
-                    isPopupVisible = isPopupVisible,
-                    onCloseClick = { isPopupVisible = false })
-                Spacer(modifier = Modifier.height(55.dp))
-            }
-        },
-        bottomBar = {
-            BottomNavigation(navController = navController)
-        }
-    )
-}
-
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun SearchMovieBar(searchQuery: String, onSearchQueryChange: (String) -> Unit) {
-    val search = stringResource(id = R.string.app_search)
-    OutlinedTextField(
-        value = searchQuery,
-        onValueChange = { onSearchQueryChange(it) },
-        label = { Text(search) },
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(top = 55.dp)
-            .padding(8.dp),
-        textStyle = TextStyle(color = Color.White)
-    )
-}
-
-@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-fun Settings(navController: NavController) {
-
-    val appName = stringResource(id = R.string.app_name)
-    val pageName = stringResource(id = R.string.app_settings)
-    val btnText = stringResource(id = R.string.app_clearData)
-
-    Scaffold(
-        modifier = Modifier.background(Color.Black),
-        topBar = {
-            TopAppBar(
-                colors = TopAppBarDefaults.smallTopAppBarColors(
-                    containerColor = main,
-                    titleContentColor = Color.White,
-                ),
-                title = {
-                    Column {
-                        Text(text = appName, fontSize = 24.sp)
-                        Text(text = pageName, fontSize = 16.sp)
-                    }
-                }
-            )
-        },
-        content = {
-            // Content with a Column containing a Button
-            Column(
-                modifier = Modifier
-                    .background(color = dark)
-                    .fillMaxSize()
-                    .padding(start = 10.dp),
-                horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally,
-                verticalArrangement = Arrangement.Center
-            ) {
-                Button(
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .padding(6.dp),
-                    onClick = { /* Handle Clear Data click */ },
-                    colors = ButtonDefaults.buttonColors(containerColor = second)
-                ) {
-                    Text(text = btnText)
-                }
-            }
-        },
-        bottomBar = {
-            BottomNavigation(navController = navController)
-        }
-    )
-}
+}
\ No newline at end of file
diff --git a/src/app/src/main/java/com/example/moviestudio/Components/SearchMovieComponent.kt b/src/app/src/main/java/com/example/moviestudio/Components/SearchMovieComponent.kt
new file mode 100644
index 0000000000000000000000000000000000000000..c09a1cff3a2b856b89be6e93e6ea8eb12e1d1284
--- /dev/null
+++ b/src/app/src/main/java/com/example/moviestudio/Components/SearchMovieComponent.kt
@@ -0,0 +1,116 @@
+package com.example.moviestudio.Components
+
+import android.annotation.SuppressLint
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavController
+import com.example.moviestudio.R
+import com.example.moviestudio.ui.theme.dark
+import com.example.moviestudio.ui.theme.main
+
+@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SearchMovie(navController: NavController) {
+    var isPopupVisible by remember { mutableStateOf(false) }
+    val appName = stringResource(id = R.string.app_name)
+    val pageName = stringResource(id = R.string.app_addMovie)
+
+    var searchQuery by remember { mutableStateOf("") }
+
+    var movieTitle by remember { mutableStateOf("Inception") }
+    var movieDescription by remember { mutableStateOf("Dom Cobb est un voleur expérimenté dans l'art périlleux de `l'extraction' : sa spécialité consiste à s'approprier les secrets les plus précieux d'un individu, enfouis au plus profond de son subconscient, pendant qu'il rêve et que son esprit est particulièrement vulnérable. Très recherché pour ses talents dans l'univers trouble de l'espionnage industriel, Cobb est aussi devenu un fugitif traqué dans le monde entier. Cependant, une ultime mission pourrait lui permettre de retrouver sa vie d'avant.") }
+    var moviePoster = painterResource(id = R.drawable.ic_launcher_background)
+
+    Scaffold(modifier = Modifier,
+        topBar = {
+            if (!isPopupVisible) {
+                TopAppBar(colors = TopAppBarDefaults.smallTopAppBarColors(
+                    containerColor = main, // Adjust color as needed
+                    titleContentColor = Color.White,
+                ), title = {
+                    Column {
+                        Text(text = appName, fontSize = 24.sp)
+                        Text(text = pageName, fontSize = 16.sp)
+                    }
+                })
+            }
+        },
+        content = {
+            Column(
+                modifier = Modifier
+                    .background(dark)
+                    .fillMaxWidth()
+                    .padding(4.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                if (!isPopupVisible) {
+                    SearchMovieBar(searchQuery, onSearchQueryChange = { searchQuery = it })
+                }
+                LazyColumn(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .weight(1f)
+                ) {
+                    items((0..3).toList()) { index ->
+                        MovieCardSearch(
+                            poster = moviePoster,
+                            name = movieTitle,
+                            description = movieDescription,
+                            onKnowMoreClick = { isPopupVisible = true },
+                            onAddToLibraryClick = { /* Handle add to library button click */ }
+                        )
+                    }
+                }
+                PreviewMovie(
+                    isPopupVisible = isPopupVisible,
+                    onCloseClick = { isPopupVisible = false })
+                Spacer(modifier = Modifier.height(55.dp))
+            }
+        },
+        bottomBar = {
+            BottomNavigation(navController = navController)
+        }
+    )
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SearchMovieBar(searchQuery: String, onSearchQueryChange: (String) -> Unit) {
+    val search = stringResource(id = R.string.app_search)
+    OutlinedTextField(
+        value = searchQuery,
+        onValueChange = { onSearchQueryChange(it) },
+        label = { Text(search) },
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 55.dp)
+            .padding(8.dp),
+        textStyle = TextStyle(color = Color.White)
+    )
+}
\ No newline at end of file
diff --git a/src/app/src/main/java/com/example/moviestudio/Components/SettingsComponent.kt b/src/app/src/main/java/com/example/moviestudio/Components/SettingsComponent.kt
new file mode 100644
index 0000000000000000000000000000000000000000..8701718ed7e633a0a6104536f016cc126c6d96c6
--- /dev/null
+++ b/src/app/src/main/java/com/example/moviestudio/Components/SettingsComponent.kt
@@ -0,0 +1,80 @@
+package com.example.moviestudio.Components
+
+import android.annotation.SuppressLint
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+import androidx.compose.material3.TopAppBarDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavController
+import com.example.moviestudio.R
+import com.example.moviestudio.ui.theme.dark
+import com.example.moviestudio.ui.theme.main
+import com.example.moviestudio.ui.theme.second
+
+@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun Settings(navController: NavController) {
+
+    val appName = stringResource(id = R.string.app_name)
+    val pageName = stringResource(id = R.string.app_settings)
+    val btnText = stringResource(id = R.string.app_clearData)
+
+    Scaffold(
+        modifier = Modifier.background(Color.Black),
+        topBar = {
+            TopAppBar(
+                colors = TopAppBarDefaults.smallTopAppBarColors(
+                    containerColor = main,
+                    titleContentColor = Color.White,
+                ),
+                title = {
+                    Column {
+                        Text(text = appName, fontSize = 24.sp)
+                        Text(text = pageName, fontSize = 16.sp)
+                    }
+                }
+            )
+        },
+        content = {
+            // Content with a Column containing a Button
+            Column(
+                modifier = Modifier
+                    .background(color = dark)
+                    .fillMaxSize()
+                    .padding(start = 10.dp),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.Center
+            ) {
+                Button(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(6.dp),
+                    onClick = { /* Handle Clear Data click */ },
+                    colors = ButtonDefaults.buttonColors(containerColor = second)
+                ) {
+                    Text(text = btnText)
+                }
+            }
+        },
+        bottomBar = {
+            BottomNavigation(navController = navController)
+        }
+    )
+}
\ No newline at end of file
diff --git a/src/app/src/main/java/com/example/moviestudio/MainActivity.kt b/src/app/src/main/java/com/example/moviestudio/MainActivity.kt
index 3add65952e58cbad83ed59f8b7e3e9707d2a19dd..c13b03f8ec61eb596dcc140ede93dcefab67562d 100644
--- a/src/app/src/main/java/com/example/moviestudio/MainActivity.kt
+++ b/src/app/src/main/java/com/example/moviestudio/MainActivity.kt
@@ -1,69 +1,16 @@
 package com.example.moviestudio
 
-import android.annotation.SuppressLint
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.horizontalScroll
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.LazyRow
-import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Add
-import androidx.compose.material3.BottomAppBar
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.Divider
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.painter.Painter
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import androidx.navigation.NavController
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
+import com.example.moviestudio.Components.Library
+import com.example.moviestudio.Components.SearchMovie
+import com.example.moviestudio.Components.Settings
 import com.example.moviestudio.ui.theme.MovieStudioTheme
-import com.example.moviestudio.ui.theme.dark
-import com.example.moviestudio.ui.theme.main
-import com.example.moviestudio.ui.theme.second
 
 class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
diff --git a/src/app/src/main/java/com/example/moviestudio/PreviewMovieActivity.kt b/src/app/src/main/java/com/example/moviestudio/PreviewMovieActivity.kt
deleted file mode 100644
index e7e718bc9f8304cd105fb1ce75a0df357adcbb3e..0000000000000000000000000000000000000000
--- a/src/app/src/main/java/com/example/moviestudio/PreviewMovieActivity.kt
+++ /dev/null
@@ -1,71 +0,0 @@
-package com.example.moviestudio
-
-import android.annotation.SuppressLint
-import android.content.Context
-import android.os.Bundle
-import androidx.activity.ComponentActivity
-import androidx.activity.compose.setContent
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Close
-import androidx.compose.material.icons.filled.Settings
-import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.modifier.modifierLocalConsumer
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import androidx.compose.ui.window.DialogProperties
-import com.example.moviestudio.ui.theme.MovieStudioTheme
-import com.example.moviestudio.ui.theme.main
-import com.example.moviestudio.ui.theme.second
-import androidx.compose.ui.platform.LocalDensity
-
-
-class PreviewMovieActivity : ComponentActivity() {
-    override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
-        setContent {
-            MovieStudioTheme {
-            }
-        }
-    }
-}
-
-
-
-
-
diff --git a/src/app/src/main/java/com/example/moviestudio/SearchMovieActivity.kt b/src/app/src/main/java/com/example/moviestudio/SearchMovieActivity.kt
deleted file mode 100644
index fa160975ba61d38f70552cdaf23ec3718f88f718..0000000000000000000000000000000000000000
--- a/src/app/src/main/java/com/example/moviestudio/SearchMovieActivity.kt
+++ /dev/null
@@ -1,78 +0,0 @@
-package com.example.moviestudio
-
-import android.annotation.SuppressLint
-import android.content.Context
-import android.os.Bundle
-import androidx.activity.ComponentActivity
-import androidx.activity.compose.setContent
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Add
-import androidx.compose.material.icons.filled.Close
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.Divider
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.painter.Painter
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.modifier.modifierLocalConsumer
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import androidx.navigation.NavController
-import androidx.navigation.compose.NavHost
-import androidx.navigation.compose.composable
-import androidx.navigation.compose.rememberNavController
-import com.example.moviestudio.ui.theme.MovieStudioTheme
-import com.example.moviestudio.ui.theme.dark
-import com.example.moviestudio.ui.theme.main
-import com.example.moviestudio.ui.theme.second
-
-
-class SearchMovieActivity : ComponentActivity() {
-    override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
-        setContent {
-            MovieStudioTheme {
-
-            }
-        }
-    }
-}
-
-
diff --git a/src/app/src/main/java/com/example/moviestudio/SettingsActivity.kt b/src/app/src/main/java/com/example/moviestudio/SettingsActivity.kt
deleted file mode 100644
index faadebfab130b1e4c80501bec54301cfe40edacd..0000000000000000000000000000000000000000
--- a/src/app/src/main/java/com/example/moviestudio/SettingsActivity.kt
+++ /dev/null
@@ -1,52 +0,0 @@
-package com.example.moviestudio
-
-import android.annotation.SuppressLint
-import android.content.Context
-import android.os.Bundle
-import androidx.activity.ComponentActivity
-import androidx.activity.compose.setContent
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.modifier.modifierLocalConsumer
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import androidx.navigation.NavController
-import androidx.navigation.compose.NavHost
-import androidx.navigation.compose.composable
-import androidx.navigation.compose.rememberNavController
-import com.example.moviestudio.ui.theme.MovieStudioTheme
-import com.example.moviestudio.ui.theme.dark
-import com.example.moviestudio.ui.theme.main
-import com.example.moviestudio.ui.theme.second
-
-
-class SettingsActivity : ComponentActivity() {
-    override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
-        setContent {
-            MovieStudioTheme {
-            }
-        }
-    }
-}
-
-
diff --git a/src/app/src/main/java/com/example/moviestudio/ShowMovie.kt b/src/app/src/main/java/com/example/moviestudio/ShowMovie.kt
deleted file mode 100644
index 16f93b569ca28f8e04a8cf4e4345ffdeedefc5fe..0000000000000000000000000000000000000000
--- a/src/app/src/main/java/com/example/moviestudio/ShowMovie.kt
+++ /dev/null
@@ -1,84 +0,0 @@
-package com.example.moviestudio
-
-import android.annotation.SuppressLint
-import android.content.Context
-import android.os.Bundle
-import androidx.activity.ComponentActivity
-import androidx.activity.compose.setContent
-import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
-import androidx.compose.foundation.border
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.lazy.LazyRow
-import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Close
-import androidx.compose.material.icons.filled.Settings
-import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
-import androidx.compose.material3.Card
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.Scaffold
-import androidx.compose.material3.Text
-import androidx.compose.material3.TextFieldColors
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.layout.ContentScale
-import androidx.compose.ui.modifier.modifierLocalConsumer
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import androidx.compose.ui.window.DialogProperties
-import com.example.moviestudio.ui.theme.MovieStudioTheme
-import com.example.moviestudio.ui.theme.main
-import com.example.moviestudio.ui.theme.second
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.text.style.TextAlign
-import com.example.moviestudio.ui.theme.dark
-import com.example.moviestudio.ui.theme.third
-
-
-class ShowMovieActivity : ComponentActivity() {
-    override fun onCreate(savedInstanceState: Bundle?) {
-        super.onCreate(savedInstanceState)
-        setContent {
-            MovieStudioTheme {
-            }
-        }
-    }
-}
-
-
-
-
-
-