diff --git a/.gitignore b/.gitignore
index aa724b7..951e883 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,4 @@
 .externalNativeBuild
 .cxx
 local.properties
+
diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..26d3352
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml
diff --git a/.idea/appInsightsSettings.xml b/.idea/appInsightsSettings.xml
index 8a76617..319f1b3 100644
--- a/.idea/appInsightsSettings.xml
+++ b/.idea/appInsightsSettings.xml
@@ -8,10 +8,17 @@
             <InsightsFilterSettings>
               <option name="connection">
                 <ConnectionSetting>
+<<<<<<< HEAD
+                  <option name="appId" value="PLACEHOLDER" />
+                  <option name="mobileSdkAppId" value="" />
+                  <option name="projectId" value="" />
+                  <option name="projectNumber" value="" />
+=======
                   <option name="appId" value="com.app.tibibalance" />
                   <option name="mobileSdkAppId" value="1:467927540157:android:9617f4b1a218f4d03fb2d4" />
                   <option name="projectId" value="tibibalnce" />
                   <option name="projectNumber" value="467927540157" />
+>>>>>>> main
                 </ConnectionSetting>
               </option>
               <option name="signal" value="SIGNAL_UNSPECIFIED" />
diff --git a/README.md b/README.md
index a0b6b47..3ed3800 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@ app/
 El directorio `ui/components` está destinado a albergar **elementos de UI reutilizables y atómicos (o de bajo nivel de composición)**. Estos componentes son la base fundamental sobre la cual se construyen pantallas más complejas. Idealmente, estos componentes deberían ser:
 
 1.  **Sin estado (Stateless):** Reciben datos y callbacks como parámetros y no gestionan su propio estado interno complejo.
-.  **Foco único:** Cada componente realiza una tarea específica de UI.
+3.  **Foco único:** Cada componente realiza una tarea específica de UI.
 
 ### Organización Interna
 
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index eaddd05..f15392b 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -43,23 +43,34 @@ android {
 }
 
 dependencies {
+    // Íconos extendidos (válidos y estables)
+    implementation("androidx.compose.material:material-icons-extended:1.5.4")
+
+    // Material 3 base (botones, layouts, etc.)
+    implementation(libs.androidx.material3)
+
+    // Firebase
     implementation(platform("com.google.firebase:firebase-bom:33.13.0"))
     implementation("com.google.firebase:firebase-analytics")
-    implementation("com.google.firebase:firebase-auth-ktx") // La extensión -ktx es para soporte de Kotlin
+    implementation("com.google.firebase:firebase-auth-ktx")
+
+    // Core de AndroidX
     implementation(libs.androidx.core.ktx)
     implementation(libs.androidx.lifecycle.runtime.ktx)
     implementation(libs.androidx.activity.compose)
+
+    // Compose
     implementation(platform(libs.androidx.compose.bom))
     implementation(libs.androidx.ui)
     implementation(libs.androidx.ui.graphics)
     implementation(libs.androidx.ui.tooling.preview)
-    implementation(libs.androidx.material3)
+
+    // Testing
     testImplementation(libs.junit)
     androidTestImplementation(libs.androidx.junit)
     androidTestImplementation(libs.androidx.espresso.core)
     androidTestImplementation(platform(libs.androidx.compose.bom))
     androidTestImplementation(libs.androidx.ui.test.junit4)
-    debugImplementation(libs.androidx.ui.tooling) 
+    debugImplementation(libs.androidx.ui.tooling)
     debugImplementation(libs.androidx.ui.test.manifest)
-    implementation("androidx.compose.material:material-icons-extended")
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/components/Alert.kt b/app/src/main/java/com/app/tibibalance/ui/components/Alert.kt
index 6ec9959..74f6839 100644
--- a/app/src/main/java/com/app/tibibalance/ui/components/Alert.kt
+++ b/app/src/main/java/com/app/tibibalance/ui/components/Alert.kt
@@ -9,7 +9,6 @@ import androidx.compose.material.icons.filled.CheckCircle
 import androidx.compose.material.icons.filled.Warning
 import androidx.compose.material.icons.filled.Error
 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
diff --git a/app/src/main/java/com/app/tibibalance/ui/components/FormContainer.kt b/app/src/main/java/com/app/tibibalance/ui/components/FormContainer.kt
index a43bf9b..36afcb9 100644
--- a/app/src/main/java/com/app/tibibalance/ui/components/FormContainer.kt
+++ b/app/src/main/java/com/app/tibibalance/ui/components/FormContainer.kt
@@ -39,7 +39,7 @@ fun FormContainer(
     )
 }
 
-/*
+
 @Preview
 @Composable
 fun LoginScreen() {
@@ -51,4 +51,40 @@ fun LoginScreen() {
         }
     }
 }
-*/
\ No newline at end of file
+
+/*@Preview
+@Composable
+fun LoginS() {
+
+
+    FormContainer {
+        // Nombre de Usuario
+        TextField(value = "", onValueChange = { }, label = { Text("Nombre de Usuario*") },
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        // Fecha de Nacimiento (con ícono)
+        TextField(
+            value = "", onValueChange = { }, label = { Text("Fecha de nacimiento*") },
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        // Correo
+        TextField(
+            value = "", onValueChange = {}, label = { Text("Correo*") },
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        // Contraseña
+        TextField(
+            value = "", onValueChange = { }, label = { Text("Contraseña*") },
+            modifier = Modifier.fillMaxWidth()
+        )
+
+        // Confirmar Contraseña
+        TextField(
+            value = "", onValueChange = { }, label = { Text("Confirmar contraseña*") },
+            modifier = Modifier.fillMaxWidth()
+        )
+    }
+}*/
diff --git a/app/src/main/java/com/app/tibibalance/ui/components/IconContainer.kt b/app/src/main/java/com/app/tibibalance/ui/components/IconContainer.kt
index 668a53f..23b63f2 100644
--- a/app/src/main/java/com/app/tibibalance/ui/components/IconContainer.kt
+++ b/app/src/main/java/com/app/tibibalance/ui/components/IconContainer.kt
@@ -1,6 +1,5 @@
 package com.app.tibibalance.ui.components
 
-import com.app.tibibalance.R
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.CircleShape
@@ -10,7 +9,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 
 @Suppress("UNUSED_FUNCTION")
@@ -35,4 +33,5 @@ fun IconContainer(
             tint = iconTint
         )
     }
-}
\ No newline at end of file
+}
+
diff --git a/app/src/main/java/com/app/tibibalance/ui/components/ImageContainer.kt b/app/src/main/java/com/app/tibibalance/ui/components/ImageContainer.kt
index 11f0a8d..f0eeab6 100644
--- a/app/src/main/java/com/app/tibibalance/ui/components/ImageContainer.kt
+++ b/app/src/main/java/com/app/tibibalance/ui/components/ImageContainer.kt
@@ -1,6 +1,5 @@
 package com.app.tibibalance.ui.components
 
-import com.app.tibibalance.R
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
@@ -11,8 +10,10 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.tooling.preview.Preview
+import com.app.tibibalance.R
+
 
 @Suppress("UNUSED_FUNCTION")
 @Composable
@@ -20,11 +21,13 @@ fun ImageContainer(
     imageResId: Int,
     contentDescription: String?,
     modifier: Modifier = Modifier,
-    backgroundColor: Color = Color.LightGray,
+    cornerRadius: Int = 12,
+    backgroundColor: Color = Color.Transparent,
     contentScale: ContentScale = ContentScale.Crop
 ) {
     Box(
         modifier = modifier
+            .clip(RoundedCornerShape(cornerRadius.dp))
             .background(backgroundColor)
     ) {
         Image(
@@ -35,7 +38,7 @@ fun ImageContainer(
         )
     }
 }
-/*
+
 @Preview
 @Composable
 fun ImageContainerPreview() {
@@ -44,4 +47,4 @@ fun ImageContainerPreview() {
         contentDescription = "ImagenPrueba",
         modifier = Modifier.size(100.dp)
     )
-}*/
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/components/InputSelect.kt b/app/src/main/java/com/app/tibibalance/ui/components/InputSelect.kt
index b7a3bb0..477c8aa 100644
--- a/app/src/main/java/com/app/tibibalance/ui/components/InputSelect.kt
+++ b/app/src/main/java/com/app/tibibalance/ui/components/InputSelect.kt
@@ -12,6 +12,9 @@ import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.foundation.background
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 
 @Composable
 fun InputSelect(
@@ -29,16 +32,25 @@ fun InputSelect(
             shape = RoundedCornerShape(16.dp),
             modifier = Modifier
                 .width(300.dp)
-                .height(45.dp)
+                .height(30.dp)
+                .clip(RoundedCornerShape(16.dp))
+                .background(Color.White)
                 .clickable { expanded = true },
             trailingIcon = {
                 Icon(
                     imageVector = Icons.Default.ArrowDropDown,
                     contentDescription = "Desplegar opciones"
                 )
-            }
+            },
+            colors = OutlinedTextFieldDefaults.colors(
+                unfocusedBorderColor = Color.White,
+                focusedBorderColor = Color.White,
+                cursorColor = Color.Transparent,
+                disabledBorderColor = Color.White
+            )
         )
 
+
         DropdownMenu(
             expanded = expanded,
             onDismissRequest = { expanded = false }
diff --git a/app/src/main/java/com/app/tibibalance/ui/components/InputText.kt b/app/src/main/java/com/app/tibibalance/ui/components/InputText.kt
index 85fdc2d..3b83716 100644
--- a/app/src/main/java/com/app/tibibalance/ui/components/InputText.kt
+++ b/app/src/main/java/com/app/tibibalance/ui/components/InputText.kt
@@ -29,7 +29,7 @@ fun InputText(
     Box(
         modifier = modifier
             .width(300.dp)
-            .height(26.dp)
+            .height(30.dp)
             .padding(start = 5.dp)
             .background(
                 color = MaterialTheme.colorScheme.surface,
diff --git a/app/src/main/java/com/app/tibibalance/ui/components/ModalContainer.kt b/app/src/main/java/com/app/tibibalance/ui/components/ModalContainer.kt
index bdcd6ef..2c262e0 100644
--- a/app/src/main/java/com/app/tibibalance/ui/components/ModalContainer.kt
+++ b/app/src/main/java/com/app/tibibalance/ui/components/ModalContainer.kt
@@ -103,3 +103,24 @@ fun ModalContainer(
         }
     }
 }
+
+//Este es el uso que me imagino debe tener este componente - Alexandra
+@Preview(showBackground = true)
+@Composable
+fun ModalContainerPreview() {
+    MaterialTheme {
+        // Usamos un Box para simular una pantalla base
+        Box(modifier = Modifier.fillMaxSize()) {
+            ModalContainer(
+                onDismissRequest = {}, // Aquí puedes conectar a una variable si lo deseas
+                closeButtonEnabled = true
+            ) {
+                Text("Este es un ejemplo de contenido del modal.")
+                Spacer(modifier = Modifier.height(8.dp))
+                Button(onClick = {}) {
+                    Text("Aceptar")
+                }
+            }
+        }
+    }
+}
diff --git a/app/src/main/java/com/app/tibibalance/ui/components/ProfileContainer.kt b/app/src/main/java/com/app/tibibalance/ui/components/ProfileContainer.kt
index eb2ee60..ea1b737 100644
--- a/app/src/main/java/com/app/tibibalance/ui/components/ProfileContainer.kt
+++ b/app/src/main/java/com/app/tibibalance/ui/components/ProfileContainer.kt
@@ -40,7 +40,7 @@ fun ProfileContainer(
     }
 }
 
-/*
+
 @Preview
 @Composable
 fun ProfilePreview() {
@@ -50,4 +50,3 @@ fun ProfilePreview() {
         contentDescription = "Foto de perfil"
     )
 }
-*/
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/components/ProgressBar.kt b/app/src/main/java/com/app/tibibalance/ui/components/ProgressBar.kt
index 840c63c..d2e0251 100644
--- a/app/src/main/java/com/app/tibibalance/ui/components/ProgressBar.kt
+++ b/app/src/main/java/com/app/tibibalance/ui/components/ProgressBar.kt
@@ -1,4 +1,3 @@
-// file: ui/components/ProgressBar.kt
 package com.app.tibibalance.ui.components
 
 import androidx.compose.foundation.background
@@ -64,4 +63,4 @@ fun ProgressBar(
 @Composable
 fun ProgressBarPreview() {
     ProgressBar(percent = 100)
-}
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/components/SecondaryButton.kt b/app/src/main/java/com/app/tibibalance/ui/components/SecondaryButton.kt
index a7ef77e..b3a34c2 100644
--- a/app/src/main/java/com/app/tibibalance/ui/components/SecondaryButton.kt
+++ b/app/src/main/java/com/app/tibibalance/ui/components/SecondaryButton.kt
@@ -18,17 +18,20 @@ fun SecondaryButton(
     text: String,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
-    enabled: Boolean = true
+    enabled: Boolean = true,
+    backgroundColor: Color = Color.Transparent // Nuevo parámetro
 ) {
     OutlinedButton(
         onClick = onClick,
         modifier = modifier.width(120.dp).height(40.dp),
         enabled = enabled,
         shape = RoundedCornerShape(12.dp),
+
         colors = ButtonDefaults.outlinedButtonColors(
+            containerColor = backgroundColor, // Aquí aplicamos el fondo
             contentColor = Color.Black
         ),
-        border = BorderStroke(1.dp, Color.Black)
+        border = BorderStroke(1.dp, Color.White)
     ) {
         Text(
             text = text,
diff --git a/app/src/main/java/com/app/tibibalance/ui/components/Switch.kt b/app/src/main/java/com/app/tibibalance/ui/components/Switch.kt
index 93b9a9d..7f86561 100644
--- a/app/src/main/java/com/app/tibibalance/ui/components/Switch.kt
+++ b/app/src/main/java/com/app/tibibalance/ui/components/Switch.kt
@@ -69,4 +69,4 @@ fun SwitchTogglePreview() {
             SwitchToggle(checked = on, onCheckedChange = { on = it })
         }
     }
-}
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/components/imageButton.kt b/app/src/main/java/com/app/tibibalance/ui/components/imageButton.kt
new file mode 100644
index 0000000..b3cf69a
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/components/imageButton.kt
@@ -0,0 +1,38 @@
+package com.app.tibibalance.ui.components
+
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.IconButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun ImageButton(
+    onClick: () -> Unit,
+    imageRes: Int, // Recurso de la imagen
+    modifier: Modifier = Modifier,
+    size: Int = 48 // Tamaño del botón
+) {
+    IconButton(
+        onClick = onClick,
+        modifier = modifier.size(size.dp) // Tamaño del botón
+    ) {
+        // Usamos Image para mostrar la imagen dentro del botón
+        Image(
+            painter = painterResource(id = imageRes), // Recurso de imagen
+            contentDescription = "Botón de imagen",
+            modifier = Modifier.size(size.dp) // Ajustar tamaño de la imagen
+        )
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun ImageButtonPreview() {
+    // Reemplaza el recurso con la imagen que tienes en tus recursos
+    ImageButton(onClick = { /* Acción al hacer clic */ }, imageRes = android.R.drawable.ic_menu_add)
+}
diff --git a/app/src/main/java/com/app/tibibalance/ui/preview/FeatureAddHabitScreenPreview.kt b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureAddHabitScreenPreview.kt
new file mode 100644
index 0000000..c8774e0
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureAddHabitScreenPreview.kt
@@ -0,0 +1,11 @@
+package com.app.tibibalance.ui.preview
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.app.tibibalance.ui.screens.FeatureAddHabitScreen
+
+@Preview
+@Composable
+fun FeatureAddHabitScreenPreview() {
+    FeatureAddHabitScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/preview/FeatureEditProfileScreenPreview.kt b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureEditProfileScreenPreview.kt
new file mode 100644
index 0000000..33b1911
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureEditProfileScreenPreview.kt
@@ -0,0 +1,12 @@
+package com.app.tibibalance.ui.preview
+
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.app.tibibalance.ui.screens.FeatureEditProfileScreen
+
+@Preview
+@Composable
+fun FeatureEditProfileScreenPreview() {
+    FeatureEditProfileScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/preview/FeatureForgotPasswordScreenPreview.kt b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureForgotPasswordScreenPreview.kt
new file mode 100644
index 0000000..3b41beb
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureForgotPasswordScreenPreview.kt
@@ -0,0 +1,11 @@
+package com.app.tibibalance.ui.preview
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.app.tibibalance.ui.screens.FeatureForgotPasswordScreen
+
+@Preview
+@Composable
+fun FeatureForgotPasswordScreenPreview() {
+    FeatureForgotPasswordScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/preview/FeatureHomeScreenPreview.kt b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureHomeScreenPreview.kt
new file mode 100644
index 0000000..3d9e1ff
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureHomeScreenPreview.kt
@@ -0,0 +1,12 @@
+package com.app.tibibalance.ui.preview
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.app.tibibalance.ui.screens.FeatureHomeScreen
+
+
+@Preview
+@Composable
+fun FeatureHomeScreenPreview() {
+    FeatureHomeScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/preview/FeatureLoginScreenPreview.kt b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureLoginScreenPreview.kt
new file mode 100644
index 0000000..464b46f
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureLoginScreenPreview.kt
@@ -0,0 +1,11 @@
+package com.app.tibibalance.ui.preview
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.app.tibibalance.ui.screens.FeatureLoginScreen
+
+@Preview
+@Composable
+fun FeatureLoginScreenPreview() {
+    FeatureLoginScreen()
+}
diff --git a/app/src/main/java/com/app/tibibalance/ui/preview/FeatureMyAchivementScreenPreview.kt b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureMyAchivementScreenPreview.kt
new file mode 100644
index 0000000..8c8e90b
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureMyAchivementScreenPreview.kt
@@ -0,0 +1,11 @@
+package com.app.tibibalance.ui.preview
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.app.tibibalance.ui.screens.FeatureMyAchivementsScreen
+
+@Preview
+@Composable
+fun FeatureMyAchivementsScreenPreview() {
+    FeatureMyAchivementsScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/preview/FeatureRegisterScreenPreview.kt b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureRegisterScreenPreview.kt
new file mode 100644
index 0000000..ed2aebf
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureRegisterScreenPreview.kt
@@ -0,0 +1,11 @@
+package com.app.tibibalance.ui.preview
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.app.tibibalance.ui.screens.FeatureRegisterScreen
+
+@Preview
+@Composable
+fun FeatureRegisterScreenPreview() {
+    FeatureRegisterScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/preview/FeatureResetPasswordScreenPreview.kt b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureResetPasswordScreenPreview.kt
new file mode 100644
index 0000000..db29d6b
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureResetPasswordScreenPreview.kt
@@ -0,0 +1,11 @@
+package com.app.tibibalance.ui.preview
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.app.tibibalance.ui.screens.FeatureResetPasswordScreen
+
+@Preview
+@Composable
+fun FeatureResetPasswordScreenPreview() {
+    FeatureResetPasswordScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/preview/FeatureViewProfileScreenPreview.kt b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureViewProfileScreenPreview.kt
new file mode 100644
index 0000000..6649d67
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/preview/FeatureViewProfileScreenPreview.kt
@@ -0,0 +1,11 @@
+package com.app.tibibalance.ui.preview
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.app.tibibalance.ui.screens.FeatureViewProfileScreen
+
+@Preview
+@Composable
+fun FeatureViewProfileScreenPreview() {
+    FeatureViewProfileScreen()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/screens/FeatureAddHabitScreen.kt b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureAddHabitScreen.kt
new file mode 100644
index 0000000..73f590a
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureAddHabitScreen.kt
@@ -0,0 +1,218 @@
+package com.app.tibibalance.ui.screens
+
+
+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.layout.wrapContentHeight
+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.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.graphics.Color
+
+import com.app.tibibalance.ui.components.Description
+import com.app.tibibalance.ui.components.FormContainer
+import com.app.tibibalance.ui.components.Header
+
+import com.app.tibibalance.ui.components.InputSelect
+import com.app.tibibalance.ui.components.InputText
+import com.app.tibibalance.ui.components.SecondaryButton
+import com.app.tibibalance.ui.components.Subtitle
+import com.app.tibibalance.ui.components.ImageButton
+
+@Composable
+fun FeatureAddHabitScreen() {
+    // Contenido de la pantalla
+    Box(modifier = Modifier.fillMaxSize()) {
+        GradientBackgroundScreen {
+            // Contenido de la pantalla
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                //.background(Color(0xFFf5f5f5)) // Fondo gris claro
+            ) {
+
+                Column(
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .padding(16.dp)
+                ) {
+
+
+                    FormContainer(
+                        modifier = Modifier
+                            .height(850.dp)  // Establece un alto específico
+                    ) {
+                        Spacer(modifier = Modifier.height(2.dp))
+
+                        Subtitle(
+                            text = "Crear mi propio hábito",
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .wrapContentHeight(Alignment.CenterVertically),
+                            textAlign = TextAlign.Center
+                        )
+
+
+                        ImageButton(
+                            onClick = { /* Acción */ },
+                            imageRes = com.app.tibibalance.R.drawable.ic_button_habit,
+                            modifier = Modifier
+                                .width(100.dp) // Cambia el ancho
+                                .height(100.dp) // Cambia el alto
+                            ,
+                            size = 64, // Tamaño de la imagen interna (puedes dejar este valor si no quieres cambiarlo)
+                        )
+
+
+                            Description(
+                            text = "Nombre: *",
+                            modifier = Modifier
+                                .fillMaxWidth(),
+                            textAlign = TextAlign.Start
+                        )
+                        var nombre by remember { mutableStateOf("Nora Soto") }
+                        InputText(
+                            value = nombre,
+                            onValueChange = { nombre = it }
+                        )
+                        Spacer(modifier = Modifier.height(2.dp))
+
+                        Description(
+                            text = "Descripción:",
+                            modifier = Modifier
+                                .fillMaxWidth(),
+                            textAlign = TextAlign.Start
+                        )
+                        var descripcion by remember { mutableStateOf("") }
+                        InputText(
+                            value = descripcion,
+                            onValueChange = { descripcion = it }
+                        )
+                        Spacer(modifier = Modifier.height(2.dp))
+
+                        Description(
+                            text = "frecuencia: *",
+                            modifier = Modifier
+                                .fillMaxWidth(),
+                            textAlign = TextAlign.Start
+                        )
+                        var frecuencia by remember { mutableStateOf("Diario") }
+                        InputSelect(
+                            options = listOf("Diario", "Semanal", "Mensual"),
+                            selectedOption = frecuencia,
+                            onOptionSelected = { frecuencia = it }
+                        )
+                        Spacer(modifier = Modifier.height(2.dp))
+
+                        Description(
+                            text = "Duración:",
+                            modifier = Modifier
+                                .fillMaxWidth(),
+                            textAlign = TextAlign.Start
+                        )
+                        var duracion by remember { mutableStateOf("") }
+                        InputText(
+                            value = duracion,
+                            onValueChange = { duracion = it }
+                        )
+                        Spacer(modifier = Modifier.height(2.dp))
+
+
+                        Description(
+                            text = "Categoría: *",
+                            modifier = Modifier
+                                .fillMaxWidth(),
+                            textAlign = TextAlign.Start
+                        )
+                        var categoria by remember { mutableStateOf("Diario") }
+                        InputSelect(
+                            options = listOf("Diario", "Semanal", "Mensual"),
+                            selectedOption = categoria,
+                            onOptionSelected = { categoria = it }
+                        )
+
+                        Spacer(modifier = Modifier.height(5.dp))
+                        Row(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(bottom = 16.dp),
+                            horizontalArrangement = Arrangement.Center,
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            Description(
+                                text = "Notificación: *",
+                                modifier = Modifier
+                                    .fillMaxWidth(),
+                                textAlign = TextAlign.Start
+                            )
+
+                           /* ImageButton(
+                                onClick = { /* Acción */ },
+                                imageRes = com.app.tibibalance.R.drawable.ic_button_notification,
+                                modifier = Modifier
+                                    .width(64.dp) // Cambia el ancho
+                                    .height(64.dp) // Cambia el alto
+                                ,
+                               size = 64, // Tamaño de la imagen interna (puedes dejar este valor si no quieres cambiarlo)
+                            )*/
+
+                        }
+
+
+                        Spacer(modifier = Modifier.height(40.dp))
+
+                        Row(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(bottom = 16.dp),
+                            horizontalArrangement = Arrangement.Center,
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+
+                            Spacer(modifier = Modifier.width(8.dp))
+                            SecondaryButton(
+                                text = "Guardar",
+                                onClick = {},
+                                backgroundColor = Color.White
+                            )
+
+                            Spacer(modifier = Modifier.width(20.dp)) // 1f es un peso relativo
+
+                            SecondaryButton(
+                                text = "Cancelar",
+                                onClick = {},
+                                backgroundColor = Color.White
+                            )
+                        }
+
+                    }
+
+                }
+            }
+        }
+
+        // 2. Header encima del gradiente (posición fija arriba)
+        Header(
+            title = "Agregar Hábito",
+            showBackButton = false,
+            profileImage = null,
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+        )
+
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/screens/FeatureEditProfileScreen.kt b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureEditProfileScreen.kt
new file mode 100644
index 0000000..cfe662f
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureEditProfileScreen.kt
@@ -0,0 +1,143 @@
+package com.app.tibibalance.ui.screens
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.app.tibibalance.R
+import com.app.tibibalance.ui.components.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.height
+
+
+
+
+@Composable
+fun FeatureEditProfileScreen() {
+    // Contenido de la pantalla
+    Box(modifier = Modifier.fillMaxSize()) {
+        GradientBackgroundScreen {
+            // Contenido de la pantalla
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+            ) {
+                Column(
+                    modifier = Modifier
+                        .align(Alignment.TopCenter)
+                        .padding(top = 80.dp)
+                ) {
+                    ProfileContainer(
+                        imageResId = R.drawable.imagenprueba,
+                        size = 110.dp,
+                        contentDescription = "Foto de perfil"
+                    )
+                }
+                Column(
+                    modifier = Modifier
+                        .align(Alignment.TopCenter)
+                        .padding(top = 190.dp)
+                ) {
+                    // Este es otro botón? Falta el componente? <- - - - - - - - alargar componente
+                    SecondaryButton(
+                        modifier = Modifier
+                            .width(150.dp) // Cambia aquí el ancho
+                            .height(50.dp) // Y aquí el alto si quieres,
+                            .padding(top = 10.dp),
+                        text = "Cambiar Foto",
+                        onClick = { } //Cambiar Foto de perfil
+                    )
+                }
+                Column(
+                    modifier = Modifier.padding(top = 270.dp)
+                ) {
+                    Subtitle(
+                        text = "Nombre de usuario:"
+                    )
+                    InputText(
+                        value = "nora soto", //Colocar el nombre del usuario desde Firebase
+                        onValueChange = { },
+                        modifier = Modifier.padding(top = 10.dp)
+                    )
+                    //Falta icono de editar (lapiz)
+
+                    Subtitle(
+                        text = "Correo electrónico:",
+                        modifier = Modifier.padding(top = 20.dp)
+                    )
+                    /*var email by remember { mutableStateOf("") } //Este input tiene el formato de registro
+                    InputEmail(
+                        value = email,
+                        onValueChange = { email = it }
+                    )*/
+                    InputText(
+                        value = "norasoto5@gmail.com", //Colocar el nombre del usuario desde Firebase
+                        onValueChange = { },
+                        modifier = Modifier.padding(top = 10.dp)
+                    )
+                    Caption(
+                        text = "El correo electrónico no es editable"
+                    )
+
+                    Subtitle(
+                        text = "Fecha de nacimiento:",
+                        modifier = Modifier.padding(top = 20.dp)
+                    )
+                    var date by remember { mutableStateOf("01/05/2025") }
+                    InputDate(selectedDate = date, onDateSelected = { date = it })
+                    //Falta icono de editar (lapiz)
+
+                    Subtitle(
+                        text = "Contraseña:",
+                        modifier = Modifier.padding(top = 20.dp)
+                    )
+                    InputText(
+                        value = "********", //Colocar contraseña encriptada desde Firebase
+                        onValueChange = { },
+                        modifier = Modifier
+                            .padding(top = 10.dp)
+                    )
+                    //Falta icono de editar (lapiz)
+                    Box(modifier = Modifier.fillMaxSize()) {
+                        Row(
+                            modifier = Modifier
+                                .align(Alignment.TopCenter)
+                                .padding(top = 50.dp), // Padding externo (alrededor de toda la fila)
+
+                            horizontalArrangement = Arrangement.spacedBy(30.dp), // Espacio entre los elementos de la fila
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            SecondaryButton(
+                                text = "Guardar",
+                                onClick = {} //Mostrar mensaje de confirmacion o warning (si no se hicieron cambios)
+                            )
+
+                            SecondaryButton(
+                                text = "Cancelar",
+                                onClick = {} //Mostrar mensaje de alerta
+                            )
+                        }
+                    }
+                    //Agregar navbar
+                }
+            }
+        }
+        Header(
+            title = "Editar Información Personal",
+            // Si se ingresa a esta pantalla desde los ajustes, el boton de regreso onBackClick lleva a ajustes, no a Visualizar perfil *
+            showBackButton = true,
+            onBackClick = { }, //Redireccionar a Visualizar perfil
+            profileImage = null
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/screens/FeatureForgotPasswordScreen.kt b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureForgotPasswordScreen.kt
new file mode 100644
index 0000000..2ff3c96
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureForgotPasswordScreen.kt
@@ -0,0 +1,73 @@
+package com.app.tibibalance.ui.screens
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+
+import com.app.tibibalance.R
+import com.app.tibibalance.ui.components.*
+
+@Composable
+fun FeatureForgotPasswordScreen() {
+    Box(modifier = Modifier.fillMaxSize()){
+        GradientBackgroundScreen {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+        ) {
+            Column(
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .padding(16.dp)
+            ) {
+                ImageContainer(
+                    imageResId = R.drawable.password1,
+                    contentDescription = "Recuperar contraseña",
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(400.dp)
+                        .padding(vertical = 16.dp)
+                )
+                Description(
+                    text = "Ingresa tu correo electrónico y enviaremos un link para recuperar tu contraseña",
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(bottom = 16.dp),
+                    textAlign = TextAlign.Center
+                )
+                FormContainer {
+                    var email by remember { mutableStateOf("") }
+                    InputEmail(
+                        value = email,
+                        onValueChange = { email = it },
+                        placeholder = "Correo electrónico"
+                    )
+                }
+
+                PrimaryButton(
+                    text = "Enviar",  // Pasamos el texto al botón
+                    onClick = { /* Acción del primer botón */ },
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(bottom = 16.dp, top = 16.dp)
+                )
+
+            }
+        }
+        }
+        //Encabezado/Header - - - - -> Falta un componente?
+        Header(
+            title = "Recuperar Contraseña",
+            showBackButton = true,
+            onBackClick = { }, //Redireccionar a iniciar sesión
+            profileImage = null
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/screens/FeatureHomeScreen.kt b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureHomeScreen.kt
new file mode 100644
index 0000000..bcc4043
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureHomeScreen.kt
@@ -0,0 +1,100 @@
+package com.app.tibibalance.ui.screens
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+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.text.style.*
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.unit.dp
+import com.app.tibibalance.ui.components.*
+
+import com.app.tibibalance.R
+
+@Composable
+fun GradientBackgroundScreen(content: @Composable () -> Unit) {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(
+                brush = Brush.verticalGradient(
+                    colors = listOf(
+                        Color(0xFFB3E5FC), // Azul claro (puedes ajustar el tono)
+                        Color.White
+                    )
+                )
+            )
+            .padding(16.dp) // Opcional
+    ) {
+        content()
+    }
+}
+
+@Composable
+fun FeatureHomeScreen() {
+    GradientBackgroundScreen {
+        // Contenido de la pantalla
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                //.background(Color(0xFFf5f5f5)) // Fondo gris claro
+        ) {
+            Column(
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .padding(16.dp)
+            ) {
+                Title(
+                    text = "Bienvenido/ a/ e",
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(bottom = 16.dp),
+                    textAlign = TextAlign.Center
+                )
+                ImageContainer(
+                    imageResId = R.drawable.ic_home,  // Reemplaza con tu imagen
+                    contentDescription = "Imagen de inicio", // Descripción de la imagen
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(310.dp)
+                        .padding(bottom = 32.dp)
+                )
+                Description(
+                    text = "“La app que te ayuda a mantener un estilo de  vida saludable”",
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(bottom = 16.dp),
+                    textAlign = TextAlign.Center
+                )
+
+                // Primer PrimaryButton
+
+                Spacer(modifier = Modifier.height(30.dp))
+
+
+                PrimaryButton(
+                    text = "Iniciar sesión",
+                    onClick = { /* Acción del botón */ },
+                    modifier = Modifier
+                        .align(Alignment.CenterHorizontally)
+                    // .padding(bottom = 16.dp)
+                )
+
+                Spacer(modifier = Modifier.height(25.dp))
+
+                PrimaryButton(
+                    text = "Registrarse",
+                    onClick = { /* Acción del botón */ },
+                    modifier = Modifier
+                        .align(Alignment.CenterHorizontally)
+                        .padding(bottom = 16.dp)
+                )
+
+
+
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/screens/FeatureLoginScreen.kt b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureLoginScreen.kt
new file mode 100644
index 0000000..640a895
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureLoginScreen.kt
@@ -0,0 +1,146 @@
+package com.app.tibibalance.ui.screens
+
+
+// Jetpack Compose UI
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.*  // Incluye remember, mutableStateOf, by, etc.
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+
+// Recursos (como imágenes)
+import com.app.tibibalance.R
+
+// Componentes personalizados de tu app
+import com.app.tibibalance.ui.components.*
+
+
+
+
+@Composable
+fun FeatureLoginScreen() {
+    // Contenido de la pantalla
+    Box(modifier = Modifier.fillMaxSize()) {
+        GradientBackgroundScreen {
+            // Contenido de la pantalla
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+            ) {
+
+                Column(
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .fillMaxSize()
+                        .padding(16.dp)
+                ) {
+
+
+                    ImageContainer(
+                        imageResId = R.drawable.ic_login_image,  // Reemplaza con tu imagen
+                        contentDescription = "Imagen de inicio", // Descripción de la imagen
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .height(398.dp)
+                            .padding(bottom = 32.dp)
+                    )
+
+                    FormContainer(
+                        modifier = Modifier
+                            .height(185.dp)  // Establece un alto específico
+                    ) {
+                        var email by remember { mutableStateOf("") }
+                        InputEmail(
+                            value = email,
+                            onValueChange = { email = it },
+                            placeholder = "Correo electrónico"
+                        )
+                        var pwd by remember { mutableStateOf("") }
+                        InputPassword(
+                            value = pwd,
+                            onValueChange = { pwd = it }
+                        )
+
+                        Row(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(bottom = 16.dp),
+                            horizontalArrangement = Arrangement.Center,
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            Description(
+                                text = "¿Olvidaste tu contraseña? ",
+                                textAlign = TextAlign.Center
+                            )
+                            Spacer(modifier = Modifier.width(8.dp))
+                            TextButtonLink(
+                                text = "Clic aquí",
+                                onClick = {}
+                            )
+                        }
+                    }
+
+                    Spacer(modifier = Modifier.height(15.dp))
+                    // Primer PrimaryButton
+
+
+                    PrimaryButton(
+                        text = "Iniciar sesión",
+                        onClick = { /* Acción del botón */ },
+                        modifier = Modifier
+                            .align(Alignment.CenterHorizontally)
+                        // .padding(bottom = 16.dp)
+                    )
+
+                    Spacer(modifier = Modifier.height(10.dp))
+                    ImageContainer(
+                        imageResId = R.drawable.ic_separador_image,  // Reemplaza con tu imagen
+                        contentDescription = "Imagen de inicio", // Descripción de la imagen
+                        modifier = Modifier
+                            .align(Alignment.CenterHorizontally) // Centra horizontalmente en Column
+                            .width(240.dp) // Ancho fijo
+                            .height(15.dp)
+                    )
+                    Spacer(modifier = Modifier.height(10.dp))
+                    GoogleSignButton(
+                        onClick = { /* Acción del botón */ },
+                        modifier = Modifier
+                            .align(Alignment.CenterHorizontally)
+                    )
+
+                    Row(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(bottom = 16.dp),
+                        horizontalArrangement = Arrangement.Center,
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Description(
+                            text = "¿Aún no tienes una cuenta?",
+                            textAlign = TextAlign.Center
+                        )
+                        Spacer(modifier = Modifier.width(8.dp))
+                        TextButtonLink(
+                            text = "Regístrate",
+                            onClick = {}
+                        )
+                    }
+
+
+                }
+            }
+        }
+
+        // 2. Header encima del gradiente (posición fija arriba)
+        Header(
+            //profileImage = dummyProfile
+            title = "Iniciar Sesión",
+            showBackButton = true,
+            onBackClick = { },
+            profileImage = null,
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+        )
+    }
+}
diff --git a/app/src/main/java/com/app/tibibalance/ui/screens/FeatureMyAchivementsScreen.kt b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureMyAchivementsScreen.kt
new file mode 100644
index 0000000..27c6155
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureMyAchivementsScreen.kt
@@ -0,0 +1,81 @@
+package com.app.tibibalance.ui.screens
+
+import android.widget.ProgressBar
+import androidx.compose.foundation.layout.Box
+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.foundation.layout.wrapContentHeight
+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.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.app.tibibalance.R
+import com.app.tibibalance.ui.components.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.Image
+import androidx.compose.ui.res.painterResource
+
+
+@Composable
+fun FeatureMyAchivementsScreen() {
+    // Contenido de la pantalla
+    Box(modifier = Modifier.fillMaxSize()) {
+        GradientBackgroundScreen {
+            // Contenido de la pantalla
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+            )
+            {
+                Column(
+                        modifier = Modifier
+                            .align(Alignment.TopCenter)
+                            .padding(top = 80.dp)
+                )
+                {
+                    FormContainer(
+                        modifier = Modifier
+                            .height(734.dp)  // Establece un alto específico
+                            .padding(20.dp)
+                    )
+                    {
+                        //Mostrar todos los logros cargados en Firebase (agregar un for aqui) - - - - -> Firebase
+                        Row() {
+                            AchievementContainer(
+                                icon = {
+                                    Image(
+                                        painter = painterResource(id = R.drawable.racha),
+                                        contentDescription = "Ícono de logro"
+                                    )
+                                },
+                                title = "Racha", //Cambiar por el nombre del i-esimo logro
+                                description = "Usaste la app 3 días seguidos", //Cambiar por la descripción del i-esimo logro
+                                percent = 75 //Cambiar por el porcentaje del usuario en el i-ésimo Firebase
+                            )
+                        }
+                    }
+
+                }
+            }
+            }
+        }
+        Header(
+            title = "Mis Logros",
+            // Si se ingresa a esta pantalla desde los ajustes, el boton de regreso onBackClick lleva a ajustes, no a Visualizar perfil *
+            showBackButton = true,
+            onBackClick = { }, //Redireccionar a Visualizar perfil
+            profileImage = null
+        )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/app/tibibalance/ui/screens/FeatureRegisterScreen.kt b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureRegisterScreen.kt
new file mode 100644
index 0000000..55ac827
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureRegisterScreen.kt
@@ -0,0 +1,249 @@
+/*package com.app.tibibalance.ui.screens
+
+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.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.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.app.tibibalance.R
+import com.app.tibibalance.ui.components.Description
+import com.app.tibibalance.ui.components.FormContainer
+import com.app.tibibalance.ui.components.GoogleSignButton
+import com.app.tibibalance.ui.components.Header
+import com.app.tibibalance.ui.components.ImageContainer
+import com.app.tibibalance.ui.components.InputDate
+import com.app.tibibalance.ui.components.InputEmail
+import com.app.tibibalance.ui.components.InputPassword
+import com.app.tibibalance.ui.components.InputText
+import com.app.tibibalance.ui.components.PrimaryButton
+import com.app.tibibalance.ui.components.TextButtonLink
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+
+
+@Composable
+fun FeatureRegisterScreen() {
+    GradientBackgroundScreen {
+        // Contenido de la pantalla
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+        ) {
+            val scrollState = rememberScrollState()
+            Column(
+                modifier = Modifier.fillMaxSize()
+                    .fillMaxSize()
+                    .verticalScroll(scrollState)
+                    .padding(5.dp),
+            )
+            {
+                Header(
+                    title = "Registrasrse",
+                    showBackButton = true,
+                    onBackClick = {
+                        // Lógica al hacer clic en la flecha de retroceso
+                    },
+                    profileImage = null // No mostrar imagen de perfil
+                )
+
+                ImageContainer(
+                    imageResId = R.drawable.registro_logo,  // Reemplaza con tu imagen
+                    contentDescription = "Imagen registro", // Descripción de la imagen
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(398.dp)
+                        .padding(bottom = 32.dp)
+                )
+
+                FormContainer {
+
+                    var username by remember { mutableStateOf("") }
+                    InputText(
+                        value = username,
+                        onValueChange = { username = it },
+                    )
+
+                    var date by remember { mutableStateOf("") }
+                    InputDate(
+                        selectedDate = date,
+                        onDateSelected = { date = it }
+                    )
+
+                    var email by remember { mutableStateOf("") }
+                    InputEmail(
+                        value = email,
+                        onValueChange = { email = it },
+                        placeholder = "Correo electrónico"
+                    )
+
+                    var password by remember { mutableStateOf("") }
+                    InputPassword(
+                        value = password,
+                        onValueChange = { password = it },
+                        placeholder = "Contraseña"
+                    )
+
+                    var confirmPwd by remember { mutableStateOf("") }
+                    InputPassword(
+                        value = confirmPwd,
+                        onValueChange = { confirmPwd = it },
+                        placeholder = "Confirmar contraseña"
+                    )
+                }
+
+                Spacer(modifier = Modifier.height(20.dp))
+                // Primer PrimaryButton
+                PrimaryButton(
+                    text = "Registrarse",  // Pasamos el texto al botón
+                    onClick = { /* Acción del primer botón */ },
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(bottom = 16.dp)
+                )
+
+                GoogleSignButton(
+                    onClick = { /* Acción del botón */ },
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(bottom = 16.dp) // Ajusta el espacio entre botones
+                )
+
+                Row(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(bottom = 16.dp),
+                    horizontalArrangement = Arrangement.Center,
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Description(
+                        text = "¿Ya tienes una cuenta? ",
+                        textAlign = TextAlign.Center
+                    )
+                    Spacer(modifier = Modifier.width(8.dp))
+                    TextButtonLink(
+                        text = "Iniciar Sesion",
+                        onClick = {}
+                    )
+                }
+            }
+        }
+    }
+}*/
+package com.app.tibibalance.ui.screens
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.app.tibibalance.R
+import com.app.tibibalance.ui.components.*
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListScope
+
+@Composable
+fun FeatureRegisterScreen() {
+    Box(modifier = Modifier.fillMaxSize()) {
+        GradientBackgroundScreen {
+            Box(modifier = Modifier.fillMaxSize()) {
+                LazyColumn(
+                ) {
+                    item {
+                        Spacer(modifier = Modifier.height(35.dp)) // Deja espacio para el header superpuesto
+
+                        ImageContainer(
+                            imageResId = R.drawable.registro_logo,
+                            contentDescription = "Imagen registro",
+                            modifier = Modifier
+                                //.fillMaxWidth()
+                                .height(340.dp)
+                        )
+
+                        Spacer(modifier = Modifier.height(6.dp))
+                    }
+
+                    item {
+                        FormContainer {
+                            var nombredeususrio by remember { mutableStateOf("") }
+                            InputEmail(value = nombredeususrio, onValueChange = { nombredeususrio = it })
+                            //placeholder = "Nombre de Usuario*"
+
+                            var date by remember { mutableStateOf("Fecha de Nacimiento*") }
+                            InputDate(selectedDate = date, onDateSelected = { date = it })
+
+                            var email by remember { mutableStateOf("") }
+                            InputEmail(value = email, onValueChange = { email = it })
+
+                            var pwd by remember { mutableStateOf("") }
+                            InputPassword(value = pwd, onValueChange = { pwd = it })
+
+                            var confpwd by remember { mutableStateOf("") }
+                            InputPassword(value = confpwd, onValueChange = { confpwd = it })
+                        }
+
+                        Spacer(modifier = Modifier.height(5.dp))
+                    }
+
+                    item {
+                        PrimaryButton(
+                            text = "Registrarse",
+                            onClick = { },
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(bottom = 5.dp)
+                        )
+
+                        GoogleSignButton(
+                            onClick = { },
+                            modifier = Modifier
+                                .fillMaxWidth()
+                        )
+
+                        Row(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .padding(bottom = 5.dp),
+                            horizontalArrangement = Arrangement.Center,
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            Description(
+                                text = "¿Ya tienes una cuenta? ",
+                                textAlign = TextAlign.Center
+                            )
+                            //Spacer(modifier = Modifier.width(8.dp))
+                            TextButtonLink(
+                                text = "Iniciar Sesión",
+                                onClick = { }
+                            )
+                        }
+                    }
+                }
+            }
+        }
+
+        // Header superpuesto como en "Recuperar Contraseña"
+        Header(
+            title = "Registrarse",
+            showBackButton = true,
+            onBackClick = { },
+            profileImage = null
+        )
+    }
+}
diff --git a/app/src/main/java/com/app/tibibalance/ui/screens/FeatureResetPasswordScreen.kt b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureResetPasswordScreen.kt
new file mode 100644
index 0000000..4acf9d2
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureResetPasswordScreen.kt
@@ -0,0 +1,105 @@
+package com.app.tibibalance.ui.screens
+
+import androidx.compose.foundation.layout.Box
+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.layout.wrapContentHeight
+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.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.app.tibibalance.R
+import com.app.tibibalance.ui.components.Description
+import com.app.tibibalance.ui.components.FormContainer
+import com.app.tibibalance.ui.components.Header
+import com.app.tibibalance.ui.components.ImageContainer
+import com.app.tibibalance.ui.components.InputPassword
+import com.app.tibibalance.ui.components.PrimaryButton
+
+
+@Composable
+fun FeatureResetPasswordScreen() {
+    Box(modifier = Modifier.fillMaxSize()) {
+
+        // 1. Fondo con gradiente
+        GradientBackgroundScreen {
+            // Contenido con gradiente, sin el Header
+            Box(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(top = 80.dp) // Espacio para que el header no lo tape
+            ) {
+                Column(
+                    modifier = Modifier
+                        .align(Alignment.Center)
+                        .padding(16.dp)
+                ) {
+                    ImageContainer(
+                        imageResId = R.drawable.ic_reset_password_image,
+                        contentDescription = "Imagen de inicio",
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .height(398.dp)
+                            .padding(bottom = 32.dp)
+                    )
+
+                    Description(
+                        text = "Ingresa tu nueva contraseña",
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .wrapContentHeight(Alignment.CenterVertically),
+                        textAlign = TextAlign.Center
+                    )
+
+                    Spacer(modifier = Modifier.height(20.dp))
+
+                    FormContainer(
+                        modifier = Modifier.height(170.dp)
+                    ) {
+                        var newpassword by remember { mutableStateOf("") }
+
+                        InputPassword(
+                            value = newpassword,
+                            onValueChange = { newpassword = it },
+                            placeholder = "Nueva Contraseña"
+                        )
+                        Spacer(modifier = Modifier.height(10.dp))
+                        var confirmPassword by remember { mutableStateOf("") }
+
+                        InputPassword(
+                            value = confirmPassword,
+                            onValueChange = { confirmPassword = it },
+                            placeholder = "Confirmar Contraseña"
+                        )
+                    }
+
+                    Spacer(modifier = Modifier.height(30.dp))
+
+                    PrimaryButton(
+                        text = "Enviar",
+                        onClick = { /* Acción del botón */ },
+                        modifier = Modifier.align(Alignment.CenterHorizontally)
+                    )
+                }
+            }
+        }
+
+        // 2. Header encima del gradiente (posición fija arriba)
+        Header(
+            title = "Reestablecer Contraseña",
+            showBackButton = false,
+            profileImage = null,
+            modifier = Modifier
+                .align(Alignment.TopCenter)
+        )
+    }
+}
diff --git a/app/src/main/java/com/app/tibibalance/ui/screens/FeatureViewProfileScreen.kt b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureViewProfileScreen.kt
new file mode 100644
index 0000000..feb5c4c
--- /dev/null
+++ b/app/src/main/java/com/app/tibibalance/ui/screens/FeatureViewProfileScreen.kt
@@ -0,0 +1,102 @@
+package com.app.tibibalance.ui.screens
+
+import androidx.compose.runtime.Composable
+import androidx.compose.foundation.layout.Box
+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.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.app.tibibalance.R
+import com.app.tibibalance.ui.components.*
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.graphics.Color
+@Composable
+fun FeatureViewProfileScreen() {
+    Box(modifier = Modifier.fillMaxSize()) {
+        GradientBackgroundScreen {
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(horizontal = 16.dp, vertical = 24.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Spacer(modifier = Modifier.height(56.dp)) // Espacio para el header superpuesto
+
+                FormContainer(
+                    modifier = Modifier.padding(top = 16.dp)
+                ) {
+                    ProfileContainer(
+                        imageResId = R.drawable.imagenprueba,
+                        size = 110.dp,
+                        contentDescription = "Foto de perfil"
+                    )
+                    Spacer(modifier = Modifier.height(12.dp))
+                    Subtitle(text = "Nora Soto")
+
+                    Spacer(modifier = Modifier.height(20.dp))
+
+                    Subtitle(
+                        text = "Fecha de nacimiento:",
+                        modifier = Modifier.padding(top = 20.dp)
+                    )
+                    InputText(
+                        value = "29/07/2004",
+                        onValueChange = { },
+                        modifier = Modifier.padding(top = 10.dp)
+                    )
+
+                    Subtitle(
+                        text = "Correo electrónico:",
+                        modifier = Modifier.padding(top = 20.dp)
+                    )
+                    InputText(
+                        value = "norasoto5@gmail.com",
+                        onValueChange = { },
+                        modifier = Modifier.padding(top = 10.dp)
+                    )
+
+                    Box(modifier = Modifier.fillMaxSize()) {
+                        Row(
+                            modifier = Modifier
+                                .align(Alignment.TopCenter)
+                                .padding(top = 50.dp),
+                            horizontalArrangement = Arrangement.spacedBy(30.dp),
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            SecondaryButton(
+                                text = "Editar perfil",
+                                onClick = {},
+                                backgroundColor = Color.White
+                            )
+
+                            SecondaryButton(
+                                text = "Cerrar sesión",
+                                onClick = {},
+                                backgroundColor = Color.White
+                            )
+                        }
+                    }
+                }
+            }
+        }
+
+        // Header superpuesto
+        Header(
+            title = "Visualizar Perfil",
+            showBackButton = true,
+            onBackClick = { },
+            profileImage = null
+        )
+    }
+}
+
diff --git a/app/src/main/res/drawable/bienvenido.png b/app/src/main/res/drawable/bienvenido.png
new file mode 100644
index 0000000..876b3c7
Binary files /dev/null and b/app/src/main/res/drawable/bienvenido.png differ
diff --git a/app/src/main/res/drawable/ic_button_habit.png b/app/src/main/res/drawable/ic_button_habit.png
new file mode 100644
index 0000000..fa702dc
Binary files /dev/null and b/app/src/main/res/drawable/ic_button_habit.png differ
diff --git a/app/src/main/res/drawable/ic_button_notification.png b/app/src/main/res/drawable/ic_button_notification.png
new file mode 100644
index 0000000..430c7ce
Binary files /dev/null and b/app/src/main/res/drawable/ic_button_notification.png differ
diff --git a/app/src/main/res/drawable/ic_buttonnotification_image.png b/app/src/main/res/drawable/ic_buttonnotification_image.png
new file mode 100644
index 0000000..7851928
Binary files /dev/null and b/app/src/main/res/drawable/ic_buttonnotification_image.png differ
diff --git a/app/src/main/res/drawable/ic_home.png b/app/src/main/res/drawable/ic_home.png
new file mode 100644
index 0000000..9075590
Binary files /dev/null and b/app/src/main/res/drawable/ic_home.png differ
diff --git a/app/src/main/res/drawable/ic_login_image.png b/app/src/main/res/drawable/ic_login_image.png
new file mode 100644
index 0000000..d50dfc4
Binary files /dev/null and b/app/src/main/res/drawable/ic_login_image.png differ
diff --git a/app/src/main/res/drawable/ic_reset_password_image.png b/app/src/main/res/drawable/ic_reset_password_image.png
new file mode 100644
index 0000000..4b1dcb7
Binary files /dev/null and b/app/src/main/res/drawable/ic_reset_password_image.png differ
diff --git a/app/src/main/res/drawable/ic_separador_image.png b/app/src/main/res/drawable/ic_separador_image.png
new file mode 100644
index 0000000..28aa86c
Binary files /dev/null and b/app/src/main/res/drawable/ic_separador_image.png differ
diff --git a/app/src/main/res/drawable/imagenprueba.png b/app/src/main/res/drawable/imagenprueba.png
new file mode 100644
index 0000000..654a0b9
Binary files /dev/null and b/app/src/main/res/drawable/imagenprueba.png differ
diff --git a/app/src/main/res/drawable/logros.png b/app/src/main/res/drawable/logros.png
new file mode 100644
index 0000000..d56b041
Binary files /dev/null and b/app/src/main/res/drawable/logros.png differ
diff --git a/app/src/main/res/drawable/password1.png b/app/src/main/res/drawable/password1.png
new file mode 100644
index 0000000..f3ca537
Binary files /dev/null and b/app/src/main/res/drawable/password1.png differ
diff --git a/app/src/main/res/drawable/personalizado.png b/app/src/main/res/drawable/personalizado.png
new file mode 100644
index 0000000..bc1b92d
Binary files /dev/null and b/app/src/main/res/drawable/personalizado.png differ
diff --git a/app/src/main/res/drawable/racha.png b/app/src/main/res/drawable/racha.png
new file mode 100644
index 0000000..ff4de24
Binary files /dev/null and b/app/src/main/res/drawable/racha.png differ
diff --git a/app/src/main/res/drawable/recover.png b/app/src/main/res/drawable/recover.png
new file mode 100644
index 0000000..b0f9e33
Binary files /dev/null and b/app/src/main/res/drawable/recover.png differ
diff --git a/app/src/main/res/drawable/registro_logo.png b/app/src/main/res/drawable/registro_logo.png
new file mode 100644
index 0000000..35031a0
Binary files /dev/null and b/app/src/main/res/drawable/registro_logo.png differ